@import url("https://fonts.googleapis.com/css2?family=Nata+Sans:wght@100..900&display=swap");

:root {
  --page-gutter: 12px; /* можешь поставить 10–16 */

  --site-gradient-main: linear-gradient(135deg, #071021, #0b2a4a, #1b6b7a);

  --site-gradient-alt: linear-gradient(180deg, #0a1b33, #071021);

  --site-text-main: #e5e7eb;
  --site-text-muted: #94a3b8;
  --site-text-accent: #22d3ee;
  --site-text-success: #34d399;

  --btn-primary-bg: #147d8dff;
  --btn-primary-text: #071021;
  --btn-primary-border: #06b6d4;

  --btn-secondary-bg: #121f3aff;
  --btn-secondary-text: #e5e7eb;
  --btn-secondary-border: #334155;

  --main-font: "Nata Sans", sans-serif;
}

html,
body {
  overflow-x: hidden;
}

body {
  font-family: var(--main-font);
  margin: 0;
  min-height: 100vh;

  background: var(--site-gradient-main);
  -webkit-tap-highlight-color: transparent;

  background-size: cover;
  background-position: center;
  background-attachment: scroll;

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Универсальный контейнер: одинаковые боковые отступы везде */
.container {
  width: min(1100px, calc(100% - (var(--page-gutter) * 2))) !important;
  margin: 0 auto;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* На очень узких экранах чуть меньше, чтобы не “съедало” */
@media (max-width: 420px) {
  :root {
    --page-gutter: 10px;
  }
}

.req-star {
  display: inline-block;
  margin-left: -6px;
  color: rgba(255, 80, 80, 0.95);
  font-weight: 800;
  line-height: 1;
}

.req-star--nav {
  margin-left: -6px;
  font-size: 14px;
  transform: translateY(-1px);
}

.req-star[hidden] {
  display: none !important;
}