/* region MODULE_CONTRACT [DOMAIN(8): VisualTheme; CONCEPT(9): QuietMystery; TECH(9): CSS3, CustomProperties] */
/*
 * @modulecontract
 * @purpose To give the landing and the offer page the chosen "Тихая тайна" mood — a deep night-blue canvas, soft moonlight glow and a slowly breathing starfield — while keeping the legal text perfectly legible and printable.
 * @scope Design tokens, layout shell, header and navigation, hero, cards, price block, requisites, contact cards, the offer showcase on the landing, the public offer document styling used by offer.html, the draft banner, footer, responsive breakpoints, print styles and reduced-motion fallbacks.
 * @input Class names and data attributes produced by index.html and offer.html, driven by script.js.
 * @output A dark, calm, readable visual system with no external resources, shared by both public pages.
 * @invariants
 * - No external resource is referenced: no web font, no CDN, no background image loaded over the network.
 * - Body text contrast stays high enough to read long legal paragraphs comfortably.
 * - Every animation is disabled under prefers-reduced-motion: reduce.
 * - The payment button styled as disabled NEVER looks clickable.
 * - The offer showcase and the offer document share the one left edge and the single --measure token, so the two pages look like one site.
 * @rationale
 * Q: Why system font stacks instead of a downloaded typeface?
 * A: A web font would add a network dependency, a privacy leak and a flash of unstyled text; the page must work offline and from the file system. A serif stack for headings gives the old-document feel for free.
 * Q: Why is one stylesheet shared by two pages instead of a separate sheet for the offer?
 * A: The offer page reuses the same shell, header, footer, buttons and print rules as the landing. A second sheet would duplicate the theme and let the two pages drift apart visually.
 * @changes
 * LAST_CHANGE: [v3.0.0 - Добавлена витрина оферты для лэндинга (.offer-teaser__points, .offer-teaser__action) в единой мере --measure; блок .offer теперь обслуживает отдельную страницу offer.html.]
 */
/* #endregion MODULE_CONTRACT */
/* GREP_SUMMARY: css theme, тихая тайна, тёмная тема, night sky, starfield, glow, свечение, карточки, оферта, витрина оферты, offer-teaser, offer.html, details, оглавление оферты, единая мера текста, scroll-padding, липкая шапка, action bar, skip link, dev banner, responsive, print, reduced motion, focus */
/* STRUCTURE: ▶ :root tokens(--measure, --header-offset) → ○ base+reset+skip-link → ○ background layers(canvas+veil+grain) → ○ shell/header/nav(≤720px плотный перенос) → ○ buttons(primary|ghost|disabled) → ○ hero + fact-row ⇢ service(list+steps) ⇢ price-card ⇢ requisites ⇢ contact-card → ○ offer-teaser(витрина лэндинга: пункты 5/6/7/9/12 + кнопка на offer.html) → ○ offer(grid: липкое TOC ‖ пункты, h3 в summary) → ○ action-bar(≤720px) → ○ dev-banner → ○ footer → ○ @media(960|720|520) → ○ prefers-reduced-motion → ○ print(оферта в одну колонку, служебное скрыто) */

/* region DESIGN_TOKENS [DOMAIN(8): DesignSystem; CONCEPT(9): Tokenisation; TECH(9): CustomProperties] */
:root {
  /* Night palette: near-black navy to deep indigo, with cool moonlight text. */
  --ink-950: #03050c;
  --ink-900: #05070f;
  --ink-800: #080d1a;
  --ink-700: #0c1224;
  --ink-600: #121a33;

  /* Panel and line colours keep everything slightly translucent so the stars show through. */
  --panel: rgba(12, 18, 36, 0.62);
  --panel-strong: rgba(14, 21, 42, 0.86);
  --line: rgba(150, 175, 235, 0.14);
  --line-strong: rgba(160, 185, 245, 0.26);

  /* Text: bright moonlight for headings, cool grey-blue for body, dim for meta. */
  --text: #e4eaff;
  --text-soft: #b8c4e6;
  --text-muted: #8d9cc4;
  --text-dim: #6d7ba1;

  /* Accent glow used sparingly: buttons, active markers, focus rings. */
  --accent: #b6c6ff;
  --accent-strong: #d9e3ff;
  --accent-deep: #6f83c9;
  --accent-glow: rgba(150, 175, 255, 0.28);
  --danger-soft: #f0c98c;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --shell: 1120px;
  --gutter: 24px;
  --section-gap: 88px;
  /* Единая мера читаемого текста. Раньше ширина задавалась четырьмя разными значениями
     (62ch, 70ch, 860px, 900px), из-за чего левые края блоков не совпадали: замер давал 177, 287 и 283 px. */
  --measure: 66ch;
  /* Реальная высота липкой шапки. Проставляется script.js при загрузке и изменении размера;
     значение здесь — безопасное умолчание до первого замера. */
  --header-offset: 84px;

  --font-display: Georgia, "Iowan Old Style", "Times New Roman", "Noto Serif", serif;
  --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "SFMono-Regular", "Courier New", monospace;

  --shadow-soft: 0 18px 48px rgba(2, 5, 14, 0.55);
  --shadow-glow: 0 10px 40px rgba(120, 150, 255, 0.16);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --speed: 240ms;
}
/* #endregion DESIGN_TOKENS */

/* region BASE [DOMAIN(7): Foundation; CONCEPT(7): Reset; TECH(8): CSS3] */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Компенсация липкой шапки при переходе по якорю. Без неё на телефоне заголовок раздела
     уходил под шапку: высота шапки 131px против измеренного перекрытия 27-62px. */
  scroll-padding-top: calc(var(--header-offset) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--ink-900);
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.68;
  letter-spacing: 0.005em;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: 0.005em;
}

h1 {
  font-size: clamp(2.1rem, 5vw, 3.3rem);
}

h2 {
  font-size: clamp(1.65rem, 3.4vw, 2.3rem);
}

h3 {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(150, 175, 255, 0.28);
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

a:hover {
  color: var(--accent-strong);
  border-bottom-color: var(--accent-strong);
}

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: rgba(150, 175, 255, 0.3);
  color: #ffffff;
}

/* Ссылка «к содержанию»: скрыта от глаза, но появляется при клавиатурном фокусе. */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 40;
  padding: 12px 22px;
  border-bottom: none;
  border-radius: 0 0 var(--radius-md) 0;
  background: var(--accent);
  color: #0a1024;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
  top: 0;
}
/* #endregion BASE */

/* region BACKGROUND_LAYERS [DOMAIN(8): VisualTheme; CONCEPT(9): QuietMystery; TECH(8): Canvas, CSSGradient] */
.starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}

/* Radial moonlight pools plus a vignette; the whole page floats on top of this. */
.veil {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 18% -8%, rgba(78, 104, 190, 0.3), transparent 62%),
    radial-gradient(880px 520px at 88% 6%, rgba(126, 96, 190, 0.2), transparent 60%),
    radial-gradient(1000px 700px at 50% 108%, rgba(46, 72, 150, 0.24), transparent 64%),
    linear-gradient(180deg, var(--ink-950) 0%, var(--ink-900) 45%, var(--ink-950) 100%);
  opacity: 0.94;
}

/* Very light film grain keeps large dark areas from banding. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

.site-header,
main,
.site-footer,
.dev-banner,
.noscript-note {
  position: relative;
  z-index: 1;
}
/* #endregion BACKGROUND_LAYERS */

/* region LAYOUT_SHELL [DOMAIN(7): Layout; CONCEPT(7): Rhythm; TECH(7): CSSGrid] */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: var(--section-gap) 0;
}

.section--accent {
  background: linear-gradient(180deg, rgba(9, 14, 30, 0) 0%, rgba(11, 17, 36, 0.72) 22%, rgba(11, 17, 36, 0.72) 78%, rgba(9, 14, 30, 0) 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section__title {
  max-width: 22ch;
}

.section__lead {
  max-width: var(--measure);
  color: var(--text-soft);
}

.section__foot {
  margin-top: 26px;
  color: var(--text-muted);
  font-size: 0.94rem;
  max-width: var(--measure);
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
}

.grid {
  display: grid;
  gap: 20px;
  margin-top: 30px;
}

.grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* #endregion LAYOUT_SHELL */

/* region SITE_HEADER [DOMAIN(7): Navigation; CONCEPT(7): AnchorMenu; TECH(8): BackdropFilter] */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 7, 15, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 70px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-bottom: none;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.05rem;
  white-space: nowrap;
}

.brand__mark {
  color: var(--accent);
  text-shadow: 0 0 14px var(--accent-glow);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
}

.nav__link {
  padding: 7px 12px;
  border-bottom: none;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: 0.92rem;
  transition: color var(--speed) var(--ease), background var(--speed) var(--ease);
}

.nav__link:hover {
  color: var(--text);
  background: rgba(150, 175, 255, 0.08);
}

.site-header .button--compact {
  flex: 0 0 auto;
}
/* #endregion SITE_HEADER */

/* region BUTTONS [DOMAIN(8): Interaction; CONCEPT(8): ClearAffordance; TECH(8): CSS3] */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.button--compact {
  padding: 10px 18px;
  font-size: 0.9rem;
}

.button--primary {
  border-bottom: 1px solid transparent;
  background: linear-gradient(180deg, #dfe7ff 0%, #b7c6f5 100%);
  color: #0a1024;
  box-shadow: var(--shadow-glow);
}

.button--primary:hover {
  color: #05080f;
  transform: translateY(-1px);
  box-shadow: 0 14px 44px rgba(140, 168, 255, 0.34);
}

.button--ghost {
  border-color: var(--line-strong);
  background: rgba(150, 175, 255, 0.05);
  color: var(--text);
  border-bottom: 1px solid var(--line-strong);
}

.button--ghost:hover {
  border-color: var(--accent);
  background: rgba(150, 175, 255, 0.12);
  color: var(--accent-strong);
}

/* The payment stub: unmistakably not clickable while no real payment URL is configured. */
.button[data-payment-todo] {
  border-color: rgba(240, 201, 140, 0.4);
  border-style: dashed;
  background: rgba(240, 201, 140, 0.07);
  color: var(--danger-soft);
  box-shadow: none;
  cursor: not-allowed;
}

.button[data-payment-todo]:hover {
  transform: none;
  background: rgba(240, 201, 140, 0.07);
  color: var(--danger-soft);
}

/* #endregion BUTTONS */

/* region HERO [DOMAIN(9): FirstImpression; CONCEPT(8): ValueProposition; TECH(8): CSSGrid] */
.section--hero {
  padding-top: calc(var(--section-gap) + 24px);
}

/* Отдельного max-width у .hero нет намеренно: класс стоит на том же элементе, что .shell,
   поэтому своё значение переопределило бы 1120px и контейнер растянулся бы во всю ширину окна.
   Раньше здесь стояло 900px, из-за чего левый край первого экрана уезжал на 287px и не совпадал
   с карточками услуги и цены (177px). Длину строки ограничивает --measure. */
.hero__title {
  margin-bottom: 12px;
  text-shadow: 0 0 46px rgba(120, 150, 255, 0.28);
}

.hero__tagline {
  margin-bottom: 22px;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.1vw, 1.35rem);
  font-style: italic;
}

.hero__lead {
  max-width: var(--measure);
  color: var(--text-soft);
  font-size: 1.04rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 30px 0 14px;
}

.hero__note {
  max-width: var(--measure);
  color: var(--text-muted);
  font-size: 0.92rem;
}

.fact-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 44px 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--line);
}

.fact {
  padding: 18px 20px;
  background: var(--panel);
}

.fact__key {
  margin: 0 0 6px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fact__value {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
}
/* #endregion HERO */

/* region CARDS_AND_LISTS [DOMAIN(8): ContentBlocks; CONCEPT(8): Scanability; TECH(8): CSSGrid] */
/* Lists carry the service description and the access sequence. Cards were removed on purpose:
   the page states facts directly instead of dressing them up as benefits. */
.list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list li {
  position: relative;
  padding: 6px 0 6px 30px;
  color: var(--text-soft);
  font-size: 0.97rem;
}

.list--check li::before {
  content: "✦";
  position: absolute;
  left: 4px;
  color: var(--accent);
  text-shadow: 0 0 12px var(--accent-glow);
}

.list--steps {
  counter-reset: step;
}

.list--steps li {
  counter-increment: step;
  padding-left: 38px;
}

.list--steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  color: var(--accent-deep);
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.step__name {
  color: var(--text);
}

.service-list {
  max-width: var(--measure);
  margin-top: 18px;
}

.service-steps {
  max-width: var(--measure);
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
/* #endregion CARDS_AND_LISTS */

/* region PRICE_BLOCK [DOMAIN(9): Pricing; CONCEPT(9): TransparentCost; TECH(8): CSSGrid] */
.price-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 28px;
  margin-top: 30px;
  padding: 34px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(20, 29, 58, 0.9) 0%, rgba(9, 14, 30, 0.86) 100%);
  box-shadow: var(--shadow-soft), var(--shadow-glow);
}

.price-card__label {
  margin: 0 0 8px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.price-card__value {
  margin: 0 0 8px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1.06;
  text-shadow: 0 0 40px rgba(130, 160, 255, 0.3);
}

.price-card__words {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 0.94rem;
}

.price-card__note {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.94rem;
}

.price-card__action {
  align-self: center;
  justify-self: start;
}
/* #endregion PRICE_BLOCK */

/* region REQUISITES [DOMAIN(9): LegalIdentity; CONCEPT(9): ContractorDisclosure; TECH(7): CSSGrid] */
.requisites {
  margin: 30px 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--panel);
}

.requisites__row {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
}

.requisites__row:last-child {
  border-bottom: none;
}

.requisites__key {
  margin: 0;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.requisites__value {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  word-break: break-word;
}

.requisites-list {
  margin: 10px 0 16px;
}

.requisites-list li {
  padding-left: 18px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.requisites-list li::before {
  content: "·";
  position: absolute;
  left: 2px;
  color: var(--accent-deep);
}
/* #endregion REQUISITES */

/* region CONTACTS [DOMAIN(8): Communication; CONCEPT(8): ContactChannels; TECH(8): CSSGrid] */
.contact-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px;
  border: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  color: var(--text-soft);
  transition: transform var(--speed) var(--ease), border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.contact-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  color: var(--text);
  box-shadow: var(--shadow-glow);
}

.contact-card__icon {
  color: var(--accent);
  font-size: 1.3rem;
  text-shadow: 0 0 16px var(--accent-glow);
}

.contact-card__label {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.contact-card__value {
  color: var(--text);
  font-size: 1.02rem;
  word-break: break-word;
}
/* #endregion CONTACTS */

/* region OFFER_SHOWCASE [DOMAIN(9): ContractLaw; CONCEPT(9): SingleSourceOfLegalText; TECH(8): CSS3] */
/* Витрина договора на лэндинге: полный текст живёт на отдельной странице offer.html, поэтому здесь
   остаётся только вход в документ. Мера текста и левая кромка — те же, что у остальных блоков
   страницы (--measure), иначе витрина выпадала бы из общего ритма и ломала бы линию чтения. */
.offer-teaser__points {
  max-width: var(--measure);
  margin-top: 26px;
}

.offer-teaser__action {
  margin: 26px 0 0;
}
/* #endregion OFFER_SHOWCASE */

/* region OFFER_DOCUMENT [DOMAIN(10): ContractLaw; CONCEPT(9): ReadableContract; TECH(8): Details] */
/* Двухколоночный документ страницы offer.html: липкое оглавление слева, пункты справа. Ширину даёт .shell (1120px):
   собственный max-width здесь переопределил бы её, потому что класс стоит на том же элементе.
   Раньше это была центрированная колонка 860px, из-за чего левый край оферты (283px) не совпадал
   с карточками страницы (177px), а двенадцать разделов шли сплошным полотном. */
.offer {
  display: grid;
  grid-template-columns: minmax(0, 264px) minmax(0, 1fr);
  column-gap: 40px;
  align-items: start;
}

.offer > .eyebrow,
.offer > .section__title,
.offer > .section__lead,
.offer > .offer__toolbar,
.offer > .offer__foot {
  grid-column: 1 / -1;
}

.offer__toc {
  grid-column: 1;
  position: sticky;
  top: calc(var(--header-offset) + 20px);
  margin: 0;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
}

.offer__toc-title {
  margin: 0 0 12px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.offer__toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.offer__toc-list li {
  margin: 0;
  padding: 4px 0;
}

.offer__toc-list a {
  display: block;
  border-bottom: none;
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.offer__toc-list a:hover {
  color: var(--accent-strong);
}

.offer__clauses {
  grid-column: 2;
  min-width: 0;
}

.offer__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 26px;
}

.offer__section {
  grid-column: 2;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  scroll-margin-top: calc(var(--header-offset) + 16px);
}

/* Заголовок раздела оферты: h3 внутри summary, чтобы документ был навигируем скринридером. */
.offer__heading {
  margin: 0;
  color: inherit;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 500;
  line-height: 1.3;
}

.offer__section[open] {
  border-color: var(--line-strong);
}

.offer__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.06rem;
  cursor: pointer;
  list-style: none;
}

.offer__summary::-webkit-details-marker {
  display: none;
}

.offer__summary::after {
  content: "▾";
  flex: 0 0 auto;
  color: var(--accent-deep);
  transition: transform var(--speed) var(--ease);
}

.offer__section[open] .offer__summary::after {
  transform: rotate(180deg);
}

.offer__summary:hover {
  color: var(--accent-strong);
}

.offer__body {
  padding: 0 22px 18px;
  border-top: 1px solid var(--line);
}

.offer__body p {
  margin: 14px 0 0;
  color: var(--text-soft);
  font-size: 0.96rem;
  max-width: var(--measure);
}

.offer__body strong {
  color: var(--text);
  font-weight: 600;
}

.offer__foot {
  margin-top: 22px;
  padding: 18px 22px;
  border-left: 2px solid var(--accent-deep);
  color: var(--text-muted);
  font-size: 0.92rem;
}
/* #endregion OFFER_DOCUMENT */

/* region MOBILE_ACTION_BAR [DOMAIN(9): Conversion; CONCEPT(8): AlwaysAvailableAction; TECH(8): CSS3] */
/* Липкая нижняя полоса с фактически доступным действием. Только телефон и только когда основное
   действие первого экрана ушло из виду: иначе на странице в несколько тысяч пикселей покупатель
   остаётся без кнопки на много экранов прокрутки. Управляется атрибутом hidden. */
.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: none;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: rgba(5, 7, 15, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.action-bar__button {
  width: 100%;
}

@media (max-width: 720px) {
  .action-bar:not([hidden]) {
    display: block;
  }
}
/* #endregion MOBILE_ACTION_BAR */

/* region DEV_BANNER [DOMAIN(8): Maintainability; CONCEPT(9): DraftSafety; TECH(7): CSS3] */
.dev-banner {
  margin: 0;
  padding: 20px var(--gutter) 22px;
  border-bottom: 1px solid rgba(240, 201, 140, 0.35);
  background: rgba(58, 44, 18, 0.66);
  color: #f6e3c2;
}

.dev-banner__title {
  max-width: var(--shell);
  margin: 0 auto 6px;
  color: #ffe7bd;
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.dev-banner__text,
.dev-banner__list {
  max-width: var(--shell);
  margin: 0 auto 10px;
  font-size: 0.9rem;
}

.dev-banner__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 4px 22px;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.dev-banner__list li {
  padding: 3px 0;
}

.dev-banner__list code {
  color: #ffe7bd;
}

.dev-banner__hint {
  color: rgba(246, 227, 194, 0.72);
}
/* #endregion DEV_BANNER */

/* region FOOTER_AND_NOSCRIPT [DOMAIN(7): LegalIdentity; CONCEPT(8): PersistentDisclosure; TECH(7): CSSGrid] */
.site-footer {
  margin-top: 40px;
  padding: 46px 0 40px;
  border-top: 1px solid var(--line);
  background: rgba(4, 6, 14, 0.72);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.site-footer__brand {
  margin: 0 0 8px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.site-footer__line {
  margin: 0 0 6px;
  color: var(--text-muted);
  font-size: 0.9rem;
  word-break: break-word;
}

.noscript-note {
  max-width: var(--shell);
  margin: 0 auto 30px;
  padding: 16px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 0.92rem;
}
/* #endregion FOOTER_AND_NOSCRIPT */

/* region RESPONSIVE [DOMAIN(7): Adaptivity; CONCEPT(7): MobileFirst; TECH(8): MediaQueries] */
@media (max-width: 960px) {
  :root {
    --section-gap: 68px;
  }

  .grid,
  .grid--three,
  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .price-card {
    grid-template-columns: minmax(0, 1fr);
    padding: 26px;
  }

  .price-card__action {
    justify-self: stretch;
  }

  .price-card__action .button {
    width: 100%;
  }

  .fact-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Оглавление перестаёт быть боковой колонкой и встаёт перед пунктами оферты. */
  .offer {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  .offer__toc {
    grid-column: 1;
    position: static;
    margin-bottom: 20px;
  }

  .offer__clauses {
    grid-column: 1;
  }
}

@media (max-width: 720px) {
  body {
    font-size: 16px;
  }

  .site-header__inner {
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px 0;
  }

  /* Навигация переносится по-прежнему, но плотно: все пять ссылок остаются видимыми без
     горизонтальной прокрутки, а шапка укладывается в 100px вместо прежних 131px,
     которые перекрывали заголовки разделов при переходе по якорю. */
  .nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: 0;
  }

  .nav__link {
    flex: 0 0 auto;
    padding: 3px 9px;
    font-size: 0.84rem;
  }

  .grid,
  .grid--three,
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .requisites__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 14px 18px;
  }

  .dev-banner__list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Запас под липкую полосу действия, чтобы она не перекрывала последние строки подвала. */
  .site-footer {
    padding-bottom: 104px;
  }
}

@media (max-width: 520px) {
  .fact-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__actions .button,
  .price-card__action .button {
    width: 100%;
  }

  .offer__summary,
  .offer__body {
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* #endregion RESPONSIVE */

/* region REDUCED_MOTION [DOMAIN(8): Accessibility; CONCEPT(9): MotionSafety; TECH(8): MediaQueries] */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .contact-card:hover,
  .button--primary:hover {
    transform: none;
  }
}
/* #endregion REDUCED_MOTION */

/* region PRINT_STYLES [DOMAIN(9): LegalDocument; CONCEPT(9): PaperCopy; TECH(8): MediaQueries] */
@media print {
  .starfield,
  .veil,
  .grain,
  .site-header,
  .dev-banner,
  .noscript-note,
  .skip-link,
  .action-bar,
  .offer__toolbar,
  .offer__toc,
  .hero__actions,
  .price-card__action,
  .site-footer {
    display: none !important;
  }

  /* Документ печатается в одну колонку: липкое оглавление на бумаге бессмысленно.
     Сами разделы перед печатью раскрывает controller (beforeprint), иначе на бумагу
     попали бы двенадцать свёрнутых заголовков без текста. */
  .offer {
    display: block;
  }

  body {
    background: #ffffff;
    color: #111111;
    font-size: 11.5pt;
  }

  .section,
  .section--accent {
    padding: 12pt 0;
    background: none;
    border: none;
  }

  .shell {
    max-width: none;
    padding: 0;
  }

  h1,
  h2,
  h3,
  .hero__title,
  .price-card__value {
    color: #000000;
    text-shadow: none;
  }

  .offer__section,
  .price-card,
  .requisites,
  .fact,
  .contact-card {
    border: 1px solid #cccccc;
    background: #ffffff;
    box-shadow: none;
    break-inside: avoid;
  }

  .offer__section {
    border: none;
  }

  .offer__summary {
    padding: 8pt 0 2pt;
    color: #000000;
    font-weight: 700;
  }

  .offer__heading {
    font-size: 12pt;
  }

  .offer__summary::after {
    content: "";
  }

  .offer__body {
    padding: 0;
    border-top: none;
  }

  .offer__body p,
  .list li,
  .site-footer__line,
  a {
    color: #1a1a1a;
  }

  .list--check li::before {
    color: #444444;
    text-shadow: none;
  }
}
/* #endregion PRINT_STYLES */