/* ==========================================================================
   Stepanych Auto — Design System (корпоративний стиль). ЄДИНЕ джерело правди для вигляду сайту.
   Правила, приклади й список компонентів: DESIGN-SYSTEM.md; живий еталон: /uk/styleguide/.
   Префікс: .ds-  Змінні: --ds-*  Коріння: .ds (обгортка сторінки) + data-theme="light|dark|auto".
   Змінивши токен або компонент ТУТ, ви змінюєте його на всіх сторінках, що користуються системою.
   ========================================================================== */

/* ---------- 1. ТОКЕНИ ---------- */
/* Ширина й поля контейнера — на :root, бо шапка й підвал сайту стоять ПОЗА <main class="ds">, але мають збігатися з контентом.
   ds.css підключається лише на ds-сторінках, тому старі сторінки це не зачіпає. Сходинки росту — у блоці «Екрани» нижче. */
:root {
  --ds-gutter: clamp(16px, 3vw, 40px);   /* бічні поля контейнера */
  --ds-max: 1240px;                      /* ширина контенту */
}
.ds {
  /* бренд (однакові в обох темах) */
  --ds-green: #22b235;
  --ds-green-600: #1a8f2a;
  --ds-lime: #3ddc4f;
  --ds-ink: #0a0c0b;
  --ds-warn: #e8a317;
  --ds-danger: #d93a3a;
  --ds-info: #2e7dd7;

  /* типографіка */
  --ds-font: Manrope, system-ui, sans-serif;
  --ds-font-display: Manrope, system-ui, sans-serif;   /* заголовки: Manrope 800, звичайний регістр */
  --ds-font-num: Benzin, Manrope, sans-serif;           /* Benzin — ЛИШЕ для цифр і контурних номерів, не для речень */
  --ds-fs-h1: clamp(28px, 3.2vw, 44px);
  --ds-fs-h2: clamp(22px, 2.4vw, 32px);
  --ds-fs-h3: clamp(19px, 1.7vw, 22px);
  --ds-fs-lead: clamp(1rem, 1.3vw, 1.1875rem);
  --ds-fs-body: 16px;
  --ds-fs-small: 14px;

  /* форма й ритм */
  --ds-r-sm: 3px;                  /* гострі форми: технічний, «кресленний» характер */
  --ds-r: 6px;
  --ds-r-lg: 10px;
  --ds-r-pill: 999px;
  --ds-section-y: clamp(56px, 8vw, 96px);
  --ds-gap: clamp(14px, 1.6vw, 20px);

  /* рух */
  --ds-ease: cubic-bezier(.2, .7, .2, 1);
  --ds-dur: .3s;
  --ds-dur-slow: .7s;

  /* СВІТЛА тема (за замовчуванням) */
  --ds-bg: #fafafa;
  --ds-surface: #fff;
  --ds-surface-2: #f3f5f1;
  --ds-text: #222;
  --ds-muted: #5d625b;
  --ds-line: #e3e6e0;
  --ds-border: #858c80;            /* рамка інтерактивних елементів (поля, чекбокси): ≥3:1 за WCAG 1.4.11; --ds-line — лише розділювачі */
  --ds-accent: #157a25;            /* зелений для ТЕКСТУ: на світлому фоні темніший (≥4.5:1 на --ds-bg і --ds-surface-2) */
  --ds-warn-text: #8a5a00;         /* кольори станів для ТЕКСТУ (≥4.5:1); --ds-warn/--ds-danger/--ds-info — лише для фонів, ліній, значків */
  --ds-danger-text: #b42a2a;
  --ds-info-text: #1f63b8;
  --ds-accent-soft: rgba(34, 178, 53, .12);
  --ds-sh-1: 0 1px 2px rgba(20, 40, 20, .05), 0 8px 24px rgba(20, 40, 20, .06);
  --ds-sh-2: 0 22px 50px rgba(20, 40, 20, .12);
  --ds-field-bg: #fff;

  font-family: var(--ds-font);
  font-size: var(--ds-fs-body);
  line-height: 1.6;
  color: var(--ds-text);
  background: var(--ds-bg);
  overflow-x: clip;
  flex: 0 0 auto;   /* body старих стилів — flex-колонка висотою 100vh: блоки сторінки не повинні стискатися */
}

/* ТЕМНА тема: явно (data-theme="dark"), за системою (data-theme="auto"), або поверхня-острів (.ds-dark) */
.ds[data-theme="dark"],
.ds .ds-dark,
.ds-dark,
.ds-cta,
.ds-hero {
  --ds-bg: #0a0c0b;
  --ds-surface: #141816;
  --ds-surface-2: #101311;
  --ds-text: #f1f4ef;
  --ds-muted: rgba(255, 255, 255, .64);
  --ds-line: rgba(255, 255, 255, .12);
  --ds-border: rgba(255, 255, 255, .34);
  --ds-accent: #3ddc4f;
  --ds-accent-soft: rgba(61, 220, 79, .14);
  --ds-warn-text: #e8a317;
  --ds-danger-text: #f26a6a;
  --ds-info-text: #5aa0f0;
  --ds-sh-1: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --ds-sh-2: 0 22px 50px rgba(0, 0, 0, .55);
  --ds-field-bg: rgba(255, 255, 255, .06);
  color: var(--ds-text);
}
@media (prefers-color-scheme: dark) {
  .ds[data-theme="auto"] {
    --ds-bg: #0a0c0b;
    --ds-surface: #141816;
    --ds-surface-2: #101311;
    --ds-text: #f1f4ef;
    --ds-muted: rgba(255, 255, 255, .64);
    --ds-line: rgba(255, 255, 255, .12);
    --ds-border: rgba(255, 255, 255, .34);
    --ds-accent: #3ddc4f;
    --ds-accent-soft: rgba(61, 220, 79, .14);
    --ds-warn-text: #e8a317;
    --ds-danger-text: #f26a6a;
    --ds-info-text: #5aa0f0;
    --ds-sh-1: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    --ds-sh-2: 0 22px 50px rgba(0, 0, 0, .55);
    --ds-field-bg: rgba(255, 255, 255, .06);
  }
}
.ds *, .ds *::before, .ds *::after { box-sizing: border-box; }
.ds svg { fill: currentColor; }
/* Єдиний видимий фокус для клавіатури (WCAG 2.4.7/1.4.11): суцільний контур кольором акценту поточної теми (світла 5.2:1, темна 10.8:1).
   Перебиває глобальні `button{outline:0}` і `input{outline:0}` старих стилів. Працює й у Windows High Contrast (outline, не box-shadow). */
.ds :focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.ds .ds-acc summary:focus-visible { outline-offset: -4px; }   /* .ds-acc має overflow:hidden — контур усередину */


/* ---------- 3a. ЕКРАНИ, ШИРИНА КОНТЕНТУ, RETINA ----------
   Сходинки ширини (CSS px, не фізичні пікселі): xs <600 · sm 600 · md 860 · lg 1100 · xl 1440 · 2xl 1920 (Full HD) · 3xl 2400+ (2K/4K, Retina-монітори).
   ПОПЕРЕДНІ значення, що уточнюються за аналітикою (розподіл ширин екрана відвідувачів) — див. DESIGN-SYSTEM.md, розділ «Екрани».
   Принцип: фони секцій завжди на всю ширину (full-bleed); контент росте сходинками, щоб сайт не виглядав вузькою смугою посередині;
   на великих екранах збільшуємо кегль і кількість колонок, а не лише поля. */
.ds .container, body .header .container, body .sf .container { width: 100%; max-width: var(--ds-max); padding-left: var(--ds-gutter); padding-right: var(--ds-gutter); margin-left: auto; margin-right: auto; }
@media (min-width: 1600px) { :root { --ds-max: 1440px; } }
@media (min-width: 1920px) { :root { --ds-max: 1640px; } .ds { --ds-fs-h1: 52px; --ds-fs-h2: 38px; --ds-fs-lead: 1.25rem; --ds-fs-body: 17px; --ds-section-y: 112px; } }
@media (min-width: 2400px) { :root { --ds-max: 1920px; } .ds { --ds-fs-h1: 60px; --ds-fs-h2: 44px; --ds-fs-lead: 1.375rem; --ds-fs-body: 18px; --ds-section-y: 128px; } }
/* Широка поверхня на всю ширину контейнера сторінки (галереї, таблиці): class="ds-wide" */
.ds-wide { width: 100%; max-width: calc(var(--ds-max) + 2 * var(--ds-gutter)); margin-inline: auto; padding-inline: var(--ds-gutter); }
/* Retina: зображення — лише через ds_img() (srcset 1x/2x); тонкі лінії лишаються 1 px */
.ds img { max-width: 100%; height: auto; }

/* ---------- 2. РОЗДІЛИ ТА СІТКИ ---------- */
.ds-section { position: relative; padding: var(--ds-section-y) 0; background: var(--ds-bg); color: var(--ds-text); }
.ds-section--alt { background: var(--ds-surface-2); }
.ds-section--tight { padding: calc(var(--ds-section-y) * .6) 0; }
.ds-section.ds-dark { background: var(--ds-ink); }
.ds-head { max-width: 880px; margin: 0 0 clamp(28px, 4vw, 48px); }
.ds-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.ds-head--center .ds-lead { margin-left: auto; margin-right: auto; }
.ds-grid { display: grid; gap: var(--ds-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.ds-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ds-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ds-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ds-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.ds-split__side { position: sticky; top: calc(var(--ds-header-h, 100px) + 24px); }
.ds-stack > * + * { margin-top: var(--ds-gap); }
@media (max-width: 1100px) { .ds-grid--4 { grid-template-columns: repeat(2, 1fr); } .ds-split { grid-template-columns: 1fr; } .ds-split__side { position: static; } }
@media (max-width: 860px) { .ds-grid--3, .ds-grid--2 { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .ds-grid--4 { grid-template-columns: 1fr; } }

/* ---------- 3. ТИПОГРАФІКА ---------- */
.ds-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 700 12px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--ds-accent); }
.ds-eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--ds-green); }
.ds-h1, .ds-h2 { margin: 0; font-family: var(--ds-font-display); font-weight: 800; letter-spacing: -.025em; color: var(--ds-text); }
.ds-h1 { font-size: var(--ds-fs-h1); line-height: 1.12; }
.ds-h2 { font-size: var(--ds-fs-h2); line-height: 1.18; }
.ds-h1 em, .ds-h2 em { font-style: normal; color: var(--ds-accent); }
.ds-h3 { margin: 0 0 10px; font: 800 var(--ds-fs-h3)/1.25 var(--ds-font); color: var(--ds-text); }
.ds-lead { margin: 18px 0 0; max-width: 640px; font-size: var(--ds-fs-lead); line-height: 1.65; color: var(--ds-muted); }
.ds-muted { color: var(--ds-muted); }
.ds-small { font-size: var(--ds-fs-small); }
.ds-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--ds-accent); text-decoration: none; border-bottom: 2px solid var(--ds-accent-soft); padding-bottom: 2px; transition: border-color var(--ds-dur); }
.ds-link:hover { border-color: var(--ds-accent); }

/* Довгий текст інформаційної сторінки: <div class="ds-prose">…звичайні h2, h3, p, ul, ol, table, blockquote, img…</div> */
.ds-prose { max-width: 780px; font-size: 17px; line-height: 1.75; }
.ds-prose > * + * { margin-top: 1.1em; }
.ds-prose h2 { margin-top: 2em; font: 800 clamp(22px, 2.4vw, 28px)/1.25 var(--ds-font); }
.ds-prose h3 { margin-top: 1.6em; font: 800 20px/1.3 var(--ds-font); }
.ds-prose a { color: var(--ds-accent); font-weight: 700; text-underline-offset: 3px; }
.ds-prose ul, .ds-prose ol { padding-left: 1.3em; }
.ds-prose ul { list-style: disc; }
.ds-prose ol { list-style: decimal; }
.ds-prose li + li { margin-top: .45em; }
.ds-prose li::marker { color: var(--ds-accent); font-weight: 800; }
.ds-prose blockquote { margin-left: 0; padding: 18px 22px; border-left: 4px solid var(--ds-green); border-radius: 0 var(--ds-r-sm) var(--ds-r-sm) 0; background: var(--ds-accent-soft); }
.ds-prose img { max-width: 100%; height: auto; border-radius: var(--ds-r); }
.ds-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ds-prose th, .ds-prose td { padding: 12px 14px; border-bottom: 1px solid var(--ds-line); text-align: left; }
.ds-prose th { font-weight: 800; background: var(--ds-surface-2); }

/* ---------- 4. КНОПКИ, ЧІПИ, БЕЙДЖІ ---------- */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--ds-r); border: 1px solid transparent; font: 700 15px/1 var(--ds-font); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background var(--ds-dur), border-color var(--ds-dur), color var(--ds-dur), transform .15s; }
.ds-btn svg { width: 18px; height: 18px; flex: 0 0 18px; }
.ds-btn--primary { background: var(--ds-green); color: var(--ds-ink); }   /* чорний на зеленому 7:1; білий давав 2.8:1 */
.ds-btn--primary:hover { background: var(--ds-lime); }
.ds-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .34); color: #fff; }
.ds-btn--ghost:hover { border-color: var(--ds-lime); color: var(--ds-lime); }
.ds-btn--outline { background: transparent; border-color: var(--ds-border); color: var(--ds-text); }
.ds-btn--outline:hover { border-color: var(--ds-green); color: var(--ds-accent); }
.ds-btn--dark { background: var(--ds-text); color: var(--ds-bg); }
.ds-btn--dark:hover { background: var(--ds-green); color: var(--ds-ink); }
.ds-btn--sm { min-height: 36px; padding: 0 14px; font-size: 13px; border-radius: var(--ds-r-sm); }
.ds-btn__arrow { transition: transform var(--ds-dur) var(--ds-ease); }
.ds-btn:hover .ds-btn__arrow { transform: translateX(4px); }
.ds-btn--square { width: 44px; padding: 0; }
.ds-btn--square.ds-btn--sm { width: 36px; }
.ds-btn--block { display: flex; width: 100%; }
.ds-btn:active { transform: translateY(0) scale(.98); }
.ds-btn[disabled], .ds-btn.is-disabled { opacity: .5; pointer-events: none; }
/* ряд елементів (кнопки, чіпи, мітки) з відступом: <div class="ds-row">…</div> */
.ds-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ds-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.ds-chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--ds-r-sm); border: 1px solid var(--ds-border); background: transparent; font: 700 12px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.ds-chip i { width: 8px; height: 8px; background: var(--ds-lime); animation: ds-blink 1.6s steps(2, jump-none) infinite; }
.ds-badge { display: inline-block; padding: 4px 8px; border-radius: var(--ds-r-sm); background: var(--ds-accent-soft); color: var(--ds-accent); font: 700 11px/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.ds-badge--warn { background: rgba(232, 163, 23, .16); color: var(--ds-warn-text); }
.ds-badge--danger { background: rgba(217, 58, 58, .14); color: var(--ds-danger-text); }

/* ---------- 5. КАРТКИ ---------- */
.ds-card { position: relative; padding: 30px 28px; border-radius: var(--ds-r); background: var(--ds-surface); border: 1px solid var(--ds-line); transition: border-color var(--ds-dur), background var(--ds-dur); }
.ds-card p { margin: 0; color: var(--ds-muted); }
a.ds-card, button.ds-card { display: block; width: 100%; text-align: left; color: inherit; text-decoration: none; font: inherit; cursor: pointer; }
.ds-card--lift:hover, a.ds-card:hover, button.ds-card:hover { border-color: var(--ds-green); }
.ds-card--flat { box-shadow: none; }
.ds-card--glass { background: var(--ds-surface); }
.ds-card--glass:hover { border-color: var(--ds-green); }
.ds-card__n { display: block; margin-bottom: 20px; font: 400 clamp(44px, 5vw, 64px)/1 var(--ds-font-num); color: transparent; -webkit-text-stroke: 1.5px rgba(34, 178, 53, .55); }
.ds-dark .ds-card__n, .ds[data-theme="dark"] .ds-card__n { -webkit-text-stroke-color: rgba(61, 220, 79, .5); }
.ds-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: var(--ds-r-sm); background: var(--ds-accent-soft); color: var(--ds-accent); font-size: 20px; }
.ds-icon svg { width: 24px; height: 24px; }

/* ---------- 6. ЦИФРИ, ЦИТАТИ, ПЕРЕВАГИ, ПОВІДОМЛЕННЯ ---------- */
.ds-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--ds-line); border-radius: var(--ds-r); background: var(--ds-surface); }
.ds-dark .ds-stats, .ds-hero .ds-stats { background: transparent; border-color: var(--ds-border); }
.ds-stat { padding: 26px 24px; border-right: 1px solid var(--ds-line); }
.ds-stat:last-child { border-right: 0; }
.ds-stat__num { font: 400 clamp(32px, 4vw, 52px)/1 var(--ds-font-num); color: var(--ds-text); }
.ds-stat__num small { font-size: .42em; color: var(--ds-accent); }
.ds-stat p { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--ds-muted); }
@media (max-width: 1100px) { .ds-stats { grid-template-columns: repeat(2, 1fr); } .ds-stat:nth-child(2) { border-right: 0; } .ds-stat:nth-child(-n+2) { border-bottom: 1px solid var(--ds-line); } }
.ds-quote { position: relative; margin: 0; padding: 28px 26px; border-radius: var(--ds-r); background: var(--ds-surface); border: 1px solid var(--ds-line); }
.ds-quote::before { content: "\201C"; position: absolute; right: 20px; top: 2px; font: 400 80px/1 Georgia, serif; color: var(--ds-accent-soft); }
.ds-quote blockquote { margin: 0 0 16px; font-size: 16px; line-height: 1.7; }
.ds-quote figcaption { font-weight: 800; color: var(--ds-accent); }
.ds-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.ds-checks li { display: flex; gap: 14px; align-items: flex-start; font-weight: 600; line-height: 1.5; }
.ds-checks svg { flex: 0 0 28px; width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--ds-accent-soft); color: var(--ds-accent); }
.ds-callout { --ds-tag: var(--ds-accent); position: relative; padding: 16px 18px 16px; border: 1px solid var(--ds-line); border-radius: var(--ds-r-sm); background: var(--ds-surface); }
.ds-callout::before { content: attr(data-tag); display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 700 11px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--ds-tag); }
.ds-callout::after { content: ""; position: absolute; left: 18px; top: 16px; }
.ds-callout--warn { --ds-tag: var(--ds-warn-text); }
.ds-callout--danger { --ds-tag: var(--ds-danger-text); }
.ds-callout--info { --ds-tag: var(--ds-info-text); }
.ds-callout b { display: block; margin-bottom: 4px; }
.ds-callout p { margin: 0; color: var(--ds-muted); }

/* ---------- 7. КРОКИ (шлях) — лінія ПІД кружками ---------- */
.ds-steps { --ds-progress: 0; list-style: none; margin: 0; padding: 0; position: relative; }
.ds-steps::before, .ds-steps::after { content: ""; position: absolute; left: 22px; top: 24px; width: 3px; border-radius: var(--ds-r-sm); z-index: 0; }
.ds-steps::before { bottom: 24px; background: var(--ds-line); }
.ds-steps::after { height: calc((100% - 48px) * var(--ds-progress)); background: linear-gradient(var(--ds-green), var(--ds-lime));  }
.ds-step { position: relative; z-index: 1; padding: 0 0 38px 78px; }
.ds-step:last-child { padding-bottom: 0; }
.ds-step__dot { position: absolute; left: 0; top: 0; z-index: 2; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--ds-bg); border: 3px solid var(--ds-line); font: 800 18px/1 var(--ds-font); color: var(--ds-muted); transition: background .4s, border-color .4s, color .4s, transform .4s, box-shadow .4s; }
.ds-step.is-on .ds-step__dot { background: var(--ds-green); border-color: var(--ds-green); color: var(--ds-ink); }
.ds-step h3 { margin: 4px 0 8px; font: 800 var(--ds-fs-h3)/1.25 var(--ds-font); }
.ds-step p { margin: 0; max-width: 560px; color: var(--ds-muted); }

/* ---------- 8. ВКЛАДКИ Й АКОРДЕОН ---------- */
.ds-tabs__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.ds-tabs__tab { padding: 10px 18px; border-radius: var(--ds-r-sm); border: 1px solid var(--ds-border); background: transparent; color: var(--ds-text); font: 700 14px/1 var(--ds-font); cursor: pointer; transition: background var(--ds-dur), border-color var(--ds-dur), color var(--ds-dur); }
.ds-tabs__tab:hover { border-color: var(--ds-green); }
.ds-tabs__tab[aria-selected="true"] { background: var(--ds-green); border-color: var(--ds-green); color: var(--ds-ink); }
.ds-tabs__panel[hidden] { display: none; }
.ds-acc { border: 1px solid var(--ds-line); border-radius: var(--ds-r-sm); background: var(--ds-surface); overflow: hidden; transition: border-color var(--ds-dur); }
.ds-acc[open], .ds-acc:hover { border-color: var(--ds-green); }
.ds-acc + .ds-acc { margin-top: 10px; }
.ds-acc[open], .ds-acc:hover { border-color: var(--ds-green); }
.ds-acc summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; font: 800 17px/1.4 var(--ds-font); cursor: pointer; list-style: none; }
.ds-acc summary::-webkit-details-marker { display: none; }
.ds-acc summary { -webkit-user-select: none; user-select: none; }   /* швидкі кліки не підсвічують текст питання */
.ds-acc summary::after { content: ""; flex: 0 0 28px; width: 28px; height: 28px; background-color: var(--ds-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%2710%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%272.4%27/%3E%3Cg stroke=%27%23000%27 stroke-width=%271.9%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M12 12V4%27/%3E%3Cpath d=%27M12 12l7.6-2.5%27/%3E%3Cpath d=%27M12 12l4.7 6.5%27/%3E%3Cpath d=%27M12 12l-4.7 6.5%27/%3E%3Cpath d=%27M12 12L4.4 9.5%27/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%2710%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%272.4%27/%3E%3Cg stroke=%27%23000%27 stroke-width=%271.9%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M12 12V4%27/%3E%3Cpath d=%27M12 12l7.6-2.5%27/%3E%3Cpath d=%27M12 12l4.7 6.5%27/%3E%3Cpath d=%27M12 12l-4.7 6.5%27/%3E%3Cpath d=%27M12 12L4.4 9.5%27/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; transition: transform .8s cubic-bezier(.3, 1.3, .5, 1); }
.ds-acc[open] summary::after { transform: rotate(360deg); }
.ds-acc__body { padding: 0 22px 22px; color: var(--ds-muted); font-size: 15px; line-height: 1.65; }
.ds-acc__body > * { margin: 0; padding: 0; }
.ds-acc__body { cursor: pointer; }   /* уся область відповіді закриває питання; посилання всередині лишаються звичайними */
.ds-acc__body a { cursor: pointer; }

/* ---------- 9. ФОРМИ ---------- */
.ds-form { display: grid; gap: 16px; align-items: start; }
.ds-form--2 { grid-template-columns: repeat(2, 1fr); }
.ds-field { display: grid; gap: 8px; }
.ds-field--full { grid-column: 1 / -1; }
.ds-label { font-size: 14px; font-weight: 700; }
.ds-label i { color: var(--ds-danger-text); font-style: normal; }
.ds .ds-input { width: 100%; min-height: 44px; padding: 0 14px; border-radius: var(--ds-r); border: 1px solid var(--ds-border); background: var(--ds-field-bg); color: var(--ds-text); font: 500 16px/1.4 var(--ds-font); transition: border-color var(--ds-dur), box-shadow var(--ds-dur), background var(--ds-dur); -webkit-appearance: none; appearance: none; }
.ds .ds-input--sm { min-height: 36px; font-size: 14px; }
.ds textarea.ds-input { min-height: 112px; padding: 10px 14px; resize: vertical; }
.ds select.ds-input { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 13px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 38px; cursor: pointer; }
.ds .ds-input::placeholder { color: var(--ds-muted); opacity: 1; }
.ds .ds-input:hover:not(:disabled):not(:focus) { border-color: var(--ds-text); }
.ds .ds-input:focus { outline: 2px solid var(--ds-accent); outline-offset: 1px; border-color: var(--ds-accent); }
.ds .ds-input:disabled { opacity: .55; cursor: not-allowed; background: var(--ds-surface-2); }
.ds .ds-field.is-error .ds-input { border-color: var(--ds-danger); }
.ds .ds-field.is-error .ds-input:focus { outline-color: var(--ds-danger-text); }
.ds .ds-field.is-ok .ds-input { border-color: var(--ds-green); }
.ds-hint { font-size: 13px; color: var(--ds-muted); }
.ds-field.is-error .ds-hint { color: var(--ds-danger-text); font-weight: 700; }
/* checkbox / radio: видима рамка 1.5 px, наведення, фокус-кільце, вибраний, вимкнений. Розмітка: <label class="ds-check"><input type="checkbox"> Текст</label> */
.ds-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; cursor: pointer; }
.ds .ds-check input { -webkit-appearance: none; appearance: none; flex: 0 0 20px; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid var(--ds-border); border-radius: var(--ds-r-sm); background: var(--ds-field-bg); display: grid; place-items: center; cursor: pointer; transition: border-color var(--ds-dur), background var(--ds-dur), box-shadow var(--ds-dur); }
.ds .ds-check input[type="radio"] { border-radius: 50%; }
.ds .ds-check:hover input:not(:disabled) { border-color: var(--ds-green); }
.ds .ds-check input:checked { background: var(--ds-green); border-color: var(--ds-green); }
.ds .ds-check input[type="checkbox"]:checked::after { content: ""; width: 5px; height: 10px; border: solid var(--ds-ink); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.ds .ds-check input[type="radio"]:checked { background: var(--ds-field-bg); }
.ds .ds-check input[type="radio"]:checked::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ds-green); }
.ds .ds-check input:disabled { opacity: .5; cursor: not-allowed; }
.ds .ds-check:has(input:disabled) { opacity: .7; cursor: not-allowed; }
@media (max-width: 700px) { .ds-form--2 { grid-template-columns: 1fr; } }

/* ---------- 10. ТАБЛИЦЯ, МЕДІА ---------- */
.ds-table-wrap { overflow-x: auto; border: 1px solid var(--ds-line); border-radius: var(--ds-r-sm); background: var(--ds-surface); }
.ds-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; }
.ds-table th, .ds-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--ds-line); }
.ds-table th { font-weight: 800; background: var(--ds-surface-2); white-space: nowrap; }
.ds-table tr:last-child td { border-bottom: 0; }
.ds-table tbody tr:hover td { background: var(--ds-accent-soft); }
.ds-media { position: relative; margin: 0; border-radius: var(--ds-r); overflow: hidden; background: var(--ds-surface-2); }
.ds-media img, .ds-media video { display: block; width: 100%; height: auto; transition: transform .5s var(--ds-ease); }
.ds-media:hover img { transform: scale(1.05); }
.ds-media figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 16px 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); color: #fff; font-size: 14px; font-weight: 700; }

/* ---------- 11. ПЕРШИЙ ЕКРАН І CTA-СМУГА ---------- */
.ds-hero { position: relative; padding: calc(var(--ds-header-h, 100px) + 40px) 0 48px; background: var(--ds-ink); color: #fff; isolation: isolate; overflow: clip; }
.ds-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse at 60% 30%, #000 10%, transparent 72%); mask-image: radial-gradient(ellipse at 60% 30%, #000 10%, transparent 72%); }
.ds-hero .ds-h1, .ds-hero .ds-h2 { color: #fff; }
.ds-hero .ds-h1 em { color: var(--ds-lime); }
.ds-hero .ds-lead { color: rgba(255, 255, 255, .74); }
.ds-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; }
.ds-hero .ds-chip { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); color: #fff; }
.ds-hero .ds-stats { margin-top: 48px; }
@media (max-width: 1100px) { .ds-hero__grid { grid-template-columns: 1fr; gap: 28px; } }
.ds-cta { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; padding: clamp(26px, 4vw, 44px); border-radius: var(--ds-r); background: var(--ds-ink); border: 1px solid rgba(255, 255, 255, .2); color: #fff; }
.ds-cta .ds-h2 { color: #fff; font-size: clamp(20px, 2.4vw, 30px); }
.ds-cta::before { content: ""; position: absolute; inset: 8px; pointer-events: none; --ds-c: 20px; background: linear-gradient(var(--ds-lime), var(--ds-lime)) left top / var(--ds-c) 2px no-repeat, linear-gradient(var(--ds-lime), var(--ds-lime)) left top / 2px var(--ds-c) no-repeat, linear-gradient(var(--ds-lime), var(--ds-lime)) right bottom / var(--ds-c) 2px no-repeat, linear-gradient(var(--ds-lime), var(--ds-lime)) right bottom / 2px var(--ds-c) no-repeat; }
.ds-cta p { margin: 12px 0 0; color: rgba(255, 255, 255, .72); }
@media (max-width: 760px) { .ds-cta { grid-template-columns: 1fr; } }

/* ---------- 12. РУХ ---------- */
/* поява при прокрутці: html.ds-js додає ds.js; без JS усе видно одразу */
.ds-js [data-ds-reveal] { opacity: 0; transform: translateY(28px); transition: opacity var(--ds-dur-slow) var(--ds-ease), transform var(--ds-dur-slow) var(--ds-ease); }
.ds-js [data-ds-reveal].is-in { opacity: 1; transform: none; }
.ds-js [data-ds-reveal="left"] { transform: translateX(-32px); }
.ds-js [data-ds-reveal="scale"] { transform: scale(.94); }
.ds-js [data-ds-reveal].is-in { transform: none; }
@keyframes ds-blink { 50% { opacity: .25; } }
@keyframes ds-float { 50% { transform: translateY(-10px); } }
@keyframes ds-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }
@keyframes ds-draw { to { stroke-dashoffset: 0; } }
@keyframes ds-marquee { to { transform: translateX(-50%); } }
.ds-float { animation: ds-float 6s ease-in-out infinite; }
.ds-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ds-draw 2.4s .4s var(--ds-ease) forwards; }   /* SVG path з pathLength="1" */
.ds-marquee { overflow: hidden; }
.ds-marquee__track { display: flex; width: max-content; gap: 48px; animation: ds-marquee 30s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .ds *, .ds *::before, .ds *::after { animation: none !important; transition: none !important; }
  .ds-js [data-ds-reveal] { opacity: 1; transform: none; }
  .ds-draw { stroke-dashoffset: 0; }
}

/* ---------- 13. МОБІЛЬНА АДАПТАЦІЯ ---------- */
@media (max-width: 600px) {
  .ds-actions .ds-btn { width: 100%; }
  .ds-card { padding: 26px 22px; }
  .ds-step { padding-left: 64px; }
  .ds-step__dot { width: 42px; height: 42px; }
  .ds-steps::before, .ds-steps::after { left: 19.5px; }
  .ds-stat { padding: 20px 16px; }
  .ds-acc summary { padding: 16px 18px; font-size: 16px; }
  .ds-prose { font-size: 16px; }
}

/* ---------- 14. ФІРМОВІ «ФІШКИ» (brand signature) ----------
   Те, що робить сторінки впізнаваними й «автомобільними». Кожна сторінка має містити щонайменше 2–3 з них
   (контурні цифри, дорога, табличка, шкала, спец-рядки, мітки-кути). Не вигадуйте нових без потреби. */

/* 1) Контурна цифра — головний підпис стилю. Розмір задає шрифт; обводка, без заливки. */
.ds-numeral { display: inline-block; font: 400 var(--ds-numeral-size, clamp(56px, 7vw, 96px))/1 var(--ds-font-num); color: transparent; -webkit-text-stroke: 1.5px rgba(34, 178, 53, .6); transition: -webkit-text-stroke-color var(--ds-dur), transform .5s var(--ds-ease); }
.ds-dark .ds-numeral, .ds[data-theme="dark"] .ds-numeral { -webkit-text-stroke-color: rgba(61, 220, 79, .5); }
.ds-card:hover .ds-numeral, .ds-card:hover .ds-card__n { -webkit-text-stroke-color: var(--ds-green); }
.ds-card:hover .ds-card__n { transform: translateX(6px); }
.ds-card__n { transition: -webkit-text-stroke-color var(--ds-dur), transform .5s var(--ds-ease); }
/* цифра-водяний знак у кутку картки: <span class="ds-watermark">04</span> */
.ds-watermark { position: absolute; right: 18px; top: 6px; font: 400 clamp(60px, 7vw, 84px)/1 var(--ds-font-num); color: transparent; -webkit-text-stroke: 1.5px rgba(34, 178, 53, .16); pointer-events: none; transition: -webkit-text-stroke-color var(--ds-dur); }
.ds-dark .ds-watermark, .ds[data-theme="dark"] .ds-watermark { -webkit-text-stroke-color: rgba(255, 255, 255, .14); }
.ds-card:hover .ds-watermark { -webkit-text-stroke-color: rgba(34, 178, 53, .5); }

/* 2) Дорога — роздільник/зв'язка секцій: штрихова розмітка біжить. <div class="ds-road" aria-hidden="true"></div> */
.ds-road { position: relative; height: 10px; margin: clamp(28px, 4vw, 48px) 0; border-radius: 0; background: var(--ds-line); overflow: hidden; }
.ds-road::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 2px; background: repeating-linear-gradient(90deg, var(--ds-lime) 0 22px, transparent 22px 44px); animation: ds-road 1.2s linear infinite; }
@keyframes ds-road { to { background-position: 44px 0; } }
.ds-dark .ds-road, .ds[data-theme="dark"] .ds-road { background: rgba(255, 255, 255, .1); }

/* 3) Табличка — номер лота, VIN, код. <span class="ds-plate"><i>UA</i>BMW 5 · 2018</span> */
.ds-plate { display: inline-flex; align-items: stretch; border: 2px solid var(--ds-text); border-radius: var(--ds-r-sm); background: var(--ds-surface); color: var(--ds-text); font: 800 15px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; overflow: hidden; }
.ds-plate i { display: grid; place-items: center; padding: 0 9px; background: var(--ds-green); color: var(--ds-ink); font-style: normal; font-size: 11px; letter-spacing: .04em; }
.ds-plate span, .ds-plate { padding-right: 12px; }
.ds-plate i { margin-right: 10px; }

/* 4) Шкала — як тахометр: сегменти заповнюються при появі. <div class="ds-meter" style="--v:.8" data-ds-reveal="scale"><b></b></div> */
.ds-meter { height: 14px; border-radius: var(--ds-r-sm); background: var(--ds-line); overflow: hidden; -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 14px); mask-image: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 14px); }
.ds-meter b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ds-green), var(--ds-lime)); transition: width 1.4s var(--ds-ease) .2s; }
.ds-meter.is-in b, html:not(.ds-js) .ds-meter b { width: calc(var(--v, .5) * 100%); }

/* 5) Спідометр — дугова цифра. Розмітка в styleguide (ds_gauge). Значення --v від 0 до 1 */
.ds-gauge { position: relative; width: 100%; max-width: 240px; text-align: center; }
.ds-gauge svg { width: 100%; height: auto; overflow: visible; fill: none; }
.ds-gauge__bg { stroke: var(--ds-line); stroke-width: 12; stroke-linecap: butt; }
.ds-gauge__fg { stroke: var(--ds-green); stroke-width: 12; stroke-linecap: butt; stroke-dasharray: 0 1; transition: stroke-dasharray 1.6s var(--ds-ease) .2s; }
.ds-gauge.is-in .ds-gauge__fg, html:not(.ds-js) .ds-gauge__fg { stroke-dasharray: var(--v, .5) 1; }
.ds-gauge__val { position: absolute; left: 0; right: 0; bottom: 2px; font: 400 clamp(26px, 3vw, 34px)/1 var(--ds-font-num); color: var(--ds-text); }
.ds-gauge__val small { font-size: .45em; color: var(--ds-accent); }
.ds-gauge__dial { position: relative; }
.ds-gauge__cap { margin-top: 14px; font-size: 14px; color: var(--ds-muted); }

/* 6) Техкартка — рядки «назва ……… значення», як у специфікації авто. <dl class="ds-spec"><div><dt>Пробіг</dt><dd>48 000 км</dd></div></dl> */
.ds-spec { margin: 0; display: grid; gap: 4px; }
.ds-spec div { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; }
.ds-spec dt { color: var(--ds-muted); white-space: nowrap; }
.ds-spec div::after { content: ""; order: 1; flex: 1; border-bottom: 2px dotted var(--ds-line); transform: translateY(-4px); }
.ds-spec dt { order: 0; }
.ds-spec dd { order: 2; margin: 0; font-weight: 800; text-align: right; }

/* 7) Мітки-кути («рамка кадру», як у техкресленні): вбудовані в КОЖНУ .ds-card; для інших блоків — class="ds-corners". Використовують ::before */
.ds-corners { position: relative; }
.ds-card::before, .ds-corners::before { content: ""; position: absolute; inset: 8px; pointer-events: none; --ds-c: 22px;
  background:
    linear-gradient(var(--ds-green), var(--ds-green)) left top / var(--ds-c) 2px no-repeat,
    linear-gradient(var(--ds-green), var(--ds-green)) left top / 2px var(--ds-c) no-repeat,
    linear-gradient(var(--ds-green), var(--ds-green)) right bottom / var(--ds-c) 2px no-repeat,
    linear-gradient(var(--ds-green), var(--ds-green)) right bottom / 2px var(--ds-c) no-repeat;
  transition: --ds-c .3s; }
.ds-card:hover::before, .ds-corners:hover::before { --ds-c: 38px; }
@property --ds-c { syntax: "<length>"; inherits: false; initial-value: 22px; }

/* 8) Світловий промінь — як фара: при наведенні по картці пробігає блік. class="ds-sweep" (разом з .ds-card) */
.ds-sweep::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-18deg); pointer-events: none; opacity: 0; }
.ds-sweep:hover::after { left: 130%; opacity: 1; transition: left .9s var(--ds-ease), opacity .2s; }

/* 9) Шеврони — напрямок руху вперед; роздільник між кроками чи біля посилань. <span class="ds-chevrons" aria-hidden="true"></span> */
.ds-chevrons { display: inline-block; width: 36px; height: 14px; background: repeating-linear-gradient(135deg, transparent 0 4px, var(--ds-green) 4px 6px) 0 0 / 14px 14px; clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%, 30% 50%); animation: ds-chev 1s linear infinite; vertical-align: middle; }
@keyframes ds-chev { to { background-position: 14px 0; } }

/* ---------- 15. ЕТАЛОННА СТОРІНКА (лише /styleguide/) ---------- */
.ds-demo { margin: 0 0 28px; }
.ds-demo__title { margin: 0 0 6px; font: 800 18px/1.3 var(--ds-font); }
.ds-demo__desc { margin: 0 0 14px; font-size: 14px; color: var(--ds-muted); max-width: 760px; }
.ds-demo__stage { padding: clamp(18px, 3vw, 32px); border: 1px dashed var(--ds-line); border-radius: var(--ds-r-sm); background: var(--ds-bg); }
.ds-code { margin: 10px 0 0; padding: 14px 16px; border-radius: var(--ds-r-sm); background: #0d1210; color: #b9f5c0; font: 500 12.5px/1.6 ui-monospace, "SF Mono", Menlo, monospace; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
/* Режим розробника: код викликів і пояснення потрібні лише команді. За замовчуванням приховані (показ клієнту), вмикає кнопка в панелі теми або ?dev=1 */
html:not(.ds-dev) .ds-code, html:not(.ds-dev) .ds-demo__desc, html:not(.ds-dev) .ds-dev-only { display: none; }
.ds-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ds-swatch { border: 1px solid var(--ds-line); border-radius: var(--ds-r-sm); overflow: hidden; background: var(--ds-surface); font-size: 12px; }
.ds-swatch i { display: block; height: 64px; border-bottom: 1px solid var(--ds-line); }
.ds-swatch b, .ds-swatch span { display: block; padding: 6px 10px 0; }
.ds-swatch span { padding-bottom: 8px; color: var(--ds-muted); font-family: ui-monospace, Menlo, monospace; }
.ds-themebar { position: sticky; top: calc(var(--ds-header-h, 80px) + 8px); z-index: 20; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: max-content; max-width: calc(100% - 32px); margin: 0 auto; padding: 8px 10px; border: 1px solid var(--ds-border); border-radius: var(--ds-r); background: var(--ds-surface); font-size: 13px; font-weight: 700; }
.ds-themebar button { padding: 8px 14px; border: 1px solid var(--ds-border); border-radius: var(--ds-r-sm); background: transparent; color: var(--ds-text); font: 700 13px/1 var(--ds-font); cursor: pointer; }
.ds-themebar button[aria-pressed="true"] { background: var(--ds-green); border-color: var(--ds-green); color: var(--ds-ink); }
.ds-radius-demo { display: flex; flex-wrap: wrap; gap: 14px; }
.ds-radius-demo div { width: 110px; height: 70px; display: grid; place-items: center; background: var(--ds-accent-soft); border: 1px solid var(--ds-line); font-size: 12px; font-weight: 700; }

/* ---------- 16. ТАБЛИЦІ (розширено) ---------- */
/* Модифікатори .ds-table: --zebra (смуги), --sticky (шапка липне при прокрутці обгортки), --stack (на мобільному кожен рядок стає карткою; у <td> потрібен data-label),
   --compare (порівняння: перша колонка — назви, колонка .is-best підсвічена), .ds-num (число праворуч), .ds-price (ціна). */
.ds-table--zebra tbody tr:nth-child(even) td { background: var(--ds-surface-2); }
.ds-table-wrap--sticky { max-height: 480px; overflow: auto; }
.ds-table--sticky th { position: sticky; top: 0; z-index: 1; }
.ds-table .ds-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-table .ds-price { font-weight: 800; color: var(--ds-accent); text-align: right; white-space: nowrap; }
.ds-table--compare th:first-child, .ds-table--compare td:first-child { font-weight: 800; background: var(--ds-surface-2); }
.ds-table--compare .is-best { background: var(--ds-accent-soft); font-weight: 800; }
.ds-table--compare thead .is-best { box-shadow: inset 0 3px 0 var(--ds-green); }
@media (max-width: 700px) {
  .ds-table--stack { min-width: 0; }
  .ds-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ds-table--stack, .ds-table--stack tbody, .ds-table--stack tr, .ds-table--stack td { display: block; width: 100%; }
  .ds-table--stack tr { padding: 10px 0; border-bottom: 8px solid var(--ds-surface-2); }
  .ds-table--stack td { display: flex; justify-content: space-between; gap: 16px; padding: 10px 16px; border: 0; text-align: right; }
  .ds-table--stack td::before { content: attr(data-label); flex: 0 0 auto; font-weight: 700; color: var(--ds-muted); text-align: left; }
  .ds-table--stack tbody tr:nth-child(even) td { background: transparent; }
}

/* ---------- 17. КАРТКА АВТО (каталог, добірки, схожі авто) ---------- */
.ds-car { display: flex; flex-direction: column; border-radius: var(--ds-r); background: var(--ds-surface); border: 1px solid var(--ds-line); overflow: hidden; color: inherit; text-decoration: none; transition: border-color var(--ds-dur); }
.ds-car:hover { border-color: var(--ds-green); }
.ds-car__media { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--ds-surface-2), var(--ds-accent-soft)); overflow: hidden; }
.ds-car__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ds-ease); }
.ds-car:hover .ds-car__media img { transform: scale(1.06); }
.ds-car__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ds-accent); opacity: .45; }
.ds-car__ph svg { width: 54%; height: auto; }
.ds-car__tags { position: absolute; left: 12px; top: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.ds-car__tags .ds-badge { background: rgba(10, 12, 11, .86); color: #fff; }
.ds-car__tags .ds-badge--accent { background: var(--ds-green); color: var(--ds-ink); }
.ds-car__body { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 22px; flex: 1; }
.ds-car__title { margin: 0; font: 800 19px/1.25 var(--ds-font); }
.ds-car__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-car__chips span { padding: 5px 9px; border-radius: var(--ds-r-sm); background: var(--ds-surface-2); font-size: 13px; font-weight: 600; color: var(--ds-muted); }
.ds-car__price { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--ds-line); }
.ds-car__price small { display: block; font-size: 12px; color: var(--ds-muted); }
.ds-car__price b { display: block; font: 800 18px/1.25 var(--ds-font); overflow-wrap: anywhere; }
.ds-car__price div:last-child b { color: var(--ds-accent); }
.ds-car__cta { display: flex; align-items: center; justify-content: space-between; font-weight: 800; color: var(--ds-accent); }
.ds-car__cta::after { content: "→"; transition: transform var(--ds-dur) var(--ds-ease); }
.ds-car:hover .ds-car__cta::after { transform: translateX(6px); }

/* ---------- 18. БЛОГ І СТАТТЯ ---------- */
.ds-post { display: flex; flex-direction: column; border-radius: var(--ds-r); background: var(--ds-surface); border: 1px solid var(--ds-line); overflow: hidden; color: inherit; text-decoration: none; transition: border-color var(--ds-dur); }
.ds-post:hover { border-color: var(--ds-green); }
.ds-post__media { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--ds-surface-2), var(--ds-accent-soft)); overflow: hidden; }
.ds-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ds-ease); }
.ds-post:hover .ds-post__media img { transform: scale(1.06); }
.ds-post__media .ds-badge { position: absolute; left: 12px; top: 12px; background: rgba(10, 12, 11, .86); color: #fff; }
.ds-post__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; }
.ds-post__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ds-muted); }
.ds-post__title { margin: 0; font: 800 19px/1.3 var(--ds-font); }
.ds-post__text { margin: 0; color: var(--ds-muted); font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ds-post__more { margin-top: auto; font-weight: 800; color: var(--ds-accent); }
.ds-post--wide { flex-direction: row; }
.ds-post--wide .ds-post__media { flex: 0 0 46%; aspect-ratio: auto; min-height: 260px; }
@media (max-width: 760px) { .ds-post--wide { flex-direction: column; } .ds-post--wide .ds-post__media { aspect-ratio: 16 / 10; min-height: 0; } }

/* Сторінка статті: .ds-article > header (.ds-article__head) + .ds-article__layout (спец-колонка з змістом + .ds-prose) */
.ds-article__head { max-width: 880px; margin: 0 0 32px; }
.ds-article__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; font-size: 14px; color: var(--ds-muted); }
.ds-article__cover { margin: 0 0 40px; }
.ds-article__layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.ds-toc { position: sticky; top: calc(var(--ds-header-h, 100px) + 24px); padding: 20px 22px; border-radius: var(--ds-r); border: 1px solid var(--ds-line); background: var(--ds-surface); font-size: 14px; }
.ds-toc b { display: block; margin-bottom: 10px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ds-accent); }
.ds-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 8px; }
.ds-toc li { counter-increment: toc; }
.ds-toc a { display: flex; gap: 10px; color: var(--ds-muted); text-decoration: none; line-height: 1.4; transition: color var(--ds-dur); }
.ds-toc a::before { content: counter(toc, decimal-leading-zero); font-weight: 800; color: var(--ds-accent); }
.ds-toc a:hover { color: var(--ds-text); }
.ds-author { display: flex; gap: 16px; align-items: center; margin-top: 40px; padding: 20px 22px; border-radius: var(--ds-r); background: var(--ds-surface-2); border: 1px solid var(--ds-line); }
.ds-author__ava { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ds-green); color: var(--ds-ink); font-weight: 800; }
.ds-author p { margin: 0; font-size: 14px; color: var(--ds-muted); }
@media (max-width: 980px) { .ds-article__layout { grid-template-columns: 1fr; } .ds-toc { position: static; } }

/* ---------- 19. МОДАЛЬНЕ ВІКНО ----------
   Розмітка: ds_modal($id,$title,$body). Відкрити: будь-який елемент з data-ds-modal-open="$id". Закрити: [data-ds-modal-close], Esc, клік по затемненню. */
html.ds-modal-open { overflow: hidden; }
.ds-modal { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; padding: 16px; }
.ds-modal.is-open { display: flex; }
.ds-modal__backdrop { position: absolute; inset: 0; background: rgba(6, 9, 7, .78); animation: ds-fade .25s var(--ds-ease); }
.ds-modal__panel { position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 30px 28px 28px; border: 1px solid var(--ds-border); border-radius: var(--ds-r); background: var(--ds-surface); color: var(--ds-text); animation: ds-rise .35s var(--ds-ease); }
.ds-modal__panel::before { content: ""; position: absolute; inset: 8px; pointer-events: none; --ds-c: 20px; background: linear-gradient(var(--ds-green), var(--ds-green)) left top / var(--ds-c) 2px no-repeat, linear-gradient(var(--ds-green), var(--ds-green)) left top / 2px var(--ds-c) no-repeat, linear-gradient(var(--ds-green), var(--ds-green)) right bottom / var(--ds-c) 2px no-repeat, linear-gradient(var(--ds-green), var(--ds-green)) right bottom / 2px var(--ds-c) no-repeat; }
.ds-modal__title { margin: 0 40px 6px 0; font: 800 22px/1.25 var(--ds-font); letter-spacing: -.01em; }
.ds-modal__lead { margin: 0 0 20px; font-size: 14px; color: var(--ds-muted); }
.ds-modal__close { position: absolute; right: 14px; top: 14px; z-index: 1; width: 36px; height: 36px; border: 1px solid var(--ds-border); border-radius: var(--ds-r-sm); background: transparent; color: var(--ds-text); cursor: pointer; transition: border-color var(--ds-dur), color var(--ds-dur); }
.ds-modal__close:hover { border-color: var(--ds-green); color: var(--ds-accent); }
.ds-modal__close::before, .ds-modal__close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; background: currentColor; transform: rotate(45deg); }
.ds-modal__close::after { transform: rotate(-45deg); }
@keyframes ds-fade { from { opacity: 0; } }
@keyframes ds-rise { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 600px) { .ds-modal { align-items: flex-end; padding: 0; } .ds-modal__panel { width: 100%; max-height: 92vh; border-radius: var(--ds-r) var(--ds-r) 0 0; } }

/* індикатор поточного екрана (лише /styleguide/) */
.ds-viewport { font: 700 12px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .04em; color: var(--ds-muted); padding: 0 4px; }
.ds-viewport b { color: var(--ds-accent); }