@font-face {
  font-family: 'Compacta';
  src: url('../fonts/Compacta Com Black Regular.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Compacta 500';
  src: url('../fonts/Compacta Com Black Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Montserrat — Normal */
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  --bg: #111;
  --bg-2: #151515;
  --bg-3: #1f1f1f;
  --text: #e9e9e9;
  --muted: #bdbdbd;
  --red: #b41519;
  --red-2: #d02a2e;
  --white: #fff;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
}


.nk-header {
  position: sticky;
  top: 0;
  z-index: 999;
}

.navbar-brand span {
  font-family: 'Compacta', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.5px;
}

.nav-link {
  color: #fff;
  transition: color 0.2s ease-in-out;
  font-size: 0.95rem;
}
.nav-link:hover {
  color: #b41519 !important;
}

.navbar-toggler {
  background: transparent;
  border: none;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='white' class='bi bi-list' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2.5 12.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm0-4a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm0-4a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11z'/%3E%3C/svg%3E");
}

/* HERO base */
.home_hero {
  background: #300a0a;
  padding-top: 28px;           /* header есть внутри, сверху отступ */
  padding-bottom: 100px;
  overflow: visible;
  position: relative;
}

/* фон-ткань */
.home_hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../img/hero-lg.png') center/cover no-repeat;
  opacity: 1;
  z-index: 0;
  filter: saturate(95%);
}
.home_hero.mobile_True::before {
  background: url('../img/hero-mobile.png') center/cover no-repeat;
}

/* контейнер над фоном */
.hero-inner {
  position: relative;
  z-index: 5; /* выше фон */
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 28px;
  padding-top: 28px;
  padding-bottom: 10px;
}

/* COPY */
.hero-copy { padding: 40px; max-width: 680px; }

.hero-title {
  margin: 0;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  display: block;
}

/* Большая часть "API" */
.hero-title-big {
  display: block;
  font-family: 'Compacta', 'Compacta Com Black', 'Compacta Com Black Regular', sans-serif;
  font-weight: 900;
  color: #fff;
  /* адаптивный размер: clamp(min, vw-based, max) */
  font-size: clamp(80px, 18vw, 400px);
  line-height: 0.86;
  letter-spacing: -4px;
  text-shadow: 0 12px 30px rgba(0,0,0,0.6);
  display: block;
}

/* "спортивных событий" */
.hero-title-sub {
  display: block;
  font-family: 'Compacta', sans-serif;
  font-size: clamp(20px, 4.5vw, 51px);
  line-height: 1;
  margin-top: -8px;
  letter-spacing: 0.5px;
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,0.98));
  -webkit-background-clip: text;
  color: #fff;
}

/* Описание и кнопка */
.hero-lead {
  margin-top: 18px;
  color: rgba(255,255,255,0.92);
  max-width: 520px;
  font-size: 24px;
  line-height: 1.6;
}
.hero-cta {
  display: inline-block;
  margin-top: 20px;
  padding: 14px 34px;
  background: rgba(10,10,10,0.85);
  color: #fff;
  border-radius: 4px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(0,0,0,0.55);
}

/* ART area: позиционирование объектов */
.hero-art {
  position: relative;
  height: 420px; /* на десктопе */
  min-height: 320px;
  overflow: visible;
  display: block;
}

/* общие правила для картинок внутри .hero-art */
.hero-art .art {
  position: absolute;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
  transform-origin: center;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.6));
}

/* фон-размыв NK */
.hero-art .nk-shadow {
  right: 10%;
  top: 20%;
  width: 52%;
  transform: translate(10%, -8%);
  filter: blur(10px) saturate(.5) brightness(.05);
  opacity: 0.55;
}

/* controllers */
.hero-art .controller.c-1 { right: 28%; top: 6%; width: 110px; transform: rotate(-10deg); }
.hero-art .controller.c-2 { right: 38%; top: 2%; width: 120px; transform: rotate(8deg); }

/* balls */
.hero-art .ball.b-1 { right: 14%; top: 6%; width: 92px; transform: translateY(0) rotate(-6deg); }
.hero-art .ball.b-2 { right: 4%; top: 2%; width: 52px; opacity: .95; }

/* helmet bottom right */
.hero-art .helmet {
    right: 44%;
    bottom: -34%;
    width: 550px;
    transform: rotate(-6deg);
    z-index: 8;
}

/* накинуть эффект, чтобы шлем как будто вылезает из блока (чёрный вал) */
.hero-art .helmet::after { content: ""; }

/* небольшой откат справа для гармонии */
@media (min-width: 1400px){
  .hero-inner { margin: 0 auto; }
  .hero-art { height: 520px; }
}

/* --- MOBILE --- */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 8px; padding: 18px 12px; }
  .hero-copy { padding: 18px 0; }

  /* Уменьшаем заголовок, двигаем вверх, чтобы он был центрирован */
  .hero-title-big {
    font-size: clamp(96px, 40vw, 200px);
    letter-spacing: -3px;
  }
  .hero-title-sub { font-size: clamp(18px, 6.5vw, 28px); margin-top: -6px; }

  .hero-art {
    height: auto!important;
    min-height: auto!important;
  }

  /* объекты - другие позиции для мобильного макета */
  .hero-art .nk-shadow { right: 2%; top: 8%; width: 70%; opacity: .65; filter: blur(8px) brightness(.1); }
  .hero-art .controller.c-1 { left: 6%; top: 8%; width: 68px; transform: rotate(-18deg); }
  .hero-art .controller.c-2 { left: 40%; top: 6%; width: 72px; transform: rotate(6deg); }
  .hero-art .ball.b-1 { left: 30%; top: 2%; width: 62px; }
  .hero-art .ball.b-2 { right: 14%; top: 36%; width: 54px; opacity: .9; }
  .hero-art .helmet {
    width: 122px;
    right: 1%;
    top: 0;
    transform: rotate(-2deg);
  }
  .hero-title{
    margin-top: 175px;
    text-align: center;
  }
  .hero-lead{
    padding: 0px 40px;
    font-size: 22px;
    line-height: 1.3;
  }
  /* кнопка крупнее */
  .hero-cta { padding: 16px 26px; font-size: 20px; display: block; width: calc(100% - 40px); text-align:center; margin: 20px auto 0; }
}

/* Extra small phones - когда экран очень узкий */
@media (max-width: 420px) {
  .hero-title-big { font-size: clamp(80px, 42vw, 160px); letter-spacing: -2px; }
  .hero-art { height: 360px; }
  .hero-art .helmet { width: 180px; right: 6%; bottom: -6%; }
  .hero-lead { font-size: 15px; }
  .hero-cta { font-size: 18px; }
}

.nav-link {
    font-size: 16px !important;
    font-weight: 400 !important;
}
.main-btn{
    font-size: 25px;
    padding: 12px 55px;
    background: var(--bg-3);
    color: var(--text);
    border-radius: 0px;
    font-weight: 600;
    font-family: 'Compacta', sans-serif;
    text-transform: uppercase;
    text-decoration: none;
}

/* === WHY section === */
/* === WHY (белый верх / красный низ) === */
.why{
  padding: 100px 0 0;
  background:
    linear-gradient(#ffffff 0, #ffffff 360px, #B60101 360px, #B60101 100%);
}
.why .container{max-width:1180px; position:relative}

/* Сцена для декора и плашки */
.why-stage{position:relative}

/* Центральная тёмная плашка */
.why-panel{
  width: 900px;               /* ширина как в макете */
  max-width: calc(100% - 60px);
  margin: 0 auto;             /* строго по центру */
  background:#222121;
  padding: 100px 80px;
  box-shadow: 0 14px 26px rgba(0,0,0,.22);
  position: relative;
  z-index: 3;
}
.why-head{
  margin:0 0 16px;
  font-family:'Compacta',sans-serif;
  font-size:64px;
  color:#B60101;
  text-transform:lowercase;
  letter-spacing:.5px;
}

/* Перчатки — висят из правого края плашки */
.why-panel .decor-gloves{
  position: absolute;
  right: -145px;
  top: -25px;
  width: 300px;
  pointer-events:none;
  user-select:none;
  z-index:4;
}

/* Карточки с рамкой и большим номером внутри */
.why-list{display:grid; gap:18px}
.why-card{
  position:relative;
  border:3px solid #e8e8e8;
  background:rgba(0,0,0,.22);
  padding:18px 22px 18px 108px;     /* слева место под номер */
  color:#fff;
}
.why-card::before{
  content: attr(data-num);
  position:absolute;
  left:24px; top:50%;
  transform:translateY(-50%);
  font-family:'Compacta',sans-serif;
  font-weight:900;
  font-size:96px;
  color:#fff;
  opacity:.08;                    /* водяной знак */
  line-height:1;
  pointer-events:none;
}
.why-title{
  margin:0 0 8px;
  font-family:'Compacta',sans-serif;
  text-transform:lowercase;
  font-size:32px;
  font-weight:900;
}
.why-text{
  margin:0; font-size:20px; line-height:1.55; color:rgba(255,255,255,.88);
}

/* Декор вне плашки */
.decor-ball{
  position: absolute;
    left: 150px;
    top: -70px;
    width: 160px;
    z-index: 2;
    pointer-events: none;
    user-select: none;
}
.decor-racket {
    position: absolute;
    left: -150px;
    top: 100px;
    width: 500px;
    transform: rotate(0deg);
    z-index: 2;
    pointer-events: none;
    user-select: none;
}

/* Нижняя красная полоса (визуал) */
.visual-band{ background:#B60101; padding:32px 0 40px; }
.visual-grid{ display:grid; grid-template-columns: 360px 1fr; gap:28px; align-items:start; }

.visual-left{ color:#fff; }
.visual-head{
  margin:0 0 12px; font-family:'Compacta',sans-serif;
  font-size:64px; line-height:1; color:#fff; text-transform:lowercase;
}
.visual-sub{
    margin: 0;
    font-size: 37px;
    color: #fff;
    line-height: 1;
}

.visual-right{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
.visual-item{ color:#fff; }
.visual-thumb img{
  width:100%; height:260px; object-fit:cover; display:block;
  border-radius:4px; box-shadow:0 10px 22px rgba(0,0,0,.35);
}
.visual-title{ margin:10px 0 6px; font-weight:900; color:#1E1E1E; text-transform:lowercase;font-size: 29px; }
.visual-desc{ margin:0; font-size:18px; color:rgba(0,0,0,.65); line-height:1.45; }

/* ---- Адаптация ---- */
@media (max-width: 1100px){
  .why-panel{width:820px}
  .decor-racket{left:-120px; top:220px; width:320px}
}
@media (max-width: 900px){
  .why{ background:#111; padding:0; } /* на мобилке фон лендинга, как в макете */
  .why-panel{max-width:100%; padding:22px; }
  .why-panel .decor-gloves{right:-20px; width:100px}
  .why-card{padding:16px 16px 16px 92px}
  .why-card::before{left:18px; font-size:78px; opacity:.09}
  .decor-ball{display:none!important}
  .decor-racket{display:none}
  .visual-grid{grid-template-columns:1fr; gap:18px}
  .visual-right{grid-template-columns:1fr; gap:14px}
  .visual-band{padding:22px 0 28px}
  .decor-gloves{
    display: none!important;
  }
}

/* обёртка картинки */
.visual-thumb{
  position: relative;
  height: 260px;
  border-radius: 4px;
  overflow: hidden;                         /* чтобы зум не вылезал за края */
  box-shadow: 0 10px 22px rgba(0,0,0,.35);  /* тень на обёртке, чтобы не обрезалась */
}

/* картинка */
.visual-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  transform: scale(1);
  transform-origin: center;
  transition: transform .35s ease;
  will-change: transform;

  /* убираем тень/радиус с img, т.к. они теперь на обёртке */
  box-shadow: none;
  border-radius: 0;
}

/* зум на десктопах по hover */
@media (hover:hover) and (pointer:fine){
  .visual-item:hover .visual-thumb img{
    transform: scale(1.06); /* 1.04–1.08 по вкусу */
  }
}

/* доступность: по фокусу клавиатурой */
.visual-item:focus-within .visual-thumb img{
  transform: scale(1.06);
}

/* на тач-устройствах — лёгкий отклик по тапу */
@media (hover:none) and (pointer:coarse){
  .visual-item:active .visual-thumb img{
    transform: scale(1.03);
  }
}

/* (опционально) лёгкое затемнение при наведении */
.visual-thumb::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.12);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
@media (hover:hover) and (pointer:fine){
  .visual-item:hover .visual-thumb::after{ opacity: 1; }
}

/* уважение prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .visual-thumb img, .visual-thumb::after{ transition: none; }
}

.container-is_mobile-True{
  padding: 0!important;
}
/* === PRICING === */
.pricing { background:#fff; padding: 48px 0 60px; }
.pricing .container { max-width:1180px; }

.pricing-head{
  font-family:'Compacta',sans-serif;
  font-size:64px; line-height:1; margin:0 0 22px;
  color:#111; text-transform:lowercase;
}

.pricing-grid{
  display:grid;
  grid-template-columns: 320px 1fr;   /* легенда + три карточки */
  gap:24px; align-items:start;
}

/* ЛЕГЕНДА */
.legend{
  background:#b41519; color:#fff; padding:22px 20px;
  min-height: 300px; display:flex; flex-direction:column;
}
.legend-title{
  font-family:'Montserrat',sans-serif;
  font-size:36px;
  font-weight: 600;
  margin:0 0 10px; text-transform:lowercase;
}
.legend-list{ list-style:none; padding:0; margin:0; }
.legend-list li{ padding:8px 0; border-bottom:1px solid rgba(255,255,255,.2); }
.legend-list li:last-child{ border-bottom:none; }
.legend-accent{ font-weight:800; text-transform:lowercase; margin-top:6px; }

/* ПЛАНЫ */
.plans-wrap{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items:stretch;
}

/* базовая карточка */
.plan{
  display:flex; flex-direction:column; min-height: 300px; color:#fff;
}
.plan-title{
  font-family: "Montserrat", sans-serif;
  text-transform:lowercase;
  text-align:center; font-weight:800;
  padding:10px; font-size:36px;
}
.plan-features{
  list-style:none; margin:0; padding:18px 22px 12px; flex:1;text-align: center;
}
.plan-features li{ padding:6px 0;}

.plan-price{
  text-align:center; padding-top:10px;
  font-weight:900; font-size:20px; letter-spacing:.5px;
}

/* нижняя плашка “выбрать” */
.plan-cta{
  display:block; text-align:center;
  padding:12px 8px; text-transform:lowercase;
  font-weight:800; color:#fff; text-decoration:none;
  background:rgba(0,0,0,.25);
}

/* ТОНЫ (подгон под макет) */
.tone-light  { background:#989898; }       /* лайт */
.tone-light  .plan-cta{ background:#5a5a5a; }
.tone-mid    { background:#6a6a6a; }       /* старт */
.tone-mid    .plan-cta{ background:#3e3e3e; }
.tone-dark   { background:#111111; }       /* про */
.tone-dark   .plan-cta{ background:#2a2a2a; }

/* подпись-сноска */
.pricing-note{
  margin:12px 0 0; font-size:12px; line-height:1.5; color:#666; max-width:760px;
}

/* стрелки (только мобайл) */
.pricing-nav{
  display:none; justify-content:center; gap:12px; margin-top:16px;
}
.pricing-arrow{
  width:52px; height:52px; border:0; border-radius:4px;
  background:#1f1f1f; color:#fff; font-size:22px;
}

/* ==== МОБАЙЛ ==== */
@media (max-width: 900px){
  .pricing{ padding:32px 0 40px; }
  .pricing-grid{ grid-template-columns:1fr; gap:18px; }

  .legend{ min-height:auto; }
  .plans-wrap{
    display:flex; gap:14px; overflow-x:auto; scroll-behavior:smooth;
    padding-bottom:8px;
  }
  .plan{ min-width:260px; flex:0 0 auto; }
  .plan-title{ font-size:20px; padding:14px 8px; }
  .plan-cta{ padding:14px 8px; }

  .pricing-nav{ display:flex; }
}

.tariff-btn {
    font-size: 16px;
    padding: 9px 55px;
    background: var(--bg-3);
    color: var(--text);
    border-radius: 0px;
    font-family: 'Compacta 500', sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    justify-content: center;
}


/* ===== CONTACTS ===== */
.contacts-band{ background:#B41519; padding:38px 0; }
.contacts-band .container{ max-width:1180px; }

.contacts-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:28px;
}

/* LEFT PANEL */
.contacts-left{
  background:#1f1f1f; color:#fff; padding:28px;
}
.contacts-title{
  font-family:'Compacta',sans-serif; font-size:64px; margin:0 0 18px; text-transform:lowercase;
}
.soc-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: 1fr 1fr; gap:26px 40px; }
.soc-item{ display:flex; align-items:center; gap:18px; }
.soc-ico{
  width:64px; height:64px; background:#9f1d16; display:grid; place-items:center;
}
.soc-ico svg{ width:30px; height:30px; }
.soc-label{
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    font-size: 32px;
    font-family: 'Montserrat';
}

/* RIGHT PANEL (form) */
.contacts-right{ background:#fff; padding:28px; }
.form-title{
  font-family:'Compacta',sans-serif; font-size:64px; color:#B41519; margin:0 0 16px; text-transform:lowercase;
}

.field{ position:relative; margin:14px 0; }
.field-input{
  width:100%; background:#fff; border:2px solid #d9d9d9; padding:18px 20px; font-size:20px; outline:0;
}
.field-input:focus{ border-color:#B41519; }

/* серверные ошибки */
.field .field-help.error{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  color:#B41519; font-size:16px;
}
.field .field-input.is-invalid{ border-color:#B41519; }
.field .field-input.is-valid{ border-color:#3aa35c; }

.check{ display:flex; align-items:flex-start; gap:10px; margin:8px 0; font-size:14px; color:#333; }
.check input[type="checkbox"]{ min-width:18px; height:18px; accent-color:#B41519; }
.check a{ color:#B41519; text-decoration:underline; }

.btn-submit{
  width:100%; background:#1f1f1f; color:#fff; border:0; padding:16px;
  font-weight:900; text-transform:lowercase; font-size:22px; margin-top:10px; cursor:pointer;
}

/* MOBILE */
@media (max-width: 900px){
  .contacts-grid{ grid-template-columns:1fr; gap:18px; }
  .soc-list{ grid-template-columns:1fr; gap:14px; }
  .soc-label{ font-size:20px; }
}

.home-body{
  background:#b41519;
}

/* ===== FOOTER ===== */
.site-footer{
  padding: 34px 0 38px;         /* верх/низ отступы под скрин */
  color: var(--white);
}
.site-footer .container{ max-width:1180px; }

/* трёхколоночная сетка: логотип слева, меню по центру, ссылка справа */
.footer-inner{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:end;
  column-gap: 40px;
}

/* логотип — визуально как на скрине */
.footer-logo img{
  display:block;
  height: 58px;                 /* при необходимости подгони до пикселя */
  width: auto;
}

/* меню */
.footer-nav{
  display:flex;
  justify-content:center;
  gap: 34px;                    /* интервалы между пунктами как в макете */
}
.footer-nav a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  line-height:1;
  text-transform:lowercase;
  transition:opacity .2s;
}
.footer-nav a:hover{ opacity:.8; }

/* разработчик (справа на десктопе) */
.footer-dev{
  color:#fff;
  text-decoration:underline;
  font-size:14px;
  white-space:nowrap;
}

/* ===== MOBILE ===== */
@media (max-width: 900px){
  .site-footer{ padding: 28px 0 40px; }

  .footer-inner{
    grid-template-columns: 1fr;
    row-gap: 22px;
    justify-items:center;
    text-align:center;
  }

  .footer-logo img{ height: 64px; }

  .footer-nav{
    flex-direction:column;
    gap: 14px;
  }
  .footer-dev{
    margin-top: 8px;
    white-space:normal;
  }
}

/* кнопка со спиннером */
.btn-submit{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 220px; height: 58px;
  background:#1f1f1f; color:#fff; font-weight:800; text-transform:lowercase;
  border:0; border-radius:2px; cursor:pointer;
  transition:opacity .2s;
}
.btn-submit[disabled]{ opacity:.6; cursor:not-allowed; }

.btn-submit .spinner{
  position:absolute; left:50%; top:50%;
  width:22px; height:22px; margin:-11px 0 0 -11px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff; border-radius:50%;
  animation:spin .8s linear infinite; display:none;
}
.btn-submit.loading .spinner{ display:block; }
.btn-submit.loading .btn-text{ opacity:0; }

@keyframes spin{ to { transform: rotate(360deg); } }

/* алерты */
.contact-alert{
  margin-top:12px; padding:12px 14px; font-size:14px; border-radius:2px;
}
.contact-alert.ok{ background:#e7f6ec; color:#0a6f37; border:1px solid #bfe5c9; }
.contact-alert.err{ background:#fdeaea; color:#9c1e1e; border:1px solid #f3c0c0; }

/* таймер кулдауна */
.cooldown{
  margin-top:10px; font-size:14px; color:#fff; opacity:.9;
}
.contacts-right .cooldown{ color:#300; } /* если нужен тёмный текст внутри белого блока */

/* визуальная валидация (если ещё не было) */
.field .field-input.is-invalid{ border-color:#B41519; }
.field .field-input.is-valid{ border-color:#2aa05a; }


/* Плавное «парение» вверх-вниз */
.hero-art .helmet {
  /* подстройка амплитуды/скорости через CSS-переменные */
  --float-distance: 18px;     /* насколько поднимаем/опускаем */
  --float-duration: 7s;       /* длительность полного цикла */

  animation: helmet-float var(--float-duration) ease-in-out infinite;
  will-change: transform;
  /* чуть-чуть объёма, можно убрать */
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.35));
  pointer-events: none;       /* чтобы клики не ловил арт */
}

@keyframes helmet-float {
  0%   { transform: translate3d(0, calc(var(--float-distance) * -1), 0); }
  50%  { transform: translate3d(0, var(--float-distance), 0); }
  100% { transform: translate3d(0, calc(var(--float-distance) * -1), 0); }
}

/* На ховере можно слегка усилить амплитуду (опционально) */
.hero-art .helmet:hover {
  --float-distance: 22px;
}

/* Уважение к настройке «уменьшить анимации» в системе */
@media (prefers-reduced-motion: reduce) {
  .hero-art .helmet {
    animation: none;
    transform: none;
  }
}



/* === WHY: floating decor === */
/* Общая базовая анимация: поднимается и опускается */
@keyframes float-y-tilt-racket {
  0%   { transform: translate3d(0, calc(var(--float-distance, 16px) * -1), 0) rotate(-2.5deg); }
  50%  { transform: translate3d(0, var(--float-distance, 16px), 0)          rotate( 2.5deg); }
  100% { transform: translate3d(0, calc(var(--float-distance, 16px) * -1), 0) rotate(-2.5deg); }
}
@keyframes float-y-tilt-gloves {
  0%   { transform: translate3d(0, calc(var(--float-distance, 14px) * -1), 0) rotate(2deg); }
  50%  { transform: translate3d(0, var(--float-distance, 14px), 0)            rotate(-2deg); }
  100% { transform: translate3d(0, calc(var(--float-distance, 14px) * -1), 0) rotate(2deg); }
}

/* Ракетка — медленнее, чуть больше амплитуда и покачивание */
.decor-racket {
  --float-distance: 16px;     /* амплитуда */
  --float-duration: 9s;       /* скорость */
  animation: float-y-tilt-racket var(--float-duration) ease-in-out infinite;
  transform-origin: 20% 60%;  /* точка «раскачки», можно подправить */
  will-change: transform;
  pointer-events: none;
  display: block;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));
}

/* Перчатки — немного быстрее и с обратной фазой */
.decor-gloves {
  --float-distance: 14px;
  --float-duration: 7.5s;
  animation: float-y-tilt-gloves var(--float-duration) ease-in-out infinite;
  animation-delay: -1.2s;     /* чтобы не синхронно с ракеткой */
  transform-origin: 50% 30%;
  will-change: transform;
  pointer-events: none;
  display: block;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.4));
}

.decor-ball {
  --float-distance: 10px;
  --float-duration: 8s;
  animation: helmet-float var(--float-duration) ease-in-out infinite;
  will-change: transform;
  pointer-events: none;
  display:block;
}

/* Уважение настроек пользователя */
@media (prefers-reduced-motion: reduce) {
  .decor-racket,
  .decor-gloves,
  .decor-ball {
    animation: none !important;
    transform: none !important;
  }
}



/* буквенная анимация заголовка */
.hero-title {
  position: relative;
  line-height: 1.05;
}
.hero-title .char {
  display: inline-block;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce){
  .hero-title .char { transition: none !important; }
  .hero-title:hover::after{ content: ""; }
}

.black-nav .nav-link{
  color: var(--bg) !important;
}

.page_section{
  min-height: 80vh;
}
.black-nav a, .black-nav .footer-dev{
  color: #1E1E1E !important;
}

.sample-title{
  color: var(--red);
  font-family: "Montserrat", sans-serif;
}


.error-404-link{
  background-color: var(--bg-3);
  color: var(--text);
  padding: 12px 55px;
  font-size: 25px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  border-radius: 30px;
  position: absolute;
  bottom: 25%;
}

/* ДЕСКТОП: 3 колонки сеткой */
@media (min-width: 901px){
  .visual-right{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .sports-nav{ display:none; }
}

/* МОБАЙЛ: горизонтальная лента */
@media (max-width: 900px){
  .visual-right{
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 64px; /* место под стрелки */
  }
  .visual-right .visual-item{
    flex: 0 0 88vw;
    max-width: 360px;
  }
  .sports-nav{
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 12px;
  }
  .sports-arrow{
    width: 52px; height: 52px; border: 0; border-radius: 4px;
    background: #1f1f1f; color: #fff; font-size: 24px;
  }
  .sports-arrow[disabled]{ opacity:.4; pointer-events:none; }
  .error-404-link{
    padding: 12px 42px;
    font-size: 18px;
    bottom: 39%;
  }
}

.desktop_404{
  display: block;
  min-height: 100vh;
  background: url('../img/1920_404.png') center/cover no-repeat;
}
.mobile_404{
  display: block;
  min-height: 50vh;
  background: url('../img/375_404.png') center/cover no-repeat;
}

.desktop_thanks{
  display: block;
  min-height: 100vh;
  background: url('../img/thanks_1920.png') center/cover no-repeat;
}
.mobile_thanks{
  display: block;
  min-height: 50vh;
  background: url('../img/thanks_375.png') center/cover no-repeat;
}
.error-404-section{
  min-height: 100vh;
}


/* ===== Mobile overlay menu ===== */
.mmenu{
  position: fixed; inset: 0;
  background: var(--red, #b41519);
  padding: 28px 24px 32px;
  display: none;                /* по умолчанию скрыт */
  opacity: 0; transform: translateY(-10px);
  transition: opacity .25s ease, transform .25s ease;
  z-index: 1100;                /* выше хедера/контента */
}

.mmenu.is-open{
  display: block;
  opacity: 1; transform: translateY(0);
}

.mmenu-close{
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px;
  background: transparent; border: 0; color: #fff;
  font-size: 34px; line-height: 1; cursor: pointer;
}

.mmenu-center{
  /* центрируем блок с кнопками как в макете */
  position: absolute; left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  width: calc(100% - 72px);     /* визуальные поля слева/справа */
  max-width: 340px;
  display: flex; flex-direction: column; gap: 12px;
}

.mmenu-link{
  display: block;
  text-align: center;
  color: #fff; text-decoration: none;
  border: 1px solid rgba(255,255,255,.9);
  padding: 16px 12px;
  font-weight: 600;
  font-size: 18px;
}

.mmenu-link:active{ transform: translateY(1px); }

.mmenu-consult{
  position: absolute; left: 24px; right: 24px; bottom: 56px;
  color: #fff; text-decoration: underline;
  font-weight: 500; font-size: 16px;
  text-align: left;
}

/* Блокируем прокрутку страницы, когда открыт оверлей */
body.mmenu-open{ overflow: hidden; }

/* Только на мобайле показываем оверлей; на десктопе не нужен */
@media (min-width: 991.98px){
  .mmenu{ display: none !important; }
  .mobile-menu-open{ display: none !important; }
}

.toggler-black .navbar-toggler-icon{
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")!important;
}






/* ====== SPORTS ====== */
.sports { background:#fff; padding:48px 0 36px; }
.sports .container{ max-width:1180px; }

.sports-head{
  margin:0 0 16px;
  font-family:'Compacta',sans-serif;
  font-size:61px; line-height:1.05;
  text-transform:lowercase; color:#111;
}
.sports-head .accent{ color:#b41519; }

/* ГРИД: ровно 3 колонки, фикс. высота ряда 160px */
.sports-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  grid-auto-rows: 160px;          /* << ключ к одинаковой высоте рядов */
  gap:24px;                       /* отступы как в макете */
  align-items:stretch;
}

/* Карточка заполняет ячейку на 100% высоты */
.sport-card{
  position:relative; border-radius:2px; overflow:hidden;
  height:100%;
}
.sport-thumb{
  position:absolute; inset:0;     /* растянуть контент на всю карточку */
}
.sport-thumb img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  display:block;
}

/* Белая подпись снизу справа */
.sport-title{
  position:absolute; right:18px; bottom:12px;
  color:#fff; font-weight:800; font-size:26px;
  letter-spacing:.2px; text-shadow:0 4px 14px rgba(0,0,0,.55);
  text-transform:lowercase; white-space:nowrap;
}

/* Красный тон поверх фото (виньетка/умножение) */
.sport-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(178,0,0,.40), rgba(0,0,0,.10)),
    linear-gradient(0deg, rgba(0,0,0,.10), rgba(0,0,0,.10));
  mix-blend-mode:multiply;
  pointer-events:none;
}

/* РАСКЛАД ПЕРВЫХ 7 КАРТОЧЕК ПОД МАКЕТ */
@media (min-width: 901px){
  .sports-grid > .sport-card:nth-child(1){ grid-column:1; grid-row:1; }
  .sports-grid > .sport-card:nth-child(2){ grid-column:2; grid-row:1; }
  .sports-grid > .sport-card:nth-child(3){ grid-column:3; grid-row:1; }

  .sports-grid > .sport-card:nth-child(4){ grid-column:2 / span 1; grid-row:2; }
  .sports-grid > .sport-card:nth-child(5){ grid-column:3; grid-row:2; }

  .sports-grid > .sport-card:nth-child(6){ grid-column:1; grid-row:3; }
  .sports-grid > .sport-card:nth-child(7){ grid-column:2 / span 1; grid-row:3; }
}

/* ====== MOBILE ====== */
@media (max-width: 900px){
  .sports{ padding:36px 0 16px; }
  .sports-head{ font-size:44px; line-height:1.05; margin-bottom:12px; }

  .sports-grid{
    display:flex; gap:16px; overflow-x:auto; scroll-behavior:smooth;
    padding-bottom:8px;
  }
  .sport-card{ min-width:88vw; height:auto; }
  .sport-thumb{ position:relative; height:54vw; }
  .sport-title{ font-size:28px; right:16px; bottom:12px; }

  .sports-nav{ display:flex; justify-content:center; gap:14px; margin:18px 0 0; }
  .form-title, .contacts-title, .pricing-head, .visual-head, .why-head{
    font-size: 45px!important;
  }
  .visual-sub{
    font-size: 28px!important;
  }
}
@media (min-width: 901px){
  .sports-nav{ display:none; }
}

/* Стрелки на мобиле */
.sports-arrow{
  width:58px; height:58px; border:0; border-radius:4px;
  background:#1f1f1f; color:#fff; font-size:24px;
}
/* базовое состояние */
.sport-thumb img{
  transform: scale(1);
  transform-origin: center;
  transition: transform .35s ease;
  will-change: transform;
}

/* ховер на десктопах */
@media (hover:hover) and (pointer:fine){
  .sport-card:hover .sport-thumb img{
    transform: scale(1.06); /* 1.04–1.08 по вкусу */
  }
}

/* доступность: по фокусу клавиатурой тоже чуть зумим */
.sport-card:focus-within .sport-thumb img{
  transform: scale(1.06);
}

/* тач-отклик (по желанию) */
@media (hover:none) and (pointer:coarse){
  .sport-card:active .sport-thumb img{
    transform: scale(1.03);
  }
}


.main-btn, .sports-arrow, .tariff-btn, .btn-submit{
  transition:all .2s;
}
.main-btn:hover, .sports-arrow:hover, .tariff-btn:hover, .btn-submit:hover{
  color:#fff;
  background:#949494;
}



label.check { position: relative; }

.tooltip-error{
  position:absolute; left:32px; top:100%; margin-top:6px;
  background:#fff5f5; border:1px solid #e03131; color:#e03131;
  border-radius:8px; padding:8px 10px; font-size:13px; z-index:1000;
  max-width:clamp(220px,48vw,420px); box-shadow:0 4px 12px rgba(224,49,49,.15);
}
.tooltip-error::before, .tooltip-error::after{
  content:""; position:absolute; left:14px; width:0; height:0;
  border-left:6px solid transparent; border-right:6px solid transparent;
}
.tooltip-error::before{ top:-7px;  border-bottom:7px solid #e03131; }
.tooltip-error::after{  top:-6px;  border-bottom:6px solid #fff5f5; }

label.check input[type="checkbox"].is-invalid { accent-color:#e03131; }
label.check input[type="checkbox"].is-invalid + span { color:#e03131; }

@supports not (accent-color: auto){
  label.check input[type="checkbox"].is-invalid{
    outline:2px solid #e03131; outline-offset:2px; border-radius:4px;
  }
}


/* --- Cookie banner --- */
.cookie-banner{
  position: fixed; /* всегда у нижнего края окна, "над футером" визуально */
  left: 0; right: 0; bottom: 0;
  z-index: 1050;
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}

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

/* Контент баннера */
.cookie-inner{
  margin: 0 auto 16px;
  max-width: 1100px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  background: #1f1f1f;           /* темный фон */
  color: #f9fafb;                 /* светлый текст */
  border: 1px solid #1f1f1f;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
}

/* Текст */
.cookie-text p{
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.35;
}
.cookie-text a{
  color: var(--red); /* голубая ссылка */
  text-decoration: underline;
}

/* Кнопки */
.cookie-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cookie-btn{
  appearance: none;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  transition: transform .06s ease, opacity .2s ease, background-color .2s;
  user-select: none;
}
.cookie-btn:active{ transform: translateY(1px); }

.cookie-btn.btn-accept{
  background: white;   /* зелёная */
  color: #081c15;
  border-color: white;
}
.cookie-btn.btn-accept:hover{ background:var(--red);color: white; }

.cookie-btn.btn-decline{
  background: #9f1d16;   /* тёмно-серый */
  color: #e5e7eb;
  border-color: #9f1d16;
}
.cookie-btn.btn-decline:hover{ background:var(--bg-3);color: white; }

/* Адаптив */
@media (max-width: 700px){
  .cookie-inner{
    grid-template-columns: 1fr;
  }
}


/* скрываем общий фокус */
button:focus,
.btn:focus,
.cookie-btn:focus { outline: none !important; box-shadow: none !important; }

/* показываем кастомный фокус ТОЛЬКО при навигации с клавиатуры */
button:focus-visible,
.btn:focus-visible,
.cookie-btn:focus-visible {
  outline: 2px solid #10b981;    /* свой цвет */
  outline-offset: 2px;
  box-shadow: none !important;    /* перекрыть Bootstrap */
}