/* ==================================================
   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)}
}

.is-invalid { border-color: #ff4d4f !important; box-shadow: 0 0 0 3px rgba(255,77,79,.15) !important; }

.scroll-top{
  position: fixed;
  right: 20px;
  bottom: 24px;

  width: 56px;
  height: 56px;
  border-radius: 20px;

  display:flex;
  align-items:center;
  justify-content:center;

  background: linear-gradient(180deg,#7aa7ff,#5f8fff);
  border:none;
  cursor:pointer;

  box-shadow:
    0 18px 46px rgba(95,143,255,.35),
    0 0 24px rgba(59,130,246,.22);

  opacity:0;
  pointer-events:none;
  transform: translateY(20px);
  transition:.25s ease;
  z-index:9999;
}

.scroll-top.show{
  opacity:1;
  pointer-events:auto;
  transform: translateY(0);
}

.scroll-top__icon{
  width: 22px;
  height: 22px;
  display:block;
  fill: #ffffff !important;   /* 💥 ВСЕГДА БЕЛАЯ */
}

.scroll-top:hover{
  transform: translateY(-2px);
}

/* ===== Mobile Call Button ===== */
.mobile-call{
  position: fixed;
  left: 16px;
  bottom: 24px;

  width: 56px;
  height: 56px;
  border-radius: 20px;

  display:flex;
  align-items:center;
  justify-content:center;

  background: linear-gradient(180deg,#34d399,#16a34a); /* зелёная */
  border: 1px solid rgba(255,255,255,.18);

  box-shadow:
    0 18px 46px rgba(22,163,74,.35),
    0 0 26px rgba(34,197,94,.30);

  z-index: 9999;
  text-decoration: none;

  animation: callPulse 1.7s ease-out infinite;
}

.mobile-call svg{
  width: 24px;
  height: 24px;
  display:block;
  fill: #fff !important;
}

/* только на мобильных */
@media (min-width: 901px){
  .mobile-call{ display:none; }
}

@keyframes callPulse{
  0%   { box-shadow: 0 18px 46px rgba(22,163,74,.35), 0 0 0 0 rgba(34,197,94,.42); }
  70%  { box-shadow: 0 18px 46px rgba(22,163,74,.35), 0 0 0 18px rgba(34,197,94,0); }
  100% { box-shadow: 0 18px 46px rgba(22,163,74,.35), 0 0 0 0 rgba(34,197,94,0); }
}

/* приятная реакция на тап */
.mobile-call:active{
  transform: scale(.98);
}

/* ==== FIX: mobile header overlap (all devices) ==== */
@media (max-width: 768px){
  .section:first-of-type{
    padding-top: calc(env(safe-area-inset-top, 0px) + 140px);
  }
}