/* Contact Us — mockup pumtl23-contact-us-desktop [3:1342]. */

.hero--contact { position: relative; overflow: hidden; padding-block: var(--space-80); }
.hero__watermark--contact { left: 197px; width: auto; text-align: left; }
.hero__lead--bright { color: var(--color-white); line-height: 24px; }
.hero__note { margin: 0; font-size: var(--fs-ui); line-height: 18px; color: var(--color-muted); }
.hero__contact { margin: 0; font-size: var(--fs-body); line-height: 24px; color: var(--color-white); }
.hero__contact a { color: var(--color-brand-light); }
/* mirror-reflection [72:344] — в макете это не шар с чёткой кромкой, а мягкое
   пятно 320×320 под blur. Свечение задаёт общий .hero-blob. */
.hero__mirror { width: 320px; height: 320px; flex: none; align-self: flex-end; }

.contact { background: var(--color-bg); }
.contact__split { display: flex; gap: var(--space-24); align-items: flex-start; }

.contact__panel {
  width: 384px; flex: none;
  display: flex; flex-direction: column; gap: var(--space-16); align-items: flex-start;
  padding: var(--space-32); border-radius: var(--radius-xl);
  background: var(--fill-glass-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.contact__panel-title {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h5); line-height: 36px; text-transform: uppercase; color: var(--color-white);
}
.contact__panel-text { margin: 0; font-size: var(--fs-body); line-height: 24px; color: var(--color-muted); }
.pill-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-16);
  border-radius: var(--radius-4xl);
  background: var(--fill-glass-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  font-size: var(--fs-small); font-weight: 700; line-height: 17px;
  color: var(--color-brand-light); text-decoration: none;
  transition: box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pill-link:hover { color: var(--color-brand-light); box-shadow: inset 0 0 0 1px var(--color-border-brand-strong); }
.contact__guidance { display: grid; gap: var(--space-8); }
.contact__guidance li {
  position: relative; padding-left: var(--space-16);
  font-size: var(--fs-small); line-height: 20px; color: var(--color-muted);
}
.contact__guidance li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--color-brand);
}
.contact__support { margin: 0; font-size: var(--fs-small); line-height: 20px; color: var(--color-muted); }

/* contact-form-panel [72:417] — в макете панель белая (#ffffff) с тёмным текстом
   и светлыми полями #f3f0ff / #e8e4f0. У нас она была тёмной: цвета разъехались
   с макетом, а надписи полей читались как на тёмной подложке. */
.contact__form-panel {
  flex: 1;
  display: flex; flex-direction: column; gap: var(--space-16);
  padding: var(--space-32); border-radius: var(--radius-xl);
  background: var(--color-white);
}
.contact__form-panel .form { margin-top: var(--space-16); }
.contact__form-panel .eyebrow { color: var(--color-brand); }
.contact__form-panel .contact__panel-title { color: var(--color-text-dark); }
.contact__form-panel .contact__panel-text,
.contact__form-panel .contact__check { color: var(--color-muted-3); }
.contact__form-panel .field__label { color: var(--color-text-dark); }
.contact__form-panel .input-wrapper {
  background: var(--color-light-tint);
  box-shadow: inset 0 0 0 1px var(--color-border-light);
}
.contact__form-panel input,
.contact__form-panel select,
.contact__form-panel textarea { color: var(--color-text-dark); }
.contact__form-panel input::placeholder,
.contact__form-panel textarea::placeholder { color: var(--color-muted-2); }
/* form-footer [72:449]: подпись слева, кнопка 165×48 справа, а не во всю ширину. */
.contact__form-panel .form__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
.contact__form-panel .form__footer .btn { width: auto; min-width: 165px; min-height: 48px; }
.contact__check { margin: 0; font-size: var(--fs-caption); line-height: 15.31px; color: var(--color-muted-2); }

@media (max-width: 1199px) {
  .contact__split { flex-direction: column; }
  .contact__panel { width: 100%; }
  .hero__mirror { display: none; }
}

/* ── мобильный фрейм [118:4] ──────────────────────────────────────────────
   Герой pad 48/20 gap 24, заголовок 40/44, лид 14/21; форма — одна карточка
   pad 24 gap 24, поля 68 (лейбл 14 + gap 6 + инпут 48) через 16.
   Панель «before you send» на мобиле идёт до формы отдельным блоком. */
@media (max-width: 767px) {
  .hero--contact { padding: var(--space-48) var(--space-20); }
  .hero--contact .hero__content { gap: var(--space-24); }
  .hero--contact .hero__headline { gap: var(--space-4); font-size: 40px; line-height: 44px; }
  .hero__lead--bright { font-size: var(--fs-ui); line-height: 21px; }
  .hero__note { font-size: var(--fs-small); line-height: 18.2px; }
  .hero__contact { font-size: var(--fs-ui); line-height: 21px; }
  .hero__watermark--contact { font-size: 100px; line-height: 128px; left: 0; width: 100%; text-align: center; }

  .contact { padding: var(--space-48) var(--space-20); }
  .contact__split { gap: var(--space-24); }
  .contact__panel { padding: var(--space-20); gap: var(--space-12); }
  .contact__panel-title { font-size: var(--fs-h5); line-height: 28px; }
  .contact__panel-text { font-size: var(--fs-small); line-height: 20px; }

  .contact__form-panel { padding: var(--space-24); gap: var(--space-8); }
  .contact__form-panel .contact__panel-title { font-size: 22px; line-height: 28px; }
  .contact__form-panel .contact__panel-text { font-size: var(--fs-small); line-height: 20px; }
  .contact__form-panel .form { margin-top: var(--space-24); gap: var(--space-16); }
  .contact__form-panel .input-wrapper { min-height: 48px; padding: 0 var(--space-16); }
  .contact__form-panel .input-wrapper--textarea { padding-block: var(--space-12); }
  .contact__form-panel .btn { width: 100%; min-height: 48px; }
  .contact__form-panel .form__footer { flex-direction: column; align-items: stretch; }
  .contact__form-panel .form__footer .btn { width: 100%; }
}

/* Полоса-обёртка нужна только на мобильном фрейме (там панель и форма —
   две секции на всю ширину); на широком экране она исчезает из раскладки. */
.contact__band { display: contents; }
@media (max-width: 767px) {
  .contact { padding-inline: 0; }
  .contact__split { gap: 0; }
  .contact__band { display: block; padding: var(--space-48) var(--space-20); }
  .contact__panel, .contact__form-panel { width: 100%; }
}