/* =========================
   Base CSS for LingoNOX
   ========================= */

/* Палитра и тени */
:root{
  --brand:#2563eb;
  --brand-dark:#1e40af;
  --text:#0f172a;
  --muted:#64748b;
  --bg-start:#f1f5fe;   /* лёгкий верхний градиент */
  --bg-end:#f8fafc;     /* и светлый низ */
  --white:#ffffff;
  --shadow-sm:0 2px 8px rgba(0,0,0,.06);
  --shadow-md:0 6px 24px rgba(0,0,0,.08);
}

/* Сбросы/типографика */
*{ box-sizing:border-box; }
html, body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  background: linear-gradient(180deg, var(--bg-start), var(--bg-end));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* -------------------------
   Header
   ------------------------- */
.header{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 18px;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(150%) blur(6px);
  border-bottom:1px solid rgba(15,23,42,.06);
}
.logo{ display:flex; align-items:center; gap:10px; }
.logo img{ width:28px; height:28px; }
.logo-text{ font-weight:800; letter-spacing:.2px; }
.header-right{ display:flex; gap:14px; }
.nav-link{ opacity:.9; }
.nav-link:hover{ color:var(--brand); }

/* -------------------------
   Buttons
   ------------------------- */
.button-primary{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:220px; height:46px; padding:0 18px; border-radius:12px;
  background:var(--brand); color:#fff; font-weight:800;
  border:1px solid transparent;
  box-shadow:var(--shadow-sm);
  transition: transform .05s ease, background .15s ease, box-shadow .15s ease;
}
.button-primary:hover{ background:var(--brand-dark); box-shadow:var(--shadow-md); }
.button-primary:active{ transform:translateY(1px); }

/* Текстовая кнопка (если понадобится) */
.button-link{ color:var(--brand); font-weight:700; }
.button-link:hover{ text-decoration:underline; }

/* -------------------------
   Footer
   ------------------------- */
.footer{ text-align:center; padding:14px; font-size:.9rem; color:#8a8fa0; }

/* -------------------------
   Утилиты
   ------------------------- */
.shadow-sm{ box-shadow:var(--shadow-sm); }

/* -------------------------
   Лейаут без прокрутки (мобайлы ок)
   ------------------------- */
body.landing{
  /* корректная высота для устройств с адресными строками */
  min-height: 100svh;                            /* small viewport height */
  min-height: calc(var(--vh, 1vh) * 100);        /* JS-фоллбэк */
  display:grid;
  grid-template-rows: auto 1fr auto;             /* шапка / контент / футер */
  overflow-y:hidden;                             
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
/* если доступна динамическая высота — используем её */
@supports (min-height: 100dvh){ body.landing{ min-height: 100dvh; } }

/* Центрируем главный блок */
.main-center{
  min-height:0;
  display:grid;
  place-items:center;
  padding: clamp(8px, 2vh, 24px);
}

/* -------------------------
   Адаптив
   ------------------------- */
@media (max-width:640px){
  .header{ padding:10px 14px; }
  .logo img{ width:26px; height:26px; }
  .button-primary{ min-width:100%; height:48px; }
}

/* На очень низких экранах позволим скролл, чтобы не обрезать контент */
@media (max-height:640px){
  body.landing{ overflow-y:auto; }
  .main-center{ padding:12px; }
}

/* Телефоны: чуть компактнее шапка/кнопка */
@media (max-width: 480px){
  .header{ padding:10px 12px; }
  .logo-text{ font-size:1.1rem; }
  .button-primary{ min-width:100%; height:48px; }
}

/* Если высота экрана небольшая — позволим прокрутку всей страницы,
   чтобы ничего не обрезалось (адресные панели браузера и т.п.) */
@media (max-height: 740px){
  body.landing{ overflow-y: auto; }
  .main-center{ padding-bottom: calc(env(safe-area-inset-bottom) + 12px); }
}