/* U3 — «Протокол» · mobile-first, светлый холст + ультрамарин.
   База 390 px. Одна колонка, контент-колонка 560 px по центру на больших экранах.
   Общий стиль связки для всех 12 страниц. Дизайн-система: ../DESIGN-SYSTEM.md */

:root{
  --paper:#F5F4F0;
  --paper-2:#FFFEFB;
  --paper-3:#ECEAE3;
  --ink:#14161C;
  --ink-2:#4A4E57;
  --ink-3:#5F646D;  /* подписи, 5,4:1 на холсте — было #7E838D и давало 3,46:1 при норме 4,5 */
  --ink-4:#6B7079;  /* моно-номера и маркеры, 4,52:1 — было #9A9EA6 и 2,44:1 */
  --line:#E4E2DA;
  --line-2:#D2D0C6;

  --accent:#2743E8;
  --accent-ink:#1B32C4;
  --accent-soft:#A9B6FF;
  --on-accent:#fff;

  --dark:#14161C;
  --dark-2:#1A1D25;
  --dark-3:#0F1116;
  --dark-line:rgba(251,251,249,.12);
  --on-dark:#FBFBF9;
  --on-dark-2:rgba(251,251,249,.66);

  --hdr:clamp(58px,6vw,72px);                 /* высота липкой шапки, она же смещение якорей */
  --pad:max(18px, calc((100% - 1180px) / 2)); /* боковое поле = центрирование колонки 1180 */
  --sec:clamp(34px,4.6vw,88px);
  --r:4px;
  --col:1180px;

  --display:"Wix Madefor Display","Segoe UI",sans-serif;
  --sans:"Commissioner",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}
/* якорь не должен уезжать под липкую шапку: замер показывал 59px скрытого заголовка */
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 14px)}
body{
  margin:0;
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-bottom:86px;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
::selection{background:#C9D2FF;color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:100}
.skip:focus{left:12px;top:12px;padding:12px 16px;min-height:44px;background:var(--accent);color:var(--on-accent);border-radius:var(--r)}

/* ---------- типографика ---------- */
h1,h2,h3{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.03em}
h1{max-width:20ch;font-size:clamp(30px,5.6vw,64px);line-height:1.05;letter-spacing:-.035em;text-wrap:balance}
h2{max-width:26ch;font-size:clamp(23px,3.3vw,42px);line-height:1.1;letter-spacing:-.032em;text-wrap:balance}
h3{font-size:17px;font-weight:700;letter-spacing:-.02em}
p{margin:0}
.lead{max-width:60ch;font-size:clamp(16px,1.2vw,19px);line-height:1.6;color:var(--ink-2)}
.note{font-size:13px;line-height:1.55;color:var(--ink-3)}
.kicker{display:block;margin:0 0 12px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.statement{max-width:54ch;font-family:var(--display);font-weight:600;font-size:clamp(18px,1.7vw,26px);line-height:1.35;letter-spacing:-.025em}

/* ---------- шапка ---------- */
/* фон непрозрачный: backdrop-filter на липкой шапке поверх фото фризит GPU на среднем
   Android, а дизайн-система размытия не описывает — только «фон, высота, волосинка» */
.hdr{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:12px;height:var(--hdr);padding:0 var(--pad)}
.logo{display:flex;align-items:baseline;gap:8px;min-height:44px;align-self:center}
.logo b{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.035em}
.logo span{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.hdr__geo{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}

/* ---------- кнопки ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:56px;padding:16px 24px;border:1px solid transparent;border-radius:100px;
  background:var(--accent);color:var(--on-accent);cursor:pointer;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;
}
.btn:hover{background:var(--accent-ink);color:var(--on-accent)}
.btn--ghost{min-height:54px;padding:15px 24px;background:var(--paper-2);color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--paper-2);color:var(--ink);border-color:var(--accent)}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.cta .btn{flex:1 1 260px;padding-left:28px;padding-right:28px}
.cta .btn--ghost{min-height:56px}

/* ---------- секции ---------- */
.sec{padding:var(--sec) var(--pad)}
.sec--light{background:var(--paper-2);border-top:1px solid #EAE8E0;border-bottom:1px solid #EAE8E0}
.sec--dark{background:var(--dark);position:relative;overflow:hidden}
.sec--dark::before{content:"";position:absolute;inset:0;background:radial-gradient(85% 55% at 18% 0%,rgba(39,67,232,.34) 0%,rgba(39,67,232,0) 72%)}
.sec--dark>*{position:relative}
.sec--dark h2{color:var(--on-dark)}
.sec--dark .kicker{color:var(--accent-soft)}
.sec--dark .lead{color:var(--on-dark-2)}
.sec--flush{padding-left:0;padding-right:0}
.sec--flush .sec__hd{padding:0 var(--pad)}

/* ---------- hero ---------- */
.hero{position:relative;display:flex;align-items:flex-start;min-height:clamp(420px,56vh,600px);background:#0D0F14;overflow:hidden}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 46%;filter:grayscale(.18) contrast(1.04)}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(96deg,rgba(13,15,20,.96) 0%,rgba(13,15,20,.86) 34%,rgba(13,15,20,.42) 62%,rgba(13,15,20,.28) 100%)}
.hero__glow{position:absolute;inset:0;background:radial-gradient(70% 60% at 8% 8%,rgba(39,67,232,.34) 0%,rgba(39,67,232,0) 62%)}
.hero__in{position:relative;width:100%;padding:clamp(20px,2.4vw,36px) var(--pad) clamp(30px,3.6vw,56px)}
.hero h1{max-width:18ch;font-size:clamp(29px,4.9vw,60px);line-height:1.04;color:var(--on-dark)}
.tag{display:inline-flex;align-items:center;gap:9px;margin:0 0 clamp(14px,1.6vw,20px);padding:7px 13px;border:1px solid rgba(169,182,255,.34);border-radius:100px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-soft)}
.hero__lead{margin:clamp(16px,2vw,26px) 0 0;max-width:46ch;font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:rgba(251,251,249,.76)}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(22px,2.6vw,34px) 0 0;max-width:600px}
.hero__cta .btn{flex:1 1 240px;padding-left:26px;padding-right:26px}
.btn--dark{flex:1 1 200px;background:transparent;color:var(--on-dark);border-color:rgba(251,251,249,.32)}
.btn--dark:hover{background:rgba(251,251,249,.07);color:var(--on-dark);border-color:var(--accent-soft)}
.hero__micro{margin:clamp(16px,2vw,24px) 0 0;max-width:42ch;font-size:12px;line-height:1.55;color:rgba(251,251,249,.5)}

/* крошка подстраницы — путь назад на главную, живёт в hero-банде */
.crumb{display:flex;align-items:center;gap:9px;margin:0 0 clamp(6px,1vw,12px);font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(251,251,249,.46)}
.crumb a{display:inline-flex;align-items:center;min-height:44px;color:var(--accent-soft)}
.crumb a:hover{color:var(--on-dark)}
.crumb i{font-style:normal;color:rgba(251,251,249,.3)}

.crumb--light{color:var(--ink-3)}
.crumb--light a{color:var(--accent)}
.crumb--light a:hover{color:var(--accent-ink)}
.crumb--light i{color:var(--ink-4)}

/* одиночная кнопка внутри секции не растягивается на всю колонку */
.sec>.btn{max-width:min(100%,380px)}

/* ---------- юридический текст: политика, служебные страницы ---------- */
.legal{max-width:70ch;margin:clamp(22px,3vw,40px) 0 0}
.legal h2{margin:clamp(24px,2.8vw,36px) 0 10px;max-width:none;font-size:17px;font-weight:700;letter-spacing:-.02em}
.legal h2:first-child{margin-top:0}
.legal p{margin:0 0 10px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.legal ul{margin:2px 0 12px;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.legal li{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.55;color:var(--ink-2)}
.legal li::before{content:"—";font-family:var(--mono);color:var(--ink-4)}

/* полоса фактов — заходит на hero */
.stripwrap{padding:0 var(--pad) clamp(30px,4vw,72px)}
.facts{
  list-style:none;margin:0;padding:clamp(18px,2vw,28px) clamp(18px,2vw,30px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(4px,1.4vw,28px);
  background:var(--paper-2);border-radius:var(--r);box-shadow:0 26px 54px -32px rgba(13,15,20,.4);
  transform:translateY(-28px);
}
.facts li{display:flex;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.facts b{flex:0 0 86px;font-family:var(--mono);font-size:9px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.facts span{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.02em}

/* ---------- сравнение ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin-top:clamp(24px,3vw,44px);align-items:start}
.card{padding:clamp(20px,2vw,32px);background:var(--paper-3);border-radius:var(--r)}
.card--dark{background:var(--dark)}
.card__hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid #D9D7CD}
.card--dark .card__hd{border-bottom-color:rgba(251,251,249,.16)}
.card--dark .card__hd h3{color:var(--on-dark)}
.card__tag{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.card--dark .card__tag{color:var(--accent-soft)}
.card ul{list-style:none;margin:0;padding:0}
.card li{padding:11px 0;border-bottom:1px solid #DEDCD2;font-size:15px;color:#5A5E67}
.card li:last-child{border-bottom:0}
.card--dark li{display:flex;gap:12px;border-bottom-color:rgba(251,251,249,.1);color:var(--on-dark)}
.card--dark li::before{content:"+";font-family:var(--mono);color:var(--accent-soft)}
.gap__close{margin-top:clamp(22px,3vw,44px)}

/* ---------- аккордеон ---------- */
.acc{margin-top:clamp(22px,3vw,44px);border-top:1px solid var(--line)}
.acc__i{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%;min-height:60px;display:flex;align-items:center;gap:12px;padding:16px 0;
  background:none;border:0;cursor:pointer;text-align:left;color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:clamp(16px,1.35vw,21px);letter-spacing:-.02em;
}
.acc__btn .n{font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.1em;color:var(--ink-4)}
.acc__btn .mark{margin-left:auto;display:inline-block;font-family:var(--mono);font-size:17px;color:var(--accent);transition:transform .2s}
.acc__i[data-open] .mark{transform:rotate(45deg)}
.acc__ev{font-family:var(--mono);font-size:8px;font-weight:500;letter-spacing:.1em;color:var(--on-accent);background:var(--accent);border-radius:2px;padding:3px 6px;white-space:nowrap}
.acc__body{display:none;padding:0 0 18px 32px;max-width:70ch;font-size:15px;line-height:1.6;color:var(--ink-2)}
.acc__i[data-open] .acc__body{display:block}
.faq .acc__btn{min-height:58px;font-weight:600;font-size:clamp(15px,1.25vw,19px);letter-spacing:-.015em}
.faq .acc__body{padding-left:0}

/* ---------- отзывы ---------- */
.evid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(20px,3vw,52px);margin:clamp(24px,3vw,44px) 0 0;align-items:start}
.rev--lead{margin:0;padding:0}
.rev--lead p{font-family:var(--display);font-weight:600;font-size:clamp(19px,2.1vw,30px);line-height:1.32;letter-spacing:-.025em;color:var(--on-dark)}
.rev--sec{margin:clamp(22px,2.6vw,32px) 0 0;padding:clamp(18px,2vw,26px);background:var(--dark-2);border-radius:var(--r);border-left:2px solid var(--accent)}
.rev--sec p{font-size:15px;line-height:1.6;color:rgba(251,251,249,.8)}
.rev cite{display:block;margin-top:14px;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-soft)}
.rev--sec cite{color:var(--on-dark-2)}  /* карточка тёмная: светлый токен, иначе 2,8:1 */
.revshot{margin:clamp(22px,2.6vw,40px) calc(-1 * var(--pad)) 0}
.revshot__scroll{overflow-x:auto;max-height:min(78vh,900px);background:#fff;scrollbar-width:none}
.revshot__scroll::-webkit-scrollbar{display:none}
.revshot img{min-width:760px;width:100%;height:auto}
.revshot figcaption{padding:12px var(--pad) clamp(22px,3vw,44px);font-size:12px;line-height:1.5;color:var(--ink-3)}

.revshots{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px)}
.revshots figure{margin:0;padding:10px;background:var(--paper-2);border-radius:var(--r)}
.revshots img{width:100%;height:auto;border-radius:2px;background:var(--paper-3)}
.revshots__cap{margin:0;font-size:12px;line-height:1.5;color:#8A8F99}
.sec--dark#evidence{padding-bottom:clamp(34px,4.6vw,88px)}

/* кадры с осмотра */
.frames{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(12px,1.6vw,20px);margin:clamp(22px,2.6vw,36px) 0 0}
.frames figure{margin:0}
.frames img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);background:var(--paper-3)}
.frames figcaption{margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* направления — ссылки на подстраницы */
.pages{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(12px,1.6vw,22px);margin:clamp(22px,3vw,44px) 0 0}
.pages a{display:block}
.pages img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;border-radius:var(--r);background:var(--paper-3);transition:opacity .2s}
.pages a:hover img{opacity:.88}
.pages b{display:block;margin-top:12px;font-family:var(--display);font-weight:700;font-size:clamp(16px,1.3vw,20px);letter-spacing:-.025em}
.pages span{display:block;margin-top:5px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.pagelinks{list-style:none;margin:clamp(22px,2.6vw,36px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 clamp(20px,3vw,44px);border-top:1px solid var(--line)}
.pagelinks li{border-bottom:1px solid var(--line)}
.pagelinks a{display:flex;align-items:center;gap:12px;min-height:56px;padding:14px 0;font-size:15px}
.pagelinks i{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:13px;color:var(--accent)}

/* ---------- точка решения ---------- */
.steps{list-style:none;margin:clamp(24px,3vw,44px) 0 0;padding:0;max-width:820px;display:flex;flex-direction:column;gap:2px}
.steps li{display:flex;gap:14px;align-items:baseline;padding:16px 18px;background:var(--paper-2);border-radius:3px}
.steps b{font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.12em;color:var(--ink-4)}
.steps span{font-size:15px;color:var(--ink-2)}
.steps li[data-on]{flex-direction:column;gap:8px;padding:20px 18px;background:var(--accent)}
.steps li[data-on] b{text-transform:uppercase;color:rgba(255,255,255,.75)}
.steps li[data-on] span{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.25;letter-spacing:-.025em;color:#fff}

/* ---------- договор ---------- */
.doc{list-style:none;margin:clamp(22px,3vw,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 clamp(20px,3vw,44px);border-top:1px solid var(--line)}
.doc li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5}
.doc li:last-child{border-bottom:0}
.doc b{font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.1em;color:var(--ink-4);padding-top:3px}
.doc__cta{margin-top:20px}

/* ---------- границы проверки ---------- */
.limitsgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(24px,3vw,52px);margin-top:clamp(22px,3vw,44px);align-items:start}
.limits h3{margin:0 0 4px;font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.limits--no h3{color:var(--ink-4)}
.limits ul{list-style:none;margin:0;padding:0}
.limits li{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.55}
.limits li::before{content:"✓";font-family:var(--mono);color:var(--accent)}
.limits--no li{color:#5A5E67}
.limits--no li::before{content:"—";color:#B9BCC2}

/* ---------- галерея ---------- */
.cars{margin:clamp(22px,3vw,44px) 0 0;display:flex;gap:clamp(10px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:0 var(--pad);scrollbar-width:none}
.cars::-webkit-scrollbar{display:none}
.cars figure{margin:0;flex:0 0 min(86%,380px);scroll-snap-align:center}
.cars img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);background:var(--paper-3)}
.cars figcaption{margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:#5A5E67}

/* ---------- форма ---------- */
.form{margin:clamp(24px,3vw,44px) 0 0;max-width:620px;display:flex;flex-direction:column;gap:16px}
.form label{display:block;margin:0 0 8px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#8A8F99}
.form input,.form textarea{width:100%;min-height:54px;padding:14px 15px;font-family:var(--sans);font-size:16px;color:var(--on-dark);background:var(--dark-2);border:1px solid #2E323C;border-radius:3px}
.form textarea{min-height:96px;resize:vertical}
.form input[type=tel]{font-family:var(--mono)}
.form input::placeholder,.form textarea::placeholder{color:#8A8F99}
.form input:focus,.form textarea:focus{border-color:var(--accent);outline:none}
.agree{display:flex;gap:12px;align-items:flex-start}
.agree input{width:22px;height:22px;min-height:22px;flex:0 0 22px;margin-top:2px;accent-color:var(--accent)}
.agree label{margin:0;font-family:var(--sans);font-size:13px;line-height:1.5;letter-spacing:0;text-transform:none;color:#8A8F99}
.form .note{color:#8A8F99;font-size:12px}
.form .err{margin:8px 0 0;font-size:13px;line-height:1.45;color:#FFA79A}
.form [aria-invalid="true"]{border-color:#FFA79A}
.agree .err{flex:1 0 100%;margin-top:2px}
.form .btn{min-height:58px}

/* ---------- подвал ---------- */
.ft{background:var(--dark-3);color:#8A8F99;padding:clamp(30px,3.6vw,64px) var(--pad) clamp(34px,4vw,64px);font-size:14px}
.ft__top{display:flex;align-items:baseline;gap:9px;padding-bottom:22px;border-bottom:1px solid var(--dark-line)}
.ft__top b{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.035em;color:var(--on-dark)}
.ft__top span{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase}
.ft__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px clamp(24px,3vw,48px);padding-top:22px}
.ft b.h{display:block;margin:0 0 10px;font-family:var(--mono);font-weight:400;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#8A8F99}
.ft p{margin:0 0 6px;color:#B4B8C0}
.ft a{color:#B4B8C0;border-bottom:1px solid rgba(180,184,192,.35)}

/* ---------- липкая кнопка ---------- */
.sticky{
  position:fixed;left:50%;bottom:0;width:100%;max-width:640px;z-index:50;
  transform:translate(-50%,110%);transition:transform .24s ease;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(245,244,240,.96);border-top:1px solid var(--line);
}
.sticky[data-on]{transform:translate(-50%,0)}
.sticky .btn{min-height:54px}

/* ---------- появление секций ---------- */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.16,.84,.24,1),transform .7s cubic-bezier(.16,.84,.24,1)}
[data-reveal][data-in]{opacity:1;transform:none}

@media (min-width:900px){
  .sticky{display:none}
  body{padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}
}