/* ═══════════════════════════════════════════════════════════
   ГОСАВТОЗНАК 77 — светлый макет на жёсткой модульной сетке.
   Геометрия: прямоугольные модули с ОБЩИМИ границами, как бланк.
   Дисплей Unbounded · текст Inter · единственный цвет — ультрамарин.
   Содержание построено вокруг ситуаций с номером, а не каталога.
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:#101216;
  --bg:#F1F2F4;
  --paper:#FFFFFF;
  --mut:#5C626C;
  --mut2:#858B95;
  --ul:#241EDB;
  --bw:1.5px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Inter','Segoe UI',system-ui,Arial,sans-serif;
  font-size:16.5px;line-height:1.62;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'Unbounded','Inter',sans-serif;font-weight:700;line-height:1.12;letter-spacing:-.02em}
::selection{background:var(--ul);color:#fff}
:focus-visible{outline:2.5px solid var(--ul);outline-offset:2px}

.grid{
  width:min(1320px, 100% - 56px);
  margin-inline:auto;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--ul);color:#fff;padding:10px 16px}

.kicker{font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--mut2)}

.btn{
  display:inline-block;background:var(--ul);color:#fff;
  font-weight:600;font-size:16px;padding:16px 30px;border:var(--bw) solid var(--ul);
  transition:background .15s,color .15s,border-color .15s;
}
.btn:hover{background:var(--ink);border-color:var(--ink)}
.btn--light{background:#fff;color:var(--ul);border-color:#fff}
.btn--light:hover{background:var(--ink);border-color:var(--ink);color:#fff}

/* ── шапка ────────────────────────────────────────────── */
.top{background:var(--bg);border-bottom:var(--bw) solid var(--ink);position:sticky;top:0;z-index:40}
.top__in{align-items:center;padding:16px 0}
.logo{
  grid-column:span 3;font-family:'Unbounded',sans-serif;font-weight:700;
  font-size:15px;letter-spacing:-.01em;display:flex;align-items:center;gap:7px;
}
.logo span{background:var(--ul);color:#fff;font-size:12px;padding:2px 6px 3px;letter-spacing:0}
.top__nav{grid-column:4/10;display:flex;gap:28px;justify-content:center;font-size:15px;color:var(--mut)}
.top__nav a:hover{color:var(--ul)}
.top__tel{grid-column:10/13;text-align:right;font-weight:600;font-size:16px}
.top__tel:hover{color:var(--ul)}

/* ── HERO ─────────────────────────────────────────────── */
.hero{margin-top:56px;align-items:stretch}
.hero__main{
  grid-column:1/8;background:var(--ul);color:#fff;
  border:var(--bw) solid var(--ink);border-right:0;
  padding:56px 52px 52px;
}
.hero__main .kicker{color:rgba(255,255,255,.72)}
h1{font-size:clamp(31px,3.9vw,52px);margin-top:26px;color:#fff}
.hero__lead{margin-top:26px;font-size:17px;color:rgba(255,255,255,.86);max-width:36em}
.hero__main .btn{margin-top:38px}
.hero__ph{grid-column:8/13;border:var(--bw) solid var(--ink);background:var(--paper);
  display:grid;place-items:center;padding:22px}
.hero__ph img{width:100%;height:auto;object-fit:contain}

/* ── полоса цифр ──────────────────────────────────────── */
.strip{border-left:var(--bw) solid var(--ink)}
.strip__c{
  grid-column:span 3;border-right:var(--bw) solid var(--ink);border-bottom:var(--bw) solid var(--ink);
  padding:24px 26px 26px;background:var(--paper);
}
.strip__c b{font-family:'Unbounded',sans-serif;font-size:clamp(20px,2.1vw,29px);font-weight:700;display:block;line-height:1.05}
.strip__c span{display:block;margin-top:10px;font-size:13.5px;color:var(--mut);line-height:1.4}

/* ── секции ───────────────────────────────────────────── */
.sec{padding:88px 0}
.sec--tint{background:#E7E9ED}
.sec__head{margin-bottom:44px;align-items:end;row-gap:18px}
.sec__head h2{grid-column:1/8;font-size:clamp(25px,3.1vw,38px)}
.sec__head p{grid-column:8/13;color:var(--mut);font-size:15.5px}
.fineprint,.pano__cap{display:block}
.fineprint{margin-top:24px;font-size:12.5px;color:var(--mut2)}

/* ── СИТУАЦИИ: широкие строки-бланки ──────────────────── */
.cases{border-top:var(--bw) solid var(--ink);background:var(--paper)}
.case{
  grid-column:1/-1;display:grid;grid-template-columns:2fr 10fr;gap:32px;
  padding:28px;border-bottom:var(--bw) solid var(--ink);
  transition:background .18s;
}
.case:hover{background:#F7F8FA}
.case__k{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2);padding-top:6px}
.case__v h3{font-size:21px}
.case__v p{margin-top:12px;color:var(--mut);font-size:15.5px;max-width:74ch}
.case__do{
  margin-top:16px !important;padding-left:16px;border-left:3px solid var(--ul);
  color:var(--ink) !important;font-weight:500;
}

/* ── ШТРАФЫ ───────────────────────────────────────────── */
.risk{border-top:var(--bw) solid var(--ink);border-left:var(--bw) solid var(--ink);background:var(--paper)}
.risk__c{
  grid-column:span 4;border-right:var(--bw) solid var(--ink);border-bottom:var(--bw) solid var(--ink);
  padding:30px 28px 32px;
}
.risk__n{display:block;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2)}
.risk__s{
  display:block;margin-top:16px;font-family:'Unbounded',sans-serif;font-weight:700;
  font-size:clamp(19px,2vw,25px);line-height:1.2;letter-spacing:-.02em;
}
.risk__c p{margin-top:16px;color:var(--mut);font-size:15px}
.risk__c--hard{background:var(--ul);color:#fff}
.risk__c--hard .risk__n{color:rgba(255,255,255,.7)}
.risk__c--hard p{color:rgba(255,255,255,.88)}
.risk__c--rule{background:#EEF0FE}
.risk__c--rule p:first-of-type{margin-top:16px;color:var(--ink);font-size:16px}
.risk__c--rule em{font-style:normal;font-weight:700;color:var(--ul)}
.risk__hint{font-size:14px !important;color:var(--mut) !important}

/* ── ПАНОРАМА ─────────────────────────────────────────── */
.pano{background:var(--ink)}
.pano img{width:100%;max-height:380px;object-fit:cover}
.pano__cap{padding:16px 0 18px;color:#9EA5AF;font-size:13px}

/* ── ПОРЯДОК ОБРАЩЕНИЯ ────────────────────────────────── */
.route{border-top:var(--bw) solid var(--ink);border-left:var(--bw) solid var(--ink);background:var(--paper)}
.route__c{
  grid-column:span 3;border-right:var(--bw) solid var(--ink);border-bottom:var(--bw) solid var(--ink);
  padding:26px 24px 30px;
}
.route__n{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:var(--bw) solid var(--ink);border-radius:50%;
  font-family:'Unbounded',sans-serif;font-size:14px;font-weight:700;margin-bottom:20px;
}
.route__c h3{font-size:18px}
.route__c p{margin-top:11px;color:var(--mut);font-size:14.5px}
.route__ph{grid-column:1/-1;border-right:var(--bw) solid var(--ink);border-bottom:var(--bw) solid var(--ink)}
.route__ph img{width:100%;max-height:300px;object-fit:cover}

.note{margin-top:36px}
.note p{
  grid-column:1/-1;background:var(--paper);border-left:3px solid var(--ul);
  padding:22px 26px;font-size:15.5px;color:var(--mut);
}
.note b{color:var(--ink)}
.note em{font-style:normal;font-weight:700;color:var(--ul)}

/* ── ФОРМАТЫ: компактный список ───────────────────────── */
.fmt{border-top:var(--bw) solid var(--ink)}
.fmt__r{
  grid-column:span 6;display:grid;grid-template-columns:210px minmax(0,1fr);
  gap:22px;align-items:center;padding:18px 22px 18px 0;
  border-bottom:var(--bw) solid var(--ink);transition:background .15s;
}
.fmt__r:nth-child(odd){padding-right:44px}
.fmt__r:hover{background:var(--paper)}
.fmt__v{display:flex;align-items:center;justify-content:flex-start;min-height:74px}
.fmt__t h3{font-size:17px}
.fmt__t span{display:block;margin-top:5px;font-size:13.5px;color:var(--mut)}
.fmt__r:hover .fmt__t h3{color:var(--ul)}

/* номерной знак — пропорции по ГОСТ, размер компактный */
.plate{
  --k:1;width:calc(var(--pw) * var(--k));
  background:#fff;color:#0B0C0B;border:2px solid #0B0C0B;border-radius:6px;
  display:flex;overflow:hidden;font-weight:700;letter-spacing:.02em;
  font-family:'Inter',Arial,sans-serif;flex:0 0 auto;
}
.plate--long{--pw:196px;aspect-ratio:520/112}
.plate--sq{--pw:100px;aspect-ratio:290/170;flex-direction:column}
.plate--moto{--pw:88px;aspect-ratio:245/185;flex-direction:column}
.p-main{flex:1;display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--pw) * var(--k) * .152);line-height:1;padding-bottom:.04em}
.p-reg{flex:0 0 21%;border-left:2px solid #0B0C0B;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.06em}
.p-reg b{font-size:calc(var(--pw) * var(--k) * .095);line-height:1}
.p-rus{display:flex;align-items:center;gap:.28em;
  font-size:calc(var(--pw) * var(--k) * .042);font-weight:600;letter-spacing:.03em}
.flag{display:block;width:calc(var(--pw) * var(--k) * .058);aspect-ratio:3/2;
  background:linear-gradient(#fff 0 33.3%,#1B3D8F 33.3% 66.6%,#C8202E 66.6% 100%);border:.5px solid #555}
.p-top{flex:1;display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--pw) * var(--k) * .30);line-height:1}
.p-bot{flex:0 0 42%;border-top:2px solid #0B0C0B;display:flex;align-items:stretch}
.p-let{flex:1;display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--pw) * var(--k) * .24);line-height:1}
.p-reg2{flex:0 0 40%;border-left:2px solid #0B0C0B;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.08em}
.p-reg2 b{font-size:calc(var(--pw) * var(--k) * .15);line-height:1}
.p-reg2 .p-rus{font-size:calc(var(--pw) * var(--k) * .07)}
.p-reg2 .flag{width:calc(var(--pw) * var(--k) * .095)}

/* ── ГДЕ ЗАБРАТЬ ──────────────────────────────────────── */
.ways{border-top:var(--bw) solid var(--ink);border-left:var(--bw) solid var(--ink);background:var(--paper)}
.way,.way__ph{grid-column:span 4;border-right:var(--bw) solid var(--ink);border-bottom:var(--bw) solid var(--ink)}
.way{padding:30px 30px 32px}
.way h3{font-size:21px}
.way p{margin-top:13px;color:var(--mut);font-size:15.5px}
.way__meta{font-size:13.5px !important;color:var(--mut2) !important;margin-top:20px !important;
  padding-top:16px;border-top:1px solid #D5D8DE}
.way__ph{overflow:hidden}
.way__ph img{width:100%;height:100%;object-fit:cover;min-height:230px}
.way__ph--tall img{min-height:300px}
.way--wide{grid-column:span 8;display:flex;flex-direction:column;justify-content:center}
.way--wide h3{font-size:23px}

/* ── FAQ ──────────────────────────────────────────────── */
.qa{row-gap:0;column-gap:0}
.qa__i{grid-column:span 6;border-top:var(--bw) solid var(--ink);padding:24px 44px 28px 0}
.qa__i h3{font-size:18px}
.qa__i p{margin-top:11px;color:var(--mut);font-size:15.5px}

/* ── ФИНАЛ ────────────────────────────────────────────── */
.final{background:var(--ul);color:#fff;padding:76px 0}
.final__in{align-items:center;row-gap:36px}
.final__in > div:first-child{grid-column:1/7}
.final__in .btn{margin-top:34px}
.final__act{grid-column:8/13}
.final .kicker{color:rgba(255,255,255,.7)}
.final__tel{
  display:block;margin-top:16px;font-family:'Unbounded',sans-serif;font-weight:700;
  font-size:clamp(28px,4.2vw,52px);letter-spacing:-.03em;line-height:1.05;
}
.final__tel:hover{color:var(--ink)}
.final__sub{margin-top:20px;color:rgba(255,255,255,.85);max-width:32em;font-size:16px}
.final__act{border:var(--bw) solid rgba(255,255,255,.35)}

/* ── ПОДВАЛ ───────────────────────────────────────────── */
.foot{background:var(--bg);border-top:var(--bw) solid var(--ink);padding:44px 0 72px}
.foot__in{row-gap:28px}
.foot__in > div{grid-column:span 4;padding-right:28px}
.foot p{font-size:13.5px;color:var(--mut);margin-top:10px}
.foot a:hover{color:var(--ul)}
.logo--foot{display:inline-flex}
.foot__fine p{font-size:12px;color:var(--mut2)}

.callbar{display:none}

/* ═══ АДАПТИВ ═══════════════════════════════════════════ */
@media (max-width:1120px){
  .hero__main{grid-column:1/7;padding:44px 36px}
  .hero__ph{grid-column:7/13}
  .risk__c{grid-column:span 6}
  .risk__c--rule{grid-column:1/-1}
  .fmt__r{grid-template-columns:180px minmax(0,1fr)}
}
@media (max-width:940px){
  .grid{width:min(1320px, 100% - 40px)}
  .top__nav{display:none}
  .logo{grid-column:1/8}
  .top__tel{grid-column:8/13}
  .hero{margin-top:32px}
  .hero__main{grid-column:1/-1;border-right:var(--bw) solid var(--ink);border-bottom:0}
  .hero__ph{grid-column:1/-1}
  .strip__c{grid-column:span 6}
  .sec{padding:64px 0}
  .sec__head h2,.sec__head p{grid-column:1/-1}
  .case{grid-template-columns:1fr;gap:8px;padding:24px 22px}
  .case__k{padding-top:0}
  .route__c{grid-column:span 6}
  .fmt__r{grid-column:1/-1;padding-right:0 !important}
  .way,.way__ph,.way--wide{grid-column:span 6}
  .qa__i{grid-column:1/-1;padding-right:0}
  .final__in > div:first-child,.final__act{grid-column:1/-1}
  .foot__in > div{grid-column:span 6}
  .callbar{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--ul);color:#fff;text-align:center;font-weight:600;font-size:16px;
    padding:16px;border-top:var(--bw) solid var(--ink);
  }
  .foot{padding-bottom:96px}
}
@media (max-width:640px){
  body{font-size:16px}
  .grid{width:min(1320px, 100% - 28px)}
  .hero__main{padding:34px 22px 36px}
  .strip__c{grid-column:1/-1;padding:20px 22px}
  .risk__c{grid-column:1/-1;padding:26px 22px}
  .route__c{grid-column:1/-1}
  .way,.way__ph,.way--wide{grid-column:1/-1}
  .way{padding:26px 22px}
  .fmt__r{grid-template-columns:1fr;gap:14px;padding:20px 0}
  .foot__in > div{grid-column:1/-1;padding-right:0}
}
@media (max-width:380px){
  .plate{--k:.86}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
}