/* ===== Контакты — первый экран (светлая карточка на тёмном фоне) ===== */

.contact-hero{
  position: relative;
  min-height: 100vh;
  background: var(--bg-1);
  overflow: hidden;
}

/* лёгкий светлый градиент как в примере, но в рамках вашего стиля */
.contact-hero__bg{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #f6f8ff 0%, #f7f9ff 35%, #f5f7fc 60%, #eef2ff 100%);
  opacity: .9;
}
.contact-hero__scrim{
  position: absolute; inset: 0;
  /* лёгкая дымка, чтобы сочлось с тёмным фоном сайта по краям */
  background: radial-gradient(1200px 700px at 50% -10%, rgba(0,0,0,.06), transparent 60%);
}

.contact-hero__container{
  position: relative; z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) clamp(16px,4vw,56px);
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: clamp(24px, 4vw, 36px);
}

.contact-hero__head{
  text-align: center;
  max-width: 980px;
}
.contact-hero__title{
  margin: 0 0 10px 0;
  font: 800 clamp(36px, 6.4vw, 72px) Montserrat, sans-serif;
  letter-spacing: .01em;
  color: #4e3e8b; /* фиолетово-серый оттенок из примера; можно заменить на ваш */
}
.contact-hero__lead{
  margin: 0;
  color: #6f6d80;
  font: 400 clamp(16px, 2.2vw, 20px) Montserrat, sans-serif;
  line-height: 1.8;
}

/* ===== Форма ===== */
.contact-form{
  width: min(880px, 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* используем ваши поля .field, добавим акценты под светлый фон */
.field{
  height: 58px;
  background: #fff;
  border: 1px solid rgba(78, 89, 146, .22);
  border-radius: 12px;
  padding: 0 16px;
  font: 600 16px Montserrat, sans-serif;
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.field:focus{
  border-color: color-mix(in srgb, var(--accent) 60%, #6b7cff 40%);
  box-shadow: 0 0 0 4px rgba(75,93,255,.15);
}
.field--textarea{
  height: auto; padding-top: 12px; padding-bottom: 12px; resize: vertical;
}

/* кнопка — на базе вашей .cta, чуть мягче радиус */
.contact-form__cta{
  width: 260px;
  align-self: center;
  border-radius: 14px;
  background: var(--accent);
  box-shadow: 0 8px 24px rgba(75,93,255,.35);
}

/* мелкий текст под формой */
.contact-form__legal{
  margin: 8px 0 0 0;
  text-align: center;
  font: 400 13px/1.5 Montserrat, sans-serif;
  color: #6f6d80;
}
.contact-form__legal a{
  color: #5a68ff; text-decoration: none;
}
.contact-form__legal a:hover{ text-decoration: underline; }

/* a11y helper */
.visually-hidden{
  position: absolute !important;
  clip: rect(1px,1px,1px,1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

/* адаптив */
@media (max-width: 560px){
  .contact-hero__container{ padding-top: 44px; }
  .contact-form__cta{ width: 100%; }
}
/* ===== ЭКРАН 2: карта и контакты ===== */
.contact-info{
  background: var(--bg-1);
  padding: clamp(40px,6vw,72px) clamp(16px,4vw,56px);
}

.contact-map{
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
  margin-bottom: clamp(32px,4vw,48px);
}

.contact-details{
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.contact-details__row{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--stroke);
}

.contact-details__label{
  flex: 0 0 180px;
  font: 700 16px/1.4 Montserrat, sans-serif;
  color: var(--text);
}

.contact-details__value{
  flex: 1 1 auto;
  font: 500 16px/1.6 Montserrat, sans-serif;
  color: var(--muted);
}

.contact-details__value a{
  color: var(--accent);
  text-decoration: none;
}
.contact-details__value a:hover{
  text-decoration: underline;
}

@media (max-width: 640px){
  .contact-details__label{
    flex: 1 1 100%;
  }
}
/* ===== FOOTER ===== */
.footer{
  background: var(--bg-1);               /* единый фон */
  color: var(--text);
  padding: clamp(40px, 6vw, 64px) clamp(16px, 4vw, 56px) 0;
  border-top: 1px solid var(--stroke);
}
.footer__container{
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}
.footer__brand h3{ margin: 0 0 8px; font: 800 22px/1.2 Montserrat, sans-serif; }
.footer__brand p{ margin: 0; font: 400 16px/1.4 Montserrat, sans-serif; color: var(--muted); }
.footer__nav{ display:flex; flex-direction:column; gap:8px; }
.footer__nav a{ color:var(--text); text-decoration:none; font:500 16px Montserrat, sans-serif; transition:color .25s }
.footer__nav a:hover{ color:var(--accent); }
.footer__socials{ display:flex; gap:12px; }
.footer__socials a{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; background:var(--accent); color:#fff; text-decoration:none; font-size:18px; transition:background .25s;
}
.footer__socials a:hover{ background:#3f4de8; }
.footer__bottom{
  margin-top:32px; padding-top:20px; border-top:1px solid var(--stroke);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  font:400 14px Montserrat, sans-serif; color:var(--muted);
}
.footer__bottom a{ color:var(--muted); text-decoration:none; transition:color .25s }
.footer__bottom a:hover{ color:var(--accent); }

/* ===== АДАПТИВ ===== */
@media (max-width:1024px){
  .hero__inner{grid-template-columns:1fr}
  .card{justify-self:start; max-width:560px}
  .headline p{max-width:34ch}
  .who__grid{grid-template-columns:1fr}
  .trust5__grid{ grid-template-columns:1fr; }
  .cta6__container{ grid-template-columns:1fr; }
  .cta6__form{ justify-self:start; }
}
@media (max-width:560px){
  .nav{justify-content:center; gap:20px; padding:18px 16px}
  .card{padding:22px; border-radius:22px}
  .card h3{font-size:22px}
  .cta{height:52px; font-size:18px}
  .who-card{padding:22px; border-radius:22px}
  .who-card__tab{font-size:16px; left:18px}
  .features3{ padding-bottom: 120px; }
  .features3__grid{ grid-template-columns: 1fr; }
  .fcard{ border-radius: 20px; min-height: 150px; }
  .features3__art{ height: min(48vh, 520px); opacity: .85; }
  .tcard{
    grid-template-columns: 72px 1fr;
    border-radius: 22px;
    padding: 18px;
  }
  .tcard__avatar{ width:72px; height:72px; border-radius:14px; }
  .tcard__name{ font-size:16px; padding:8px 14px; }
  .tcard__text{ font-size:16px; }
  .trust5__card{ border-radius:22px; min-height:300px; }
  .cta6__bg{ background-position: 60% center; }
}