/* Локальные копии Google Fonts — сайт работает в закрытом контуре без внешней сети. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-500-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-400-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-500-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/manrope-600-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/manrope-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/manrope-700-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/manrope-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/manrope-800-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/manrope-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ═══════════════════════════════════════════════════════════════════════
   miren.site — оформление
   Палитра и типографика: docs/HANDOFF-GEO-SITE-2026-08-05.md §6.
   Акцент (охра) — только тонкие линии, номера секций, ховер, статус.
   Все анимации — transform/opacity, выключаются prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --ink:#12161A;
  --slate:#17313A;
  --paper:#F5F3EF;
  --surface:#FFFFFF;
  --line:#E3DFD8;
  --muted:#6E7580;

  /* производные от --muted/--accent: те же цвета, доведённые до контраста 4.5:1 */
  --muted-t:#5F6670;      /* вторичный текст на светлом — 5.2:1 к --paper */
  --muted-d:#9BA4AF;      /* вторичный текст на тёмном  — 7.3:1 к --ink   */
  --accent:#C5793B;
  --accent-ink:#9A5624;
  --accent-lt:#D79255;
  --accent-btn:#A85F29;
  --accent-btn-h:#8F4E20;

  --ok:#4A6B52;   --ok-d:#7FA98A;
  --wip:#8A6A2F;  --wip-d:#C0A053;
  --plan:#6E7580; --plan-d:#9BA4AF;

  --line-d:rgba(255,255,255,.14);
  --fill-d:rgba(255,255,255,.05);

  --wrap:1200px;
  --pad:24px;
  --sec-y:96px;
  --r:4px;

  --f-h:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-b:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-m:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:260ms;
}

@media (min-width:1024px){ :root{ --pad:48px; --sec-y:160px } }

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.6 var(--f-b);
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (min-width:768px){ body{ font-size:18px } }

img{ max-width:100%; height:auto; display:block }
a{ color:inherit }
button{ font:inherit; color:inherit }

::selection{ background:var(--accent); color:#fff }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}
.sec--dark :focus-visible,.sec--cap :focus-visible,.hero :focus-visible,.hdr :focus-visible{
  outline-color:var(--accent-lt);
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:12px 20px; text-decoration:none;
}
.skip:focus{ left:0 }

/* ── типографика ─────────────────────────────────────────────────────── */

.h2{
  font:700 clamp(28px,4.4vw,46px)/1.15 var(--f-h);
  letter-spacing:-.02em;
  margin:0;
  max-width:20ch;
  text-wrap:balance;
}
h3{ font-family:var(--f-h); letter-spacing:-.01em }

.eyebrow{
  font:500 12px/1.4 var(--f-m);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted-t);
  margin:0 0 20px;
}
.eyebrow--light{ color:var(--accent-lt) }

.num{
  font:500 clamp(30px,4vw,44px)/1 var(--f-m);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.num small{ font-size:.5em; font-weight:400 }

/* ── каркас ──────────────────────────────────────────────────────────── */

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad) }

.sec{ padding-block:var(--sec-y); position:relative }
.sec--paper{ background:var(--paper) }
.sec--dark{ background:var(--ink); color:var(--paper) }
.sec--cap{ background:var(--slate); color:var(--paper) }
.sec--dark .h2,.sec--cap .h2{ color:var(--paper) }

/* Топографический фон связывает светлые паузы с предметной областью. */
.sec--topo{ overflow:hidden; isolation:isolate }
.sec--topo::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url(img/topography.svg) right center/auto 112% no-repeat;
  opacity:.46;
  -webkit-mask-image:linear-gradient(90deg,transparent 8%,rgba(0,0,0,.18) 38%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 8%,rgba(0,0,0,.18) 38%,#000 100%);
}
.sec--topo-b::before{
  background-position:left 44%; transform:scaleX(-1);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.18) 62%,transparent 94%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.18) 62%,transparent 94%);
}
.sec--topo>.wrap{ position:relative; z-index:1 }

.sechead{ margin-bottom:56px; position:relative }
@media (min-width:1024px){ .sechead{ margin-bottom:72px } }

.secnum{
  display:block;
  font:500 13px/1 var(--f-m);
  font-variant-numeric:tabular-nums;
  letter-spacing:.1em;
  color:var(--accent-ink);
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
  width:44px;
}
.sec--dark .secnum,.sec--cap .secnum{ color:var(--accent-lt); border-bottom-color:var(--line-d) }

.sechead__lead{
  margin:24px 0 0;
  max-width:68ch;
  color:var(--muted-t);
  font-size:1.0625rem;
}
.sec--dark .sechead__lead,.sec--cap .sechead__lead{ color:var(--muted-d) }

.grid{ display:grid; gap:24px }
.grid--3{ grid-template-columns:1fr }
@media (min-width:768px){ .grid--3{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .grid--3{ grid-template-columns:repeat(3,1fr); gap:32px } }

.wrap--split{ display:grid; gap:48px; align-items:center }
@media (min-width:1024px){
  .wrap--split{ grid-template-columns:1fr 1fr; gap:80px }
  .wrap--split-rev .split__media{ order:-1 }
  /* Текст в «Безопасности» длиннее фотографии — не центрируем её в пустоте,
     а прикалываем к верху и ведём вместе со скроллом. */
  .sec--sec .wrap--split{ align-items:start }
  .sec--sec .split__media{ position:sticky; top:104px }
}
.split__media{ margin:0 }
.split__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r) }
.media-caption{
  display:grid; gap:5px; margin-top:14px; padding:14px 16px;
  border:1px solid var(--line-d); background:rgba(255,255,255,.04);
  font:500 11px/1.4 var(--f-m); letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-lt);
}
.media-caption strong{ color:var(--paper); font-size:12px; letter-spacing:.02em }

.privacy-flow{
  display:grid; gap:18px; margin-top:80px; padding-top:48px;
  border-top:1px solid var(--line-d);
}
@media (min-width:960px){
  .privacy-flow{ grid-template-columns:1fr 72px 1fr 72px 1fr; align-items:stretch }
}
.flow-node{
  min-height:190px; padding:26px 24px; display:flex; flex-direction:column;
  border:1px solid var(--line-d); background:rgba(255,255,255,.045);
  position:relative; overflow:hidden;
}
.flow-node--client{ background:linear-gradient(140deg,rgba(98,181,210,.13),rgba(255,255,255,.035)) }
.flow-node--gate{ border-color:rgba(215,146,85,.42) }
.flow-kicker{ font:500 11px/1.3 var(--f-m); letter-spacing:.08em; text-transform:uppercase; color:var(--accent-lt) }
.flow-node strong{ margin-top:26px; font:700 19px/1.25 var(--f-h); color:var(--paper) }
.flow-node small{ margin-top:10px; color:var(--muted-d); line-height:1.45 }
.flow-node i{ margin-top:auto; padding-top:18px; color:var(--accent-lt); font:400 11px/1.35 var(--f-m); font-style:normal }
.flow-arrow{ min-height:36px; display:grid; place-items:center; position:relative }
.flow-arrow::before{ content:""; width:100%; height:1px; background:var(--line-d) }
.flow-arrow b{
  position:absolute; width:9px; height:9px; border-radius:50%; background:var(--accent-lt);
  box-shadow:0 0 16px rgba(98,181,210,.9); animation:dataflow 2.2s ease-in-out infinite;
}
@keyframes dataflow{ 0%,100%{ transform:translateX(-24px); opacity:0 } 25%,75%{ opacity:1 } 100%{ transform:translateX(24px); opacity:0 } }
.flow-return{ margin:22px 0 0; text-align:center; color:var(--muted-d); font:400 12px/1.5 var(--f-m) }

/* ── шапка ───────────────────────────────────────────────────────────── */

.hdr{
  position:fixed; inset:0 0 auto; z-index:100;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(18,22,26,.92);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--line-d);
}
.hdr__in{
  max-width:var(--wrap); margin-inline:auto;
  padding:16px var(--pad);
  display:flex; align-items:center; gap:24px;
  color:var(--paper);
}

.brand{
  display:inline-flex; align-items:center; gap:10px;
  min-height:44px;
  font:800 15px/1 var(--f-h); letter-spacing:.06em;
  text-decoration:none; margin-right:auto;
}
.brand__mark{
  width:34px; height:34px; flex:none;
  background:url(img/miren-mark-e2.svg) center/contain no-repeat;
}
.brand__sub{ color:var(--accent-lt); font-weight:600 }

.nav{ display:none; gap:28px }
.nav a{
  display:inline-flex; align-items:center; min-height:44px;
  text-decoration:none; font-size:15px; color:var(--paper);
  position:relative;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:1px;
  background:var(--accent-lt);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.nav a:hover::after,.nav a:focus-visible::after{ transform:scaleX(1) }
@media (min-width:1120px){ .nav{ display:flex } }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 26px;
  background:var(--accent-btn); color:#fff;
  font:600 15px/1 var(--f-h); letter-spacing:.01em;
  text-decoration:none; border:1px solid var(--accent-btn); border-radius:var(--r);
  cursor:pointer;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn:hover{ background:var(--accent-btn-h); border-color:var(--accent-btn-h) }
.btn:active{ transform:translateY(1px) }
.btn--ghost{ background:transparent; color:var(--paper); border-color:var(--line-d) }
.btn--ghost:hover{ background:rgba(255,255,255,.08); border-color:var(--paper) }
.btn--sm{ min-height:44px; padding:0 18px; font-size:14px; display:none }
@media (min-width:1120px){ .btn--sm{ display:inline-flex } }
.btn--wide{ width:100%; min-height:52px }

.burger{
  width:44px; height:44px; flex:none;
  display:grid; place-content:center; gap:6px;
  background:none; border:1px solid var(--line-d); border-radius:var(--r);
  cursor:pointer;
}
.burger span{
  display:block; width:18px; height:1.5px; background:var(--paper);
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg) }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg) }
@media (min-width:1120px){ .burger{ display:none } }

/* мобильное меню */
@media (max-width:1119px){
  .nav.is-open{
    display:flex; flex-direction:column; gap:0;
    position:fixed; inset:73px 0 auto;
    background:rgba(18,22,26,.98);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line-d);
    padding:8px var(--pad) 24px;
  }
  .nav.is-open a{
    padding:14px 0; min-height:44px;
    border-bottom:1px solid var(--line-d);
    display:flex; align-items:center;
  }
  .nav.is-open a:last-child{ border-bottom:none }
}

/* ── герой ───────────────────────────────────────────────────────────── */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:104px 0 88px;
  color:var(--paper);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:0 }
.hero__media img,.hero__media video{
  width:100%; height:118%;
  object-fit:cover; object-position:center 40%;
  will-change:transform;
}
.hero__media video{ position:absolute; inset:0; height:100%; object-position:center; z-index:1 }
.hero__media picture{ position:absolute; inset:0; z-index:0 }
.hero__scrim{ z-index:2 }
/* Затемнение: без него белый текст проваливается на светлой части снимка. */
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(18,22,26,.86) 0%,rgba(18,22,26,.62) 42%,rgba(18,22,26,.90) 100%),
    linear-gradient(90deg,rgba(18,22,26,.80) 0%,rgba(18,22,26,.30) 68%,rgba(18,22,26,.45) 100%);
}
.hero__in{
  position:relative; z-index:1;
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--pad);
}

/* Каждая .ln — отдельная строка заголовка; ширины хватает, чтобы самая длинная
   («Они заперты в отчётах,») не ломалась пополам на десктопе. */
.hero__h1{
  font:800 clamp(33px,6.2vw,70px)/1.07 var(--f-h);
  letter-spacing:-.035em;
  margin:0 0 24px;
  max-width:23ch;
}
.hero__h1 .ln{ display:block }
.hero__h1 .ln--accent{ color:var(--accent-lt) }
@media (max-width:420px){ .hero__h1{ font-size:31px } }

.hero__lead{
  max-width:62ch;
  margin:0 0 36px;
  font-size:1.0625rem;
  color:#DDE1E6;
}
.hero__lead p{ margin:0 0 12px }
.hero__lead p:last-child{ margin-bottom:0 }
@media (min-width:768px){ .hero__lead{ font-size:1.125rem } }

.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:44px }

.hero__stats{
  display:grid; gap:24px;
  margin:0;
  padding-top:28px;
  border-top:1px solid var(--line-d);
  max-width:860px;
}
@media (min-width:768px){ .hero__stats{ grid-template-columns:repeat(3,1fr); gap:32px } }
.hero__stats dt{ color:var(--accent-lt); margin-bottom:8px }
.hero__stats dd{ margin:0; font-size:14px; line-height:1.45; color:#C8CDD4; max-width:26ch }
.hero__stats em,.metrics em{
  display:block; margin-top:8px;
  font:400 11px/1.4 var(--f-m);
  letter-spacing:.04em;
  font-style:normal;
  color:var(--muted-d);
}

.hero__scroll{
  position:absolute; left:50%; bottom:28px; z-index:1;
  width:44px; height:44px; margin-left:-22px;
  display:grid; place-content:center;
}
.hero__scroll span{
  display:block; width:10px; height:10px;
  border:solid var(--paper); border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);
  animation:nudge 2.4s var(--ease) infinite;
}
@keyframes nudge{ 0%,60%,100%{ transform:rotate(45deg) translate(0,0) } 30%{ transform:rotate(45deg) translate(4px,4px) } }

.video-toggle{
  position:absolute; right:max(var(--pad),calc((100vw - var(--wrap))/2 + var(--pad))); bottom:28px; z-index:3;
  width:44px; height:44px; display:grid; place-items:center;
  color:var(--paper); background:rgba(18,22,26,.58); border:1px solid var(--line-d);
  border-radius:var(--r); backdrop-filter:blur(8px); cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform 140ms var(--ease);
}
.video-toggle:hover{ background:rgba(18,22,26,.82); border-color:rgba(255,255,255,.34) }
.video-toggle:active{ transform:translateY(1px) }
.video-toggle__icon{ width:13px; height:14px; position:relative; display:block }
.video-toggle__icon::before,.video-toggle__icon::after{
  content:""; position:absolute; top:0; width:3px; height:14px; background:currentColor;
  transition:opacity 140ms var(--ease);
}
.video-toggle__icon::before{ left:1px }
.video-toggle__icon::after{ right:1px }
.video-toggle[aria-pressed="true"] .video-toggle__icon::before{
  left:2px; width:0; height:0; background:none;
  border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:11px solid currentColor;
}
.video-toggle[aria-pressed="true"] .video-toggle__icon::after{ opacity:0 }

/* Полноширинный пример: реальная сцена + очень сдержанный слой данных. */
.showcase{
  min-height:min(820px,88svh); position:relative; display:flex; align-items:flex-end;
  color:var(--paper); overflow:hidden; background:var(--slate);
}
.showcase__media,.showcase__shade{ position:absolute; inset:0 }
.showcase__media img{ width:100%; height:100%; object-fit:cover }
.showcase__shade{ background:linear-gradient(90deg,rgba(11,24,29,.94) 0%,rgba(11,24,29,.62) 44%,rgba(11,24,29,.12) 78%),linear-gradient(0deg,rgba(11,24,29,.75),transparent 55%) }
.showcase__in{ position:relative; z-index:1; padding-block:72px; display:grid; gap:44px }
.showcase__copy{ max-width:610px }
.showcase__copy .h2{ max-width:15ch; color:var(--paper) }
.showcase__copy>p:last-child{ max-width:54ch; margin:24px 0 0; color:#C6D3D8 }
.showcase__hud{
  width:min(100%,440px); padding:18px; display:grid; grid-template-columns:88px 1fr 8px; gap:13px 14px;
  border:1px solid rgba(98,181,210,.34); background:rgba(10,30,36,.64); backdrop-filter:blur(12px);
  font:500 10px/1.25 var(--f-m); letter-spacing:.06em;
}
.showcase__hud span{ color:var(--accent-lt) }
.showcase__hud b{ font-weight:500; color:#E8F2F4 }
.showcase__hud i{ width:6px; height:6px; border-radius:50%; background:#62B5D2; box-shadow:0 0 10px #62B5D2 }
@media (min-width:900px){
  .showcase__in{ grid-template-columns:1fr auto; align-items:end; padding-block:100px }
}

/* ── карточки, списки, врезки ────────────────────────────────────────── */

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:32px 28px;
  position:relative;
}
.card::before{
  content:""; position:absolute; inset:-1px auto auto -1px;
  width:calc(100% + 2px); height:2px; background:var(--accent);
  transform:scaleX(.13); transform-origin:left;
  transition:transform 320ms var(--ease);
}
.card--plain{ background:transparent; border:none; padding:0 0 0 24px; border-left:1px solid var(--line) }
.card--plain::before{ display:none }
.card__t{ font-size:1.25rem; font-weight:700; margin:0 0 12px }
.card p{ margin:0; color:var(--muted-t) }

.problem .card__t{ color:var(--accent-ink) }

@media (hover:hover){
  .card:not(.card--plain){ transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease) }
  .card:not(.card--plain):hover{ transform:translateY(-3px); border-color:#D1C8BC }
  .card:not(.card--plain):hover::before{ transform:scaleX(1) }
}

.pull{
  margin:56px 0 0;
  padding-top:32px;
  border-top:1px solid var(--line);
  font:600 clamp(20px,2.6vw,28px)/1.35 var(--f-h);
  letter-spacing:-.01em;
  max-width:24ch;
}

.stack{ display:grid; gap:32px }
.feat{ padding-left:24px; border-left:1px solid var(--line-d) }
.feat__t{ font-size:1.125rem; font-weight:700; margin:0 0 10px; color:var(--paper) }
.feat p{ margin:0; color:var(--muted-d); font-size:1rem }

.note{
  margin:48px 0 0;
  padding-left:20px;
  border-left:2px solid var(--accent);
  max-width:76ch;
  font-size:.9375rem;
  color:var(--muted-t);
}
.note--light{ color:var(--muted-d); border-left-color:var(--accent-lt); margin-top:32px }

/* ── легенда и статусы ───────────────────────────────────────────────── */

.legend{
  list-style:none; margin:28px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:12px 28px;
  font-size:13px; color:var(--muted-d);
}
.legend li{ display:flex; align-items:center; gap:8px }
.dot{ width:8px; height:8px; border-radius:50%; flex:none }
.dot--live{ background:var(--ok-d) }
.dot--wip{ background:var(--wip-d) }
.dot--plan{ background:var(--plan-d) }

.st{
  align-self:start;
  font:500 11px/1 var(--f-m);
  letter-spacing:.08em; text-transform:uppercase;
  padding:6px 10px; border-radius:2px;
  border:1px solid currentColor;
  white-space:nowrap;
}
.st-live .st{ color:var(--ok-d) }
.st-wip .st{ color:var(--wip-d) }
.st-plan .st{ color:var(--plan-d) }

/* ── табы «Возможности» ──────────────────────────────────────────────── */

.tabs__bar{
  display:flex; gap:4px;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
  border-bottom:1px solid var(--line-d);
  margin-bottom:40px;
  position:relative;
}
.tabs__bar::-webkit-scrollbar{ display:none }
.tab:disabled{ cursor:default; opacity:.62 }
.tab:disabled:hover{ color:inherit }

.tab{
  flex:none;
  min-height:48px; padding:0 18px;
  background:none; border:none; border-bottom:2px solid transparent;
  font:600 15px/1 var(--f-h);
  color:var(--muted-d);
  cursor:pointer; white-space:nowrap;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.tab:hover{ color:var(--paper) }
.tab[aria-selected="true"]{ color:var(--paper); border-bottom-color:var(--accent-lt) }

.tabs__title{ display:none }

.tabs__panel{ animation:fade var(--dur) var(--ease) }
@keyframes fade{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

.cap{
  background:var(--fill-d);
  border:1px solid var(--line-d);
  border-radius:var(--r);
  padding:24px 22px;
  display:flex; flex-direction:column; gap:12px;
}
.cap h3{ font-size:1.0625rem; font-weight:700; margin:0; color:var(--paper) }
.cap p{ margin:0; flex:1; font-size:.9375rem; line-height:1.55; color:var(--muted-d) }

/* ── форматы обмена ──────────────────────────────────────────────────── */

.fmt{ border-top:1px solid var(--line) }
.fmt__row{
  display:grid; gap:8px 24px;
  grid-template-columns:1fr auto;
  align-items:start;
  padding:24px 0;
  border-bottom:1px solid var(--line);
}
@media (min-width:900px){
  .fmt__row{ grid-template-columns:minmax(190px,230px) 1fr 128px; gap:32px; align-items:baseline }
}
.fmt__name{
  font:500 14px/1.4 var(--f-m);
  letter-spacing:.02em;
  color:var(--ink);
}
.fmt__desc{ margin:0; color:var(--muted-t); font-size:.9375rem; grid-column:1/-1 }
@media (min-width:900px){ .fmt__desc{ grid-column:auto } }
.fmt__row .st{ grid-row:1; grid-column:2; justify-self:end }
@media (min-width:900px){ .fmt__row .st{ grid-column:3; justify-self:end } }
/* На светлом фоне берём тёмные варианты статусов: светлые дают < 4.5:1. */
.fmt__row.st-live .st{ color:var(--ok) }
.fmt__row.st-wip .st{ color:var(--wip) }
.fmt__row.st-plan .st{ color:var(--muted-t) }

/* ── кейс ────────────────────────────────────────────────────────────── */

.case{ display:grid; gap:48px }
@media (min-width:1024px){ .case{ grid-template-columns:1.15fr .85fr; gap:64px; align-items:start } }
.case__media{ margin:0 }
.case__media img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--r) }

.ticks{ list-style:none; margin:0 0 40px; padding:0; display:grid; gap:16px }
.ticks li{ position:relative; padding-left:32px; color:#D6DAE0; font-size:1rem }
.ticks li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:12px; height:6px;
  border:solid var(--accent-lt); border-width:0 0 1.5px 1.5px;
  transform:rotate(-45deg);
}

.compare{
  display:grid; gap:20px;
  align-items:center;
  padding:28px;
  border:1px solid var(--line-d); border-radius:var(--r);
  background:var(--fill-d);
}
@media (min-width:560px){ .compare{ grid-template-columns:1fr auto 1fr; gap:24px } }
.compare__col{ display:grid; gap:6px }
.compare__lbl{ font:500 11px/1 var(--f-m); letter-spacing:.1em; text-transform:uppercase; color:var(--muted-d) }
.compare__big{
  font:500 clamp(28px,4vw,38px)/1 var(--f-m);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.compare__big small{ font-size:.45em; font-weight:400 }
.compare__sub{ font-size:13px; line-height:1.45; color:var(--muted-d) }
.compare__col--win .compare__big{ color:var(--accent-lt) }
.compare__arrow{
  width:24px; height:24px; justify-self:center;
  border:solid var(--accent-lt); border-width:1.5px 1.5px 0 0;
  transform:rotate(135deg);
}
@media (min-width:560px){ .compare__arrow{ transform:rotate(45deg) } }
.compare__src{
  grid-column:1/-1;
  font:400 11px/1.4 var(--f-m); font-style:normal; letter-spacing:.04em;
  color:var(--muted-d);
  padding-top:4px;
}

.metrics{
  display:grid; gap:32px;
  margin:64px 0 0; padding-top:40px;
  border-top:1px solid var(--line-d);
}
@media (min-width:640px){ .metrics{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .metrics{ grid-template-columns:repeat(4,1fr) } }
.metrics dt{ color:var(--accent-lt); margin-bottom:10px }
.metrics dd{ margin:0; font-size:14px; line-height:1.5; color:#C8CDD4 }

.metrics--big{
  border-top-color:var(--line);
  margin-top:0;
}
@media (min-width:640px){ .metrics--big{ grid-template-columns:repeat(3,1fr) } }
.metrics--big dt{ color:var(--accent-ink) }
.metrics--big dd{ color:var(--muted-t) }
.metrics--big em{ color:var(--muted-t) }

.chips{
  list-style:none; margin:48px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px;
}
.chips li{
  font:500 12px/1 var(--f-m); letter-spacing:.04em;
  padding:9px 14px; border-radius:100px;
  border:1px solid var(--line-d); color:var(--muted-d);
}

/* ── принципы ────────────────────────────────────────────────────────── */

.steps{
  --shaft-progress:1;
  list-style:none; margin:0; padding:0; counter-reset:s;
  display:flex; flex-direction:column; gap:12px; position:relative; isolation:isolate;
}
.steps::before,.steps::after{
  content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; z-index:-1;
}
.steps::before{ background:var(--line) }
.steps::after{
  background:var(--accent); transform:scaleY(var(--shaft-progress)); transform-origin:top;
  transition:transform 680ms cubic-bezier(.16,1,.3,1);
}
.steps li{
  counter-increment:s;
  width:calc(50% - 52px); padding:32px 0 32px 44px;
  border-top:1px solid var(--line);
  position:relative;
}
.steps li:nth-child(odd){ margin-right:auto }
.steps li:nth-child(even){ margin-left:auto }
.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute; left:0; top:34px;
  font:500 13px/1 var(--f-m);
  font-variant-numeric:tabular-nums;
  color:var(--accent-ink);
}
.steps li::after{
  content:""; position:absolute; top:31px; width:13px; height:13px;
  border:1px solid var(--accent-ink); border-radius:50%; background:var(--paper);
  transition:background 240ms var(--ease),transform 240ms var(--ease),box-shadow 240ms var(--ease);
}
.steps li:nth-child(odd)::after{ right:-59px }
.steps li:nth-child(even)::after{ left:-58px }
.steps li.is-lit::after{
  background:var(--accent); transform:scale(1.12);
  box-shadow:0 5px 16px rgba(154,86,36,.22);
}
.steps h3{ font-size:1.1875rem; font-weight:700; margin:0 0 10px }
.steps p{ margin:0; color:var(--muted-t); font-size:1rem }

@media (max-width:767px){
  .steps{ padding-left:0 }
  .steps::before,.steps::after{ left:10px }
  .steps li,.steps li:nth-child(odd),.steps li:nth-child(even){
    width:auto; margin:0; padding:28px 0 28px 62px;
  }
  .steps li::before{ left:29px; top:31px }
  .steps li:nth-child(odd)::after,.steps li:nth-child(even)::after{ left:4px; right:auto; top:28px }
}

/* ── пилот: фотография растворяется в бумажной поверхности ─────────── */

.pilot{
  position:relative; min-height:640px; overflow:hidden; display:grid; align-items:center;
  background:var(--paper); isolation:isolate;
}
.pilot__media{ position:absolute; inset:0 0 0 32%; z-index:-2 }
.pilot__media img{ width:100%; height:100%; object-fit:cover; object-position:center }
.pilot__shade{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 34%,rgba(245,243,239,.94) 43%,rgba(245,243,239,.36) 61%,transparent 78%);
}
.pilot__in{ padding-block:var(--sec-y) }
.pilot__copy{ width:min(52%,590px) }
.pilot .sechead{ margin-bottom:36px }
.pilot .hero__cta{ margin:0 }

@media (max-width:767px){
  .pilot{ min-height:0; display:block }
  .pilot__media{ position:relative; inset:auto; z-index:-2; display:block; height:min(330px,72vw) }
  .pilot__media img{ object-position:70% center }
  .pilot__shade{
    bottom:auto; height:min(332px,73vw);
    background:linear-gradient(0deg,var(--paper) 0%,rgba(245,243,239,.18) 48%,transparent 76%);
  }
  .pilot__in{ padding-block:72px 96px }
  .pilot__copy{ width:100% }
}

/* ── контакт и форма ─────────────────────────────────────────────────── */

.sec--cta{ background:var(--slate); color:var(--paper) }
.cta{ display:grid; gap:48px }
@media (min-width:1024px){ .cta{ grid-template-columns:1fr 1fr; gap:80px; align-items:start } }
.cta__text .h2{ color:var(--paper) }
.cta__links{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:12px }
.cta__links a{
  display:inline-flex; align-items:center; min-height:44px;
  font:500 1.0625rem/1 var(--f-m);
  color:var(--accent-lt);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:3px;
  transition:border-color var(--dur) var(--ease);
}
.cta__links a:hover{ border-bottom-color:var(--accent-lt) }

.form{ display:grid; gap:20px }
.field{ display:grid; gap:8px }
.field label{ font-size:14px; font-weight:500; color:var(--muted-d) }

/* Согласие на обработку данных: галочка слева, текст в строку.
   Тап-таргет держим ≥ 24 px по самой галочке и ≥ 44 px по строке целиком. */
.field--check{ grid-template-columns:auto 1fr; align-items:start; gap:12px; padding:4px 0 }
.field--check input{ width:22px; height:22px; margin:1px 0 0; accent-color:var(--accent); cursor:pointer }
.field--check label{ line-height:1.5; cursor:pointer }
.field--check label a{ color:var(--accent-lt); text-underline-offset:3px }
.field--check .err{ grid-column:1 / -1 }
.field label span{ color:var(--accent-lt) }
.field input,.field textarea{
  font:400 16px/1.5 var(--f-b);
  color:var(--paper);
  background:rgba(255,255,255,.06);
  border:1px solid var(--line-d);
  border-radius:var(--r);
  padding:13px 14px;
  min-height:48px;
  width:100%;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.field textarea{ resize:vertical; min-height:88px }
.field input::placeholder,.field textarea::placeholder{ color:#7E8794 }
.field input:focus,.field textarea:focus{ background:rgba(255,255,255,.10); border-color:var(--accent-lt) }
.field.is-bad input,.field.is-bad textarea{ border-color:#D48A6A }

.err{ font-size:13px; color:#E3A489; min-height:0 }
.err:empty{ display:none }
.hint{ font-size:13px; color:var(--muted-d) }
.form__ok{ margin:0; font-size:14px; color:var(--ok-d) }
.form__ok.is-bad{ color:var(--accent) }

.contact-choice{
  border:0; padding:0; margin:0; min-width:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
}
.contact-choice legend{
  width:100%; margin-bottom:8px;
  font-size:14px; font-weight:500; color:var(--muted-d);
}
.contact-choice label{ position:relative; cursor:pointer }
.contact-choice input{ position:absolute; opacity:0; pointer-events:none }
.contact-choice span{
  min-height:48px; display:grid; place-items:center; padding:10px 12px;
  border:1px solid rgba(255,255,255,.22); color:var(--muted-d);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.contact-choice label:hover span{ border-color:var(--accent-lt); color:var(--paper) }
.contact-choice input:focus-visible + span{ outline:2px solid var(--accent-lt); outline-offset:3px }
.contact-choice input:checked + span{ background:rgba(215,146,85,.16); border-color:var(--accent-lt); color:var(--paper) }
.contact-choice label:active span{ transform:translateY(1px) }
@media (min-width:640px){ .contact-choice{ grid-template-columns:repeat(4,minmax(0,1fr)) } }

.protocol{
  max-width:850px; margin:38px auto 0; padding:22px 0;
  border-top:1px solid var(--line-d); border-bottom:1px solid var(--line-d);
}
.protocol summary{
  cursor:pointer; color:var(--paper); font:700 18px/1.4 var(--f-h);
  list-style-position:outside;
}
.protocol p{ margin:16px 0 0; color:var(--muted-d); max-width:72ch }

/* Ловушка для ботов: человек этого поля не видит и табом в него не попадёт,
   автозаполнялка сюда тоже не полезет. Скрываем сдвигом, а не display:none —
   часть ботов пропускает поля, спрятанные совсем. */
.trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

/* ── подвал ──────────────────────────────────────────────────────────── */

.ftr{ background:var(--ink); color:var(--paper); padding:40px 0 }
.ftr__in{
  display:flex; flex-wrap:wrap; align-items:center; gap:20px 32px;
  border-top:1px solid var(--line-d); padding-top:32px;
}
.brand--ftr{ margin-right:auto; text-decoration:none }
.ftr__nav{ display:flex; flex-wrap:wrap; gap:0 24px }
.ftr__nav a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:14px; text-decoration:none; color:var(--muted-d);
}
.ftr__nav a:hover{ color:var(--paper) }
.ftr__c{ font:400 13px/1 var(--f-m); color:var(--muted-d) }

/* ── появление блоков ────────────────────────────────────────────────── */
/* Скрываем только при живом JS: без него страница остаётся читаемой. */

.js [data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  transition-delay:calc(var(--i,0) * 40ms);
}
.js [data-reveal].is-in{ opacity:1; transform:none }

/* Первый экран не ждёт site.js: он с defer, и на медленной сети ожидание
   откладывало отрисовку текста героя (LCP) на секунды. Здесь появление —
   чистая CSS-анимация, стартует сразу после разбора стилей. */
.js .hero [data-reveal]{
  animation:reveal var(--dur) var(--ease) both;
  animation-delay:calc(var(--i,0) * 40ms);
  transition:none;
}
@keyframes reveal{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }

/* Табы без JS: панели показываем все, переключатель прячем. */
html:not(.js) .tabs__panel[hidden]{ display:block }
html:not(.js) .tabs__bar{ display:none }
html:not(.js) .tabs__title{
  display:block;
  font:700 1.25rem/1.2 var(--f-h);
  margin:40px 0 20px;
  color:var(--paper);
}
html:not(.js) .tabs__panel:first-of-type .tabs__title{ margin-top:0 }

/* ── reduced motion: выключаем, а не ускоряем ────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
  .js [data-reveal]{ opacity:1; transform:none }
  .hero__media img{ transform:none !important }
  .flow-arrow b{ animation:none }
  .hero__scroll span{ animation:none }
  .steps{ --shaft-progress:1 !important }
  .steps li::after{ background:var(--accent); transform:none }
}

@media print{
  .hdr,.hero__scroll,.burger,.form{ display:none }
  .sec--dark,.sec--cap,.sec--cta,.ftr{ background:#fff; color:#000 }
  .tabs__panel[hidden]{ display:block }
  .js [data-reveal]{ opacity:1; transform:none }
}