:root{
  --bg:#f6f8fb;
  --panel:#ffffff;
  --muted:#64748b;
  --text:#0f172a;
  --brand:#2563eb;
  --brand-strong:#1d4ed8;
  --ok:#16a34a;
  --border:#e5e7eb;
  --radius:14px;
  --shadow:0 10px 30px rgba(2,6,23,.08);
}

*{box-sizing:border-box}
html,body{background:var(--bg); color:var(--text); margin:0; font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans','Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji'; line-height:1.5}
a{color:#0b4db3; text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px; margin:0 auto; padding:24px}
.row{display:flex; gap:16px; align-items:center}
.spread{justify-content:space-between}
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px}

.site-header{position:sticky; top:0; background:#ffffffcc; backdrop-filter:saturate(150%) blur(8px); border-bottom:1px solid var(--border); z-index:20}
.logo{display:flex; gap:10px; align-items:center; font-weight:800; color:#0f172a}
.logo img{filter:drop-shadow(0 6px 16px rgba(37,99,235,.25))}
.nav{display:flex; gap:18px; align-items:center}
.nav a{color:#334155; opacity:.9}
.nav a:hover{opacity:1}
.login-link{padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:#fff}

.site-footer{border-top:1px solid var(--border); margin-top:40px; padding:18px 0 40px; background:#fff}
.site-footer .disclaimer{color:var(--muted); font-size:12px; margin-top:8px}

.hero{padding:82px 0 48px; text-align:center; background:
  radial-gradient(1200px 400px at 50% -200px, rgba(37,99,235,.10), rgba(37,99,235,0) 60%),
  url('assets/pattern.svg') center/800px repeat;
  border-bottom:1px solid var(--border);
}
h1{font-size:42px; margin:.2em 0 .3em}
.subtitle{color:var(--muted); margin-top:0; font-size:18px}
.micro{font-size:12px; color:var(--muted)}

.features{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:24px}
.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:999px; padding:12px 20px; font-weight:700; cursor:pointer}
.btn-primary{background:linear-gradient(180deg, var(--brand), var(--brand-strong)); color:white; box-shadow:0 10px 30px rgba(37,99,235,.35)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-xl{padding:16px 28px; font-size:18px}

.narrow{max-width:720px}
.form label{display:block; margin-bottom:14px; font-weight:600}
.form label input{display:block; width:100%; margin-top:8px; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:#fff; color:var(--text)}

.checkbox{display:flex; align-items:center; gap:10px; font-weight:400}
.note{color:var(--muted)}

.reviews{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; margin-top:16px}
.review-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.stars{letter-spacing:2px}

.progress-wrap{width:100%; height:12px; border-radius:999px; background:#e8eefc; overflow:hidden; margin:8px auto 16px; box-shadow:var(--shadow)}
.progress{height:100%; width:0% ; background:linear-gradient(90deg, var(--brand), var(--brand-strong)); transition:width .4s ease}

.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(3px); z-index:80}
.modal{position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(640px,92%); background:#fff; border:1px solid var(--border); border-radius:18px; padding:22px; z-index:90; box-shadow:0 30px 60px rgba(2,6,23,.25)}
.modal[hidden], .modal-backdrop[hidden]{display:none}
.modal-close{position:absolute; right:12px; top:8px; font-size:24px; background:transparent; border:0; color:#334155; cursor:pointer}
.modal-brand{display:flex; justify-content:center; margin:8px 0 6px}
.badge{font-weight:800; letter-spacing:.06em; border:1px solid var(--border); padding:6px 10px; border-radius:999px; color:#0f172a; background:#f8fafc}
.modal-body ul{margin:0 0 8px 20px}
.modal-actions{display:flex; gap:8px; justify-content:center; margin-top:10px}

@media (max-width:700px){
  h1{font-size:32px}
  .nav{gap:10px}
}


/* --- вспомогательные --- */
.visually-hidden {
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0;
}

/* --- форма проверки статуса --- */
.status-form,
.row.gap { /* поддержка старого класса */
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:18px auto 10px;
  flex-wrap:wrap;
  flex-direction: column;
}

.input {
  display:block;
  width:min(360px, 88vw);
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  font-size:16px;
  line-height:1.25;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  caret-color: var(--brand);
}
.input::placeholder { color:#94a3b8; }
.input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
  background:#fff;
}
.input[aria-invalid="true"],
.input-error {
  border-color:#ef4444 !important;
  box-shadow:0 0 0 4px rgba(239,68,68,.12) !important;
}

/* крупнее, чтобы ровнялось с кнопкой XL */
.input-lg { height:56px; font-size:16px; padding:0 16px; }

/* подпись-подсказка */
#phoneHelp.micro {
  margin-top:8px;
  min-height:16px; /* чтобы не прыгал блок при ошибке */
}

/* кнопка под инпут: одинаковая высота, плотнее на мобилках */
.btn.btn-xl {
  min-height:56px;
  padding:0 24px;
}
.btn-primary:active { transform:translateY(0.5px); }

/* состояние "обработка" (можно включать атрибутом aria-busy на кнопке) */
.btn[aria-busy="true"] {
  pointer-events:none;
  opacity:.85;
}
.btn[aria-busy="true"]::after {
  content:"";
  width:18px; height:18px;
  margin-left:8px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.55);
  border-top-color:#fff;
  animation:spin .9s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* карточки преимуществ чуть плотнее и «чище» */
.card h3{ margin:6px 0 6px; font-size:18px }
.card p { margin:0; color:#475569 }

/* фон хиро мягче + рамка формы */
.hero {
  position:relative;
}
.hero::after{
  content:"";
  display:block;
  width:min(720px, 92vw);
  height:0;
  margin:18px auto 0;
  border-top:1px dashed #dbe2f3;
  opacity:.7;
}

/* адаптив: на узких экранах в колонку */
@media (max-width:700px){
  .status-form,
  .row.gap{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .btn.btn-xl { width:100%; }
  .input { width:100%; }
}

/* мелкие улучшения контрастов и навигации */
.nav a {
  padding:6px 10px;
  border-radius:999px;
}
.nav a:hover {
  background:rgba(37,99,235,.08);
  text-decoration:none;
}

/* тонкая полоса под шапкой (визуальная стабильность при скролле) */
.site-header { box-shadow: 0 2px 8px rgba(2,6,23,.04); }

/* чуть более заметные тени карт */
.card { box-shadow: 0 8px 24px rgba(2,6,23,.06); }

.gallery .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* два столбца */
  gap: 16px;
}

.gallery .shot {
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.gallery .shot img {
  width: 100%;
  aspect-ratio: 1 / 1;     /* делаем квадрат */
  object-fit: cover;       /* картинка заполняет квадрат */
  display: block;
}

.gallery .shot figcaption {
  padding: 10px 12px;
  font-size: 14px;
  color: #475569;
  text-align: center;
}

@media (max-width: 700px) {
  .gallery .grid {
    grid-template-columns: 1fr; /* один столбец на мобильных */
  }
}


.logos .logo-row {
  display: flex;
  justify-content: center;     /* центрируем по горизонтали */
  align-items: center;
  flex-wrap: wrap;             /* если экран узкий — переносятся */
  gap: 24px;                   /* расстояние между логотипами */
  margin-top: 20px;
}

.logos .logo-row img {
  max-height: 40px;            /* все логотипы по высоте одинаковые */
  max-width: 120px;
  object-fit: contain;
  opacity: 0.8;
  filter: grayscale(100%);     /* стиль как на лендингах */
  transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}

.logos .logo-row img:hover {
  opacity: 1;
  filter: none;
  transform: translateY(-2px);
}

.logos .section-title {
  text-align: center;
}


/* ==== NAV: базовые стили (десктоп) ==== */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background:#ffffffcc; backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid var(--border);
  box-shadow: 0 2px 8px rgba(2,6,23,.04);
}

.nav{ display:flex; gap:18px; align-items:center; }
.nav a{
  color:#334155; opacity:.9;
  padding:10px 14px;           /* удобный тач-таргет на десктопе тоже */
  border-radius:10px;
}
.nav a:hover{ opacity:1; background:rgba(37,99,235,.08); text-decoration:none; }
.nav a.is-active{
  background:rgba(37,99,235,.12);
  color:#0f172a; font-weight:700;
}

/* ==== Бургер-кнопка ==== */
.nav-toggle{
  display:none;                 /* показать на мобиле в медиа-правиле */
  width:44px; height:44px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff; color:#0f172a;
  align-items:center; justify-content:center;
  cursor:pointer;
}
.nav-toggle:focus-visible{ outline:4px solid rgba(37,99,235,.15); }
.nav-toggle-bar{
  display:block; width:20px; height:2px; background:#0f172a;
  margin:3px 0; border-radius:2px;
  transition:transform .25s ease, opacity .25s ease;
}
.site-header.menu-open .nav-toggle-bar:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.site-header.menu-open .nav-toggle-bar:nth-child(2){ opacity:0; }
.site-header.menu-open .nav-toggle-bar:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* ==== Блокировка скролла без сдвига страницы ==== */
html, body { overflow-x: hidden; }     /* один раз, без дублей */
.body-locked{
  position: fixed;
  inset: 0 auto auto 0; /* фиксируем top/left, ширина как была */
  width: 100%;
  /* top и padding-right выставляет JS */
}

/* ==== Мобильное офф-канвас меню ==== */
@media (max-width: 820px){
  .nav-toggle{ display:inline-flex; }

  /* панель меню: выезд справа */
  .nav{
    position: fixed;
    top: 0; right: 0;
    height: 100dvh;
    width: min(80vw, 300px);
    background:#fff;
    box-shadow: -4px 0 24px rgba(0,0,0,.15);
    display:flex; flex-direction:column; gap:12px;
    padding: 64px 16px 16px;      /* отступ сверху ≈ высота шапки */
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 200;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .site-header.menu-open .nav{ transform: translateX(0); }

  .nav a{
    font-size: 18px;
    padding: 12px;
    border-radius: 10px;
    color:#0f172a;
  }
  .nav a:active{ transform: translateY(.5px); }

  /* затемняющая подложка */
  .nav-backdrop{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(2px);
    z-index: 150;
  }
  .nav-backdrop[hidden]{ display:none; }
}