/* --- 1. Подключение шрифтов и иконок --- */
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Ubuntu:wght@700&display=swap');
 @import url('https://cdn.jsdelivr.net/npm/remixicon@4.0.0/fonts/remixicon.css');

 /* --- 1. CSS-переменные (Ваши стили) --- */
 :root {
     --color-primary: #7b283a;
     /* гранат */
     --color-accent: #a8bd61;
     /* яблоко */
     --color-text: #1A202C;
     /* Темный текст */
     --color-secondary: #f19961;
     /* апельсин */
     --color-light-bg: #f5f8fa;
     /* Очень светлый фон */
     --color-light-secondary: #faf6ed;
     --color-light-accent: #f4ebdd;
     --border-radius: 10px;

     /* Типографика */
     --font-heading-main: clamp(32px, 5vw, 56px);
     /* Чуть подкорректировал для мобилок */
     --font-subline: clamp(18px, 2vw, 24px);
     --font-section: clamp(24px, 4vw, 36px);
     --font-lead: clamp(18px, 2.5vw, 22px);
     --font-main: clamp(16px, 2.5vw, 18px);
     --font-small: clamp(14px, 1.2vw, 16px);

     /* Отступы */
     --section-padding-y: clamp(40px, 8vw, 80px);
     --container-width: 1200px;
 }

 /* --- 2. Базовые сбросы --- */
 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Montserrat', sans-serif;
     color: var(--color-text);
     line-height: 1.5;
     background-color: var(--color-light-secondary);
     overflow-x: hidden;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     line-height: 1.2;
     font-family: 'Ubuntu', sans-serif;
     margin-bottom: 1rem;
 }

 p {
     font-size: var(--font-main);
     margin-bottom: 1rem;
 }

 a {
     text-decoration: none;
     color: inherit;
 }

 ul {
     list-style: none;
 }

 /* --- 3. Утилиты --- */
 .container {
     max-width: var(--container-width);
     margin: 0 auto;
     padding: 0 20px;
 }

 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 18px 32px;
     border-radius: var(--border-radius);
     /* Pill shape */
     font-weight: 700;
     font-size: var(--font-main);
     transition: all 0.3s ease;
     cursor: pointer;
     border: none;
     box-shadow: 0 4px 15px rgba(255, 105, 106, 0.3);
 }

 .btn-primary {
     background-color: var(--color-primary);
     color: white;
 }

 .btn-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(255, 105, 106, 0.4);
     background-color: var(--color-accent);
 }


 /* Стили специфичные для Thank You Page */

 .ty-section {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0 0 var(--section-padding-y) 0;
     position: relative;
     overflow: hidden;
 }

 .ty-card {
     position: relative;
     z-index: 5;
     max-width: 700px;
     width: 100%;
     background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(10px);
     border-radius: var(--border-radius);
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
     border: 1px solid white;
     padding: 20px;
     text-align: center;
     animation: fadeUp 0.8s ease-out forwards;
 }

 @media (max-width: 900px) {
     .ty-card {
         background: transparent;
         backdrop-filter: none;
         box-shadow: none;
         border: none;
         padding: 0;
     }
 }

 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Иконка внимания/письма */
 .ty-icon {
     font-size: 48px;
     color: var(--color-primary);
     margin-bottom: 20px;
     animation: bounce 2s infinite;
 }

 @keyframes bounce {

     0%,
     20%,
     50%,
     80%,
     100% {
         transform: translateY(0);
     }

     40% {
         transform: translateY(-10px);
     }

     60% {
         transform: translateY(-5px);
     }
 }

 /* Обертка для кнопок Salebot, чтобы были отступы */
 .salebot-wrapper {
     margin: 30px 0;
     padding: 20px;
     border-radius: 15px;
     border: 1px dashed var(--color-accent);
 }


 /* --- СЕКЦИЯ: ФУТЕР --- */
 .main-footer {
     background-color: var(--color-light-accent);
     /* Светло-серый фон */
     padding: var(--section-padding-y) 0 0;
     /* Верхний отступ */
     color: var(--color-text);
 }

 .footer-grid {
     display: grid;
     /* 3 колонки: 1fr (инфо) + 1fr (документы) + 1fr (контакты) */
     grid-template-columns: 1.2fr 1fr 1fr;
     gap: 40px;
     padding-bottom: 40px;
 }

 .footer-info .footer-logo {
     height: 40px;
     margin-bottom: 20px;
 }

 .footer-info p {
     font-size: 14px;
     line-height: 1.6;
     opacity: 0.8;
     margin-bottom: 5px;
 }

 .footer-heading {
     font-family: 'Ubuntu', sans-serif;
     font-size: 18px;
     font-weight: 700;
     margin-bottom: 20px;
     color: var(--color-text);
 }

 .footer-links-list {
     list-style: none;
     padding: 0;
 }

 .footer-links-list li {
     font-size: 14px;
     line-height: 1.8;
     margin-bottom: 8px;
     display: flex;
     align-items: flex-start;
 }

 .footer-links-list a {
     color: var(--color-text);
     text-decoration: none;
     opacity: 0.9;
     transition: color 0.2s;
 }

 .footer-links-list a:hover {
     color: var(--color-primary);
 }

 .footer-icon {
     color: var(--color-primary);
     margin-right: 10px;
     font-size: 16px;
     margin-top: 2px;
 }

 /* Нижняя строка */
 .footer-bottom {
     background-color: var(--color-secondary);
     /* Легкий фон для нижней полосы */
     padding: 15px 0;
     border-top: 1px solid rgba(0, 0, 0, 0.05);
     text-align: center;
 }

 .copyright-text {
     font-size: 14px;
     opacity: 0.7;
     margin: 0;
 }

 @media (max-width: 768px) {
     .footer-grid {
         /* Из 3 колонок делаем 2 колонки на планшете */
         grid-template-columns: 1fr 1fr;
     }

     .footer-info {
         /* Растягиваем info-блок на всю ширину (100%) */
         grid-column: 1 / -1;
         padding-bottom: 20px;
         border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
     }

 }

 @media (max-width: 576px) {
     .footer-grid {
         /* На мобильных делаем 1 колонку */
         grid-template-columns: 1fr;
         gap: 30px;
     }

     .footer-info {
         border-bottom: none;
         padding-bottom: 0;
     }

     .footer-links-block:nth-child(2) {
         /* Добавляем разделитель между блоками Документы и Контакты */
         border-top: 1px dashed rgba(0, 0, 0, 0.1);
         padding-top: 20px;
     }
 }

 /* =========================================
   HERO SECTION (Адаптировано по гайду и второму скрину)
   ========================================= */

 .header {
     padding: clamp(1rem, 2vw, 2rem) 0;
     text-align: center;
 }

 .header__logo {
     max-width: clamp(8rem, 12vw, 12rem);
     height: auto;
 }

 .hero {
     position: relative;
     overflow: hidden;
 }

 .hero__container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: clamp(2rem, 5vw, 4rem);
 }

 .hero__content {
     flex: 1;
     max-width: 40rem;
     z-index: 2;
 }

 .hero__badge {
     background-color: var(--color-secondary);
     color: #ffffff;
     font-size: var(--font-small);
     font-weight: 700;
     text-transform: uppercase;
     padding: 6px 16px;
     border-radius: 100px;
     display: inline-block;
     margin-bottom: clamp(1rem, 2vw, 1.5rem);
     letter-spacing: 0.05em;
 }

 .hero__title {
     font-size: var(--font-heading-main);
     color: var(--color-primary);
     margin-bottom: clamp(1.5rem, 3vw, 2rem);
 }

 .hero__features {
     display: flex;
     flex-direction: column;
     gap: clamp(0.8rem, 1.5vw, 1.2rem);
     margin-bottom: clamp(2rem, 4vw, 3rem);
 }

 .hero__feature {
     display: flex;
     align-items: center;
     gap: 0.8rem;
 }

 .hero__feature-icon {
     width: clamp(1.5rem, 2vw, 2rem);
     height: clamp(1.5rem, 2vw, 2rem);
     flex-shrink: 0;
     color: var(--color-accent);
     /* Зеленый цвет через currentColor */
 }

 .hero__feature-icon svg {
     width: 100%;
     height: 100%;
 }

 .hero__feature-text {
     font-size: var(--font-main);
     color: var(--color-text);
 }

 .hero__content {
     flex: 0 0 50%;
     max-width: 40rem;
     z-index: 2;
     position: relative;
 }

 .hero__image-wrapper {
     flex: 0 0 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
     z-index: 1;
 }

 .hero__image {
     width: 150%;
     max-width: none;
     margin-left: -30%;
     height: auto;
     border-radius: var(--border-radius);
     -webkit-mask-image: radial-gradient(circle at center, black 50%, transparent 80%);
     mask-image: radial-gradient(circle at center, black 50%, transparent 80%);
     pointer-events: none;
 }

 @media (max-width: 900px) {
     .hero__container {
         flex-direction: column;
     }

     .hero__content {
         flex: 1 1 auto;
         text-align: center;
         margin-bottom: 1rem;
     }

     .hero__feature {
         justify-content: center;
         text-align: left;
     }

     .hero__image-wrapper {
         display: none;
     }
 }