:root{
    --amb-0:#fbfdff; --amb-1:#f4f9fd; --amb-2:#e9f1fa;
    --glass:rgba(255,255,255,.72); --glass-strong:rgba(255,255,255,.88); --glass-soft:rgba(255,255,255,.55);
    --glass-line:rgba(255,255,255,.75); --glass-line-outer:rgba(18,58,107,.17);
    --blur:blur(18px) saturate(1.35);
    --ink:#071a33; --ink-soft:#123054; --ink-faint:#2e4b73;
    --accent:#15589f; --accent-deep:#0f2c52; --accent-ghost:rgba(21,88,168,.10);
    --ok:#07683f; --ok-bg:rgba(10,122,75,.12);
    --warn:#8f5b00; --warn-bg:rgba(143,91,0,.12);
    --r-sm:14px; --r-md:20px; --r-lg:26px; --r-xl:34px;
    --lift-1:0 2px 6px rgba(15,35,64,.07), 0 12px 32px rgba(15,44,82,.14), inset 0 1px 0 rgba(255,255,255,.9);
    --lift-2:0 6px 14px rgba(15,35,64,.11), 0 24px 52px rgba(15,44,82,.21), inset 0 1px 0 rgba(255,255,255,.95);
    --lift-blue:0 8px 20px rgba(26,107,196,.28), 0 20px 44px rgba(15,44,82,.22);
    --font:'PT Sans','Segoe UI',system-ui,sans-serif;
    --font-display:'Prata',Georgia,serif;
    --accent-ink:#0f2c52;
    --srf-solid:rgba(250,252,255,.95); --srf-bar:rgba(252,253,255,.93);
    --srf-hi:rgba(255,255,255,.9); --srf-mid:rgba(255,255,255,.78); --srf-lo:rgba(255,255,255,.64);
    --line-c:18,58,107;
    --aura-a:rgba(45,140,240,.11); --aura-b:rgba(18,58,107,.07); --aura-c:rgba(143,194,245,.15);
    --backdrop:rgba(10,26,48,.42); --deco:0;
    --shield-a:rgba(255,255,255,.78); --shield-b:rgba(255,255,255,.55);
    --inset-f:inset 2px 2px 8px rgba(15,44,82,.05), inset -2px -2px 8px rgba(255,255,255,.8);
    --inset-s:inset 2px 2px 8px rgba(15,44,82,.05);
  }

  /* ===== Тёмная тема: системная (без штампа) и явный выбор ===== */
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]):not([data-theme="warm-glass"]){
    --amb-0:#0a1220;
    --amb-1:#0d1a30;
    --amb-2:#142848;
    --glass:rgba(158,198,242,.07);
    --glass-strong:rgba(17,32,56,.78);
    --glass-soft:rgba(158,198,242,.05);
    --glass-line:rgba(172,206,246,.16);
    --glass-line-outer:rgba(130,180,235,.08);
    --ink:#f8fbff;
    --ink-soft:#e2ebf7;
    --ink-faint:#bccbe0;
    --accent:#5aadff;
    --accent-deep:#1e5aa8;
    --accent-ghost:rgba(90,173,255,.14);
    --accent-ink:#cfe4fb;
    --ok:#4fd095;
    --ok-bg:rgba(79,208,149,.14);
    --warn:#f0b35c;
    --warn-bg:rgba(240,179,92,.13);
    --lift-1:0 2px 6px rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
    --lift-2:0 6px 14px rgba(0,0,0,.3), 0 22px 48px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
    --lift-blue:0 8px 20px rgba(26,107,196,.4), 0 20px 44px rgba(10,30,60,.5);
    --srf-solid:rgba(12,23,41,.97);
    --srf-bar:rgba(11,21,38,.9);
    --srf-hi:rgba(158,198,242,.12);
    --srf-mid:rgba(158,198,242,.085);
    --srf-lo:rgba(158,198,242,.055);
    --line-c:168,204,240;
    --aura-a:rgba(56,146,255,.16);
    --aura-b:rgba(110,175,255,.08);
    --aura-c:rgba(45,140,240,.12);
    --backdrop:rgba(2,8,18,.62);
    --deco:1;
    --shield-a:rgba(18,36,62,.88); --shield-b:rgba(12,25,46,.72);
    --inset-f:inset 2px 2px 8px rgba(0,8,20,.5);
    --inset-s:inset 2px 2px 8px rgba(0,8,20,.45);
    }
  }
  :root[data-theme="dark"]{
    --amb-0:#0a1220;
    --amb-1:#0d1a30;
    --amb-2:#142848;
    --glass:rgba(158,198,242,.07);
    --glass-strong:rgba(17,32,56,.78);
    --glass-soft:rgba(158,198,242,.05);
    --glass-line:rgba(172,206,246,.16);
    --glass-line-outer:rgba(130,180,235,.08);
    --ink:#f8fbff;
    --ink-soft:#e2ebf7;
    --ink-faint:#bccbe0;
    --accent:#5aadff;
    --accent-deep:#1e5aa8;
    --accent-ghost:rgba(90,173,255,.14);
    --accent-ink:#cfe4fb;
    --ok:#4fd095;
    --ok-bg:rgba(79,208,149,.14);
    --warn:#f0b35c;
    --warn-bg:rgba(240,179,92,.13);
    --lift-1:0 2px 6px rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
    --lift-2:0 6px 14px rgba(0,0,0,.3), 0 22px 48px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
    --lift-blue:0 8px 20px rgba(26,107,196,.4), 0 20px 44px rgba(10,30,60,.5);
    --srf-solid:rgba(12,23,41,.97);
    --srf-bar:rgba(11,21,38,.9);
    --srf-hi:rgba(158,198,242,.12);
    --srf-mid:rgba(158,198,242,.085);
    --srf-lo:rgba(158,198,242,.055);
    --line-c:168,204,240;
    --aura-a:rgba(56,146,255,.16);
    --aura-b:rgba(110,175,255,.08);
    --aura-c:rgba(45,140,240,.12);
    --backdrop:rgba(2,8,18,.62);
    --deco:1;
    --shield-a:rgba(18,36,62,.88); --shield-b:rgba(12,25,46,.72);
    --inset-f:inset 2px 2px 8px rgba(0,8,20,.5);
    --inset-s:inset 2px 2px 8px rgba(0,8,20,.45);
  }

  /* ===== Третья тема «Светлая · матовое стекло» (warm-glass) — ОСНОВНАЯ, решение владельца 07.09.2026.
     Белые плоские панели на тёплом нейтральном фоне, нейтральные тени, бронза — акцент, чернила сине-графитовые.
     Значения — ТЗ v1.0 (разделы 5–8); вторичные чернила затемнены до порогов контраста проекта (12 / 9 / 7). ===== */
  :root[data-theme="warm-glass"]{
    color-scheme:light;
    --amb-0:#f6f5f1; --amb-1:#f4f3ef; --amb-2:#efeee9;
    --glass:#ffffff; --glass-strong:rgba(255,255,255,.96); --glass-soft:rgba(255,255,255,.72);
    --glass-line:rgba(255,255,255,.9); --glass-line-outer:rgba(25,47,64,.08);
    --blur:blur(24px) saturate(1.2);
    --ink:#192f40; --ink-soft:#2f4355; --ink-faint:#415463;
    --accent:#846645; --accent-deep:#1b3548; --accent-ghost:rgba(132,102,69,.10);
    --ok:#2b6056; --ok-bg:rgba(224,238,232,.85);
    --warn:#715635; --warn-bg:rgba(239,229,211,.75);
    --r-sm:12px; --r-md:20px; --r-lg:22px; --r-xl:26px;
    --lift-1:0 26px 48px -32px rgba(31,42,56,.26), 0 6px 14px -10px rgba(31,42,56,.12), inset 0 1px 0 #fff, 0 0 0 1px rgba(25,47,64,.06);
    --lift-2:0 40px 62px -36px rgba(31,42,56,.32), 0 10px 20px -12px rgba(31,42,56,.16), inset 0 1px 0 #fff, 0 0 0 1px rgba(25,47,64,.06);
    --lift-blue:0 14px 26px -15px rgba(18,49,74,.65), inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(0,0,0,.15);
    --accent-ink:#192f40;
    --srf-solid:#ffffff; --srf-bar:rgba(255,255,255,.96);
    --srf-hi:#ffffff; --srf-mid:#ffffff; --srf-lo:rgba(255,255,255,.85);
    --line-c:25,47,64;
    --aura-a:transparent; --aura-b:transparent; --aura-c:transparent;
    --backdrop:rgba(25,47,64,.38); --deco:0;
    --shield-a:#ffffff; --shield-b:#ffffff;
    --inset-f:inset 0 1px 3px rgba(31,42,56,.06); --inset-s:inset 0 1px 3px rgba(31,42,56,.06);
  }

  /* Тёмный фон: глубокий премиальный градиент с мягкими свечениями, без линий */
  body::before{content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:var(--deco);
    background:
      radial-gradient(1100px 700px at 74% -12%, rgba(64,150,255,.13), transparent 65%),
      radial-gradient(900px 640px at -8% 82%, rgba(38,110,205,.10), transparent 65%),
      radial-gradient(700px 520px at 96% 60%, rgba(90,173,255,.06), transparent 70%),
      linear-gradient(180deg, rgba(255,255,255,.035), transparent 26%);
    transition:opacity .4s}

  .tgl{width:36px; height:36px; border-radius:50%; border:1px solid var(--glass-line); background:var(--srf-mid);
    color:var(--ink-soft); display:grid; place-items:center; cursor:pointer; flex:none; transition:all .25s; padding:0}
  .tgl:hover{color:var(--accent); transform:translateY(-1px)}
  .tgl svg{display:block}
  nav.top .tgl{margin-left:auto}
  nav.top .cta{margin-left:10px}

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; font-family:var(--font); font-weight:300; color:var(--ink); font-size:15.5px; line-height:1.6; letter-spacing:.012em;
    background:
      radial-gradient(1000px 560px at 78% -8%, var(--aura-a), transparent 60%),
      radial-gradient(760px 520px at -12% 34%, var(--aura-b), transparent 55%),
      radial-gradient(820px 560px at 74% 96%, var(--aura-c), transparent 60%),
      linear-gradient(160deg, var(--amb-0), var(--amb-1) 55%, var(--amb-2));
     -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1360px; margin:0 auto; padding:110px 22px 80px}

  nav.top{
    position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:40;
    width:min(1360px, calc(100% - 24px)); display:flex; align-items:center; gap:4px;
    padding:9px 10px 9px 20px; border-radius:60px; background:var(--glass-strong);
    -webkit-backdrop-filter:blur(22px) saturate(1.4); backdrop-filter:blur(22px) saturate(1.4);
    border:1px solid var(--glass-line); outline:1px solid var(--glass-line-outer);
    box-shadow:0 4px 10px rgba(15,35,64,.06), 0 18px 44px rgba(15,44,82,.14);
  }
  nav.top .brand{font-weight:300; letter-spacing:.3em; font-size:13px; margin-right:12px; white-space:nowrap}
  nav.top .brand b{font-weight:500; color:var(--accent)}
  nav.top a{color:var(--ink-soft); text-decoration:none; font-size:13px; font-weight:400; letter-spacing:.05em;
    padding:8px 13px; border-radius:40px; transition:all .25s; cursor:pointer; white-space:nowrap}
  nav.top a:hover{background:var(--accent-ghost); color:var(--accent)}
  nav.top .cta{margin-left:auto; background:var(--accent-deep); color:#fff; font-weight:500; padding:9px 18px; box-shadow:var(--lift-blue)}
  nav.top .cta:hover{background:#143d6e; color:#fff}
  @media (max-width:760px){ nav.top .hide-m{display:none} }

  h1{font-family:var(--font-display); font-weight:400; font-size:clamp(34px,5.4vw,58px); line-height:1.08; letter-spacing:.004em; margin:0; text-wrap:balance}
  h1 em{font-style:normal; color:var(--accent)}
  h2{font-family:var(--font-display); font-weight:400; font-size:clamp(22px,3vw,30px); letter-spacing:.01em; margin:0 0 10px}
  .eyebrow{font-size:10.5px; font-weight:400; letter-spacing:.26em; text-transform:uppercase; color:var(--accent); margin-bottom:14px}
  .sub{color:var(--ink-soft); max-width:56ch; font-size:16px}
  .num{font-variant-numeric:tabular-nums}

  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer; white-space:nowrap; font-family:var(--font);
    font-weight:500; font-size:14.5px; letter-spacing:.04em; border-radius:40px; padding:13px 26px;
    transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s}
  .btn.primary{background:var(--accent-deep); color:#fff; box-shadow:var(--lift-blue)}
  .btn.primary:hover{transform:translateY(-2px)}
  .btn.ghost{background:var(--glass-soft); color:var(--accent-ink); border:1px solid rgba(26,107,196,.28);
    -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur)}
  .btn.ghost:hover{transform:translateY(-2px); background:var(--srf-mid)}
  .badge{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:500; letter-spacing:.06em; border-radius:40px; padding:4px 12px; white-space:nowrap}
  .badge.ok{background:var(--ok-bg); color:var(--ok)} .badge.warn{background:var(--warn-bg); color:var(--warn)}
  .badge.blue{background:var(--accent-ghost); color:var(--accent)}
  .badge.glass{background:var(--srf-mid); color:var(--ink-soft); border:1px solid var(--glass-line)}
  .chip{font-size:13px; font-weight:400; letter-spacing:.02em; color:var(--ink-soft); background:var(--srf-lo);
    border:1px solid var(--glass-line); border-radius:40px; padding:9px 16px; cursor:pointer; transition:all .2s; white-space:nowrap}
  .chip:hover{color:var(--accent); transform:translateY(-2px); background:var(--srf-mid)}
  .chip.on{background:var(--accent-deep); color:#fff; border-color:transparent}

  /* ---- ГЕРОЙ: крупный триггер, раскрывающийся в модалку 90% ---- */
  .hero{text-align:center; padding-top:20px}
  .hero .sub{margin:18px auto 30px}
  .ask{
    max-width:760px; margin:0 auto; border-radius:var(--r-xl); padding:12px;
    display:flex; align-items:center; gap:10px; cursor:pointer;
    background:var(--glass-strong); -webkit-backdrop-filter:blur(22px) saturate(1.4); backdrop-filter:blur(22px) saturate(1.4);
    border:1px solid var(--glass-line); outline:1px solid var(--glass-line-outer); box-shadow:var(--lift-2);
    animation:heroIn .9s cubic-bezier(.22,1,.36,1) both .15s;
    transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
  }
  .ask:hover{transform:translateY(-3px)}
  .ask .fake{flex:1; text-align:left; font-size:16.5px; color:var(--ink-faint); padding:16px 6px 16px 14px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
  .ask .mic{width:52px; height:52px; border-radius:50%; border:1px solid rgba(26,107,196,.3); background:var(--srf-lo);
    display:grid; place-items:center; color:var(--accent); font-size:19px; flex:none}
  .ask .go{flex:none; padding:15px 28px; font-size:15px}
  @keyframes heroIn{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}
  @media (max-width:640px){
    .ask{flex-wrap:wrap; padding:10px}
    .ask .fake{flex:1 1 auto; padding:14px 4px 10px 12px; white-space:normal; font-size:15.5px; line-height:1.4}
    .ask .go{flex:1 1 100%; width:100%}
  }
  /* ===== Hero: текст слева, живой чат справа ===== */
  .hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:46px; align-items:center; text-align:left; margin-bottom:10px}
  .hero-grid > *{min-width:0}
  .hero-grid .sub{margin:16px 0 24px}
  .h-cta{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px}
  .hero-grid .chips-rail{justify-content:flex-start; flex-wrap:wrap; margin-top:0}
  .h-quiz{margin-top:10px; display:flex; gap:8px; flex-wrap:wrap}
  .h-demo{position:relative; border-radius:var(--r-lg); overflow:hidden; cursor:pointer; display:flex; flex-direction:column;
    background:var(--glass-strong); -webkit-backdrop-filter:blur(24px) saturate(1.4); backdrop-filter:blur(24px) saturate(1.4);
    border:1px solid var(--glass-line); outline:1px solid var(--glass-line-outer); box-shadow:var(--lift-2);
    height:min(76vh,540px); min-height:470px; transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
    animation:heroIn .9s cubic-bezier(.22,1,.36,1) both .15s}
  .h-demo:hover{transform:translateY(-4px)}
  /* Диалог из десяти реплик выше панели, поэтому прокручивается САМА переписка, а не
     растёт карточка (без min-height:0 flex-элемент не сжимается, и hero тянулся вниз).
     overflow:hidden остаётся: вниз диалог доводит себя сам (scrollTop), а колесо мыши
     над hero обязано крутить страницу, а не переписку. Плавности здесь нет намеренно:
     scroll-behavior:smooth при дописывании по букве не успевает останавливаться. */
  .demo-body{flex:1; min-height:0; padding:16px 16px 6px; display:flex; flex-direction:column; gap:10px;
    overflow:hidden}
  .demo-body .msg{font-size:14px}
  .demo-cars{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
  .demo-cars .mini .ph{height:56px}
  .demo-cars .mini .ph::before{font-size:10px; padding:6px}
  .demo-cars .mini .ph::after{display:none}
  .demo-cars .mini .t{padding:7px 9px}
  .demo-cars .mini .t b{font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .demo-cars .mini .t .price{font-size:10.5px}
  /* «Корея · кроссовер» под именем: реплика диалога называет руль и кузов, и карточка
     обязана это подтвердить. В 56-пиксельной карточке своя мера — в общей 11,5px
     строка не влезает и режется на середине слова. */
  .demo-cars .mini .t .mini-specs{font-size:9.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  /* Подпись «иллюстрация» обязательна и на маленькой карточке (С73/21.2.1), но в 56px
     она обрезалась на «ИЛЛЮСТРАЦ» — своя мера для мини-кадра. */
  .demo-cars .mini .ph-ai{left:4px; bottom:4px; padding:1px 5px; font-size:8px; letter-spacing:.02em}
  .demo-foot{flex:none; display:flex; align-items:center; gap:10px; margin:10px 14px 14px; padding:11px 8px 11px 18px;
    border-radius:40px; background:var(--srf-mid); border:1px solid var(--glass-line); color:var(--accent)}
  .demo-foot .demo-fake{flex:1; font-size:14.5px; color:var(--ink-faint)}
  .demo-send{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--accent-deep); color:#fff; flex:none}
  .caret{display:inline-block; width:1.5px; height:1em; background:currentColor; margin-left:1px; vertical-align:-2px; animation:caretB 1s steps(1) infinite}
  @keyframes caretB{50%{opacity:0}}
  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr; gap:24px; text-align:center}
    .hero-grid .sub{margin:16px auto 22px}
    .h-cta{justify-content:center}
    .hero-grid .chips-rail{justify-content:center}
    .h-quiz{justify-content:center}
    .h-demo{height:min(70vh,500px); min-height:440px}
  }
  @media (max-width:640px){
    .hero-grid .chips-rail{flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto}
    .h-demo{height:min(70vh,470px); min-height:420px}
  }
  .trust{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:24px}

  .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:60px auto 0; max-width:1100px;
    background:rgba(var(--line-c),.09); border-radius:var(--r-lg); overflow:hidden;
    border:1px solid var(--glass-line); box-shadow:var(--lift-1)}
  .stats div{background:var(--glass); padding:16px 14px; text-align:center;
    -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur)}
  .stats b{display:block; font-family:var(--font-display); font-weight:400; font-size:23px; letter-spacing:.01em; color:var(--accent-ink)}
  .stats span{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint)}
  @media (max-width:680px){.stats{grid-template-columns:1fr 1fr}}

  /* ============ КАРУСЕЛЬ — паттерн списков карточек ============ */
  .rail{
    display:grid; grid-auto-flow:column; gap:16px;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-inline:22px;
    padding:4px 22px 14px; margin:0 -22px;
    scrollbar-width:none;
  }
  .rail::-webkit-scrollbar{display:none}
  .rail > *{scroll-snap-align:center; will-change:transform}
  .rail, .mini-rail{perspective:900px}
  .rail.cars-rail > *{width:min(72vw, 300px)}
  @media (min-width:761px){
    .rail.cars-rail{grid-auto-flow:row; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); overflow:visible; margin:0; padding:0}
    .rail.cars-rail > *{width:auto}
    .dots.for-desktop-hide{display:none}
  }
  .dots{display:flex; gap:7px; justify-content:center; margin-top:6px}
  .dots i{width:7px; height:7px; border-radius:50%; background:rgba(var(--line-c),.18); transition:all .3s; cursor:pointer}
  .dots i.on{width:22px; border-radius:5px; background:var(--accent)}

  section.block{margin-top:78px}
  .block-head{display:flex; align-items:baseline; gap:14px; margin-bottom:16px; flex-wrap:wrap}
  .block-head .muted{color:var(--ink-faint); font-size:13px; margin-left:auto}
  .car{border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column; cursor:pointer;
    background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
    border:1px solid var(--glass-line); outline:1px solid var(--glass-line-outer); box-shadow:var(--lift-1);
    transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s}
  .car:hover{transform:translateY(-5px); box-shadow:var(--lift-2)}
  /* Плейсхолдер «нет фото»: глубокий градиент + название машины. Боевое правило платформы. */
  .ph{position:relative; overflow:hidden;
    background:radial-gradient(130% 150% at 85% -25%, rgba(143,194,245,.4), transparent 55%),
               linear-gradient(150deg,#3a5f88 0%,#1d3c60 55%,#122b4a 100%)}
  .ph::before{content:attr(data-name); position:absolute; inset:0; display:grid; place-items:center;
    padding:14px 16px; text-align:center; font-family:var(--font-display); font-weight:400;
    color:rgba(255,255,255,.93); font-size:clamp(16px,2.4vw,22px); letter-spacing:.05em; line-height:1.3}
  .ph::after{content:'АВТОМАК'; position:absolute; bottom:8px; right:11px; font-size:8px; letter-spacing:.38em;
    color:rgba(255,255,255,.35); font-weight:400}
  .sil{display:none}
  .car .ph{height:150px; flex:none}
  .car .ph .tag{position:absolute; top:10px; left:10px; background:rgba(255,255,255,.92);
    box-shadow:0 2px 8px rgba(7,16,30,.35)}
  .car .b{padding:12px 14px 14px}
  .car .name{font-family:var(--font-display); font-size:17px; letter-spacing:.01em}
  .car .meta{color:var(--ink-faint); font-size:12.5px; margin:4px 0 8px}
  .car .price{font-family:var(--font-display); font-size:20px; color:var(--accent-ink)}
  .car .price small{font-family:var(--font); font-size:11px; color:var(--ink-faint)}

  .how{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  @media (max-width:760px){.how{grid-template-columns:1fr}}
  .how .step{border-radius:var(--r-md); padding:20px 22px; background:var(--glass);
    -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
    border:1px solid var(--glass-line); outline:1px solid var(--glass-line-outer); box-shadow:var(--lift-1)}
  .how .no{font-size:11px; letter-spacing:.3em; color:var(--ink-faint)}
  .how b{display:block; font-family:var(--font-display); font-weight:400; font-size:18px; margin:8px 0 6px}
  .how p{margin:0; font-size:13.5px; color:var(--ink-soft)}
  .how .more{display:inline-flex; gap:6px; align-items:center; margin-top:12px; font-size:12.5px; font-weight:500;
    letter-spacing:.03em; color:var(--accent)}
  .how .step:hover .more{text-decoration:underline}

  .final{margin-top:84px; text-align:center; padding:44px 26px; border-radius:var(--r-xl);
    background:linear-gradient(155deg, rgba(15,44,82,.92), rgba(18,58,107,.88));
    color:#eaf2fc; box-shadow:0 30px 70px rgba(15,44,82,.35); position:relative; overflow:hidden}
  .final::after{content:''; position:absolute; width:420px; height:420px; border-radius:50%;
    background:rgba(45,140,240,.25); filter:blur(80px); right:-120px; top:-160px}
  .final h2{color:#fff; font-size:clamp(24px,3.4vw,34px); position:relative}
  .final p{color:#b9d2ef; position:relative; margin:10px auto 24px; max-width:52ch}
  .final .btn{position:relative}
  footer{margin-top:64px; text-align:center; color:var(--ink-faint); font-size:12.5px}


  .fab{position:fixed; right:22px; bottom:22px; z-index:44; width:58px; height:58px; border-radius:50%;
    border:none; cursor:pointer; color:#fff; display:grid; place-items:center;
    background:linear-gradient(145deg,#2d8cf0,#0f2c52); box-shadow:0 10px 28px rgba(26,107,196,.45);
    transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s}
  .fab:hover{transform:translateY(-3px) scale(1.04); box-shadow:0 14px 34px rgba(26,107,196,.55)}
  .fab::after{content:''; position:absolute; top:6px; right:7px; width:9px; height:9px; border-radius:50%;
    background:var(--ok); border:2px solid rgba(255,255,255,.9)}
  @media (max-width:640px){ .fab{right:16px; bottom:calc(16px + env(safe-area-inset-bottom))} }
  /* ============ МОДАЛЬНАЯ СИСТЕМА ============ */
  .modal-backdrop{
    position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center;
    padding:24px 18px; background:var(--backdrop);
    -webkit-backdrop-filter:blur(10px) saturate(1.1); backdrop-filter:blur(10px) saturate(1.1);
  }
  .modal-backdrop.open{display:flex; animation:fadeIn .25s ease both}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  .modal{
    width:min(680px,100%); max-height:92vh; max-height:92dvh; display:flex; flex-direction:column; border-radius:var(--r-xl); overflow:hidden;
    background:var(--srf-solid);
    -webkit-backdrop-filter:blur(26px) saturate(1.4); backdrop-filter:blur(26px) saturate(1.4);
    border:1px solid var(--glass-line); outline:1px solid var(--glass-line-outer);
    box-shadow:0 40px 90px rgba(10,26,48,.4), inset 0 1px 0 rgba(255,255,255,.9);
    animation:modalIn .35s cubic-bezier(.22,1,.36,1) both;
  }
  .modal.big{width:min(1020px,94vw); height:90vh; height:90dvh; max-height:90dvh}
  .modal.guide{width:min(660px,100%)}
  @keyframes modalIn{from{opacity:0; transform:translateY(26px) scale(.98)}to{opacity:1; transform:none}}
  .modal .m-head{display:flex; align-items:center; gap:10px; padding:14px 18px 10px; flex:none; flex-wrap:nowrap}
  .modal .m-head .badge{min-width:0; overflow:hidden; text-overflow:ellipsis}
  @media (max-width:420px){ .modal .m-head .badge{display:none} }
  .modal .m-head h3{font-family:var(--font-display); font-weight:400; font-size:20px; margin:0; letter-spacing:.01em}
  .modal .m-close{margin-left:auto; width:36px; height:36px; border-radius:50%; border:1px solid var(--glass-line);
    background:var(--srf-mid); cursor:pointer; font-size:15px; color:var(--ink-soft); line-height:1; flex:none}
  .modal .m-close:hover{color:var(--accent-ink); background:var(--srf-hi)}
  .modal .m-body{padding:6px 22px 22px; overflow-y:auto; flex:1; min-height:0; -webkit-overflow-scrolling:touch}
  .modal .m-foot{flex:none; padding:10px 14px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid rgba(var(--line-c),.08); background:var(--srf-solid); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
  /* Мобильный: модалки — во весь экран, закрытие крестиком */
  @media (max-width:640px){
    .modal-backdrop{padding:0; align-items:stretch}
    .modal, .modal.big, .modal.guide{width:100%; height:100vh; height:100dvh; max-height:100dvh; border-radius:0;
      animation:sheetIn .3s cubic-bezier(.22,1,.36,1) both}
    .modal .m-head{padding-top:calc(14px + env(safe-area-inset-top))}
    .modal .m-close{width:42px; height:42px; font-size:17px}
    @keyframes sheetIn{from{transform:translateY(40px); opacity:.4}to{transform:none; opacity:1}}
  }
  @media (prefers-reduced-motion:reduce){.modal,.modal-backdrop,.ask{animation:none; transition:none}}

  .chat{display:flex; flex-direction:column; gap:10px; margin-bottom:14px}
  .msg{max-width:86%; padding:11px 16px; border-radius:18px; font-size:14.5px}
  .msg.user{align-self:flex-end; background:var(--accent-deep); color:#fff; border-bottom-right-radius:6px}
  .msg.ai{align-self:flex-start; background:var(--srf-hi); border:1px solid var(--glass-line); border-bottom-left-radius:6px}
  .assist-input{display:flex; gap:8px; align-items:center}
  .assist-input input{flex:1; min-width:0; outline:none; font:inherit; font-size:16px; color:var(--ink);
    background:var(--srf-mid); border:1px solid var(--glass-line); border-radius:40px; padding:14px 18px;
    box-shadow:var(--inset-s)}
  .assist-input input:focus{border-color:rgba(26,107,196,.5); box-shadow:0 0 0 4px rgba(26,107,196,.14)}
  .assist-input .mic{width:50px; height:50px; border-radius:50%; border:1px solid rgba(26,107,196,.3);
    background:var(--srf-mid); display:grid; place-items:center; color:var(--accent); font-size:18px; cursor:pointer; flex:none}
  .assist-input .send{flex:none; padding:14px 22px}
  .mini-rail{display:grid; grid-auto-flow:column; grid-auto-columns:min(60vw,205px); gap:12px;
    overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 10px; scrollbar-width:none}
  .mini-rail::-webkit-scrollbar{display:none}
  .mini-rail > *{scroll-snap-align:center; will-change:transform}
  .mini{border-radius:var(--r-sm); overflow:hidden; background:var(--srf-hi); border:1px solid var(--glass-line); cursor:pointer; transition:transform .25s}
  .mini:hover{transform:translateY(-3px)}
  .mini .ph{height:86px}
  .mini .ph::before{font-size:13px; padding:8px}
  .mini .ph::after{font-size:6px; bottom:5px; right:7px}
  .mini .t{padding:9px 11px; font-size:12.5px}
  .mini .t b{font-family:var(--font-display); font-weight:400; display:block; font-size:13.5px}
  .mini .t .price{color:var(--accent-ink); font-weight:500}
  .chips-rail{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 8px; scrollbar-width:none; justify-content:flex-start}
  .chips-rail::-webkit-scrollbar{display:none}
  .hero .chips-rail{justify-content:center; flex-wrap:wrap; margin-top:14px}
  @media (max-width:640px){ .hero .chips-rail{flex-wrap:nowrap; justify-content:flex-start} }

  .scen2{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0}
  @media (max-width:560px){.scen2{grid-template-columns:1fr}}
  .scen{border-radius:var(--r-md); padding:12px 14px}
  .scen.win{background:var(--srf-hi); border:1.5px solid rgba(26,107,196,.45)}
  .scen.alt{background:var(--srf-lo); border:1px solid var(--glass-line)}
  .scen .lbl{font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint)}
  .scen .val{font-family:var(--font-display); font-size:22px; color:var(--accent-ink); margin-top:2px}
  .steps-m{list-style:none; margin:0; padding:0}
  .steps-m li{display:flex; gap:14px; padding:10px 0; border-bottom:1px solid rgba(var(--line-c),.07); font-size:14px}
  .steps-m li:last-child{border:none}
  .steps-m .n{font-family:var(--font-display); color:var(--accent); flex:none; width:26px}
  .field{width:100%; background:var(--srf-mid); border:1px solid var(--glass-line); border-radius:var(--r-sm);
    padding:12px 15px; font:inherit; font-size:15px; color:var(--ink); outline:none; margin-bottom:10px;
    box-shadow:var(--inset-f)}
  .field:focus{border-color:rgba(26,107,196,.5); box-shadow:0 0 0 4px rgba(26,107,196,.14)}

  /* ===== Диалоговое окно ассистента: практики мессенджеров ===== */
  .chat-head{display:flex; align-items:center; gap:11px; padding:12px 14px; flex:none;
    border-bottom:1px solid rgba(var(--line-c),.08)}
  .chat-head .avatar{width:40px; height:40px; border-radius:50%; flex:none; color:#fff; font-size:19px;
    background:linear-gradient(145deg,#2d8cf0,#0f2c52); display:grid; place-items:center;
    box-shadow:0 4px 12px rgba(26,107,196,.35)}
  .chat-head .t{min-width:0}
  .chat-head .t b{display:block; font-weight:500; font-size:15px; letter-spacing:.02em}
  .chat-head .t span{display:flex; align-items:center; gap:5px; font-size:11px; color:var(--ink-faint)}
  .chat-head .t span::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--ok)}
  .ai-row{display:flex; gap:8px; align-items:flex-end; max-width:92%}
  .ai-row .a{width:26px; height:26px; border-radius:50%; flex:none; font-size:13px; color:#fff;
    background:linear-gradient(145deg,#2d8cf0,#0f2c52); display:grid; place-items:center; margin-bottom:2px}
  .ai-row .a.ghost{visibility:hidden}
  .ai-row .msg.ai{max-width:100%}
  .typing{display:inline-flex; gap:4px; padding:14px 16px; border-radius:18px 18px 18px 6px;
    background:var(--srf-hi); border:1px solid var(--glass-line)}
  .typing i{width:6px; height:6px; border-radius:50%; background:var(--ink-faint); animation:tp 1.1s infinite}
  .typing i:nth-child(2){animation-delay:.18s} .typing i:nth-child(3){animation-delay:.36s}
  @keyframes tp{0%,60%,100%{transform:none; opacity:.45}30%{transform:translateY(-4px); opacity:1}}
  .quick{display:flex; gap:8px; flex-wrap:wrap; margin:2px 0 4px 34px}
  .in-chat-cards{margin-left:34px}
  .in-chat-links{margin-left:34px}
  .field-wrap{flex:1; position:relative; min-width:0}
  .field-wrap input{width:100%; outline:none; font:inherit; font-size:16px; color:var(--ink);
    background:var(--srf-mid); border:1px solid var(--glass-line); border-radius:40px;
    padding:13px 52px 13px 18px; box-shadow:var(--inset-s)}
  .field-wrap input:focus{border-color:rgba(26,107,196,.5); box-shadow:0 0 0 4px rgba(26,107,196,.14)}
  .mic-in{position:absolute; right:5px; top:50%; transform:translateY(-50%); width:38px; height:38px;
    border:none; border-radius:50%; background:transparent; color:var(--accent); font-size:17px; cursor:pointer}
  .mic-in:active{background:var(--accent-ghost)}
  .send-btn{width:48px; height:48px; flex:none; border:none; border-radius:50%; cursor:pointer; font-size:18px;
    display:grid; place-items:center; transition:all .25s;
    background:rgba(var(--line-c),.12); color:var(--ink-faint)}
  .send-btn.active{background:var(--accent-deep); color:#fff; box-shadow:var(--lift-blue)}
  .assist-note{font-size:10.5px; color:var(--ink-faint); text-align:center; margin:7px 4px 0}

  /* ===== Живая лента событий ===== */
  .ticker{margin:26px auto 0; max-width:1100px; overflow:hidden; border-radius:40px;
    background:var(--srf-lo); border:1px solid var(--glass-line);
    -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur)}
  .ticker-track{display:inline-flex; gap:34px; padding:10px 0; white-space:nowrap; animation:tick 38s linear infinite}
  .ticker:hover .ticker-track{animation-play-state:paused}
  .ticker-track span{font-size:12.5px; color:var(--ink-soft)}
  .ticker-track b{font-weight:500; color:var(--accent-ink)}
  .ticker-track .dot-live{color:var(--ok)}
  @keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

  /* ===== Схема защиты денег ===== */
  .shield{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:10px; align-items:stretch}
  @media (max-width:720px){.shield{grid-template-columns:1fr} .shield .arr{transform:rotate(90deg); justify-self:center}}
  .shield .node{border-radius:var(--r-md); padding:16px 18px; text-align:center;
    background:var(--glass); border:1px solid var(--glass-line); outline:1px solid var(--glass-line-outer);
    -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); box-shadow:var(--lift-1)}
  .shield .node.bank{border:1.5px solid rgba(26,107,196,.45); background:var(--srf-hi)}
  .shield .node b{display:block; font-family:var(--font-display); font-weight:400; font-size:16.5px; margin-bottom:4px}
  .shield .node p{margin:0; font-size:12.5px; color:var(--ink-soft)}
  .shield .arr{align-self:center; color:var(--accent); font-size:20px}
  .shield-badges{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:14px}

  /* ===== Отзывы ===== */
  .rev{border-radius:var(--r-md); padding:18px 20px; display:flex; flex-direction:column; gap:8px;
    background:var(--glass); border:1px solid var(--glass-line); outline:1px solid var(--glass-line-outer);
    -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); box-shadow:var(--lift-1)}
  .rev .stars{color:#f5a623; letter-spacing:2px; font-size:13px}
  .rev p{margin:0; font-size:13.5px; color:var(--ink-soft); flex:1}
  .rev .who{display:flex; align-items:center; gap:9px; margin-top:4px}
  .rev .who i{width:32px; height:32px; border-radius:50%; font-style:normal; font-size:12px; color:#fff;
    background:linear-gradient(145deg,#2d8cf0,#0f2c52); display:grid; place-items:center}
  .rev .who b{font-weight:500; font-size:13px; display:block}
  .rev .who span{font-size:11px; color:var(--ink-faint)}

  .ic{width:18px; height:18px; flex:none; color:var(--accent); transform:translateY(3px)}
  .chat-head .avatar svg, .ai-row .a svg{display:block}
  .offices{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:14px}
  @media (max-width:720px){.offices{grid-template-columns:1fr}}
  .office{border-radius:var(--r-md); padding:18px 20px;
    background:var(--glass); border:1px solid var(--glass-line); outline:1px solid var(--glass-line-outer);
    -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); box-shadow:var(--lift-1)}
  .office b{display:block; font-family:var(--font-display); font-weight:400; font-size:19px; margin-bottom:2px}
  .office .role{font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:8px}
  .office p{margin:0; font-size:13px; color:var(--ink-soft)}
  /* ===== Мы рядом ===== */
  .place{display:grid; grid-template-columns:1.2fr 1fr; gap:18px}
  @media (max-width:720px){.place{grid-template-columns:1fr !important}}
  .place .card-g{border-radius:var(--r-lg); padding:22px 24px;
    background:var(--glass); border:1px solid var(--glass-line); outline:1px solid var(--glass-line-outer);
    -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); box-shadow:var(--lift-1)}
  .place .row-i{display:flex; gap:10px; align-items:baseline; font-size:14px; color:var(--ink-soft); margin-top:8px}
  .place .row-i b{color:var(--ink); font-weight:500}

  /* ===== FAQ ===== */
  details.faq{border-radius:var(--r-md); margin-bottom:10px; overflow:hidden;
    background:var(--glass); border:1px solid var(--glass-line); outline:1px solid var(--glass-line-outer);
    -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); box-shadow:var(--lift-1)}
  details.faq summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px;
    padding:15px 18px; font-size:14.5px; font-weight:400}
  details.faq summary::-webkit-details-marker{display:none}
  details.faq summary::after{content:'+'; margin-left:auto; font-size:19px; color:var(--accent); transition:transform .3s}
  details.faq[open] summary::after{transform:rotate(45deg)}
  details.faq .ans{padding:0 18px 15px 18px; font-size:13.5px; color:var(--ink-soft)}
  /* FAQ — на мобильных аккордеон превращается в 3D-карусель */
  .faq-rail,.faq-dots{display:none}
  @media (max-width:760px){
    details.faq{display:none}
    .faq-rail{display:grid; margin-top:2px}
    .faq-dots{display:flex}
    .faq-card{
      width:min(80vw,330px); padding:20px 22px 22px; border-radius:var(--r-lg);
      background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
      border:1px solid var(--glass-line); outline:1px solid var(--glass-line-outer);
      box-shadow:var(--lift-1);
    }
    .faq-card .q{font-weight:500; font-size:15px; letter-spacing:.01em; color:var(--ink); margin-bottom:9px}
    .faq-card .a{font-size:13.2px; line-height:1.62; color:var(--ink-soft)}
  }

  /* ===== Гид по платформе (модальный тур) ===== */
  .g-progress{display:flex; align-items:center; gap:8px; padding:0 22px; flex:none}
  .g-progress .bar{flex:1; height:3px; border-radius:2px; background:rgba(var(--line-c),.12); overflow:hidden}
  .g-progress .bar i{display:block; height:100%; width:0; background:var(--accent); border-radius:2px; transition:width .4s cubic-bezier(.22,1,.36,1)}
  .g-progress .bar.done i{width:100%}
  .g-step{display:none}
  .g-step.on{display:block; animation:fadeIn .3s ease both}
  .g-step h4{font-family:var(--font-display); font-weight:400; font-size:22px; margin:8px 0 6px; line-height:1.25}
  .g-step .g-tag{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent)}
  .g-step p{font-size:14px; color:var(--ink-soft); margin:8px 0}
  .g-list{list-style:none; margin:10px 0; padding:0}
  .g-list li{display:flex; gap:10px; font-size:14px; line-height:1.55; color:var(--ink-soft); padding:8px 0; border-bottom:1px solid rgba(var(--line-c),.06)}
  .g-list li:last-child{border:none}
  .g-list .gi{flex:none; width:22px; height:22px; border-radius:50%; background:var(--accent-ghost); color:var(--accent);
    display:grid; place-items:center; font-size:11px; font-weight:500}
  .g-demo{border-radius:var(--r-md); padding:14px; margin:12px 0; background:var(--srf-lo); border:1px solid var(--glass-line)}
  .g-nav{display:flex; gap:10px; align-items:center; padding:12px 18px calc(14px + env(safe-area-inset-bottom)); flex:none;
    border-top:1px solid rgba(var(--line-c),.08); background:var(--srf-solid)}
  .g-nav .muted{margin-right:auto}
  .g-nav .btn{flex:none; padding:11px 20px}
  @media (max-width:640px){
    .g-nav{justify-content:space-between}
    .g-nav .muted{display:none}
    .g-nav .btn{flex:1 1 auto}
    .g-nav #gPrev{flex:0 0 auto}
  }
  .cmp{width:100%; border-collapse:collapse; font-size:13px}
  .cmp td{padding:8px 6px; border-bottom:1px solid rgba(var(--line-c),.07); white-space:nowrap}
  .cmp td:first-child{white-space:normal; min-width:120px}
  .cmp-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .cmp tr:last-child td{border:none}
  .cmp .win-row td{background:rgba(26,107,196,.06)}
  .cmp .price{font-size:15px}
  .mini-steps{display:flex; flex-direction:column; gap:0; margin:4px 0}
  .mini-steps span{display:flex; gap:9px; align-items:center; font-size:12.5px; color:var(--ink-soft); padding:4px 0}
  .mini-steps i{width:8px; height:8px; border-radius:50%; background:rgba(var(--line-c),.18); flex:none}
  .mini-steps span.done i{background:var(--accent)}
  .mini-steps span.done{color:var(--ink)}

  /* ===== Премиальная кнопка «Безопасная сделка» ===== */
  .btn-shield{display:inline-flex; align-items:center; gap:10px; cursor:pointer; white-space:nowrap;
    border-radius:40px; padding:12px 24px; font-family:var(--font); font-size:12px; font-weight:500;
    letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink);
    background:linear-gradient(var(--shield-a),var(--shield-b)) padding-box,
               linear-gradient(120deg,#8fc2f5,#1a6bc4 45%,#0f2c52) border-box;
    border:1.5px solid transparent;
    box-shadow:0 6px 18px rgba(26,107,196,.18), inset 0 1px 0 rgba(255,255,255,.85);
    -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
    transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s}
  .btn-shield:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(26,107,196,.28)}
  .btn-shield svg{width:17px; height:17px; color:var(--accent); flex:none}

  /* ===== Категории: ориентация как на премиальных маркетплейсах ===== */
  .cats{display:flex; gap:18px; justify-content:center; margin-top:26px; overflow-x:auto; padding:4px 10px 8px; scrollbar-width:none}
  .cats::-webkit-scrollbar{display:none}
  .cat{display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; border:none; background:none;
    font-family:var(--font); flex:none; transition:transform .3s cubic-bezier(.22,1,.36,1)}
  .cat:hover{transform:translateY(-3px)}
  .cat .ci{width:58px; height:58px; border-radius:50%; display:grid; place-items:center; color:var(--accent-ink);
    background:var(--glass-strong); border:1px solid var(--glass-line); outline:1px solid var(--glass-line-outer);
    -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); box-shadow:var(--lift-1)}
  .cat:hover .ci{box-shadow:var(--lift-2); color:var(--accent)}
  .cat .ci svg{width:30px; height:30px}
  .cat span{font-size:11.5px; color:var(--ink-soft); letter-spacing:.02em}

  /* ===== «Что такое Автомак»: формула платформы ===== */
  .about-p{max-width:64ch; margin:0 auto 22px; text-align:center; font-size:16px; color:var(--ink-soft)}
  .about-p b{color:var(--ink); font-weight:500}
  .flow5{display:flex; gap:8px; align-items:stretch; overflow-x:auto; padding:4px 2px 10px; scrollbar-width:none}
  .flow5::-webkit-scrollbar{display:none}
  .f5{flex:1 0 150px; border-radius:var(--r-md); padding:14px; text-align:center;
    background:var(--glass); border:1px solid var(--glass-line); outline:1px solid var(--glass-line-outer);
    -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); box-shadow:var(--lift-1)}
  .f5 .fi{width:38px; height:38px; margin:0 auto 8px; border-radius:50%; display:grid; place-items:center;
    color:var(--accent); background:var(--accent-ghost)}
  .f5 .fi svg{width:20px; height:20px}
  .f5 b{display:block; font-size:13px; font-weight:500; margin-bottom:3px}
  .f5 span{font-size:11px; color:var(--ink-faint); line-height:1.4}
  .f5-arr{align-self:center; color:var(--accent); font-size:16px; flex:none}

  /* ===== Квиз ===== */
  .qz-step{display:none}
  .qz-step.on{display:block; animation:fadeIn .3s ease both}
  .qz-q{font-family:var(--font-display); font-weight:400; font-size:21px; margin:6px 0 14px}
  .qz-opts{display:flex; flex-wrap:wrap; gap:10px}
  .qz-opts .chip{font-size:14px; padding:12px 20px}
  .qz-final{font-size:15px; color:var(--ink-soft); background:var(--srf-mid); border:1px solid var(--glass-line);
    border-radius:var(--r-md); padding:14px 16px; margin:6px 0 14px}
  .qz-final b{color:var(--ink)}

  /* ===== Команда ===== */
  .team{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
  @media (max-width:860px){.team{grid-template-columns:repeat(2,1fr)}}
  .tm{border-radius:var(--r-md); padding:18px; text-align:center;
    background:var(--glass); border:1px solid var(--glass-line); outline:1px solid var(--glass-line-outer);
    -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); box-shadow:var(--lift-1)}
  .tm .ava{width:64px; height:64px; border-radius:50%; margin:0 auto 10px; color:#fff;
    font-family:var(--font-display); font-size:22px; display:grid; place-items:center;
    background:linear-gradient(145deg,#2d8cf0,#0f2c52); box-shadow:0 8px 18px rgba(26,107,196,.3)}
  .tm b{display:block; font-weight:500; font-size:14.5px}
  .tm .role{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:3px 0 6px}
  .tm p{margin:0; font-size:12px; color:var(--ink-soft)}

  /* ===== Калькулятор в модалке ===== */
  .calc-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; margin-bottom:12px}
  .modal.calcw{width:min(880px,96vw)}
  @media (min-width:700px){ .modal.calcw .calc-grid{grid-template-columns:repeat(3,1fr)} }
  /* Расшифровка стоимости */
  .calc-break{margin-top:14px; border-radius:var(--r-md); background:var(--srf-lo); border:1px solid var(--glass-line); padding:14px 18px 12px}
  .cb-head{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px}
  .cb-row{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:6.5px 0; font-size:13.5px;
    border-bottom:1px solid rgba(var(--line-c),.07)}
  .cb-row:last-child{border-bottom:none}
  .cb-row span{color:var(--ink-soft)}
  .cb-row b{font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums}
  .cb-row.total{border-bottom:none; padding:8px 0 2px}
  .cb-row.total span{color:var(--ink); font-weight:500}
  .cb-row.total b{font-family:var(--font-display); font-weight:400; font-size:18px; color:var(--accent-ink)}
  .cb-sep{height:1px; background:rgba(var(--line-c),.16); margin:7px 0}
  .cb-note{margin-top:10px; font-size:11.5px; color:var(--ink-faint); line-height:1.55}
  @media (max-width:560px){.calc-grid{grid-template-columns:1fr}}
  .calc-grid label{display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:5px}
  .calc-grid .field{margin-bottom:0}
  .calc-note{font-size:11px; color:var(--ink-faint); margin-top:10px}
  .calc-warn{font-size:12px; color:var(--warn); margin-top:8px}

  /* ===== Стек модалок: лот поверх ассистента, лайтбокс поверх всего ===== */
  #m-lot{z-index:60}
  #m-login{z-index:65}
  #m-lightbox{z-index:70; background:rgba(7,16,30,.9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    align-items:center !important; padding:18px !important}

  /* ===== Галерея в карточке лота ===== */
  .lot-gallery{display:grid; grid-template-columns:1.7fr 1fr; gap:8px}
  .lot-gallery .main{height:186px; border-radius:var(--r-md); cursor:zoom-in; position:relative}
  .lot-thumbs{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .lot-thumbs .ph{height:89px; border-radius:12px; cursor:zoom-in; transition:transform .25s}
  .lot-thumbs .ph:hover{transform:translateY(-2px)}
  .lot-thumbs .ph::before{font-size:12px}
  .ph-count{position:absolute; left:10px; bottom:10px; z-index:2}
  @media (max-width:560px){
    .lot-gallery{grid-template-columns:1fr}
    .lot-thumbs{grid-template-columns:repeat(4,1fr)}
    .lot-thumbs .ph{height:62px} .lot-thumbs .ph::before{font-size:9px; padding:4px}
  }

  /* ===== Лайтбокс ===== */
  .lb-wrap{width:min(940px,96vw); display:flex; flex-direction:column; gap:12px}
  .lb-frame{position:relative; height:min(66vh,540px); border-radius:var(--r-lg); overflow:hidden;
    box-shadow:0 40px 90px rgba(0,0,0,.5)}
  .lb-frame .ph{position:absolute; inset:0}
  .lb-frame .ph::before{font-size:clamp(22px,4vw,34px)}
  .lb-bar{display:flex; align-items:center; gap:14px; color:#cfe3fb; font-size:13px}
  .lb-btn{width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.25); cursor:pointer;
    background:rgba(255,255,255,.1); color:#fff; display:grid; place-items:center; transition:background .2s}
  .lb-btn:hover{background:rgba(255,255,255,.22)}
  .lb-bar .cap{margin-right:auto}
  @media (max-width:560px){ .lb-frame{height:52vh} }

  /* ===== Модалка каталога ===== */
  .cat-bar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:10px 0 12px;
    position:sticky; top:0; background:var(--srf-solid); z-index:2;
    border-bottom:1px solid rgba(var(--line-c),.08)}
  .cat-bar select{padding:8px 12px; font-size:13px}
  /* Поля панели — в РЯД. У .field ширина 100% и нижний отступ (это правило ФОРМЫ), и в
     модалке фильтры раскладывались по одному на строку — так и стояло на проде до В1. */
  .cat-bar .field{width:auto; min-width:0; margin:0; flex:0 1 auto}
  .cat-bar select.field{max-width:230px}
  .cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:12px; margin-top:14px}
  @media (max-width:560px){.cat-grid{grid-template-columns:1fr 1fr; gap:10px}}
  .cat-grid .car .ph{height:110px}
  .cat-grid .car .ph::before{font-size:15px}
  .cat-grid .car .name{font-size:15px}
  .cat-grid .car .price{font-size:17px; display:block}
  /* Подпись под числом, а не сбоку: «медиана «под ключ»» рядом с семизначной суммой
     переносилась посреди слова. */
  .cat-grid .car .price small{display:block; margin-top:1px; font-size:10.5px; color:var(--ink-faint)}
  .cat-grid .car .meta{font-size:11.5px; line-height:1.45}
  .cat-empty{text-align:center; color:var(--ink-faint); padding:30px 0}
  /* Примеры каталога (В1): НАША обложка модели в плашке. Подпись «иллюстрация» обязательна —
     журнал и справочник держатся на том, что мы не выдаём выдуманное за настоящее (С73). */
  a.car{text-decoration:none; color:inherit}
  .cat-grid .car .ph > img, .demo-cars .mini .ph > img{object-fit:cover}
  .ph-ai{position:absolute; left:6px; bottom:6px; z-index:3; padding:2px 7px; border-radius:20px;
    font:500 9.5px/1.3 var(--font); letter-spacing:.04em; text-transform:uppercase; color:#fff;
    background:rgba(7,26,51,.62); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
  .cat-foot{display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-top:16px;
    padding-top:14px; border-top:1px solid var(--glass-line-outer)}
  .cat-foot .muted{flex:1 1 300px; margin:0; font-size:11.5px; line-height:1.5}
  .cat-foot .btn{flex:none}


  /* ===== Период годов выпуска: модалка с двойным ползунком ===== */
  #m-years{z-index:66}
  .yr-big{font-family:var(--font-display); font-weight:400; font-size:36px; color:var(--accent-ink); text-align:center; margin:8px 0 18px; letter-spacing:.02em}
  .yrs{position:relative; height:46px; margin:0 10px; touch-action:none; cursor:pointer}
  .yrs .tr{position:absolute; left:0; right:0; top:50%; height:6px; transform:translateY(-50%); border-radius:3px; background:rgba(var(--line-c),.16)}
  .yrs .fl{position:absolute; top:50%; height:6px; transform:translateY(-50%); border-radius:3px;
    background:linear-gradient(90deg,var(--accent),#5aadff)}
  .yrs .th{position:absolute; top:50%; width:27px; height:27px; border-radius:50%; transform:translate(-50%,-50%);
    background:#fff; border:3.5px solid var(--accent); box-shadow:0 4px 12px rgba(7,16,30,.35)}
  .yr-scale{display:flex; justify-content:space-between; font-size:10.5px; color:var(--ink-faint); margin:4px 10px 8px}
  .yr-chips{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:10px}
  /* ===== Подвал ===== */
  footer.rich{margin-top:70px; border-top:1px solid rgba(var(--line-c),.1); padding-top:26px; text-align:left}
  .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:22px; max-width:1120px}
  @media (max-width:720px){.foot-grid{grid-template-columns:1fr}}
  footer.rich .brand-f{font-weight:300; letter-spacing:.3em; font-size:14px; color:var(--ink)}
  footer.rich .brand-f b{font-weight:500; color:var(--accent)}
  footer.rich p, footer.rich a{font-size:12.5px; color:var(--ink-faint); text-decoration:none; display:block; margin-top:7px}
  footer.rich a:hover{color:var(--accent)}
  footer.rich h5, footer.rich .foot-h{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:400; color:var(--ink-soft); margin:0 0 4px}
  footer.rich .legal{margin-top:22px; padding-top:14px; border-top:1px solid rgba(var(--line-c),.08);
    font-size:11.5px; color:var(--ink-faint); text-align:center}