/* БАЗА + ТЕМА */
:root{
  --bg: #ffffff;
  --fg: #0f172a;         /* slate-900 */
  --muted: #475569;      /* slate-600 */
  --border: #e5e7eb;     /* gray-200 */
  --blue-50: #eff6ff;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --green-50:#ecfdf5;
  --green-100:#dcfce7;
  --green-500:#22c55e;
  --yellow-500:#eab308;
  --shadow: 0 8px 30px rgba(17,24,39,.08);
  --radius: 12px;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background:var(--bg); color:var(--fg);
}

/* Утилиты/контейнер */
.container{
  width:100%;
  margin-inline:auto;
  padding-inline:1rem;
  max-width:1200px;
}
.grid{ display:grid; gap:1rem }
.grid-2{ grid-template-columns: 1fr 1fr }
@media (max-width: 1024px){
  .grid-2{ grid-template-columns: 1fr }
}

/* Кнопки */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.9rem 1.2rem; border-radius:10px; border:1px solid transparent;
  font-weight:600; text-decoration:none; cursor:pointer; transition:.2s ease;
}
.btn-primary{ background:var(--blue-600); color:#fff }
.btn-primary:hover{ background:var(--blue-700) }
.btn-outline{ background:#fff; color:var(--fg); border-color:var(--border) }
.btn-outline:hover{ background:#f8fafc }

/* Карточки/тени */
.card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow: var(--shadow) }

/* Вспомогательные */
.text-center{ text-align:center }
.text-muted{ color:var(--muted) }
.badge{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--green-100); color:#166534; /* text-green-800 прибл. */
  border-radius:999px; padding:.35rem .7rem; font-size:.9rem; font-weight:600;
}

/* Заголовки/отступы */
h1{ font-size:clamp(52px, 5vw, 52px); line-height:1.15; margin:0 0 .5rem ;text-transform: uppercase;}
h2{ font-size:clamp(26px, 3.5vw, 52px); line-height:1.2; margin:0 0 .5rem; text-transform: uppercase;}
.lead{ font-size:1.125rem; line-height:1.65; color:var(--muted) }

.sp-20{ padding-block: 80px }
.mt-24{ margin-top: 24px }
.mt-32{ margin-top: 32px }

/* Картинки */
.img{
  width:100%; height:auto; display:block; border-radius:14px; object-fit:cover; box-shadow:var(--shadow)
}

/* Плавающие бейджи */
.float-badge{
  position:absolute; background:#fff; border:1px solid var(--border);
  border-radius:12px; padding:10px 12px; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:8px; font-weight:600;
}

  html { scroll-behavior: smooth; }
  /* сдвигаем якорь на высоту шапки, чтобы контент не прятался под ней */
  hero-section,
  benefits-section,
  modes-section,
  specs-section,
  exchange-section,
  qa-form,
  contacts-section {
    scroll-margin-top: 15px; /* подгони под реальную высоту шапки */
  }