/* ============================================================
   nn-design-system.css — дизайн-система ГК «Нижегородец»
   Токены брендбука: красный #e2261c, наклон −10°, контейнер 1400 px
   Все классы с префиксом nn- — не конфликтуют с фреймворками.
   ============================================================ */

/* ---------- Шрифт Mont (официальный шрифт бренда) ---------- */
@font-face {
  font-family: 'Mont';
  src: url('./fonts/Mont-Regular.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mont';
  src: url('./fonts/Mont-Bold.woff2') format('woff2');
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Токены ---------- */
:root {
  --nn-red: #e2261c;
  --nn-red-dark: #b81d14;
  --nn-red-soft: rgba(226, 38, 28, .08);
  --nn-blue: #a1d9e5;
  --nn-ink: #1a1a1a;
  --nn-muted: #6b7280;
  --nn-line: #e5e7eb;
  --nn-bg: #ffffff;
  --nn-bg-soft: #f6f8fa;
  --nn-container: 1400px;
  --nn-radius: 14px;
  --nn-radius-lg: 20px;
  --nn-shadow: 0 4px 15px rgba(0, 0, 0, .06);
  --nn-shadow-lg: 0 12px 30px rgba(0, 0, 0, .12);
  --nn-skew: -10deg;
  --nn-font: 'Mont', 'Montserrat', Arial, sans-serif;
}

/* ---------- База ---------- */
.nn-container { max-width: var(--nn-container); margin: 0 auto; padding: 0 20px; }
.nn-body-font, .nn-body-font * { font-family: var(--nn-font); }

/* Типографика */
.nn-h1 { font: 800 clamp(28px, 4.5vw, 52px)/1.08 var(--nn-font); letter-spacing: -.01em; color: var(--nn-ink); margin: 0 0 16px; }
.nn-h2 { font: 800 clamp(20px, 3vw, 30px)/1.15 var(--nn-font); letter-spacing: -.01em; color: var(--nn-ink); margin: 0 0 16px; }
.nn-h3 { font: 700 18px/1.3 var(--nn-font); color: var(--nn-ink); margin: 0 0 8px; }
.nn-lead { font: 400 15px/1.6 var(--nn-font); color: var(--nn-muted); margin: 0 0 16px; }

/* Фирменный наклон −10° (заголовки-акценты, плашки) */
.nn-display { display: inline-block; transform: skewX(var(--nn-skew)); }
.nn-display > * { display: inline-block; transform: skewX(calc(var(--nn-skew) * -1)); }

/* ---------- Кнопки ---------- */
.nn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 28px; border: 0; border-radius: var(--nn-radius);
  font: 700 15px/1 var(--nn-font); text-decoration: none; cursor: pointer;
  background: var(--nn-red); color: #fff;
  box-shadow: 0 4px 12px rgba(226, 38, 28, .35);
  transition: transform .2s ease, box-shadow .2s ease; -webkit-tap-highlight-color: transparent;
}
.nn-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(226, 38, 28, .45); }
.nn-btn:active { transform: scale(.97); }
.nn-btn--outline { background: transparent; color: var(--nn-red); border: 2px solid var(--nn-red); box-shadow: none; }
.nn-btn--white { background: #fff; color: var(--nn-red); box-shadow: var(--nn-shadow); }
.nn-btn--blue { background: var(--nn-blue); color: var(--nn-ink); box-shadow: none; }

/* ---------- Карточки ---------- */
.nn-card {
  background: var(--nn-bg); border-radius: var(--nn-radius-lg);
  padding: 22px; box-shadow: var(--nn-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.nn-card:hover { transform: translateY(-5px); box-shadow: var(--nn-shadow-lg); }

/* ---------- Формы (с чекбоксом согласия по 152-ФЗ) ---------- */
.nn-form { display: grid; gap: 14px; }
.nn-label { display: block; font: 600 13px/1.3 var(--nn-font); color: var(--nn-ink); margin: 0 0 6px; }
.nn-input {
  width: 100%; height: 48px; padding: 0 14px;
  border: 1px solid var(--nn-line); border-radius: var(--nn-radius);
  background: var(--nn-bg); font: 400 14px/1 var(--nn-font); color: var(--nn-ink);
  outline: none; transition: border-color .2s ease;
}
.nn-input:focus { border-color: var(--nn-red); }
.nn-input[aria-invalid="true"] { border-color: var(--nn-red); background: var(--nn-red-soft); }
.nn-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.nn-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--nn-red); flex: 0 0 auto; }
.nn-check span { font: 400 12px/1.5 var(--nn-font); color: var(--nn-muted); }
.nn-check a { color: var(--nn-red); font-weight: 600; }

/* ---------- Плашки и мелочи ---------- */
.nn-badge {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px;
  border-radius: 999px; background: var(--nn-red-soft); color: var(--nn-red);
  font: 700 12px/1 var(--nn-font); text-transform: uppercase; letter-spacing: .06em;
}
.nn-section { padding: 56px 0; }

/* ---------- Адаптив ---------- */
@media (max-width: 768px) {
  .nn-section { padding: 36px 0; }
  .nn-btn { width: 100%; }
}