/* ═══════════════════════════════════════════════════════════
   VINDEX — лендинг бесплатного Android-приложения.

   Написан mobile-first: базовые правила — это телефон,
   планшет и десктоп надстраиваются через min-width.
   Основной трафик мобильный, поэтому узкий экран здесь
   не «сжатый десктоп», а исходная точка.

   Плотность и раскладка — в логике российских автоклассифайдов
   (замеры computed styles Авто.ру: фон #F4F4F4, белые карточки,
   базовый кегль 16px, радиусы 8px). Акцент — из самого
   приложения: бирюза → изумруд, но градиент углублён, чтобы
   белый текст на кнопке проходил AA.
   ═══════════════════════════════════════════════════════════ */

:root{
  --page:#F4F4F4;
  --card:#fff;
  --ink:#000;
  --ink-2:#6E7276;
  --line:#E4E6E8;
  --line-2:#D4D7DB;

  --teal:#097C81;
  --teal-br:#00A8A8;
  --go-a:#078287;
  --go-b:#0A8168;

  --green:#146F31;   --green-br:#18C054; --green-bg:#E9F6EE;
  --amber:#8A5200;   --amber-br:#E48400; --amber-bg:#FDF2E2;
  --red:#CC0000;     --red-bg:#FCECEA;

  --ff:"Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --wrap:1240px;
  --pad:16px;
  --r:8px;
  --tap:48px;                 /* минимальная зона нажатия */
  --bar:0px;                  /* высота липкой панели, растёт на мобильных */
  --sh:0 1px 2px rgba(0,0,0,.05);
  --sh-2:0 4px 16px rgba(0,0,0,.08);
  --sh-3:0 10px 30px rgba(0,0,0,.1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

body{
  margin:0;background:var(--card);color:var(--ink);
  font-family:var(--ff);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:var(--bar);
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
svg{display:block}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:rgba(0,168,168,.15)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.18;overflow-wrap:break-word}
table{border-collapse:collapse;width:100%}

::selection{background:#CFF0F1}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px}

.skip{position:fixed;left:12px;top:-80px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r)}
.skip:focus{top:12px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.lnk{color:var(--teal);font-weight:500}

/* ── типографика: мобильные значения ── */
.h1{font-size:28px;line-height:1.15;letter-spacing:-.025em}
.h2{font-size:22px;margin-bottom:8px}
.sec__sub{color:var(--ink-2);font-size:15px;max-width:62ch;margin-bottom:22px}
.sec{padding-block:36px}
.sec--grey{background:var(--page);border-block:1px solid var(--line)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r)}

/* ── кнопки ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap);padding:0 20px;border-radius:var(--r);
  font-size:16px;font-weight:600;white-space:nowrap;
  transition:filter .15s,border-color .15s,background .15s;
}
.btn--sm{min-height:38px;padding:0 14px;font-size:14px;border-radius:6px}
.btn--full{width:100%}
.btn--go{background:linear-gradient(90deg,var(--go-a),var(--go-b));color:#fff}
.btn--go:active{filter:brightness(.94)}
.btn--line{border:1px solid var(--line-2);background:var(--card)}

/* главная кнопка — скачивание APK */
.dl__btns{margin-top:22px}
.store{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;min-height:58px;padding:0 20px;border-radius:var(--r);
  background:linear-gradient(90deg,var(--go-a),var(--go-b));color:#fff;
  transition:filter .15s;
}
.store:active{filter:brightness(.94)}
.store__i svg{width:24px;height:24px}
.store__t{display:grid;line-height:1.2}
.store__t small{font-size:11px;opacity:.85}
.store__t b{font-size:17px;font-weight:600}

/* ── статусы ── */
.badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font-size:13px;font-weight:600}
.badge--green{background:var(--green-bg);color:var(--green)}
.badge--amber{background:var(--amber-bg);color:var(--amber)}

.stars{display:inline-block;width:76px;height:13px;flex:none;
  background:linear-gradient(90deg,var(--amber-br) 96%,var(--line-2) 96%);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='13' viewBox='0 0 76 13'%3E%3Cpath d='M6.5 0 8 4.4h4.6L8.9 7.1l1.4 4.4-3.8-2.7-3.8 2.7 1.4-4.4L.4 4.4H5L6.5 0Zm15.7 0 1.5 4.4h4.6l-3.7 2.7 1.4 4.4-3.8-2.7-3.8 2.7 1.4-4.4-3.7-2.7h4.6L22.2 0Zm15.8 0 1.5 4.4H44l-3.7 2.7 1.4 4.4-3.7-2.7-3.8 2.7 1.4-4.4-3.7-2.7h4.6L38 0Zm15.7 0 1.5 4.4h4.6L56 7.1l1.4 4.4-3.7-2.7-3.8 2.7 1.4-4.4-3.7-2.7h4.6L53.7 0Zm15.8 0L71 4.4h4.6l-3.7 2.7 1.4 4.4-3.8-2.7-3.7 2.7 1.4-4.4-3.7-2.7h4.6L69.5 0Z'/%3E%3C/svg%3E") no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='13' viewBox='0 0 76 13'%3E%3Cpath d='M6.5 0 8 4.4h4.6L8.9 7.1l1.4 4.4-3.8-2.7-3.8 2.7 1.4-4.4L.4 4.4H5L6.5 0Zm15.7 0 1.5 4.4h4.6l-3.7 2.7 1.4 4.4-3.8-2.7-3.8 2.7 1.4-4.4-3.7-2.7h4.6L22.2 0Zm15.8 0 1.5 4.4H44l-3.7 2.7 1.4 4.4-3.7-2.7-3.8 2.7 1.4-4.4-3.7-2.7h4.6L38 0Zm15.7 0 1.5 4.4h4.6L56 7.1l1.4 4.4-3.7-2.7-3.8 2.7 1.4-4.4-3.7-2.7h4.6L53.7 0Zm15.8 0L71 4.4h4.6l-3.7 2.7 1.4 4.4-3.8-2.7-3.7 2.7 1.4-4.4-3.7-2.7h4.6L69.5 0Z'/%3E%3C/svg%3E") no-repeat;
}

/* ── шапка ── */
.hdr{position:sticky;top:0;z-index:50;background:var(--card);border-bottom:1px solid var(--line)}
.hdr.is-stuck{box-shadow:var(--sh)}
.hdr__in{min-height:56px;display:flex;align-items:center;gap:10px}
.logo{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;font-size:17px;letter-spacing:-.02em;flex:none;margin-right:auto}
.logo__m{width:24px;height:24px;border-radius:6px;flex:none;position:relative;
  background:linear-gradient(135deg,var(--teal-br),#0EB592)}
.logo__m::after{content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 12h4l2.5-6 5 12L17 12h4' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.hdr__nav{display:none}
.hdr__act{display:flex;align-items:center;gap:8px;flex:none}
/* на телефоне постоянная кнопка живёт в нижней панели, в шапке она лишняя */
.hdr__act .btn{display:none}

.burger{display:flex;width:44px;height:44px;border:1px solid var(--line-2);border-radius:6px;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:none}
.burger i{width:16px;height:1.6px;background:var(--ink);transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

.mmenu[hidden]{display:none}
.mmenu{position:sticky;top:56px;z-index:49;background:var(--card);border-bottom:1px solid var(--line);
  padding:4px var(--pad) 14px;display:grid;box-shadow:var(--sh-2)}
.mmenu a{display:flex;align-items:center;min-height:var(--tap);font-size:16px;border-bottom:1px solid var(--line)}
.mmenu a:last-child{border-bottom:0;color:var(--teal);font-weight:600}

/* ── липкая панель скачивания ── */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  transform:translateY(0);transition:transform .28s ease;
}
.mbar.is-off{transform:translateY(110%)}
.mbar__in{display:flex;align-items:center;gap:12px;max-width:var(--wrap);margin-inline:auto}
.mbar__txt{display:grid;line-height:1.25;min-width:0;margin-right:auto}
.mbar__txt b{font-size:15px}
.mbar__txt small{font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbar .btn{flex:none;padding:0 18px}

/* ── первый экран ── */
.hero{padding-block:24px 32px}
.hero__grid{display:grid;gap:28px}
.eyebrow{display:inline-flex;align-items:center;min-height:26px;padding:2px 12px;border-radius:99px;
  background:var(--green-bg);color:var(--green);font-size:13px;font-weight:600;margin-bottom:14px}
.hero__sub{color:var(--ink-2);font-size:16px;max-width:56ch;margin-top:12px}

.quick{display:grid;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.quick li{display:flex;align-items:center;gap:9px;font-size:15px;color:var(--ink-2)}
.quick li::before{content:"";width:14px;height:8px;flex:none;
  border:2px solid var(--green-br);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-2px)}

/* ── скриншот приложения ── */
.shot{margin:0;max-width:300px;margin-inline:auto}
.shot__dev{border:1px solid var(--line-2);border-radius:22px;padding:6px;background:var(--card);box-shadow:var(--sh-3)}
.shot__dev img{border-radius:16px;width:100%}

/* ── полоса цифр ── */
.strip{background:var(--page);border-block:1px solid var(--line)}
.strip__in{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 12px;padding-block:18px}
.strip__i b{display:block;font-size:24px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.strip__i span{font-size:13.5px;color:var(--ink-2)}

/* ── возможности ── */
.grid4{display:grid;gap:12px}
.tile{padding:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.tile__ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;margin-bottom:12px;
  background:#EEF0F1;color:#4A5056}
.tile__ic svg{width:22px;height:22px}
.tile__ic--green{background:var(--green-bg);color:var(--green)}
.tile__ic--amber{background:var(--amber-bg);color:var(--amber)}
.tile h3{font-size:17px;margin-bottom:6px}
.tile p{font-size:14.5px;color:var(--ink-2)}

/* ── документ отчёта ── */
.doc{overflow:hidden}
.doc__hd{display:grid;gap:12px;padding:18px 16px}
.doc__vin{font-size:12.5px;color:var(--ink-2);letter-spacing:.05em}
.doc__car h3{font-size:19px;margin:4px 0 6px}
.doc__spec{font-size:13.5px;color:var(--ink-2)}
.doc__score{margin-top:6px;font-size:13.5px;color:var(--ink-2)}
.doc__score b{color:var(--ink);font-size:15px}

.doc__tabs{display:flex;gap:2px;padding:0 16px;border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.doc__tabs::-webkit-scrollbar{display:none}
.doc__tab{padding:12px 12px;font-size:15px;color:var(--ink-2);white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s}
.doc__tab.is-on{color:var(--ink);font-weight:600;border-bottom-color:var(--teal-br)}

.doc__body{padding:4px 16px 18px}
.pane{display:none}
.pane.is-on{display:block;animation:fade .2s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}

.tbl{font-size:14px}
.tbl th{text-align:left;font-size:12.5px;font-weight:500;color:var(--ink-2);
  padding:12px 6px 8px;border-bottom:1px solid var(--line)}
.tbl td{padding:12px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{padding-left:0;font-weight:500}
.tbl td:last-child,.tbl th:last-child{text-align:right;padding-right:0;color:var(--ink-2)}
/* на телефоне средний столбец лишний — он лишь уточняет источник */
.tbl td:nth-child(2),.tbl th:nth-child(2){display:none}
.tbl tr[class^="s-"] td:first-child{position:relative;padding-left:18px}
.tbl tr[class^="s-"] i{position:absolute;left:0;top:18px;width:8px;height:8px;border-radius:50%}
.s-green i{background:var(--green-br)}
.s-amber i{background:var(--amber-br)}
.s-red i{background:var(--red)}
.s-amber td:last-child{color:var(--amber);font-weight:500}
.s-red td:last-child{color:var(--red);font-weight:500}
.s-green td:last-child{color:var(--green)}

.doc__note{margin-top:12px;font-size:13.5px;color:var(--ink-2)}
.doc__note b{color:var(--ink)}
.doc__empty{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 0 4px;font-size:14.5px;color:var(--ink-2)}
.doc__ft{display:grid;gap:4px;padding:12px 16px;background:var(--page);
  border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-2)}
.doc__ft .lnk{display:inline-flex;align-items:center;min-height:44px}

/* ── график пробега ── */
.chart{display:flex;gap:8px;margin:14px 0 10px}
.chart__y{display:flex;flex-direction:column;justify-content:space-between;height:180px;
  font-size:11px;color:var(--ink-2);text-align:right;flex:none;width:26px}
.chart__plot{flex:1;min-width:0}
.chart__plot svg{width:100%;height:180px}
.ch__grid path{stroke:var(--line);stroke-width:1}
.ch__line,.ch__after,.ch__drop,.ch__proj{fill:none;vector-effect:non-scaling-stroke}
.ch__line{stroke:var(--teal-br);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:800;stroke-dashoffset:800;transition:stroke-dashoffset 1.4s ease-out}
.ch__drop{stroke:var(--red);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset .7s ease-out .9s}
.ch__after{stroke:#A7ACB1;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:500;stroke-dashoffset:500;transition:stroke-dashoffset .9s ease-out 1.4s}
.ch__proj{stroke:#A7ACB1;stroke-width:1.6;stroke-dasharray:5 6;opacity:0;transition:opacity .6s 1.9s}
.ch__dot circle{fill:var(--teal-br);opacity:0;transition:opacity .4s .6s}
.ch__bad{fill:var(--red);opacity:0;transition:opacity .4s 1.5s}
.chart.is-in .ch__line,.chart.is-in .ch__drop,.chart.is-in .ch__after{stroke-dashoffset:0}
.chart.is-in .ch__proj,.chart.is-in .ch__dot circle,.chart.is-in .ch__bad{opacity:1}
.chart__x{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-2);margin-top:6px}
.chart__lg{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:12.5px;color:var(--ink-2);margin-bottom:6px}
.lg{display:inline-flex;align-items:center;gap:6px}
.lg::before{content:"";width:13px;height:2.5px;border-radius:2px;background:currentColor}
.lg--teal::before{background:var(--teal-br)}
.lg--red::before{background:var(--red)}
.lg--grey::before{background:#A7ACB1}

/* ── шаги ── */
.steps{display:grid;gap:18px}
.step{padding-top:14px;border-top:2px solid var(--line)}
.step__n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;margin-bottom:10px;
  background:linear-gradient(135deg,var(--go-a),var(--go-b));color:#fff;font-size:14px;font-weight:700}
.step h3{font-size:18px;margin-bottom:6px}
.step p{font-size:14.5px;color:var(--ink-2)}

/* ── сколько стоит ── */
.free{display:grid;gap:22px}
.free__big{font-size:40px;font-weight:700;letter-spacing:-.04em;line-height:1;margin:8px 0 12px;
  background:linear-gradient(90deg,var(--go-a),var(--go-b));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.free__list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.free__list li{display:grid;gap:2px;padding:14px 16px;background:var(--card)}
.free__list b{font-size:15px;font-weight:600}
.free__list span{font-size:14px;color:var(--ink-2)}

/* ── отзывы ── */
.revs{display:grid;gap:12px}
.rev{margin:0;padding:18px}
.rev__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.rev__hd b{font-size:15px}
.rev blockquote{margin:0;font-size:14.5px;line-height:1.55}

/* ── вопросы ── */
.faq{display:grid;gap:18px}
.faq__side .sec__sub{margin-bottom:0}
.q{border-bottom:1px solid var(--line)}
.q:first-child{border-top:1px solid var(--line)}
.q summary{display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:var(--tap);padding:12px 0;cursor:pointer;list-style:none;font-size:16px;font-weight:500}
.q summary::-webkit-details-marker{display:none}
.q summary i{position:relative;width:18px;height:18px;flex:none}
.q summary i::before,.q summary i::after{content:"";position:absolute;left:50%;top:50%;
  background:currentColor;border-radius:2px;transform:translate(-50%,-50%);transition:opacity .2s}
.q summary i::before{width:12px;height:2px}
.q summary i::after{width:2px;height:12px}
.q[open] summary{color:var(--teal);font-weight:600}
.q[open] summary i::after{opacity:0}
.q__a{padding-bottom:16px;max-width:70ch}
.q__a p{font-size:14.5px;color:var(--ink-2)}

/* ── скачать ── */
.dl{background:var(--page);border-top:1px solid var(--line);padding-block:36px}
.dl__txt{max-width:640px}
.dl__meta{margin-top:14px;font-size:13px;color:var(--ink-2)}

/* ── подвал ── */
.ft{background:var(--card);border-top:1px solid var(--line);padding-top:28px}
.ft__in{display:grid;gap:24px;padding-bottom:24px}
.ft__brand .logo{margin-right:0}
.ft__brand p{margin-top:10px;font-size:14px;color:var(--ink-2)}
.ft__col{display:grid;gap:2px;align-content:start}
.ft__ttl{font-size:13px;color:var(--ink-2);margin-bottom:4px}
.ft__col a{display:flex;align-items:center;min-height:40px;font-size:14.5px}
.ft__bot{display:grid;gap:8px;padding-block:16px;border-top:1px solid var(--line)}
.ft__bot p{font-size:12px;color:var(--ink-2);max-width:82ch}

/* ═══════════════════════════════════════════════════════════
   Дальше — надстройка для широких экранов.
   Всё выше уже работает на телефоне без этих правил.
   ═══════════════════════════════════════════════════════════ */

/* ── крупный телефон и вверх ── */
@media (min-width:480px){
  :root{--pad:20px}
  .h1{font-size:32px}
  .h2{font-size:24px}
  .store{width:auto;min-width:280px}
  .dl__btns{display:flex}
  .quick{grid-template-columns:1fr 1fr;gap:10px 22px}
  .strip__i b{font-size:26px}
  .tbl td:nth-child(2),.tbl th:nth-child(2){display:table-cell;color:var(--ink-2);font-size:13.5px}
  .doc__hd,.doc__tabs,.doc__body,.doc__ft{padding-inline:20px}
  .ft__bot{grid-template-columns:auto 1fr;gap:8px 28px}
}

/* ── планшет ── */
@media (min-width:640px){
  :root{--pad:24px}
  .sec{padding-block:48px}
  .grid4{grid-template-columns:1fr 1fr}
  .revs{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(3,1fr);gap:20px}
  .free__list{grid-template-columns:1fr 1fr;gap:1px}
  .doc__hd{grid-template-columns:1fr auto;align-items:start}
  .doc__verdict{text-align:right}
  .doc__ft{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .ft__in{grid-template-columns:1fr 1fr}
  .ft__brand{grid-column:span 2}
  .chart__y{height:220px;width:32px}
  .chart__plot svg{height:220px}
}

/* ── широкий планшет: возвращаем горизонтальное меню ── */
@media (min-width:880px){
  :root{--pad:28px;--bar:0px}
  .mbar{display:none}                 /* на широком экране кнопка и так на виду */
  .burger{display:none}
  .hdr__act .btn{display:inline-flex;padding:0 16px}
  .hdr__nav{display:flex;gap:20px;margin-right:auto}
  .hdr__nav a{display:flex;align-items:center;min-height:40px;font-size:15px;
    border-bottom:2px solid transparent}
  .hdr__nav a:hover{color:var(--teal);border-bottom-color:var(--teal-br)}
  .logo{margin-right:22px}
  .hdr__in{min-height:60px}
  .mmenu{display:none}
  .hero__grid{grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:center}
  .shot{max-width:300px}
  .grid4{grid-template-columns:repeat(3,1fr);gap:14px}
  .revs{grid-template-columns:repeat(3,1fr);gap:14px}
  .strip__in{grid-template-columns:repeat(3,1fr);gap:24px;padding-block:22px}
  .free{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
  .free__list{grid-template-columns:1fr}
  .faq{grid-template-columns:320px minmax(0,1fr);gap:40px;align-items:start}
  .ft__in{grid-template-columns:1.6fr repeat(3,1fr);gap:28px}
  .ft__brand{grid-column:span 1}
  .ft__col a{min-height:32px}
}

/* ── десктоп ── */
@media (min-width:1080px){
  :root{--pad:32px}
  .h1{font-size:40px}
  .h2{font-size:28px}
  .sec{padding-block:64px}
  .sec__sub{font-size:16px;margin-bottom:28px}
  .hero{padding-block:44px 56px}
  .hero__grid{grid-template-columns:minmax(0,1fr) 330px;gap:64px}
  .shot{max-width:330px}
  .grid4{grid-template-columns:repeat(4,1fr);gap:16px}
  .tile{padding:20px}
  .strip__i b{font-size:30px}
  .free__big{font-size:60px}
  .doc__hd,.doc__tabs,.doc__body,.doc__ft{padding-inline:22px}
  .doc__car h3{font-size:21px}
  .tbl{font-size:15px}
  .dl{padding-block:64px}
}

/* наведение — только там, где есть мышь */
@media (hover:hover){
  .btn--go:hover,.store:hover{filter:brightness(1.08)}
  .btn--line:hover{border-color:#9AA0A6;background:#FAFAFA}
  .lnk:hover{color:#065C60;text-decoration:underline}
  .tile:hover{box-shadow:var(--sh-2);border-color:var(--line-2)}
  .doc__tab:hover{color:var(--ink)}
  .q summary:hover{color:var(--teal)}
  .ft__col a:hover{color:var(--teal)}
}

/* ── hero background ── */
.hero{
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,.3) 60%, rgba(0,0,0,.15) 100%),
    url(../img/hero-bg.jpg);
  background-size:cover;
  background-position:center 40%;
}
.hero .h1,.hero .eyebrow{color:#fff}
.hero .hero__sub{color:rgba(255,255,255,.82)}
.hero .quick li{color:rgba(255,255,255,.78)}
.hero .quick li::before{border-color:rgba(255,255,255,.7)}
.hero .quick{border-top-color:rgba(255,255,255,.18)}
.hero .eyebrow{background:rgba(255,255,255,.15);color:#fff}

@media(min-width:900px){
  .hero{
    background-image:
      linear-gradient(to right, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.1) 100%),
      url(../img/hero-bg.jpg);
  }
}

@media print{
  .hdr,.mmenu,.burger,.mbar,.dl,.shot__dev{display:none !important}
  body{background:#fff;padding-bottom:0}
  .card,.tile{border-color:#ccc;box-shadow:none}
  .pane{display:block !important}
}