/* Дополнения к дизайн-системе: поведение страницы, адаптив, квиз и формы.
   Токены и компоненты - в base.css (он собирается из исходной дизайн-системы). */

html { scroll-behavior: smooth; }
body { margin: 0; text-wrap: pretty; }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-900); }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); }

/* — иконки контактов (трубка, Telegram) — */
.ico { width: 18px; height: 18px; flex: none; }
.ico-lg { width: 22px; height: 22px; }
.ico-tg { color: #229ED9; }
a:hover .ico-tg { color: var(--color-accent-900); }

/* — шапка — */
.nav { position: sticky; top: 0; z-index: 20; background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider); flex-wrap: wrap; row-gap: 8px; }
.nav-brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.nav-mark { width: 28px; height: 28px; flex: none; background: var(--color-accent);
  color: var(--color-bg); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; }
.nav-links { display: flex; gap: var(--space-4); }
.nav-phone { display: flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap;
  color: var(--color-text); }
.nav-phone:hover { color: var(--color-accent-700); }
.nav-tg { display: flex; align-items: center; margin: 0 var(--space-3) 0 var(--space-3);
  text-decoration: none; color: var(--color-text); }
@media (max-width: 860px) { .nav-links { display: none; } }
@media (max-width: 520px) { .nav-phone { display: none; } }

/* — контакты в блоке заявки (строкой, как в макете) — */
.contacts { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 24px; font-size: 15px; }
.contacts a { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.contacts a:hover { text-decoration: underline; }

/* — контакты в подвале — */
.foot-contacts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.foot-contacts a { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.foot-contacts a:hover { text-decoration: underline; }

/* — заголовки секций — */
.kicker { display: block; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600; color: var(--color-accent-700); margin: 0 0 12px; }
.rule { height: 1px; border: 0; margin: 0 0 24px; background: var(--color-divider); }
.h-sec { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(26px, 3vw, 38px); line-height: 1.05; letter-spacing: 0.02em;
  text-transform: uppercase; margin: 0; }
.lead { font-size: 15px; line-height: 24px; max-width: 62ch;
  color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.muted { color: color-mix(in srgb, var(--color-text) 70%, transparent); }

/* — раскрывающиеся строки — */
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
details .acc-plus { transition: transform .15s; }
details[open] .acc-plus { transform: rotate(45deg); }

/* — картинки экранов — */
.shot { width: 100%; aspect-ratio: 1600 / 833; object-fit: cover; display: block; }

/* — квиз — */
.quiz-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.quiz-bar { height: 2px; background: var(--color-neutral-200); margin: 12px 0 20px; }
.quiz-bar i { display: block; height: 2px; background: var(--color-accent); transition: width .2s; }
.quiz-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 24px; line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase;
  margin: 0 0 20px; }
.form-col { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row > label { font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.consent { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 18px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.err { font-size: 13px; line-height: 18px; color: #a4322b; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* — нижняя панель действий на телефоне — */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: none;
  gap: 10px; justify-content: center; padding: 10px 16px; background: var(--color-bg);
  border-top: 1px solid var(--color-divider); }
.sticky-cta a { flex: 1; max-width: 240px; text-align: center; text-decoration: none; }
@media (max-width: 720px) {
  .sticky-cta { display: flex; }
  body { padding-bottom: 68px; }
}

/* — юридические страницы — */
.doc { max-width: 76ch; padding: 48px 0 32px; }
.doc p { font-size: 15px; line-height: 25px; margin: 0 0 18px;
  color: color-mix(in srgb, var(--color-text) 85%, transparent); }
.doc p b { color: var(--color-text); }

/* — мелочи адаптива — */
@media (max-width: 430px) {
  .terms-val { font-size: 19px !important; }
}
@media (max-width: 560px) {
  .pain-body { padding-left: 0 !important; }
  .hero-actions .btn { width: 100%; }
}