/* Автошкола «Олимп»: светлый сайт в цветах логотипа —
   тёмно-синий #17273e (треугольник, «Олимп»), красный #de2d1d (знак «У», «Автошкола») */

:root {
  --va-red: #de2d1d;
  --va-navy: #17273e;
  --va-navy-2: #2b4670;
  --va-primary: #d9281c;
  --va-primary-rgb: 217, 40, 28;
  --va-primary-hover: #c21f14;
  --va-primary-active: #a91b11;
  --va-on-primary: #fff;
  --va-on-gradient: #fff;
  --va-accent: #d9281c;
  --va-accent-soft: #fdeceb;
  --va-glow-1: rgba(217, 40, 28, .07);
  --va-glow-2: rgba(23, 39, 62, .07);
  --va-dark: #17273e;
  --va-dark-rgb: 23, 39, 62;
  --va-dark-2: #22344f;
  --va-surface: #f4f6fa;
  --va-gradient: linear-gradient(110deg, var(--va-navy) 0%, var(--va-navy-2) 55%, var(--va-red) 130%);

  --bs-body-color: #1f2737;
  --bs-link-color: #1f4f8f;
  --bs-link-color-rgb: 31, 79, 143;
  --bs-link-hover-color: var(--va-red);
  --bs-link-hover-color-rgb: 222, 45, 29;
}

h1, h2, h3, .h1, .h2, .h3, .display-5, .display-6 { color: var(--va-navy); }
.banner-gradient h2 { color: #fff; }

/* Основная кнопка — красная, как знак «У» */
.btn-gradient { background: var(--va-red); box-shadow: 0 .5rem 1.25rem rgba(217, 40, 28, .25); }
.btn-gradient:hover, .btn-gradient:focus-visible { background: var(--va-primary-hover); }

/* Заголовок первого экрана: акцентное слово — красным */
.hero .text-gradient { background: none; color: var(--va-red); }
.stat-value.text-gradient { background: none; color: var(--va-navy); }

/* Подпись над заголовком — с треугольником, как в логотипе */
.eyebrow::before {
  content: ""; display: inline-block; width: 0; height: 0; margin-right: .5rem; vertical-align: 1px;
  border-left: .35rem solid transparent; border-right: .35rem solid transparent;
  border-bottom: .6rem solid var(--va-red);
}

.card-va { border: 1px solid #e6eaf1; box-shadow: 0 .5rem 1.5rem rgba(23, 39, 62, .06); }
.feature-icon { border-radius: .9rem; }

/* «4 шага до прав» */
.step-num {
  width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; color: #fff; background: var(--va-navy);
}
.step:last-child .step-num { background: var(--va-red); }
.hero-photo { border-radius: 1.25rem; box-shadow: 0 1.5rem 3rem rgba(23, 39, 62, .18); width: 100%; height: auto; }