/* src/site.css
 * Вёрстка Orizon Link. Использует только переменные из tokens.css —
 * своих цветов, размеров, отступов и радиусов не заводит.
 */

/* Onest — переменный шрифт (400–600), кириллица + латиница, локальные файлы. */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/onest-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/onest-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;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  /* Без этого текстовые дети flex/grid-контейнеров (h1, p, карточки)
     не сжимаются уже своего содержимого и вызывают горизонтальный
     скролл на узких экранах — стандартная ловушка авто-min-width. */
  min-width: 0;
}

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
p,
ul,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: var(--c-accent);
  text-decoration: none;
}

a:hover {
  color: var(--c-accent-hover);
}

img,
svg {
  display: block;
  max-width: 100%;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.container {
  /* max-width считает padding по border-box: контент внутри ограничен
     content-max (1280px), поля вокруг — page-pad-x (80 / 20px). */
  max-width: calc(var(--content-max) + var(--page-pad-x) * 2);
  margin: 0 auto;
  padding-left: var(--page-pad-x);
  padding-right: var(--page-pad-x);
}

/* Пропуск к содержимому */
.skip-link {
  position: absolute;
  left: var(--sp-12);
  top: -60px;
  z-index: 1000;
  background: var(--c-surface);
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: var(--sp-12) var(--sp-20);
  font-size: var(--fs-nav);
  font-weight: 500;
}

.skip-link:focus {
  top: var(--sp-12);
}

/* Разделы-якоря не должны прятаться под шапкой при переходе по ссылке. */
section[id] {
  scroll-margin-top: var(--header-h);
}

/* Шапка */
.site-header {
  border-bottom: 1px solid var(--c-line);
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-20);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  color: var(--c-ink);
  flex: 0 0 auto;
}

.logo:hover {
  color: var(--c-ink);
}

.logo-mark {
  width: var(--logo-size);
  height: var(--logo-size);
  flex: 0 0 auto;
}

.logo-mark--pill {
  width: 20px;
  height: 20px;
}

/* Цвет обводки — классом, не инлайн-style (CSP style-src 'self' на сервере
   блокирует style="..."). */
.logo-arc {
  stroke: var(--c-accent);
}

.logo-line {
  stroke: var(--c-ink);
}

.logo-mark--pill .logo-arc,
.logo-mark--pill .logo-line {
  stroke: var(--c-accent);
}

.logo-text {
  font-size: var(--fs-logo);
  font-weight: 600;
  letter-spacing: var(--ls-logo);
  color: var(--c-ink);
  white-space: nowrap;
}

.nav-desktop {
  display: none;
}

.nav-desktop ul {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
}

.nav-desktop a {
  font-size: var(--fs-nav);
  color: var(--c-ink-2);
  white-space: nowrap;
  padding: var(--sp-8) 0;
  display: inline-block;
}

.nav-desktop a:hover {
  color: var(--c-accent);
}

a.btn-header {
  display: none;
}

.menu-toggle {
  flex: 0 0 auto;
  position: relative;
}

.menu-toggle > summary {
  width: var(--menu-btn-size);
  height: var(--menu-btn-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  cursor: pointer;
  list-style: none;
}

.menu-toggle > summary::-webkit-details-marker {
  display: none;
}

.menu-icon {
  width: var(--menu-icon-size);
  height: var(--menu-icon-size);
}

.menu-icon-line {
  stroke: var(--c-ink);
}

/* Панель — плавающий лист под шапкой (position: fixed), а не рост высоты
   шапки: у .header-inner фиксированная высота (--header-h), и без этого
   раскрытая панель наезжала бы на первый экран вместо того, чтобы лечь
   отдельным слоем поверх него. */
.nav-mobile-panel {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  background: var(--c-bg);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding: var(--sp-20) var(--page-pad-x) var(--sp-28);
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
}

.nav-mobile-panel ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

/* Скоуп через > nav, а не просто .nav-mobile-panel a — иначе это же правило
   (специфичность 0,0,1,1) перебивает .btn-primary { color: var(--c-on-accent) }
   (0,0,1,0) и красит текст кнопки «Написать нам» в ink-2 поверх акцента:
   контраст падает ниже 4.5:1. Кнопка — соседний элемент, не внутри <nav>. */
.nav-mobile-panel > nav a {
  display: flex;
  align-items: center;
  padding: var(--sp-8) 0;
  font-size: var(--fs-nav);
  color: var(--c-ink-2);
  min-height: 44px;
}

.nav-mobile-panel .btn {
  width: 100%;
}

/* Кнопки */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
  gap: var(--sp-8);
}

.btn-primary {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

.btn-primary:hover {
  background: var(--c-accent-hover);
  color: var(--c-on-accent);
}

.btn-secondary {
  background: var(--c-surface);
  color: var(--c-ink);
  border-color: var(--c-line-strong);
}

.btn-secondary:hover {
  color: var(--c-accent);
}

.icon-arrow {
  width: 18px;
  height: 18px;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex: 0 0 auto;
}

.btn-arrow {
  stroke: var(--c-on-accent);
}

/* Первый экран */
.hero {
  padding-top: var(--hero-top);
  padding-bottom: var(--hero-top);
  position: relative;
  background-color: var(--c-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .09 0 0 0 0 .13 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hero-gap);
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hero-gap);
  position: relative;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--pill-pad-y) var(--pill-pad-x);
  border-radius: var(--radius-full);
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-size: var(--fs-pill);
  font-weight: 500;
}

.hero h1 {
  max-width: 1000px;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 600;
  letter-spacing: var(--ls-h1);
  color: var(--c-ink);
  text-wrap: balance;
}

.hero-title-accent {
  color: var(--c-accent);
}

.hero .lead {
  max-width: var(--lead-max-width);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-ink-2);
}

.hero-actions {
  display: flex;
  gap: var(--hero-btn-gap);
  padding-top: var(--sp-8);
}

/* Иллюстрация первого экрана — «маршруты над горизонтом». Два варианта
   (компьютер/телефон) переключаются через display, а не пересчётом одной
   svg: у телефонной версии меньше линий (см. renderHeroArtMobile). */
.hero-illustration {
  display: none;
}

.hero-illustration-mobile {
  display: flex;
  justify-content: center;
  padding-top: var(--sp-20);
}

.hero-art {
  width: 100%;
  height: auto;
  max-width: 620px;
}

.hero-wash {
  fill: var(--c-accent-soft);
  fill-opacity: 0.55;
}

.hero-grid {
  stroke: var(--c-grid-dash);
  stroke-width: 1;
  stroke-dasharray: 2 7;
}

.hero-arc {
  fill: none;
  stroke: var(--c-accent);
}

.hero-arc--1 {
  stroke-width: 1.75;
}

.hero-arc--2 {
  stroke-width: 1.5;
  stroke-opacity: 0.6;
}

.hero-arc--3 {
  stroke-width: 1.25;
  stroke-opacity: 0.38;
}

.hero-arc--4 {
  stroke-width: 1;
  stroke-opacity: 0.24;
}

.hero-dash {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 1.4;
  stroke-dasharray: 4 6;
}

.hero-horizon {
  stroke: var(--c-ink);
  stroke-width: 2;
}

.hero-horizon-shadow {
  stroke: var(--c-line);
  stroke-width: 1;
}

.hero-horizon-shadow--2 {
  stroke: #eef1f4;
}

.hero-node-origin {
  fill: var(--c-ink);
}

.hero-node-origin-text,
.hero-node-text {
  font-family: var(--font-sans);
  font-weight: 600;
}

.hero-node-origin-text {
  font-size: 18px;
  fill: var(--c-on-accent);
}

.hero-node {
  fill: var(--c-surface);
  stroke: var(--c-accent);
  stroke-width: 1.5;
}

.hero-node--filled {
  fill: var(--c-accent);
}

.hero-node-text {
  font-size: 13px;
  fill: var(--c-accent);
}

.hero-node-text--on-accent {
  fill: var(--c-on-accent);
}

.hero-art--mobile .hero-node-origin-text {
  font-size: 24px;
}

.hero-art--mobile .hero-node-text {
  font-size: 19px;
}

.hero-art--mobile .hero-horizon {
  stroke-width: 3;
}

.hero-art--mobile .hero-dash {
  stroke-width: 2;
  stroke-dasharray: 6 8;
}

.hero-art--mobile .hero-arc--1 {
  stroke-width: 2.5;
}

.hero-art--mobile .hero-arc--2 {
  stroke-width: 2;
}

.hero-art--mobile .hero-arc--3 {
  stroke-width: 1.75;
}

.hero-art--mobile .hero-arc--4 {
  stroke-width: 1.5;
}

.hero-node,
.hero-art--mobile .hero-node {
  stroke-width: 2;
}

/* Полоса фактов */
.facts {
  border-top: 1px solid var(--c-line);
  padding: var(--facts-pad-top) 0 var(--facts-pad-bottom);
}

.facts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--facts-gap);
}

.fact {
  display: flex;
  align-items: center;
  gap: var(--sp-14);
}

.fact:not(:first-child) {
  padding-left: var(--facts-gap);
  border-left: 1px solid var(--c-line);
}

.fact--lead {
  gap: var(--sp-14);
}

.fact-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fact-value--big {
  font-size: 56px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}

.fact-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--c-ink);
}

.fact-label {
  font-size: var(--fs-fact-label);
  line-height: var(--lh-fact-label);
  color: var(--c-ink-2);
}

.icon-tile {
  width: var(--icon-tile);
  height: var(--icon-tile);
  flex: 0 0 auto;
  border-radius: var(--radius-lg);
  background: var(--c-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-tile--dark {
  background: var(--c-tile-on-dark);
}

.icon {
  width: var(--icon-size);
  height: var(--icon-size);
  stroke: var(--c-accent);
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.icon-tile--dark .icon {
  stroke: var(--c-accent-on-dark);
}

/* Разделы */
.section {
  padding: var(--section-pad-y) 0;
}

.section-bg {
  background: var(--c-bg-section);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--section-head-inner-gap);
  max-width: 760px;
  margin-bottom: var(--section-head-gap);
}

.section-head h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 600;
  letter-spacing: var(--ls-h2);
  color: var(--c-ink);
}

/* Карточки */
.cards-grid {
  display: grid;
  gap: var(--cards-gap);
  grid-template-columns: 1fr;
}

.cards-grid--3,
.cards-grid--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card {
  padding: var(--card-pad);
  border-radius: var(--radius-xl);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}

.card h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  color: var(--c-ink);
}

.card p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink-2);
}

/* Регионы — карточка с контурным водяным знаком валюты */
.card--region {
  position: relative;
  overflow: hidden;
  gap: var(--region-card-gap);
  border-radius: var(--radius-region);
  min-height: 220px;
  height: var(--region-card-h);
}

.region-mark {
  width: 34px;
  height: 34px;
}

.region-mark--on-accent .logo-arc {
  stroke: var(--c-on-accent);
}

.region-mark--on-accent .logo-line {
  stroke: var(--c-on-accent);
  opacity: 0.6;
}

.region-watermark {
  position: absolute;
  right: -6px;
  bottom: -22px;
  font-size: var(--region-watermark-fs);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--c-region-stroke);
  pointer-events: none;
  user-select: none;
}

/* -webkit-text-stroke делает контурный (не залитый) знак; без поддержки —
   просто светлый залитый цвет (правило выше). */
@supports (-webkit-text-stroke: 1px black) {
  .region-watermark {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--c-region-stroke);
  }
}

.card--region-accent {
  background: var(--c-accent);
  border-color: var(--c-accent);
}

.card--region-accent h3 {
  color: var(--c-on-accent);
}

.card--region-accent p {
  color: var(--c-on-accent-2);
}

.card--region-accent .region-watermark {
  color: var(--c-on-accent-line);
}

@supports (-webkit-text-stroke: 1px black) {
  .card--region-accent .region-watermark {
    color: transparent;
    -webkit-text-stroke-color: var(--c-on-accent-line);
  }
}

/* Как это работает — линия маршрута с узлами 01–04 */
.steps-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--cards-gap);
}

.steps-line {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 22px;
  height: 1.5px;
  background-image: repeating-linear-gradient(
    to right,
    var(--c-accent) 0,
    var(--c-accent) 5px,
    transparent 5px,
    transparent 12px
  );
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.step-node {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--c-surface);
  border: 1.5px solid var(--c-accent);
  color: var(--c-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-step-num);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.step-node.is-active {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

/* Тёмная и акцентная полосы — «Безопасность» и «Контакты» */
.section-strip-wrap {
  padding: var(--section-pad-y) 0;
}

.strip {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0 var(--sp-24);
  border-radius: var(--radius-strip);
  padding: var(--strip-pad-y) var(--strip-pad-x);
}

.strip--dark {
  background: var(--c-strip-dark-bg);
}

.strip--accent {
  background: var(--c-accent);
}

.strip-arcs {
  position: absolute;
  right: -120px;
  top: -60px;
  width: 620px;
  height: 420px;
  pointer-events: none;
}

.strip-arcs--contacts {
  right: -80px;
  top: auto;
  bottom: -150px;
  width: 760px;
  height: 420px;
}

.strip-arc {
  fill: none;
  stroke-width: 1.25;
}

.strip--dark .strip-arc {
  stroke: var(--c-accent-on-dark);
}

.strip--dark .strip-arc--1 {
  stroke-opacity: 0.18;
}

.strip--dark .strip-arc--2 {
  stroke-opacity: 0.22;
}

.strip--dark .strip-arc--3 {
  stroke-opacity: 0.28;
}

.strip--accent .strip-arc {
  stroke: var(--c-on-accent);
}

.strip--accent .strip-arc--1 {
  stroke-opacity: 0.12;
}

.strip--accent .strip-arc--2 {
  stroke-opacity: 0.16;
}

.strip--accent .strip-arc--3 {
  stroke-opacity: 0.22;
}

.strip--accent .strip-arc--4 {
  stroke-opacity: 0.3;
  stroke-width: 1.5;
}

.strip-grid {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-40);
}

.strip-head {
  display: flex;
  flex-direction: column;
  gap: var(--section-head-inner-gap);
}

.strip-head h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 600;
  letter-spacing: var(--ls-h2);
  color: var(--c-ink-on-dark);
}

.strip--accent .strip-head h2 {
  color: var(--c-on-accent);
}

.strip-head p {
  font-size: var(--fs-subtitle);
  line-height: var(--lh-subtitle);
  color: var(--c-on-accent-2);
}

.security-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-40) var(--sp-48);
}

.security-card {
  display: flex;
  gap: var(--sp-20);
}

.security-copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.security-copy h3 {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--c-ink-on-dark);
}

.security-copy p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink-2-on-dark);
}

/* Частые вопросы — заголовок слева, список справа, нумерация счётчиком CSS */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-40);
}

.faq-list {
  border-top: 1px solid var(--c-line);
  counter-reset: faq;
}

.faq-item {
  counter-increment: faq;
  border-bottom: 1px solid var(--c-line);
  padding: var(--sp-20) 0;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 36px;
  align-items: start;
  gap: var(--sp-12);
  min-height: 44px;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::before {
  content: counter(faq, decimal-leading-zero);
  padding-top: 3px;
  font-size: var(--fs-step-num);
  font-weight: 600;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}

.faq-q {
  font-size: var(--fs-faq-q);
  line-height: 1.4;
  font-weight: 600;
  color: var(--c-ink);
}

.faq-toggle {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid var(--c-line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-toggle::before {
  content: "+";
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
  color: var(--c-ink);
}

.faq-item[open] .faq-toggle {
  background: var(--c-accent);
  border-color: var(--c-accent);
}

.faq-item[open] .faq-toggle::before {
  content: "\2212";
  color: var(--c-on-accent);
}

.faq-item .faq-a {
  padding-top: var(--sp-12);
  padding-left: calc(40px + var(--sp-12));
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink-2);
  max-width: 720px;
}

/* Контакты */
.strip-grid--contacts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-28);
  align-items: end;
}

.contact-links {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
  /* Единственный контакт (почта) — плашка не растягивается на всю ширину
     широкой колонки, иначе на десктопе она выглядит пустой и потерянной
     там, где раньше стояли две. */
  max-width: 420px;
}

.contact-plaque {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-20);
  min-height: 44px;
  padding: var(--sp-20) var(--sp-20);
  border-radius: var(--radius-xl);
  border: 1px solid transparent;
}

.contact-plaque--solid {
  background: var(--c-surface);
}

.contact-plaque-value {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}

.contact-plaque--solid .icon-arrow {
  stroke: var(--c-accent);
}

/* Подвал */
.site-footer {
  border-top: 1px solid var(--c-line);
  padding: var(--sp-28) 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-12);
}

.site-footer p {
  font-size: var(--fs-fact-label);
  color: var(--c-ink-2);
}

/* Страница 404 */
.notfound {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-40) var(--page-pad-x);
}

.notfound-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-20);
  max-width: 560px;
}

.notfound h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 600;
  letter-spacing: var(--ls-h2);
  color: var(--c-ink);
}

.notfound p {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-ink-2);
}

/* Движение — весь список анимаций и переходов живёт только здесь, как того
   требует критерий приёмки: пользователь с prefers-reduced-motion: reduce
   не должен видеть ни transition, ни @keyframes. */
@media (prefers-reduced-motion: no-preference) {
  .skip-link {
    transition: top 0.2s ease;
  }

  .btn,
  .nav-desktop a,
  a {
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }

  .card,
  .security-card {
    transition: transform 0.2s ease;
  }

  .card:hover,
  .security-card:hover {
    transform: translateY(-4px);
  }

  @keyframes fade-up {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes draw-arc {
    from {
      stroke-dashoffset: 900;
    }
    to {
      stroke-dashoffset: 0;
    }
  }

  .hero-content > .pill,
  .hero-content > h1,
  .hero-content > .lead,
  .hero-content > .hero-actions {
    opacity: 0;
    animation: fade-up 0.6s ease-out forwards;
  }

  .hero-content > .pill {
    animation-delay: 0.05s;
  }

  .hero-content > h1 {
    animation-delay: 0.15s;
  }

  .hero-content > .lead {
    animation-delay: 0.25s;
  }

  .hero-content > .hero-actions {
    animation-delay: 0.35s;
  }

  .hero-illustration .hero-arc {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    animation: draw-arc 1.1s ease-out forwards;
  }

  .hero-illustration .hero-arc--1 {
    animation-delay: 0.3s;
  }

  .hero-illustration .hero-arc--2 {
    animation-delay: 0.4s;
  }

  .hero-illustration .hero-arc--3 {
    animation-delay: 0.5s;
  }

  .hero-illustration .hero-arc--4 {
    animation-delay: 0.6s;
  }

  .hero-illustration .hero-dash,
  .hero-illustration .hero-node,
  .hero-illustration .hero-node-origin,
  .hero-illustration .hero-node-text,
  .hero-illustration .hero-node-origin-text {
    opacity: 0;
    animation: fade-in 0.5s ease-out forwards;
    animation-delay: 0.8s;
  }

}

/* Планшет — 768–1099px: 2 колонки для сеток карточек (уже по умолчанию) */

/* Компьютер — от 1120px: полная навигация в шапке, 3/4 колонки в сетках */
@media (min-width: 1120px) {
  .nav-desktop {
    display: block;
  }

  a.btn-header {
    display: inline-flex;
  }

  .menu-toggle {
    display: none;
  }

  .cards-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cards-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 40px;
  }

  .hero-illustration-desktop {
    display: flex;
    justify-content: flex-end;
  }

  .hero-illustration-mobile {
    display: none;
  }

  .strip-grid,
  .strip-grid--contacts {
    grid-template-columns: 420px minmax(0, 1fr);
    align-items: end;
  }

  .strip-grid {
    align-items: start;
  }

  .faq-grid {
    grid-template-columns: 420px minmax(0, 1fr);
    gap: 72px;
  }
}

/* Телефон — до 767px */
@media (max-width: 767px) {
  .hero-actions {
    align-self: stretch;
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .facts-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .fact {
    /* На узком экране значение/иконка и подпись идут одной колонкой у
       левого края, а не растягиваются на всю ширину строки: строка с
       justify-content: space-between разносила их по краям и создавала
       разрыв во всю ширину экрана. */
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-12);
    padding: var(--facts-gap) 0;
    border-bottom: 1px solid var(--c-line);
  }

  .fact:not(:first-child) {
    padding-left: 0;
    border-left: none;
  }

  .fact-value--big {
    font-size: 32px;
  }

  .cards-grid--3,
  .cards-grid--4 {
    grid-template-columns: 1fr;
  }

  .steps-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .steps-line {
    left: 22px;
    right: auto;
    top: 22px;
    bottom: 22px;
    width: 1.5px;
    height: auto;
    background-image: repeating-linear-gradient(
      to bottom,
      var(--c-accent) 0,
      var(--c-accent) 5px,
      transparent 5px,
      transparent 12px
    );
  }

  .step {
    padding-left: 64px;
  }

  .step-node {
    position: absolute;
    left: 0;
    top: 0;
  }

  .security-grid {
    grid-template-columns: 1fr;
  }

  .faq-item summary {
    grid-template-columns: 32px minmax(0, 1fr) 36px;
  }

  .faq-item .faq-a {
    padding-left: calc(32px + var(--sp-12));
  }
}