/* =========================================================
   Competitor — стили сайта
   Основа: дизайн-система Competitor (токены, шрифты, тени)
   ========================================================= */

/* ---------- Шрифты ---------- */
@font-face { font-family: "Unbounded"; src: url("../fonts/Unbounded-Variable.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-Variable.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

/* ---------- Токены ---------- */
:root, [data-theme="light"] {
  --brand-navy: #0b1020;
  --brand-blue: #2f5bf0;
  --surface: #ffffff;
  --surface-alt: #f1f3fa;
  --surface-raised: #ffffff;
  --ink: #0b1020;
  --ink-muted: #4a5470;
  --link: #2f5bf0;
  --on-brand: #ffffff;
  --border: #d6dbea;
  --border-strong: #0b1020;
  --focus: #2f5bf0;
  --success: #0e7c4a;
  --danger: #c62828;
  --plan: #8a93ae;
  --shadow-hard-sm: 4px 4px 0 0 #2f5bf0;
  --shadow-hard: 8px 8px 0 0 #2f5bf0;
  --shadow-hard-ink: 4px 4px 0 0 #0b1020;
}
[data-theme="dark"] {
  --surface: #0b1020;
  --surface-alt: #131a30;
  --surface-raised: #1a2240;
  --ink: #f1f3fa;
  --ink-muted: #a9b2cc;
  --link: #8aa4ff;
  --border: #2a3354;
  --border-strong: #f1f3fa;
  --focus: #8aa4ff;
  --success: #3cd08a;
  --danger: #ff7a70;
  --shadow-hard-ink: 4px 4px 0 0 #f1f3fa;
}
:root {
  --font-display: "Unbounded", "Arial Black", sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --container: 1240px;
  --gutter: 24px;
  --header-h: 68px;
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--surface); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: #2f5bf0; color: #fff; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px 16px; background: var(--brand-navy); color: #fff; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- Раскладка ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 900px; }
.section { padding: 96px 0; background: var(--surface); color: var(--ink); }
.section--tight { padding: 72px 0; }
.section--alt { background: var(--surface-alt); border-top: 2px solid var(--border-strong); border-bottom: 2px solid var(--border-strong); }
.section--blue { background: var(--brand-blue); color: #fff; border-top: 2px solid var(--brand-navy); border-bottom: 2px solid var(--brand-navy); }
.section--flush-top { padding-top: 0; }
.stack { display: flex; flex-direction: column; gap: var(--gap, 24px); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, 16px); }
.split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.split--center { align-items: center; }
.grid { display: grid; gap: var(--gap, 32px); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 280px)), 1fr)); }
.grid--fill { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 280px)), 1fr)); }
.grid--center { align-items: center; }
.grid--start { align-items: start; }
.grid--end { align-items: end; }
.span-2 { grid-column: span 2; }
@media (max-width: 760px) { .span-2 { grid-column: auto; } }
.max-760 { max-width: 760px; }
.max-560 { max-width: 560px; }

/* ---------- Типографика ---------- */
.eyebrow { font-family: var(--font-display); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--link); }
.eyebrow--muted { color: var(--ink-muted); }
.badge-eyebrow { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; border: 2px solid var(--border-strong); font-family: var(--font-display); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.badge-eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--brand-blue); }
.h-hero { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 5.4vw, 72px); line-height: 1.03; letter-spacing: -0.035em; text-wrap: balance; }
.h-page { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 5vw, 64px); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
.h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.8vw, 48px); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.h2--sm { font-size: clamp(24px, 3vw, 36px); line-height: 1.15; }
.h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 26px; }
.h3--lg { font-size: 26px; line-height: 32px; }
.lead { font-size: 20px; line-height: 30px; font-weight: 600; color: var(--ink-muted); }
.text-lg { font-size: 18px; line-height: 28px; }
.muted { color: var(--ink-muted); }
.small { font-size: 14px; line-height: 20px; }
.tiny { font-size: 13px; line-height: 18px; }
.strong { font-weight: 700; }
.mark { display: inline-block; padding: 0 0.12em; background: var(--brand-blue); color: #fff; box-shadow: 0.08em 0.08em 0 0 var(--brand-navy); }
.num { font-family: var(--font-display); font-weight: 700; }
.prose p + p { margin-top: 12px; }
.prose h2 { font-family: var(--font-display); font-size: 22px; line-height: 30px; margin: 36px 0 12px; }
.prose ul { padding-left: 22px; margin: 8px 0; }
.prose li + li { margin-top: 6px; }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px;
  font-family: var(--font-body); font-size: 16px; line-height: 1.25; font-weight: 700; text-align: center;
  border: 2px solid var(--border-strong); border-radius: 0;
  background: var(--ink); color: var(--surface); box-shadow: var(--shadow-hard-sm);
  text-decoration: none; cursor: pointer;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out, background-color 120ms ease-out;
}
.btn:hover { color: var(--surface); box-shadow: var(--shadow-hard); transform: translate(-2px, -2px); }
.btn:active { box-shadow: none; transform: translate(4px, 4px); }
.btn--accent { background: var(--brand-blue); color: #fff; box-shadow: var(--shadow-hard-ink); }
.btn--accent:hover { color: #fff; box-shadow: var(--shadow-hard-ink); }
.btn--secondary { background: transparent; color: var(--ink); box-shadow: none; }
.btn--secondary:hover { color: var(--ink); box-shadow: var(--shadow-hard-sm); }
.btn--white { background: #fff; color: var(--brand-navy); border-color: var(--brand-navy); box-shadow: 6px 6px 0 0 var(--brand-navy); }
.btn--white:hover { color: var(--brand-navy); box-shadow: 8px 8px 0 0 var(--brand-navy); }
.btn--ghost-light { background: transparent; color: #fff; border-color: #fff; box-shadow: none; }
.btn--ghost-light:hover { color: #fff; }
.btn--sm { min-height: 44px; padding: 0 18px; }
.btn--lg { min-height: 56px; padding: 0 28px; font-size: 18px; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-loading { opacity: .6; cursor: progress; transform: none; box-shadow: none; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--link); text-decoration: none; }
.link-arrow::after { content: "→"; transition: transform 160ms ease-out; }
.link-arrow:hover { color: var(--link); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- Карточки ---------- */
.card { border: 2px solid var(--border-strong); background: var(--surface-raised); color: var(--ink); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.card--shadow { box-shadow: var(--shadow-hard); }
.card--shadow-sm { box-shadow: var(--shadow-hard-sm); }
.card--pad-lg { padding: 28px; }
.card--blue { background: var(--brand-blue); color: #fff; border-color: var(--brand-navy); box-shadow: 8px 8px 0 0 var(--brand-navy); }
.card--navy { background: var(--brand-navy); color: #fff; border-color: var(--brand-navy); box-shadow: 8px 8px 0 0 var(--brand-blue); }
.card--dashed { border-style: dashed; background: var(--surface-alt); }
.card__foot { margin-top: auto; padding-top: 12px; border-top: 2px solid var(--border); }
.lift { transition: transform 160ms ease-out, box-shadow 160ms ease-out; }
.lift:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 0 var(--brand-blue); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.card-num { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--link); }
.card-term { font-size: 13px; line-height: 18px; font-weight: 700; color: var(--ink-muted); }
.card-price { font-family: var(--font-display); font-size: 17px; line-height: 24px; font-weight: 700; }

/* Блок со сдвинутой синей тенью */
.shadow-block { position: relative; padding: 0 16px 16px 0; }
.shadow-block::before { content: ""; position: absolute; inset: 16px 0 0 16px; background: var(--brand-blue); }
.shadow-block > * { position: relative; }

/* Статистика */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--brand-navy); color: #fff; border: 2px solid var(--brand-navy); }
.stats > div { padding: 28px; border-color: #2a3354; border-style: solid; border-width: 0; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; }
.stats > div:nth-child(odd) { border-right-width: 2px; }
.stats > div:nth-child(-n+2) { border-bottom-width: 2px; }
.stats dt { font-size: 14px; line-height: 20px; color: #c9d0e4; }
.stats dd { font-family: var(--font-display); font-size: clamp(32px, 4vw, 52px); line-height: 1; font-weight: 700; }
.stats dd small { font-size: 0.36em; color: #8aa4ff; }
@media (max-width: 420px) { .stats > div { padding: 20px; } }

/* Списки с галочками и квадратами */
.checks { display: flex; flex-direction: column; gap: 12px; }
.checks li { display: flex; gap: 12px; }
.checks li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px; background: var(--link); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.checks--light li::before { background: #fff; }
.checks--strong li { font-weight: 600; }
.squares { display: flex; flex-direction: column; gap: 12px; font-weight: 600; }
.squares li { display: flex; gap: 12px; }
.squares li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 7px; background: #8aa4ff; }
.bullets { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* Чипы и теги */
.pill { display: inline-flex; align-items: center; padding: 8px 16px; border: 2px solid var(--border-strong); border-radius: 999px; background: var(--surface-raised); font-weight: 600; }
.pill--sm { padding: 4px 12px; font-size: 13px; font-weight: 700; }
.pill--light { border-color: #fff; background: transparent; color: #fff; }
.tag-solid { display: inline-flex; padding: 4px 10px; background: var(--brand-navy); color: #fff; font-size: 13px; line-height: 18px; font-weight: 700; }
.tag-blue { display: inline-flex; padding: 4px 12px; background: var(--brand-blue); color: #fff; font-size: 13px; font-weight: 700; }
.box-label { padding: 8px 14px; border: 2px solid var(--border-strong); font-size: 14px; font-weight: 700; }
.chip { min-height: 44px; padding: 0 16px; border: 2px solid var(--border-strong); border-radius: 999px; background: transparent; color: var(--ink); font-size: 15px; font-weight: 700; transition: background-color 120ms, color 120ms; }
.chip[aria-pressed="true"] { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.jump-links { display: flex; flex-wrap: wrap; gap: 10px; }
.jump-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 2px solid var(--border-strong); border-radius: 999px; background: var(--surface-raised); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px; }
.jump-links a:hover { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }

/* ---------- Верхняя полоса и шапка ---------- */
.topbar { background: var(--brand-navy); color: #f1f3fa; font-size: 14px; line-height: 20px; }
.topbar .container { min-height: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; }
.topbar a { display: inline-flex; align-items: center; min-height: 40px; color: #f1f3fa; text-decoration: none; }
.topbar a:hover { color: #8aa4ff; }
.topbar__muted { color: #a9b2cc; }
.topbar__links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.topbar__links a:first-child { font-weight: 700; }

.header { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 2px solid var(--border-strong); }
.header .container { min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.header__logo { display: block; flex: none; }
.header__logo img { height: 36px; width: auto; }
.nav { display: flex; gap: 26px; }
.nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 600; }
.nav a:hover { color: var(--link); }
.nav a[aria-current="page"] { color: var(--link); font-weight: 700; box-shadow: inset 0 -3px 0 var(--brand-blue); }
.header__actions { display: flex; align-items: center; gap: 12px; flex: none; }
.burger { display: none; width: 48px; height: 48px; align-items: center; justify-content: center; border: 2px solid var(--border-strong); background: transparent; }
.burger span, .burger span::before, .burger span::after { display: block; width: 22px; height: 2.5px; background: var(--ink); position: relative; transition: transform 160ms ease-out, background-color 160ms; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -7px; }
.burger span::after { top: 7px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

.drawer { position: fixed; z-index: 39; left: 0; right: 0; top: var(--drawer-top, 108px); bottom: 0; background: var(--surface); border-top: 2px solid var(--border-strong); overflow-y: auto; padding: 16px var(--gutter) 32px; display: flex; flex-direction: column; gap: 24px; }
.drawer nav { display: flex; flex-direction: column; }
.drawer nav a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 2px solid var(--border); color: var(--ink); text-decoration: none; font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.drawer nav a::after { content: "→"; color: var(--link); }
.drawer nav a[aria-current="page"] { color: var(--link); }
.drawer__contacts { display: flex; flex-direction: column; gap: 6px; }
.drawer__contacts a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 700; text-decoration: none; }
body.is-menu-open { overflow: hidden; }

@media (max-width: 1060px) {
  .nav { gap: 18px; }
}
@media (max-width: 960px) {
  .nav, .header__cta { display: none; }
  .burger { display: inline-flex; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; --header-h: 64px; }
  .topbar__muted { display: none; }
  .header__logo img { height: 30px; }
}

/* ---------- Первый экран ---------- */
.hero { padding: 72px 0 56px; }
.hero .grid { --min: 360px; gap: 56px; align-items: center; }
.page-hero { padding: 56px 0 48px; }
.breadcrumbs { font-size: 14px; color: var(--ink-muted); }
.breadcrumbs a { color: var(--ink-muted); }
.breadcrumbs span[aria-hidden] { margin: 0 6px; }

/* Логотипы клиентов */
.logos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.logos li { height: 76px; padding: 12px; background: #fff; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; }
@media (min-width: 1100px) { .logos:not(.logos--lg) { grid-template-columns: repeat(8, 1fr); } }
.logos--lg { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 16px; }
.logos--lg li { height: 104px; padding: 16px; border-color: var(--border-strong); }
.logos img { max-width: 100%; max-height: 48px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter 160ms ease-out, opacity 160ms ease-out; }
.logos--lg img { max-height: 64px; }
.logos li:hover img { filter: none; opacity: 1; }
@media (hover: none) { .logos img { filter: none; opacity: 1; } }
.clients-strip { background: var(--surface-alt); border-top: 2px solid var(--border-strong); border-bottom: 2px solid var(--border-strong); padding: 32px 0; }

/* ---------- Вкладки ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 12px; }
.tab { min-height: 52px; padding: 0 22px; border: 2px solid var(--border-strong); background: transparent; color: var(--ink); font-family: var(--font-display); font-size: 15px; font-weight: 700; transition: transform 120ms ease-out, box-shadow 120ms ease-out; }
.tab[aria-selected="true"] { background: var(--brand-navy); color: #fff; box-shadow: 4px 4px 0 0 var(--brand-blue); transform: translate(-2px, -2px); }
.service-card { min-height: 220px; }

/* ---------- Кейсы ---------- */
.case { border: 2px solid var(--border-strong); background: var(--surface-raised); box-shadow: var(--shadow-hard); display: flex; flex-direction: column; }
.case__head { padding: 28px 28px 20px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--border); }
.case__delta { font-family: var(--font-display); font-size: 48px; line-height: 1; font-weight: 700; color: var(--link); }
.case__body { padding: 20px 28px 28px; display: flex; flex-direction: column; gap: 14px; }
.case-mini { gap: 16px; }
.case-mini .case__delta { font-size: 44px; }
.metric__row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.bars { display: flex; flex-direction: column; gap: 3px; }
.bar { display: block; height: 8px; background: var(--surface-alt); }
.bar > span { display: block; height: 100%; background: var(--plan); }
.bar--fact > span { background: var(--brand-blue); }
.bar--lg { height: 12px; }
.legend { display: flex; gap: 16px; font-size: 13px; color: var(--ink-muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend span::before { content: ""; width: 12px; height: 8px; background: var(--plan); }
.legend span.fact::before { background: var(--brand-blue); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 14px; line-height: 20px; padding-top: 12px; border-top: 2px solid var(--border); }
.kv dt { color: var(--ink-muted); }
.kv dd { text-align: right; font-weight: 700; white-space: nowrap; }
.bar-row { display: flex; align-items: center; gap: 10px; }
.bar-row > span:first-child { width: 44px; font-size: 13px; color: var(--ink-muted); }
.bar-row > .bar { flex: 1; }

/* ---------- Шаги ---------- */
.steps { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 240px)), 1fr)); }
.steps > li { border-top: 6px solid var(--brand-blue); padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.step-num { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; background: var(--brand-blue); color: #fff; font-family: var(--font-display); font-weight: 700; }
.step-num--sm { width: 32px; height: 32px; }
.numbered { display: flex; flex-direction: column; gap: 14px; }
.numbered li { display: flex; gap: 14px; align-items: flex-start; }
.numbered li > span:last-child { padding-top: 4px; }

/* ---------- Таблицы ---------- */
.table-wrap { overflow-x: auto; border: 2px solid var(--border-strong); box-shadow: var(--shadow-hard); background: var(--surface-raised); -webkit-overflow-scrolling: touch; }
.table { width: 100%; min-width: 640px; border-collapse: collapse; }
.table caption { caption-side: top; text-align: left; padding: 20px; font-family: var(--font-display); font-size: 20px; font-weight: 700; border-bottom: 2px solid var(--border-strong); }
.table thead th { background: var(--ink); color: var(--surface); text-align: left; padding: 14px 20px; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.08em; font-weight: 500; text-transform: uppercase; }
.table th.is-accent { background: var(--brand-blue); color: #fff; }
.table tbody tr { border-top: 2px solid var(--border); }
.table tbody th, .table td { padding: 16px 20px; vertical-align: top; text-align: left; }
.table .right { text-align: right; }
.table .nowrap { white-space: nowrap; }
.table .price { font-family: var(--font-display); font-weight: 700; white-space: nowrap; }

/* ---------- Раскрывающиеся блоки ---------- */
.faq { display: flex; flex-direction: column; gap: 16px; }
.details { border: 2px solid var(--border-strong); background: var(--surface-raised); }
.details > summary { list-style: none; cursor: pointer; min-height: 44px; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--font-display); font-size: 17px; line-height: 24px; font-weight: 700; }
.details > summary::-webkit-details-marker { display: none; }
.details > summary::after { content: "+"; flex: none; font-size: 26px; line-height: 1; color: var(--brand-blue); transition: transform 160ms ease-out; }
.details[open] > summary::after { transform: rotate(45deg); }
.details__body { padding: 0 22px 20px; color: var(--ink-muted); }

.price-row > summary { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto auto; align-items: center; gap: 8px 20px; padding: 20px 24px; font-family: var(--font-body); }
.price-row__title { font-family: var(--font-display); font-size: 19px; line-height: 26px; font-weight: 700; display: block; }
.price-row__sub { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-muted); }
.price-row__price { font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 700; text-align: right; }
.price-row__body { padding: 4px 24px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px 40px; border-top: 2px solid var(--border); }
.price-row__body > div { padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 640px) {
  .price-row > summary { grid-template-columns: auto minmax(0, 1fr) auto; padding: 18px 16px; }
  .price-row__price { grid-column: 2 / 3; grid-row: 2; text-align: left; font-size: 16px; }
  .price-row__body { padding: 4px 16px 20px; }
}

/* ---------- Направления (страница Маркетинг) ---------- */
.service-row { scroll-margin-top: calc(var(--header-h) + 24px); border: 2px solid var(--border-strong); background: var(--surface-raised); box-shadow: var(--shadow-hard); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.service-row > div { padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.service-row > div:first-child { background: var(--surface-alt); gap: 12px; }
.service-row > div + div { border-left: 2px solid var(--border); }
@media (max-width: 980px) { .service-row > div + div { border-left: 0; border-top: 2px solid var(--border); } }

/* ---------- Формы ---------- */
.form { display: flex; flex-direction: column; gap: 18px; padding: 32px; background: var(--surface-raised); border: 2px solid var(--border-strong); box-shadow: var(--shadow-hard); color: var(--ink); }
@media (max-width: 480px) { .form { padding: 22px 18px; } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label, .form legend { font-size: 13px; line-height: 18px; font-weight: 700; color: var(--ink); padding: 0; }
.field__label .req { color: var(--danger); }
.field__input { width: 100%; min-height: 48px; padding: 0 16px; font-size: 16px; color: var(--ink); background: var(--surface-alt); border: 2px solid var(--border-strong); border-radius: 0; transition: box-shadow 120ms, background-color 120ms; }
textarea.field__input { min-height: 112px; padding: 12px 16px; resize: vertical; }
.field__input::placeholder { color: var(--ink-muted); }
.field__input:focus { outline: none; box-shadow: var(--shadow-hard-sm); background: var(--surface); }
.field__hint { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.field.is-error .field__input { border-color: var(--danger); }
.field.is-error .field__hint { color: var(--danger); font-weight: 700; }
.form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.form legend { margin-bottom: 10px; }
.form-row { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { padding: 14px 16px; border: 2px solid currentColor; font-weight: 700; }
.form-status.is-ok { color: var(--success); }
.form-status.is-err { color: var(--danger); }
.form-status a { color: inherit; }
.form-note { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.form-success { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.form-success__icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-blue); color: #fff; box-shadow: var(--shadow-hard-ink); }

/* Квиз (лендинг) */
.quiz-progress { height: 8px; background: var(--border); }
.quiz-progress > span { display: block; height: 100%; background: var(--brand-blue); transition: width 200ms ease-out; }
.options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 420px) { .options { grid-template-columns: 1fr; } }
.option { min-height: 56px; padding: 10px 14px; text-align: left; font-size: 16px; line-height: 22px; font-weight: 700; border: 2px solid var(--border-strong); background: transparent; color: var(--ink); transition: transform 120ms ease-out, box-shadow 120ms ease-out; }
.option[aria-pressed="true"] { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; box-shadow: 4px 4px 0 0 var(--border-strong); transform: translate(-2px, -2px); }

/* Калькулятор пакета */
.calc ul { padding: 0; margin: 0; list-style: none; }
.calc { border: 2px solid var(--border-strong); box-shadow: var(--shadow-hard); background: var(--surface-raised); }
.calc__item { border-bottom: 2px solid var(--border); }
.calc__item label { min-height: 56px; padding: 12px 20px; display: flex; align-items: center; gap: 14px; cursor: pointer; }
.calc__item input { width: 22px; height: 22px; flex: none; accent-color: var(--brand-blue); cursor: pointer; }
.calc__item span:nth-of-type(1) { flex: 1; font-weight: 600; }
.calc__item span:nth-of-type(2) { font-family: var(--font-display); font-weight: 700; white-space: nowrap; }
.calc__total { padding: 20px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; background: var(--brand-navy); color: #fff; }
.calc__sum { font-family: var(--font-display); font-size: 28px; font-weight: 700; }
.calc__note { width: 100%; font-size: 14px; color: #c9d0e4; }

/* Блок контактов */
.contact-card { text-decoration: none; min-width: 0; }
.contact-card:hover { color: inherit; }
.contact-card__value { font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 700; overflow-wrap: anywhere; }
.contact-card.card--blue:hover { color: #fff; }
.contacts-dl { display: grid; grid-template-columns: auto 1fr; gap: 14px 24px; align-items: baseline; }
.contacts-dl dt { font-size: 14px; color: var(--ink-muted); }
.contacts-dl dd { font-weight: 700; }
.contacts-dl a { color: var(--ink); text-decoration: none; }
.contacts-dl a:hover { color: var(--link); }

/* Мини-экран (пример интерфейса) */
.hero-mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 72px; gap: 16px; padding: 0 12px 12px 0; }
.hero-mosaic__mark { grid-column: 1 / span 4; grid-row: 1 / span 4; position: relative; }
.hero-mosaic__mark::before { content: ""; position: absolute; inset: 16px -16px -16px 16px; background: var(--brand-blue); }
.hero-mosaic__mark > div { position: absolute; inset: 0; background: var(--brand-navy); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-mosaic__mark span { font-family: var(--font-display); font-weight: 700; font-size: clamp(140px, 16vw, 240px); line-height: 1; color: #fff; margin-top: -0.08em; }
.hero-mosaic__tile { grid-column: 5 / span 2; grid-row: span 2; border: 2px solid var(--border-strong); background: var(--surface-raised); box-shadow: var(--shadow-hard-sm); padding: 14px; display: flex; flex-direction: column; justify-content: space-between; }
.hero-mosaic__tile--blue { background: var(--brand-blue); color: #fff; box-shadow: var(--shadow-hard-ink); }
.hero-mosaic__strip { grid-column: 1 / span 6; border: 2px solid var(--border-strong); background: var(--surface-alt); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px; font-weight: 700; }
.hero-mosaic__strip i { font-style: normal; color: var(--brand-blue); }
@media (max-width: 480px) { .hero-mosaic { grid-auto-rows: 56px; gap: 12px; } .hero-mosaic__strip { font-size: 13px; padding: 0 10px; } .hero-mosaic__tile { padding: 10px; } }

.trust-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.trust-row li { padding: 20px 0; display: flex; align-items: center; gap: 12px; font-weight: 700; }
.trust-row svg { flex: none; color: var(--brand-blue); }

/* Сравнение «Маркетинг / IT» */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 2px solid var(--border-strong); box-shadow: var(--shadow-hard-sm); background: var(--surface-raised); }
.duo > div { padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.duo > div:first-child { border-right: 2px solid var(--border); }
.duo > p { grid-column: 1 / -1; padding: 16px 20px; border-top: 2px solid var(--border); font-weight: 600; }

/* Сертификаты */
.certs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.certs li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 2px solid var(--border-strong); background: var(--surface-raised); font-size: 14px; line-height: 20px; font-weight: 600; }
.certs svg { flex: none; color: var(--brand-blue); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.countries li { padding: 10px 16px; background: var(--brand-navy); color: #fff; font-weight: 700; }

/* Плашка-заметка */
.note-bar { padding: 20px 24px; border: 2px solid var(--border-strong); background: var(--surface-alt); font-weight: 600; }
.note-bar--split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.terms li { padding: 18px 20px; border: 2px solid var(--border-strong); background: var(--surface-raised); }
.terms strong { display: block; margin-bottom: 6px; }

/* Цитата */
.quote-mark { width: 40px; height: 32px; color: var(--brand-blue); }

/* ---------- Подвал ---------- */
.footer { background: var(--brand-navy); color: #f1f3fa; border-top: 2px solid #2a3354; }
.footer .container { padding-top: 64px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 40px; }
.footer__cols { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.footer__logo img { height: 36px; width: auto; }
.footer__about { color: #a9b2cc; margin-top: 16px; }
.footer__title { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #a9b2cc; margin-bottom: 8px; }
.footer nav, .footer__contacts { display: flex; flex-direction: column; }
.footer a { color: #f1f3fa; text-decoration: none; padding: 6px 0; }
.footer a:hover { color: #8aa4ff; }
.footer__contacts span:not(.footer__title) { color: #a9b2cc; padding: 6px 0; }
.footer__title { display: block; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 2px solid #2a3354; font-size: 13px; color: #a9b2cc; }
.footer__bottom a { color: #a9b2cc; padding: 0; }

/* Нижняя панель на телефоне */
.mobile-cta { display: none; }
@media (max-width: 720px) {
  .mobile-cta { display: flex; position: sticky; bottom: 0; z-index: 30; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--brand-navy); border-top: 2px solid var(--brand-blue); }
  .mobile-cta .btn { flex: 1; min-height: 48px; padding: 0 12px; }
}

/* ---------- Адаптив разделов ---------- */
@media (max-width: 760px) {
  .section { padding: 64px 0; }
  .section--tight { padding: 52px 0; }
  .hero { padding: 40px 0 40px; }
  .page-hero { padding: 36px 0 32px; }
  .lead { font-size: 18px; line-height: 27px; }
  .case__head, .case__body { padding-left: 20px; padding-right: 20px; }
  .card--pad-lg, .service-row > div { padding: 22px; }
  .duo { grid-template-columns: 1fr; }
  .duo > div:first-child { border-right: 0; border-bottom: 2px solid var(--border); }
}

/* ---------- Анимация появления ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity 420ms ease-out, transform 420ms ease-out; }
  .reveal.is-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Печать ---------- */
@media print {
  .topbar, .header, .mobile-cta, .drawer, .form, .footer nav { display: none !important; }
  .section { padding: 24px 0; }
  .card, .case, .table-wrap { box-shadow: none !important; }
}

/* --- Правки после проверки --- */
.jump-links { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.jump-links::-webkit-scrollbar { display: none; }
.jump-links > * { flex: 0 0 auto; }
@media (min-width: 1000px) { .logos--lg { grid-template-columns: repeat(4, 1fr); } }