:root {
    --bg-primary: #050202;
    --bg-secondary: #0a0808;
    --text-main: #9c8e87;
    --text-bright: #e3d5ca;
    --accent-red: #9c473a;
    --accent-gold: #c2b4ab;
    --header-blur: rgba(5, 2, 2, 0.7);
    --transition-speed: 0.3s;
}

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

html {
    scroll-behavior: smooth;
    /* Відступ зверху при скролі, щоб шапка не перекривала заголовок секції */
    scroll-padding-top: 160px;
}

@media (max-width: 1024px) {
    html {
        scroll-padding-top: 80px;
    }
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: #0b0606;
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Шапка з новим симетричним розташуванням навколо логотипу */
.site-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 25px 5%;
    position: fixed; /* Змінюємо на fixed, щоб шапка завжди була доступна і плавно змінювала стан */
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    /* Тепер фон та розмиття присутні завжди */
    background-color: var(--header-blur);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(156, 142, 135, 0.15);
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease, padding 0.3s ease;
}

/* Кнопка бургера (тільки для мобільних) */
.mobile-menu-toggle {
    display: none;
}

@media (max-width: 1024px) {
    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        position: absolute;
        left: 20px;
        background: none;
        border: none;
        color: var(--accent-gold);
        cursor: pointer;
        padding: 10px;
    }

    .mobile-menu-text {
        font-size: 8px;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 400;
        animation: menuTextPulse 2s ease-in-out infinite;
        display: inline-block;
    }

    /* Зупиняємо анімацію, коли меню відкрите */
    .mobile-menu-toggle.active .mobile-menu-text {
        animation: none;
        opacity: 1;
    }

    @keyframes menuTextPulse {
        0%, 100% { opacity: 0.7; transform: scale(1); }
        50% { opacity: 1; transform: scale(1.1); color: #fff; }
    }
}

.site-header.scrolled {
    padding-top: 15px; /* Немного уменьшим отступ сверху при скролле */
    padding-bottom: 15px; /* Немного уменьшим отступ снизу при скролле */
    border-bottom-color: var(--accent-gold);
}

.nav-links {
    display: flex;
    gap: clamp(15px, 3.5vw, 45px); /* Відступи між посиланнями також адаптуються */
}

.nav-links a {
    color: #8c7d74;
    text-decoration: none;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--text-bright);
    text-shadow: 0 0 15px rgba(156, 71, 58, 0.6);
}

.nav-links a.active {
    color: var(--accent-gold);
    text-shadow: 0 0 10px rgba(194, 180, 171, 0.3);
}

.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden; /* Щоб відблиск не виходив за межі лого */
    border-radius: 50%; /* Робимо контейнер круглим під стать логотипу */
    transition: filter 0.4s ease;
    animation: periodicPulse 10s ease-in-out infinite;
}

.logo-container:hover {
    /* Додаємо золотисте світіння самому контейнеру */
    filter: drop-shadow(0 0 15px rgba(194, 180, 171, 0.8));
    animation-play-state: paused;
}

.logo-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    );
    transform: skewX(-25deg);
    pointer-events: none;
}

.logo-container:hover::after {
    /* Запускаємо анімацію відблиску при наведенні */
    animation: logoGlint 0.8s ease-in-out forwards;
}

.site-logo {
    height: clamp(45px, 6vw, 70px);
    width: auto;
    display: block;
    opacity: 0;
    animation: logoAppear 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.site-logo:hover {
    transform: scale(1.08);
    filter: brightness(1.1); /* Трохи підсвічуємо сам малюнок */
}

@keyframes logoAppear {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes logoGlint {
    0% { left: -150%; }
    100% { left: 150%; }
}

@keyframes periodicPulse {
    0%, 90%, 100% {
        filter: drop-shadow(0 0 0 rgba(194, 180, 171, 0));
    }
    95% {
        filter: drop-shadow(0 0 20px rgba(194, 180, 171, 0.6));
    }
}

.header-socials {
    position: absolute;
    right: 5%;
    display: flex;
    gap: 20px;
    align-items: center;
}

.header-socials a {
    color: #8c7d74;
    transition: color 0.3s;
    display: inline-flex;
}

.header-socials a:hover {
    color: #bfae9e;
}

/* Секція з інтегрованим фоном оксамиту та карт */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    padding-top: 120px;
    overflow: hidden; /* Гарантуємо, що дим не виходитиме за межі секції */
    
    /* Підключення твого зображення на фон */
    background-image: url('background.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Затемнення та м'який градієнт поверх картинки, щоб текст залишався читабельним */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(5, 2, 2, 0.3) 0%, rgba(5, 2, 2, 0.5) 40%, rgba(5, 2, 2, 1) 100%); /* Починаємо плавний перехід у колір фону набагато раніше */
    z-index: 1;
}

/* --- ШАРИ АНІМОВАНОГО ДИМУ --- */
.smoke-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%; /* Ширше за екран для безперервного руху */
    height: 100%;
    z-index: 2;
    pointer-events: none; /* Щоб крізь дим можна було клікати на кнопки */
    background-size: 1000px 100%; /* Менший розмір для повторення тонких струменів */
    background-repeat: repeat;
    mix-blend-mode: screen; /* Додає ефект світіння диму */
    filter: brightness(1.2) contrast(1.2); 
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    will-change: transform;
}

.smoke-1 {
    /* Вузькі вертикальні еліпси для ефекту цівок диму */
    background-image: 
        radial-gradient(ellipse 20px 500px at 15% 80%, rgba(255, 255, 255, 0.15) 0%, transparent 70%),
        radial-gradient(ellipse 15px 400px at 65% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
    animation: smokeMovement 40s linear infinite;
    opacity: 0.5;
    filter: blur(8px); /* Набагато менше розмиття для чіткості цівок */
}

.smoke-2 {
    background-image: 
        radial-gradient(ellipse 25px 600px at 40% 100%, rgba(255, 255, 255, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 10px 300px at 90% 100%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
    animation: smokeMovementReverse 38s linear infinite;
    opacity: 0.4;
    filter: blur(12px);
}

.smoke-3 {
    background-image: 
        radial-gradient(ellipse 40px 700px at 10% 100%, rgba(255, 255, 255, 0.08) 0%, transparent 75%),
        radial-gradient(ellipse 30px 500px at 75% 100%, rgba(255, 255, 255, 0.05) 0%, transparent 65%);
    animation: smokeMovement 55s linear infinite;
    filter: blur(20px); 
    opacity: 0.3;
}

.hero-container {
    max-width: 1260px;
    width: 100%;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 5vw, 60px); /* Гарантований відступ між текстом і книгою */
    position: relative;
    z-index: 5; /* Піднімаємо контент над димом і затемненням фону */
}

.hero-text-block {
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.author-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 8px;
    text-transform: uppercase;
    background: linear-gradient(to right, #a69386, #e3d5ca, #a69386);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #a69386;
    display: block;
    margin-bottom: 15px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.main-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(48px, 10vw, 84px);
    font-weight: 400;
    letter-spacing: 6px;
    color: #e3d5ca;
    line-height: 1;
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(227, 213, 202, 0.3), 
                 0 0 20px rgba(227, 213, 202, 0.15), 
                 0 4px 15px rgba(0,0,0,0.9);
}

.vignette {
    margin-bottom: 35px;
    opacity: 0.8;
    width: 100%;
    display: flex;
    justify-content: center;
}

.vignette svg {
    display: block;
}

.tagline {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 21px;
    line-height: 1.5;
    color: #c2b4ab;
    letter-spacing: 0.5px;
    margin-bottom: 45px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.9);
}

.cta-button {
    display: inline-block;
    padding: 14px 32px;
    border: 1px solid #542b23;
    background-color: rgba(19, 7, 6, 0.85);
    color: #c2b4ab;
    text-decoration: none;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    transition: all 0.4s ease;
    animation: btnPulse 10s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.cta-button .arrow {
    display: inline-block;
    margin-left: 8px;
    transition: transform 0.3s;
}

.cta-button:hover {
    border-color: var(--accent-red);
    color: #e3d5ca;
    background-color: rgba(36, 12, 10, 0.95);
    box-shadow: 0 0 20px rgba(156, 71, 58, 0.2);
    animation-play-state: paused;
}

.mobile-order-btn {
    display: none; /* Сховано на десктопі за замовчуванням */
}

.cta-button:hover .arrow {
    transform: translateX(4px);
}

.cta-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%
    );
    transform: skewX(-25deg);
    pointer-events: none;
}

.cta-button:hover::after {
    animation: logoGlint 0.8s ease-in-out forwards;
}

@keyframes btnPulse {
    0%, 90%, 100% {
        box-shadow: 0 10px 25px rgba(0,0,0,0.5);
        border-color: #542b23;
    }
    95% {
        box-shadow: 0 0 25px rgba(156, 71, 58, 0.5);
        border-color: var(--accent-red);
    }
}

.bottom-vignette {
    margin-top: 60px;
    margin-bottom: 25px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.features-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.feature-card {
    text-align: center;
}

.feature-icon {
    fill: none;
    margin: 0 auto 12px auto;
    stroke: #805c54;
    stroke-width: 1.2;
    margin-bottom: 12px;
    display: block;
}

.feature-card h3 {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height: 1.6;
    color: #a3938a;
    font-weight: 400;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.hero-image-block {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    perspective: 2000px; /* Додаємо глибину простору для 3D ефектів */
}

.book-scene {
    position: relative;
    max-width: 480px; /* Зменшуємо розмір, щоб книга виглядала гармонійно і не тиснула */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none;
    will-change: auto;
}

.vignette-shadow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 70%;
    background: radial-gradient(circle, rgba(156, 71, 58, 0.4) 0%, transparent 75%);
    filter: blur(60px);
    z-index: -1;
    mix-blend-mode: screen;
    animation: glowPulse 6s ease-in-out infinite;
    pointer-events: none;
    will-change: transform, opacity;
}

.main-book-mockup {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Гарантує, що книга впишеться в контейнер без спотворень */
    display: block;
    filter: drop-shadow(25px 25px 40px rgba(0,0,0,0.8));
    transform: none;
    transition: opacity 0.4s ease;
    animation: none;
    will-change: opacity;
    /* Покращуємо чіткість при масштабуванні */
    image-rendering: -webkit-optimize-contrast;
}

.main-book-mockup.open-book {
    position: absolute;
    top: -20%; /* Піднімаємо книгу вгору, щоб компенсувати порожній простір у PNG */
    left: 0;
    /* Використовуємо transform для кращої підтримки та уникнення конфліктів */
    transform: scale(1.5);
    opacity: 0;
    pointer-events: none; /* Щоб не заважала взаємодії, поки прихована */
    transition: opacity 0.4s ease, scale 0.4s ease;
}

/* Ефект при наведенні на всю сцену */
.book-scene:hover .main-book-mockup {
    transform: none;
    filter: drop-shadow(20px 25px 40px rgba(0,0,0,0.8));
}

.book-scene:hover .open-book {
    transform: scale(1.55);
    opacity: 1;
}

.book-scene:hover .closed-book {
    opacity: 0;
}

/* Анімація плавного погойдування */
@keyframes bookFloat {
    0%, 100% { 
        transform: rotateY(-18deg) rotateX(5deg) rotateZ(-1deg) translateY(0); 
    }
    50% { 
        transform: rotateY(-14deg) rotateX(8deg) rotateZ(0deg) translateY(-20px); 
    }
}

@keyframes glowPulse {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -45%) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translate(-50%, -55%) scale(1.4);
    }
}

/* --- ЗАГАЛЬНІ СТИЛІ ДЛЯ СЕКЦІЙ --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.content-section {
    padding: 100px 0;
    position: relative;
}

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

.section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 42px;
    color: var(--text-bright);
    margin-bottom: 40px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: text-shadow var(--transition-speed) ease, color var(--transition-speed) ease;
    cursor: default;
}

.section-title:hover {
    color: #fff;
    text-shadow: 0 0 15px rgba(227, 213, 202, 0.4), 0 0 30px rgba(156, 71, 58, 0.2);
}

.section-title.active {
    color: var(--accent-gold); /* Золотий колір тексту */
    text-shadow: 0 0 10px var(--accent-gold), /* М'яке золоте світіння */
                 0 0 20px rgba(194, 180, 171, 0.4); /* Ширше, розсіяне світіння */
}

.section-title.centered {
    text-align: center;
}

/* --- ЗАГАЛЬНИЙ ФОН ДЛЯ РОЗДІЛІВ (КНИГА, АВТОР, ВІДГУКИ) --- */
.main-content-bg {
    background-image: url('new-fone.png');
    background-size: 100% 100%;
    background-position: top center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.main-content-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(5, 2, 2, 1) 0%, rgba(5, 2, 2, 0.4) 30%, rgba(5, 2, 2, 0.75) 60%, rgba(5, 2, 2, 0.75) 100%); /* Плавна поява зображення new-fone.png розтягнута на половину секції */
    /* Поєднуємо чорну віньєтку з червоним відтінком троянд */
    box-shadow: 
        inset 0 0 200px rgba(0, 0, 0, 0.7), 
        inset 0 0 100px rgba(156, 71, 58, 0.15); 
    z-index: 1; /* Переміщуємо ПІД контент */
    pointer-events: none; /* Щоб можна було клікати крізь неї */
    transition: box-shadow 0.6s ease;
    animation: vignetteRedPulse 15s ease-in-out infinite;
    will-change: box-shadow;
}

/* Посилюємо віньєтку та червоний відтінок, коли користувач фокусується на відгуках */
.main-content-bg:has(.review-card:hover)::before {
    box-shadow: 
        inset 0 0 300px rgba(0, 0, 0, 0.8), 
        inset 0 0 150px rgba(156, 71, 58, 0.35);
    animation-play-state: paused;
}

.main-content-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    backdrop-filter: blur(2px); /* Тепер блюриться тільки те, що ПІД цим шаром (фотографія) */
    -webkit-backdrop-filter: blur(2px);
    opacity: 0.04;
    pointer-events: none;
    z-index: 1;
}

#about-section {
    position: relative;
    padding-top: 120px;
    overflow: hidden;
    z-index: 2; /* Контент залишається під віньєткою (z-index 5) */
}

/* Стильний роздільник між секціями */
.section-divider {
    width: 100%;
    height: 120px; /* Збільшуємо висоту зони роздільника для "більшого" переходу */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent; /* Робимо фон роздільника прозорим */
    position: relative;
    z-index: 10;
    margin-top: -60px; /* Центруємо роздільник на стику */
    margin-bottom: 20px;
}

.section-divider svg {
    width: 80%;
    max-width: 1200px;
    height: 20px;
}

/* Кастомна анімація для роздільника: розширення з центру */
.section-divider.reveal {
    transform: scaleX(0.1) translateY(10px);
    opacity: 0;
    filter: blur(5px);
    transition: transform 1.8s cubic-bezier(0.2, 1, 0.3, 1), opacity 1.5s ease, filter 1.5s ease;
}

.section-divider.reveal.active {
    transform: scaleX(1) translateY(0);
    opacity: 1;
    filter: blur(0);
}

/* Анімація пульсації для центральної точки роздільника */
@keyframes pulseDot {
    0% {
        transform: scale(1);
        opacity: 0.5;
        fill: rgba(156, 71, 58, 0.5);
    }
    50% {
        transform: scale(1.4);
        opacity: 0.9;
        fill: rgba(200, 90, 70, 0.9); /* Яскравіший, більш непрозорий червоний */
    }
    100% {
        transform: scale(1);
        opacity: 0.5;
        fill: rgba(156, 71, 58, 0.5);
    }
}

/* Анімація пульсації для зовнішнього кільця роздільника */
@keyframes pulseRing {
    0% {
        transform: scale(1);
        stroke-opacity: 0.2;
        stroke-width: 1;
    }
    50% {
        transform: scale(1.2);
        stroke-opacity: 0.4;
        stroke-width: 1.5;
    }
    100% {
        transform: scale(1);
        stroke-opacity: 0.2;
        stroke-width: 1;
    }
}

.section-divider.active #divider-center-dot {
    animation: pulseDot 2s ease-in-out infinite;
    transform-origin: center center; /* Забезпечуємо масштабування від центру */
    will-change: transform, opacity, fill;
}

.section-divider.active #divider-outer-ring {
    animation: pulseRing 2s ease-in-out infinite;
    transform-origin: center center;
    will-change: transform, stroke-opacity, stroke-width;
}

#about-section .container {
    position: relative;
    z-index: 2;
}

#about-book, #about-author, #reviews, #contacts {
    /* Додатковий відступ для точного приземлення скролу на заголовки */
    scroll-margin-top: 160px;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: stretch;
}

.about-content {
    background: rgba(10, 8, 8, 0.6);
    padding: 50px;
    border-radius: 4px;
    border: 1px solid rgba(156, 142, 135, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.description {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 20px;
    color: #bfae9e;
}

.age-badge {
    display: inline-block;
    padding: 5px 15px;
    border: 1px solid #542b23;
    color: #9c473a;
    border-radius: 50px;
    font-weight: bold;
    margin-top: 20px;
}

.about-content .description:first-of-type {
    font-size: 17px; /* Slightly larger font for the intro */
    color: var(--text-bright); /* Brighter color */
    margin-bottom: 30px; /* More space below it */
}

.about-author {
    background: rgba(10, 8, 8, 0.6);
    padding: 50px;
    /* border-left: 1px solid #542b23; */ /* Removed for card effect */
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center; /* Center all content inside */
    border: 1px solid rgba(156, 142, 135, 0.1); /* Add a subtle border around the card */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* --- ДЕКОРАТИВНІ КУТИ --- */
.corner-ornament {
    position: absolute;
    width: 35px;
    height: 35px;
    pointer-events: none;
    z-index: 5;
    opacity: 0.3;
    transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
    animation: cornerVibrate 15s ease-in-out infinite;
    will-change: opacity, filter;
    /* SVG орнамент: вигнутий кут з крапкою */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M0 40 V10 C0 0 0 0 10 0 H40' fill='none' stroke='%23c2b4ab' stroke-width='1.5'/%3E%3Ccircle cx='3' cy='3' r='2.5' fill='%23c2b4ab'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.about-content:hover .corner-ornament,
.about-author:hover .corner-ornament {
    opacity: 0.8;
    transform: scale(1.1);
    animation-play-state: paused; /* Зупиняємо вібрацію при наведенні для чіткості */
}

.corner-ornament.top-left {
    top: 15px;
    left: 15px;
}

.corner-ornament.top-right {
    top: 15px;
    right: 15px;
    transform: rotate(90deg);
}

.about-content:hover .corner-ornament.top-right,
.about-author:hover .corner-ornament.top-right {
    transform: rotate(90deg) scale(1.1);
}

.corner-ornament.bottom-left {
    bottom: 15px;
    left: 15px;
    transform: rotate(-90deg);
}

.about-content:hover .corner-ornament.bottom-left,
.about-author:hover .corner-ornament.bottom-left {
    transform: rotate(-90deg) scale(1.1);
}

.corner-ornament.bottom-right {
    bottom: 15px;
    right: 15px;
    transform: rotate(180deg);
}

.about-content:hover .corner-ornament.bottom-right,
.about-author:hover .corner-ornament.bottom-right {
    transform: rotate(180deg) scale(1.1);
}

.author-photo {
    width: 120px; /* Size of the photo */
    height: 120px;
    border-radius: 50%; /* Make it round */
    object-fit: cover; /* Ensure image covers the area */
    margin-bottom: 25px; /* Space below the photo */
    border: 3px solid var(--accent-red); /* A subtle accent border */
    box-shadow: 0 0 15px rgba(156, 71, 58, 0.4); /* Glow effect for the photo */
    filter: grayscale(50%) brightness(90%); /* Subtle effect to match theme */
    transition: filter 0.3s ease;
}

.author-photo:hover {
    filter: grayscale(0%) brightness(100%); /* Full color on hover */
}

.about-author p {
    font-size: 15px;
    font-style: italic;
    margin-bottom: 15px;
    line-height: 1.6;
}

.about-author .section-title {
    margin-bottom: 25px; /* Adjust margin for title */
}

/* --- ВІДГУКИ --- */
#reviews {
    position: relative;
    z-index: 2;
    background: transparent;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.review-card {
    background: linear-gradient(145deg, rgba(20, 15, 15, 0.9), rgba(10, 8, 8, 0.8));
    padding: 50px 40px 40px;
    border: 1px solid rgba(194, 180, 171, 0.15); /* Чітка рамка для виділення на фоні */
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    backdrop-filter: blur(15px); /* Локальне розмиття саме під карткою для чіткості тексту */
    -webkit-backdrop-filter: blur(15px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.review-card::before {
    content: "“";
    position: absolute;
    top: 5px;
    left: 15px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 100px;
    color: var(--accent-red);
    opacity: 0.2; /* Трохи яскравіші лапки для декору */
    line-height: 1;
}

/* Кастомна анімація появи саме для карток відгуків */
.reviews-grid .review-card.reveal {
    opacity: 0;
    transform: translateY(60px) scale(0.9) rotate(-1deg);
    filter: blur(8px);
    transition: opacity 1.2s cubic-bezier(0.2, 1, 0.3, 1), 
                transform 1.2s cubic-bezier(0.2, 1, 0.3, 1),
                filter 1.2s cubic-bezier(0.2, 1, 0.3, 1);
}

.reviews-grid .review-card.reveal.active {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0);
}

.review-card:hover {
    transform: translateY(-8px);
    background-color: rgba(25, 20, 20, 0.95);
    border-color: rgba(156, 71, 58, 0.4); /* Червоний акцент при наведенні */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(156, 71, 58, 0.1);
}

.review-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 19px;
    line-height: 1.6;
    margin-bottom: 30px;
    font-style: italic;
    color: var(--text-bright); /* Максимальна яскравість для читабельності */
    position: relative;
    z-index: 1;
    letter-spacing: 0.2px;
}

.review-author {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--accent-red); /* Використовуємо червоний акцент для імені */
    font-weight: 400;
    opacity: 0.8;
}

.review-divider {
    margin-top: 35px;
    width: 100%;
    display: flex;
    justify-content: center;
    color: var(--accent-gold);
    opacity: 0.4;
    transition: opacity 0.4s ease;
}

.review-card:hover .review-divider {
    opacity: 0.8;
}

.review-divider svg {
    width: 120px;
    height: 24px;
    transition: transform 0.4s ease;
}

.review-card:hover .review-divider svg {
    /* Запускаємо анімацію "руху письма" при наведенні на картку */
    animation: featherWriting 3s ease-in-out infinite;
}

@keyframes featherWriting {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-2px) rotate(-1deg); }
    75% { transform: translateX(2px) rotate(1deg); }
}

.review-divider path {
    /* Створюємо ефект невидимого шляху з м'якими краями пера */
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    stroke-linecap: round;
}

.review-card.active .review-divider path {
    /* Запускаємо анімацію малювання при появі картки */
    /* Додаємо другу анімацію мерехтіння, яка почнеться після завершення першої (0.8s затримка + 1.8s малювання = 2.6s) */
    animation: 
        drawDivider 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.8s forwards,
        shimmerGolden 3s ease-in-out 2.6s infinite;
    will-change: stroke-dashoffset, opacity, filter;
}

@keyframes drawDivider {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes shimmerGolden {
    0%, 100% {
        opacity: 0.4;
        filter: drop-shadow(0 0 0px var(--accent-gold));
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 4px var(--accent-gold));
    }
}

/* Фонове перо для розділу відгуків */
#reviews::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-25deg); /* Більш природний "літературний" нахил */
    width: 60%; /* Робимо його більш витягнутим та елегантним */
    height: 130%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2 C40 20 35 50 38 75 C42 92 48 98 50 100 C52 98 58 92 62 75 C65 50 60 20 50 2' fill='none' stroke='%23c2b4ab' stroke-width='0.5' opacity='0.8'/%3E%3Cpath d='M50 10 L50 95' fill='none' stroke='%23c2b4ab' stroke-width='0.5'/%3E%3Cpath d='M50 25 Q38 35 40 65 M50 45 Q38 55 42 85 M50 35 Q62 45 60 75 M50 55 Q62 65 58 90' fill='none' stroke='%23c2b4ab' stroke-width='0.3' opacity='0.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.08; /* Збільшено видимість пера */
    pointer-events: none; /* Щоб не блокувати взаємодію з картками */
    z-index: 0; /* Розміщуємо під вмістом розділу */
}

/* Фонова троянда для розділу контактів */
#contacts::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -5%;
    transform: translateY(-50%) rotate(10deg);
    width: 600px;
    height: 600px;
    /* Оновлений SVG для більш чіткої форми квітки */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 50 C50 40 60 40 60 50 C60 65 40 65 40 50 C40 30 70 30 70 50 C70 75 30 75 30 50 C30 20 80 20 80 50' fill='none' stroke='%239c473a' stroke-width='0.5'/%3E%3Cpath d='M50 70 Q45 85 50 95' fill='none' stroke='%239c473a' stroke-width='0.4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0; /* Початкова прозорість - 0 */
    pointer-events: none;
    z-index: 0;
    transition: opacity 1.5s ease; /* Плавний перехід */
}

#contacts.active::before {
    opacity: 0.18; /* З'являється, коли секція стає активною */
}

#contacts {
    overflow: hidden; /* Щоб перо або троянда не створювали прокрутку */
}

/* --- КОНТАКТИ --- */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.email-link {
    color: var(--text-bright);
    font-size: 20px;
    text-decoration: none;
    margin: 20px 0;
    display: block;
}

.social-columns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;
}

.social-col {
    color: #8c7d74;
    text-decoration: none;
    transition: color 0.3s;
}

.social-col:hover { color: #fff; }

.form-group {
    margin-bottom: 20px;
}

.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 15px;
    background: #0a0808;
    border: 1px solid #2a1a15;
    color: #fff;
    font-family: inherit;
    transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease, background-color var(--transition-speed) ease;
    outline: none;
}

.contact-form input:focus, 
.contact-form textarea:focus {
    border-color: var(--accent-red);
    box-shadow: 0 0 15px rgba(156, 71, 58, 0.2);
    background-color: #0d0a0a;
}

/* СЛУЖБОВИЙ КЛАС ДЛЯ ACCESSIBILITY */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* --- АНІМАЦІЯ ПОЯВИ ПРИ СКРОЛІ --- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(4px); /* Зменшуємо блюр анімації, щоб текст не "зникав" повністю */
    transition: opacity 1.2s cubic-bezier(0.2, 1, 0.3, 1), 
                transform 1.2s cubic-bezier(0.2, 1, 0.3, 1),
                filter 1.2s cubic-bezier(0.2, 1, 0.3, 1);
    will-change: opacity, transform, filter;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Ефект затримки для карток відгуків, щоб вони з'являлися по черзі */
.reviews-grid .review-card:nth-child(1) { transition-delay: 0.1s; }
.reviews-grid .review-card:nth-child(2) { transition-delay: 0.2s; }
.reviews-grid .review-card:nth-child(3) { transition-delay: 0.3s; }
.reviews-grid .review-card:nth-child(4) { transition-delay: 0.4s; }

/* Додаткова затримка для форми, щоб вона з'являлася трохи пізніше за текст поруч */
.contact-form.reveal { transition-delay: 0.2s; }


/* --- АНІМАЦІЇ ДЛЯ РУХУ ДИМУ --- */
@keyframes smokeMovement {
    0% {
        transform: translate3d(0, 0, 0) skewX(0deg);
    }
    100% {
        transform: translate3d(-50%, -30px, 0) skewX(5deg); /* Додаємо підйом вгору та легкий нахил */
    }
}

/* Налаштування для Dark Mode (True Black) */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #000000;
        --bg-secondary: #050505;
        --text-main: #bfae9e;
        --text-bright: #f1e9e2;
        --accent-red: #b04c3d;
        --header-blur: rgba(0, 0, 0, 0.85);
    }
}

@keyframes smokeMovementReverse {
    0% {
        transform: translate3d(-50%, 0, 0) skewX(0deg);
    }
    100% {
        transform: translate3d(0, -40px, 0) skewX(-5deg); /* Рух у зворотний бік з іншим нахилом */
    }
}

/* Проміжний етап для планшетів, щоб уникнути накладання соцсетей на меню */
@media (max-width: 1200px) {
    .header-socials {
        display: none; /* Можна приховати або перемістити соцмережі, якщо вони заважають меню */
    }

    .main-title {
        font-size: clamp(42px, 8vw, 64px); /* Більш агресивне зменшення для мобільних */
        letter-spacing: 4px;
    }

    .hero-container {
        gap: 30px;
        padding: 0 30px;
    }

    .book-scene {
        max-width: 400px; /* Адаптивне зменшення для планшетів */
    }
}

/* МОБІЛЬНА АДАПТАЦІЯ */
@media (max-width: 1024px) {
    .desktop-only { display: none; }
    
    /* Сховуємо зайві секції */
    .sections-container .content-section {
        display: none !important;
    }

    .site-header {
        justify-content: center;
        padding: 15px 5%;
        min-height: 70px;
    }

    .nav-links { display: none !important; }
    
    .header-socials {
        position: absolute;
        right: 20px;
        display: flex !important;
        gap: 15px;
    }

    .hero-container {
        flex-direction: column !important; /* Текст -> Книга */
        padding-top: 100px;
        gap: 40px;
    }

    .hero-text-block {
        max-width: 100%;
        order: 1;
    }

    .hero-image-block {
        order: 2;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .book-scene {
        max-width: 280px;
        margin: 0 auto;
        cursor: pointer;
        transition: transform 0.4s ease;
    }

    /* Книга відкривається/закривається */
    .book-scene.is-open .open-book {
        opacity: 1;
        transform: scale(1.5); /* Повертаємо масштаб до базового стану open-book */
    }
    .book-scene.is-open .closed-book {
        opacity: 0;
    }

    /* Discovery Menu */
    .discovery-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: 
            radial-gradient(circle at center, transparent 20%, rgba(0, 0, 0, 0.5) 100%),
            linear-gradient(180deg, #0f0a0a 0%, #050202 100%);
        z-index: 3000;
        display: flex;
        flex-direction: column;
        overflow-y: auto; /* Дозволяємо прокрутку, якщо кнопки не влазять */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0.4s ease;
    }

    .discovery-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .discovery-header {
        display: flex;
        justify-content: space-between;
        padding: 30px 25px;
        align-items: center;
        border-bottom: 1px solid rgba(194, 180, 171, 0.1);
    }

    .close-discovery {
        font-size: 40px;
        color: var(--text-bright);
        cursor: pointer;
        font-weight: 200;
        transition: transform 0.3s ease;
    }

    .close-discovery:active {
        transform: rotate(90deg) scale(1.2);
        color: var(--accent-red);
    }

    .discovery-links {
        display: flex;
        flex-direction: column;
        padding: 40px 25px;
        align-items: center;
        flex-grow: 1;
        justify-content: center;
        gap: 0; /* Використовуємо межі кнопок замість gap */
    }

    .discovery-links button {
        background: transparent;
        border: none;
        border-bottom: 1px solid rgba(194, 180, 171, 0.1);
        color: var(--text-bright);
        padding: 25px 10px;
        width: 100%;
        max-width: 320px;
        text-transform: uppercase;
        letter-spacing: 4px;
        font-size: 18px;
        font-family: 'Cormorant Garamond', serif;
        font-style: italic;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.3s ease;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Додаємо елегантну стрілочку до кожної кнопки */
    .discovery-links button::after {
        content: '→';
        font-family: 'Inter', sans-serif;
        font-style: normal;
        font-size: 14px;
        color: var(--accent-red);
        opacity: 0.6;
        transition: transform 0.3s ease;
    }

    /* Анімація появи кнопок по черзі */
    .discovery-overlay.active .discovery-links button {
        /* Поєднуємо анімацію появи з нескінченним мерехтінням */
        animation: menuSlideUp 0.6s cubic-bezier(0.2, 1, 0.3, 1) forwards, shimmerBtn 4s ease-in-out infinite;
    }

    .discovery-overlay.active .discovery-links button:nth-child(1) { animation-delay: 0.1s; }
    .discovery-overlay.active .discovery-links button:nth-child(2) { animation-delay: 0.2s; }
    .discovery-overlay.active .discovery-links button:nth-child(3) { animation-delay: 0.3s; }
    .discovery-overlay.active .discovery-links button:nth-child(4) { animation-delay: 0.4s; }
    .discovery-overlay.active .discovery-links button:nth-child(5) { animation-delay: 0.5s; }

    .discovery-links button:active {
        background-color: rgba(156, 71, 58, 0.05);
        padding-left: 20px;
        border-bottom-color: var(--accent-red);
    }
    
    .discovery-links button:active::after {
        transform: translateX(5px);
        opacity: 1;
    }

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

    @keyframes shimmerBtn {
        0%, 100% {
            text-shadow: 0 0 0px transparent;
        }
        50% {
            text-shadow: 0 0 15px rgba(194, 180, 171, 0.4);
            color: #fff;
        }
    }

    /* Footer Mobile - Left/Right split */
    .footer-container {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
        padding: 0 20px !important;
        text-align: left !important;
    }
    .footer-main { align-items: flex-start !important; }
    .footer-links { flex-direction: column; align-items: flex-start; gap: 10px; }
    .footer-sep { display: none; }
    .developer-block { align-items: flex-end !important; }
    .developer-link { flex-direction: row !important; gap: 10px !important; }

        /* Оптимізація стандартних модальних вікон (Оферта та Конфіденційність) */
        .modal:not(.section-modal) .modal-content {
            width: 95% !important;
            margin: 20px auto !important;
            padding: 40px 20px 30px !important;
            max-height: calc(100vh - 40px) !important;
        }

        .modal:not(.section-modal) .section-title {
            font-size: 24px !important;
            margin-bottom: 20px !important;
            padding-right: 30px; /* Місце для хрестика */
        }

        .modal:not(.section-modal) .modal-body p {
            font-size: 14px !important;
            line-height: 1.6 !important;
            margin-bottom: 12px !important;
            color: var(--text-bright); /* Трохи яскравіше для кращої контрастності */
        }

        .modal:not(.section-modal) .close-modal {
            top: 10px;
            right: 15px;
        }

    /* Стилізація модальних вікон контенту (мобільна версія) */
    .section-modal .modal-content {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        max-height: 100vh !important;
        overflow-y: auto;
        background: linear-gradient(180deg, #0a0808 0%, #050202 100%);
        padding: 0 !important;
        border: none !important;
        scrollbar-width: thin;
        scrollbar-color: var(--accent-red) transparent;
    }

    .section-modal .modal-content::-webkit-scrollbar {
        width: 3px;
    }

    .section-modal .modal-content::-webkit-scrollbar-thumb {
        background-color: var(--accent-red);
    }

    /* Уніфікована шапка для всіх мобільних вікон (Discovery та Content) */
    .discovery-header,
    .modal-header {
        display: flex !important;
        justify-content: flex-end; /* Зсуваємо все праворуч */
        align-items: center;
        padding: 10px 15px !important;
        background: var(--header-blur) !important;
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border-bottom: 1px solid rgba(194, 180, 171, 0.1);
        position: sticky;
        top: 0;
        z-index: 1001;
        min-height: 70px;
        gap: 20px; /* Відступ між кнопками */
    }

    .modal-logo, .discovery-logo {
        margin-right: auto; /* Виштовхуємо логотип ліворуч */
        order: 1; /* Перший візуально */
        height: 40px !important;
    }

    .discovery-header div:first-child {
        display: none; /* Прибираємо порожній блок, який заважає в Discovery Menu */
    }

    .close-discovery {
        font-size: 32px !important;
        color: var(--accent-gold);
        background: none;
        border: none;
        cursor: pointer;
    }

    /* Загальний стиль кнопок навігації в модалках */
    .modal-nav-btn {
        background: none;
        border: none;
        color: var(--accent-gold);
        display: flex !important;
        align-items: center;
        gap: 4px;
        font-size: 10px !important; /* Трохи більший шрифт для зручності */
        padding: 10px 0;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        cursor: pointer;
        white-space: nowrap;
        order: 2; /* Стане після логотипу, але перед кнопкою "Головна" */
        position: static !important; /* Скасовуємо абсолютне позиціювання .close-modal */
        width: auto !important;
    }

    .modal-back-btn {
        min-width: auto;
        order: 2;
    }

    .close-modal-header {
        order: 3; /* Остання кнопка праворуч */
        margin-left: 0;
    }

    .modal-nav-btn svg {
        width: 14px;
        height: 14px;
    }

    .discovery-logo, .modal-logo {
        height: 45px !important;
        width: auto;
        margin: 0 auto;
        display: block !important;
    }

    .discovery-brand, .modal-title-text {
        display: none !important; /* Ховаємо текст, залишаємо тільки лого для чистоти */
    }

    /* Приховуємо фото автора та орнаменти в контенті, як було домовлено раніше */
    .modal-inner-content .author-photo,
    .modal-inner-content .corner-ornament {
        display: none !important;
    }

    .modal-inner-content {
        padding: 40px 25px 80px;
        color: #bfae9e;
    }

    .modal-inner-content .section-title {
        font-size: 26px !important;
        text-align: left !important;
        margin-bottom: 30px !important;
        color: var(--text-bright) !important;
        border-left: 2px solid var(--accent-red);
        padding-left: 20px;
        letter-spacing: 1px;
    }

    .modal-inner-content p, 
    .modal-inner-content .description {
        font-size: 16px !important;
        line-height: 1.8 !important;
        margin-bottom: 20px !important;
        opacity: 0.9;
    }

    /* Робимо копійовані елементи видимими всередині модалки */
    .section-modal .reveal {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    /* Адаптація розділу контактів */
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .email-link {
        font-size: 18px;
        word-break: break-all; /* Запобігає виходу довгої пошти за межі екрану */
    }

    .social-columns {
        align-items: center;
    }

    #contacts::before {
        width: 300px; /* Зменшуємо фонову троянду на мобільних */
        height: 300px;
        right: -10%;
    }
}

/* --- ПІДВАЛ (FOOTER) --- */
.site-footer {
    padding: 40px 0 30px;
    background-color: var(--bg-primary);
    border-top: 1px solid rgba(156, 142, 135, 0.05);
}

.footer-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    text-align: left;
}

.footer-main {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.footer-links {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.footer-links a {
    color: #8c7d74;
    text-decoration: none;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.footer-links a:hover {
    color: var(--text-bright);
    text-shadow: 0 0 10px rgba(194, 180, 171, 0.7);
}

.footer-sep {
    color: rgba(140, 125, 116, 0.3);
    font-size: 12px;
}

.copyright {
    font-size: 12px;
    color: #5c524d;
    letter-spacing: 0.5px;
}

/* Блок розробника */
.developer-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.dev-text {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #5c524d;
}

.developer-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.developer-link:hover {
    transform: translateY(-3px);
}

.dev-letter {
    font-size: 24px;
    font-weight: 700;
    font-style: italic;
    background: linear-gradient(135deg, #3776ab, #ffd343);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Новий підхід: фіксований розмір контейнера з Flexbox для центрування */
    display: flex; /* Змінюємо на flex для центрування */
    align-items: center; /* Центруємо по вертикалі */
    justify-content: center; /* Центруємо по горизонталі */
    width: 32px; /* Фіксована ширина, як у оригінального лого */
    height: 36px; /* Трохи збільшена висота, щоб верх/низ не різало */
    overflow: visible; /* Дозволяємо частинам літери виходити за межі, якщо потрібно */
}

.dev-name {
    color: var(--text-bright);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
}

@media (max-width: 1024px) {
    .footer-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        text-align: left;
        padding: 0 20px;
        gap: 10px;
    }

    .footer-main {
        align-items: flex-start;
    }

    .developer-block {
        align-items: flex-end;
    }
    .developer-link {
        flex-direction: column;
    }
}

/* --- МОДАЛЬНІ ВІКНА --- */
.modal {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    z-index: 4000; /* Піднімаємо вище за discovery-overlay (3000) */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Юридичні модалки повинні бути поверх усього, навіть вікна покупки */
#modal-offer, 
#modal-privacy {
    z-index: 10001 !important;
}

/* Анімація появи юридичних модалок згори */
#modal-offer .modal-content,
#modal-privacy .modal-content {
    transform: translateY(-100px); /* Початкова точка зміщена значно вище */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

#modal-offer.active .modal-content,
#modal-privacy.active .modal-content {
    transform: translateY(0);
}

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

.modal-content {
    background-color: var(--bg-secondary);
    margin: 10vh auto;
    padding: 50px 40px;
    border: 1px solid rgba(156, 142, 135, 0.1);
    width: 90%;
    max-width: 700px;
    position: relative;
    border-radius: 4px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    transform: translateY(-20px) scale(0.98);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal.active .modal-content {
    transform: translateY(0) scale(1);
}

.close-modal {
    color: var(--text-bright);
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 30px;
    cursor: pointer;
    transition: color 0.3s;
}

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

.modal-body {
    overflow-y: auto;
    padding-right: 10px;
    margin-top: 20px;
}

.modal-body p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-main);
    margin-bottom: 15px;
}

@keyframes vignetteRedPulse {
    0%, 85%, 100% {
        box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.7), inset 0 0 100px rgba(156, 71, 58, 0.15);
    }
    92% {
        box-shadow: inset 0 0 250px rgba(0, 0, 0, 0.75), inset 0 0 180px rgba(156, 71, 58, 0.3);
    }
}

@keyframes cornerVibrate {
    0%, 85%, 100% {
        opacity: 0.3;
        filter: brightness(1) drop-shadow(0 0 0 transparent);
    }
    89%, 91%, 93%, 95% {
        opacity: 0.7;
        filter: brightness(1.3) drop-shadow(1px 1px 2px var(--accent-gold));
    }
    90%, 92%, 94% {
        opacity: 0.9;
        filter: brightness(1.6) drop-shadow(-1px -1px 4px var(--accent-gold));
    }
}

/* --- ПОВНЕ ВИПРАВЛЕННЯ ВІКНА ПОКУПКИ #BUY (EDGE-TO-EDGE) --- */

#buy.section-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: #0b0606 !important;
    z-index: 9999 !important; 
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#buy .modal-content {
    width: 100% !important;
    min-height: 100% !important; /* Змінюємо висоту на мінімальну */
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
    transition: none !important;
}

#buy .modal-inner-content {
    width: 100% !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important; /* Примусово видаляємо відступи від .section-modal на мобільному */
    border: none !important;
}

@media (min-width: 1025px) {
    #buy .modal-header {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 80px;
        background: rgba(10, 8, 8, 0.6) !important;
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border-bottom: 1px solid rgba(194, 180, 171, 0.1);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 40px;
        z-index: 100;
    }

    #buy .modal-inner-content {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Рівно 50/50 */
    }

    /* Ліва колонка */
    .purchase-visual.desktop-only {
        display: flex;
        position: relative;
        background: radial-gradient(circle at center, #1a0f0e 0%, #050202 100%);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-right: 1px solid rgba(194, 180, 171, 0.1);
        height: 100vh;
    }

    /* Права колонка */
    .purchase-app {
        padding: 0 12% !important;
        background: #080606;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100vh;
    }

    #buy .modal-logo {
        height: 45px;
        width: auto;
        cursor: pointer;
        transition: transform 0.3s ease, filter 0.3s ease;
    }

    #buy .modal-logo:hover {
        transform: scale(1.05);
        filter: brightness(1.2);
    }

    #buy .modal-nav-btn {
        position: static !important;
        color: var(--accent-gold);
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 11px;
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
    }
}

/* --- СТИЛІЗАЦІЯ БЛОКУ ЗГОДИ ТА ЧЕКБОКСА --- */
.agreement-section {
    margin-bottom: 30px;
    position: relative;
    z-index: 10;
}

.checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    position: relative;
    color: var(--text-main);
}

.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    height: 18px;
    width: 18px;
    border: 1px solid var(--accent-gold);
    background-color: transparent;
    display: inline-block;
    flex-shrink: 0;
    position: relative;
    margin-top: 2px;
    transition: all 0.3s ease;
}

.checkbox-container input:checked ~ .checkmark {
    background-color: rgba(156, 71, 58, 0.2);
    border-color: var(--accent-red);
}

.checkmark::after {
    content: "✓";
    position: absolute;
    display: none;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--accent-gold);
    font-size: 12px;
}

.checkbox-container input:checked ~ .checkmark::after {
    display: block;
}

.label-text {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-main);
}

/* ВИПРАВЛЕННЯ СИНІХ ПОСИЛАНЬ ТА КЛІКАБЕЛЬНОСТІ */
#buy .label-text a {
    color: var(--accent-gold) !important; /* Золотий колір замість системного синього */
    text-decoration: underline !important;
    position: relative;
    z-index: 20;
    pointer-events: all !important;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    display: inline-block;
}

#buy .label-text a:hover {
    color: #fff !important;
    text-shadow: 0 0 12px rgba(194, 180, 171, 0.8);
}

/* СЛУЖБОВИЙ КЛАС ДЛЯ ПРИХОВУВАННЯ ЕЛЕМЕНТІВ */
.hidden {
    display: none !important;
}

/* Анімації та інші стилі форми */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes floatBook {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-25px) rotate(1deg); }
}

@keyframes glowAmbient {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

.purchase-step {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    width: 100%;
    max-width: 420px; 
    box-sizing: border-box !important;
}

.purchase-step.step-active {
    display: block;
    opacity: 1;
}

.purchase-book-preview {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    align-items: center;
}

@media (min-width: 1025px) {
    .purchase-book-preview { display: none !important; }
}

.purchase-book-img {
    width: 70px; /* Зменшуємо книгу на мобільних */
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
}

.purchase-book-info h3 {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-red);
    margin-bottom: 4px;
}

.purchase-book-info h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px; /* Менший заголовок */
    color: var(--text-bright);
    margin-bottom: 8px;
}

.purchase-subtitle {
    font-size: 12px;
    color: var(--text-main);
    line-height: 1.4;
}

.purchase-form-group {
    margin-bottom: 25px;
}

.purchase-form-group label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-gold);
    margin-bottom: 10px;
}

.purchase-form-group input {
    width: 100%;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(194, 180, 171, 0.2) !important;
    padding: 15px 0 !important;
    color: #fff !important;
    font-size: 16px !important; /* 16px запобігає авто-зуму в iOS Safari */
    border-radius: 0 !important;
}

.purchase-form-group input:focus {
    border-bottom-color: var(--accent-gold) !important;
    outline: none;
}

.purchase-error-msg {
    color: var(--accent-red);
    font-size: 12px;
    margin-top: 8px;
    display: none;
}

#purchase-email-group.error .purchase-error-msg { display: block; }
#purchase-email-group.error input { border-bottom-color: var(--accent-red) !important; }

.promo-link {
    background: none;
    border: none;
    color: var(--text-main);
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
    margin-bottom: 15px;
    padding: 0;
}

.promo-success-msg {
    color: #4CAF50;
    font-size: 12px;
    margin-top: 10px;
}

.checkout-summary {
    padding: 20px; /* Зменшуємо внутрішній відступ чека */
    background: rgba(194, 180, 171, 0.03);
    border: 1px solid rgba(194, 180, 171, 0.1);
    margin-bottom: 30px;
}

.price-display-wrapper {
    display: flex;
    align-items: baseline;
    gap: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.price-current { font-size: 28px; color: var(--text-bright); font-family: 'Cormorant Garamond', serif; }
.price-old { text-decoration: line-through; color: #5c524d; font-size: 18px; display: none; }
.price-old.active { display: inline; }

.checkout-details { font-size: 12px; color: #8c7d74; font-style: italic; }

.purchase-btn {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    letter-spacing: 3px;
    background: var(--accent-red);
    border: none;
    color: white;
    cursor: pointer;
    transition: all 0.4s ease;
}

.btn-loader {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    display: none;
    animation: spin 0.8s linear infinite;
}

.btn-loading .btn-text { display: none; }
.btn-loading .btn-loader { display: block; }

.visual-book {
    width: 55%;
    max-width: 420px;
    z-index: 2;
    filter: drop-shadow(40px 40px 60px rgba(0,0,0,0.9));
    animation: floatBook 6s ease-in-out infinite;
}

.visual-glow {
    position: absolute;
    width: 70%;
    height: 70%;
    background: radial-gradient(circle, rgba(156, 71, 58, 0.15) 0%, transparent 70%);
    filter: blur(100px);
    z-index: 1;
    animation: glowAmbient 8s ease-in-out infinite;
}

.visual-info {
    margin-top: 40px;
    text-align: center;
    z-index: 2;
}

.visual-tag {
    font-size: 10px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--accent-red);
    display: block;
    margin-bottom: 10px;
}

.visual-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 48px;
    color: var(--text-bright);
    letter-spacing: 8px;
    margin-bottom: 5px;
}

.visual-author {
    font-size: 14px;
    letter-spacing: 3px;
    color: #8c7d74;
}

@media (max-width: 1024px) {
    /* Оптимізація вікна покупки для мобільних пристроїв */
    #buy .modal-inner-content {
        padding: 60px 25px 80px !important; /* Збільшуємо відступи, щоб уникнути накладання шапки */
        display: block !important; /* Розташовуємо контент зверху вниз */
    }

    #buy .purchase-app {
        width: 100% !important;
        padding: 0 !important;
    }

    #buy .purchase-step {
        max-width: 100% !important; /* Дозволяємо формі займати всю ширину екрану */
    }

    .purchase-book-preview {
        align-items: flex-start !important;
        gap: 20px !important;
        margin-bottom: 35px !important;
        flex-wrap: nowrap !important; /* Тримаємо книгу та текст в один рядок */
    }

    .purchase-book-img {
        width: 130px !important; /* Тепер книга займає близько 1/3 ширини екрану */
        height: auto !important;
        flex-shrink: 0; /* Запобігаємо стисканню картинки */
    }
}