html {
  /* Плавный скролл вместо резкого прыжка */
  scroll-behavior: smooth;
}

section {
  /* Отступ сверху при скролле = высоте твоей шапки + небольшой запас */
  scroll-margin-top: 80px; 
}





 
 
 :root{
      --accent:#2f4156;
      --bg:#f5efeb;
      --muted:#7b8896;
      --card:#ffffff;
      --shadow: 0 6px 24px rgba(47,65,86,0.12);
      --focus-ring: rgba(47,65,86,0.25);
    }
    *{box-sizing:border-box}
    html,body{
      width: 100%; 
    }
    body{
      margin:0;
      font-family:Inter,system-ui,Arial,sans-serif;
      background:var(--bg);
      color:var(--accent);
      line-height:1.5;
      -webkit-tap-highlight-color: transparent;
      overflow-x: hidden; 
      position: relative; 
    }

    /* --- HEADER & NAV --- */
    header{
      background:linear-gradient(90deg, rgba(47,65,86,0.98) 0%, rgba(47,65,86,0.92) 100%);
      color: #fff;
      padding:12px 0;
      position:sticky;
      top:0;
      z-index:100;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .container{
      max-width:1200px;
      margin:0 auto;
      padding:0 20px;
      width: 100%;       /* Чтобы блок не сжимался меньше контента */
      box-sizing: border-box;
    }
    .header-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      position: relative; /* Важно для позиционирования слоев */
    }
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      font-weight:700;
      font-size:18px;
      text-decoration: none;
      color: white;
      z-index: 102;
      position: relative; /* Поднимаем логотип */
      max-width: 80%; /* Чтобы не налезал на кнопку */
    }
    .logo-img {
      height: 42px;
      width: auto;
      border-radius: 8px;
      display: block;
      background: #fff;
    }
    
    /* Desktop Nav */
    .nav-desktop {
      display: flex;
      align-items: center;
    }
    .nav-desktop a {
      color:rgba(255,255,255,0.9);
      text-decoration:none;
      margin-left:20px;
      font-weight:600;
      font-size: 15px;
      transition: color 0.2s;
    }
    .nav-desktop a:hover { color: #fff; }

    .cta{
      background:#fff;
      color:var(--accent);
      padding:10px 16px;
      border-radius:8px;
      font-weight:700;
      border:none;
      cursor:pointer;
      font-size: 14px;
      margin-left: 20px;
      transition: transform 0.1s;
    }
    .cta:active { transform: scale(0.98); }

    /* Mobile Hamburger Button */
    .mobile-toggle {
      display: none;
      background: transparent;
      border: none;
      color: white;
      font-size: 32px; /* Чуть крупнее для пальца */
      cursor: pointer;
      z-index: 1001; /* ОЧЕНЬ высокий индекс, чтобы быть поверх всего */
      padding: 8px; /* Больше область нажатия */
      margin-right: -8px; /* Компенсация отступа */
      position: relative; 
    }

    .close-menu-btn {
      display: none; 
      position: absolute;
      top: 20px;
      right: 20px;
      background: transparent;
      border: none;
      color: white;
      font-size: 32px;
      cursor: pointer;
      z-index: 1002;
    }

    /* --- HERO SECTION --- */
    
    .hero{
      padding:60px 0 48px;
      display:flex;
      align-items:center;
      gap:40px;
    }
    .hero-left {
      flex: 1;
      text-align: center;
    }
    .title {
      font-size: clamp(28px, 5vw, 42px);
      line-height: 1.1;
      margin: 0 0 16px;
      font-weight: 800;
    }
    .hero .title {
  color: #ffffff;
}
    .subtitle{
      color:var(--muted);
      margin: 16px 0 24px;
      font-size: 18px;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
    }
    .hero .subtitle {
  color: rgba(255, 255, 255, 0.9); /* Светло-белый цвет */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Легкая тень, чтобы буквы не терялись на пестром фоне */
}
.hero div[style*="color:rgba(255,255,255,0.8)"] {
  color: #ffffff !important; /* Делаем текст про "Формат" чисто белым */
}
    .badges{
      display:flex;
      gap:8px;
      justify-content: center;
      flex-wrap: wrap; 
    }
    .badge{
      background:rgba(47,65,86,0.08);
      color:var(--accent);
      padding:6px 12px;
      border-radius:99px;
      font-weight:600;
      font-size: 13px;
      text-align: center;
    }
    .hero .badge {
  background: rgba(255, 255, 255, 0.9); /* Почти белый фон */
  color: #2f4156; /* Темный текст для контраста */
  border: 1px solid rgba(255, 255, 255, 0.5);
  font-weight: 700;
}
    .hero-cta{
      display:flex;
      gap:12px;
      justify-content: center;
      flex-wrap: wrap;
    }
    
    .btn-primary, .btn-ghost {
      padding:14px 24px;
      border-radius:10px;
      font-weight:700;
      cursor:pointer;
      font-size: 16px;
      text-align: center;
      text-decoration: none;
      transition: transform 0.1s;
    } 
  
    /*.btn-primary{
      background:var(--accent);
      color:#fff;
      border:none;
      box-shadow: 0 4px 14px rgba(47,65,86,0.2);
    }
    .btn-ghost{
      background:transparent;
      color:var(--accent);
      border:2px solid rgba(47,65,86,0.1);
    }*/
       .hero .btn-primary {
  background-color: #ffffff; 
  color: #2f4156; /* Темный текст */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.hero .btn-primary:hover {
  background-color: #f0f0f0;
  transform: translateY(-2px);
}

/* Кнопка «Узнать программы» */
.hero .btn-ghost {
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px); /* Эффект матового стекла */
}

.hero .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
} 


    .btn-primary:active, .btn-ghost:active { transform: scale(0.98); }

    .hero-right{
      flex:1;
      display:flex;
      justify-content:center;
    }
    .card-hero{
      background:var(--card);
      border-radius:16px;
      padding:24px;
      width:100%;
      max-width: 360px;
      box-shadow:var(--shadow);
    }
    








    /* --- SECTIONS GLOBAL --- */
    section{padding:40px 0}

    h2 { font-size: 28px; margin-top: 0; margin-bottom: 0; }
    .grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:20px;
    }
    .card{
      background:var(--card);
      padding:20px;
      border-radius:12px;
      box-shadow:var(--shadow);
      height: 100%;
    }
    .card h3{margin-top:0; font-size: 18px;}

    /* Features List (Программы обучения) */
    .features{display:flex; gap:20px; flex-wrap:wrap}
    .feature{
      background:#fff;
      border-radius:16px;
      flex:1;
      min-width:260px; 
      box-shadow: 0 8px 24px rgba(0,0,0,0.06);
      overflow: hidden;
      border: 1px solid rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
    }
    .feature-img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        display: block;
    }
    .feature-content {
        padding: 20px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    /* GM Course */
    .gm-block{
      display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; margin-top:20px;
    }
    .gm-card{
      background:#fff;
      border-radius:16px;
      padding:24px;
      box-shadow: 0 12px 36px rgba(47,65,86,0.08);
      flex:2;
      min-width:300px;
      border-left:6px solid var(--accent);
    }
    .gm-side {
      flex: 1;
      min-width: 260px;
    }
    .gm-highlight{
      background:#f0f4f8; padding:16px; border-radius:10px; margin-top:16px;
    }
    .gm-highlight ul { margin: 8px 0 0 20px; padding: 0; }
    .gm-highlight li { margin-bottom: 4px; font-size: 14px; }

    /* Prices */
    .price-grid{display:flex; gap:16px; flex-wrap:wrap; margin-top: 20px;}
    .price{
      flex:1;
      min-width:200px;
      background: #fff; 
      padding:24px;
      border-radius:16px;
      text-align:center;
      box-shadow:var(--shadow);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .price-val { font-size: 28px; font-weight: 800; margin: 8px 0; color: var(--accent); }

    /* Footer */
    footer{padding:40px 0; background:transparent; border-top: 1px solid rgba(0,0,0,0.05);}
    .contacts{display:flex; gap:20px; flex-wrap:wrap; margin-top:12px}
    .contact-item{display:flex; flex-direction:column}
    .footer-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 12px;
    }

    /* --- MODAL NEW STYLE --- */
    .overlay{
      position:fixed; inset:0; background:rgba(15,22,33,0.6);
      display:none; align-items:center; justify-content:center; z-index:2000; /* Выше всего */
      backdrop-filter: blur(5px); padding: 20px;
    }
    .overlay.show{display:flex}
    .modal{
      background:#fff; border-radius:20px; padding:28px;
      width:100%; max-width:460px;
      box-shadow:0 20px 60px rgba(0,0,0,0.25);
      position: relative;
      max-height: 90vh;
      overflow-y: auto;
    }
    .close-btn{
      position:absolute; right:20px; top:20px; background:transparent;
      border:none; font-size:24px; cursor:pointer; color: #ccc; transition: color 0.2s;
    }
    .close-btn:hover{color: var(--accent);}

    /* Красивые инпуты */
    .form-group { margin-bottom: 16px; }
    .form-label { 
      font-size:13px; font-weight: 600; color:var(--muted); margin-bottom: 6px; display: block; 
    }
    .custom-input {
      width: 100%;
      padding: 14px;
      border: 2px solid #eef2f6;
      background: #f8fafc;
      border-radius: 12px;
      font-size: 16px;
      color: var(--accent);
      outline: none;
      transition: all 0.2s ease;
    }
    .custom-input:focus {
      border-color: var(--accent);
      background: #fff;
      box-shadow: 0 0 0 4px var(--focus-ring);
    }
    .custom-input::placeholder { color: #cbd5e1; }

    /* Custom Radio Selector (вместо select) */
    .radio-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .radio-option {
      position: relative;
    }
    .radio-option input {
      position: absolute; opacity: 0; width: 0; height: 0;
    }
    .radio-label {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      background: #fff;
      border: 2px solid #eef2f6;
      border-radius: 12px;
      cursor: pointer;
      font-weight: 600;
      color: var(--accent);
      transition: all 0.2s;
    }
    .radio-circle {
      width: 20px; height: 20px;
      border: 2px solid #cbd5e1;
      border-radius: 50%;
      margin-right: 12px;
      position: relative;
      transition: all 0.2s;
    }
    .radio-circle::after {
      content: '';
      position: absolute; inset: 4px;
      background: var(--accent);
      border-radius: 50%;
      transform: scale(0);
      transition: transform 0.2s;
    }
    .radio-option input:checked + .radio-label {
      border-color: var(--accent);
      background: #f0f7ff;
    }
    .radio-option input:checked + .radio-label .radio-circle {
      border-color: var(--accent);
    }
    .radio-option input:checked + .radio-label .radio-circle::after {
      transform: scale(1);
    }

    /* HONEYPOT */
    .honey-pot-field {
        display: none; 
        opacity: 0;
        position: absolute;
        left: -9999px;
    }

    .submit-btn {
      width:100%; background:var(--accent); color:#fff; border:none; 
      font-weight:700; padding:16px; border-radius:12px; margin-top:24px; 
      font-size: 16px; cursor: pointer;
      box-shadow: 0 4px 12px rgba(47,65,86,0.2);
      transition: transform 0.1s;
    }
    .submit-btn:active { transform: scale(0.98); }
    .submit-btn:disabled { opacity: 0.7; cursor: not-allowed; }


    /* --- MOBILE ADAPTATION --- */
    
    @media (max-width:900px){
      .grid{grid-template-columns:repeat(2,1fr)}
      .hero{flex-direction:column;}
      .hero-left { padding: 0 10px; }
    }

    @media (max-width:768px){
      .mobile-toggle { display: block; }
      .close-menu-btn { display: block; } 
      .cta { display: none; }
      
      .nav-desktop {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: var(--accent);
        flex-direction: column;
        justify-content: center;
        padding: 40px;
        transform: translateX(100%);
        
        /* ИСПРАВЛЕНИЕ КЛИКАБЕЛЬНОСТИ: */
        /* Скрываем меню полностью, когда оно закрыто, чтобы оно не перекрывало кнопки */
        visibility: hidden; 
        transition: transform 0.3s ease, visibility 0s linear 0.3s;
        
        z-index: 1000;
      }
      .nav-desktop.active {
        transform: translateX(0);
        /* Показываем меню только когда оно открыто */
        visibility: visible;
        transition: transform 0.3s ease, visibility 0s linear 0s;
      }
      
      .nav-desktop a {
        margin: 0 0 24px 0;
        font-size: 22px;
        color: #fff;
      }
      
      section { padding: 30px 0; }
      .hero { padding-top: 30px; gap: 30px; }
      .hero-cta { flex-direction: column; width: 100%; max-width: 320px; margin: 0 auto; }
      .btn-primary, .btn-ghost { width: 100%; }
      
      .grid { grid-template-columns: 1fr; }
      
      .gm-card { min-width: 100%; border-left: none; border-top: 6px solid var(--accent); }
      .price { min-width: 100%; }
      .feature { min-width: 100%; }
      
      .modal { padding: 20px; border-radius: 16px; }
    }

    @media (max-width:380px){
      .price-val { font-size: 24px; }
      .brand { font-size: 16px; }
      /* Скрываем длинный текст логотипа на совсем маленьких экранах, чтобы не перекрывал кнопку */
      .brand div { display: none; }
    }

#gm-course .btn-primary {
  border: none !important; /* Убираем любую рамку */
  outline: none !important;  /* Убираем синюю обводку при нажатии (фокус) */
}

#gm-course .btn-primary {
  border: none !important;
  outline: none !important;
  box-shadow: none !important; /* Убирает тень вокруг кнопки */
}

/* Контейнер для чекбоксов */
.checkbox-group {
  margin-top: 20px;
  text-align: left;
}

.checkbox-item {
  margin-bottom: 12px;
}

/* Стилизация самой галочки и текста */
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--accent);
  line-height: 1.4;
}

.custom-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent); /* Цвет галочки под ваш бренд */
  margin-top: 2px;
  flex-shrink: 0;
}

/* Скрытые по умолчанию подсказки */
.error-hint {
  color: #dc2626; /* Красный цвет ошибки */
  font-size: 11px;
  margin-top: 4px;
  margin-left: 28px;
  display: none; /* Прячем до момента ошибки */
  font-weight: 600;
}



       /* LEVEL-TEST */


/* Плавные анимации модального окна */
.modal-enter {
    opacity: 0;
    transform: scale(0.95);
}
.modal-enter-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 300ms ease-out, transform 300ms ease-out;
}
.modal-leave {
    opacity: 1;
    transform: scale(1);
}
.modal-leave-active {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 200ms ease-in, transform 200ms ease-in;
}

/* Стилизация радио-кнопок под ваш бренд */
.option-label input:checked + div {
    border-color: var(--accent) !important;
    background-color: rgba(47, 65, 86, 0.05) !important;
}
.option-label input:checked + div .radio-indicator {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.option-label div:hover {
    border-color: var(--accent) !important;
}

/* Переопределение темной темы на светлую брендовую */
#modalContainer {
    background-color: var(--card) !important;
    color: var(--accent) !important;
    border-color: rgba(47, 65, 86, 0.1) !important;
    box-shadow: var(--shadow) !important;
}
#modalContainer h2, 
#modalContainer h3,
#modalContainer .text-white {
    color: var(--accent) !important;
}
#modalContainer p, 
#modalContainer .text-slate-400,
#modalContainer .text-slate-300 {
    color: var(--muted) !important;
}
#modalContainer .text-slate-200 {
    color: var(--accent) !important;
}

/* Кнопки */
#modalContainer button.bg-amber-500,
#modalContainer button.bg-emerald-500 {
    background-color: var(--accent) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(47,65,86,0.2) !important;
}
#modalContainer button.bg-amber-500:hover,
#modalContainer button.bg-emerald-500:hover {
    background-color: #1a2533 !important; 
}
#modalContainer button.text-slate-400:hover,
#modalContainer button.text-slate-300:hover {
    color: var(--accent) !important;
}

/* Фоны и рамки (заменяем темные Tailwind-цвета) */
#modalContainer [class*="bg-slate-700"] {
    background-color: #f8fafc !important; 
}
#modalContainer [class*="bg-slate-900"] {
    background-color: var(--bg) !important;
}
#modalContainer [class*="border-slate"] {
    border-color: rgba(47, 65, 86, 0.15) !important;
}

/* Инпут */
#modalContainer input {
    background-color: #ffffff !important;
    border: 2px solid #eef2f6 !important;
    color: var(--accent) !important;
}
#modalContainer input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px var(--focus-ring) !important;
}

/* Прогресс-бар и иконки */
#modalContainer .text-amber-500,
#modalContainer .text-emerald-400,
#modalContainer .text-amber-400,
#modalContainer .text-yellow-400 {
    color: var(--accent) !important;
}
#modalContainer .bg-amber-500 {
    background-color: var(--accent) !important;
}

/* Стилизация скроллбара */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--muted);
    border-radius: 10px;
}