:root{
  --gold:#e5b35d;
  --dark:#0b0e12;
}

html,body{height:100%}
body{scroll-behavior:smooth}

/* Navbar */
.navbar .btn{border-radius:999px}
/* База: прозрачный фон */
#siteNav {
  background-color: transparent;
  transition: background-color 0.9s ease, backdrop-filter 0.9s ease;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bs-navbar-toggler-border-color: rgba(255,255,255,.6);
}
#offcanvasNav { --bs-offcanvas-width: 300px; background-color: #414141;}
.offcanvas-header .btn-close { margin: 0;}

/* 100% белый крестик в offcanvas */
#offcanvasNav .btn-close {
  /* подменяем svg на белый */
  --bs-btn-close-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2L14 14M14 2L2 14' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-image: var(--bs-btn-close-bg) !important;

  /* убираем все осветлители/инверты и полупрозрачность */
  filter: none !important;
  opacity: 1 !important;

  /* размер, чтобы выглядеть чётко */
  width: 1.25rem;
  height: 1.25rem;
  background-size: 1.25rem 1.25rem;
}

/* не даём Bootstrap затемнять при hover/focus */
#offcanvasNav .btn-close:hover,
#offcanvasNav .btn-close:focus {
  box-shadow: none !important; 
}

/* Синий фон + blur при прокрутке */
#siteNav.scrolled {
  background-color: rgb(26 148 255 / 85%) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Анимация: из белого -> в прозрачный (при возврате к верху) */
@keyframes whiteToTransparent {
  0%   { background-color: rgba(255, 255, 255, 0.45); }
  100% { background-color: transparent; }
}
#siteNav.fade-top {
  animation: whiteToTransparent 0.7s ease forwards;
}

/* Плавное появление при входе в состояние скролла */
@keyframes navReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
#siteNav.reveal {
  animation: navReveal 0.9s ease , backdrop-filter 0.9s ease;
}
.nav-item{color:#fff !important;}

/* Опционально: светлые ссылки на синем фоне */
.navbar.navbar-dark .nav-link { color: rgba(255,255,255,.9); }

/* Если пользователь против анимаций */
@media (prefers-reduced-motion: reduce) {
  #siteNav, #siteNav.scrolled { transition: none; }
  #siteNav.fade-top, #siteNav.reveal { animation: none !important; }
}
.navbar-toggler {
    border-color: transparent !important;
}
.navbar-toggler:hover {
    border-color: transparent !important;
}
.navbar-toggler:focus {
    border-color: transparent !important;
    box-shadow: none !important;
}




/* HERO */
.hero{min-height:80vh; display:grid; place-items:end; padding-top:72px; position:relative}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 40%, rgba(0,0,0,.25))}
.hero-inner{padding:56px 0}

/* Cards */
.card-link{text-decoration:none; color:inherit; border:1px solid #eef1f5}
.card-link:hover{transform:translateY(-2px); transition:.2s; box-shadow:0 12px 28px rgba(0,0,0,.08)}
.object-cover{width:100%; height:100%; object-fit:cover}

/* Buttons */
.btn-gold{background:#ffd602; color:#111; border:1px solid rgba(0,0,0,.05)}
.btn-gold:hover{filter:brightness(0.95); color:#111}

/* Logos */
.logo-grid{filter:grayscale(1) contrast(1.05)}

/* Footer */
#contact {background-color:#212121 !important;}
footer p, footer a{font-size:1.1rem}

/* Back to top */
.to-top{
  position:fixed; right:16px; bottom:16px; z-index:1050; width:44px; height:44px; display:none;
}

/* Utilities */
.h2{font-size:clamp(24px, 3.2vw, 36px)}
.rounded-top{border-top-left-radius:.5rem; border-top-right-radius:.5rem}

/* Responsive tweaks */
@media (max-width: 991.98px){
  .hero{min-height:64vh}
}
@media (max-width: 575.98px){
  .hero-inner{padding:40px 0}
}

.link-light {
    color: #fff !important;
    text-decoration: none;
}

/* убираем любые случайные горизонтальные скроллы внутри секции */
#trainers { overflow-x: clip; }

/* Мобайл/планшет — стабильный full-bleed без отрицательных маргинов */
.trainer-bleed{
  position: relative;
  width: 100dvw;           /* не 100vw, чтобы не учитывать полосу прокрутки */
  aspect-ratio: 1 / 1;     /* квадрат */
  left: 50%;
  transform: translateX(-50%); /* центрируем относительно вьюпорта */
  margin: 0;               /* без отрицательных маргинов — не рвём сетку */
  overflow: hidden;
}

/* Десктоп ≥ 992px — внутри колонки */
@media (min-width: 992px){
  .trainer-bleed{
    width: 100%;
    left: 0;
    transform: none;
    aspect-ratio: 1 / 1;   /* квадрат в пределах колонки */
  }
}

.trainer-bleed > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ваши эффекты — оставляем без изменений */
#trainers .trainer-bleed img{
  transform: scale(1.02);
  transition: transform .6s ease;
}
#trainers .trainer-bleed:hover img{ transform: scale(1.06); }

/* остальной ваш стиль — без изменений */
#trainers .trainer-list{
  display: grid;
  gap: 1rem;
}
#trainers .trainer-card{
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-left: 6px solid #212529;
  border-radius: .75rem;
  padding: 1rem 1rem 1rem 1.25rem;
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.03);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#trainers .trainer-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.06);
  border-color: #000;
}
#trainers .trainer-card.featured{
  background: #111;
  border-color: #111;
  box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.25);
}
#trainers .trainer-card.featured p{ margin-bottom: 0; }

@media (max-width: 991.98px){
  #trainers .trainer-card{ padding: .875rem .875rem .875rem 1rem; }
}


/* Мобиле/планшет — full-bleed квадрат */
.our-studs-bleed{
  position: relative;
  --sq: 100vw;
  width: var(--sq);
  height: var(--sq);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}
/* Десктоп ≥ 992px — в пределах колонки контейнера */
@media (min-width: 992px){
  .our-studs-bleed{
    width: 100%;
    height: auto;
    margin-left: 0;
    margin-right: 0;
    aspect-ratio: 16 / 9; 
  }
}
@media (max-width: 575.98px){
  .our-studs-bleed{
    width: 100%;
    height: auto;
    margin-left: 0;
    margin-right: 0;
    aspect-ratio: 16 / 9; 
  }
}
.our-studs-bleed > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}