@font-face {
    font-family: "Gilroy";
    src: url("fonts/gilroy-regular.tff") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gilroy";
    src: url("fonts/gilroy-bold.tff") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gilroy";
    src: url("fonts/gilroy-extrabold.tff") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-bg-main: #0f121b;
    --color-bg-alt: #11161e;
    --color-bg-card: #151b25;
    --color-bg-hero-overlay: rgba(7, 11, 16, 0.8);

    --color-text-main: #f5f5f7;
    --color-text-muted: #a4abb7;
    --color-text-soft: #7c8391;
    --color-text-dark: #05070b;

    --color-accent: #ff4b2b;
    /* Soft accent for active state (тусклый оранжевый) */
    --color-accent-soft: rgba(255, 75, 43, 0.7); 
    --color-accent-bg: rgba(255, 75, 43, 0.35);

    --color-border-soft: rgba(255, 255, 255, 0.08);
    --color-border-header: rgba(255, 255, 255, 0.18);

    --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.55);
    --shadow-soft-carousel: 0 5px 13px rgba(0, 0, 0, 0.1);

    --radius-card: 1.2vw;
    --radius-pill: 999px;
    --radius-input: 0.8vw; 

    --transition-fast: 0.2s ease-out;
    --transition-base: 0.3s ease-out;
    --transition-slow: 0.5s ease-out;

    --header-height: 8vh; 
    --header-top-gap: 200px;

    --font-sans: "Gilroy", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Gilroy", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* --- РЕЗИНОВЫЕ РАЗМЕРЫ --- */
    --section-gap: clamp(40px, 8vw, 140px);
    --font-h2: clamp(22px, 2vw, 60px);
    --font-body: 1vw;
    --font-card-title: 1.3vw;
    --font-subtitle: 0.8vw;
}

/* Base resets */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background: var(--color-bg-main);
    color: var(--color-text-main);
    font-family: var(--font-sans);
    overflow-x: hidden; 
}

body.no-scroll { overflow: hidden; }

*, *::before, *::after { box-sizing: border-box; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.container {
    width: 100%;
    max-width: 80%;
    margin: 0 auto;
    padding: 0 24px;
}

h1, h2, h3, .section-title, .form-title, .logo-title {
    font-family: var(--font-display);
}

/* Animations -------------------------------------------------------- */
.section-anim { opacity: 0; }
.section-anim > *:first-child { transform: translate3d(0, 24px, 0); }
.section-anim[data-anim-direction="up"] > *:first-child { transform: translate3d(0, 24px, 0); }
.section-anim[data-anim-direction="down"] > *:first-child { transform: translate3d(0, -24px, 0); }
.section-anim[data-anim-direction="left"] > *:first-child { transform: translate3d(24px, 0, 0); }
.section-anim[data-anim-direction="right"] > *:first-child { transform: translate3d(-24px, 0, 0); }

.section-anim.section-anim-in { opacity: 1; }
.section-anim.section-anim-in > *:first-child { transform: translate3d(0, 0, 0); transition: transform 0.6s ease-out; }
.section-anim.section-anim-out { opacity: 0; }
.section-anim.section-anim-out > *:first-child { transition: transform 0.4s ease-out; }

/* Specific animations */
.tours-carousel-wrapper.section-anim > .tours-carousel { transform: translate3d(0, 24px, 0); }
.tours-carousel-wrapper.section-anim.section-anim-in > .tours-carousel { transform: translate3d(0, 0, 0); transition: transform 0.6s ease-out; }

.about-media.section-anim > .about-figure { transform: translate3d(24px, 0, 0); }
.about-media.section-anim.section-anim-in > .about-figure { transform: translate3d(0, 0, 0); transition: transform 0.6s ease-out; }

.about-content.section-anim > .about-text { transform: translate3d(-24px, 0, 0); }
.about-content.section-anim.section-anim-in > .about-text { transform: translate3d(0, 0, 0); transition: transform 0.6s ease-out; }

.contacts-left.section-anim > .contacts-card, .contacts-left.section-anim > .contacts-map-wrapper { transform: translate3d(24px, 0, 0); }
.contacts-left.section-anim.section-anim-in > .contacts-card, .contacts-left.section-anim.section-anim-in > .contacts-map-wrapper { transform: translate3d(0, 0, 0); transition: transform 0.6s ease-out; }

.contacts-form-wrapper.section-anim > .contact-form { transform: translate3d(-24px, 0, 0); }
.contacts-form-wrapper.section-anim.section-anim-in > .contact-form { transform: translate3d(0, 0, 0); transition: transform 0.6s ease-out; }


/* Preloader -------------------------------------------------------- */
#preloader {
    position: fixed; inset: 0; z-index: 9999;
    background: radial-gradient(circle at top, #141b25 0%, #05070b 55%, #000000 100%);
    display: flex; align-items: center; justify-content: center;
}

/* Контейнер для всего содержимого прелоадера */
.preloader-inner { 
    display: flex; 
    align-items: center; 
    gap: 20px; /* Отступ между крутящимся лого и текстом */
}

/* Обертка для логотипа и спиннера */
.preloader-icon-wrapper {
    position: relative;
    width: 60px;  /* Размер всей конструкции */
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Сама картинка логотипа внутри */
.preloader-icon-wrapper .logo-mark {
    width: 32px; /* Чуть меньше контейнера, чтобы влезть в кольцо */
    height: 32px;
    position: relative;
    z-index: 2; /* Логотип поверх спиннера */
}

/* Спиннер - теперь это абсолютное кольцо вокруг логотипа */
.spinner { 
    position: absolute;
    inset: 0; /* Растягиваем на весь wrapper (60x60) */
    border-radius: 50%; 
    border: 3px solid rgba(255, 255, 255, 0.1); /* Тусклое кольцо */
    border-top-color: var(--color-accent); /* Яркий сектор */
    animation: spin 1s linear infinite; 
    z-index: 1;
}

/* Текстовая часть */
.preloader-text { 
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Выравниваем строки по левому краю! */
    justify-content: center;
}

.preloader-text span {
    font-family: var(--font-display);
    font-size: clamp(14px, 1.2vw, 18px); 
    text-transform: uppercase; 
    color: var(--color-text-muted); 
    line-height: 1.1; /* Чтобы строки стояли плотнее */
    letter-spacing: 0.1em;
}

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

/* --- ЕДИНЫЙ СТИЛЬ КНОПОК ------------ --- */
.btn {
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    
    /* Та самая резиновая геометрия */
    gap: 10px; 
    padding: clamp(0.8vh, 1vh, 1.4vh) clamp(1vw, 1.3vw, 1.5vw);
    
    /* Внешний вид */
    border-radius: var(--radius-pill); 
    border: 1px solid rgba(255, 255, 255, 0.22); 
    background: rgba(0, 0, 0, 0.1);
    
    /* Шрифты */
    font-size: clamp(0.7vw, 0.9vw, 1.2vw); 
    font-weight: 600; 
    text-transform: uppercase; 
    color: var(--color-text-main); 
    
    /* Поведение */
    transition: 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    
    /* Чтобы не сжималась в флексах */
    flex-shrink: 0;
}

/* Эффект наведения  */
.btn:hover { 
    border-color: var(--color-accent); 
    background: var(--color-accent); 
    color: #fff !important; 
} 

/* Header ----------------------------------------------------------- */
.header {
    position: fixed; top: 1vh; left: 0; right: 0; height: var(--header-height); z-index: 1000;
    display: flex; align-items: center;
    background: transparent; border-bottom: 1px solid transparent;
    transition: background-color var(--transition-slow), border-bottom var(--transition-slow), transform 0.6s ease-out, opacity 0.6s ease-out;
    opacity: 0; transform: translateY(-30px);
}
.header.header-enter { opacity: 1; transform: translateY(0); }
.header.scrolled {
    backdrop-filter: blur(16px);
    background: linear-gradient(to bottom, rgba(5, 7, 11, 0.8), rgba(5, 7, 11, 0.7));
    border-bottom: 1px solid var(--color-border-header);
}
.header.scrolled { top: 0; }

.header-inner {
    width: 80vw;
    height: 100%; 
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 clamp(1.6vw, 2vw, 2.8vw); border-radius: var(--radius-card); border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(5, 7, 11, 0.18); backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.header.scrolled .header-inner { padding: 0; border-radius: 0; border: none; background: transparent; backdrop-filter: none; }

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 0.6vw; text-transform: uppercase; 
    font-size: clamp(0.8vw, 1.1vw, 2vw); letter-spacing: 0.22em; 
    color: var(--color-text-main); 
}
.logo-mark {     
    width: clamp(26px, 1.4vw, 80px);
    height: clamp(26px, 1.4vw, 80px);
    flex-shrink: 0; 
    display: block;
}
.header.scrolled .logo { color: var(--color-text-main); }

/* Nav */
.nav { position: absolute; left: 50%; transform: translateX(-50%); }
.nav-list { display: flex; gap: 32px; list-style: none; padding: 0; margin: 0; }

.nav-link { 
    font-size: clamp(0.8vw, 1vw, 1.6vw); letter-spacing: 0.16em; text-transform: uppercase; 
    color: var(--color-text-main); 
    font-weight: 600; transition: 0.2s; 
}
.nav-link:hover { color: var(--color-accent) !important; }
.nav-link.active { color: var(--color-accent-soft) !important; }
.nav-link.active:hover { color: var(--color-accent-soft) !important; }

.header.scrolled .nav-link { color: var(--color-text-main); }
.header.scrolled .nav-link:hover { color: var(--color-accent) !important; }
.header.scrolled .nav-link.active { color: var(--color-accent-soft) !important; }
.header.scrolled .nav-link.active:hover { color: var(--color-accent-soft) !important; }

/* Header Right */
.header-right { display: flex; gap: 18px; align-items: center; }
.header.scrolled .btn { background: rgba(0, 0, 0, 0.26); border-color: var(--color-accent); color: var(--color-accent); }
.header.scrolled .btn:hover { background: var(--color-accent); color: #fff; }

.header-socials { display: flex; gap: clamp(0.5vw, 0.6vw, 0.7vw); }
.mobile-socials { display: none; }
.social-link { width: clamp(2vw, 2.5vw, 3vw); height: clamp(2vw, 2.5vw, 3vw); 
    font-size: clamp(1vw, 1.2vw, 1.6vw);
    border-radius: 50%; display: flex; align-items: center; justify-content: center; 
    color: var(--color-text-main); 
    transition: 0.2s; 
}
.social-link:hover { color: var(--color-text-main); background: var(--color-accent-bg); }
.header.scrolled .social-link { color: var(--color-text-main); }

.hamburger { display: none; flex-direction: column; gap: 5px; width: 24px; height: 22px; padding: 0; border: none; background: transparent; justify-content: center;}
.hamburger span { height: 2px; width: 100%; border-radius: 999px; background: #ffffff; transition: 0.2s; }
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero ------------------------------------------------------------- */
.hero {
    position: relative; height: 100dvh; display: flex; flex-direction: column; justify-content: flex-end; 
    color: #ffffff; overflow: hidden;
    background: linear-gradient(to bottom, transparent 0%, transparent 40%, rgba(2, 4, 11, 0) 55%, rgba(2, 4, 11, 0.6) 85%, var(--color-bg-main) 100%),
    url("../img/hero-elbrus.webp");
    background-size: cover; background-position: top center;
}

.hero-inner { 
    position: relative; z-index: 1; height: 100%; width: 100%;
    display: flex; flex-direction: column; justify-content: flex-end; 
    padding-top: calc(var(--header-height) + 20px); padding-bottom: 15vh; 
}

.hero-content { 
    width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; text-align: left; margin-bottom: 0; 
}

.hero-title { margin: 0 0 24px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; text-shadow: 0 0 12px rgba(0, 0, 0, 0.2); }
.hero-title-line { display: block; line-height: 1; }
.hero-title-line-1 { font-size: clamp(48px, 6vw, 200px); }
.hero-title-line-2 { font-size: clamp(44px, 5.4vw, 160px); display: flex; white-space: nowrap; }
.hero-title-na { display: inline-flex; justify-content: center; align-items: center; width: 1em; font-size: calc(var(--font-subtitle) + 0.3vw); letter-spacing: 0.24em; transform: rotate(-90deg); margin-left: 30px; margin-right: 10px; }
.hero-subtitle { margin: 0; font-size:calc(var(--font-subtitle) + 0.4vw); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); }
.hero-sub-2 { margin-left: 10px; }

.hero-advantages { 
    display: flex; gap: 1vw; max-width: 66vw; width: 100%;
    margin-left: auto; margin-right: auto; margin-top: 5vh; justify-content: center; 
}

.adv-card { 
    flex: 1; width: 0; min-width: 0;
    border-radius: var(--radius-card); padding: 1.2vw; display: flex; flex-direction: column; align-items: flex-start; 
    background: linear-gradient(to bottom, rgba(5, 7, 10, 0.8) 0%, rgba(5, 7, 10, 0) 100%); 
    box-shadow: 0 -5px 10px rgba(0,0,0,0.2); transition: 0.2s; 
}
.adv-icon { width: 2.5vw; height: 2.5vw; border-radius: var(--radius-input); background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; margin-bottom: 0.8vw; }
.adv-icon i { color: var(--color-accent); font-size: 1.2vw; }
.adv-text { font-size: calc(var(--font-body) - 0.3vw); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 8px; }
.adv-line { width: 100%; height: 2px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); margin-top: auto; }
.adv-card:hover .adv-line { background: var(--color-accent); }

.hero-scroll-hint { 
    position: absolute; bottom: 2vh; left: 50%; transform: translateX(-50%); text-align: center; font-size: var(--font-body);
    text-transform: uppercase; color: rgba(255, 255, 255, 0.6); 
}
.hero-scroll-hint .scroll-line { display: block; width: 0.1vw; height: 5vh; margin: 1.2vh auto 0; background: linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(255,255,255,0)); min-width: 1px;}

/* Common Sections -------------------------------------------------- */
.section-tours,
.section-about,
.section-contacts {
    height: 100dvh; 
    width: 100%; 
    display: flex; 
    flex-direction: column;
    box-sizing: border-box; 
    position: relative; 
    background: var(--color-bg-main);
    overflow: hidden; /* Обрезаем лишнее, чтобы не было двойных скроллов */
}

/* ЭТО ГЛАВНОЕ ПРАВИЛО ЦЕНТРОВКИ ДЛЯ ВСЕХ СЕКЦИЙ */
.section-tours .container,
.section-about .container,
.section-contacts .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    
    /* Центрируем всё содержимое по вертикали */
    justify-content: center; 
    
    /* Отступ сверху равен высоте шапки, чтобы при центровке контент на неё не налезал */
    padding-top: var(--header-height);
    
    /* Небольшой отступ снизу для баланса */
    padding-bottom: 2vh;
}

.section-header { text-align: center; margin-bottom: 2vh; }
/* Контейнер карусели */
.tours-carousel-wrapper {

    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Если карточки всё еще не влезают, можно тут поставить flex-grow: 1 */
}
.section-kicker { margin: 0 0 0.3em; font-size: var(--font-subtitle); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-soft); }
.section-title { margin: 0; font-size: var(--font-h2); letter-spacing: 0.12em; text-transform: uppercase; }

/* Tours Swiper (NEW) ----------------------------------------------- */
.tours-swiper {
    width: 100%;
    /* Свайпер должен занимать высоту для показа слайдов */
    height: auto;
    padding-bottom: 20px; /* Место для тени */
    overflow: hidden;
}

/* Слайд карточки */
.swiper-slide.tour-card {
    /* ЖЕСТКАЯ ШИРИНА КАРТОЧКИ: Решает проблему зума */
    width: 320px;
    
    flex-shrink: 0;
    height: auto; /* Тянется по контенту */
    
    /* Старые стили */
    background: var(--color-bg-card); 
    border-radius: var(--radius-card); 
    overflow: hidden; 
    box-shadow: var(--shadow-soft-carousel); 
    border: 1px solid rgba(255, 255, 255, 0.06); 
    display: flex; flex-direction: column; 
    transition: 0.2s;
}
/* ДЕСКТОП: Сбрасываем ширину в auto, чтобы JS сам растянул как надо */
@media (min-width: 1200px) {
    .swiper-slide.tour-card {
        width: auto; /* ВАЖНО! */
    }
}

.tour-img { position: relative; padding-top: 55%; overflow: hidden; }
.tour-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: 0.6s; }
.tour-card:hover .tour-img img { transform: scale(1.08); }
.tour-body { padding: 1em; display: flex; flex-direction: column; flex: 1; }
.tour-title { font-size: var(--font-card-title); margin: 0 0 0.5em; }
.tour-desc { margin: 0 0 1em; font-size: var(--font-body); color: var(--color-text-muted); }
.tour-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.tour-price { font-weight: 600; font-size: var(--font-body); white-space: nowrap; }

/* Стрелки */
.carousel-controls {
    position: relative; margin-top: 2vh; margin-bottom: 3vh;
    display: flex; justify-content: center; gap: 40px; z-index: 5;
    transform: none; left: auto; bottom: auto;
}
.carousel-arrow {
    position: relative; border: none; background: transparent; width: 5vw; height: clamp(30px, 2vh, 80px);
    padding: 0; display: flex; align-items: center; cursor: pointer;
    color: rgba(255, 255, 255, 0.4); transition: color 0.3s ease, opacity 0.3s ease;
}
.carousel-arrow:hover { color: var(--color-accent); opacity: 1; }
.carousel-arrow span { display: block; height: 1px; width: 100%; background: currentColor; }
.carousel-arrow::before { content: ""; position: absolute; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transition: border-color 0.3s ease; }
.carousel-arrow.prev { justify-content: flex-start; }
.carousel-arrow.prev::before { left: 0; transform: rotate(-135deg); }
.carousel-arrow.next { justify-content: flex-end; }
.carousel-arrow.next::before { right: 0; transform: rotate(45deg); }

/* Стили отключенной кнопки (Swiper) */
.carousel-arrow.swiper-button-disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}

@media (min-width: 1024px) { 
    /* Можно оставить пустым или настроить доп логику, но swiper справится сам */
}
.tours-more { text-align: center; }
.inline-link { color: var(--color-accent); }

/* About & Contacts (Global) ---------------------------------------- */
.about-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: flex-start; }
.about-figure { border-radius: var(--radius-card); overflow: hidden; max-height: 60vh; margin: 0; width: 100%; }
.about-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about-text { font-size: var(--font-body); color: var(--color-text-muted); line-height: 1.6; }

.contacts-left { display: flex; flex-direction: column; gap: 40px; height: 100%; } 
.contacts-card, .contact-form { 
    background: var(--color-bg-card); border-radius: var(--radius-card); padding: 20px; 
     border: 1px solid var(--color-border-soft); display: flex; flex-direction: column;  flex-shrink: 0;
    }
.contact-form { 
    height: 100%; background: var(--color-bg-card); 
    border-radius: var(--radius-card); 
    padding: clamp(20px, 2vw, 40px);  
    border: 1px solid var(--color-border-soft); 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
 }    
.contacts-list { list-style: none; padding: 0; font-size: var(--font-body); }
.contacts-list li { margin-bottom: 10px; }
.contacts-label { display: inline-block; min-width: 110px; color: var(--color-text-soft); }

.contacts-map-wrapper { 
    border-radius: var(--radius-card); overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1); width: 100%; 
    flex-grow: 1; /* Займи всё оставшееся место в колонке! */
    min-height: 265px; /* Но не меньше этого значения */
}
.contacts-map-wrapper iframe { width: 100% !important; height: 100% !important; display: block; }
/* Правая колонка (Форма) */
.contacts-form-wrapper {    height: 100%; /* Тоже на всю высоту */}

.form-row { display: flex; gap: 15px; flex-shrink: 0; }
.form-field { flex: 1; display: flex; flex-direction: column; gap: 5px; font-size: var(--font-body); }
.form-field input, .form-field textarea { 
    border-radius: var(--radius-input); border: 1px solid rgba(255,255,255,0.18); 
    background: var(--color-bg-main); padding: 0.5em 0.6em; color: #fff; outline: none; resize:none;
        /* Добавляем минимальную высоту, чтобы они всегда были "нажимаемыми" */
    min-height: 3em; 
    
    /* Гарантируем, что шрифт внутри поля тоже резиновый */
    font-size: var(--font-body); 
    
    /* Важно: не даем полям сжиматься, если места мало */
    flex-shrink: 0; 
}
.form-field textarea { flex-grow: 1; }
.form-field input:focus, .form-field textarea:focus { border-color: var(--color-accent); background: var(--color-bg-main); }

.footer { border-top: 1px solid rgba(255,255,255,0.08); background: var(--color-bg-card); padding: 18px 0; font-size: .8vw; color: var(--color-text-muted); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; }
.footer-links { display: flex; gap: 20px; }

#backToTop { position: fixed; right: 2vw; bottom: 2vw; width: 3vw; height: 3vw; 
    border-radius: 50%; border: 1px solid var(--color-border-header); background: rgba(124,127,131,0.3); 
    color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; opacity: 0; 
    pointer-events: none; transition: 0.2s; z-index: 900; font-size: clamp(1vw, 1.2vw, 1.3vw); }
#backToTop.visible { opacity: 1; pointer-events: auto; }
#backToTop:hover { background: var(--color-accent); border: none; color: var(--color-text-main);}

/* Hero Entrance Animations */
.hero-title-line, .hero-subtitle, .hero-advantages .adv-card { opacity: 0; transform: translateY(30px); }
.hero-title-line-1.hero-anim-in { opacity: 1; transform: translateY(0); transition: 0.55s ease-out; }
.hero-title-line-2.hero-anim-in { opacity: 1; transform: translateY(0); transition: 0.55s ease-out 0.12s; }
.hero-title-na.hero-anim-in { opacity: 1; transform: rotate(-90deg); transition: 0.45s ease-out 0.22s; }
.hero-subtitle.hero-anim-in { opacity: 1; transform: translateY(0); transition: 0.55s ease-out 0.34s; }
.hero-advantages.hero-anim-in .adv-card { opacity: 1; transform: translateY(0); transition: 0.5s ease-out; }
.hero-advantages.hero-anim-in .adv-card:nth-child(1) { transition-delay: 0.42s; }
.hero-advantages.hero-anim-in .adv-card:nth-child(2) { transition-delay: 0.48s; }
.hero-advantages.hero-anim-in .adv-card:nth-child(3) { transition-delay: 0.54s; }
.hero-advantages.hero-anim-in .adv-card:nth-child(4) { transition-delay: 0.6s; }


/* ================================================================= */
/* АДАПТИВ (TABLET & MOBILE) */
/* ================================================================= */
@media (max-width: 1400px) {
     .swiper-slide.tour-card { width: 340px; }
}

@media (max-width: 1199.98px) {
    
    .swiper-slide.tour-card { width: 320px; }

    /* --- ШАПКА И МЕНЮ --- */
    .header { padding: 0 10px; }
    .header-inner { min-width: 94vw !important; padding: 8px 10px !important; justify-content: space-between !important; display: flex; align-items: center; }
    .header-right { margin-left: auto; gap: 0; display: flex; align-items: center; }
    .logo { font-size: 10px; line-height: 1.2; gap: 1vw; }
    .btn { padding: 6px 12px; font-size: 11px; white-space: nowrap; }
    .desktop-socials { display: none !important; }
    .hamburger { display: flex; flex-direction: column; gap: 5px; width: 24px; height: 22px; padding: 0; border: none; background: transparent; justify-content: center; margin-left: 16px !important; }
    .nav { position: fixed; top: var(--header-height); left: 10px; right: 10px; background: rgba(5,7,11,0.95); backdrop-filter: blur(15px); padding: 0; transform: translateY(-20px); opacity: 0; pointer-events: none; transition: transform 0.3s ease-out, opacity 0.3s ease-out; }
    .nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .header:not(.scrolled) .nav.open { top: calc(var(--header-height) + 1vh); background: rgba(21, 27, 37, 0.9); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: var(--radius-card); }
    .header.scrolled .nav.open { left: 0; right: 0; border-radius: 0; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
    .nav-list { flex-direction: column; padding: 20px 0; gap: 20px; align-items: center; }
    .mobile-socials { display: flex !important; justify-content: center; padding: 15px 0; margin: 0 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); gap: 30px; }

    /* --- HERO MOBILE FIXES --- */
    .hero { 
        /* Возвращаем flex, чтобы управлять вертикальным положением */
        display: flex; 
        flex-direction: column;
        /* 100dvh — это "честная" высота экрана телефона (учитывает адресную строку браузера) */
        height: 100dvh !important; 
        min-height: 100dvh; 
    }

    .hero-inner { 
        height: 100%;
        display: flex;
        flex-direction: column;
        /* Это распределит элементы: Заголовок улетит вверх/центр, Карточки прижмутся к низу */
        justify-content: space-between; 
        
        padding-top: 15vh; /* Отступ сверху, чтобы заголовок не налез на лого */
        padding-bottom: 4vh; /* Отступ снизу от края экрана */
    }

    .hero-content { 
        width: 100% !important; 
        text-align: center; 
        
        /* Магия Flexbox: margin-top: auto и margin-bottom: auto центрируют блок 
           в доступном свободном пространстве над карточками */
        margin-top: auto; 
        margin-bottom: auto; 
    }
    
    .hero-title-line-2 { 
        display: flex; 
        flex-wrap: wrap; 
        justify-content: center; 
        margin-left: -10px; 
    }

    /* БЛОК ПРЕИМУЩЕСТВ */
    .hero-advantages { 
        /* margin-top: auto гарантирует, что этот блок улетит в самый низ контейнера */
        margin-top: auto; 
        width: 100%;
        max-width: 100%;
        
        /* Превращаем строку в сетку 2x2 */
        flex-wrap: wrap; 
        justify-content: center;
        gap: 8px; /* Небольшой зазор */
    }

    .adv-card { 
        /* Карточка занимает ~48% ширины, чтобы встать по 2 в ряд */
        flex: 0 0 calc(50% - 8px); 
        min-width: 0;
        padding: 12px;
        /* Чуть темнее фон для читаемости на телефоне */
        background: rgba(5, 7, 10, 0.85); 
    }
    
    /* Увеличиваем иконки, потому что 2.5vw на телефоне — это микроскопически мало */
    .adv-icon { 
        width: 28px; 
        height: 28px; 
        margin-bottom: 6px; 
    }
    .adv-icon i { font-size: 14px; }
    
    .adv-text { 
        font-size: 11px; /* Читаемый размер шрифта */
        margin-bottom: 4px; 
    }

    /* Скрываем подсказку "Листайте вниз", так как карточки и так внизу, места нет */
    .hero-scroll-hint { display: none; }


    /* ========================================================================= */
    /* --- СЕКЦИЯ "О НАС": УМНАЯ АДАПТАЦИЯ (Line-Clamp + Кнопка) --- */
    /* ========================================================================= */
    
    .section-tours,
    .section-about {
        height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden; 
    }

    .section-about .container {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center; 
        padding-top: calc(var(--header-height) + 1vh);
        padding-bottom: 2vh;
    }

    .about-inner {
        flex: 1;          
        display: flex;
        overflow: hidden; 
        gap: 20px;        
    }

    /* SCENARIO A: LANDSCAPE / WIDE TABLET */
    @media (min-width: 768px), (orientation: landscape) {
        .about-inner {
            flex-direction: row; 
            align-items: center; 
        }

        .section-about .section-header {
            margin-bottom: 2vh;
            margin-top: 0;
            flex-shrink: 0;
        }

        .about-media {
            flex: 1; height: 100%; max-height: 65vh; 
            border-radius: var(--radius-card); overflow: hidden;
        }
        .about-figure { width: 100%; height: 100%; margin: 0; }
        .about-figure img { width: 100%; height: 100%; object-fit: cover; }

        .about-content {
            flex: 1; display: flex; flex-direction: column;
            justify-content: center; max-height: 65vh; 
            padding-right: 10px; gap: 15px;
        }

        .about-text-wrapper {
            display: -webkit-box;
            /* -webkit-line-clamp: 9;  */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .about-text { margin: 0 0 10px; }
    }

    /* SCENARIO B: PORTRAIT PHONE */
    @media (max-width: 767.98px) and (orientation: portrait) {
        .about-inner { flex-direction: column; }
        
        .section-about .section-header {
            flex-shrink: 0; margin-bottom: 1vh; margin-top: 1vh;
        }

        .about-media {
            width: 100%; height: 35vh; flex-shrink: 0; 
            border-radius: var(--radius-card); overflow: hidden;
        }
        .about-figure { width: 100%; height: 100%; margin: 0; }
        .about-figure img { width: 100%; height: 100%; object-fit: cover; }

        .about-content {
            flex: 1; display: flex; flex-direction: column;
            justify-content: flex-start; overflow: hidden; 
            margin-top: 1vh; gap: 1vh;
        }
        
        .about-text-wrapper {
            display: -webkit-box;
            /* -webkit-line-clamp: 6;  */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .about-text {
            font-size: 13px; margin: 0 0 5px; line-height: 1.4;
        }
        /* .btn-more { width: 100%; } */
    }
    
    /* ========================================================================= */

    /* --- ФОРМА И КАРУСЕЛЬ --- */
    .form-row { flex-direction: column; }
    .carousel-controls { gap: 20px; margin-top: 30px; }
    
    /* --- ОБЩИЕ ПРАВИЛА --- */
    .contacts-map-wrapper, .contacts-form-wrapper { width: 100%; max-width: 100%; }
    .footer-inner { flex-direction: column; align-items: flex-start; gap: 15px; }

} /* <<<< КОНЕЦ ОСНОВНОГО МЕДИА-ЗАПРОСА */


@media (max-width: 768px) {
    /* На мобиле карточка чуть уже экрана, чтобы было видно следующую */
    .swiper-slide.tour-card { width: 85vw; }
        /* #backToTop {
        display: none !important;
    } */
}

@media (max-width: 450px) {
    .hero-content { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ================================================================= */
/* ФИНАЛЬНЫЙ ФИКС ДЛЯ МОБИЛЬНЫХ (ПОРТРЕТНЫЙ РЕЖИМ) */
/* ================================================================= */
@media (max-width: 767.98px) and (orientation: portrait) {

    /* 2. РАСШИРЯЕМ КОНТЕЙНЕР HERO ДО 90% */
    .hero-inner {
        width: 90% !important;
        max-width: 90% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        
        /* Выравнивание контента */
        display: flex;
        flex-direction: column;
        justify-content: center; /* Центрируем по вертикали */
    }

    /* 3. ЗАГОЛОВОК (В 3 строки, по левому краю) */
    .hero-content {
        width: 100% !important;
        text-align: left !important; /* Выравнивание влево */
        margin-left: 0 !important;
        margin-right: 0 !important;
        
        /* Отступ сверху, чтобы заголовок был визуально по центру свободной зоны */
        margin-top: auto;
        margin-bottom: 20px; 
    }
    
    .hero-title-wrapper {
        width: 100%;
    }

    .hero-title {
        /* Размер шрифта чуть меньше, чтобы слова "НА СЕВЕРНОМ" влезли в строку */
        font-size: clamp(32px, 9vw, 46px); 
        line-height: 1.1;
    }

    .hero-title-line-2 {
        display: block !important; /* Убираем flex, чтобы текст шел потоком */
        text-align: left !important;
        margin-left: 0 !important;
    }



    /* 4. БЛОК ПРЕИМУЩЕСТВ (На всю ширину 90%) */
    .hero-advantages {
        width: 100% !important;
        margin-top: auto; /* Прижимаем к низу */
        margin-bottom: 4vh; /* Отступ от самого низа экрана */
        gap: 10px; /* Расстояние между карточками */
    }
    
    .adv-card {
        /* Карточка занимает половину минус зазор. 
           Текст внутри будет переноситься, если не влезет. */
        flex: 0 0 calc(50% - 5px) !important; 
        width: auto !important;
        padding: 12px 10px; /* Компактные отступы внутри */
    }
    
    /* Уменьшаем шрифт в карточках, чтобы не вылезал */
    .adv-text {
        font-size: 10px !important;
        white-space: normal; /* Разрешаем перенос текста */
    }


}
/* ================================================================= */
/* ВОЗВРАЩЕНИЕ ПОЭКРАННОГО СКРОЛЛА (NATIVE CSS SNAP) */
/* ================================================================= */

/* Включаем прилипание только для экранов меньше 1200px (мобильные/планшеты) */
@media (max-width: 1199.98px) {
    html {
        /* Включаем строгое прилипание по вертикали */
        scroll-snap-type: y mandatory; 
        scroll-behavior: smooth;
    }

    /* Указываем, какие блоки должны прилипать */
    .hero,
    .section-tours,
    .section-about,
    .section-contacts {
        /* Секция должна прилипать своим верхом к верху экрана */
        scroll-snap-align: start; 
        
        /* Заставляет браузер обязательно остановиться на секции, не пролетая мимо */
        scroll-snap-stop: always; 
    }
        .section-kicker {
        font-size: 0.8em;
    }
}

/* ================================================================= */
/* ЖЕСТКАЯ ФИКСАЦИЯ "НА" + "СЕВЕРНОМ" (ALL MOBILE/TABLET) */
/* ================================================================= */
@media (max-width: 1199.98px) {
    
    /* Контейнер строки: Строго ФЛЕКС, Строго БЕЗ ПЕРЕНОСА */
    .hero-title-line-2 {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important; /* Запрещаем разрыв строки */
        width: auto !important;
    }

    /* Частица "НА": Всегда повернута, всегда слева */
    .hero-title-na {
        display: block !important;
        transform: rotate(-90deg) !important; /* Поворот */
        margin: 0 0.5em 0 0 !important;       /* Отступ справа до текста */
        font-size: 0.4em !important;          /* Размер ~40% от основного текста */
        width: auto !important;
        height: auto !important;
        flex-shrink: 0 !important;            /* Запрещаем сплющивать */
        line-height: 1 !important;
    }

    /* Текст "СЕВЕРНОМ КАВКАЗЕ": Запрещаем разрыв слов */
    .hero-title-rest {
        white-space: nowrap !important;
    }
}

/* ================================================================= */
/* ПОДЗАГОЛОВОК: СТРОГО В ДВЕ СТРОКИ (FIX) */
/* ================================================================= */
@media (max-width: 1199.98px) {
    
    .hero-subtitle {
        /* Контейнер */
        width: 100% !important;
        max-width: 90% !important; /* Не прижимаемся к самым краям */
        margin: 2vh auto 0 auto !important; /* Центрируем сам блок */
        text-align: center !important;
    }

    /* Первая строка: "НЕЗАБЫВАЕМЫЕ ВПЕЧАТЛЕНИЯ" */
    .hero-sub-1 {
        display: block !important; /* Занимает всю ширину -> след. текст падает вниз */
        
        /* Шрифт: мин. 13px, макс 24px, зависит от ширины экрана */
        font-size: clamp(13px, 4vw, 24px) !important; 
        
        letter-spacing: 0.2em !important;
        line-height: 1.4 !important;
        margin-bottom: 4px !important; /* Маленький отступ до второй строки */
        text-align: center !important;
    }

    /* Вторая строка: "В СЕРДЦЕ КАВКАЗСКИХ ГОР" */
    .hero-sub-2 {
        display: block !important; /* Тоже отдельный блок */
        
        font-size: clamp(13px, 4vw, 24px) !important;
        
        letter-spacing: 0.2em !important;
        line-height: 1.4 !important;
        margin-left: 0 !important; /* Сбрасываем старые отступы */
        text-align: center !important;
    }
}

/* ================================================================= */
/* ФИНАЛЬНЫЙ ФИКС HERO: ПРАВИЛЬНЫЙ ПЕРЕНОС И РАЗМЕРЫ (VW) */
/* ================================================================= */
@media (max-width: 1199.98px) {
    
    .container{
        max-width: 90%;
        /* padding: 0 0; */
    }

    .hero-content {
        padding: 0 5px; /* Минимальный зазор от краев */
        overflow: hidden; /* Страховка */
    }

    /* 1. Первая строка: "ПРИКЛЮЧЕНИЯ" */
    .hero-title-line-1 {
        display: flex !important;
        flex-direction: row;
        /* Выравниваем по ВЕРХУ, чтобы "НА" встало напротив "СЕВЕРНОМ" */
        align-items: flex-start; 
        justify-content: flex-start;
        width: 100%;
        font-size: 8vw !important;
    }

    /* 2. Блок второй строки */
    .hero-title-line-2 {
        display: flex !important;
        flex-direction: row;
        /* Выравниваем по ВЕРХУ, чтобы "НА" встало напротив "СЕВЕРНОМ" */
        align-items: flex-start; 
        justify-content: flex-start;
        width: 100%;
    }

    /* Частица "НА" */
    .hero-title-na {
        flex-shrink: 0;
        transform: rotate(-90deg) !important;
        
        /* Визуальная подгонка, чтобы центр "НА" совпал с центром букв "СЕВЕРНОМ" */
        margin-top: 0.6em !important; 
        margin-right: 12px !important;
        
        /* Размер чуть меньше текста */
        font-size: 5vw !important; 
        width: 1em; /* Фикс ширина, чтобы не прыгало */
        display: block;
    }

    /* Текст "СЕВЕРНОМ КАВКАЗЕ" */
    .hero-title-rest {
        /* Разрешаем перенос! */
        white-space: normal !important; 
        text-align: left;
        flex: 1;
        
        /* Шрифт 11% от ширины экрана. */
        font-size: 8vw !important;
        line-height: 1.1;
        word-wrap: break-word;
    }
}

@media (max-width: 1023px) and (orientation: landscape) {

        .hero-title-line-1 {
        font-size: 6vh !important; /* Твои 4vw */
        margin-bottom: 0 !important;
    }
     .hero-title-rest {
        font-size: 4vw !important;
    }

    .hero-title-na {
        font-size: 2vw !important; /* Пропорционально уменьшаем "НА" */
        margin-right: 8px !important;
        margin-top: 0.5em !important;
    }

    .hero-sub-1, .hero-sub-2 {
       font-size: 2vw !important;
       text-align: left !important;
    }
}

/* ================================================================= */
/* ФИНАЛЬНЫЙ РЕМОНТ SCROLL SNAP (С УМНЫМИ КОНТАКТАМИ) */
/* ================================================================= */
@media (max-width: 1199.98px) {
    
    html, body {
        height: 100% !important;
        margin: 0 !important;
        scroll-snap-type: y mandatory !important;
        scroll-behavior: smooth !important;
        overflow-y: scroll !important; 
        overflow-x: hidden !important;
    }

    /* 1. ОБЫЧНЫЕ СЕКЦИИ (Hero, Туры, О нас) */
    /* Они влезают в экран, им делаем жесткий снэп */
    .hero,
    .section-tours,
    .section-about {
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
        height: 100dvh !important; /* Строго экран */
        min-height: 100dvh !important;
        overflow: hidden !important; /* Обрезаем лишнее */
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. СЕКЦИЯ КОНТАКТОВ (ИСКЛЮЧЕНИЕ!) */
    /* Она длинная, ей разрешаем растягиваться */
    .section-contacts {
        /* Всё ещё прилипаем к её началу */
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
        
        /* ВАЖНО: Убираем фикс высоту, ставим min-height */
        height: auto !important; 
        min-height: 100dvh !important; 
        
        /* Разрешаем контенту вылезать вниз */
        overflow: visible !important; 
        display: flex !important;
        flex-direction: column !important;
        
        /* Добавляем отступ снизу, чтобы подвал не прилипал к краю */
        padding-bottom: 40px !important;
    }
    
    /* Если футер лежит ОТДЕЛЬНО от section-contacts, то ему тоже нужно snap-align */
    /* Если футер ВНУТРИ section-contacts, то это не нужно */
    .footer {
        scroll-snap-align: end; /* Прилипаем к концу страницы */
    }
}

/* ================================================================= */
/* ФИКС МОБИЛЬНОГО МЕНЮ (КРУПНЫЙ ТЕКСТ И ИКОНКИ) */
/* ================================================================= */
@media (max-width: 1199.98px) {
    
    /* 1. Увеличиваем отступы в списке меню */
    .nav-list {
        gap: 30px !important; /* Больше воздуха между пунктами */
        padding: 40px 0 20px 0 !important;
        width: 100%;
    }

    /* 2. ССЫЛКИ МЕНЮ (ТУРЫ, О НАС...) */
    .nav-link {
        /* БЫЛО: ~4px. СТАЛО: Минимум 24px, резиново до 32px */
        font-size: clamp(24px, 6vw, 32px) !important;
        
        /* Делаем жирнее и читабельнее */
        font-weight: 700 !important;
        letter-spacing: 0.15em !important;
        text-transform: uppercase;
        
        /* Увеличиваем область клика */
        display: block;
        padding: 5px 0;
    }

    /* 3. КОНТЕЙНЕР СОЦ. ИКОНОК */
    .mobile-socials {
        display: flex !important;
        justify-content: center;
        gap: 25px !important; /* Расстояние между кружками */
        margin-top: 20px !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        /* width: 80%; Полоска не на всю ширину */
    }

    /* 4. САМИ ИКОНКИ (КРУЖКИ) */
    .mobile-socials .social-link {
        /* Делаем крупные кнопки под палец (45x45px) */
        width: 48px !important;
        height: 48px !important;
        
        /* Размер значка внутри */
        font-size: 22px !important;
        
        /* Фон, чтобы их было видно */
        background: rgba(255, 255, 255, 0.08);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff !important;
    }
}
/* ================================================================= */
/* ФИКС МЕНЮ ДЛЯ АЛЬБОМНОЙ ОРИЕНТАЦИИ (LANDSCAPE) */
/* ================================================================= */
@media (max-width: 950px) and (orientation: landscape) {
    
    /* 1. Сжимаем отступы самого списка */
    .nav-list {
        padding: 10px 0 !important;
        gap: 15px !important; /* Уменьшаем расстояние между пунктами */
    }

    /* 2. Уменьшаем шрифт ссылок */
    .nav-link {
        font-size: 20px !important; /* Компактный размер */
        padding: 2px 0 !important;
    }

    /* 3. Уменьшаем блок с иконками */
    .mobile-socials {
                display: flex !important;
        justify-content: center !important; /* Центрируем содержимое (иконки) */
        
        /* ГЛАВНОЕ: Центрируем сам блок контейнера */
        width: 100% !important; /* Растягиваем на всю ширину */
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 10px !important;
        padding-top: 10px !important;
        padding-bottom: 5px !important;
        gap: 20px !important;
    }

    /* 4. Уменьшаем сами иконки */
    .mobile-socials .social-link {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }

    /* 5. Гарантируем, что меню можно прокрутить, если даже так не влезет */
    .nav.open {
        overflow-y: auto !important;
        max-height: 85vh !important; /* Оставляем место снизу */
        /* Улучшаем скролл */
        -webkit-overflow-scrolling: touch; 
    }
}

/* ================================================================= */
/* ФИНАЛЬНЫЙ АЛГОРИТМ "О НАС" (СТРОГАЯ МАТЕМАТИКА) */
/* Для iPad Mini/Pro (Portrait) и Mobile Landscape */
/* ================================================================= */
@media (min-width: 768px) and (max-width: 1199.98px), 
       (orientation: landscape) and (max-height: 600px) {

    /* 1. ГЛАВНЫЙ КОНТЕЙНЕР: СЕТКА ЭКРАНА */
    .section-about .container {
        height: 100dvh !important; /* Строго высота экрана */
        
        /* Сверху: отступаем высоту шапки (чтобы не налезло) */
        padding-top: var(--header-height) !important;
        
        /* Снизу: отступаем высоту шапки (симметрия) */
        padding-bottom: var(--header-height) !important;
        
        /* Внутри: выстраиваем вертикаль */
        display: flex !important;
        flex-direction: column !important;
        
        /* Главное: центруем "Заголовок + Контент" в оставшемся месте */
        justify-content: center !important; 
    }

    /* 2. ЗАГОЛОВОК СЕКЦИИ ("О НАС") */
    .section-about .section-header {
        /* Заголовок не должен сжиматься */
        flex-shrink: 0 !important;
        
        /* Отступ от заголовка до картинки */
        margin-top: 3vh !important;
    }

    /* 3. БЛОК INNER (ОБЕРТКА КАРТИНКИ И ТЕКСТА) */
    .about-inner {
        /* Высота: пусть картинка решает, но не больше доступного места */
        /* calc(100% - заголовок) - грубо говоря, занимает всё оставшееся место */
        flex-grow: 1 !important; 
        
        /* Ограничиваем, чтобы на квадратных экранах не улетело */
        max-height: 75vh !important; 
        min-height: 0 !important; /* Важно для работы flex-shrink */

        display: flex !important;
        align-items: stretch !important; /* Растягиваем высоту колонок одинаково */
        gap: 30px !important;
    }

    /* 4. КАРТИНКА (ЛЕВАЯ КОЛОНКА) */
    .about-media {
        flex: 1 !important; /* 50% ширины */
        height: 100% !important;
    }
    
    .about-figure {
        height: 100% !important;
        width: 100% !important;
    }
    
    .about-figure img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* 5. КОНТЕНТ (ПРАВАЯ КОЛОНКА) */
    .about-content {
        flex: 1 !important; /* 50% ширины */
        height: 100% !important; /* Высота равна высоте картинки */
        
        display: flex !important;
        flex-direction: column !important;
        
        /* Верхний отступ = радиусу скругления */
        padding-top: var(--radius-card) !important;
        
        /* Нижний отступ = радиусу скругления */
        padding-bottom: var(--radius-card) !important;
        
        /* Сбрасываем лишнее */
        justify-content: flex-start !important;
    }

    /* 6. ТЕКСТ (ЗАНИМАЕТ ВСЁ СВОБОДНОЕ МЕСТО) */
    .about-text-wrapper {
        /* flex: 1 !important;  */
        min-height: 0 !important; /* Магия CSS для работы overflow внутри flex */
        
        /* ОБРЕЗКА ТЕКСТА (БЕЗ ПОЛОВИНОК СТРОК) */
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 18; /* Ограничиваем кол-во строк (подбери число) */
        overflow: hidden !important; /* Скрываем лишнее */
        
        margin-bottom: 20px !important; /* Зазор до кнопки */
    }

    .about-text {
        font-size: clamp(14px, 1.8vw, 16px) !important;
        line-height: 1.5 !important;

        margin: 0 !important;
    }

    /* 7. КНОПКА (ФИКСИРОВАННЫЙ БЛОК ВНИЗУ) */
    .section-about .btn {
        flex-shrink: 0 !important; /* Не сжиматься */
        
        align-self: flex-start !important; /* Прижать влево */
        /* width: auto !important; */
        
        /* Так как у родителя есть padding-bottom: radius, 
           кнопка визуально встанет ровно над началом скругления */
    }
}