/* ==================================================
   FOUNDATION / БАЗА ПРЕМИУМ-ЛЕНДИНГА
   ================================================== */

/* ---------- CSS-переменные ---------- */
:root{
  --bg:#0b0d10;                 /* основной фон */
  --surface:#0f1217;            /* фон блоков */
  --text:#e9eef5;               /* основной текст */
  --muted:rgba(233,238,245,.72);/* вторичный текст */
  --line:rgba(233,238,245,.10); /* линии / бордеры */

  --accent:#7aa7ff;             /* акцентный цвет */

  --radius:20px;                /* скругления */
  --shadow:0 16px 60px rgba(0,0,0,.45);

  --container:1180px;           /* максимальная ширина */
  --gutter:20px;                /* боковые отступы */

  --h1:clamp(34px,4.2vw,56px);  /* заголовок H1 */
  --h2:clamp(24px,2.6vw,36px);  /* заголовок H2 */
  --p:16px;                     /* основной текст */
}

/* ---------- Сброс ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:400 var(--p)/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
::selection{background:rgba(122,167,255,.25)}

/* ---------- Сетка и отступы ---------- */
.container{
  width:min(var(--container), calc(100% - var(--gutter)*2));
  margin-inline:auto;
}
.section{
  padding: clamp(56px, 6vw, 96px) 0;
}

/* ---------- Типографика ---------- */
h1,h2,h3{
  margin:0 0 12px;
  letter-spacing:-0.02em;
}
h1{
  font-size:var(--h1);
  line-height:1.05;
}
h2{
  font-size:var(--h2);
  line-height:1.15;
}
p{
  margin:0;
  color:var(--muted);
}

/* ---------- UI / Кнопки и карточки ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 18px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease;
  cursor:pointer;
}
.btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.06);
  border-color:rgba(233,238,245,.18);
}
.btn:active{transform:translateY(0)}

.btn--primary{
  background:linear-gradient(
    180deg,
    rgba(122,167,255,.95),
    rgba(122,167,255,.65)
  );
  border-color:rgba(122,167,255,.55);
  color:#06101f;
}

.card{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* ---------- Утилиты ---------- */
.muted{color:var(--muted)}
.grid{display:grid; gap:16px}

/* ---------- Адаптив ---------- */
@media (min-width:900px){
  .grid--2{grid-template-columns:1.2fr .8fr}
  .grid--3{grid-template-columns:repeat(3,1fr)}
}