/* Удалка — лендинг. Рукописный CSS без сборки.
   Размеры шрифта — шаги шкалы Tailwind, отступы — только токены --s-*, радиусы — значения Tailwind. */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/manrope-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: 400 700;
  font-display: swap;
  src: url("/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/manrope-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;
}

:root {
  /* spacing (landing-page-design, B2) */
  --s-25: 2px;
  --s-50: 4px;
  --s-75: 8px;
  --s-100: 12px;
  --s-200: 16px;
  --s-300: 24px;
  --s-400: 32px;
  --s-500: 40px;
  --s-600: 48px;
  --s-700: 64px;
  --s-800: 80px;
  --s-900: 96px;

  /* radius (Tailwind) */
  --r-xs: 2px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --r-3xl: 24px;
  --r-full: 9999px;
  /* фирменный угол: как у знака, нижний левый острее */
  --r-brand: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-xs);

  /* colour: нейтральные несут страницу, зелёные — акценты */
  --bg: #fafaf7;
  --surface: #ffffff;
  --surface-2: #f2f3ee;
  --text: #141a17;
  --muted: #4b5550;
  --border: #e3e5de;
  --brand: #206452;
  --brand-hover: #1a5444;
  --brand-dark: #173c33;
  --accent: #c9e4b8;
  --accent-soft: #eaf1e7;
  --on-dark: #f3f7f0;
  /* состояния дня — те же цвета, что в кабинете */
  --st-active: #1f6b52;
  --st-idle: #b8862e;
  --st-lock: #33403c;
  --st-gap: #aab6ad;

  --shadow: 0 1px 2px rgb(20 26 23 / 0.04), 0 12px 32px -16px rgb(20 26 23 / 0.2);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --container: 1160px;
  --gutter: var(--s-300);
}
@media (min-width: 768px) {
  :root { --gutter: var(--s-500); }
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--s-900);
}
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
main { flex: 1; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
p, li, dd, figcaption, summary { text-wrap: pretty; }
a { color: inherit; }
ul[class], ol[class] { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.on-dark :focus-visible { outline-color: var(--accent); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex: none; fill: currentColor; }

.skip-link {
  position: absolute;
  left: var(--s-200);
  top: var(--s-200);
  z-index: 100;
  padding: var(--s-75) var(--s-100);
  background: var(--brand-dark);
  color: var(--on-dark);
  border-radius: var(--r-lg);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- buttons and links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-75);
  min-height: 44px;
  padding: var(--s-75) var(--s-100);
  border: 0;
  border-radius: var(--r-brand);
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 300ms var(--ease), transform 500ms var(--ease);
}
.btn:hover { background: var(--brand-hover); transform: translateY(-1px); }
.btn:active { transform: scale(0.98); }
.btn .icon { transition: transform 500ms var(--ease); }
.btn:hover .icon { transform: translateX(var(--s-25)); }
/* главный CTA крупнее: тач-цель 48px (правило Ника про крупный primary CTA и зоны ≥44px) */
.btn-lg { min-height: 48px; padding: var(--s-100) var(--s-200); }
@media (min-width: 640px) {
  .btn-lg { padding-inline: var(--s-300); }
}
.btn-sm { font-size: 0.875rem; line-height: 1.25rem; }
.on-dark .btn { background: var(--accent); color: var(--brand-dark); }
.on-dark .btn:hover { background: #d9edcc; }

.link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-50);
  min-height: 44px;
  color: var(--brand);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 300ms var(--ease), text-decoration-color 300ms var(--ease);
}
.link:hover { color: var(--brand-hover); text-decoration-thickness: 2px; }

/* ---------- floating nav ---------- */

.site-header { min-height: var(--s-800); }

.nav {
  position: fixed;
  top: var(--s-200);
  inset-inline: 0;
  z-index: 50;
  width: calc(100% - 2 * var(--s-200));
  max-width: max-content;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--s-200);
  padding: var(--s-75);
  background: rgb(255 255 255 / 0.74);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgb(20 26 23 / 0.08);
  border-radius: var(--r-2xl);
  box-shadow: 0 1px 2px rgb(20 26 23 / 0.04), 0 8px 24px -12px rgb(20 26 23 / 0.16);
}
@media (max-width: 959px) {
  .nav { max-width: none; justify-content: space-between; }
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-75);
  min-height: 44px;
  padding-inline: var(--s-50) var(--s-75);
  border-radius: var(--r-lg);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--brand-dark);
}
.brand img { width: 32px; height: 32px; }
.nav-links { display: none; }
.nav-actions { display: flex; align-items: center; gap: var(--s-75); }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-50);
  min-height: 44px;
  padding: var(--s-75) var(--s-100);
  border-radius: var(--r-lg);
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 300ms var(--ease), color 300ms var(--ease);
}
.nav-link:hover { background: rgb(20 26 23 / 0.05); color: var(--text); }
.nav-link[aria-current] { background: var(--accent-soft); color: var(--brand-dark); }
.nav-login { display: none; }
.nav-login .icon { width: 16px; height: 16px; }
@media (min-width: 960px) {
  .nav-links { display: flex; gap: var(--s-25); }
  .nav-login { display: inline-flex; }
}

/* меню-кнопка: две линии, превращаются в крестик */
.menu-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background-color 300ms var(--ease);
}
.menu-btn:hover { background: rgb(20 26 23 / 0.05); }
.menu-btn .bar {
  grid-area: 1 / 1;
  width: 18px;
  height: 2px;
  border-radius: var(--r-full);
  background: currentColor;
  transition: transform 500ms var(--ease);
}
.menu-btn .bar:first-child { transform: translateY(-4px); }
.menu-btn .bar:last-child { transform: translateY(4px); }
/* кнопка меню видна только там, где работает popover (ниже) */
.nav .menu-btn { display: none; }

.menu-list a:not(.btn) {
  display: flex;
  align-items: center;
  gap: var(--s-75);
  min-height: 48px;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  text-decoration: none;
}
.menu-list .menu-quiet a:not(.btn) {
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--muted);
}

/* Без popover (Safari до 17 и другие): ссылки меню стоят в потоке под навигацией, оверлея нет */
@supports not selector(:popover-open) {
  .menu {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding: var(--s-800) var(--gutter) 0;
    border: 0;
    background: none;
    color: inherit;
    overflow: visible;
  }
  .menu-head, .menu-list .menu-cta { display: none; }
  .menu .menu-list { display: flex; flex-wrap: wrap; gap: 0 var(--s-300); padding: 0; }
  .menu-list a:not(.btn) { min-height: 44px; font-size: 1rem; line-height: 1.5rem; }
}

/* Мобильное меню на нативном popover: работает и без JS, Esc закрывает */
@supports selector(:popover-open) {
  @media (max-width: 959px) {
    .nav .menu-btn { display: inline-grid; }
  }
  .menu {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: var(--s-200);
    border: 0;
    background: rgb(250 250 247 / 0.94);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    backdrop-filter: blur(24px) saturate(1.4);
    color: var(--text);
    overflow-y: auto;
    opacity: 0;
    transition: opacity 300ms var(--ease), display 500ms allow-discrete, overlay 500ms allow-discrete;
  }
  .menu:popover-open { opacity: 1; }
  @starting-style {
    .menu:popover-open { opacity: 0; }
  }
  .menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-75);
    border: 1px solid transparent;
  }
  .menu .menu-btn .bar:first-child { transform: rotate(45deg); }
  .menu .menu-btn .bar:last-child { transform: rotate(-45deg); }
  @starting-style {
    .menu:popover-open .menu-btn .bar:first-child { transform: translateY(-4px); }
    .menu:popover-open .menu-btn .bar:last-child { transform: translateY(4px); }
  }
  .menu:not(:popover-open) .menu-btn .bar:first-child { transform: translateY(-4px); }
  .menu:not(:popover-open) .menu-btn .bar:last-child { transform: translateY(4px); }
  .menu .menu-list {
    display: grid;
    gap: var(--s-50);
    padding: var(--s-400) var(--s-100) 0;
  }
  .menu-list .menu-quiet { margin-top: var(--s-300); }
  .menu-list .btn { width: 100%; margin-top: var(--s-200); }
  .menu-list li {
    opacity: 0;
    transform: translateY(var(--s-300));
    transition: opacity 500ms var(--ease), transform 500ms var(--ease);
  }
  .menu:popover-open .menu-list li { opacity: 1; transform: none; }
  @starting-style {
    .menu:popover-open .menu-list li { opacity: 0; transform: translateY(var(--s-300)); }
  }
  /* шаг 60 мс, вся очередь укладывается в 400 мс */
  .menu-list li:nth-child(2) { transition-delay: 60ms; }
  .menu-list li:nth-child(3) { transition-delay: 120ms; }
  .menu-list li:nth-child(4) { transition-delay: 180ms; }
  .menu-list li:nth-child(5) { transition-delay: 240ms; }
  .menu-list li:nth-child(n + 6) { transition-delay: 300ms; }
}
@media (min-width: 960px) {
  .menu { display: none; }
}

/* ---------- sections ---------- */

.section { padding-block: var(--s-800); }
@media (min-width: 1024px) {
  .section { padding-block: var(--s-900); }
}
.section-alt { background: var(--surface-2); }
.section-head { max-width: 680px; margin-bottom: var(--s-600); }
.eyebrow {
  margin-bottom: var(--s-200);
  color: var(--brand);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}
.h2 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  letter-spacing: -0.02em;
}
@media (min-width: 768px) {
  .h2 { font-size: 2.25rem; line-height: 2.5rem; }
}
.lead {
  margin-top: var(--s-200);
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.muted { color: var(--muted); }

/* ---------- hero ---------- */

.hero { padding-top: var(--s-700); }
@media (min-width: 1024px) {
  .hero { padding-top: var(--s-900); }
}
.hero h1 {
  max-width: 680px;
  /* запас сверху и снизу, чтобы точки «ё» и хвост «у» не обрезались градиентом */
  padding-block: var(--s-75);
  margin-block: calc(-1 * var(--s-75));
  font-size: 2.25rem;
  line-height: 2.5rem;
  letter-spacing: -0.025em;
  color: #000;
  background: linear-gradient(90deg, #000000, #666666);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (min-width: 640px) {
  .hero h1 { font-size: 3rem; line-height: 1; }
}
@media (forced-colors: active) {
  .hero h1 { background: none; -webkit-text-fill-color: currentColor; }
}
.hero-sub {
  max-width: 680px;
  margin-top: var(--s-300);
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.75rem;
}
@media (min-width: 1024px) {
  .hero-sub { font-size: 1.25rem; line-height: 1.75rem; }
}
.hero-actions { margin-top: var(--s-500); }
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-100) var(--s-300);
  margin-top: var(--s-300);
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}
.facts li, .checks li { display: flex; align-items: flex-start; gap: var(--s-75); }
.facts .icon, .checks .icon { color: var(--brand); }
.facts .icon { width: 20px; height: 20px; }
.hero-shot { margin-top: var(--s-700); }

/* ---------- screenshots ---------- */

.shot-frame {
  padding: var(--s-75);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow);
}
.shot-frame img {
  width: 100%;
  border-radius: var(--r-lg); /* 16 − 8 */
  outline: 1px solid rgb(20 26 23 / 0.06);
  outline-offset: -1px;
}
.shot figcaption {
  margin-top: var(--s-100);
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* ---------- problem / solution ---------- */

.compare { display: grid; gap: var(--s-300); }
@media (min-width: 768px) {
  .compare { grid-template-columns: 1fr 1fr; }
}
.compare-card {
  padding: var(--s-400);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
}
.compare-card.is-ours { background: var(--accent-soft); border-color: #d3e3c9; }
.compare-card h3 { font-size: 1.25rem; line-height: 1.75rem; }
.compare-card ul { display: grid; gap: var(--s-200); margin-top: var(--s-300); padding: 0; list-style: none; }
.compare-card li { display: flex; gap: var(--s-100); }
.compare-card .icon { margin-top: var(--s-25); color: var(--muted); }
.compare-card.is-ours .icon { color: var(--brand); }

/* ---------- features ---------- */

.feature { display: grid; gap: var(--s-500); }
.feature + .feature { margin-top: var(--s-800); }
.feature h3 {
  font-size: 1.5rem;
  line-height: 2rem;
  letter-spacing: -0.01em;
}
.feature-text { max-width: 680px; }
.feature-text p { margin-top: var(--s-100); color: var(--muted); font-size: 1.125rem; line-height: 1.75rem; }
.checks { display: grid; gap: var(--s-100); margin-top: var(--s-300); }
.checks .icon { margin-top: var(--s-25); }

.states {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-300);
}
.states div { display: grid; grid-template-columns: auto 1fr; gap: var(--s-25) var(--s-100); }
.states dt { display: contents; font-weight: 600; }
.states dt::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: var(--r-xs);
  background: var(--swatch);
  grid-row: 1;
  align-self: center;
}
.states dd { grid-column: 2; color: var(--muted); font-size: 0.875rem; line-height: 1.25rem; }
.st-active { --swatch: var(--st-active); }
.st-idle { --swatch: var(--st-idle); }
.st-lock { --swatch: var(--st-lock); }
.st-gap { --swatch: var(--st-gap); }

.caps-title { margin-top: var(--s-800); font-size: 1.5rem; line-height: 2rem; }
.caps {
  display: grid;
  gap: var(--s-500) var(--s-400);
  margin-top: var(--s-400);
}
@media (min-width: 640px) {
  .caps { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .caps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 639px) {
  .cap { display: grid; grid-template-columns: 40px 1fr; column-gap: var(--s-200); }
  .cap .cap-icon { grid-row: span 2; }
  .caps .cap h4 { margin-top: 0; }
  .caps { gap: var(--s-400); }
}
.cap-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-brand);
  background: var(--accent-soft);
  color: var(--brand-dark);
}
.cap h4 { margin: var(--s-200) 0 0; font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; }
.cap p { margin-top: var(--s-75); color: var(--muted); }

/* ---------- tagline reveal (B11) ---------- */

.tagline-section {
  background: var(--brand-dark);
  color: var(--on-dark);
  padding-block: var(--s-900);
}
.tagline {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
@media (min-width: 768px) {
  .tagline { font-size: 3rem; line-height: 1; }
}
.tagline em { font-style: normal; color: var(--accent); }
.tagline .w {
  color: rgb(243 247 240 / 0.3);
  transition: color 600ms var(--ease);
}
.tagline .w.on { color: var(--on-dark); }
.tagline em .w.on { color: var(--accent); }

/* ---------- how it works ---------- */

.steps { display: grid; gap: var(--s-500); counter-reset: step; }
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-400); }
}
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-brand);
  background: var(--brand-dark);
  color: var(--accent);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
}
.steps h3 { margin-top: var(--s-200); font-size: 1.25rem; line-height: 1.75rem; }
.steps p { margin-top: var(--s-75); color: var(--muted); }

/* ---------- trust ---------- */

.trust-list { display: grid; gap: var(--s-400) var(--s-600); }
@media (min-width: 768px) {
  .trust-list { grid-template-columns: 1fr 1fr; }
}
.trust-list li { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-200); }
.trust-list h3 { font-size: 1.125rem; line-height: 1.75rem; }
.trust-list p { margin-top: var(--s-50); color: var(--muted); }
.quote {
  max-width: 880px;
  margin: var(--s-600) 0 0;
  padding: var(--s-300);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
}
@media (min-width: 768px) {
  .quote { padding: var(--s-400); }
}
.quote p { font-size: 1.25rem; line-height: 1.75rem; font-weight: 500; }

/* ---------- pricing ---------- */

.price-card { display: grid; gap: var(--s-500); }
@media (min-width: 768px) {
  .price-card {
    padding: var(--s-600);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-3xl);
    box-shadow: var(--shadow);
  }
}
@media (min-width: 1024px) {
  .price-card { grid-template-columns: 1fr 1fr; gap: var(--s-600); }
}
.price-label { font-weight: 600; }
.price-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-75);
  margin-top: var(--s-75);
  font-size: 3rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.price-period { color: var(--muted); font-size: 1.125rem; line-height: 1.75rem; font-weight: 500; letter-spacing: 0; }
.price-extra { margin-top: var(--s-200); font-size: 1.125rem; line-height: 1.75rem; }
.price-extra strong { font-weight: 700; }
.price-incl { margin-top: var(--s-400); font-weight: 600; }
.price-card .checks { margin-top: var(--s-200); }

.calc-box {
  display: flex;
  flex-direction: column;
  gap: var(--s-300);
  padding: var(--s-300);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow);
}
@media (min-width: 768px) {
  .calc-box { background: var(--surface-2); border-color: transparent; box-shadow: none; }
}
@media (min-width: 768px) {
  .calc-box { padding: var(--s-400); }
}
.calc-label { display: block; font-weight: 600; }
.stepper { display: flex; align-items: center; gap: var(--s-75); margin-top: var(--s-100); }
.stepper button, .stepper input {
  height: 48px;
  border: 1px solid #808882;
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.stepper button {
  display: grid;
  place-items: center;
  width: 48px;
  padding: 0;
  cursor: pointer;
  transition: background-color 300ms var(--ease), transform 500ms var(--ease);
}
.stepper button:hover { background: var(--accent-soft); }
.stepper button:active { transform: scale(0.96); }
.stepper button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.stepper button[aria-disabled="true"]:hover { background: var(--surface); }
.stepper input {
  width: 96px;
  padding: 0 var(--s-75);
  text-align: center;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input[aria-invalid="true"] { border-color: #b3261e; }
.calc-hint { margin-top: var(--s-75); color: var(--muted); font-size: 0.875rem; line-height: 1.25rem; }
.calc-error { margin-top: var(--s-75); color: #b3261e; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.calc-note { margin-top: var(--s-75); color: var(--text); font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.calc-total { color: var(--muted); }
.calc-total output {
  display: block;
  margin-top: var(--s-50);
  color: var(--text);
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.calc-box .btn { align-self: stretch; }
@media (min-width: 768px) {
  .calc-box .btn { align-self: flex-start; }
}
.price-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.price-table caption { margin-bottom: var(--s-100); text-align: left; font-weight: 600; }
.price-table th, .price-table td { padding: var(--s-75) 0; text-align: left; }
.price-table td:last-child, .price-table th:last-child { text-align: right; }
.price-table thead th { color: var(--muted); font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.price-table tbody tr { border-top: 1px solid var(--border); }
.price-vat { margin-top: var(--s-300); color: var(--muted); font-size: 0.875rem; line-height: 1.25rem; }

/* ---------- FAQ ---------- */

.faq { display: grid; gap: var(--s-400); }
.faq .section-head { margin-bottom: 0; }
@media (min-width: 1024px) {
  .faq { grid-template-columns: 4fr 7fr; gap: var(--s-700); }
  .faq .section-head { position: sticky; top: var(--s-900); align-self: start; }
}
.faq-list { display: grid; gap: var(--s-75); }
.faq-list details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-200);
  min-height: 56px;
  padding: var(--s-200) var(--s-300);
  border-radius: var(--r-xl);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: background-color 300ms var(--ease);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { background: rgb(20 26 23 / 0.03); }
.faq-list summary .icon { color: var(--brand); transition: transform 500ms var(--ease); }
.faq-list details[open] summary .icon { transform: rotate(45deg); }
.faq-list details p { padding: 0 var(--s-300) var(--s-300); color: var(--muted); }

/* ---------- contact ---------- */

.contact-card {
  display: grid;
  gap: var(--s-500);
  padding: var(--s-400) var(--s-300);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3xl);
  box-shadow: var(--shadow);
}
@media (min-width: 768px) {
  .contact-card { padding: var(--s-600); }
}
@media (min-width: 1024px) {
  .contact-card { grid-template-columns: 1fr 1fr; gap: var(--s-700); align-items: center; }
}
.contact-facts { flex-direction: column; }
.contact-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-100);
}
.contact-note { color: var(--muted); font-size: 0.875rem; line-height: 1.25rem; }
.contact-note strong { color: var(--text); font-weight: 600; user-select: all; }

/* ---------- footer ---------- */

.footer { padding-block: var(--s-600); }
.footer hr { margin: 0 0 var(--s-600); border: 0; height: 1px; background: var(--border); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-300); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s-75) var(--s-300); font-size: 0.875rem; line-height: 1.25rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-underline-offset: 4px; transition: color 300ms var(--ease); }
.footer-links a:hover, .footer-links a[aria-current] { color: var(--text); }
.footer-copy { color: var(--muted); font-size: 0.875rem; line-height: 1.25rem; }

/* ---------- small pages (404, privacy) ---------- */

.page { padding-top: var(--s-700); padding-bottom: var(--s-800); }
.page h1 { font-size: 1.875rem; line-height: 2.25rem; letter-spacing: -0.025em; max-width: 680px; }
@media (min-width: 640px) {
  .page h1 { font-size: 3rem; line-height: 1; }
}
.prose { max-width: 680px; }
.prose h2 { margin-top: var(--s-600); font-size: 1.5rem; line-height: 2rem; }
.prose p, .prose ul { margin-top: var(--s-200); color: var(--muted); }
.prose ul { padding-left: var(--s-300); }
.prose li + li { margin-top: var(--s-75); }
.prose a { color: var(--brand); text-underline-offset: 4px; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-200) var(--s-300); margin-top: var(--s-500); }

/* ---------- scroll reveal (только с JS, только ниже первого экрана) ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(var(--s-400));
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- reduced motion: движение убираем, короткие затухания оставляем ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { transform: none; transition: opacity 200ms var(--ease); }
  .btn, .btn .icon, .stepper button { transition: background-color 200ms var(--ease); }
  .btn:hover, .btn:hover .icon, .btn:active, .stepper button:active { transform: none; }
  .menu-list li, .menu-list li:nth-child(n) { transform: none; transition: opacity 200ms var(--ease); transition-delay: 0ms; }
  @starting-style {
    .menu:popover-open .menu-list li { transform: none; }
  }
  .menu { transition: opacity 200ms var(--ease), display 200ms allow-discrete, overlay 200ms allow-discrete; }
  /* иконки меню и FAQ меняют состояние сразу, без поворота */
  .menu-btn .bar, .faq-list summary .icon { transition: none; }
  .tagline .w { transition: none; }
}