.btn:hover {
  font-weight: 700;
}

.ButtonOtp {
  width: 275px;
  height: 60px;
  left: 20px;
  top: 436px;
  background-color: #038DCE;
  color: #ffffff;
  border: none;
  border-radius: 100px;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease; /* добавляем плавный переход */
}

.ButtonOtp:hover {
  background-color: #84C44A; /* меняем цвет фона при наведении */
}
  /* ===== MELS TRAVEL — DESIGN SYSTEM (типографика + сетка) ===== */

  :root{
    --brand:#0A7BDA; --brand-600:#0869B7; --brand-50:#F0F7FF;
    --ink:#0F172A; --muted:#475569; --bg:#FFFFFF; --bg-soft:#F7FAFE;
    --line:#E5EEF8; --ok:#12B886; --warn:#FFA500;
    --shadow:0 8px 28px rgba(10,123,218,.08);
  }
  @media (prefers-color-scheme: dark){
    :root{
      --ink:#E6EDF6; --muted:#9FB3C8; --bg:#0B1220; --bg-soft:#0F1930; --line:#243454;
      --brand:#6CB7FF; --brand-600:#489CEB; --brand-50:#0F1930;
      --shadow:0 12px 32px rgba(0,0,0,.4);
    }
  }

  html{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--ink); background:var(--bg); }
  :root{
    --fs-xs: clamp(12px, .8vw, 13px);
    --fs-sm: clamp(14px, 1vw, 15px);
    --fs-base: clamp(15px, 1.15vw, 17px);
    --fs-lg: clamp(17px, 1.35vw, 19px);
    --fs-xl: clamp(20px, 1.9vw, 24px);
    --fs-2xl: clamp(26px, 3.8vw, 36px);
    --fs-3xl: clamp(32px, 5.2vw, 48px);
    --fs-4xl: clamp(40px, 7vw, 64px);
    --lh-tight:1.15; --lh-snug:1.25; --lh:1.6; --lh-loose:1.75;

    --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:28px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px;
    --r-1:8px; --r-2:14px; --r-3:20px; --r-round:999px;
    --container-max:1200px; --container-pad: clamp(16px, 3vw, 32px);
  }

  body{ margin:0; }
  .container{ max-width:var(--container-max); margin:0 auto; padding:0 var(--container-pad); }
  .section{ padding: var(--s-12) 0; }
  .section.soft{ background:var(--bg-soft); }
  .muted{ color:var(--muted); }

  h1,h2,h3{ margin:0 0 var(--s-4); line-height:var(--lh-tight); letter-spacing:-.01em; }
  h1{ font-size:var(--fs-4xl); }
  h2{ font-size:var(--fs-3xl); }
  h3{ font-size:var(--fs-2xl); }
  p,li{ font-size:var(--fs-base); line-height:var(--lh); }
  .eyebrow{ font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.12em; color:var(--brand); font-weight:700; }

  .btn{ display:inline-flex; align-items:center; gap:10px; border-radius: var(--r-round); padding: 12px 18px; font-weight:700; text-decoration:none; transition:.2s ease; border:1px solid transparent; }
  .btn.primary{ background:var(--brand); color:#fff; box-shadow: var(--shadow); }
  .btn.primary:hover{ background:var(--brand-600); transform: translateY(-1px); }
  .btn.ghost{ background:transparent; color:var(--brand); border-color:var(--brand); }
  .btn.ghost:hover{ background:var(--brand-50); }

  /* HERO */
  .hero{ position:relative; padding: clamp(56px, 12vw, 140px) 0; isolation:isolate; }
  .hero .bg{ position:absolute; inset:0; background: radial-gradient(1200px 600px at 80% -10%, rgba(10,123,218,.25), transparent), linear-gradient(180deg, rgba(10,123,218,.10), transparent 40%); z-index:-1; }
  .hero h1{ max-width: 16ch; }
  .hero p{ max-width: 56ch; margin: var(--s-4) 0 var(--s-6); }
  .hero .cta{ display:flex; gap:12px; flex-wrap:wrap; }

  /* GRID */
  .grid{ display:grid; gap: clamp(16px, 2.2vw, 28px); }
  @media (min-width:720px){ .grid.cols-2{ grid-template-columns: repeat(2, 1fr); } }
  @media (min-width:960px){ .grid.cols-3{ grid-template-columns: repeat(3, 1fr); } }
  @media (min-width:1200px){ .grid.cols-4{ grid-template-columns: repeat(4, 1fr); } }

  /* Cards */
  .card{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r-2); padding: clamp(16px, 2.4vw, 24px); box-shadow: var(--shadow); }
  .card h4{ margin:0 0 8px; font-size: var(--fs-lg); }
  .kpi{ display:flex; align-items:center; gap:12px; }
  .kpi .dot{ width:10px; height:10px; border-radius:50%; background:var(--brand); flex:0 0 auto; }

  /* List */
  .list{ display:grid; gap:10px; }
  .list li{ list-style:none; position:relative; padding-left:26px; }
  .list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;              /* чуть ниже, чтобы точка была по центру строки */
  width: 8px;              /* меньше размер — меньше “радио”-эффекта */
  height: 8px;
  border-radius: 50%;
  background: var(--brand); /* полный залив логотипным цветом */
  border: none;             /* убираем обводку, чтобы не напоминало кнопку */
}

  /* Pills */
  .pills{ display:flex; flex-wrap:wrap; gap:8px; }
  .pill{ padding:8px 12px; border:1px solid var(--line); border-radius: var(--r-round); font-size: var(--fs-sm); background:var(--bg); }

  /* Media */
  .thumb{ position:relative; overflow:hidden; border-radius: var(--r-2); aspect-ratio: 3/2; background:linear-gradient(135deg, #E8F2FF, #F6FBFF); border:1px dashed var(--line); }
  .thumb img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
  .hero-media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
  .hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center 45%; filter:saturate(1.05) contrast(1.02); display:block; }

  /* Accordions */
  details{ border:1px solid var(--line); border-radius: var(--r-1); padding: 14px 16px; background:var(--bg); }
  details+details{ margin-top: 12px; }
  summary{ cursor:pointer; font-weight:700; font-size: var(--fs-base); }
  details[open]{ box-shadow: var(--shadow); }

  /* Sticky contact bar */
  .contact-bar{ position:sticky; bottom:12px; display:flex; justify-content:center; padding: 0 var(--container-pad); z-index:50; }
  .contact-bar .inner{ background:var(--bg); border:1px solid var(--line); border-radius: var(--r-round); padding:8px; display:flex; gap:8px; box-shadow: var(--shadow); }

  /* Footer CTA */
  .footer-cta{ text-align:center; padding: var(--s-16) 0 var(--s-12); }
  .section-head{ display:flex; justify-content:space-between; align-items:end; gap:12px; margin-bottom: var(--s-6); }
  .section-head p{ margin:0; }
  /* FAQ smooth animation */
details{ --faq-dur: .3s; }
.faq-content{
  margin-top:8px;
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform: translateY(-4px);
  transition:
    max-height var(--faq-dur) ease,
    opacity    var(--faq-dur) ease,
    transform  var(--faq-dur) ease;
}
details[open] .faq-content{
  opacity:1;
  transform:none;
}
/* во время анимации включаем оптимизацию отрисовки */
details.is-animating .faq-content{
  will-change: max-height, opacity, transform;
}
@media (prefers-reduced-motion: reduce){
  .faq-content{ transition:none!important; }
}

/* Всегда белый фон по умолчанию */
html,
body {
  background-color: #ffffff !important;
}