:root{
  --bg:#070b14;
  --text:#e6ebff;
  --muted:#9aa7c7;
  --brand:#7aa2ff;
  --brand-2:#a78bfa;
  --brand-strong:#3b82f6;
  --border:rgba(255,255,255,0.12);
  --ring:rgba(122,162,255,0.55);
  --glass:rgba(255,255,255,0.06);
  --danger:#ff3b3b; /* красный для буквы f и перечёркнутой цены */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  /* ФОН: убрали белёсые свечения — оставляем чистый тёмный */
  background: var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Декор — оставлены на случай возврата подсветок, но сейчас невидимы */
.page-decor{position:fixed; inset:auto; z-index:-1; pointer-events:none; filter:blur(60px); opacity:0}
.decor-1{width:520px; height:520px; top:-140px; right:-120px;}
.decor-2{width:420px; height:420px; bottom:-140px; left:-90px;}

.container{max-width:1160px; margin:0 auto; padding:0 20px}
.section{padding:72px 0; opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.section.in{opacity:1; transform:none}

/* Секция видима, если открыта по якорю */
.section:target{opacity:1 !important; transform:none !important}

/* Header */
.site-header{position:sticky; top:0; z-index:10; backdrop-filter:saturate(120%) blur(10px); background:rgba(7,11,20,0.55); border-bottom:1px solid var(--border)}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.logo{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:800; letter-spacing:.2px}
.logo-mark{width:28px; height:28px; display:block}
.logo-type{font-size:16px; line-height:1}
/* Буква F — красная и слегка больше */
.brand-f{
  color:var(--danger);
  display:inline-block;
  font-size:1.22em;      /* немного крупнее соседних букв */
  line-height:1;
  transform: translateY(1px); /* лёгкая корректировка по базовой линии */
}
.nav{display:flex; gap:22px}
.nav a{color:var(--muted); text-decoration:none; font-weight:600}
.nav a:hover{color:#fff}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:14px; border:1px solid var(--border); color:#fff; text-decoration:none; font-weight:700; transition:transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 30px -15px var(--ring)}
.btn.primary{background:linear-gradient(90deg, var(--brand), var(--brand-2)); border-color:transparent; color:#0b1220}
.btn.primary:hover{filter:brightness(1.05)}
.btn.outline{background:rgba(255,255,255,0.03)}
.btn.ghost{background:rgba(255,255,255,0.04)}
.btn.pill{border-radius:999px}
.btn.xl{padding:14px 18px; border-radius:16px}
.btn.wide{width:100%; justify-content:center}

/* anchors wrap on mobile nicer */
.anchors .btn{min-width:230px}
@media (max-width:760px){
  .anchors .btn{min-width:unset; flex:1 1 100%}
}

/* Icons */
.i{display:inline-block; width:18px; height:18px; background:currentColor; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat}
.i-tg{ -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M9.04 15.38l-.37 5.22c.53 0 .76-.23 1.04-.5l2.51-2.4 5.2 3.8c.95.52 1.63.25 1.89-.87l3.43-16.1h0c.3-1.45-.52-2.02-1.44-1.67L1.2 9.82c-1.4.54-1.38 1.31-.24 1.66l5.13 1.6L18.9 6.53c.74-.48 1.39-.22.84.26"/></svg>') }

/* Hero */
.hero{position:relative; overflow:hidden}
.hero-inner{display:flex; align-items:center; min-height:64vh}
.hero-text{max-width:760px}
.hero h1{font-size:44px; line-height:1.1; margin:0 0 10px}
.hero .lead{font-size:18px; color:var(--muted); margin:0 0 18px}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px}
.grad-violet{background:linear-gradient(90deg, #a78bfa, #c084fc); -webkit-background-clip:text; background-clip:text; color:transparent}

/* Hero-stat (если используется) */
.hero-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: 16px;
  color: #fff;
  opacity: 0.95;
}
.i.i-car {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 2px solid #fff; border-radius: 50%;
  background-color: rgba(255,255,255,0.05);
}
.i.i-car::before {
  content: ""; display: block; width: 18px; height: 18px;
  mask: url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/icons/car-front-fill.svg') no-repeat center;
  -webkit-mask: url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/icons/car-front-fill.svg') no-repeat center;
  background-color: #fff;
}

/* Cards (на главной сейчас не используются) */
.cards .grid-1{display:grid; grid-template-columns:1fr; gap:20px}

/* ===== Страница ОБУЧЕНИЯ (существующие стили) ===== */
.training-hero h1{ margin:0 0 10px; }
.training-hero .lead{ color:var(--muted); max-width:860px; }

.training-title{
  text-align:center;
  font-size:32px;
  line-height:1.15;
  margin:0 0 16px;
}
@media (max-width:760px){
  .training-title{ font-size:26px; }
}

.feature-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:20px; margin-top:16px;
}
@media (max-width:980px){ .feature-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .feature-grid{ grid-template-columns:1fr; } }

.feature{
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border:1px solid var(--border); border-radius:18px;
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}
.feature-media{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:rgba(255,255,255,0.03); border-bottom:1px solid var(--border);
}
.feature-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,11,20,0.35) 0%, rgba(7,11,20,0.08) 55%, rgba(7,11,20,0) 100%);
}
.feature-media img{width:100%; height:100%; object-fit:cover; filter:contrast(1.06) saturate(1.08); transform:scale(1.01)}

.feature-body{ padding:16px 18px 18px; }
.feature-body .num-chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,0.12); border:1px solid var(--border);
  color:#fff; font-weight:800; font-size:14px;
  margin-bottom:8px;
}
.feature-body h3{
  display:flex; align-items:center; gap:8px;
  font-size:18px; margin:0 0 6px;
}
.feature-body h3 .icon{
  width:20px; height:20px;
  color:#fff;
  flex-shrink:0;
}
.feature p{margin:0; color:var(--muted);}

.feature-cta{margin-top:22px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.feature-cta .sub{color:var(--muted); font-size:14px; margin:0}

/* ===== START (С чего мы начнём?) — таймлайн-степпер) ===== */
.start-title{
  text-align:center;
  font-size:34px;
  line-height:1.15;
  margin:0 0 20px;
}
@media (max-width:760px){ .start-title{ font-size:28px; } }

.start-list{
  list-style:none; margin:0; padding:0;
  position:relative;
}
.start-list::before{
  content:""; position:absolute; left:32px; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, var(--brand), var(--brand-2));
  opacity:.65;
}

.start-item{
  display:grid; grid-template-columns:64px 1fr; gap:16px;
  position:relative; margin:0 0 18px 0;
}

.start-node{ position:relative; height:100%; display:flex; align-items:flex-start; justify-content:center; }
.start-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  color:#0b1220; font-weight:900; box-shadow:0 6px 20px -8px var(--ring);
  border:1px solid rgba(255,255,255,.25);
  margin-top:6px;
}

.start-card{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px 18px 18px;
  backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}
.start-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--brand), var(--brand-2));
  border-radius:3px 0 0 3px; opacity:.9;
}

.start-card h3{
  display:flex; align-items:center; gap:8px;
  font-size:18px; margin:0 0 8px;
}
.start-card h3 .icon{
  width:20px; height:20px; color:#fff; flex-shrink:0;
}
.start-card p{ margin:0; color:var(--muted); }

/* Чипы + площадки */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.chip{
  display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px;
  border:1px solid var(--border); background:rgba(255,255,255,0.04);
  font-size:13px; color:#fff;
}
.platforms-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px;
  margin-top:12px;
}
@media (max-width:980px){ .platforms-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:640px){ .platforms-grid{ grid-template-columns:repeat(2, 1fr); } }
.plat-chip{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  padding:10px 12px; border-radius:12px; min-height:48px;
  border:1px solid var(--border); color:#fff;
  background:rgba(255,255,255,0.04);
  font-weight:700; font-size:14px;
}
.platforms-grid img{
  width:100%; height:48px; object-fit:contain;
  border:1px solid var(--border); border-radius:12px;
  background:rgba(255,255,255,0.04); padding:8px;
}

/* ===== RESULTS / Наши результаты ===== */
.results-title{
  text-align:center; font-size:32px; margin:0 0 8px; letter-spacing:.2px;
}
.results-lead{
  text-align:center; color:var(--muted); max-width:840px; margin:0 auto 18px;
}

.results-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
@media (max-width:980px){ .results-list{ grid-template-columns:1fr; } }

.result-card{
  display:grid; grid-template-columns: 40% 1fr;
  border:1px solid var(--border);
  border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transform:perspective(700px) rotateX(0) rotateY(0);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.result-card:hover{
  transform:perspective(700px) rotateX(1.2deg) rotateY(.8deg) translateY(-2px);
  box-shadow:0 18px 50px -24px var(--ring);
  border-color:rgba(255,255,255,.18);
}

.result-media{ position:relative; min-height:220px; background:rgba(255,255,255,.03); }
.result-media img,
.result-media video{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: none; transition: none;
  filter:contrast(1.04) saturate(1.05);
}
.result-card:hover .result-media img,
.result-card:hover .result-media video{
  transform:none;
}

.ribbon{
  position:absolute; top:12px; left:12px;
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:10px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  color:#0b1220; font-weight:900; border:1px solid rgba(255,255,255,.25);
  box-shadow:0 8px 22px -12px var(--ring);
}

.result-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px; }
.result-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.result-head h3{ margin:0; font-size:18px; }
.result-head .meta{ color:var(--muted); font-size:14px; white-space:nowrap; }

.result-body p{ margin:0; color:var(--muted); }

.result-link{
  align-self:flex-start;
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
  padding:10px 14px;
}
.result-link:hover{ filter:brightness(1.06); }

/* ===== SCHEDULE & PRICING / Расписание и цена ===== */
.schedule-pricing .sp-head{ text-align:center; margin-bottom:22px; }
.sp-badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid var(--border);
  color:#fff; font-weight:700; letter-spacing:.3px; font-size:12px;
}
.sp-title{
  margin:10px 0 6px; font-size:34px; line-height:1.1;
  background:linear-gradient(90deg, #a78bfa, #c084fc); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sp-lead{ color:var(--muted); max-width:900px; margin:0 auto; }

.sp-wrap{
  display:grid; grid-template-columns: 1fr 380px; gap:24px; align-items:start; margin-top:20px;
}
@media (max-width:980px){ .sp-wrap{ grid-template-columns: 1fr; } }

/* Таймлайн — линия во всю высоту, больше отступы, без точек */
.sp-timeline{
  list-style:none; margin:0; padding:18px 0 0 0; position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--border); border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  padding-left:100px;
}
.sp-timeline::before{
  content:""; position:absolute; left:72px; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, var(--brand), var(--brand-2)); opacity:.8;
  border-radius:2px;
}
.sp-item{ position:relative; padding:12px 18px 14px 0; }
.sp-date{
  position:absolute; left:-92px; top:8px; width:80px; text-align:right;
  font-weight:800; color:#fff; opacity:.85;
}
/* скрываем кружки */
.sp-dot{ display:none !important; }
.sp-item:hover .sp-dot{ transform:none; }

.sp-text{ margin:0; color:var(--muted); line-height:1.6; }
.sp-text strong{ color:#fff; }

/* Выделение ключевых значений в подписи */
.sp-emph{
  background:linear-gradient(90deg, #a78bfa, #c084fc);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; font-weight:800;
}

/* Карточка цены */
.sp-card{ position:sticky; top:84px; }
.sp-ticket{
  position:relative;
  border:1px solid var(--border); border-radius:20px;
  background:
    radial-gradient(120% 120% at 110% -10%, rgba(167,139,250,.18), rgba(167,139,250,0) 50%),
    radial-gradient(120% 120% at -10% 120%, rgba(122,162,255,.16), rgba(122,162,255,0) 50%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 18px 50px -24px var(--ring);
  padding:18px 18px 16px;
  overflow:hidden;
  transform:translateZ(0);
}
.sp-ribbon{
  position:absolute; top:10px; right:10px;
  display:inline-flex; align-items:center; justify-content:center;
  height:22px; padding:0 8px; border-radius:8px;
  font-size:11px; letter-spacing:.3px; font-weight:900; color:#0b1220;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  border:1px solid rgba(255,255,255,.28);
}

/* старая цена + новая */
.sp-price{
  display:flex; align-items:flex-end; gap:10px; margin-top:8px; margin-bottom:4px;
  flex-wrap:wrap;
}
.sp-price-old{
  order:-1;
  font-weight:900; font-size:18px; line-height:1;
  color:var(--danger);
  text-decoration:line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--danger);
}
.sp-price-num{
  font-size:44px; font-weight:900; line-height:1;
  background:linear-gradient(90deg, #9bb7ff, #c7b2ff, #9bb7ff);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:priceShine 4s linear infinite;
}
.sp-price-cur{ font-size:20px; opacity:.9; color:#fff; }
@keyframes priceShine { 0%{background-position:0% 0;} 100%{background-position:200% 0;} }

.sp-points{ list-style:none; margin:8px 0 12px; padding:0; display:grid; gap:8px; }
.sp-points li{
  display:flex; align-items:center; gap:8px; color:var(--muted);
}
.sp-points li::before{
  content:""; width:9px; height:9px; border-radius:2px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  display:inline-block; flex-shrink:0;
}
.sp-cta{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.sp-btn{ width:100%; justify-content:center; }
.sp-note{ margin:10px 2px 0; color:var(--muted); font-size:14px; }

/* Hover-микроанимация карточки */
.sp-ticket:hover{
  transform:translateY(-2px);
  box-shadow:0 24px 70px -30px var(--ring), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Footer — только логотип по центру */
.site-footer{border-top:1px solid var(--border); background:rgba(0,0,0,0.35)}
.footer-inner{display:grid; place-items:center; padding:22px 20px;}
.footer-inner.only-logo{grid-template-columns:1fr;}
.foot-logo .logo-mark{width:26px; height:26px}
.foot-logo .logo-type{font-size:15px}
.copy{text-align:center; color:var(--muted); font-size:14px; border-top:1px solid var(--border); padding:14px 0}

/* Адаптив */
@media (max-width:980px){
  .hero h1{font-size:36px}
  .container{padding:0 16px}
}
@media (max-width:760px){
  .header-inner{height:60px}
  .nav{display:none}
  .tg-cta{padding:10px 14px}
  .hero{padding-top:36px}
  .section{padding:56px 0}
  .hero h1{font-size:30px}
  .hero .lead{font-size:16px}
  .btn.xl{padding:13px 16px; font-size:15px}
  .results-list{gap:14px}
  .result-card{grid-template-columns:1fr}
}

/* === Header: Telegram button as icon-only === */
.tg-cta {
  padding: 0 !important;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
}
.tg-cta .i { width: 20px; height: 20px; }

/* на маленьких экранах делаем кругляш */
@media (max-width: 760px){
  .tg-cta { width: 40px; height: 40px; border-radius: 999px; }
}

/* === HERO: картинка внутри блока (без фонового изображения) === */
/* не трогаем существующий flex, просто настраиваем раскладку с фото */
.hero-inner { 
  gap: 32px;               /* расстояние между текстом и фото */
  flex-wrap: wrap;         /* на мобильных элементы становятся друг под другом */
}

/* текст и фото занимают ~поровну места на десктопе */
.hero-text  { flex: 1 1 520px; }
.hero-image { flex: 1 1 460px; min-width: 320px; }

.hero-image img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 14px 28px -12px rgba(0,0,0,.45);
  transition: transform .30s ease;
}
.hero-image img:hover{ transform: scale(1.02); }

/* На телефонах фото уходит под текст и растягивается на всю ширину */
@media (max-width: 760px){
  .hero-text, .hero-image { flex-basis: 100%; }
  .hero-image { margin-top: 22px; min-width: 0; }
}

/* === Hero: новый порядок — заголовок сверху, фото, потом текст === */
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

.hero-title {
  font-size: 44px;
  line-height: 1.1;
  margin: 0;
}

.hero-image {
  width: 100%;
  max-width: 880px;
}
.hero-image img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 14px 28px -12px rgba(0,0,0,.45);
}

.hero-text {
  max-width: 760px;
}

@media (max-width: 760px) {
  .hero-title { font-size: 30px; }
  .hero-image { max-width: 100%; }
}

/* Кнопка под фото в Hero */
.hero-primary-action {
  margin-top: 16px;
}
.hero-primary-action .btn {
  width: 100%;
  max-width: 320px;
  justify-content: center;
}

/* === Hero redesign with image === */
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}

.hero-image img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 14px 28px -12px rgba(0,0,0,.45);
  transition: transform .35s ease;
}

.hero-image img:hover {
  transform: scale(1.02);
}

/* На телефонах фото уходит под текст */
@media (max-width: 760px){
  .hero-inner {
    grid-template-columns: 1fr;
  }
  .hero-image {
    margin-top: 22px;
  }
}
.hero-title {
  text-align: center;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  margin: 0 0 24px;
}
.hero-image {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-image .hero-title {
  margin-bottom: 16px;
  text-align: center;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
}
.hero-image .hero-title {
  white-space: nowrap; /* запрет переносов */
}

/* Новый подзаголовок */
.hero-subtitle {
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 700;
  margin: 0 0 16px;
}

/* Кнопка под фото */
.hero-cta {
  margin-top: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
/* Фиолетовый уже задаётся .grad-violet у тебя в проекте.
   Если вдруг нет — раскомментируй и задай свои цвета. */
/*
.grad-violet {
  background: linear-gradient(90deg, #a78bfa, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
*/

/* Центровка кнопки под описанием */
.hero-actions--center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  text-align: center;
}

/* Блок с фото и заголовком уже настроен ранее */
.hero-image {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-image .hero-title {
  margin-bottom: 16px;
  text-align: center;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
}

/* Кнопка под фото */
.hero-cta {
  margin-top: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

/* Мобильная адаптация Hero */
@media (max-width: 900px) {
  .hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hero-text,
  .hero-image {
    width: 100%;
  }

  .hero-subtitle,
  .lead,
  .hero-actions--center,
  .hero-stat {
    text-align: center;
  }

  /* Чтоб заголовок не ломался некрасиво
     и оставался читаемым на узких экранах */
  

  .hero-cta {
    width: 100%;
  }

  /* Кнопка "Программа обучения" на мобиле тоже растянута аккуратно */
  .hero-actions--center .btn {
    width: 100%;
    max-width: 420px;
  }
}
/* ====== HERO: мобильная перестановка колонок ====== */
@media (max-width: 900px) {
  /* Делаем контейнер колоночным и переупорядочиваем блоки */
  .hero-inner {
    display: flex;              /* безопасно, даже если у тебя уже grid — медиа перебьёт */
    flex-direction: column;     /* сверху вниз */
    gap: 24px;
  }

  /* ПРАВАЯ колонка (картинка) — ставим ПЕРВОЙ */
  .hero-image {
    order: -1;                  /* переносим наверх */
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* ЛЕВАЯ колонка (текст) — ниже */
  .hero-text {
    order: 0;
  }

  /* Визуальная аккуратность на мобиле */
 

  .hero-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
  }

  /* Кнопка под фото — по центру и удобной ширины */
  .hero-cta {
    margin-top: 16px;
    width: 100%;
    max-width: 440px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  /* Центруем и подравниваем левый текстовый блок */
  .hero-subtitle,
  .lead,
  .hero-actions--center,
  .hero-stat {
    text-align: center;
  }

  /* Кнопка "Программа обучения" тоже аккуратно тянется */
  .hero-actions--center .btn {
    width: 100%;
    max-width: 440px;
  }
}
/* ====== /HERO: мобильная перестановка колонок ====== */

/* === 1) Заголовок меньше на мобиле === */
@media (max-width: 480px) {
  .hero-title {
    font-size: clamp(20px, 7vw, 28px); /* было больше — теперь точно поместится */
    line-height: 1.15;
  }
}

/* === 2) Текст "Программа обучения" по центру (и вообще любые hero-кнопки текста) === */
.hero-actions--center .btn,
.hero-cta {
  display: inline-flex;            /* чтобы центрировать текст и иконку */
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* На мобиле можно растянуть по ширине — уже добавляли, оставляю здесь для полноты */
@media (max-width: 900px) {
  .hero-actions--center .btn {
    width: 100%;
    max-width: 440px;
  }
  .hero-cta {
    width: 100%;
    max-width: 440px;
  }
}

/* === 3) Приятная анимация кнопок (лёгкий подъём и тень) === */
.btn {
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, background-position .3s ease;
  will-change: transform, box-shadow;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}

/* Негромкая «пульсация» только для основной CTA (перейти к объявлениям) */
@media (prefers-reduced-motion: no-preference) {
  .btn.primary {
    animation: pulse-glow 2.8s ease-in-out infinite;
  }
  @keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 rgba(124,58,237,0); }
    50%      { box-shadow: 0 0 24px rgba(124,58,237,.25); } /* фиолетовое мягкое свечение */
  }
}

/* Для outline делаем «сияние» только при наведении, чтобы не мигало постоянно */
.btn.outline:hover {
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}

/* === 4) Добавляем стрелки к двум нужным кнопкам и лёгкое смещение при ховере === */
/* Стрелка для "Перейти к объявлениям" (hero-cta) и для "Программа обучения" (кнопка слева) */
.hero-cta::after,
.hero-actions--center .btn::after {
  content: "→";
  margin-left: 10px;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  transition: transform .2s ease;
}
.hero-cta:hover::after,
.hero-actions--center .btn:hover::after {
  transform: translateX(3px);
}

/* Чуть больше внутренние отступы, чтобы стрелке было комфортно */
.hero-cta,
.hero-actions--center .btn {
  padding-right: 20px; /* если у тебя уже большие отступы — можно убрать эту строку */
}

/* На очень узких экранах уменьшим стрелку, чтобы не ломала строку */
@media (max-width: 380px) {
  .hero-cta::after,
  .hero-actions--center .btn::after {
    margin-left: 8px;
  }
}
@media (max-width: 480px) {
  .hero-title {
    font-size: clamp(18px, 5vw, 22px); /* компактный размер для мобилы */
    line-height: 1.2;
    text-align: center;
    white-space: normal; /* чтобы переносился, если не помещается */
  }
}
/* === HERO: фикс размеров и переносов на мобиле (перебиваем .hero h1 и nowrap) === */
@media (max-width: 600px) {
  /* Снимаем запрет переносов, чтобы строка не вылазила */
  .hero-image .hero-title,
  .hero-title {
    white-space: normal !important;
  }

  /* Перебиваем .hero h1 { font-size:44px } на телефонах */
  .hero h1.hero-title {
    font-size: clamp(18px, 5.2vw, 22px) !important;
    line-height: 1.2 !important;
    text-align: center;
    letter-spacing: .2px;
  }
}

/* === Стрелки на кнопках — сделать крупнее === */
.hero-cta::after,
.hero-actions--center .btn::after {
  content: "→";
  margin-left: 10px;
  font-weight: 700;
  font-size: 22px;     /* было меньше — увеличили */
  line-height: 1;
  transition: transform .2s ease;
}
.hero-cta:hover::after,
.hero-actions--center .btn:hover::after {
  transform: translateX(3px);
}

/* Рядом с кнопкой "Федресурс" показываем цену справа */
.result-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.result-price {
  margin-left: auto;         /* уезжает вправо от кнопки */
  font-weight: 900;
  color: #22c55e;            /* зелёный */
  white-space: nowrap;
  letter-spacing: .2px;
}

/* На узких экранах цена снизу, по центру */
@media (max-width: 640px){
  .result-cta { justify-content: center; }
  .result-price { margin-left: 0; }
}
/* мобильный дубль статистики: по умолчанию скрыт */
.hero-stat--mobile { display: none; }

/* на мобильных показываем правый дубль и скрываем левый */
@media (max-width: 900px) {
  .hero-text .hero-stat { display: none; }           /* скрыть левую копию */
  .hero-image .hero-stat--mobile { 
    display: flex;
    gap: 8px;
    margin: 12px 0 8px;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .hero-image .hero-stat--mobile .i { /* если у тебя есть иконка-стиль */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* === FIX: на мобильных секции всегда видимы, даже если скрипт не сработал === */
@media (max-width: 760px){
  .section{opacity:1 !important; transform:none !important}
}


/* === MOBILE-ONLY HERO TWEAKS (requested) === */
.lead--mobile, .hero-divider, .hero-training-mobile { display: none; }

/* cap icon for training proof */
.i-cap{
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="%23000" d="M8.211 1.004a1 1 0 00-.422 0L.53 3.01a.75.75 0 000 1.447l7.259 2.016a1 1 0 00.422 0l7.259-2.016a.75.75 0 000-1.447L8.211 1.004zM2.5 7.331V10a5.5 5.5 0 0011 0V7.33l-4.68 1.3a3 3 0 01-1.64 0L2.5 7.331z"/></svg>');
          mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="%23000" d="M8.211 1.004a1 1 0 00-.422 0L.53 3.01a.75.75 0 000 1.447l7.259 2.016a1 1 0 00.422 0l7.259-2.016a.75.75 0 000-1.447L8.211 1.004zM2.5 7.331V10a5.5 5.5 0 0011 0V7.33l-4.68 1.3a3 3 0 01-1.64 0L2.5 7.331z"/></svg>');
  background: currentColor;
  width: 24px; height: 24px;
}

/* Mobile: swap/extend content only for screens <= 900px */
@media (max-width: 900px){
  /* 1) Перенос описания под H1 */
  .hero-text .lead{ display:none !important; }      /* скрыть старое место описания */
  .lead--mobile{ display:block; color:var(--muted); margin: 6px 0 10px; }

  /* 2) Линия под кнопкой "Перейти к объявлениям" */
  .hero-divider{
    display:block;
    height:2px; width:100%; max-width:520px;
    border:0; margin:16px auto 12px;
    background:linear-gradient(90deg, var(--brand), var(--brand-2));
    opacity:.85; border-radius:999px;
    box-shadow:0 10px 30px -20px var(--ring);
  }

  /* 3) Меняем "Покупка авто..." на "Обучение" — просто скрываем исходный h2 */
  .hero-subtitle{ display:none !important; }

  /* 4-5-6) Показываем мобильный блок "Обучение" + текст + фото + пруф над кнопкой */
  .hero-training-mobile{ display:block; }
  .m-train-title{ 
    text-align:center; font-weight:800; 
    font-size: clamp(22px, 5.2vw, 26px); margin: 2px 0 8px;
  }
  .m-train-lead{ text-align:center; color:var(--muted); margin:0 0 12px; }
  .m-train-img{ width:100%; height:auto; border-radius:16px; box-shadow:0 14px 28px -12px rgba(0,0,0,.45); }
  .m-train-proof{ display:flex; align-items:center; justify-content:center; gap:10px; margin:12px 0 8px; color:#fff; }
  .m-train-proof .i{ width:28px; height:28px; }

  /* Скрываем левую исходную "Программа обучения", т.к. дублируем её ниже */
  .hero-text .hero-actions--center{ display:none !important; }
}


/* ==== MOBILE HERO LAYOUT — tidy & equal image sizes ==== */
@media (max-width: 900px){
  /* Place photo first, text below — already handled; just center text column */
  .hero-text{ display:flex; flex-direction:column; align-items:center; }
  .hero-training-mobile{ width:100%; max-width:880px; }

  /* Title "Обучение" and copy */
  .hero-subtitle--mobile{ display:block; margin:8px 0 8px; font-size:clamp(22px,5.2vw,26px); }
  .edu-lead--mobile{ display:block; color:var(--muted); text-align:center; margin:0 0 12px; padding:0 10px; }

  /* Make training image same visual size as main hero photo */
  .mobile-edu-img{
    display:block;
    width:100%;
    height:auto;
    border-radius:18px;
    box-shadow:0 14px 28px -12px rgba(0,0,0,.45);
    margin:6px 0 10px;
  }

  /* Proof row above "Программа обучения" */
  .learn-stat--mobile{
    display:flex; align-items:center; justify-content:center; gap:10px;
    margin:10px 0 8px; color:#fff; text-align:center;
  }
  .learn-stat--mobile .i{ width:28px; height:28px; }

  /* Decorative divider under "Перейти к объявлениям" button */
  .mobile-sep{ height:2px; width:100%; max-width:880px; margin:16px auto 12px;
               background:linear-gradient(90deg, var(--brand), var(--brand-2)); opacity:.85; border-radius:999px;
               box-shadow:0 10px 30px -20px var(--ring); }
}


/* === MOBILE: блок обучения под разделяющей линией в Hero === */
@media (max-width: 900px){
  .mobile-edu-under{
    display:block;
    width:100%;
    max-width:880px;
    margin:12px auto 0;
    text-align:center;
  }
  .m-edu-title{
    font-weight:800;
    font-size:clamp(22px,5.2vw,26px);
    margin:8px 0 8px;
  }
  .m-edu-lead{
    color:var(--muted);
    margin:0 0 12px;
    padding:0 10px;
  }
  .m-edu-proof{
    display:flex; align-items:center; justify-content:center; gap:10px;
    margin:6px 0 10px; color:#fff;
  }
  .m-edu-proof .i{ width:28px; height:28px; }
  .m-edu-btn{
    display:inline-flex; justify-content:center; align-items:center;
    width:100%; max-width:440px; margin:6px auto 0;
  }
}

/* === DESKTOP: показать и красиво оформить блок обучения справа в Hero === */

/* Базовый вид под десктоп — не прячем .mobile-edu-under, задаём аккуратные отступы/ширину */
.hero-image .mobile-edu-under{
  display:block;
  width:100%;
  max-width: 880px;         /* та же максимальная ширина, что у фото */
  margin: 18px auto 0;
  text-align: left;         /* на ПК читается лучше слева */
}

/* Заголовок и описание */
.hero-image .m-edu-title{
  font-weight: 800;
  font-size: clamp(22px, 1.8vw, 28px);
  margin: 8px 0 8px;
}
.hero-image .m-edu-lead{
  color: var(--muted);
  margin: 0 0 12px;
}

/* Фото под описанием — такие же радиусы/тень, как у главной картинки */
.hero-image .mobile-edu-img{
  display:block;
  width:100%;
  height:auto;
  border-radius:18px;
  box-shadow:0 14px 28px -12px rgba(0,0,0,.45);
  margin: 8px 0 10px;
  object-fit: cover;
}

/* Пруф-строка с иконкой (академическая шапка) */
.hero-image .m-edu-proof{
  display:flex; align-items:center; gap:10px;
  margin: 8px 0 10px;
  color:#fff;
}
.hero-image .m-edu-proof .i{ width:24px; height:24px; }

/* Кнопка «Программа обучения» под пруфом */
.hero-image .m-edu-btn{
  display:inline-flex;
  justify-content:center; align-items:center;
  min-width: 240px;
}

/* Разделитель оставляем и на ПК */
.mobile-sep{
  height:2px; width:100%; max-width:880px; margin:16px auto 12px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  opacity:.85; border-radius:999px;
  box-shadow:0 10px 30px -20px var(--ring);
}

/* ===== Адаптив: на мобильных используем уже существующие мобильные правила ===== */
@media (max-width: 900px){
  /* тут у тебя уже есть мобильные стили для .mobile-edu-under, .mobile-edu-img и т.д.
     они останутся главными на узких экранах */
}

/* === DESKTOP-ONLY: Hero в две колонки + вертикальная разделительная линия === */
@media (min-width: 981px){
  /* контейнер правой колонки Hero (у тебя внутри весь мобильный стек) превращаем в две колонки */
  .hero-image{
    display: grid;
    grid-template-columns: 1fr 1fr;  /* левая + правая */
    gap: 32px;
    align-items: start;
    position: relative;              /* для вертикальной линии */
    text-align: left;                /* читаемее на ПК */
    max-width: 1160px;               /* опционально: чтобы не расползалось */
    margin: 0 auto;
  }

  /* вертикальная разделительная линия по центру */
  .hero-image::before{
    content:"";
    position:absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg, var(--brand), var(--brand-2));
    opacity: .35;
    border-radius: 999px;
    transform: translateX(-0.5px);
    pointer-events: none;
  }

  /* Явно раскладываем элементы по колонкам */
  .hero-image > .hero-title,
  .hero-image > .lead,
  .hero-image > img:not(.mobile-edu-img),
  .hero-image > .hero-cta,
  .hero-image > .mobile-sep,
  .hero-image > .hero-stat--mobile{
    grid-column: 1;          /* всё «верхнее» — слева */
  }

  /* Блок обучения — целиком в правую колонку */
  .hero-image > .mobile-edu-under{
    grid-column: 2;
    align-self: start;
  }

  /* Немного подправим отступы на ПК (мягко, без влияния на мобилу) */
  .hero-image > .lead{ margin: 6px 0 14px; color: var(--muted); }
  .hero-image > img:not(.mobile-edu-img){
    border-radius: 18px; box-shadow: 0 14px 28px -12px rgba(0,0,0,.45);
  }
  .hero-image > .hero-cta{ margin-top: 16px; }

  /* Разделитель под CTA слева пусть будет чуть уже */
  .hero-image > .mobile-sep{
    max-width: 520px;
    margin-left: 0;
  }

  /* В правой колонке аккуратнее выравнивание и отступы */
  .hero-image .mobile-edu-under{ text-align: left; margin-top: 0; }
  .hero-image .m-edu-title{ margin-top: 0; }
  .hero-image .mobile-edu-img{
    width: 100%; height: auto; border-radius: 18px;
    box-shadow: 0 14px 28px -12px rgba(0,0,0,.45);
    margin: 8px 0 10px;
  }
  .hero-image .m-edu-proof{ margin: 8px 0 10px; }
  .hero-image .m-edu-btn{ min-width: 240px; }
}

/* === DESKTOP-ONLY: Hero в две колонки с вертикальной линией. Мобилу не трогаем. === */
@media (min-width: 981px){
  /* Две равные колонки + вертикальная разделительная линия */
  .hero-image{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
    position: relative;
    max-width: 1160px;
    margin: 0 auto;
    text-align: left;
  }
  .hero-image::before{
    content:"";
    position:absolute; top:0; bottom:0; left:50%;
    width:1px; transform:translateX(-0.5px);
    background:linear-gradient(180deg, var(--brand), var(--brand-2));
    opacity:.35; border-radius:999px; pointer-events:none;
  }

  /* Явное раскладывание: слева — обучение, справа — продажа авто */
  .hero-image > .mobile-edu-under{ grid-column: 1; }
  .hero-image > .hero-title,
  .hero-image > .lead,
  .hero-image > .hero-main-img,
  .hero-image > .hero-stat--right,
  .hero-image > .hero-cta,
  .hero-image > .mobile-sep{ grid-column: 2; }

  /* Одинаковые размеры шрифтов заголовков и описаний */
  .m-edu-title,
  .hero-title{
    font-weight: 800;
    font-size: clamp(28px, 2.2vw, 40px);
    line-height: 1.15;
    margin: 0 0 10px;
  }
  .m-edu-lead,
  .hero-image > .lead{
    font-size: 18px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0 0 14px;
  }

  /* Фото одинаковой ширины/стиля и одинакового соотношения сторон */
  .mobile-edu-img,
  .hero-main-img{
    width:100%; height:auto; border-radius:18px;
    aspect-ratio: 16 / 9;            /* одинаковая высота на экране */
    object-fit: cover;
    box-shadow:0 14px 28px -12px rgba(0,0,0,.45);
    margin: 8px 0 10px;
  }

  /* Кнопки одинаковой ширины/высоты */
  .m-edu-btn,
  .hero-cta{
    display:inline-flex; justify-content:center; align-items:center;
    min-height: 48px;
    min-width: 240px;
    padding: 14px 18px;
  }

  /* Пруф-строки слева/справа с одинаковым стилем */
  .m-edu-proof,
  .hero-stat--right{
    display:flex; align-items:center; gap:10px;
    margin: 8px 0 10px;
    color:#fff;
    opacity:.95;
  }
  .m-edu-proof .i,
  .hero-stat--right .i{ width:24px; height:24px; }

  /* Разделитель пусть остаётся только в правой колонке и чуть уже */
  .hero-image > .mobile-sep{
    grid-column: 2;
    max-width: 520px;
    margin-left: 0;
  }
}
/* ===== DESKTOP HERO: две колонки + вертикальный разделитель. Мобилу не меняем. ===== */
@media (min-width: 981px){
  /* сетка 2 колонки */
  .hero-two-col{
    display:grid;
    grid-template-columns: 1fr minmax(0,24px) 1fr; /* левая | линия | правая */
    gap: 32px;
    align-items:start;
    max-width: 1160px;
    margin: 0 auto;
  }
  /* колонки */
  .hero-col{ display:flex; flex-direction:column; align-items:flex-start; }
  .hero-col--left  { grid-column: 1; }
  .hero-col--right { grid-column: 3; }

  /* вертикальная линия */
  .hero-v-sep{
    grid-column: 2;
    width:1px;
    background: linear-gradient(180deg, var(--brand), var(--brand-2));
    opacity:.35;
    border-radius:999px;
  }

  /* единые размеры заголовков */
  .m-edu-title,
  .hero-title{
    font-weight:800;
    font-size: clamp(28px, 2.2vw, 40px);
    line-height:1.15;
    margin:0 0 10px;
    text-align:left;
  }

  /* единые размеры описаний */
  .m-edu-lead,
  .hero-lead{
    font-size:18px;
    line-height:1.6;
    color:var(--muted);
    margin:0 0 14px;
    text-align:left;
  }

  /* единые параметры изображений */
  .hero-img{
    width:100%;
    aspect-ratio:16/9;     /* одинаковая высота и пропорции */
    object-fit:cover;
    border-radius:18px;
    box-shadow:0 14px 28px -12px rgba(0,0,0,.45);
    margin:8px 0 10px;
  }

  /* пруф-строки (иконка + текст) — одинаковый стиль */
  .hero-proof{
    display:flex; align-items:center; gap:10px;
    margin:8px 0 10px;
    color:#fff;
    opacity:.95;
  }
  .hero-proof .i{ width:24px; height:24px; }

  /* кнопки — одинаковые габариты */
  .hero-btn{
    display:inline-flex; justify-content:center; align-items:center;
    min-height:48px; min-width:240px; padding:14px 18px;
  }
}

/* ====================== HERO — MOBILE (как на твоём первом скрине) ====================== */
@media (max-width: 980px){
  .hero-two-col{ display:block; }
  .hero-col{ display:block; text-align:left; }

  .hero-title{ font-weight:800; font-size:clamp(24px, 6vw, 32px); line-height:1.15; margin:0 0 10px; }
  .hero-lead{ font-size:16px; line-height:1.7; color:var(--muted); margin:0 0 16px; }

  .hero-img{
    display:block; width:100%; height:auto;
    border-radius:18px; box-shadow:0 14px 28px -12px rgba(0,0,0,.45);
    margin:12px 0 12px;
  }

  .hero-proof{ display:flex; align-items:center; gap:10px; margin:8px 0 12px; color:#fff; opacity:.95; }
  .hero-proof .i{ width:22px; height:22px; }
  .hero-btn{ width:100%; max-width: 420px; }

  .hero-v-sep{ display:none; } /* на мобиле линии нет */
}

/* ====================== HERO — DESKTOP (как на втором скрине) ====================== */
@media (min-width: 981px){
  /* сетка 2 колонки ровно 50/50 + вертикальная линия */
  .hero-two-col{
    display:grid;
    grid-template-columns: 1fr 1px 1fr;   /* левая | линия | правая */
    gap: 36px;
    max-width: 1240px;
    margin: 0 auto;
    align-items:start;
  }
  .hero-col{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
  .hero-col--left  { grid-column:1; }
  .hero-col--right { grid-column:3; }

  .hero-v-sep{
    grid-column:2; width:1px; border-radius:999px;
    background: linear-gradient(180deg, var(--brand), var(--brand-2));
    opacity:.35;
  }

  /* одинаковые заголовки слева/справа (размер — как на макете) */
  .hero-title{ font-weight:800; font-size:42px; line-height:1.15; margin:0 0 10px; }
  .hero-col--right .hero-title{ white-space:nowrap; }

  /* одинаковые описания и ширина текста */
  .hero-lead{
    font-size:18px; line-height:1.7; color:var(--muted);
    max-width: 640px; margin: 0 0 16px;
  }

  /* ФОТО: абсолютно одинаковый размер слева и справа */
  .hero-img{
    width:100%;
    height: 360px;              /* <<< КЛЮЧ: одинаковая высота */
    object-fit: cover;          /* как на правом блоке */
    border-radius:18px;
    box-shadow:0 14px 28px -12px rgba(0,0,0,.45);
    margin: 12px 0 12px;
  }

  /* Пруф-строки одинаково выглядят */
  .hero-proof{ display:flex; align-items:center; gap:10px; color:#fff; opacity:.95; margin:8px 0 16px; }
  .hero-proof .i{ width:24px; height:24px; }

  /* Кнопки одинаковые */
  .hero-btn{
    display:inline-flex; justify-content:center; align-items:center;
    min-height:52px; min-width:260px; padding:14px 22px;
    border-radius:14px;
  }
}

/* ===== HERO — DESKTOP EXACT LAYOUT (как на референсе) ===== */
@media (min-width: 981px){

  /* 1) Сетка и разделитель */
  .hero-two-col{
    display: grid;
    grid-template-columns: minmax(0, 560px) 1px minmax(0, 560px); /* левая | линия | правая */
    gap: 64px;                          /* расстояние как на макете */
    max-width: 1380px;                  /* общая ширина композиции */
    margin: 0 auto;
    align-items: start;
  }
  .hero-v-sep{
    grid-column: 2;
    width: 1px;
    align-self: stretch;                /* линия тянется по высоте контента */
    background: linear-gradient(180deg, var(--brand), var(--brand-2));
    opacity: .35;
    border-radius: 999px;
  }

  /* 2) Колонки */
  .hero-col{ display:flex; flex-direction:column; align-items:center; }

  .hero-col--left  { grid-column: 1; }
  .hero-col--right { grid-column: 3; }

  /* 3) Заголовки (как на скрине) */
  .hero-col--left .hero-title.edu{
    font-weight: 800;
    font-size: 48px;
    line-height: 1.15;
    width: 100%;
    max-width: 720px;
    text-align: left;                   /* слева */
    margin: 0 0 12px;
  }
  .hero-col--right .hero-title.sales{
    font-weight: 800;
    font-size: 48px;
    line-height: 1.15;
    width: 100%;
    max-width: 760px;                   /* даём месту переноситься красиво */
    text-align: center;                 /* по центру */
    margin: 0 auto 12px;
    white-space: normal;                /* разрешаем переносы (как на макете) */
  }

  /* 4) Описания — центр под заголовком, одинаковая ширина/ритм */
  .hero-lead{
    font-size: 18px;
    line-height: 1.7;
    letter-spacing: .1px;
    color: var(--muted);
    width: 100%;
    max-width: 760px;
    text-align: center;
    margin: 0 0 18px;
  }
  .hero-col--left .hero-lead{ max-width: 700px; } /* слева чуть уже как на макете */

  /* 5) Фото — строго одинаковые */
  .hero-img{
    display: block;
    width: 100%;
    height: 420px;                      /* одинаковая высота как на референсе */
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 14px 28px -12px rgba(0,0,0,.45);
    margin: 12px 0 14px;
  }

  /* 6) Пруф-строки под фото (иконка + текст) — по центру, одна ширина */
  .hero-proof{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 760px;
    color: #fff;
    opacity: .95;
    margin: 6px 0 18px;
    text-align: center;
  }
  .hero-proof .i{ width: 24px; height: 24px; }

  /* 7) Кнопки — одинаковые, выровнены как на макете */
  .hero-btn{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 52px;
    min-width: 260px;
    padding: 14px 22px;
    border-radius: 14px;
  }
  .hero-col--left  .hero-btn{ align-self: flex-start; }  /* слева — влево */
  .hero-col--right .hero-btn{ align-self: flex-start; }  /* справа — тоже влево */
}

/* ===== HERO v2 (BEGIN) ===== */
:root{
  --hero2-bg: transparent;          /* фон секции — прозрачно, сайт тёмный */
  --hero2-text: #d8deea;            /* основной текст */
  --hero2-muted: #9aa3b2;           /* подписи */
  --hero2-title: #eaf0ff;           /* заголовки */
  --hero2-accent: #b389ff;          /* фиолетовый "здесь!" */
  --hero2-line: rgba(146,153,170,.22); /* вертикальная линия */
  --hero2-btn-bg: #1f2a44;          /* ghost hover */
  --hero2-primary-from: #6c7cff;    /* градиент кнопки */
  --hero2-primary-to:   #8e5cff;
  --hero2-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 8px 30px rgba(0,0,0,.35);
  --hero2-radius: 16px;
}

.hero2{
  background: var(--hero2-bg);
  padding: clamp(32px, 4vw, 56px) 0 48px;
}

.hero2-container{
  max-width: 1120px; /* под референс */
  margin: 0 auto;
  padding: 0 24px;
}

.hero2-grid{
  display: grid;
  grid-template-columns: 1fr 1px 1fr; /* левая | линия | правая */
  align-items: start;
  gap: clamp(28px, 4vw, 40px);
}

.hero2-col{
  color: var(--hero2-text);
}

.hero2-title{
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .2px;
  color: var(--hero2-title);
  font-size: clamp(28px, 2.2vw + 10px, 44px);
  margin: 0 0 14px;
}

.hero2-title--right{
  text-align: left;
}

.hero2-accent{
  color: var(--hero2-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 900;
}

.hero2-text{
  color: var(--hero2-text);
  opacity: .9;
  font-size: 16px;
  line-height: 1.55;
  max-width: 560px;
  margin: 0 0 20px;
}

.hero2-figure{
  margin: 16px 0 10px;
}

.hero2-figure img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--hero2-radius);
  box-shadow: var(--hero2-shadow);
}

.hero2-caption{
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--hero2-muted);
  font-size: 14px;
  line-height: 1.4;
}

.hero2-capicon{
  display: inline-flex;
  width: 26px; height: 26px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: var(--hero2-accent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.hero2-divider{
  width: 1px;
  background: var(--hero2-line);
  min-height: 100%;
}

.hero2-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  border-radius: 12px;
  padding: 14px 18px;
  margin-top: 10px;
  text-decoration: none;
  transition: transform .15s ease, filter .2s ease, background .2s ease;
  will-change: transform, filter;
}

.hero2-btn:hover{ transform: translateY(-1px); }

.hero2-btn--ghost{
  color: var(--hero2-title);
  background: rgba(255,255,255,.06);
  box-shadow: var(--hero2-shadow);
  border: 1px solid rgba(255,255,255,.08);
}

.hero2-btn--ghost:hover{
  background: var(--hero2-btn-bg);
}

.hero2-btn--primary{
  color: white;
  background: linear-gradient(90deg,var(--hero2-primary-from),var(--hero2-primary-to));
  box-shadow: 0 6px 20px rgba(124,106,255,.35);
  border: none;
}

.hero2-arrow{ display: inline-flex; }

@media (max-width: 980px){
  .hero2-grid{
    grid-template-columns: 1fr;   /* Мобилка: друг под другом */
  }
  .hero2-divider{ display: none; }
  .hero2-title{ font-size: clamp(26px, 4.8vw, 36px); }
  .hero2-text{ max-width: none; }
  .hero2-btn{ width: 100%; justify-content: center; }
}
/* ===== HERO v2 (END) ===== */
/* Фиолетовый цвет для заголовка Обучение */
.hero2-title--violet {
  color: #b389ff;
}

/* ===== Hero Mobile Swap (BEGIN) ===== */
@media (max-width: 980px) {
  .hero2-col:first-of-type {
    order: 2; /* Обучение уходит вниз */
  }
  .hero2-col:last-of-type {
    order: 1; /* Продажа авто поднимается наверх */
  }
}
/* ===== Hero Mobile Swap (END) ===== */
/* ===== Mini Cards on training hero (BEGIN) ===== */
.mini-cards{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}
@media (max-width:980px){
  .mini-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .mini-cards{ grid-template-columns: 1fr; }
}

.mini-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:14px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:18px;
  background:
    radial-gradient(120% 120% at 110% -10%, rgba(167,139,250,.14), rgba(167,139,250,0) 55%),
    radial-gradient(120% 120% at -10% 120%, rgba(122,162,255,.12), rgba(122,162,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  min-height: 148px;
}

.mini-card-head{
  display:flex;
  align-items:center;
  gap:10px;
}

.mini-ico{
  width:28px; height:28px;
  color:#fff; flex-shrink:0;
  filter: drop-shadow(0 6px 18px rgba(122,162,255,.35));
}

.mini-card h3{
  margin:0;
  font-size:16px;
  line-height:1.25;
  letter-spacing:.2px;
}

/* компактная кнопка */
.btn.sm{ padding:10px 14px; border-radius:12px; font-weight:800; }
/* ===== Mini Cards on training hero (END) ===== */

/* === TRAINING HERO — заголовок и описание === */
.training-hero-title{
  margin: 0 0 8px;
  font-size: clamp(30px, 4.2vw, 44px);
  line-height: 1.1;
  font-weight: 900;
  text-align: center;
}
.training-hero-lead{
  margin: 0 0 18px;
  text-align: center;
  color: var(--muted);
  font-size: clamp(16px, 1.6vw, 18px);
}

/* === Мини-карточки: 2×2 на десктопе === */
.mini-cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr)); /* 2 колонки */
  gap:16px;
  margin-top:18px;
}
@media (max-width:980px){
  .mini-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .mini-cards{ grid-template-columns: 1fr; }
}

/* Стрелка у кнопки "Перейти в раздел" */
.mini-card .btn::after{
  content:"→";
  margin-left:10px;
  font-weight:700;
  font-size:20px;
  line-height:1;
  transition:transform .2s ease;
}
.mini-card .btn:hover::after{ transform: translateX(3px); }

/* Цвета для букв уже есть:
   .grad-violet — фиолетовый текст (градиент),
   .brand-f — красная буква f в логотипе/названии. */

/* Центровка блока мини-карточек */
.mini-cards-wrap{
  display:flex;
  justify-content:center;
}

.mini-cards{
  max-width:800px; /* ограничиваем ширину блока */
  width:100%;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;
}

@media(max-width:640px){
  .mini-cards{ grid-template-columns:1fr; }
}
/* === TRAINING HERO — мобильная карусель из мини-карточек === */
@media (max-width: 760px){
  .mini-cards-wrap{
    overflow: hidden;             /* обрезаем «лишнее» по краям */
  }
  .mini-cards{
    display: flex;                /* вместо grid -> горизонтальная лента */
    gap: 12px;
    overflow-x: auto;             /* горизонтальный скролл/свайп */
    scroll-snap-type: x mandatory;/* снап к карточке */
    -webkit-overflow-scrolling: touch;
    padding: 0 14px 8px;          /* внутренние отступы чтобы карта «дышала» */
  }
  .mini-cards::-webkit-scrollbar{ display:none; } /* без полосы прокрутки */

  .mini-card{
    flex: 0 0 88%;                /* одна карточка «на экран» */
    scroll-snap-align: center;    /* центрируем при остановке */
    min-width: 280px;             /* защита от слишком узких экранов */
  }
}

/* === Заголовок в одну строку на мобильных === */
.training-hero-title{
  white-space: nowrap;            /* не переносить */
}
@media (max-width: 760px){
  .training-hero-title{
    white-space: nowrap !important;       /* перебиваем другие правила */
    font-size: clamp(20px, 6vw, 26px);    /* уменьшаем, чтобы вместился */
    line-height: 1.15;
    text-align: center;
  }
}
.mini-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

.mini-card-img {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.mini-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6); /* затемняем для читаемости текста */
}

.mini-card-head,
.mini-card .btn {
  position: relative;
  z-index: 1;
  color: #fff;
}
/* Стилизация кнопки "Сылка на лот" */
.result-link {
  background: linear-gradient(90deg, var(--brand), var(--brand-2)) !important;
  border: none !important;
  color: #0b1220 !important;   /* тёмный текст, как на остальных фиолетовых кнопках */
  font-weight: 700;
}
.result-link:hover {
  filter: brightness(1.05);
}