/* База варианта А «Weiße Welt» (решение владельца студии 21.10.2026, approvals.md).
   С 01.11.2026 — по фирменному стилю TERGORA (брендбук Studio JetMotion, assets/brand/):
   Navy #132D3A — текст и заливки, Lime #B8DE18 — знак, акценты и главные кнопки, белый — фон.
   Лайм на белом текстом не ставится (контраст 1.6): на лайме текст Navy (9.22:1, брендбук стр. 8).
   Шрифт — Manrope 400/600/700/800. Брейкпоинты — tablet 45em и desktop 72em.
   tokens.css прежнего направления в этой ветке не подключается. */

:root {
  --navy: #132d3a;
  --navy-soft: #2f4856;
  --lime: #b8de18;
  --lime-deep: #a5c914;
  --white: #ffffff;
  --mist: #eef2f5;
  --mist-2: #e2e8ed;
  --clay: #e4ebf0;
  --line: rgba(19, 45, 58, 0.14);
  --control-line: #7d8e9a; /* границы полей: 3.4:1 на белом (WCAG 1.4.11) */
  --muted: #4b5f6d;
  --error: #b42318;
  --radius: 20px;
  --gutter: clamp(16px, 4vw, 48px);
  /* Отступы варианта А: шаг 4px, в имени — пиксели. Правила отступов берут значения только отсюда;
     геометрия значков и панели первого экрана — не отступы и живёт у себя. */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-28: 28px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-56: 56px;
  --sp-64: 64px;
  --space-section: clamp(72px, 10vw, 140px); /* сверху и снизу секции */
  --space-head: clamp(32px, 4vw, 56px);      /* заголовок секции → содержимое */
  --pad-card: clamp(24px, 3vw, 40px);        /* поля крупных карточек */
  --max: 1280px;
  --header-h: 76px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--navy);
  background: var(--white);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--sp-16)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-size: 17px; line-height: 1.55; background: var(--white); overflow-x: clip; }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

/* Заголовок: Manrope Extrabold строчными, как в брендбуке («Überschriften» — 800) */
.headline-a {
  font-size: clamp(34px, 4.6vw, 72px);
  font-weight: 800;
  /* 1.16, не меньше: лаймовая плашка строки ниже иначе срезает хвосты g и p строки выше */
  line-height: 1.16; letter-spacing: -0.02em;
  /* Без автопереноса: длинное слово — только мягкий разрыв */
  text-wrap: balance; overflow-wrap: break-word;
}
/* Название города переносом не рвём */
.headline-a mark {
  -webkit-hyphens: manual; hyphens: manual;
  /* Плашка начинается на 0.16em ниже верха строки — иначе закрывает хвосты g строки выше */
  background: linear-gradient(transparent 0.16em, var(--lime) 0.16em); color: var(--navy);
  padding: 0 0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- Кнопки ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
  padding: var(--sp-16) var(--sp-24); border: 0; border-radius: 2px; cursor: pointer;
  font-size: 16px; font-weight: 700; line-height: 1.1; text-decoration: none;
  transition: background-color 0.2s;
}
.button::after { content: '→'; transition: transform 0.25s var(--ease); }
.button:hover::after { transform: translateX(4px); }
.button--lime { background: var(--lime); color: var(--navy); }
.button--lime:hover { background: var(--lime-deep); }
.button--wide { width: 100%; }
.button[disabled] { opacity: 0.6; cursor: progress; }

/* Круглая кнопка-стрелка (карточки, «Weitere Leistungen») */
.round-arrow {
  position: relative; flex: none; display: inline-block; width: 52px; height: 52px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.92); box-shadow: 0 6px 18px rgba(19, 45, 58, 0.1);
  transition: background-color 0.25s;
}
.round-arrow::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -7px 0 0 -5px;
  border: solid var(--navy); border-width: 1.8px 1.8px 0 0;
}
.round-arrow::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.8px; margin: -1px 0 0 -9px;
  background: var(--navy); transform: rotate(-45deg);
}

/* ---------- Появление по прокрутке (reveal.js) ---------- */
.is-pending { opacity: 0; transform: translateY(48px); }
[data-reveal] { transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }