/* ============================================
TRIPLIO - Travel Website Styles
============================================ */
/* CSS Custom Properties (Design Tokens) */
:root {
/* Colors - Primary */
--color-primary-50: #fef3e2;
--color-primary-100: #fde5c2;
--color-primary-200: #fbcf94;
--color-primary-300: #f9b35d;
--color-primary-400: #f79833;
--color-primary-500: #d4bc7e;
--color-primary-600: #A68B4B;
--color-primary-700: #bf540d;
--color-primary-800: #984312;
--color-primary-900: #7a3912;
--color-glass: rgba(255, 255, 255, 0.08);
--color-glass-border: rgba(255, 255, 255, 0.15);
--color-glass-hover: rgba(255, 255, 255, 0.12);
/* Colors - Secondary */
--color-secondary-50: #e0f7fa;
--color-secondary-100: #b2ebf2;
--color-secondary-200: #80deea;
--color-secondary-300: #4dd0e1;
--color-secondary-400: #26c6da;
--color-secondary-500: #00bcd4;
--color-secondary-600: #00acc1;
--color-secondary-700: #0097a7;
--color-secondary-800: #00838f;
--color-secondary-900: #006064;
/* Colors - Neutral */
--color-neutral-0: #ffffff;
--color-neutral-50: #fafafa;
--color-neutral-100: #f5f5f5;
--color-neutral-200: #eeeeee;
--color-neutral-300: #e0e0e0;
--color-neutral-400: #bdbdbd;
--color-neutral-500: #9e9e9e;
--color-neutral-600: #757575;
--color-neutral-700: #616161;
--color-neutral-800: #424242;
--color-neutral-900: #212121;
--color-neutral-950: #1a1a1a;
/* Colors - Semantic */
--color-success-500: #22c55e;
--color-success-600: #16a34a;
--color-warning-500: #f59e0b;
--color-warning-600: #d97706;
--color-error-500: #ef4444;
--color-error-600: #dc2626;
/* Theme Colors */
--color-bg: var(--color-neutral-0);
--color-bg-secondary: var(--color-neutral-50);
--color-bg-tertiary: var(--color-neutral-100);
--color-text: var(--color-neutral-900);
--color-text-secondary: var(--color-neutral-600);
--color-text-tertiary: var(--color-neutral-500);
--color-accent: var(--color-primary-500);
--color-accent-hover: var(--color-primary-600);
--color-border: var(--color-neutral-200);
--color-border-hover: var(--color-neutral-300);
/* Typography */
--font-heading: 'Playfair Display', Georgia, serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* Font Sizes - Mobile First */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
--text-5xl: 3rem;
--text-6xl: 3.75rem;
/* Line Heights */
--leading-none: 1;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 2;
/* Font Weights */
--font-light: 300;
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
/* Spacing */
--space-0: 0;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--space-32: 8rem;
/* Border Radius */
--radius-none: 0;
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-2xl: 1.5rem;
--radius-3xl: 2rem;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
/* Transitions */
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);
/* Z-Index Scale */
--z-dropdown: 100;
--z-sticky: 200;
--z-fixed: 300;
--z-modal-backdrop: 400;
--z-modal: 500;
--z-popover: 600;
--z-tooltip: 700;
/* Container */
--container-max: 1280px;
--container-padding: var(--space-4);

--logo-height: 120px;
--logo-gap: 80px;
--speed: 60s;
--edge-fade: 10%;


}
/* Dark Theme */
[data-theme="dark"] {
--color-bg: var(--color-neutral-950);
--color-bg-secondary: var(--color-neutral-900);
--color-bg-tertiary: var(--color-neutral-800);
--color-text: var(--color-neutral-50);
--color-text-secondary: var(--color-neutral-400);
--color-text-tertiary: var(--color-neutral-500);
--color-border: var(--color-neutral-800);
--color-border-hover: var(--color-neutral-700);
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ============================================
BASE STYLES
============================================ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--color-text);
background-color: var(--color-bg);
min-height: 100vh;
transition: background-color var(--transition-base), color var(--transition-base);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: var(--font-bold);
line-height: var(--leading-tight);
color: var(--color-text);
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }
p {
margin-bottom: var(--space-4);
}
a {
color: var(--color-accent);
text-decoration: none;
transition: color var(--transition-fast);
}
/* a:hover {
color: var(--color-accent-hover);
} */
img {
max-width: 100%;
height: auto;
display: block;
}
ul, ol {
list-style: none;
}
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
}
/* Focus styles for accessibility */
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
.fa-color{
    color: var(--color-accent);
}

.nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* EQUALIZER - Audio Toggle */
        .equalizer {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            /* background: var(--color-bg-secondary); */
            border-radius: var(--radius-full);
            cursor: pointer;
            transition: all var(--transition-base);
            /* Убраны стили, которые могли бы влиять на отображение внутри theme-toggle */
        }

        /* .equalizer:hover {
            background: var(--color-bg-tertiary);
            border-color: var(--color-accent);
        } */

        .equalizer__bars {
            display: flex;
            align-items: flex-end;
            gap: 3px;
            height: 18px;
        }

        .equalizer__bar {
            width: 3px;
            background: var(--color-accent);
            border-radius: 2px;
            transition: height 0.1s ease;
        }

        .equalizer__bar:nth-child(1) { height: 8px; animation: equalize 0.8s ease-in-out infinite; }
        .equalizer__bar:nth-child(2) { height: 14px; animation: equalize 0.6s ease-in-out infinite 0.1s; }
        .equalizer__bar:nth-child(3) { height: 10px; animation: equalize 0.7s ease-in-out infinite 0.2s; }
        .equalizer__bar:nth-child(4) { height: 16px; animation: equalize 0.5s ease-in-out infinite 0.15s; }

        @keyframes equalize {
            0%, 100% { transform: scaleY(1); }
            50% { transform: scaleY(0.5); }
        }

        /* Paused state */
        .equalizer.paused .equalizer__bar {
            animation: none;
            height: 4px !important;
            opacity: 0.5;
        }

/* ============================================
   BUTTONS
   ============================================ */
/* 
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg);
    font-size: 1rem;
    font-weight: 500;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    text-decoration: none;
} */

/* .btn--primary {
    background: transparent;
    color: var(--color-text);
    border: 2px solid var(--color-text);
    min-width: 140px;
} */

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

.btn--video {
    background: transparent;
    color: var(--color-neutral-700);
    /* border: 2px solid var(--color-accent); */
    padding-left: var(--space-xs);
}

.btn--video:hover {
    background: var(--color-accent);
    color: var(--color-bg);
}

.btn__play-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: var(--color-bg);
    border-radius: var(--radius-full);
}

.btn--video:hover .btn__play-icon {
    background: var(--color-bg);
    color: var(--color-accent);
}

.btn--full {
    width: 100%;
}




/* ============================================
   VIDEO MODAL
   ============================================ */

.video-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.video-modal.active {
    opacity: 1;
    visibility: visible;
}

.video-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
}

.video-modal__content {
    position: relative;
    width: 90%;
    max-width: 1000px;
    z-index: 1;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.video-modal.active .video-modal__content {
    transform: scale(1);
}

.video-modal__close {
    position: absolute;
    top: -50px;
    right: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-glass);
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-full);
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.3s ease;
}

.video-modal__close:hover {
    background: var(--color-glass-hover);
    transform: rotate(90deg);
}

.video-modal__player {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.video-modal__player video {
    width: 100%;
    display: block;
    max-height: 100vh;
}

/* ============================================
LAYOUT
============================================ */
.container {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
}
.section {
padding-top: var(--space-24);
padding-bottom: var(--space-24);
}
/* ============================================
HEADER
============================================ */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--z-fixed);
background: rgba(var(--color-bg), 0.8); /* Note: Using rgba() might require JS for dynamic conversion of named colors */
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
/* border-bottom: 1px solid var(--color-border); */
transition: all var(--transition-base);
}
.header--scrolled {
box-shadow: var(--shadow-md);
}
.header__container {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
}
/* Logo */
.logo {
display: flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: var(--font-bold);
color: var(--color-text);
}
.logo__icon {
font-size: var(--text-2xl);
}
.logo:hover {
color: var(--color-text);
}
/* Navigation */
.nav {
display: flex;
align-items: center;
}
.nav__menu {
display: flex;
align-items: center;
gap: var(--space-8);
}
.nav__link {
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
position: relative;
padding: var(--space-2) 0;
}
.nav__link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--color-accent);
transition: width var(--transition-base);
}
.nav__link:hover,
.nav__link--active {
color: var(--color-text);
}
.nav__link:hover::after,
.nav__link--active::after {
width: 100%;
}
/* Mobile Navigation Toggle */
.nav__toggle {
display: none;
flex-direction: column;
gap: 5px;
padding: var(--space-2);
}
.nav__toggle-line {
display: block;
width: 24px;
height: 2px;
background: var(--color-text);
transition: all var(--transition-base);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-line:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-line:nth-child(2) {
opacity: 0;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-line:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* Header Actions */
.header__actions {
display: flex;
align-items: center;
gap: var(--space-4);
}
/* Theme Toggle */
.theme-toggle {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
/* background: var(--color-bg-secondary); */
color: var(--color-text);
transition: all var(--transition-base);
}
.theme-toggle:hover {
/* background: var(--color-bg-tertiary); */
transform: scale(1.05);
}
.theme-toggle__icon--sun {
display: block;
}
.theme-toggle__icon--moon {
display: none;
}
[data-theme="dark"] .theme-toggle__icon--sun {
display: none;
}
[data-theme="dark"] .theme-toggle__icon--moon {
display: block;
}
/* ============================================
BUTTONS
============================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
font-size: var(--text-sm);
font-weight: var(--font-semibold);
border-radius: var(--radius-lg);
transition: all var(--transition-base);
white-space: nowrap;
margin-top: 2rem;
}
.btn--primary {
display: grid;
background: var(--color-accent);
color: white;
text-transform: uppercase;
margin-top: 2rem;
}
.btn--primary:hover {
background: var(--color-accent-hover);
color: white;
box-shadow: var(--shadow-lg);

}
.btn--secondary {
background: var(--color-accent);
color: white;
width: 265px;
}
.btn--secondary:hover {
background: var(--color-accent-hover);
}
.btn--outline {
background: transparent;
color: var(--color-text);
border: 2px solid var(--color-border);
}
.btn--outline:hover {
border-color: var(--color-accent);
color: var(--color-accent);
transform: translateY(-2px);
}
.btn--small {
padding: var(--space-2) var(--space-6);
font-size: var(--text-base);
margin-top: 0;
}
.btn--large {
padding: var(--space-4) var(--space-8);
font-size: var(--text-base);
}
.btn--full {
width: 100%;
}
.btn__icon {
transition: transform var(--transition-base);
}
.btn:hover .btn__icon {
transform: translateX(4px);
}
.btn__loader {
display: none;
animation: spin 1s linear infinite;
}
.btn--loading .btn__loader {
display: block;
}
.btn--loading span {
display: none;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* ============================================
BADGE
============================================ */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: var(--color-bg-secondary);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-text-secondary);
}
/* ============================================
HERO SECTION
============================================ */
.hero {
position: relative;
min-height: 100vh;
padding-top: 120px;
padding-bottom: var(--space-16);
overflow: hidden;
}
.hero__container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-12);
align-items: center;
min-height: calc(100vh - 200px);
}
.hero__content {
position: relative;
z-index: 1;
}
.hero__badge {
margin-bottom: var(--space-6);
opacity: 0;
animation: fadeInUp 0.6s ease forwards;
}
.hero__title {
font-size: var(--text-6xl);
margin-bottom: var(--space-4);
line-height: var(--leading-none);

}
.hero__title-line {
display: block;
opacity: 0;
margin-top: 20px;
animation: fadeInUp 0.6s ease forwards;
}
.hero__title-line:nth-child(1) { animation-delay: 0.1s; }
.hero__title-line:nth-child(2) { animation-delay: 0.2s; }
.hero__title-line--accent {
color: var(--color-accent);
}
.hero__subtitle {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
    opacity: 0;
    animation: fadeInUp 0.6s ease 0.3s forwards;
    text-transform: uppercase;
    letter-spacing: 4px;
}
.hero__description {
font-size: var(--text-lg);
color: var(--color-text-secondary);
max-width: 480px;
margin: var(--space-12) 0;
opacity: 0;
animation: fadeInUp 0.6s ease 0.4s forwards;
}
.hero__actions {
display: flex;
gap: var(--space-4);
opacity: 0;
animation: fadeInUp 0.6s ease 0.5s forwards;
}
/* Hero Visual */
.hero__visual {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.hero__image-wrapper {
position: relative;
}
.hero__image {
position: relative;
z-index: 2;
max-height: 740px;
object-fit: contain;
opacity: 0;
animation: fadeIn 0.8s ease 0.3s forwards;
left: -84%;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.2));
}
/* .hero__image-bg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
background: linear-gradient(135deg, var(--color-primary-200), var(--color-secondary-200));
border-radius: var(--radius-full);
opacity: 0.3;
filter: blur(60px);
z-index: 1;
} */
/* Floating Cards */
.floating-card {
position: absolute;
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4);
z-index: 3;
opacity: 0;
animation: fadeInUp 0.6s ease 0.7s forwards;
}
/* .floating-card--1 {
top: 20%;
left: -20px;
} */
.floating-card--2 {
bottom: 20%;
right: -25%;
animation-delay: 0.9s;
}
.floating-card__icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-primary-100);
border-radius: var(--radius-lg);
font-size: var(--text-xl);
}
.floating-card__content {
display: flex;
flex-direction: column;
}
.floating-card__value {
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: var(--font-bold);
color: var(--color-text);
}
.floating-card__label {
font-size: var(--text-xs);
color: var(--color-text-tertiary);
}
/* Decorative Elements */
.hero__decor {
position: absolute;
top: 0;
left: -100px;
width: 200px;
height: 100%;
pointer-events: none;
z-index: -1;
}
.decorative-triangle {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid var(--color-primary-500);
    top: 20%;
    left: 74%;
    z-index: -1;
}

.decor-circle {
position: absolute;
border-radius: var(--radius-full);
border: 2px solid var(--color-primary-500);
}
.decor-circle--1 {
width: 180px;
    height: 180px;
    top: -25%;
    left: -30%;
}
.decor-circle--2 {
    width: 80px;
    height: 80px;
    top: 66%;
    left: 302%;
    background: var(--color-accent);
}
.decor-circle--3 {
    width: 220px;
    height: 220px;
    top: 80px;
    left: 120%;
}
.decor-circle--4 {
width: 380px;
height: 380px;
top: 80px;
left: 0%;
background: var(--color-accent);
    animation: pulse 4s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(.9);
        opacity: 0.9;
    }
}
.decor-line {
position: absolute;
top: 56%;
left: 60px;
width: 2px;
height: 130px;
background: linear-gradient(to bottom, var(--color-accent));
}
.decor-dots {
position: absolute;
bottom: 50%;
left: -116px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
}
.decor-dots span {
width: 5px;
height: 5px;
background: var(--color-accent);
border-radius: var(--radius-full);
}

.social-links {
            display: flex;
            gap: 15px;
            animation: fadeInUp 0.6s ease 0.5s forwards;
        }

.social-link {
            width: 40px;
            height: 40px;
            background: var(--color-neutral-700);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-neutral-0);
            font-size: 16px;
            text-decoration: none;

}

.social-link:hover {
    /* transform: translateY(-3px); */
    background: var(--color-primary-500); /* Пример цвета при наведении */
}




/* ============================================
   GLASS CARDS
   ============================================ */

.glass-card {
    position: absolute;
    /* background: var(--color-glass);
    /* backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px); 
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-xl);
    padding: var(--space-md); */
    z-index: 2;
}


/* Testimonial Card */
.glass-card--testimonial {
    left: 41%;
    bottom: 82px;
    /* width: 320px; */
    padding: 10px;
}

.glass-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.glass-card__avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    object-fit: cover;
}

.glass-card__name {
    font-size: 1rem;
    font-weight: 600;
    padding-left: 8px;
}

.glass-card__stars {
    color: var(--color-accent);
    font-size: 0.875rem;
    padding-left: 8px;
}

.glass-card__text {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* ============================================
SECTION HEADER
============================================ */
.section__header {
margin-bottom: var(--space-12);
}
.section__header--center {
text-align: center;
}
.section__label {
display: inline-block;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-accent);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--space-4);
}
.section__title {
font-size: var(--text-4xl);
color: var(--color-text);
max-width: 800px;
}
.section__header--center .section__title {
margin-left: auto;
margin-right: auto;
}
/* ============================================
DESTINATIONS SECTION
============================================ */
.destinations {
background: var(--color-bg-secondary);
}
.destinations__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.destination-card {
position: relative;
background: var(--color-bg);
border-radius: var(--radius-2xl);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: all var(--transition-slow);
}
.destination-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
}
.destination-card--large {
grid-column: span 2;
grid-row: span 2;
}
.destination-card__image-wrapper {
position: relative;
overflow: hidden;
}
.destination-card__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.destination-card:hover .destination-card__image {
transform: scale(1.05);
}
.destination-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
}
.destination-card__content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--space-6);
color: white;
}
.destination-card__badge {
display: inline-block;
padding: var(--space-1) var(--space-3);
background: var(--color-accent);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--font-semibold);
margin-bottom: var(--space-3);
}
.destination-card__title {
font-size: var(--text-2xl);
margin-bottom: var(--space-2);
color: white;
}
.destination-card__description {
font-size: var(--text-sm);
opacity: 0.9;
margin-bottom: var(--space-4);
}
.destination-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.destination-card__price {
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: var(--font-bold);
}
.destination-card__link {
display: flex;
align-items: center;
gap: var(--space-2);
color: white;
font-size: var(--text-sm);
font-weight: var(--font-medium);
}
.destination-card__link:hover {
color: var(--color-primary-300);
}
.destination-card__link svg {
transition: transform var(--transition-base);
}
.destination-card__link:hover svg {
transform: translateX(4px);
}
.destinations__actions {
margin-top: var(--space-10);
text-align: center;
}
/* ============================================
ABOUT SECTION
============================================ */
.about__container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
align-items: center;
}
.about__text {
font-size: var(--text-lg);
color: var(--color-text-secondary);
margin: var(--space-6) 0;
}
.about__features {
margin: var(--space-8) 0;
}
.about__feature {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-4);
font-weight: var(--font-medium);
}
.about__feature-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-success-500);
color: white;
border-radius: var(--radius-full);
font-size: var(--text-sm);
}
.about__visual {
position: relative;
}
.about__image-wrapper {
position: relative;
}
.about__image {
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-xl);
}
.about__image--main {
width: 100%;
}
.about__image--secondary {
position: absolute;
bottom: -40px;
left: -40px;
width: 200px;
border: 4px solid var(--color-bg);
}
.about__stats {
position: absolute;
top: -20px;
right: -20px;
padding: var(--space-6);
background: var(--color-bg);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
}
.stat-item__value {
display: block;
font-family: var(--font-heading);
font-size: var(--text-3xl);
font-weight: var(--font-bold);
color: var(--color-accent);
}
.stat-item__label {
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
/* ============================================
EXPERIENCE SECTION — ИСПРАВЛЕНО
============================================ */

.experience {
  background: var(--color-bg-secondary);
}

.experience__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
  padding: 0 var(--container-padding);
}

/* Адаптация под десктоп */
@media (min-width: 768px) {
  .experience__container {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }
}

.experience__visual {
  position: relative;
}

.experience__image-wrapper {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  /* Убираем фиксированные размеры */
  width: 100%;
  /* Высота будет масштабироваться по содержимому или через aspect-ratio */
  aspect-ratio: 4 / 3; /* Сохраняет пропорции видео (600x450 = 4:3) */
}

.my__video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* Статистика — остаётся как есть, но добавляем адаптацию */
.experience__stat-badge {
  position: absolute;
  top: -20px;
  right: -20px;
  padding: var(--space-6);
  background: var(--color-accent);
  color: white;
  border-radius: var(--radius-xl);
  text-align: center;
  box-shadow: var(--shadow-xl);
  font-size: var(--text-sm); /* уменьшаем на мобилке */
}

.experience__stat-value {
  display: block;
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
}

.experience__stat-label {
  font-size: var(--text-xs);
}

.experience__text {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  margin: var(--space-8) 0;
}

.experience__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.experience__stat {
  text-align: center;
}

.experience__stat-number {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-accent);
}

.experience__stat-suffix {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-accent);
}

.experience__stat-text {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
}

/* Мобильная адаптация: статистика в одну колонку */
@media (max-width: 767px) {
  .experience__stats {
    grid-template-columns: 1fr;
  }

  .experience__stat-badge {
    position: static;
    margin-top: var(--space-6);
    margin-bottom: var(--space-4);
    width: 100%;
    /* max-width: 300px; */
    padding: var(--space-4);
  }

  .experience__stat-value {
    font-size: var(--text-2xl);
  }

  .experience__stat-label {
    font-size: var(--text-xs);
  }
}
/* ============================================
TESTIMONIALS SECTION
============================================ */
.testimonials__rating {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
margin-top: var(--space-4);
}
.testimonials__stars {
color: var(--color-warning-500);
font-size: var(--text-lg);
}
.testimonials__rating-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
.testimonials__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.testimonial-card {
padding: var(--space-6);
background: var(--color-bg-secondary);
border-radius: var(--radius-2xl);
transition: all var(--transition-base);
}
.testimonial-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.testimonial-card--featured {
background: var(--color-accent);
color: white;
}
.testimonial-card--featured .testimonial-card__name,
.testimonial-card--featured .testimonial-card__role,
.testimonial-card--featured .testimonial-card__text {
color: white;
}
.testimonial-card__header {
display: flex;
align-items: center;
gap: var(--space-4);
margin-bottom: var(--space-4);
}
.testimonial-card__avatar {
width: 56px;
height: 56px;
border-radius: var(--radius-full);
object-fit: cover;
}
.testimonial-card__name {
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: var(--font-semibold);
margin-bottom: var(--space-1);
}
.testimonial-card__role {
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
.testimonial-card__text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-4);
}
.testimonial-card__rating {
color: var(--color-warning-500);
}
.testimonial-card--featured .testimonial-card__rating {
color: white;
}
/* ============================================
FAQ SECTION
============================================ */
.faq {
background: var(--color-bg-secondary);
}
.faq__container {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: var(--space-16);
align-items: start;
}
.faq__description {
font-size: var(--text-lg);
color: var(--color-text-secondary);
margin: var(--space-6) 0;
}
.accordion__item {
background: var(--color-bg);
border-radius: var(--radius-xl);
margin-bottom: var(--space-4);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.accordion__trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-5) var(--space-6);
font-size: var(--text-base);
font-weight: var(--font-semibold);
text-align: left;
color: var(--color-text);
background: transparent;
transition: background var(--transition-fast);
}
.accordion__trigger:hover {
background: var(--color-bg-secondary);
}
.accordion__trigger[aria-expanded="true"] {
background: var(--color-bg);
}
.accordion__icon {
width: 24px;
height: 24px;
position: relative;
flex-shrink: 0;
}
.accordion__icon::before,
.accordion__icon::after {
content: '';
position: absolute;
background: var(--color-text);
transition: transform var(--transition-base);
}
.accordion__icon::before {
width: 12px;
height: 2px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.accordion__icon::after {
width: 2px;
height: 12px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.accordion__trigger[aria-expanded="true"] .accordion__icon::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.accordion__content {
max-height: 0;
overflow: hidden;
transition: max-height var(--transition-slow), padding var(--transition-slow);
}
.accordion__trigger[aria-expanded="true"] + .accordion__content {
max-height: 500px;
padding: 0 var(--space-6) var(--space-6);
}
.accordion__content p {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
}
/* ============================================
BLOG SECTION
============================================ */
.blog__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: var(--space-6);
}
.blog-card {
background: var(--color-bg-secondary);
border-radius: var(--radius-2xl);
overflow: hidden;
transition: all var(--transition-base);
}
.blog-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.blog-card--large {
grid-row: span 2;
}
.blog-card__image-wrapper {
position: relative;
overflow: hidden;
}
.blog-card__image {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform var(--transition-slow);
}
.blog-card--large .blog-card__image {
height: 300px;
}
.blog-card:hover .blog-card__image {
transform: scale(1.05);
}
.blog-card__category {
position: absolute;
top: var(--space-4);
left: var(--space-4);
padding: var(--space-1) var(--space-3);
background: var(--color-accent);
color: white;
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--font-semibold);
}
.blog-card__content {
padding: var(--space-5);
}
.blog-card__date {
display: block;
font-size: var(--text-sm);
color: var(--color-text-tertiary);
margin-bottom: var(--space-2);
}
.blog-card__title {
font-family: var(--font-body);
font-size: var(--text-lg);
font-weight: var(--font-semibold);
margin-bottom: var(--space-3);
line-height: var(--leading-snug);
}
.blog-card__title a {
color: var(--color-text);
}
.blog-card__title a:hover {
color: var(--color-accent);
}
.blog-card__excerpt {
font-size: var(--text-sm);
color: var(--color-text-secondary);
margin-bottom: var(--space-4);
}
.blog-card__link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-accent);
}
.blog-card__link svg {
transition: transform var(--transition-base);
}
.blog-card__link:hover svg {
transform: translateX(4px);
}
.blog__actions {
margin-top: var(--space-10);
text-align: center;
}
/* ============================================
CTA SECTION
============================================ */
.cta {
background: linear-gradient(135deg, var(--color-primary-500), var(--color-secondary-500));
color: white;
}
.cta__container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
align-items: center;
}
.cta .section__label {
color: rgba(255, 255, 255, 0.8);
}
.cta .section__title {
color: white;
}
.cta__text {
font-size: var(--text-lg);
opacity: 0.9;
margin: var(--space-6) 0 var(--space-8);
}
.cta__actions {
display: flex;
gap: var(--space-4);
}
.cta__actions .btn--primary {
background: white;
color: var(--color-accent);
}
.cta__actions .btn--primary:hover {
background: var(--color-neutral-100);
}
.cta__actions .btn--outline {
border-color: white;
color: white;
}
.cta__actions .btn--outline:hover {
background: white;
color: var(--color-accent);
}
.cta__visual {
position: relative;
}
.cta__images {
position: relative;
display: flex;
gap: var(--space-4);
}
.cta__image {
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-2xl);
}
.cta__image--1 {
width: 60%;
transform: rotate(-3deg);
}
.cta__image--2 {
width: 50%;
position: absolute;
right: 0;
bottom: -40px;
transform: rotate(3deg);
}
/* ============================================
CONTACT SECTION
============================================ */
.contact {
padding-bottom: 0;
}
.contact__container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
align-items: start;
padding-bottom: var(--space-16);
}
.contact__text {
font-size: var(--text-lg);
color: var(--color-text-secondary);
margin: var(--space-6) 0 var(--space-8);
}
.contact__info {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.contact__item {
display: flex;
align-items: center;
gap: var(--space-4);
}
.contact__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    color: var(--color-accent);
}
.contact__item-content {
display: flex;
flex-direction: column;
}
.contact__item-label {
font-size: var(--text-sm);
color: var(--color-text-tertiary);
}
.contact__item-value {
font-weight: var(--font-semibold);
color: var(--color-accent);
}
/* Contact Form */
.contact__form-wrapper {
background: var(--color-bg-secondary);
padding: var(--space-8);
border-radius: var(--radius-2xl);
}
.form__honeypot {
display: none;
}
.form__group {
margin-bottom: var(--space-5);
}
.form__group--checkbox {
display: flex;
align-items: flex-start;
gap: var(--space-3);
}
.form__label {
display: block;
font-size: var(--text-sm);
font-weight: var(--font-medium);
margin-bottom: var(--space-2);
color: var(--color-text);
}
.form__input,
.form__select,
.form__textarea {
width: 100%;
padding: var(--space-3) var(--space-4);
font-size: var(--text-base);
color: var(--color-text);
background: var(--color-bg);
border: 2px solid var(--color-border);
border-radius: var(--radius-lg);
transition: all var(--transition-fast);
}
.form__input:focus,
.form__select:focus,
.form__textarea:focus {
outline: none;
border-color: var(--color-accent);
}
.form__input::placeholder,
.form__textarea::placeholder {
color: var(--color-text-tertiary);
}
.form__textarea {
resize: vertical;
min-height: 120px;
}
.form__checkbox {
width: 20px;
height: 20px;
margin-top: 2px;
accent-color: var(--color-accent);
}
.form__checkbox-label {
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
.form__checkbox-label a {
color: var(--color-accent);
text-decoration: underline;
}
.form__error {
display: none;
font-size: var(--text-sm);
color: var(--color-error-500);
margin-top: var(--space-1);
}
/* ИСПРАВЛЕНА ОШИБКА: используем ~ вместо + */
.form__input:invalid:not(:placeholder-shown) ~ .form__error,
.form__select:invalid:not(:placeholder-shown) ~ .form__error,
.form__textarea:invalid:not(:placeholder-shown) ~ .form__error,
.form__group--checkbox:has(.form__checkbox:invalid) .form__error {
display: block;
}
.form__success {
display: none;
padding: var(--space-5);
background: var(--color-success-500);
color: white;
border-radius: var(--radius-lg);
text-align: center;
margin-top: var(--space-5);
}
.form__success-icon {
display: block;
font-size: var(--text-3xl);
margin-bottom: var(--space-2);
}
.contact__form--success .form__success {
display: block;
}
.contact__form--success .form__group,
.contact__form--success button[type="submit"] {
display: none;
}
.fa-sun {
    font-size: 23px;

}
.fa-moon {
    font-size: 23px;}
.rotating-circle {
            animation-name: rotateCircle;
            animation-duration: 10s; /* Скорость вращения */
            animation-timing-function: linear; /* Равномерное движение */
            animation-iteration-count: infinite; /* Бесконечное повторение */
        }
        @keyframes rotateCircle {
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
        }
/* ============================================
FOOTER
============================================ */
.footer {
background: var(--color-neutral-900);
color: var(--color-neutral-400);
padding-top: var(--space-16);
padding-bottom: var(--space-8);
}
.footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--space-12);
margin-bottom: var(--space-12);
}
.footer__brand .logo {
color: white;
margin-bottom: var(--space-4);
}
.footer__description {
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-6);
}
.footer__social {
display: flex;
gap: var(--space-3);
margin-top: var(--space-6);
}
.footer__social-link {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-neutral-800);
border-radius: var(--radius-full);
color: var(--color-neutral-400);
transition: all var(--transition-base);
}
.footer__social-link:hover {
background: var(--color-accent);
color: white;
transform: translateY(-2px);
}
.footer__title {
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: var(--font-semibold);
color: white;
margin-bottom: var(--space-5);
}
.footer__links li {
margin-bottom: var(--space-3);
}
.footer__links a {
font-size: var(--text-sm);
color: var(--color-neutral-400);
transition: color var(--transition-fast);
}
.footer__links a:hover {
color: white;
}
.footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--space-8);
border-top: 1px solid var(--color-neutral-800);
}
.footer__copyright,
.footer__credits {
font-size: var(--text-sm);
}
/* ============================================
BACK TO TOP
============================================ */
.back-to-top {
position: fixed;
bottom: var(--space-6);
right: var(--space-6);
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-accent);
color: white;
border-radius: var(--radius-full);
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all var(--transition-base);
z-index: var(--z-fixed);
}
.back-to-top--visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
background: var(--color-accent-hover);
transform: translateY(-4px);
}
/* ============================================
ANIMATIONS
============================================ */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Reveal Animation */
[data-reveal] {
opacity: 0;
transform: translateY(30px);
transition: opacity var(--transition-slower), transform var(--transition-slower);
}
[data-reveal].is-revealed {
opacity: 1;
transform: translateY(0);
}
/* ============================================
RESPONSIVE DESIGN
============================================ */
/* Tablet */
@media (min-width: 768px) {
:root {
--container-padding: var(--space-6);
--text-4xl: 2.5rem;
--text-5xl: 3.5rem;
--text-6xl: 4.5rem;
}
}
/* Desktop */
@media (min-width: 1024px) {
:root {
--container-padding: var(--space-8);
--text-4xl: 3rem;
--text-5xl: 4rem;
--text-6xl: 5rem;
}
}
/* Mobile */
@media (max-width: 767px) {
.nav__toggle {
display: flex;
}
.social-links {
    display: none;
}
.social-links {
    display: none;

}
.decor-circle--2 {
display: none;
}
.decor-circle--3 {
    top: -155px;
    left: 150px;
}
.nav__menu {
position: fixed;
top: 72px;
left: 0;
right: 0;
flex-direction: column;
background: var(--color-bg);
padding: var(--space-6);
gap: var(--space-4);
border-bottom: 1px solid var(--color-border);
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: all var(--transition-base);
}
/* ИСПРАВЛЕНА ОШИБКА: добавлено правило для состояния открытого меню */
.nav__toggle[aria-expanded="true"] + .nav__menu,
.nav__menu.is-open {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.header__actions .btn {
display: none;
}
.hero__container {
grid-template-columns: 1fr;
text-align: center;
}
.hero__title {
font-size: var(--text-4xl);
}
.hero__description {
margin-left: auto;
margin-right: auto;
}
.hero__actions {
justify-content: center;
flex-wrap: wrap;
}
.hero__visual {
order: -1;
}
.hero__image {
max-height: 500px;
left: 0;
}

.floating-card {
display: none;
}
.destinations__grid {
grid-template-columns: 1fr;
}
.destination-card--large {
grid-column: span 1;
grid-row: span 1;
}
.about__container,
.experience__container,
.faq__container,
.cta__container,
.contact__container {
grid-template-columns: 1fr;
gap: var(--space-10);
}
.about__image--secondary {
display: none;
}
.about__stats {
position: relative;
top: auto;
right: auto;
margin-top: var(--space-4);
}
.experience__stat-badge {
position: relative;
top: auto;
right: auto;
margin-top: var(--space-4);
}
.experience__stats {
grid-template-columns: 1fr;
gap: var(--space-4);
}
.testimonials__grid {
grid-template-columns: 1fr;
}
.blog__grid {
grid-template-columns: 1fr;
}
.blog-card--large {
grid-row: span 1;
}
.cta__images {
flex-direction: column;
}
/* ИСПРАВЛЕНА ОШИБКА: добавлены недостающие ; */
.cta__image--1,
.cta__image--2 {
width: 100%;
position: relative;
transform: none;
}
.cta__image--2 {
bottom: auto;
margin-top: var(--space-4);
}
.footer__grid {
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
}
.footer__brand {
grid-column: span 2;
}
.footer__bottom {
flex-direction: column;
gap: var(--space-4);
text-align: center;
}
}
/* Small Mobile */
@media (max-width: 480px) {
.hero__title {
font-size: var(--text-3xl);
}
.section__title {
font-size: var(--text-2xl);
}
.btn--large {
padding: var(--space-3) var(--space-6);
font-size: var(--text-sm);
}
.footer__grid {
grid-template-columns: 1fr;
}
.footer__brand {
grid-column: span 1;
}
}

/* ============================================
PRINT STYLES
============================================ */
@media print {
.header,
.nav__toggle,
.theme-toggle,
.back-to-top,
.scroll-indicator,
.hero__decor,
.floating-card,
.experience__play-btn,
.contact__map {
display: none !important;
}
.hero {
min-height: auto;
padding-top: var(--space-8);
}
.section {
padding: var(--space-8) 0;
}
body {
font-size: 12pt;
line-height: 1.5;
}
a {
text-decoration: underline;
color: #000;
}
.destination-card,
.testimonial-card,
.blog-card {
break-inside: avoid;
}
}
/* ============================================
   GALLERY - 3D CAROUSEL
   ============================================ */

.gallery {
    background: var(--color-bg);
    overflow: hidden;
    padding: var(--space-20) 0;
}

.section__subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    margin-top: var(--space-4);
}

.gallery__carousel {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-8) 0;
}

.gallery__track {
    position: relative;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.gallery__slide {
    position: absolute;
    width: 280px;
    height: 420px;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    transform-style: preserve-3d;
    opacity: 0.5;
    z-index: 1;
}

.gallery__slide--active {
    transform: translateX(0) translateZ(50px) scale(1.2) rotateY(0);
    opacity: 1;
    z-index: 10;
}

.gallery__item {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    background: var(--color-neutral-800);
}

.gallery__image,
.gallery__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.gallery__video--vertical {
    object-fit: contain;
    background: var(--color-neutral-900);
}

.gallery__play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-full);
    color: var(--color-accent);
    transition: all 0.3s ease;
    z-index: 3;
}

.gallery__play-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background: white;
}

.gallery__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-5);
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    z-index: 2;
    transition: opacity 0.3s ease;
}

.gallery__item--video.playing .gallery__overlay {
    opacity: 0;
    pointer-events: none;
}

.gallery__tag {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: white;
    margin-bottom: var(--space-2);
}

.gallery__item-title {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: white;
    margin: 0;
}

/* Navigation */
.gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    color: var(--color-text);
    transition: all 0.3s ease;
    z-index: 20;
    cursor: pointer;
}

.gallery__nav:hover {
    background: var(--color-accent);
    color: white;
    transform: translateY(-50%) scale(1.1);
}

.gallery__nav--prev {
    left: 20px;
}

.gallery__nav--next {
    right: 20px;
}

.gallery__dots {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-12);
}

.gallery__dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--color-border);
    transition: all 0.3s ease;
    cursor: pointer;
}

.gallery__dot--active {
    background: var(--color-accent);
    transform: scale(1.2);
}

.gallery__dot:hover {
    background: var(--color-accent-hover);
}

/* Responsive */
@media (max-width: 1024px) {
    .gallery__track {
        height: 400px;
    }

    .gallery__slide {
        width: 220px;
        height: 330px;
    }
}

@media (max-width: 768px) {
    .gallery__track {
        height: 350px;
    }

    .gallery__slide {
        width: 180px;
        height: 270px;
    }

    .gallery__nav {
        /* width: 40px;
        height: 40px; */
        display: none;
    }

    .gallery__nav--prev {
        /* left: 10px; */
        display: none;
    }
    .gallery__dot {
    width: 8px;
    height: 8px;
    }

    .gallery__nav--next {
        right: 10px;
    }
    .gallery__carousel {
        padding-top: var(--space-32);
    }
}

@media (max-width: 480px) {
    .gallery__track {
        height: 300px;
    }

    .gallery__slide {
        width: 220px;
        height: 400px;
    }
    .gallery__dots {
    margin-top: var(--space-32);
}
}

/* ============================================
PHOTO GALLERY
============================================ */

/* --- Сетка галереи --- */
        .gallery-container {
            display: grid;
            /* Адаптивная сетка: минимальная ширина картинки 250px, заполняет доступное место */
            grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
            max-width: max-content;
            margin: 0 auto;
            padding-top: 2.5rem;
            gap: 1rem;
        }

        /* --- Карточка картинки --- */
        .gallery-item {
            position: relative;
            overflow: hidden;
            /* border-radius: 12px; */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            aspect-ratio: 4/3; /* Соотношение сторон */
            opacity: 0; /* Для анимации появления */
            transform: translateY(30px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease;
        }

	
		.gallery-item.hide {
    		display: none !important;
		}


        /* Класс для активации анимации появления */
        .gallery-item.visible {
            opacity: 1;
            transform: translateY(0);
            border-radius: var(--radius-2xl);
        }

        /* Изображение */
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
            display: block;
        }

        /* --- Эффекты при наведении --- */
        .gallery-item:hover {
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }

        .gallery-item:hover img {
            transform: scale(1.1); /* Плавное увеличение */
        }

        /* Оверлей с иконкой (лупа) при наведении */
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3);
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .gallery-item:hover .overlay {
            opacity: 1;
        }

        .overlay-icon {
            color: white;
            font-size: 2rem;
            font-weight: bold;
            transform: scale(0.8);
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .gallery-item:hover .overlay-icon {
            transform: scale(1);
        }

        /* --- Модальное окно (Lightbox) --- */
        .lightbox {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
            padding: 20px;
        }

        .lightbox.active {
            opacity: 1;
            pointer-events: auto;
        }

        .lightbox img {
            max-width: 90%;
            max-height: 90%;
            border-radius: 8px;
            transform: scale(0.9);
            transition: transform 0.3s ease;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
        }

        .lightbox.active img {
            transform: scale(1);
        }

        .close-btn {
            position: absolute;
            top: 20px;
            right: 30px;
            color: white;
            font-size: 40px;
            cursor: pointer;
            z-index: 1001;
            transition: color 0.3s;
        }

        .close-btn:hover {
            color:var(--color-accent);
        }

		/* Стрелки навигации */
    .prev-btn, .next-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      color: white;
      font-size: 40px;
      cursor: pointer;
      z-index: 1001;
      transition: color 0.3s;
    }

    .prev-btn {
      left: 7rem;
    }

    .next-btn {
      right: 7rem;
    }

    .prev-btn:hover, .next-btn:hover {
      color: var(--color-accent);
    }

        /* --- Адаптивность для очень маленьких экранов --- */
        @media (max-width: 600px) {
            .gallery-container {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                /* gap: 10px; */
            }
        }

        @media (max-width: 900px) {
            .prev-btn, .next-btn {
                display: none;
            }
        }

    .photogallery {
    background: var(--color-bg-secondary);
}

/* ============================================
CLIENTS SECTION — ИСПРАВЛЕНО
============================================ */

.clients-section {
  padding: var(--space-12) 0;
  background: var(--color-bg);
}

.clients-viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: var(--space-10) 0;
  /* Маска для плавного исчезновения по краям */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--edge-fade), black calc(100% - var(--edge-fade)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black var(--edge-fade), black calc(100% - var(--edge-fade)), transparent 100%);
}

.clients-track {
  display: flex;
  animation: scroll var(--speed) linear infinite;
  gap: var(--logo-gap);
  will-change: transform;
}




.logos-strip {
  display: flex;
  align-items: center;
  gap: var(--logo-gap);
  white-space: nowrap;
}

.logos-strip img {
  height: var(--logo-height);
  width: auto;
  object-fit: contain;
  /* filter: saturate(0.9) opacity(0.7); */
  transition: filter 0.4s ease;
  opacity: 0; /* Сначала скрыто */
}

/* При загрузке — плавное появление */
.logos-strip img.loaded {
  opacity: 1;
}

.logos-strip svg {
  fill: var(--color-accent); /* для заполнения */
  stroke: var(--color-accent); /* если есть обводка */
  color: var(--color-accent); /* fallback для currentColor */
}

/* Анимация прокрутки */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - var(--logo-gap) * 0.5));
  }
}

/* Отключение анимации при reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .clients-track {
    animation: none;
  }
}

@media (max-width: 550px) {
    .logos-strip {
        gap: 30px !important;
    }
}

/* ============================================
SHOW SECTION
============================================ */
.show__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-6);
    padding-top: var(--space-8);
}
.show-card__image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: transform var(--transition-slow);
    padding: 25px;
    border-radius: 45px;
}
.show__actions {
    text-align: center;
}
.show {
    padding: var(--space-1) var(--space-6);
    font-size: var(--text-base);
    top: var(--space-3);
}
.show-card {
    background: var(--color-bg);
}
.show-card:hover .show-card__image {
    transform: scale(1.05);
}
.show-btn {
margin-bottom: 32px;
}
.show-title {
    font-size: var(--text-2xl);
    text-align: center;
}
@media (max-width: 767px) {
    .show__grid {
        grid-template-columns: 1fr;
    }
}