* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    max-width: 420px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #0F0F0F;
    color: #FFFFFF;
    line-height: 1.4;
}

h1, h2, h1, p {
	filter: drop-shadow(-2px 2px 2px rgba(0, 0, 0, 1));  /* Тень снизу слева: смещение влево (-6px), вниз (10px), размытие 8px, полупрозрачная чёрная — меняй числа */
	transform: translateZ(0);  /* GPU layer */
    will-change: transform;  /* Подсказка браузеру */
    backface-visibility: hidden;  /* Фикс артефактов на iOS */
}

/* ==================== HERO ==================== */
.hero {
    position: relative;
    height: auto;  /* авто-высота, чтобы не пропадал */
    min-height: 65vh;  /* минимум 2/3 экрана, но растягивается */
    background-image: 
        linear-gradient(to bottom, 
            rgba(15, 15, 15, 0.02) 60%,
            rgba(15, 15, 15, 0.97) 100%),
        url('../images/olga.jpg');
    background-size: cover;
    background-position: center top;
    overflow: visible;  /* ничего не скрывается */
    padding: 60px 20px 160px 20px;
    padding-bottom: calc(160px + env(safe-area-inset-bottom));
}

/* Текст начинается ровно на 60% высоты */
.hero-content {
    position: absolute;
    top: 65%;                            /* ← начало текста на 60% */
    left: 20px;
    right: 20px;
    transform: translateY(-30%);         /* чуть сдвигаем вверх для баланса в 40% зоне */
    text-align: center;
    z-index: 2;
}

.hero-title {
	font-family: 'Old Standard TT', serif;  /* ← новый шрифт для заголовка */
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
    margin-bottom: 5px;
    text-shadow: 0 4px 25px rgba(0,0,0,0.9);
    display: block;
}

.title-main {
    font-size: 36px;                     /* "ОЛЬГА" — не меняем */
}

.title-sub {
    font-size: 24px;                     /* "КОЛДУНЬЯ И ЧЕРНОКНИЖНИЦА" — чуть меньше */
}

.hero-subtitle {
    font-size: 17px;
    line-height: 1.35;
    margin-bottom: 30px;
    opacity: 0.95;
    text-shadow: 0 3px 15px rgba(0,0,0,0.85);
}

/* === КНОПКИ КОНТАКТОВ (5 иконок в ряд) — приоритетная версия === */
.hero-buttons {
    display: flex !important;
    gap: 2px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

.contact-btn {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.custom-icon {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain !important;
    transition: transform 0.3s ease, filter 0.3s ease !important;
}

/* ====================== ПУЛЬСИРУЮЩЕЕ СВЕЧЕНИЕ ====================== */

.whatsapp .custom-icon {
    animation: pulse-whatsapp 2.8s ease-in-out infinite;
    filter: drop-shadow(0 0 8px #25D366);
}

.telegram .custom-icon {
    animation: pulse-telegram 2.8s ease-in-out infinite;
    filter: drop-shadow(0 0 8px #229ED9);
}

.phone .custom-icon {
    animation: pulse-phone 2.8s ease-in-out infinite;
    filter: drop-shadow(0 0 8px #E30613);
}

.vk .custom-icon {
    animation: pulse-vk 2.8s ease-in-out infinite;
    filter: drop-shadow(0 0 8px #fff);
}

.max .custom-icon {
    animation: pulse-max 2.8s ease-in-out infinite;
    filter: drop-shadow(0 0 8px #df73ff);
}

/* Анимации пульсации (мягкие и не огромные) */
@keyframes pulse-whatsapp {
    0%, 100% { filter: drop-shadow(0 0 8px #25D366); }
    50%      { filter: drop-shadow(0 0 18px #25D366); }
}

@keyframes pulse-telegram {
    0%, 100% { filter: drop-shadow(0 0 8px #229ED9); }
    50%      { filter: drop-shadow(0 0 18px #229ED9); }
}

@keyframes pulse-phone {
    0%, 100% { filter: drop-shadow(0 0 8px #E30613); }
    50%      { filter: drop-shadow(0 0 18px #E30613); }
}

@keyframes pulse-vk {
    0%, 100% { filter: drop-shadow(0 0 8px #fff); }
    50%      { filter: drop-shadow(0 0 18px #fff); }
}
@keyframes pulse-max {
    0%, 100% { filter: drop-shadow(0 0 8px #df73ff); }
    50%      { filter: drop-shadow(0 0 18px #df73ff); }
}

/* Hover — чуть сильнее пульсация */
.contact-btn:hover .custom-icon {
    transform: scale(1.12);
}

/* Кастомные иконки в кнопках */
.custom-icon {
    width: 80px;        /* подгони под размер твоих PNG, чтобы было по центру */
    height: 80px;
    object-fit: contain;  /* сохраняет пропорции, без обрезки */
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));  /* тень для объёма, как у старых иконок */
    transition: transform 0.35s ease;  /* анимация как у кнопок */
}

.contact-btn:hover .custom-icon {
    transform: scale(1.12);  /* зум при ховере */
}

/* Модальное окно формы */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.modal-content {
    background: #1A1A1A;
    padding: 30px 25px;
    border-radius: 16px;
    max-width: 380px;
    
	width: 90%;
    text-align: center;
    position: relative;
}


/* Крестик закрытия — строго в правом верхнем углу + большая область нажатия */
.close {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 36px;
    color: #fff;
    cursor: pointer;
    z-index: 100;
    padding: 4px 4px 25px 25px;           /* большая кликабельная область */
    margin: -18px -18px -18px -18px; /* компенсируем, чтобы не сдвигал контент */
    line-height: 1;
    transition: all 0.25s ease;
}

.close:hover {
    color: #ff4d5a;
    transform: scale(1.2);
}

.modal h2 {
    font-size: 26px;
    margin-bottom: 5px;
}

.modal p {
    font-size: 15px;
    opacity: 0.85;
    margin-bottom: 15px;
}

.modal input[type="text"],
.modal input[type="tel"] {
    width: 100%;
    padding: 14px;
    margin-bottom: 15px;
    border-radius: 50px;
    background: #2C2C2C;
    border: none;
    color: #fff;
    font-size: 15px;
}

.modal textarea {
    width: 100%;
    padding: 14px;
    margin-bottom: 15px;
    border-radius: 20px;
    background: #2C2C2C;
    border: none;
    color: #fff;
    font-size: 15px;
    resize: none;
    height: 100px;
}

.checkboxes {
    text-align: left;
    margin-bottom: 10px;
}

.checkboxes label {
    display: block;
    margin-bottom: 10px;
    font-size: 15px;
    opacity: 0.9;
}

.modal button[type="submit"] {
    width: 100%;
    padding: 14px;
    border-radius: 50px;
    background: #E30613;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}

.modal button[type="submit"]:disabled {
    background: #808080;
    cursor: not-allowed;
}

.modal button[type="submit"]:hover:not(:disabled) {
    background: #FF4D5A;
}

.success-message {
    background: #34C759;
    color: #fff;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
    text-align: center;
    animation: fadeIn 0.5s;
}

.error-message {
    background: #E30613;
    color: #fff;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
    text-align: center;
    animation: fadeIn 0.5s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* ==================== СОГЛАСИЕ В ФОРМЕ ==================== */
.form-consent {
	margin-bottom: 12px;
    text-align: center;
    font-size: 12px;
    line-height: 1.4;
    color: #aaa;
    opacity: 0.8;
}

.form-consent small {
    display: block;
}

.form-consent a {
    color: #d4af37;
    text-decoration: underline;
    transition: color 0.3s;
}

.form-consent a:hover {
    color: #fff;
}

/* истории */

.real-stories-mystic {
    padding: 80px 20px 100px;
    background: #0a0a0a;
    text-align: center;
    position: relative;
}

/* Фон леса (ставь своё фото) */
.real-stories-mystic::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        /* Градиент сверху и снизу */
        linear-gradient(to bottom, 
            #0F0F0F 0%, 
            transparent 18%, 
            transparent 82%, 
            #0F0F0F 100%
        ),
        /* Твоя картинка фона */
        url('../images/forest-bg.jpg') center/cover no-repeat;
    opacity: 0.78;
    z-index: -1;
}

.stories-title {
    font-family: 'Old Standard TT', serif;
    font-size: 34px;
    color: #e8d9a0;
    text-shadow: 0 3px 15px rgba(0,0,0,0.9);
    margin-bottom: 10px;
}

.stories-subtitle {
    color: #b8a07a;
    font-size: 16px;
    margin-bottom: 50px;
}

.story-mystic {
    padding: 20px 10px;
    min-height: 460px;
    color: #e8d9a0;
    font-size: 16.2px;
    line-height: 1.55;
	
	
}

.story-part {
    margin-bottom: 35px;
}

.gold-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, #d4af37, transparent);
    margin: 25px 0;
    box-shadow: 0 0 8px #d4af37;
}

.label {
    display: block;
    font-size: 14px;
    color: #d4af37;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-shadow: 0 2px 8px rgba(212, 175, 55, 0.6);
}

.my-story-block {
    position: relative;
    width: 100%;
    max-width: 300px;
    margin: 0px auto 40px;
    cursor: pointer;
}

.story-photo {
    width: 100%;
    height: auto;
    border-radius: 12px;
    filter: 
        drop-shadow(0 0 15px #d4af37)
        drop-shadow(0 0 30px #d4af37)
        drop-shadow(0 0 50px rgba(212, 175, 55, 0.6));
    transition: all 0.4s ease;
}

.story-photo:hover {
    filter: 
        drop-shadow(0 0 25px #fff)
        drop-shadow(0 0 45px #d4af37)
        drop-shadow(0 0 70px #d4af37)
        drop-shadow(0 0 100px rgba(212, 175, 55, 0.9));
    transform: scale(1.03);
}

.story-text {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    color: #f0d9a0;
    font-family: 'Old Standard TT', serif;
    font-size: 20px;
    font-weight: 700;
    text-shadow: 0 0 20px #000;
    pointer-events: none;
    white-space: nowrap;
}

/* Добавь это к твоей кнопке */
.story-photo {
    animation: pulseGlow 3.8s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        filter: 
            drop-shadow(0 0 15px #d4af37)
            drop-shadow(0 0 30px #d4af37)
            drop-shadow(0 0 50px rgba(212, 175, 55, 0.6));
    }
    50% {
        filter: 
            drop-shadow(0 0 28px #fff)
            drop-shadow(0 0 50px #d4af37)
            drop-shadow(0 0 80px rgba(212, 175, 55, 0.85));
    }
}

.story-text {
    text-shadow: 
        0 0 10px #000,
        0 0 20px #d4af37,
        0 0 35px #d4af37,
        0 0 50px rgba(212, 175, 55, 0.9);
}


/* ==================== ПОЛНОЭКРАННЫЙ БЛОК С ФОТО ==================== */
.full-photo-block {
    position: relative;
    width: 100%;
               /* во весь экран по высоте */
    min-height: 650px;
    overflow: hidden;
}

.full-photo-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;       /* фото растягивается без искажений */
    filter: brightness(0.75);
}

.full-photo-text {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 90%;
    max-width: 420px;
    z-index: 2;
}


/* ==================== ТЁМНЫЕ ПЕРЕХОДЫ ==================== */

/* Сверху — сильное затемнение */
.full-photo-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 25%;
    background: linear-gradient(to bottom, 
        rgba(10,10,10,0.92) 0%,
        rgba(10,10,10,0.75) 35%,
        rgba(10,10,10,0.35) 70%,
        transparent 100%);
    z-index: 1;
    pointer-events: none;
}

/* Снизу — очень сильное затемнение */
.full-photo-block::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 25%;
    background: linear-gradient(to top, 
        rgba(10,10,10,0.95) 0%,
        rgba(10,10,10,0.85) 25%,
        rgba(10,10,10,0.55) 55%,
        transparent 100%);
    z-index: 1;
    pointer-events: none;
}


/* ЧЕТЫРЕ ПУТИ */
.paths {
    padding: 40px 0px 50px;
    background: #0F0F0F;
}

.section-header {
    text-align: center;                  /* ← весь хедер по центру */
    margin-bottom: 40px;
}

.magic-label {
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.6;
    margin-bottom: 8px;
}

.paths-title {
    font-family: 'Old Standard TT', serif;  /* ← новый шрифт для заголовка */
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 12px;
}

.paths-subtitle {
    font-size: 16px;
    opacity: 0.85;
	padding: 0 20px 0;
}


/* ==================== СЛАЙДЕР КАРТОЧЕК ==================== */
.cards-swiper {
    padding: 0;
    width: 100%;
    max-width: 420px;  /* чтобы не выходил за лимит сайта */
    margin: 0 auto;    /* по центру */
}

.swiper-slide {
    width: 80% !important;
}

.card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    aspect-ratio: 3/4;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
	-webkit-transform: translateZ(0);
	
	image-rendering: crisp-edges;
    -webkit-image-rendering: crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    transform: translate3d(0,0,0);
}

/* Фото для каждой карточки */
.card-1 { background-image: url('../images/card1.png'); }
.card-2 { background-image: url('../images/card2.png'); }
.card-3 { background-image: url('../images/card3.png'); }
.card-4 { background-image: url('../images/card4.png'); }

/* Эффект глубины */
.swiper-slide:not(.swiper-slide-active) .card {
    transform: scale(0.82);
    opacity: 0.68;
}

.swiper-slide.swiper-slide-active .card {
    transform: scale(1);
    opacity: 1;
}

/* Текст и кнопка */
.card .card-title,
.card .card-text,
.card .card-link {
    font-family: 'Old Standard TT', serif;
	position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    margin: 0 auto;
    max-width: 82%;
    z-index: 2;
}

.card .card-title { top: 20%; font-size: 18px; line-height: 1.08; }
.card .card-text { top: 68%; font-size: 15px; line-height: 1.35; }
.card .card-link { bottom: 13%; font-size: 18px; font-weight: 600; color: #E30613; text-decoration: none; text-shadow: 0 0 12px rgba(227,6,19,0.8); }

/* Пульсирующее свечение кнопки "Обратиться" — раз в 1.2 секунды */
.card-link {
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% {
        text-shadow: 0 0 8px #E30613,
                     0 0 16px #E30613,
                     0 0 24px rgba(227, 6, 19, 0.6);
    }
    50% {
        text-shadow: 0 0 12px #E30613,
                     0 0 28px #E30613,
                     0 0 40px rgba(227, 6, 19, 0.9);
    }
}


/* Расскажите о себе */
.tell-about {
    position: relative;
    padding: 30px 20px 50px;
    background-image: url('../images/background.jpg');  /* твоё фото */
    background-size: cover;
    background-position: center;
    color: #FFFFFF;
    text-align: center;
}

.tell-about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom, 
        rgba(15, 15, 15, 0.95) 0%,   /* тёмно сверху для перехода от Hero */
        rgba(15, 15, 15, 0.1) 30%,   /* прозрачно в центре */
        rgba(15, 15, 15, 0.95) 100%  /* тёмно снизу для перехода к следующему */
    );
    z-index: 1;
}

.tell-about > * {
    position: relative;
    z-index: 2;  /* текст поверх градиента */
}

.tell-title {
    font-family: 'Old Standard TT', serif;
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
	margin: 50px 0 10px;
    
}

.tell-subtitle {
    font-size: 16px;
    opacity: 0.85;
    padding: 0 20px;
}

.btn-red {
    background: #E30613;
    color: #FFF;
    padding: 14px 32px;
	margin: 10px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    max-width: 300px;

}

/* Процесс: три шага к переменам */
.process {
    position: relative;
    padding: 40px 20px 50px;
    overflow: hidden;  /* Чтобы видео не вылазило */
    color: #FFF;
    text-align: left;
}

.process-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;  /* Под всем контентом */
    pointer-events: none;
}

.process-content {
	position: relative;
    z-index: 1;  /* Текст над видео */
}

.process::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(15, 15, 15, 0.1) 30%, rgba(15, 15, 15, 0.95) 100%);
    z-index: -1;  /* Градиент поверх видео, под текстом */
}

.process .magic-label {
	text-align: center;
}

.process-title {
    font-family: 'Old Standard TT', serif;
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 40px;
    text-align: center;
}

.steps {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.step {
    display: flex;
    gap: 20px;
    position: relative;
}


.step-icon {
    flex-shrink: 0;
    width: 80px;  /* Размер контейнера для иконки — меняй здесь */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
	z-index: 2;  /* Иконка поверх линии */
	
}

.step-icon img {
    width: 100% !important;  /* Заполняет контейнер — меняй на 80% для уменьшения */
    height: auto !important;
    object-fit: contain;  /* Не растягивает, сохраняет пропорции */
    left: 0;  /* Положение по горизонтали — меняй */
    top: 0;   /* Положение по вертикали — меняй */
}

.step-content h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
	text-shadow: 0 3px 15px rgba(0,0,0,0.9);
}

.step-content p {
    font-size: 15px;
    opacity: 0.85;
}


/* ==================== ЧИСТЫЙ CSS СЛАЙДЕР ==================== */
.gallery-section {
    padding: 30px 20px 10px;
    background: #0a0a0a;
    text-align: center;
}

.gallery-title {
    font-family: 'Old Standard TT', serif;
    font-size: 28px;
    color: #d4af37;
    margin-bottom: 8px;
}

.gallery-subtitle {
    color: #b8a07a;
    font-size: 16px;
    margin-bottom: 35px;
}

.css-slider {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;           /* скрываем скроллбар */
    padding: 10px 0 20px;
}

.css-slider::-webkit-scrollbar {
    display: none;
}

.slides {
    display: flex;
    gap: 15px;
    padding: 0 20px;
}

.slides img {
    scroll-snap-align: center;
    min-width: 82%;                  /* сколько фото видно одновременно */
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.75);
    filter: brightness(0.95);
    transition: all 0.4s ease;
}

.slides img:hover {
    filter: brightness(1.05);
    transform: scale(1.03);
}


/* ==================== БЛОК СТОИМОСТЬ УСЛУГ ==================== */
.price-block {
    padding: 50px 20px 60px;
    background-image: url('../images/price-bg.png');  /* твоё фото */
	background-size: cover; /* растягивает фото на весь экран */
    background-position: center; /* центрирует */
    background-repeat: no-repeat; /* не повторяется */
    background-attachment: fixed; /* фиксированный фон при скролле */
    text-align: center;
}

.price-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;  /* высота затенения сверху — подгони */
    background: linear-gradient(to bottom, #0a0a0a, transparent);
    z-index: 1;
    pointer-events: none;
}

.price-block::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;  /* высота затенения снизу — подгони */
    background: linear-gradient(to top, #312f32, transparent);
    z-index: 1;
    pointer-events: none;
}

.price-container {
    max-width: 380px;
    margin: 0 auto;
    padding: 35px 25px;
    border: 1px solid #d4af37;
    border-radius: 8px;
    background: rgba(15, 15, 20, 0.6);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.15);
}

.price-title {
    font-family: 'Old Standard TT', serif;
    font-size: 26px;
    color: #d4af37;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.price-text {
    font-size: 15.5px;
    line-height: 1.55;
    color: #e5e5e5;
    margin-bottom: 20px;
    text-align: left;
}
.price-text .coast {
	color: #d4af37;
	font-size: 17px
}

.price-highlight {
    font-size: 15.5px;
    line-height: 1.55;
    color: #d4af37;
    font-weight: 600;
    margin: 25px 0;
    text-align: left;
    padding-left: 5px;
    border-left: 3px solid #d4af37;
}

/* ==================== ВЫБЕРИТЕ ВАШУ ПОТРЕБНОСТЬ ==================== */
.needs {
    padding: 40px 20px 100px;           /* увеличил отступ снизу для плавного затухания */
    background-image: url('../images/4path.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    text-align: center;
    overflow: hidden;
}

/* Плавный уход в темноту только снизу */
.needs::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 160px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(10,10,10,0.4) 30%,
        rgba(10,10,10,0.85) 80%,
        #0a0a0a 100%
    );
    z-index: 2;
    pointer-events: none;
}

.needs-title {
    font-family: 'Old Standard TT', serif;
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 20px;
}

.needs-cards {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.need-card {
 
    border-radius: 16px;

    text-align: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.need-card:hover {
    transform: scale(1.02);
}

.need-photo {
    width: 100%;
    height: auto;
    border-radius: 8px;
	filter: drop-shadow(-10px 10px 8px rgba(0, 0, 0, 1));  /* Тень снизу слева: смещение влево (-6px), вниз (10px), размытие 8px, полупрозрачная чёрная — меняй числа */
	transform: translateZ(0);  /* GPU layer */
    will-change: transform;  /* Подсказка браузеру */
    backface-visibility: hidden;  /* Фикс артефактов на iOS */
}

.need-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
	text-shadow: 0 3px 15px rgba(0,0,0,0.9);
}

.need-text {
   	font-size: 15px;
    opacity: 0.85;
	margin-bottom: 8px;
}


/* ====================== MODAL — ТОЛЬКО ОДИН АКТИВНЫЙ СЛАЙД ====================== */
.needs-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.88);
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.needs-modal-content.glass {
    background: rgba(15, 15, 20, 0.68);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 24px;
    max-width: 380px;
    width: 92%;
    height: 90%;
    padding: 35px 25px 45px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.75);
    
    background-image: url('../images/gold.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Дополнительный слой для читаемости */
.needs-modal-content.glass::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 24px;
    z-index: -1;
}






/* Контент слайда */
.detail-slide {
    text-align: center;
    padding: 10px 0;
}

.detail-text {
	 margin-top:5px;
	font-size: 16px;
}

.detail-photo {
    width: 100%;
    height: auto;
    border-radius: 18px;
    margin-bottom: 15px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.6);
}



.detail-link {
	text-shadow: 0 1px 6px rgba(255,255,255,0.9);
    color: #E30613;
    font-weight: 600;
    text-decoration: none;
    font-size: 16.5px;
}

/* ====================== ЦВЕТОВЫЕ ОВЕРЛЕИ ДЛЯ КАЖДОЙ МОДАЛКИ ====================== */

.love-modal .needs-modal-content.glass::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(227, 6, 19, 0.20);     /* насыщенный красный */
    border-radius: 24px;
    z-index: 1;
    pointer-events: none;
}

.curse-modal .needs-modal-content.glass::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(100, 255, 100, 0.20);    /* глубокий фиолетовый */
    border-radius: 24px;
    z-index: 1;
    pointer-events: none;
}

.future-modal .needs-modal-content.glass::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 255, 0.20);   /* тёплый золотой */
    border-radius: 24px;
    z-index: 1;
    pointer-events: none;
}

.salvation-modal .needs-modal-content.glass::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(96, 165, 250, 0.20);   /* холодный синий */
    border-radius: 24px;
    z-index: 1;
    pointer-events: none;
}


/* Чтобы текст и контент были поверх оверлея */
.love-modal .needs-modal-content *,
.curse-modal .needs-modal-content *,
.future-modal .needs-modal-content *,
.salvation-modal .needs-modal-content * {
    position: relative;
    z-index: 2;
}

/* ====================== КНОПКИ В МОДАЛКАХ ====================== */
.modal-buttons {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-main {
    background: #E30613;
    color: #fff;
    border: none;
    padding: 16px 20px;
    border-radius: 50px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-main:hover {
    background: #ff4d5a;
    transform: scale(1.03);
}

.btn-back {
    background: transparent;
    color: #aaa;
    border: 2px solid #555;
    padding: 5px 10px;
	margin: 10px ;
    border-radius: 50px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-back:hover {
    color: #fff;
    border-color: #888;
}

/* ====================== ТЕНИ ДЛЯ ТЕКСТА В МОДАЛКАХ ====================== */
.needs-modal-content h3 {
    text-shadow: 
        0 3px 12px rgba(0,0,0,0.85),  /* тёмная тень для глубины */
        0 0 8px rgba(212,175,55,0.45); /* лёгкий золотистый ореол */
}

.needs-modal-content .detail-text {
    text-shadow: 
        0 2px 8px rgba(0,0,0,0.75),   /* основная тень */
        0 0 5px rgba(212,175,55,0.35); /* золотистый оттенок */
}

/* ====================== ЛЁГКОЕ ЗАТЕМНЕНИЕ ФОНА ====================== */
.needs-modal-content.glass::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);  /* чёрный оверлей 18% — можно поменять на 0.25 для сильнее */
    border-radius: 24px;
    z-index: 1;
    pointer-events: none;
}

#needsModal .needs-detail-swiper {
    overflow: hidden !important;
}

#needsModal .needs-detail-swiper .swiper-slide {
    opacity: 0 !important;
    transition: opacity 0.4s ease;
}

#needsModal .needs-detail-swiper .swiper-slide-active {
    opacity: 1 !important;
}




/* ==================== РЕЗУЛЬТАТ (PNG-версия) ==================== */
.results {
    padding: 25px 20px 20px;
    background-color: #0a0a0a;           /* только цвет */
    background-image: url('../images/result-back.png');
    background-size: cover;              /* ← главное исправление */
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.results::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(168, 85, 247, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.08) 0%, transparent 50%);
    z-index: 0;
}

.results-wrapper {
    position: relative;
    z-index: 1;
    max-width: 420px;
    margin: 0 auto;
}

.magic-label { font-size: 15px; text-transform: uppercase; letter-spacing: 3.5px; opacity: 0.75; margin-bottom: 10px; display: block; }

.results-title {
    font-family: 'Old Standard TT', serif;
    font-size: 31px;
    line-height: 1.05;
    text-transform: uppercase;
    margin-bottom: 25px;
    color: #fff;
    text-shadow: 0 4px 25px rgba(0,0,0,0.95);
}

.highlight { color: #c026d3; font-size: 38px; text-shadow: 0 0 25px rgba(192, 38, 211, 0.7); }

/* Список */
.results-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.result-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    width: 100%;
}

/* PNG-иконки (первые три) */
.result-icon {
    flex-shrink: 0;
    height: 100px;
	width: auto;
    object-fit: contain;
	filter: drop-shadow(0 0 20px #a45f85);
}

/* СПЕЦИАЛЬНЫЙ БЛОК С КАСТОМНОЙ PNG-РАМКОЙ */
.special {
    width: 100%;
}

.special-card {
    position: relative;
    width: 100%;
    height: 170px; /* подгони под размер своей PNG-рамки */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dragon-png {
    position: absolute;
    left: 18px;
    top: 25px;
    width: 120px;
    height: auto;
    filter: drop-shadow(0 0 35px #a45f85);
}

.text-side {
    position: absolute;
    right: 26px;
    top: 48px;
    text-align: left;
    max-width: 180px;
}

.text-side h3 {
    font-family: 'Old Standard TT', serif;
    font-size: 22px;
	line-height: 1.05;
    text-transform: uppercase;
    color: #fcd34d;
    text-shadow: 0 3px 12px rgba(0,0,0,0.9);
	margin-top:4px;
}

.text-side p {
    font-size: 15.6px;
    line-height: 1.45;
    color: #e5e5e5;
}


/* ==================== ГОЛОСА СУДЕБ ==================== */
.voices {
    padding: 60px 20px 50px;
    background: #0a0a0a;
    text-align: center;
}

.voices-title { font-family: 'Old Standard TT', serif; font-size: 31px; text-transform: uppercase; margin-bottom: 10px; }
.voices-subtitle { font-size: 16px; opacity: 0.85; margin-bottom: 40px; }

.voice-card {
    background: #1a1a1a;
    border-radius: 18px;
    padding: 32px 24px 28px;
    width: 280px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.quote {
    font-size: 16.5px;
    line-height: 1.52;
    color: #e5e5e5;
    text-align: center;
    flex: 1;
}

.client-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 10px;
}

.avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    background: #2c2c2c;
    border: 3px solid #444;
    flex-shrink: 0;
}

.female { color: #f472b6; }   /* розовый для девушек */
.male   { color: #60a5fa; }   /* голубой для мужчин */

.client-info h4 {
    font-size: 18.5px;
    margin-bottom: 2px;
    color: #f5e8c7;
}

.client-info p {
    font-size: 14px;
    opacity: 0.8;
}

/* ==================== ВИДЕО БЛОК (стабильная версия) ==================== */

.video-container {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.7);
}

.video-preview {
    position: relative;
    cursor: pointer;
}

.video-preview-img {
    width: 100%;
    display: block;
    border-radius: 18px;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 82px;
    height: 82px;
    background: #E30613;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 40px rgba(227,6,19,0.85);
    z-index: 10;
}

.play-button::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 22px solid #fff;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    margin-left: 4px;
}

.video-player video {
    width: 100%;
    display: block;
    border-radius: 18px;
}

/* ==================== ПРЕИМУЩЕСТВА ==================== */

/* Фото между панелями — затенение со всех 4 сторон */
.photo-between {
	
    position: relative;
    display: inline-block;
    overflow: hidden;
    max-width: 350px;
    margin: 0 auto;
}

/* Одно общее затемнение по всем краям */
.photo-between::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: 
        /* Сверху */
        linear-gradient(to bottom, #0a0a0a, transparent) 0 0 / 100% 80px no-repeat,
        /* Снизу */
        linear-gradient(to top, #0a0a0a, transparent) 0 100% / 100% 80px no-repeat,
        /* Слева */
        linear-gradient(to right, #0a0a0a, transparent) 0 0 / 80px 100% no-repeat,
        /* Справа */
        linear-gradient(to left, #0a0a0a, transparent) 100% 0 / 80px 100% no-repeat;
}

.between-photo {
	text-align: center;
    width: 100%;
    display: block;
    position: relative;
    z-index: 1;
    transition: all 0.4s ease;
}


.advantages-simple {
    padding: 70px 20px 40px;
    background: #0a0a0a;
}

.advantages-title {
    font-family: 'Old Standard TT', serif;
    font-size: 31px;
    line-height: 1.1;
    text-transform: uppercase;
    margin-bottom: 14px;
	text-align: center;
}

.gothic-panel {
    font-family: 'Old Standard TT', serif;
	max-width: 380px;
    margin: 0 auto 0px;
    background-size: 100% 100%;
    background-position: center;
    padding: 170px 30px;
    border-radius: 0; /* без скруглений, как просил */
}

.top-panel {
    padding-bottom: 50px;
    text-align: center;
}

.top-panel h2 {
    font-family: 'Old Standard TT', serif;
    font-size: 29px;
    line-height: 1.1;
    color: #f0d9a0;
	margin: 0px 16px 10px ;

}

.top-panel p {
	font-size: 15.8px;
    color: #fff;
    line-height: 1.48;
	margin: 15px 16px 10px ;
}


.custom-btn {
    width: 100%;
    max-width: 300px;
    height: 58px;                    /* подгони под высоту своей PNG */
    background: url('../images/button.png') no-repeat center / contain;
    border: none;
    color: #faf;                  /* цвет текста */
    font-family: 'Old Standard TT', serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin: 20px auto 0;
    display: block;
    transition: all 0.3s;
}

.custom-btn:hover {
    filter: brightness(1.15);
    transform: scale(1.03);
}

/* Нижняя панель */
.bottom-panel {
    padding: 55px 25px 45px;
}

.adv-list {
    margin-top: 45px;
}

.adv-item {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}

.adv-icon {
    margin-left: 30px;
	width: 90px;
    height: 90px;
}

.adv-item h3 {
    font-size: 22px;
    color: #e8d9b0;
    margin: 0;
	text-shadow: 
        0 5px 20px rgba(0, 0, 0, 0.98) !important,
        0 0 15px rgba(212, 175, 55, 0.8) !important;
}

/* Пергамент */

.parchment p {
	padding: 0px 25px 0px;
	text-align: center;
    z-index: 2;
    font-size: 15px;
    color: #fff;
    line-height: 1.5;
	
}



/* ==================== CTA БЛОК ==================== */
.cta-section {
    padding: 70px 20px 90px;
    background: #0a0a0a;
    text-align: center;
	
	position: relative;
	overflow: hidden;
}

.cta-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none; /* нельзя взаимодействовать */
}

.cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 10, 0.1); /* затемнение видео */
    z-index: 2;
}

.cta-card {
	position: relative;
	z-index: 3;
    background: rgba(10, 10, 10, 0.8); /* затемнение видео */
    border-radius: 28px;
    padding: 52px 30px 48px;
    max-width: 340px;
    margin: 0 auto;
    box-shadow: 0 15px 45px rgba(0,0,0,0.65);
}

.cta-title {
    font-family: 'Old Standard TT', serif;
    font-size: 29px;
    line-height: 1.15;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 22px;
}

.cta-text {
    font-size: 16.5px;
    line-height: 1.45;
    color: #e5e5e5;
    margin-bottom: 38px;
    opacity: 0.95;
}

.cta-buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-red {
    background: #E30613;
    color: #fff;
    border: none;
    padding: 16px 34px;
    border-radius: 50px;
    font-size: 16.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-red:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(227, 6, 19, 0.6);
}

.btn-outline {
    background: transparent;
    color: #fff;
    border: 2px solid #777;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 16.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-outline:hover {
    border-color: #E30613;
    color: #E30613;
}

/* ==================== FOOTER ==================== */
.footer {
    background: #0a0a0a;
    padding: 70px 20px 50px;
    text-align: center;
    border-top: 1px solid #222;
}

.footer-content {
    max-width: 420px;
    margin: 0 auto;
}

.footer-title {
    font-family: 'Old Standard TT', serif;
    font-size: 29px;
    line-height: 1.15;
    text-transform: uppercase;
    margin-bottom: 18px;
    color: #fff;
}

.footer-subtitle {
    font-size: 16px;
    line-height: 1.45;
    opacity: 0.85;
    margin-bottom: 10px;
}

.footer-buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.footer-btn {
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 16.5px;
    font-weight: 600;
    width: 160px;
}

/* Навигация */
.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 50px;
	margin-top: 20px;
}

.footer-nav a {
    color: #ccc;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s;
}

.footer-nav a:hover {
    color: #E30613;
}

/* Лого */
.footer-logo {
    font-family: 'Old Standard TT', serif;
    font-size: 32px;
    font-style: italic;
    color: #fff;
    margin-bottom: 40px;
    opacity: 0.9;
}

/* Соцсети */
.footer-social {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 40px;
}

.footer-social a {
    color: #888;
    font-size: 22px;
    transition: all 0.3s;
}

.footer-social a:hover {
    color: #E30613;
    transform: translateY(-3px);
}

/* Копирайт */
.footer-copyright {
    font-size: 13.5px;
    opacity: 0.6;
    color: #aaa;
}



/* ====================== ЗАПРЕТ ВЫДЕЛЕНИЯ ТЕКСТА НА МОБИЛЬНЫХ ====================== */
/* Отключаем выделение и меню копирования по всему сайту */
body * {
    -webkit-user-select: none !important;     /* Safari / iOS */
    -moz-user-select: none !important;        /* Firefox */
    -ms-user-select: none !important;         /* IE / Edge */
    user-select: none !important;             /* Современные браузеры */
    -webkit-touch-callout: none !important;   /* Отключает iOS callout-меню */
    -khtml-user-select: none !important;
}

/* РАЗРЕШАЕМ выделение ТОЛЬКО в форме (чтобы человек мог писать имя и телефон) */
.modal input,
.modal textarea,
.modal button,
#contactForm * {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default !important;
}

/* Дополнительно убираем голубую подсветку при тапе на Android/iOS */
* {
    -webkit-tap-highlight-color: transparent !important;
}


/* ====================== ПЛАВНОЕ ПОЯВЛЕНИЕ БЛОКОВ ====================== */
section {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Ускоряем для первых блоков */
.hero,
.paths,
.tell-about {
    transition-delay: 0.1s;
}

/* ИСПРАВЛЕНИЕ НАСЛОЕНИЯ НА КНОПКИ HERO */
.hero {
    position: relative;
    z-index: 10;
}

.hero-buttons {
    position: relative;
    z-index: 100;           /* Очень высокий приоритет */
}

.real-stories-simple {
    position: relative;
    z-index: 1;
}


/* ====================== ПЛАВАЮЩИЙ ТУМАН ====================== */
.magic-mist {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background: radial-gradient(circle at 50% 30%, rgba(168, 85, 247, 0.08) 0%, transparent 60%);
}

/* Слой 1 - медленный туман */
.magic-mist::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, 
        transparent 20%,
        rgba(212, 175, 55, 0.06) 40%,
        rgba(168, 85, 247, 0.07) 60%,
        transparent 80%);
    animation: mistMove1 85s linear infinite;
}

/* Слой 2 - средний туман */
.magic-mist::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, 
        transparent 30%,
        rgba(168, 85, 247, 0.05) 50%,
        rgba(212, 175, 55, 0.04) 70%,
        transparent 90%);
    animation: mistMove2 110s linear infinite;
}

/* Анимации */
@keyframes mistMove1 {
    0%   { transform: translateY(0) translateX(0); }
    100% { transform: translateY(-40%) translateX(15%); }
}

@keyframes mistMove2 {
    0%   { transform: translateY(0) translateX(0); }
    100% { transform: translateY(-25%) translateX(-20%); }
}


/* Запрет на копирование изображений */
img {
    -webkit-user-select: none;     /* Chrome, Safari */
    -moz-user-select: none;        /* Firefox */
    -ms-user-select: none;         /* Internet Explorer/Edge */
    user-select: none;
    pointer-events: none;          /* отключает клики и контекстное меню на изображениях */
    -webkit-touch-callout: none;   /* iOS: отключает меню "Сохранить изображение" при долгом нажатии */
}