@charset "UTF-8";
/* ============================================================
   FONTS · Montserrat (локально, переменное начертание 100–900)
   С Google Fonts не ходим: файлы лежат в templates/fonts/montserrat.
   ============================================================ */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/montserrat/montserrat-9WRhyzbi.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/montserrat/montserrat-9W1hyzbi.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/montserrat/montserrat-9WZhyzbi.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/montserrat/montserrat-9Wdhyzbi.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/montserrat/montserrat-459Wlhyw.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; }

/* ============================================================
   ADDITIONAL.CSS — per-project block & component styles.
   The framework + ALL theme tokens (colors, fonts, scales, buttons) live in
   codyframe.css. This file ships EMPTY: append each project's block styles
   below under a banner comment, built on CodyFrame utilities first — only what
   utilities truly can't express goes here.
   ============================================================ */

/* ============================================================
   THEME · JELAND — PROPOSED TOKENS + BUTTON SKIN
   Move this block into codyframe.css once the owner approves it.
   Sampled from jelandrus.ru: page slate #181d21, panels #1d282d,
   steel blue #3a83a3, outline #4e8eaf, teal #024d54.
   Font stays Montserrat (framework default).
   ============================================================ */
:root, [data-theme=default] {
  --color-primary-darker: hsl(198, 52%, 27%); --color-primary-darker-h: 198; --color-primary-darker-s: 52%; --color-primary-darker-l: 27%;
  --color-primary-dark: hsl(198, 50%, 36%); --color-primary-dark-h: 198; --color-primary-dark-s: 50%; --color-primary-dark-l: 36%;
  --color-primary: hsl(198, 48%, 43%); --color-primary-h: 198; --color-primary-s: 48%; --color-primary-l: 43%;
  --color-primary-light: hsl(200, 38%, 50%); --color-primary-light-h: 200; --color-primary-light-s: 38%; --color-primary-light-l: 50%;
  --color-primary-lighter: hsl(199, 45%, 72%); --color-primary-lighter-h: 199; --color-primary-lighter-s: 45%; --color-primary-lighter-l: 72%;
  --color-accent-darker: hsl(185, 95%, 10%); --color-accent-darker-h: 185; --color-accent-darker-s: 95%; --color-accent-darker-l: 10%;
  --color-accent-dark: hsl(185, 95%, 14%); --color-accent-dark-h: 185; --color-accent-dark-s: 95%; --color-accent-dark-l: 14%;
  --color-accent: hsl(185, 95%, 17%); --color-accent-h: 185; --color-accent-s: 95%; --color-accent-l: 17%;
  --color-accent-light: hsl(185, 70%, 23%); --color-accent-light-h: 185; --color-accent-light-s: 70%; --color-accent-light-l: 23%;
  --color-accent-lighter: hsl(185, 45%, 35%); --color-accent-lighter-h: 185; --color-accent-lighter-s: 45%; --color-accent-lighter-l: 35%;
  --color-secondary-darker: hsl(203, 10%, 16%); --color-secondary-darker-h: 203; --color-secondary-darker-s: 10%; --color-secondary-darker-l: 16%;
  --color-secondary-dark: hsl(203, 9%, 21%); --color-secondary-dark-h: 203; --color-secondary-dark-s: 9%; --color-secondary-dark-l: 21%;
  --color-secondary: hsl(203, 9%, 26%); --color-secondary-h: 203; --color-secondary-s: 9%; --color-secondary-l: 26%;
  --color-secondary-light: hsl(203, 8%, 33%); --color-secondary-light-h: 203; --color-secondary-light-s: 8%; --color-secondary-light-l: 33%;
  --color-secondary-lighter: hsl(203, 7%, 40%); --color-secondary-lighter-h: 203; --color-secondary-lighter-s: 7%; --color-secondary-lighter-l: 40%;
  --color-black: hsl(207, 20%, 4%); --color-black-h: 207; --color-black-s: 20%; --color-black-l: 4%;
  --color-white: hsl(0, 0%, 100%); --color-white-h: 0; --color-white-s: 0%; --color-white-l: 100%;
  --color-bg-darker: hsl(207, 16%, 6%); --color-bg-darker-h: 207; --color-bg-darker-s: 16%; --color-bg-darker-l: 6%;
  --color-bg-dark: hsl(207, 16%, 8%); --color-bg-dark-h: 207; --color-bg-dark-s: 16%; --color-bg-dark-l: 8%;
  --color-bg: hsl(207, 16%, 11%); --color-bg-h: 207; --color-bg-s: 16%; --color-bg-l: 11%;
  --color-bg-light: hsl(199, 22%, 15%); --color-bg-light-h: 199; --color-bg-light-s: 22%; --color-bg-light-l: 15%;
  --color-bg-lighter: hsl(199, 18%, 19%); --color-bg-lighter-h: 199; --color-bg-lighter-s: 18%; --color-bg-lighter-l: 19%;
  --color-contrast-lower: hsl(203, 13%, 18%); --color-contrast-lower-h: 203; --color-contrast-lower-s: 13%; --color-contrast-lower-l: 18%;
  --color-contrast-low: hsl(203, 8%, 30%); --color-contrast-low-h: 203; --color-contrast-low-s: 8%; --color-contrast-low-l: 30%;
  --color-contrast-medium: hsl(203, 6%, 60%); --color-contrast-medium-h: 203; --color-contrast-medium-s: 6%; --color-contrast-medium-l: 60%;
  --color-contrast-high: hsl(200, 10%, 86%); --color-contrast-high-h: 200; --color-contrast-high-s: 10%; --color-contrast-high-l: 86%;
  --color-contrast-higher: hsl(0, 0%, 100%); --color-contrast-higher-h: 0; --color-contrast-higher-s: 0%; --color-contrast-higher-l: 100%;
  --jl-bg: 207, 16%, 11%;
  --jl-panel: 199, 22%, 15%;
}
[data-theme=dark] {
  --color-primary-darker: hsl(198, 52%, 27%); --color-primary-darker-h: 198; --color-primary-darker-s: 52%; --color-primary-darker-l: 27%;
  --color-primary-dark: hsl(198, 50%, 36%); --color-primary-dark-h: 198; --color-primary-dark-s: 50%; --color-primary-dark-l: 36%;
  --color-primary: hsl(198, 48%, 43%); --color-primary-h: 198; --color-primary-s: 48%; --color-primary-l: 43%;
  --color-primary-light: hsl(200, 38%, 50%); --color-primary-light-h: 200; --color-primary-light-s: 38%; --color-primary-light-l: 50%;
  --color-primary-lighter: hsl(199, 45%, 72%); --color-primary-lighter-h: 199; --color-primary-lighter-s: 45%; --color-primary-lighter-l: 72%;
  --color-accent-darker: hsl(185, 95%, 10%); --color-accent-darker-h: 185; --color-accent-darker-s: 95%; --color-accent-darker-l: 10%;
  --color-accent-dark: hsl(185, 95%, 14%); --color-accent-dark-h: 185; --color-accent-dark-s: 95%; --color-accent-dark-l: 14%;
  --color-accent: hsl(185, 95%, 17%); --color-accent-h: 185; --color-accent-s: 95%; --color-accent-l: 17%;
  --color-accent-light: hsl(185, 70%, 23%); --color-accent-light-h: 185; --color-accent-light-s: 70%; --color-accent-light-l: 23%;
  --color-accent-lighter: hsl(185, 45%, 35%); --color-accent-lighter-h: 185; --color-accent-lighter-s: 45%; --color-accent-lighter-l: 35%;
  --color-secondary-darker: hsl(203, 10%, 16%); --color-secondary-darker-h: 203; --color-secondary-darker-s: 10%; --color-secondary-darker-l: 16%;
  --color-secondary-dark: hsl(203, 9%, 21%); --color-secondary-dark-h: 203; --color-secondary-dark-s: 9%; --color-secondary-dark-l: 21%;
  --color-secondary: hsl(203, 9%, 26%); --color-secondary-h: 203; --color-secondary-s: 9%; --color-secondary-l: 26%;
  --color-secondary-light: hsl(203, 8%, 33%); --color-secondary-light-h: 203; --color-secondary-light-s: 8%; --color-secondary-light-l: 33%;
  --color-secondary-lighter: hsl(203, 7%, 40%); --color-secondary-lighter-h: 203; --color-secondary-lighter-s: 7%; --color-secondary-lighter-l: 40%;
  --color-black: hsl(207, 20%, 4%); --color-black-h: 207; --color-black-s: 20%; --color-black-l: 4%;
  --color-white: hsl(0, 0%, 100%); --color-white-h: 0; --color-white-s: 0%; --color-white-l: 100%;
  --color-bg-darker: hsl(0, 0%, 0%); --color-bg-darker-h: 0; --color-bg-darker-s: 0%; --color-bg-darker-l: 0%;
  --color-bg-dark: hsl(207, 18%, 3%); --color-bg-dark-h: 207; --color-bg-dark-s: 18%; --color-bg-dark-l: 3%;
  --color-bg: hsl(207, 18%, 5%); --color-bg-h: 207; --color-bg-s: 18%; --color-bg-l: 5%;
  --color-bg-light: hsl(207, 14%, 9%); --color-bg-light-h: 207; --color-bg-light-s: 14%; --color-bg-light-l: 9%;
  --color-bg-lighter: hsl(203, 12%, 13%); --color-bg-lighter-h: 203; --color-bg-lighter-s: 12%; --color-bg-lighter-l: 13%;
  --color-contrast-lower: hsl(207, 10%, 13%); --color-contrast-lower-h: 207; --color-contrast-lower-s: 10%; --color-contrast-lower-l: 13%;
  --color-contrast-low: hsl(207, 7%, 26%); --color-contrast-low-h: 207; --color-contrast-low-s: 7%; --color-contrast-low-l: 26%;
  --color-contrast-medium: hsl(203, 6%, 58%); --color-contrast-medium-h: 203; --color-contrast-medium-s: 6%; --color-contrast-medium-l: 58%;
  --color-contrast-high: hsl(200, 10%, 86%); --color-contrast-high-h: 200; --color-contrast-high-s: 10%; --color-contrast-high-l: 86%;
  --color-contrast-higher: hsl(0, 0%, 100%); --color-contrast-higher-h: 0; --color-contrast-higher-s: 0%; --color-contrast-higher-l: 100%;
  --jl-bg: 207, 18%, 5%;
  --jl-panel: 207, 14%, 9%;
}
:root {
  --radius: 0;
  --heading-font-weight: 700;
  --heading-line-height: 1.15;
  --body-line-height: 1.6;
  --btn-font-size: var(--text-sm);
  --btn-padding-x: var(--space-md);
  --btn-padding-y: var(--space-sm);
  --btn-radius: 0;
  --btn-cut: var(--space-xs);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --jl-ink: 207, 20%, 4%;
  --jl-white: 0, 0%, 100%;
  --hdr-h: calc(var(--space-unit) * 3.75);
  --hdr-top: var(--space-xs);
  --hdr-space: calc(var(--hdr-h) + var(--hdr-top));
}
@media (min-width: 64rem) { :root { --hdr-h: calc(var(--space-unit) * 4.5); --hdr-top: var(--space-md); } }

/* buttons — JELAND: square, bottom-right corner cut */
.btn { gap: var(--space-xs); border-radius: 0; border: 1px solid var(--color-accent); background: var(--color-accent); color: var(--color-white); font-size: var(--btn-font-size); font-weight: 500; letter-spacing: 0.01em; line-height: 1.2; -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--btn-cut)), calc(100% - var(--btn-cut)) 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--btn-cut)), calc(100% - var(--btn-cut)) 100%, 0 100%); transition: background-color 0.35s, border-color 0.35s, color 0.35s, transform 0.6s var(--ease-expo); will-change: auto; }
.btn:hover { border-radius: 0; border: 1px solid var(--color-accent-light); background: var(--color-accent-light); color: var(--color-white); font-weight: 500; }
.btn:focus { box-shadow: none; }
.btn:focus-visible { box-shadow: inset 0 0 0 2px var(--color-white); }
.btn .ic { width: 1.2em; height: 1.2em; transition: transform 0.6s var(--ease-expo); }
.btn--primary, .btn--primary:hover, .btn--secondary, .btn--secondary:hover, .btn--subtle, .btn--subtle:hover, .btn--accent, .btn--accent:hover { font-size: var(--btn-font-size); font-weight: 500; }
.btn--primary { background: var(--color-primary); border: 1px solid var(--color-primary); color: var(--color-white); }
.btn--primary:hover { background: var(--color-primary-dark); border: 1px solid var(--color-primary-dark); color: var(--color-white); }
.btn--primary:focus, .btn--secondary:focus, .btn--subtle:focus, .btn--accent:focus { box-shadow: none; }
.btn--primary:focus-visible, .btn--secondary:focus-visible, .btn--subtle:focus-visible { box-shadow: inset 0 0 0 2px var(--color-white); }
.btn--secondary { background: transparent; border: 1px solid var(--color-primary-light); color: var(--color-white); }
.btn--secondary::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: var(--btn-cut); height: var(--btn-cut); pointer-events: none; background: linear-gradient(to top left, transparent calc(50% - 1px), var(--color-primary-light) calc(50% - 1px), var(--color-primary-light) calc(50% + 1px), transparent calc(50% + 1px)); transition: opacity 0.35s; }
.btn--secondary:hover { background: var(--color-primary); border: 1px solid var(--color-primary); color: var(--color-white); }
.btn--secondary:hover::after { opacity: 0; }
.btn--subtle { background: var(--color-secondary); border: 1px solid var(--color-secondary); color: var(--color-white); }
.btn--subtle:hover { background: var(--color-secondary-light); border: 1px solid var(--color-secondary-light); color: var(--color-white); }
.btn--accent { --btn-cut: 0px; padding-left: 0; padding-right: 0; background: transparent; border: 1px solid transparent; color: var(--color-white); -webkit-clip-path: none; clip-path: none; }
.btn--accent .ic { color: var(--color-primary-light); }
.btn--accent:hover { background: transparent; border: 1px solid transparent; color: var(--color-primary-lighter); }
.btn--accent:hover .ic { transform: translate3d(2px, -2px, 0); }
.btn--accent:focus-visible { box-shadow: none; outline: 2px solid var(--color-primary-light); outline-offset: 2px; }

/* ============================================================
   BASE · JELAND
   ============================================================ */
html { background-color: var(--color-bg); }
html.has-smooth { scroll-behavior: auto; }
body { overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html.is-menu, html.is-menu body { overflow: hidden; }
h1, h2, h3, h4 { --heading-font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
h5 { font-size: var(--text-md); font-weight: 600; line-height: 1.3; }
h6 { font-size: var(--text-sm); font-weight: 600; line-height: 1.3; }
p { text-wrap: pretty; }
img { display: block; }
::selection { background: var(--color-primary); color: var(--color-white); }
a, a:hover { color: inherit; text-decoration: none; }
.text-component a { color: var(--color-primary-lighter); text-decoration: underline; text-underline-offset: 0.2em; }
.text-component a:hover { color: var(--color-white); }
.icons { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1.25em; height: 1.25em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* shared: label, section title, price */
.eyebrow { font-size: var(--text-xs); font-weight: 600; line-height: 1.5; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-contrast-high); }
.sec-title { font-size: var(--text-xxl); line-height: 1.12; letter-spacing: -0.02em; color: var(--color-contrast-higher); }
@media (min-width: 64rem) { .sec-title { font-size: var(--text-xxxl); } }
.price { display: flex; flex-direction: column; gap: var(--space-xxxs); }
.price span { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-contrast-medium); }
.price b { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; color: var(--color-white); }
.perk { --cut: var(--space-xxs); position: relative; display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xxs) var(--space-sm); overflow: hidden; background: var(--color-primary); color: var(--color-white); font-size: var(--text-sm); font-weight: 700; line-height: 1.3; letter-spacing: 0.01em; white-space: nowrap; text-decoration: none; -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); transition: background-color 0.3s; }
.perk:hover { background: var(--color-primary-dark); color: var(--color-white); }
.perk .ic { width: 1.1em; height: 1.1em; flex-shrink: 0; transition: transform 0.6s var(--ease-expo); }
.perk:hover .ic { transform: translate3d(0.2em, -0.1em, 0); }
.perk::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none; background: linear-gradient(100deg, hsla(var(--jl-white), 0) 0%, hsla(var(--jl-white), 0.4) 50%, hsla(var(--jl-white), 0) 100%); transform: translate3d(-120%, 0, 0) skewX(-18deg); animation: jlPerk 5s var(--ease-out) infinite; }
@keyframes jlPerk { 0%, 64% { transform: translate3d(-120%, 0, 0) skewX(-18deg); } 100% { transform: translate3d(320%, 0, 0) skewX(-18deg); } }

/* ============================================================
   MOTION · split text + reveal (hidden state only under .js)
   ============================================================ */
.sw, .sc { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.si { display: inline-block; }
.js [data-split] .si { transform: translate3d(0, 108%, 0); transition: transform 1.2s var(--ease-expo); transition-delay: calc(var(--i, 0) * var(--stagger, 32ms) + var(--delay, 0ms)); }
.js [data-split].is-in .si { transform: none; }
.js [data-reveal="fade"] { opacity: 0; transform: translate3d(0, var(--space-md), 0); transition: opacity 1s var(--ease-out), transform 1.3s var(--ease-expo); transition-delay: var(--delay, 0ms); }
.js [data-reveal="fade"].is-in { opacity: 1; transform: none; }
html.is-static [data-reveal], html.is-static .si { transition: none !important; }

/* ============================================================
   GLOBAL · progress + cursor
   ============================================================ */
.progress { position: fixed; top: 0; left: 0; right: 0; z-index: 61; height: 2px; background: var(--color-primary); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
.cursor { position: fixed; top: 0; left: 0; z-index: 90; display: none; pointer-events: none; mix-blend-mode: difference; }
.has-cursor .cursor { display: block; }
.cursor__dot { position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: var(--space-sm); height: var(--space-sm); border-radius: 50%; background: var(--color-white); transform: translate(-50%, -50%); opacity: 0; transition: width 0.5s var(--ease-expo), height 0.5s var(--ease-expo), border-radius 0.4s, opacity 0.3s, background-color 0.3s; }
.cursor.is-on .cursor__dot { opacity: 1; }
.cursor.is-hover .cursor__dot { width: calc(var(--space-unit) * 3); height: calc(var(--space-unit) * 3); }
.cursor.is-label { mix-blend-mode: normal; }
.cursor.is-label .cursor__dot { width: calc(var(--space-unit) * 8); height: calc(var(--space-unit) * 2.75); border-radius: 0; background: var(--color-primary); -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--space-xs)), calc(100% - var(--space-xs)) 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--space-xs)), calc(100% - var(--space-xs)) 100%, 0 100%); }
.cursor__label { font-size: var(--text-sm); font-weight: 500; white-space: nowrap; color: var(--color-white); opacity: 0; transition: opacity 0.3s; }
.cursor.is-label .cursor__label { opacity: 1; }

/* ============================================================
   GLOBAL · _header (floating inset bar) + mobile menu
   ============================================================ */
.hdr { position: fixed; z-index: 60; top: var(--hdr-top); left: var(--hdr-top); right: var(--hdr-top); color: var(--color-white); transition: transform 0.7s var(--ease-expo); }
.hdr.is-away { transform: translate3d(0, calc(-100% - var(--hdr-top) - 2px), 0); }
html.is-menu .hdr { transform: none; }
.hdr__bar { height: var(--hdr-h); padding-inline: var(--space-sm); background: hsla(var(--jl-panel), 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hdr__brand { display: flex; align-items: center; flex-shrink: 0; color: var(--color-white); }
.hdr__logo { width: calc(var(--space-unit) * 6.5); height: auto; filter: brightness(0) invert(1); }
.hdr__name { font-size: var(--text-sm); font-weight: 600; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: var(--color-white); }
.hdr__tag { display: block; font-size: var(--text-xs); font-weight: 400; line-height: 1.2; white-space: nowrap; color: var(--color-contrast-medium); }
.hdr.is-tight .hdr__tag { display: none; }
.hdr.is-tighter .hdr__name { display: none; }
@media (max-width: 31.99rem) { .hdr__logo { width: calc(var(--space-unit) * 5.5); } .hdr__name { font-size: var(--text-xs); letter-spacing: 0.05em; } }
.hdr__nav a { position: relative; display: block; padding-block: var(--space-xs); white-space: nowrap; font-size: var(--text-sm); font-weight: 500; color: var(--color-white); transition: color 0.3s; }
.hdr__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-primary); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.6s var(--ease-expo); }
.hdr__nav a:hover { color: var(--color-primary-lighter); }
.hdr__nav a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.hdr__link { display: inline-flex; align-items: center; gap: var(--space-xs); white-space: nowrap; font-size: var(--text-sm); font-weight: 500; color: var(--color-white); transition: color 0.3s; }
.hdr__link .ic { color: var(--color-primary-light); }
.hdr__link:hover { color: var(--color-primary-lighter); }
.hdr__burger { position: relative; flex-shrink: 0; width: calc(var(--space-unit) * 2.75); height: calc(var(--space-unit) * 2.75); border: 0; background: var(--color-secondary); color: inherit; cursor: pointer; -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--space-xxs)), calc(100% - var(--space-xxs)) 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--space-xxs)), calc(100% - var(--space-xxs)) 100%, 0 100%); }
.hdr__burger span { position: absolute; left: 30%; right: 30%; height: 2px; background: currentColor; transition: transform 0.6s var(--ease-expo); }
.hdr__burger span:first-child { top: calc(50% - 4px); }
.hdr__burger span:last-child { top: calc(50% + 2px); }
html.is-menu .hdr__burger span:first-child { transform: translate3d(0, 3px, 0) rotate(45deg); }
html.is-menu .hdr__burger span:last-child { transform: translate3d(0, -3px, 0) rotate(-45deg); }
@media (min-width: 64rem) { .hdr__bar { padding-inline: var(--space-lg); } .hdr__logo { width: calc(var(--space-unit) * 7.75); } }

.mnav { position: fixed; inset: 0; z-index: 55; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-top: var(--hdr-space); background: var(--color-bg); visibility: hidden; -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); transition: clip-path 0.9s var(--ease-expo), visibility 0s 0.9s; }
html.is-menu .mnav { visibility: visible; -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); transition: clip-path 0.9s var(--ease-expo); }
.mnav__in { min-height: 100%; padding-block: var(--space-lg); }
.mnav__list a { display: flex; align-items: baseline; gap: var(--space-sm); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-contrast-lower); font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em; color: var(--color-white); opacity: 0; transform: translate3d(0, 40%, 0); transition: transform 0.9s var(--ease-expo), opacity 0.6s, color 0.3s; }
.mnav__list a:hover { color: var(--color-primary-lighter); }
.mnav__list a b { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; color: var(--color-primary-light); }
html.is-menu .mnav__list a { opacity: 1; transform: none; }
html.is-menu .mnav__list li:nth-child(2) a { transition-delay: 0.05s; }
html.is-menu .mnav__list li:nth-child(3) a { transition-delay: 0.1s; }
html.is-menu .mnav__list li:nth-child(4) a { transition-delay: 0.15s; }
html.is-menu .mnav__list li:nth-child(5) a { transition-delay: 0.2s; }
html.is-menu .mnav__list li:nth-child(6) a { transition-delay: 0.25s; }
.mnav__foot { font-size: var(--text-sm); color: var(--color-contrast-medium); }
.mnav__phone { font-size: var(--text-lg); font-weight: 600; color: var(--color-white); }
@media (max-height: 56rem) { .mnav__in { padding-block: var(--space-md); } .mnav__list a { padding-block: var(--space-xs); font-size: var(--text-lg); } }
@media (max-height: 40rem) { .mnav__list a { font-size: var(--text-md); } }

/* ████████████████████████████████████████████████████████████
   BLOCK · block_hero (model slider)
   ████████████████████████████████████████████████████████████ */
.hero { position: relative; height: var(--screen, 100svh); min-height: calc(var(--space-unit) * 38); overflow: hidden; background: var(--color-bg); color: var(--color-white); touch-action: pan-y; }
.hero__slides { position: absolute; inset: 0; transform: translate3d(0, calc(var(--hp, 0) * 18%), 0); will-change: transform; }
.hero__slides::after { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--color-bg); opacity: calc(var(--hp, 0) * 0.8); pointer-events: none; }
.hslide { position: absolute; inset: 0; visibility: hidden; }
.hslide.is-active { z-index: 2; visibility: visible; }
.hslide.is-leaving { z-index: 1; visibility: visible; }
.hslide__media { position: absolute; inset: 0; overflow: hidden; -webkit-clip-path: polygon(120% 0, 120% 0, 120% 100%, 110% 100%); clip-path: polygon(120% 0, 120% 0, 120% 100%, 110% 100%); }
.hero.is-back .hslide:not(.is-active):not(.is-leaving) .hslide__media { -webkit-clip-path: polygon(-20% 0, -10% 0, -20% 100%, -20% 100%); clip-path: polygon(-20% 0, -10% 0, -20% 100%, -20% 100%); }
.hslide.is-active .hslide__media, .hslide.is-leaving .hslide__media { -webkit-clip-path: polygon(-10% 0, 120% 0, 120% 100%, -20% 100%); clip-path: polygon(-10% 0, 120% 0, 120% 100%, -20% 100%); }
.hslide.is-active .hslide__media { transition: clip-path 1.3s var(--ease-expo), -webkit-clip-path 1.3s var(--ease-expo); }
.hslide__zoom { position: absolute; inset: 0; transform: scale(1.2); }
.hslide__zoom picture { position: absolute; inset: 0; }
.hslide.is-active .hslide__zoom { transform: none; transition: transform 2.2s var(--ease-expo); }
.js:not(.is-loaded) .hslide.is-active .hslide__zoom { transform: scale(1.25); }
.hslide.is-leaving .hslide__zoom { transform: translate3d(calc(var(--dir, 1) * -6%), 0, 0) scale(1.12); transition: transform 1.3s var(--ease-expo); }
html.is-static .hslide__zoom { transform: none !important; transition: none !important; }
.hslide__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; transform: scale(1.06); }
.hslide__shade { position: absolute; inset: 0; background: linear-gradient(180deg, hsla(var(--jl-bg), 0.85) 0%, hsla(var(--jl-bg), 0.55) 28%, hsla(var(--jl-bg), 0.5) 55%, hsla(var(--jl-bg), 0.92) 100%); }
@media (min-width: 64rem) { .hslide__shade { background: linear-gradient(90deg, hsla(var(--jl-bg), 0.88) 0%, hsla(var(--jl-bg), 0.66) 32%, hsla(var(--jl-bg), 0.22) 58%, hsla(var(--jl-bg), 0) 76%), linear-gradient(180deg, hsla(var(--jl-bg), 0.75) 0%, hsla(var(--jl-bg), 0.28) 30%, hsla(var(--jl-bg), 0.12) 55%, hsla(var(--jl-bg), 0.9) 100%); } }
.hslide__shade::after { content: ""; position: absolute; inset: 0; background: var(--color-bg); opacity: 0; transition: opacity 1.3s var(--ease-out); }
.hslide.is-leaving .hslide__shade::after { opacity: 0.6; }
.hslide__in { position: relative; z-index: 2; height: 100%; padding-top: calc(var(--hdr-space) + var(--space-lg)); padding-bottom: calc(var(--space-unit) * 7); }
.hslide__txt { gap: var(--space-xs); transform: translate3d(0, calc(var(--hp, 0) * -30%), 0); opacity: calc(1 - var(--hp, 0) * 1.6); }
/* до 64rem текст первого экрана прижимаем к низу, ближе к вкладкам моделей */
@media (max-width: 63.99rem) { .hslide__in { display: flex; flex-direction: column; justify-content: flex-end; } }
.hslide.is-leaving .hslide__txt { opacity: 0; transform: translate3d(calc(var(--dir, 1) * -3%), 0, 0); transition: opacity 0.4s, transform 0.9s var(--ease-expo); }
.hslide.is-reset .si, .hslide.is-reset [data-reveal] { transition: none !important; }
.hslide__txt .eyebrow { color: var(--color-white); --delay: 150ms; }
.hslide__title { font-size: calc(var(--text-xxxl) * 1.15); line-height: 1; letter-spacing: -0.03em; white-space: nowrap; color: var(--color-white); --delay: 250ms; --stagger: 45ms; }
.hslide__txt .price { margin-top: var(--space-xs); --delay: 650ms; }
.hslide__txt .price span { color: hsla(var(--jl-white), 0.8); }
.hslide__btns { margin-top: var(--space-sm); --delay: 800ms; }
.hslide__btns .btn--secondary { background: hsla(var(--jl-bg), 0.55); border-color: hsla(var(--jl-white), 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hslide__btns .btn--secondary::after { background: linear-gradient(to top left, transparent calc(50% - 1px), hsla(var(--jl-white), 0.7) calc(50% - 1px), hsla(var(--jl-white), 0.7) calc(50% + 1px), transparent calc(50% + 1px)); }
.hslide__btns .btn--secondary:hover { background: var(--color-primary); border-color: var(--color-primary); }
.hero__nav { position: absolute; left: 0; right: 0; bottom: var(--space-md); z-index: 3; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-md); opacity: calc(1 - var(--hp, 0) * 2.5); }
/* вкладки по ширине названия, одной строкой: лишние уезжают в прокрутку, а не во второй ряд */
.hero__tabs { flex: 0 1 auto; min-width: 0; display: flex; gap: var(--space-lg); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.hero__tabs::-webkit-scrollbar { display: none; }
.hero__tab { flex: 0 0 auto; scroll-snap-align: start; }
.hero__tab { position: relative; display: flex; align-items: baseline; gap: var(--space-xxs); padding: var(--space-xs) 0 var(--space-xxs); border: 0; background: transparent; font-family: inherit; line-height: 1.2; text-align: left; color: hsla(var(--jl-white), 0.6); cursor: pointer; transition: color 0.3s; }
.hero__tab:hover, .hero__tab.is-active { color: var(--color-white); }
.hero__tab:focus-visible { outline: 2px solid var(--color-primary-light); outline-offset: 4px; }
.hero__line { position: absolute; left: 0; right: 0; top: 0; height: 2px; overflow: hidden; background: hsla(var(--jl-white), 0.25); }
.hero__line > span { position: absolute; inset: 0; background: var(--color-primary); transform-origin: 0 50%; transform: scaleX(0); }
.hero__tab.is-active .hero__line > span { transform: scaleX(var(--tp, 1)); }
.hero__tab-n { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.hero__tab-name { font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
/* вкладки — только полоски: номер и название остаются для скринридеров, кликается вся высота полоски */
.hero__tabs { align-self: center; gap: var(--space-xs); }
.hero__tab { width: calc(var(--space-unit) * 3.5); padding: var(--space-sm) 0; }
.hero__tab .hero__line { top: 50%; margin-top: -1px; }
.hero__tab-n, .hero__tab-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 63.99rem) { .hero__tab { width: calc(var(--space-unit) * 2.5); } }
.hero__arrows { flex-shrink: 0; }
.hero__arrow { display: flex; align-items: center; justify-content: center; width: calc(var(--space-unit) * 2.75); height: calc(var(--space-unit) * 2.75); padding: 0; border: 0; background: hsla(var(--jl-panel), 0.9); color: var(--color-white); cursor: pointer; transition: background-color 0.3s; }
.hero__arrow:hover { background: var(--color-primary); }
.hero__arrow:focus-visible { outline: 2px solid var(--color-primary-light); outline-offset: 2px; }
.hero__arrow .ic { transform: rotate(45deg); }
.hero__arrow--prev .ic { transform: rotate(-135deg); }
@media (min-width: 64rem) {
  .hslide__in { padding-top: calc(var(--hdr-space) + var(--space-xl)); }
  .hslide__title { font-size: calc(var(--text-xxxxl) * 1.7); }
  .hslide__txt .price b { font-size: var(--text-xl); }
  .hero__nav { bottom: var(--space-xl); }
}

/* ████████████████████████████████████████████████████████████
   BLOCK · block_marquee
   ████████████████████████████████████████████████████████████ */
.marquee { overflow: hidden; padding-block: var(--space-md); border-bottom: 1px solid var(--color-contrast-lower); }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__group { display: flex; align-items: center; flex-shrink: 0; }
.marquee__item { padding-inline: var(--space-md); font-size: var(--text-lg); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; white-space: nowrap; color: var(--color-white); }
.marquee__item:nth-of-type(even) { color: var(--color-contrast-low); }
.marquee__sep { flex-shrink: 0; width: var(--space-md); height: var(--space-xxxs); background: var(--color-primary); transform: skewX(-40deg); }
@media (min-width: 64rem) { .marquee__item { font-size: var(--text-xl); } }

/* ████████████████████████████████████████████████████████████
   BLOCK · block_showcase (all models: grouped model tabs + panels; uses cfg + dtl parts below)
   ████████████████████████████████████████████████████████████ */
.shw__nav { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm) var(--space-md); margin-top: var(--space-lg); }
@media (min-width: 48rem) { .shw__nav { gap: var(--space-lg); } }
@media (max-width: 47.99rem) { .shw__nav .shw__tab { padding-inline: var(--space-sm); } }
.shw__nav::-webkit-scrollbar { display: none; }
.shw__group { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; gap: var(--space-xxs); }
.shw__brand { margin-right: -0.2em; font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-contrast-medium); }
.shw__tabs { display: flex; }
.shw__tab { position: relative; padding: var(--space-xs) var(--space-md) var(--space-sm); border: 0; background: transparent; font-family: inherit; font-size: var(--text-md); font-weight: 700; line-height: 1.2; white-space: nowrap; text-align: left; color: var(--color-contrast-medium); cursor: pointer; transition: color 0.3s; }
.shw__tab::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--color-contrast-low); }
.shw__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-primary); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.6s var(--ease-expo); }
.shw__tab:hover { color: var(--color-contrast-high); }
.shw__tab.is-active { color: var(--color-white); }
.shw__tab.is-active::after { transform: scaleX(1); }
.shw__tab:focus-visible { outline: 2px solid var(--color-primary-light); outline-offset: 2px; }
.shw__panels { margin-top: var(--space-lg); }
.scm + .scm { margin-top: var(--space-xxl); }
.js .scm { display: none; margin-top: 0; }
.js .scm.is-active { display: block; }
.scm.is-reset .si, .scm.is-reset [data-reveal] { transition: none !important; }
.js .scm.is-active .cfg__pano { animation: jlPanoIn 1.1s var(--ease-expo) both; }
@keyframes jlPanoIn { from { opacity: 0; transform: translate3d(3%, 0, 0); } to { opacity: 1; transform: none; } }
html.is-static .scm .cfg__pano { animation: none; }
.scm .dtl { margin-top: var(--space-lg); padding-top: var(--space-xs); border-top: 1px solid var(--color-contrast-lower); }
.scm__more { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-contrast-lower); }
.scm__desc { max-width: 52ch; color: var(--color-contrast-high); }
.scm__specs b { display: block; font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.03em; color: var(--color-white); }
.scm__specs span { display: block; margin-top: var(--space-xxxs); font-size: var(--text-xs); font-weight: 600; line-height: 1.35; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-contrast-medium); }
.cfg__band { position: absolute; left: 24%; right: 24%; top: 6%; bottom: 16%; display: none; background: var(--color-bg-light); transform: skewX(-22deg) translate3d(calc(var(--mx, 0) * -2%), 0, 0); }
@media (min-width: 48rem) { .cfg__band { display: block; } }
@media (min-width: 64rem) { .shw__nav { justify-content: center; gap: var(--space-xl); margin-top: var(--space-xl); } .shw__tab { padding-inline: var(--space-lg); font-size: var(--text-lg); } .shw__panels { margin-top: var(--space-xl); } }

/* ████████████████████████████████████████████████████████████
   BLOCK · block_tradein (lead magnet «Оцените свой автомобиль»)
   ████████████████████████████████████████████████████████████ */
.ti__card { --cut: var(--space-xl); position: relative; overflow: hidden; padding: var(--space-xl) var(--space-md); background: var(--color-bg-light); -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.ti__band { position: absolute; top: -20%; bottom: -20%; width: 20%; background: hsla(var(--jl-white), 0.04); pointer-events: none; }
.ti__band--a { right: 30%; transform: skewX(-24deg) translate3d(calc(var(--tp, 0) * -25%), 0, 0); }
.ti__band--b { right: 6%; transform: skewX(24deg) translate3d(calc(var(--tp, 0) * 25%), 0, 0); }
.ti__in { position: relative; z-index: 1; }
.ti__title { font-size: var(--text-xxl); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-white); }
.ti__lead { max-width: 44ch; font-size: var(--text-md); line-height: 1.5; color: var(--color-contrast-high); }
.ti__steps { --n: calc(var(--space-unit) * 2.75); position: relative; display: flex; flex-direction: column; gap: var(--space-lg); }
.ti__steps::before, .ti__steps::after { content: ""; position: absolute; left: calc(var(--n) / 2 - 1px); top: calc(var(--n) / 2); bottom: calc(var(--n) / 2); width: 2px; background: var(--color-contrast-low); }
.ti__steps::after { background: var(--color-primary); transform-origin: 50% 0; transform: scaleY(var(--tp, 0)); }
.ti__step { position: relative; z-index: 1; display: grid; grid-template-columns: var(--n) minmax(0, 1fr); gap: var(--space-md); align-items: start; }
.ti__n { --cut: var(--space-xxs); display: flex; align-items: center; justify-content: center; width: var(--n); height: var(--n); background: var(--color-secondary); font-size: var(--text-sm); font-weight: 700; color: var(--color-white); font-variant-numeric: tabular-nums; transition: background-color 0.5s; -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.ti__step.is-on .ti__n { background: var(--color-primary); }
.ti__st { padding-top: 0.45em; font-size: var(--text-lg); line-height: 1.25; color: var(--color-white); }
.ti__sd { margin-top: var(--space-xxxs); font-size: var(--text-sm); color: var(--color-contrast-medium); }
.js .ti__step { opacity: 0.35; transform: translate3d(var(--space-sm), 0, 0); transition: opacity 0.6s, transform 0.9s var(--ease-expo); }
.js .ti__step.is-on { opacity: 1; transform: none; }
html.is-static .ti__step { opacity: 1 !important; transform: none !important; }
@media (min-width: 64rem) { .ti__card { padding: var(--space-xxl) var(--space-xl); } .ti__title { font-size: calc(var(--text-xxxl) * 1.1); } }

/* ████████████████████████████████████████████████████████████
   BLOCK · block_model (panoramic stage + color configurator)
   ████████████████████████████████████████████████████████████ */
.model { position: relative; overflow: hidden; }
.model__name { margin-bottom: var(--space-xxs); text-align: center; font-size: var(--text-xl); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-white); --stagger: 26ms; }
.model__lead { max-width: 46ch; margin-inline: auto; text-align: center; font-size: var(--text-sm); font-weight: 500; line-height: 1.55; letter-spacing: 0; color: var(--color-contrast-high); }
.cfg { margin-top: var(--space-lg); }
.cfg__pano { position: relative; aspect-ratio: 4 / 3; perspective: calc(var(--space-unit) * 90); perspective-origin: 50% 35%; }
.cfg__pano::before { --cut: var(--space-lg); content: ""; position: absolute; left: 0; right: 0; top: 6%; bottom: 20%; background: var(--color-bg-light); -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.cfg__side { position: absolute; top: 0; display: none; width: 49%; height: 74%; margin: 0; overflow: hidden; background: var(--color-bg-light); opacity: calc(0.35 + var(--fold, 1) * 0.65); }
.cfg__side img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12) translate3d(calc(var(--mx, 0) * -2.5%), 0, 0); }
.cfg__side::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.cfg__side--l { left: 0; transform-origin: 100% 50%; transform: rotateY(calc(20deg + (1 - var(--fold, 1)) * 50deg)); }
.cfg__side--l::after { background: linear-gradient(90deg, hsla(var(--jl-bg), 0) 35%, hsla(var(--jl-bg), 0.6)); }
.cfg__side--r { right: 0; transform-origin: 0 50%; transform: rotateY(calc(-20deg - (1 - var(--fold, 1)) * 50deg)); }
.cfg__side--r::after { background: linear-gradient(270deg, hsla(var(--jl-bg), 0) 35%, hsla(var(--jl-bg), 0.6)); }
.cfg__stage { position: absolute; inset: 0; z-index: 2; pointer-events: none; transform: translate3d(calc(var(--mx, 0) * 1.2%), 0, 0); }
.cfg__stage::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(105deg, hsla(var(--jl-white), 0) 38%, hsla(var(--jl-white), 0.12) 50%, hsla(var(--jl-white), 0) 62%); transform: translate3d(-100%, 0, 0); }
.cfg.is-sweep .cfg__stage::after { animation: jlSweep 1.3s var(--ease-expo); }
@keyframes jlSweep { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(100%, 0, 0); } }
.cfg__floor { position: absolute; left: 14%; right: 14%; bottom: 7%; height: 14%; background: radial-gradient(closest-side, hsla(var(--jl-ink), 0.95), hsla(var(--jl-ink), 0)); }
.cfg__car { position: absolute; left: 50%; bottom: 6%; z-index: 2; width: 88%; max-width: calc(var(--space-unit) * 34); height: auto; opacity: 0; filter: blur(6px); transform: translate3d(-35%, 0, 0); transition: opacity 0.8s var(--ease-out), transform 1.2s var(--ease-expo), filter 0.8s; }
.cfg__car.is-active { opacity: 1; filter: none; transform: translate3d(-50%, 0, 0); }
.cfg__car.is-out { opacity: 0; filter: blur(6px); transform: translate3d(-65%, 0, 0); }
/* невидимые машины ждут справа (translate -35%) и на телефоне вылезали за экран — страница скроллилась вбок */
@media (max-width: 63.99rem) { .cfg__stage { overflow-x: clip; } }
.cfg__bar { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-contrast-lower); }
.cfg__name { font-size: var(--text-xxl); line-height: 1; letter-spacing: -0.02em; color: var(--color-white); --stagger: 30ms; }
.cfg__label { font-size: var(--text-sm); font-weight: 500; color: var(--color-contrast-high); }
.cfg__sw { position: relative; width: calc(var(--space-unit) * 3); height: calc(var(--space-unit) * 2.75); padding: 0; border: 0; background: transparent; cursor: pointer; }
.cfg__sw::before { content: ""; position: absolute; left: 14%; right: 14%; top: 28%; bottom: 28%; background: var(--sw); box-shadow: inset 0 0 0 1px hsla(var(--jl-white), 0.22); transition: left 0.3s, right 0.3s; }
.cfg__sw::after { content: ""; position: absolute; left: 6%; right: 6%; top: 17%; bottom: 17%; border: 1px solid var(--color-contrast-high); opacity: 0; transition: opacity 0.3s; }
.cfg__sw:hover::before { left: 10%; right: 10%; }
.cfg__sw.is-active::after { opacity: 1; }
.cfg__sw:focus-visible { outline: 2px solid var(--color-primary-light); outline-offset: 0; }
@media (min-width: 48rem) {
  .cfg__pano { aspect-ratio: 16 / 7; }
  .cfg__pano::before { display: none; }
  .cfg__side { display: block; }
  .cfg__floor { left: 28%; right: 28%; bottom: 2%; }
  .cfg__car { bottom: 3%; width: 46%; }
}
@media (min-width: 64rem) {
  .model__name { font-size: var(--text-xxl); }
  .model__lead { font-size: var(--text-md); }
  .cfg { margin-top: var(--space-xl); }
  .cfg__name { font-size: var(--text-xxxl); }
}

/* ████████████████████████████████████████████████████████████
   BLOCK · block_details (chapter tabs + image stage)
   ████████████████████████████████████████████████████████████ */
.dtl__tabs { display: flex; gap: var(--space-md); margin-top: var(--space-lg); overflow-x: auto; scrollbar-width: none; }
.dtl__tabs::-webkit-scrollbar { display: none; }
.dtl__tab { position: relative; flex: 1 0 auto; padding: var(--space-sm) 0; border: 0; background: transparent; font-family: inherit; font-size: var(--text-sm); font-weight: 600; line-height: 1.3; text-align: left; white-space: nowrap; color: var(--color-contrast-medium); cursor: pointer; transition: color 0.3s; }
.dtl__tab::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--color-contrast-low); }
.dtl__tab i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-primary); transform-origin: 0 50%; transform: scaleX(0); }
.dtl__tab:hover { color: var(--color-contrast-high); }
.dtl__tab.is-active { color: var(--color-white); }
.dtl__tab.is-active i { transform: scaleX(var(--tp, 1)); }
.dtl__tab:focus-visible { outline: 2px solid var(--color-primary-light); outline-offset: 2px; }
.dtl__body { margin-top: var(--space-lg); }
.dtl__stage { --cut: var(--space-xl); position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--color-bg-light); -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.dtl__fig { position: absolute; inset: 0; margin: 0; -webkit-clip-path: inset(0 0 0 100%); clip-path: inset(0 0 0 100%); transition: clip-path 1s var(--ease-expo); }
.dtl__fig.is-on { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); }
.dtl__fig img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.6s var(--ease-expo); }
.dtl__fig.is-on img { transform: none; }
.dtl__panes { display: grid; }
.dtl__pane + .dtl__pane { margin-top: var(--space-lg); }
.js .dtl__pane { grid-area: 1 / 1; margin-top: 0; visibility: hidden; }
.js .dtl__pane.is-active { visibility: visible; }
.dtl__h { font-size: var(--text-xl); line-height: 1.2; color: var(--color-white); }
.dtl__list { margin-top: var(--space-sm); border-top: 1px solid var(--color-contrast-low); }
.dtl__item { position: relative; display: flex; flex-direction: column; gap: var(--space-xxxs); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-contrast-low); cursor: default; outline: none; }
.dtl__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--color-primary); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.8s var(--ease-expo); }
.dtl__item.is-hot::after, .dtl__item:focus-visible::after { transform: scaleX(1); }
.dtl__v { font-size: var(--text-lg); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--color-primary-lighter); }
.dtl__t { font-size: var(--text-md); font-weight: 600; line-height: 1.3; color: var(--color-contrast-high); transition: color 0.3s; }
.dtl__t small { display: block; margin-top: var(--space-xxs); font-size: var(--text-sm); font-weight: 400; line-height: 1.5; color: var(--color-contrast-medium); }
.dtl__item.is-hot .dtl__t, .dtl__item:hover .dtl__t { color: var(--color-white); }
@keyframes jlUp { from { opacity: 0; transform: translate3d(0, var(--space-sm), 0); } to { opacity: 1; transform: none; } }
.js .dtl__pane.is-active .dtl__h, .js .dtl__pane.is-active .dtl__item { animation: jlUp 0.8s var(--ease-expo) both; }
.js .dtl__pane.is-active .dtl__item:nth-child(1) { animation-delay: 0.05s; }
.js .dtl__pane.is-active .dtl__item:nth-child(2) { animation-delay: 0.1s; }
.js .dtl__pane.is-active .dtl__item:nth-child(3) { animation-delay: 0.15s; }
.js .dtl__pane.is-active .dtl__item:nth-child(4) { animation-delay: 0.2s; }
.js .dtl__pane.is-active .dtl__item:nth-child(5) { animation-delay: 0.25s; }
.js .dtl__pane.is-active .dtl__item:nth-child(6) { animation-delay: 0.3s; }
html.is-static .dtl__pane .dtl__h, html.is-static .dtl__pane .dtl__item { animation: none; }
@media (min-width: 64rem) { .dtl__tabs { margin-top: var(--space-xl); } .dtl__h { font-size: var(--text-xxl); } }

/* ████████████████████████████████████████████████████████████
   BLOCK · block_offer
   ████████████████████████████████████████████████████████████ */
.offer { position: relative; display: flex; align-items: center; min-height: var(--screen, 100svh); overflow: hidden; color: var(--color-white); }
.offer__bg { position: absolute; inset: 0; }
.offer__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; transform: scale(calc(1.2 - var(--op, 0) * 0.2)); }
.offer__shade { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 75% at 50% 50%, hsla(var(--jl-bg), 0.88) 0%, hsla(var(--jl-bg), 0.6) 60%, hsla(var(--jl-bg), 0.35) 100%), linear-gradient(0deg, hsla(var(--jl-bg), 0.7), hsla(var(--jl-bg), 0) 40%); }
.offer__band { position: absolute; top: -10%; bottom: -10%; display: none; width: 15%; background: hsla(var(--jl-panel), 0.5); pointer-events: none; }
.offer__band--a { right: 24%; transform: skewX(-24deg) translate3d(calc(var(--op, 0) * -30%), 0, 0); }
.offer__band--b { right: 4%; transform: skewX(24deg) translate3d(calc(var(--op, 0) * 30%), 0, 0); }
.offer__in { position: relative; z-index: 1; container-type: inline-size; }
.offer__kicker { --cut: var(--space-xs); display: inline-flex; padding: var(--space-xs) var(--space-md); background: var(--color-primary); font-size: var(--text-sm); font-weight: 700; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-white); -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.offer__lead { display: flex; flex-direction: column; align-items: center; margin-top: var(--space-md); }
.offer__pre, .offer__post { font-size: var(--text-xl); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: var(--color-white); }
.offer__post { --delay: 500ms; }
.offer__sum { display: flex; justify-content: center; align-items: baseline; gap: 0.12em; margin-block: var(--space-xxs); font-size: 13cqi; font-weight: 600; line-height: 1; letter-spacing: -0.045em; white-space: nowrap; color: var(--color-white); }
.offer__cur { font-size: 0.42em; font-weight: 500; letter-spacing: 0; color: var(--color-primary-lighter); }
.odo { display: inline-flex; }
.odo__c { display: inline-block; height: 1em; overflow: hidden; }
.odo__s { display: flex; flex-direction: column; transition: transform 2.6s var(--ease-expo); transition-delay: calc(var(--i, 0) * 110ms); }
.odo__s span { display: block; height: 1em; line-height: 1; }
@media (min-width: 48rem) { .offer__band { display: block; } }
@media (min-width: 64rem) {
  .offer__kicker { font-size: var(--text-md); }
  .offer__pre, .offer__post { font-size: var(--text-xxl); }
  .offer__sum { font-size: 8.5cqi; }
}

/* ████████████████████████████████████████████████████████████
   BLOCK · block_testdrive
   ████████████████████████████████████████████████████████████ */
.td__media { --cut: var(--space-xl); position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-bg-light); -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.td__wipe { position: absolute; inset: 0; overflow: hidden; }
.td__wipe img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; transform: translate3d(0, calc(var(--tdp, 0) * -6%), 0) scale(1.04); }
.js [data-reveal="wipe"] { -webkit-clip-path: polygon(120% 0, 120% 0, 120% 100%, 110% 100%); clip-path: polygon(120% 0, 120% 0, 120% 100%, 110% 100%); transition: clip-path 1.4s var(--ease-expo), -webkit-clip-path 1.4s var(--ease-expo); }
.js [data-reveal="wipe"].is-in { -webkit-clip-path: polygon(-10% 0, 120% 0, 120% 100%, -20% 100%); clip-path: polygon(-10% 0, 120% 0, 120% 100%, -20% 100%); }
html.is-static [data-reveal="wipe"] { -webkit-clip-path: none !important; clip-path: none !important; }
.td__title { font-size: var(--text-xxl); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-white); }
.td__lead { max-width: 36ch; font-size: var(--text-md); line-height: 1.5; color: var(--color-contrast-high); }
@media (min-width: 64rem) { .td__title { font-size: calc(var(--text-xxxl) * 1.1); } }

/* ████████████████████████████████████████████████████████████
   BLOCK · block_contacts (map + panel)
   ████████████████████████████████████████████████████████████ */
.cmap { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--color-bg-dark); --px: 50%; }
.cmap__map { position: relative; height: calc(var(--space-unit) * 22); overflow: hidden; background-color: var(--color-bg-dark); background-image: linear-gradient(hsla(var(--jl-white), 0.04) 1px, transparent 1px), linear-gradient(90deg, hsla(var(--jl-white), 0.04) 1px, transparent 1px); background-size: var(--space-xl) var(--space-xl); }
.cmap__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; opacity: 0; filter: grayscale(1) invert(0.92) contrast(0.92) brightness(0.92); transition: opacity 1.2s var(--ease-out); }
.cmap__frame.is-ready { opacity: 1; }
.cmap__tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--color-primary-dark); mix-blend-mode: color; opacity: 0.55; }
.cmap__pin { position: absolute; left: var(--px); top: 50%; z-index: 2; display: flex; flex-direction: column; align-items: center; pointer-events: none; transform: translate3d(-50%, calc(-100% + var(--space-xs)), 0); transition: opacity 0.5s, transform 0.9s var(--ease-expo); }
.cmap__tag { --cut: var(--space-xs); display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); background: var(--color-primary); color: var(--color-white); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); box-shadow: 0 var(--space-xs) var(--space-md) hsla(var(--jl-bg), 0.5); }
.cmap__tag img { width: calc(var(--space-unit) * 4.5); height: auto; filter: brightness(0) invert(1); }
.cmap__tag span { padding-left: var(--space-xs); border-left: 1px solid hsla(var(--jl-white), 0.4); }
.cmap__stem { width: 1px; height: var(--space-md); background: var(--color-primary-lighter); transform-origin: 50% 0; }
.cmap__dot { position: relative; width: var(--space-sm); height: var(--space-sm); border-radius: 50%; background: var(--color-white); box-shadow: 0 0 0 3px var(--color-primary); }
.cmap__dot::before, .cmap__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--color-primary-lighter); animation: jlRing 2.6s var(--ease-out) infinite; }
.cmap__dot::after { animation-delay: 1.3s; }
@keyframes jlRing { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(5); opacity: 0; } }
.js .cmap__pin .cmap__tag { opacity: 0; transform: translate3d(0, var(--space-sm), 0); transition: opacity 0.6s, transform 1s var(--ease-expo); transition-delay: 0.5s; }
.js .cmap__pin .cmap__stem { transform: scaleY(0); transition: transform 0.7s var(--ease-expo); transition-delay: 0.3s; }
.js .cmap.is-in .cmap__pin .cmap__tag { opacity: 1; transform: none; }
.js .cmap.is-in .cmap__pin .cmap__stem { transform: none; }
html.is-static .cmap__pin .cmap__tag, html.is-static .cmap__pin .cmap__stem { opacity: 1 !important; transform: none !important; }
.cmap__bar { position: absolute; left: var(--component-padding); right: var(--component-padding); bottom: var(--space-md); z-index: 4; display: flex; flex-wrap: wrap; gap: var(--space-xs); opacity: 0; visibility: hidden; transform: translate3d(0, var(--space-md), 0); transition: opacity 0.4s, transform 0.8s var(--ease-expo), visibility 0s 0.8s; }
.cmap__bar .btn--secondary { background: hsla(var(--jl-bg), 0.75); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cmap__bar .btn--secondary .ic { transform: rotate(-135deg); }
.cmap__shade { display: none; }
.cmap__in { position: relative; z-index: 3; margin-top: calc(var(--space-xl) * -1); padding-bottom: var(--space-xl); pointer-events: none; }
.cmap__panel { --cut: var(--space-lg); position: relative; width: 100%; padding: var(--space-lg) var(--space-md); pointer-events: auto; background: hsla(var(--jl-panel), 0.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); transition: transform 1.1s var(--ease-expo), opacity 0.6s; }
.cmap__panel::before { content: ""; position: absolute; left: 0; top: 0; width: calc(var(--space-unit) * 4); height: 3px; background: var(--color-primary); }
.cmap__title { margin-top: var(--space-xs); font-size: var(--text-xxl); line-height: 1.05; letter-spacing: -0.02em; color: var(--color-white); }
.cmap__list { margin-top: var(--space-lg); border-top: 1px solid var(--color-contrast-lower); }
.cmap__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xxxs); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-contrast-lower); }
.cmap__row dt { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-contrast-medium); }
.cmap__row dd { display: flex; flex-direction: column; gap: var(--space-xxxs); font-size: var(--text-md); font-weight: 500; color: var(--color-white); }
.cmap__phone { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; color: var(--color-white); transition: color 0.3s; }
.cmap__phone:hover { color: var(--color-primary-lighter); }
.cmap__note { font-size: var(--text-sm); font-weight: 400; color: var(--color-contrast-medium); }
.cmap__actions { display: grid; gap: var(--space-xs); margin-top: var(--space-lg); }
.cmap__actions .btn { width: 100%; justify-content: flex-start; }
.cmap.is-map .cmap__frame { pointer-events: auto; }
.cmap.is-map .cmap__pin { opacity: 0; transform: translate3d(-50%, calc(-100% - var(--space-md)), 0); }
.cmap.is-map .cmap__bar { opacity: 1; visibility: visible; transform: none; transition: opacity 0.5s 0.3s, transform 0.9s 0.3s var(--ease-expo), visibility 0s; }
@media (min-width: 48rem) {
  .cmap__panel { padding: var(--space-xl) var(--space-lg); }
  .cmap__row { grid-template-columns: calc(var(--space-unit) * 8) minmax(0, 1fr); align-items: baseline; gap: var(--space-md); }
  .cmap__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .cmap { --px: 70%; display: block; min-height: min(var(--screen, 100svh), calc(var(--space-unit) * 50)); }
  .cmap__map { position: absolute; inset: 0; height: auto; }
  .cmap__shade { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, hsla(var(--jl-bg), 0.9) 0%, hsla(var(--jl-bg), 0.55) 34%, hsla(var(--jl-bg), 0) 60%), linear-gradient(0deg, hsla(var(--jl-bg), 0.6), hsla(var(--jl-bg), 0) 22%); transition: opacity 0.8s; }
  .cmap__in { display: flex; align-items: center; min-height: inherit; margin-top: 0; padding-block: calc(var(--hdr-h) + var(--space-md)) var(--space-xl); }
  .cmap__panel { width: calc(var(--space-unit) * 33); max-width: 100%; }
  .cmap__actions { grid-template-columns: minmax(0, 1fr); }
  .cmap__bar { left: max(var(--component-padding), calc((100vw - var(--max-width-xl)) / 2 + var(--component-padding))); right: auto; top: calc(var(--hdr-h) + var(--space-md)); bottom: auto; transform: translate3d(0, calc(var(--space-md) * -1), 0); }
  .cmap.is-map .cmap__panel { opacity: 0; transform: translate3d(calc(-100% - var(--space-xxl)), 0, 0); pointer-events: none; }
  .cmap.is-map .cmap__shade { opacity: 0; }
  .cmap.is-map .cmap__tint { opacity: 0.35; }
}

/* ============================================================
   GLOBAL · _footer
   ============================================================ */
.ftr__top { padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-contrast-lower); }
.ftr__brand { display: flex; color: var(--color-white); }
.ftr__logo { width: calc(var(--space-unit) * 7.75); height: auto; filter: brightness(0) invert(1); }
.ftr__hot { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-sm); }
.ftr__hot span { font-size: var(--text-sm); color: var(--color-contrast-medium); }
.ftr__hot a { white-space: nowrap; font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em; color: var(--color-white); transition: color 0.3s; }
.ftr__hot a:hover { color: var(--color-primary-lighter); }
.ftr__cols { padding-block: var(--space-lg); border-bottom: 1px solid var(--color-contrast-lower); }
.ftr__h { font-size: var(--text-sm); font-weight: 700; color: var(--color-white); }
.ftr__list { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-contrast-high); }
.ftr__list a { color: var(--color-contrast-high); transition: color 0.3s; }
.ftr__list a:hover { color: var(--color-white); }
.ftr__legal-wrap { padding-block: var(--space-lg); border-bottom: 1px solid var(--color-contrast-lower); }
.ftr__cap { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-white); }
.ftr__legal { max-width: 90ch; margin-top: var(--space-xs); font-size: var(--text-xs); line-height: 1.6; color: var(--color-contrast-medium); }
.ftr__copy { padding-top: var(--space-md); font-size: var(--text-sm); color: var(--color-contrast-medium); }

/* ============================================================
   GLOBAL · _sticky-cta (mobile CTA bar, below 64rem)
   ============================================================ */
.scta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 58; display: flex; padding: var(--space-xs) var(--component-padding) calc(var(--space-xs) + env(safe-area-inset-bottom, 0px)); background: hsla(var(--jl-panel), 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--color-contrast-lower); visibility: hidden; transform: translate3d(0, 110%, 0); transition: transform 0.6s var(--ease-expo), visibility 0s 0.6s; }
.scta.is-on { visibility: visible; transform: none; transition: transform 0.6s var(--ease-expo); }
html.is-menu .scta { visibility: hidden; transform: translate3d(0, 110%, 0); }
.scta .btn { flex: 1; justify-content: center; }

/* ============================================================
   MODES · reduced motion + block-library preview
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-split] .si { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hslide__media, .hslide__zoom, .hslide__txt, .hslide__shade::after { transition: none !important; }
  .perk::after { display: none; }
  .scta { transition: none !important; }
}
html[data-preview] { --screen: calc(var(--space-unit) * 50); }
html[data-preview] .cursor, html[data-preview] .progress, html[data-preview] .scta { display: none !important; }
html[data-preview] .hdr { position: relative; top: 0; left: 0; right: 0; }

/* ============================================================
   GLOBAL · модалка заявки (вёрстка сайта, в макете её нет:
   формы там отданы виджету, у нас заявка уходит на /site-api/send-mail/)
   ============================================================ */
.jmodal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: var(--space-md); opacity: 0; pointer-events: none; transition: opacity 0.4s; }
.jmodal.is-open { opacity: 1; pointer-events: auto; }
.jmodal__backdrop { position: absolute; inset: 0; background: hsla(var(--jl-ink), 0.76); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.jmodal__panel { --cut: var(--space-md); position: relative; width: 100%; max-width: 30rem; max-height: calc(100vh - var(--space-lg)); overflow-y: auto; padding: var(--space-lg) var(--space-md); background: hsla(var(--jl-panel), 0.98); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); transform: translate3d(0, var(--space-md), 0); transition: transform 0.6s var(--ease-expo); }
.jmodal.is-open .jmodal__panel { transform: none; }
.jmodal__panel::before { content: ""; position: absolute; left: 0; top: 0; width: calc(var(--space-unit) * 4); height: 3px; background: var(--color-primary); }
.jmodal__close { position: absolute; top: var(--space-xs); right: var(--space-xs); display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; color: var(--color-contrast-medium); background: none; border: 0; cursor: pointer; transition: color 0.3s; }
.jmodal__close:hover { color: var(--color-white); }
.jmodal__close .ic { width: 1.1rem; height: 1.1rem; }
.jmodal__title { margin-top: var(--space-xs); font-size: var(--text-xl); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-white); }
.jmodal__note { margin-top: var(--space-xxs); font-size: var(--text-sm); line-height: 1.55; color: var(--color-contrast-medium); }

.jform { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-md); }
.jform__row { display: flex; flex-direction: column; gap: var(--space-xxxs); }
.jform__lbl { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-contrast-medium); }
.jform__in { width: 100%; padding: var(--space-xs) var(--space-sm); font-family: inherit; font-size: var(--text-md); color: var(--color-white); background: hsla(var(--jl-ink), 0.5); border: 1px solid var(--color-contrast-lower); border-radius: 0; transition: border-color 0.3s; }
.jform__in:focus { outline: none; border-color: var(--color-primary); }
.jform__in.is-bad { border-color: #d05a4a; }
.jform__check { display: flex; align-items: flex-start; gap: var(--space-xs); font-size: var(--text-xs); line-height: 1.5; color: var(--color-contrast-medium); }
.jform__check input { flex-shrink: 0; margin-top: 0.2em; accent-color: var(--color-primary); }
.jform__check a { color: var(--color-contrast-high); text-decoration: underline; }
.jform__submit { align-self: flex-start; }
.jform__msg { font-size: var(--text-sm); color: var(--color-contrast-high); }
.jform__msg.is-ok { color: var(--color-primary-lighter); }
.jform__msg.is-bad { color: #e08b7e; }
.jform.is-sent .jform__row, .jform.is-sent .jform__check, .jform.is-sent .jform__submit { display: none; }
html.is-modal { overflow: hidden; }

/* ============================================================
   FIX · правки поверх макета
   ============================================================ */

/* Текстовая страница: первая секция не должна уезжать под плавающую шапку */
.art { color: var(--color-contrast-high); }
main > .art:first-child { padding-top: calc(var(--hdr-space) + var(--space-lg)); }
.art__title { font-size: var(--text-xxl); line-height: 1.12; letter-spacing: -0.02em; color: var(--color-contrast-higher); }
.art__lead { margin-top: var(--space-sm); font-size: var(--text-md); line-height: 1.6; color: var(--color-contrast-medium); }
.art__body { margin-top: var(--space-lg); font-size: var(--text-sm); line-height: 1.7; }
.art__body h2 { margin-top: var(--space-lg); margin-bottom: var(--space-xs); font-size: var(--text-md); font-weight: 600; letter-spacing: -0.01em; color: var(--color-contrast-higher); }
.art__body p + p { margin-top: var(--space-xs); }
.art__body ul { margin-top: var(--space-xs); padding-left: var(--space-md); list-style: disc; }
.art__body li + li { margin-top: var(--space-xxxs); }
.art__body a { color: var(--color-primary-light); text-decoration: underline; }
.art__body b { color: var(--color-contrast-higher); }

/* Метка на карте: на узких экранах подпись не влезала и обрезалась краем экрана */
@media (max-width: 47.999rem) {
  .cmap__tag { gap: var(--space-xxs); padding: var(--space-xxs) var(--space-xs); font-size: 0.6rem; letter-spacing: 0.08em; }
  .cmap__tag img { width: calc(var(--space-unit) * 3.2); }
}

/* ============================================================
   GLOBAL · правовые ссылки в подвале и уведомление о cookie
   ============================================================ */
.ftr__bottom { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid hsla(var(--jl-white), 0.08); }
/* у блока «Цены и выгоды» уже есть своя нижняя линия — вторую не рисуем */
.ftr__legal-wrap + .ftr__bottom { margin-top: 0; border-top: 0; }
.ftr__bottom .ftr__copy { padding-top: 0; }
@media (min-width: 48rem) { .ftr__bottom { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--space-md); } }
.ftr__legal-links { display: flex; flex-wrap: wrap; gap: var(--space-xxs) var(--space-md); }
.ftr__legal-links a { font-size: var(--text-xs); color: var(--color-contrast-medium); transition: color 0.3s; }
.ftr__legal-links a:hover { color: var(--color-white); }

.cnote { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding-block: var(--space-sm); background: hsla(var(--jl-panel), 0.97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid hsla(var(--jl-white), 0.1); transform: translate3d(0, 100%, 0); transition: transform 0.7s var(--ease-expo); }
.cnote.is-in { transform: none; }
.cnote__in { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
@media (min-width: 48rem) { .cnote__in { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-lg); } }
.cnote__text { font-size: var(--text-xs); line-height: 1.6; color: var(--color-contrast-medium); }
.cnote__text a { color: var(--color-contrast-high); text-decoration: underline; }
.cnote__text a:hover { color: var(--color-white); }
.cnote__btn { flex-shrink: 0; }
/* пока висит плашка, мобильная кнопка CTA поднимается над ней */
html.is-cnote .scta { bottom: calc(var(--space-unit) * 7); }

/* ============================================================
   BLOCK · block_tradein — виджет оценки, компактная версия
   Переписан 13.10.2026: шаги и телефон убраны из левой колонки,
   карточка стала уже и плотнее, шаг показывает тонкая шапка.
   ============================================================ */
.cvw { --cvw-ease: cubic-bezier(0.22, 1, 0.36, 1); position: relative; width: 100%; max-width: 37rem; margin-left: auto; padding: var(--space-md); background: hsla(var(--jl-ink), 0.55); border: 1px solid hsla(var(--jl-white), 0.1); }
.cvw::before { content: ""; position: absolute; left: 0; top: 0; width: calc(var(--space-unit) * 3); height: 2px; background: var(--color-primary); }
.cvw .is-hidden { display: none !important; }

.cvw__step { display: none; }
.cvw__step.is-active { display: block; animation: cvw-in 0.4s var(--cvw-ease) both; }
@keyframes cvw-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cvw__step.is-active { animation: none; } }

/* шапка с номером шага */
.cvw-head { display: flex; align-items: baseline; gap: var(--space-xs); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.cvw-head__step { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-contrast-medium); }
.cvw-head__step b { color: var(--color-primary-light); }
.cvw-head__name { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-white); }
.cvw-head__bar { flex: 1 1 100%; height: 2px; background: hsla(var(--jl-white), 0.1); }
.cvw-head__bar i { display: block; height: 100%; width: 33%; background: var(--color-primary); transition: width 0.5s var(--cvw-ease); }

/* переключатель способа */
.cvw-seg { display: flex; gap: 1px; margin-bottom: var(--space-sm); background: hsla(var(--jl-white), 0.08); }
.cvw-seg__btn { flex: 1 1 50%; min-width: 0; appearance: none; border: 0; cursor: pointer; padding: 0.6em 0.5em; font-family: inherit; font-size: var(--text-sm); color: var(--color-contrast-medium); background: hsla(var(--jl-ink), 0.75); transition: color 0.3s var(--cvw-ease), background-color 0.3s var(--cvw-ease); }
.cvw-seg__btn:hover { color: var(--color-white); }
.cvw-seg__btn.is-active { background: var(--color-primary); color: var(--color-white); font-weight: 600; }

.ti__note { max-width: 46ch; margin-top: var(--space-xxs); font-size: var(--text-xs); line-height: 1.6; color: var(--color-contrast-medium); }
.cvw-hint { font-size: var(--text-xs); line-height: 1.5; color: var(--color-contrast-medium); }
.cvw-hint--center { margin-top: var(--space-xs); text-align: center; }
.cvw-wide { width: 100%; justify-content: center; }

/* госномер */
.cvw-plate { display: flex; align-items: stretch; margin-bottom: var(--space-sm); background: var(--color-white); border: 2px solid var(--color-black); transition: box-shadow 0.25s var(--cvw-ease), border-color 0.25s var(--cvw-ease); }
.cvw-plate:focus-within { box-shadow: 0 0 0 3px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.35); }
.cvw-plate.has-error { border-color: #d05a4a; }
.cvw-plate__input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font-family: inherit; font-weight: 700; font-size: 1.4rem; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; padding: 0.28em 0.2em; color: var(--color-black); }
.cvw-plate__input::placeholder { color: hsla(0, 0%, 0%, 0.22); font-weight: 700; }
.cvw-plate__region { flex: 0 0 auto; width: 72px; border-left: 2px solid var(--color-black); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0.25em; background: var(--color-white); }
.cvw-plate__region-input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-family: inherit; font-weight: 700; font-size: 1.05rem; text-align: center; padding: 0; color: var(--color-black); }
.cvw-plate__region-input::placeholder { color: hsla(0, 0%, 0%, 0.22); font-weight: 700; }
.cvw-plate__rus { display: flex; align-items: center; gap: 3px; }
.cvw-plate__region span { font-size: 0.52rem; font-weight: 700; letter-spacing: 0.08em; color: var(--color-black); }
.cvw-plate__flag { display: flex; width: 18px; height: 6px; border: 1px solid hsla(0, 0%, 0%, 0.25); }
.cvw-plate__flag i { flex: 1; }
.cvw-plate__flag i:nth-child(1) { background: #fff; }
.cvw-plate__flag i:nth-child(2) { background: #0039a6; }
.cvw-plate__flag i:nth-child(3) { background: #d52b1e; }

/* поля и списки */
.cvw-input, .cvw-search { width: 100%; padding: var(--space-xs) var(--space-sm); font-family: inherit; font-size: var(--text-sm); color: var(--color-white); background: hsla(var(--jl-ink), 0.7); border: 1px solid hsla(var(--jl-white), 0.14); border-radius: 0; transition: border-color 0.3s; }
.cvw-input:focus, .cvw-search:focus { outline: none; border-color: var(--color-primary); }
.cvw-input::placeholder, .cvw-search::placeholder { color: var(--color-contrast-medium); }
.cvw-fields { display: grid; gap: var(--space-xs); margin-bottom: var(--space-xs); }
@media (min-width: 30rem) { .cvw-fields { grid-template-columns: 1fr 1fr; } }

.cvw-list { max-height: 14rem; margin-top: var(--space-xxs); overflow-y: auto; overscroll-behavior: contain; border: 1px solid hsla(var(--jl-white), 0.12); }
.cvw-list__item { display: block; width: 100%; text-align: left; cursor: pointer; background: transparent; border: 0; font-family: inherit; font-size: var(--text-sm); color: var(--color-contrast-high); padding: 0.6em 0.85em; transition: background-color 0.15s var(--cvw-ease), color 0.15s var(--cvw-ease); }
.cvw-list__item + .cvw-list__item { border-top: 1px solid hsla(var(--jl-white), 0.07); }
.cvw-list__item:hover { background: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.22); color: var(--color-white); }
.cvw-list__empty { padding: 1em 0.85em; font-size: var(--text-sm); color: var(--color-contrast-medium); text-align: center; }
.cvw-list--grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.cvw-list--grid .cvw-list__item { text-align: center; border-top: 0; padding: 0.7em 0.2em; }
.cvw-list--grid .cvw-list__item:nth-child(n+5) { border-top: 1px solid hsla(var(--jl-white), 0.07); }
.cvw-list--grid .cvw-list__item:not(:nth-child(4n)) { border-right: 1px solid hsla(var(--jl-white), 0.07); }
.cvw-list__skeleton { padding: 0.55em 0.85em; }
.cvw-list__skeleton i { display: block; height: 11px; background: linear-gradient(90deg, hsla(var(--jl-white), 0.05) 25%, hsla(var(--jl-white), 0.12) 37%, hsla(var(--jl-white), 0.05) 63%); background-size: 400% 100%; animation: cvw-shimmer 1.3s ease infinite; }
@keyframes cvw-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.cvw-picked-wrap { display: flex; flex-direction: column; gap: var(--space-xxxs); margin-bottom: var(--space-xs); }
.cvw-picked { display: flex; align-items: center; justify-content: space-between; gap: 0.8em; width: 100%; text-align: left; cursor: pointer; background: hsla(var(--jl-white), 0.06); border: 0; padding: 0.5em 0.85em; font-family: inherit; color: inherit; transition: background-color 0.2s var(--cvw-ease); }
.cvw-picked:hover { background: hsla(var(--jl-white), 0.1); }
.cvw-picked__label { display: block; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-contrast-medium); }
.cvw-picked__value { font-size: var(--text-sm); font-weight: 700; color: var(--color-white); }
.cvw-picked__edit { flex: 0 0 auto; font-size: var(--text-xs); color: var(--color-primary-light); }

/* шаг контактов */
.cvw-car { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-xs); padding: var(--space-xs) var(--space-sm); background: hsla(var(--jl-white), 0.06); }
.cvw-car__title { font-size: var(--text-sm); font-weight: 700; color: var(--color-white); }
.cvw-car__sub { margin-top: 0.1em; font-size: var(--text-xs); color: var(--color-contrast-medium); }
.cvw-teaser { position: relative; display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); padding: var(--space-xs) var(--space-sm); overflow: hidden; background: hsla(var(--jl-white), 0.06); }
.cvw-teaser__value { filter: blur(10px); opacity: 0.5; user-select: none; font-size: var(--text-lg); font-weight: 700; color: var(--color-white); font-variant-numeric: tabular-nums; }
.cvw-lock { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; background: var(--color-primary); color: var(--color-white); }
.cvw-lock svg { width: 14px; height: 14px; fill: currentColor; }

.cvw-consent { margin-block: var(--space-xs) var(--space-sm); font-size: 0.72rem; }
.cvw-link { background: none; border: 0; padding: 0; font-family: inherit; font-size: var(--text-xs); color: var(--color-primary-light); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.cvw-link:hover { color: var(--color-white); }
.cvw-error { margin-bottom: var(--space-xs); font-size: var(--text-sm); color: #e08b7e; }

/* результат */
.cvw-price { margin-block: var(--space-xxxs) var(--space-xxs); font-size: clamp(1.9rem, 8vw, 3.2rem); line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; color: var(--color-white); font-variant-numeric: tabular-nums; }
.cvw-range { font-weight: 600; color: var(--color-contrast-high); }
.cvw-breakdown { margin-block: var(--space-sm); }
.cvw-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; padding: 0.62em 0; }
.cvw-row + .cvw-row { border-top: 1px solid hsla(var(--jl-white), 0.08); }
.cvw-row__key { font-size: var(--text-xs); color: var(--color-contrast-medium); }
.cvw-row__val { font-size: var(--text-sm); font-weight: 600; color: var(--color-white); }
.cvw-row__dots { flex: 1 1 auto; border-bottom: 1px dotted hsla(var(--jl-white), 0.2); transform: translateY(-0.25em); }
.cvw-note { margin-bottom: var(--space-sm); padding-left: 0.8em; border-left: 2px solid hsla(var(--jl-white), 0.15); }

/* индикаторы */
.cvw-spinner { display: inline-block; width: 1em; height: 1em; margin-right: 0.5em; border-radius: 50%; border: 2px solid hsla(var(--jl-white), 0.35); border-top-color: var(--color-white); animation: cvw-spin 0.7s linear infinite; }
@keyframes cvw-spin { to { transform: rotate(360deg); } }
.cvw-btn-loading .cvw-btn-label { opacity: 0.6; }
.cvw-loader, .cvw-fail { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: hsla(var(--jl-ink), 0.93); opacity: 0; visibility: hidden; transition: opacity 0.3s var(--cvw-ease), visibility 0.3s var(--cvw-ease); }
.cvw-loader.is-on, .cvw-fail.is-on { opacity: 1; visibility: visible; }
.cvw-loader__spin { width: 38px; height: 38px; border-radius: 50%; border: 3px solid hsla(var(--jl-white), 0.15); border-top-color: var(--color-primary); animation: cvw-spin 0.7s linear infinite; }
.cvw-fail__box { max-width: 20rem; padding: var(--space-md); text-align: center; }
.cvw-fail__icon { width: 48px; height: 48px; margin: 0 auto var(--space-xs); display: grid; place-items: center; background: hsla(var(--jl-white), 0.08); color: var(--color-primary-light); }
.cvw-fail__icon svg { width: 24px; height: 24px; fill: currentColor; }
.cvw-fail__title { margin-bottom: var(--space-xxxs); font-size: var(--text-md); font-weight: 700; color: var(--color-white); }
.cvw-fail__text { margin-bottom: var(--space-sm); font-size: var(--text-sm); color: var(--color-contrast-medium); }
@media (prefers-reduced-motion: reduce) { .cvw-loader, .cvw-fail { transition: none; } .cvw-loader__spin { animation-duration: 1.2s; } }

/* крупнее — только там, где есть место: на телефоне виджет остаётся компактным */
@media (min-width: 48rem) {
  .cvw-head__step, .cvw-head__name { font-size: var(--text-sm); }
  .cvw-seg { margin-bottom: var(--space-md); }
  .cvw-seg__btn { padding: 0.75em 0.9em; }
  .cvw-plate__input { font-size: 1.8rem; }
  .cvw-plate__region { width: 92px; }
  .cvw-plate__region-input { font-size: 1.35rem; }
  .cvw-plate__region span { font-size: 0.6rem; }
  .cvw-plate__flag { width: 22px; height: 7px; }
  .cvw-input, .cvw-search { padding: var(--space-sm); font-size: var(--text-md); }
  .cvw-list { max-height: 17rem; }
  .cvw-list__item { padding: 0.7em 0.95em; font-size: var(--text-md); }
  .cvw-car { padding: var(--space-sm); }
  .cvw-car__title { font-size: var(--text-md); }
  .cvw-teaser { margin-bottom: var(--space-md); padding: var(--space-sm); }
  .cvw-teaser__value { font-size: var(--text-xl); }
  .cvw-lock { width: 36px; height: 36px; }
  .cvw-lock svg { width: 16px; height: 16px; }
  .cvw-hint { font-size: var(--text-sm); line-height: 1.55; }
  .cvw-consent { margin-block: var(--space-sm) var(--space-md); font-size: var(--text-xs); }
  .cvw-row__key { font-size: var(--text-sm); }
  .cvw-row__val { font-size: var(--text-md); }
}

@media (max-width: 47.99rem) { .cvw { max-width: none; margin-left: 0; } }

/* ============================================================
   FIX · карта контактов: тёмный фильтр только на тайлы
   Раньше фильтр висел на всём контейнере и обесцвечивал метку —
   она сливалась с картой. Теперь красим только подложку.
   ============================================================ */
.cmap__frame { filter: none; }
.cmap__frame [class*="ground-pane"],
.cmap__frame [class*="copyrights-pane"] { filter: grayscale(1) invert(0.92) contrast(0.92) brightness(0.92); }
.cmap__frame [class*="places-pane"] { filter: drop-shadow(0 6px 14px hsla(var(--jl-ink), 0.55)); transition: opacity 0.5s; }
/* в обычном состоянии точку рисует наша плашка с логотипом; метка Яндекса
   нужна только в режиме карты, когда плашка уезжает */
.cmap:not(.is-map) .cmap__frame [class*="places-pane"] { opacity: 0; }

/* FIX · кнопки модели в витрине — столбиком одной ширины */
.scm__btns { flex-direction: column; align-items: stretch; }
.scm__btns > .btn { justify-content: center; }
@media (min-width: 48rem) {
  .scm__btns { align-items: flex-end; }
  .scm__btns > .btn { width: 100%; max-width: 17rem; }
}

/* ============================================================
   BLOCK · err — страница 404 (template page-error)
   Вёрстка статическая, в макете блока нет: собран из фирменного
   языка — квадрат со срезанным углом, стальной градиент, сетка.
   ============================================================ */
.err { position: relative; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; overflow: hidden; padding-top: calc(var(--hdr-space) + var(--space-sm)); padding-bottom: var(--space-lg); background: var(--color-bg-dark); }
@media (min-width: 64rem) { .err { padding-top: calc(var(--hdr-space) + var(--space-md)); padding-bottom: var(--space-lg); } }

/* фон: тонкая сетка + стальное свечение за цифрами */
.err__grid { position: absolute; inset: -1px; pointer-events: none; background-image: linear-gradient(to right, hsla(var(--jl-white), 0.045) 1px, transparent 1px), linear-gradient(to bottom, hsla(var(--jl-white), 0.045) 1px, transparent 1px); background-size: calc(var(--space-unit) * 4) calc(var(--space-unit) * 4); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 42%, #000 0%, transparent 78%); mask-image: radial-gradient(ellipse 80% 70% at 50% 42%, #000 0%, transparent 78%); }
.err__glow { position: absolute; left: 50%; top: 38%; width: min(120vw, 60rem); aspect-ratio: 1; pointer-events: none; transform: translate(-50%, -50%); background: radial-gradient(circle at 50% 50%, hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.3) 0%, hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.22) 36%, transparent 68%); filter: blur(10px); }

.err__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }

/* ---- 404 ---- */
.err__code { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.04em; overflow: hidden; padding: 0.12em 0.14em; font-size: clamp(4rem, min(23vw, 32vh), 12rem); font-weight: 700; line-height: 0.88; letter-spacing: -0.04em; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.err__d { background-image: linear-gradient(168deg, var(--color-white) 0%, var(--color-primary-lighter) 42%, var(--color-primary-darker) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* ноль — квадрат со срезанным углом, как кнопки сайта */
.err__ring { --cut: 0.17em; position: relative; width: 0.6em; height: 0.78em; margin-inline: 0.05em; border: 0.08em solid var(--color-primary); -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); box-shadow: 0 0 calc(var(--space-unit) * 2) hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.35); }
.err__ring::after { content: ""; position: absolute; right: calc(var(--cut) * -1); bottom: calc(var(--cut) * -1); width: var(--cut); height: var(--cut); background: linear-gradient(to top left, transparent calc(50% - 0.04em), var(--color-primary) calc(50% - 0.04em), var(--color-primary) calc(50% + 0.04em), transparent calc(50% + 0.04em)); }
.err__ring i { position: absolute; inset: -0.08em; background: linear-gradient(to top right, transparent calc(50% - 0.035em), hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.55) calc(50% - 0.035em), hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.55) calc(50% + 0.035em), transparent calc(50% + 0.035em)); }
/* фирменный блик — та же механика, что у .perk */
.err__sweep { position: absolute; inset: 0; width: 34%; pointer-events: none; background: linear-gradient(100deg, hsla(var(--jl-white), 0) 0%, hsla(var(--jl-white), 0.22) 50%, hsla(var(--jl-white), 0) 100%); -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000); mix-blend-mode: overlay; transform: translate3d(-130%, 0, 0) skewX(-18deg); animation: errSweep 6s var(--ease-out) infinite; }
@keyframes errSweep { 0%, 62% { transform: translate3d(-130%, 0, 0) skewX(-18deg); } 100% { transform: translate3d(320%, 0, 0) skewX(-18deg); } }

/* ---- текст ---- */
.err__eyebrow { margin-top: var(--space-md); color: var(--color-primary-lighter); }
.err__title { margin-top: var(--space-xxs); font-size: var(--text-xxl); line-height: 1.12; letter-spacing: -0.02em; color: var(--color-contrast-higher); }
@media (min-width: 64rem) { .err__title { font-size: var(--text-xxxl); } }
.err__text { max-width: 34em; margin-top: var(--space-sm); font-size: var(--text-sm); line-height: 1.6; color: var(--color-contrast-medium); }
@media (min-width: 48rem) { .err__text { font-size: var(--text-md); } }
.err__actions { margin-top: var(--space-lg); }

/* невысокие экраны (ноутбуки 1366x768 и ниже) — компактная раскладка */
@media (min-width: 48rem) and (max-height: 48rem) {
  .err { min-height: 0; padding-top: calc(var(--hdr-space) + var(--space-sm)); padding-bottom: var(--space-md); }
  .err__code { font-size: clamp(3.5rem, 22vh, 7rem); }
  .err__eyebrow { margin-top: var(--space-sm); }
  .err__text { margin-top: var(--space-xs); }
  .err__actions { margin-top: var(--space-sm); }
}

@media (prefers-reduced-motion: reduce) { .err__sweep { animation: none; opacity: 0; } }