* {box-sizing:border-box; margin:0; padding:0}
html,body {height:100%; font-family:'Montserrat',sans-serif}
body {background-image:url('/img/back_new.jpg'); background-size:cover; background-repeat:no-repeat; background-attachment:fixed; background-position:center center; color:#ffffff}
.overlay {min-height:100vh; width:100%; background-color:rgba(12,22,32,0.38); display:flex; flex-direction:column; align-items:center}
.container {max-width:900px; width:100%; padding:60px 20px; text-align:center; flex:1}
header img {width:100%; max-width:360px; border-radius:16px; box-shadow:0 10px 30px rgba(0,255,255,0.3); transition:transform 0.3s ease}
h1 {font-size:3rem; color:#66fcf1; margin-top:30px}
h2 {font-weight:400; color:#e4e4e4; margin-bottom:20px}
h3 {margin-bottom:0.7rem}
.cta-top {margin-top:20px; margin-bottom:40px; display:flex; gap:10px; justify-content:center}
a.button {display:inline-block; background:linear-gradient(135deg,#ff8c00,#ff4d4d); color:white; padding:14px 28px; border-radius:10px; font-weight:700; font-size:0.9rem; text-decoration:none; box-shadow:0 0 15px rgba(255,77,77,0.6); transition:all 0.3s ease}
a.button:hover {box-shadow:0 0 25px rgba(255,140,0,0.9); transform:translateY(-2px)}
.fragment {background:linear-gradient(135deg,#c7c1ba,#ff4d4d)!important}
a {color:#66fcf1; text-decoration:none}
a:hover {text-decoration:none}
/* --- Стили прелоадера --- */
.preloader {
    position: fixed; /* Фиксируем прелоадер на экране */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0c1620; /* Темный фон, как основной */
    z-index: 9999; /* Выше всех остальных элементов */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Иконка и текст (если есть) по центру */
    transition: opacity 0.5s ease-out; /* Плавное исчезновение */
}

.preloader-icon {
    width: 60px;
    height: 60px;
    border: 5px solid #66fcf1; /* Синяя обводка */
    border-top-color: transparent; /* Прозрачная верхняя часть */
    border-radius: 50%; /* Круглая форма */
    animation: spin 1s linear infinite; /* Анимация вращения */
}

/* Анимация вращения */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.preloader p { /* Стиль для текста, если вы его добавите */
    margin-top: 15px;
    color: #ccc;
    font-size: 1.1rem;
}

/* Класс, который будет добавляться, когда страница полностью загрузится */
.preloader.hidden {
    opacity: 0;
    pointer-events: none; /* Делаем неактивным, чтобы он не мешал */
}
.section {margin:30px 0; background:rgb(72 68 68 / 45%); padding:30px; border-radius:12px; backdrop-filter:blur(4px); transition:transform 0.3s ease; text-align:left; line-height:1.5rem}
.section p {margin-bottom:0.7rem}
.section:hover {transform:scale(1.01)}
.section ul {list-style:none; padding:0}
.section ul li {margin-bottom:0.3rem}
.section ul li::before {content:"🚀 "}
footer {margin:40px 0 20px; color:#aaa; font-size:0.9em}
@media (max-width:768px) {.container {padding-top:30px; padding-bottom:40px}
    h1 {font-size:2.2rem; margin-bottom:12px}
    h2 {font-size:1rem}
    .cta-top {margin-bottom:30px; flex-direction:column}
}
.cycles-cta-section {text-align:center; margin:40px 0}
.cycles-cta-section h3 {color:#66fcf1; font-size:1.8rem; margin-bottom:12px}
.cycles-cta-section p {color:#ccc; margin-bottom:20px; max-width:480px; margin-left:auto; margin-right:auto}
.cycles-cta-section .button {display:inline-block}
.other-books-section {text-align:center; margin:40px 0}
.other-books-section h3 {color:#66fcf1; font-size:1.8rem; margin-bottom:30px}
.book-list {display:flex; justify-content:space-around; gap:30px; flex-wrap:wrap}
.book-card {background-color:rgb(25 22 22 / 68%); padding:30px; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,0.3); backdrop-filter:blur(5px); border:1px solid rgba(255,255,255,0.2); width:246px; text-align:center; transition:transform 0.3s ease,box-shadow 0.3s ease; display:flex; flex-direction:column; justify-content:space-between}
.book-card:hover {transform:translateY(-10px); box-shadow:0 15px 35px rgba(0,255,255,0.3)}
.book-card a {text-decoration:none}
.book-card a:hover {text-decoration:none}
.status-badge {position:absolute; top:10px; right:10px; background-color:#ff4d4d; color:white; padding:5px 10px; border-radius:5px; font-size:0.8em; font-weight:bold; z-index:10}
.book-card img {max-width:100%; height:auto; border-radius:8px; box-shadow:0 6px 15px rgba(0,0,0,0.5); margin-bottom:20px; transition:box-shadow 0.3s ease}
.book-card img:hover {box-shadow:0 12px 25px rgba(0,255,255,0.4)}
.book-card h4 {font-size:1.3rem; color:#fff; margin-bottom:10px; flex-grow:0}
.book-card p {font-size:0.95rem; color:#ccc; line-height:1.4; margin-bottom:25px; flex-grow:1}
.book-card .button {font-size:0.8rem; padding:12px 25px; background:linear-gradient(135deg,#ff8c00,#ff4d4d); box-shadow:0 0 15px rgba(255,77,77,0.6); margin-top:auto; flex-grow:0}
.book-card .button:hover {box-shadow:0 0 25px rgba(255,140,0,0.9); transform:translateY(-2px)}
@media (max-width:992px) {.book-list {gap:20px}
    .book-card {width:280px; padding:25px}
    .book-card h4 {font-size:1.2rem}
    .book-card p {font-size:0.9rem; margin-bottom:20px}
}
@media (max-width:768px) {.other-books-section h3 {font-size:1.6rem}
    .book-list {flex-direction:column; align-items:center; gap:20px}
    .book-card {width:90%; max-width:350px}
    .book-card img {margin-bottom:15px}
    .book-card p {margin-bottom:15px}
    .book-card .button {padding:10px 20px}
}

/* --- Страница «Циклы»: книга = одна строка (обложка слева, под ней название; справа описание и кнопки) --- */
.cycle-books-list {display:flex; flex-direction:column; gap:0; margin-top:20px; min-width:0}
.cycle-book-row {display:flex; flex-direction:row; align-items:center; gap:24px; padding:20px; background:rgb(25 22 22 / 68%); border:1px solid rgba(255,255,255,0.15); border-bottom:none; text-align:left; min-width:0}
.cycle-book-row:last-child {border-bottom:1px solid rgba(255,255,255,0.15)}
.cycle-book-row:hover {background:rgb(35 32 32 / 75%)}
.cycle-book-cover {flex-shrink:0; width:100px; max-width:100px; text-align:center}
.cycle-book-cover img {width:100%; height:auto; max-width:100%; border-radius:8px; box-shadow:0 6px 15px rgba(0,0,0,0.5); display:block}
.cycle-book-cover .cycle-book-title {font-size:0.9rem; color:#66fcf1; margin-top:8px; line-height:1.3; font-weight:700; word-wrap:break-word; overflow-wrap:break-word}
.cycle-book-cover .cycle-book-title a {color:inherit; text-decoration:none}
.cycle-book-cover .cycle-book-title a:hover {text-decoration:underline}
.cycle-book-info {flex:1; min-width:0; display:flex; flex-direction:row; align-items:center; gap:20px; flex-wrap:wrap}
.cycle-book-desc {flex:1; min-width:200px; font-size:0.95rem; color:#ccc; line-height:1.45; word-wrap:break-word; overflow-wrap:break-word}
.cycle-book-actions {display:flex; flex-shrink:0; gap:10px; flex-wrap:wrap}
.cycle-book-actions .button {font-size:0.85rem; padding:10px 20px; white-space:nowrap}
.cycle-book-row .status-badge {position:static; margin-top:6px; display:inline-block}
.cycle-book-row .progress-bar {margin-top:6px}
@media (max-width:768px) {
    .cycle-book-row {flex-direction:column; align-items:stretch; gap:16px; padding:16px; min-width:0}
    .cycle-book-cover {width:100%; max-width:120px; margin:0 auto; flex-shrink:0}
    .cycle-book-cover img {max-width:100%}
    .cycle-book-info {flex-direction:column; align-items:center; text-align:center; min-width:0}
    .cycle-book-desc {min-width:0; width:100%; text-align:left}
    .cycle-book-actions {justify-content:center; width:100%; min-width:0}
    .cycle-book-actions .button {white-space:normal; min-width:0}
}
@media (max-width:480px) {
    .cycle-book-row {padding:12px}
    .cycle-book-cover {max-width:90px}
    .cycle-book-desc {font-size:0.9rem}
    .cycle-book-actions {flex-direction:column}
    .cycle-book-actions .button {width:100%; text-align:center; box-sizing:border-box}
}

.reviews-section {text-align:center; margin:40px 0}
.reviews-section h3 {color:#66fcf1; font-size:1.8rem; margin-bottom:30px}
.slider-container {position:relative; max-width:700px; margin:0 auto; overflow:hidden; padding:0 40px}
.reviews-slider {display:flex; transition:transform 0.5s ease-in-out}
.review-slide {flex-shrink:0; width:370px; margin-right:20px; background-color:rgba(255,255,255,0.05); padding:20px; border-radius:12px; backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,0.1); box-shadow:0 4px 10px rgba(0,0,0,0.3); transition:box-shadow 0.3s ease}
.review-slide:last-child {margin-right:0}
.review-slide:hover {box-shadow:0 8px 20px rgba(0,255,255,0.2)}
.review-slide img {max-width:100%; height:auto; border-radius:8px; box-shadow:0 4px 10px rgba(0,0,0,0.4); display:block; margin-bottom:15px}
.review-slide .review-source {font-size:0.9em; color:#c0c0c0; font-style:italic; text-align:right}
.prev-btn,.next-btn {position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.2); color:#fff; border:none; padding:10px 15px; font-size:1.5rem; cursor:pointer; border-radius:5px; transition:background-color 0.3s; z-index:10}
.prev-btn:hover,.next-btn:hover {background:rgba(255,255,255,0.4)}
.prev-btn {left:0}
.next-btn {right:0}
a.button.outline {
    background: transparent;
    border: 2px solid #66fcf1;
    color: #66fcf1;
    box-shadow: none;
}
a.button.outline:hover {
    background: rgba(102, 252, 241, 0.1);
    box-shadow: 0 0 15px rgba(102, 252, 241, 0.4);
    transform: translateY(-2px);
}
/* --- Стили для страницы 404 --- */
.error-page-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%; /* Занимает всю высоту контейнера */
    min-height: 60vh;
}

.error-page-content h2 {
    color: #ff4d4d; /* Красный цвет тревоги */
    letter-spacing: 2px;
    margin-top: 0;
    font-size: 1.5rem;
    text-transform: uppercase;
}

.error-page-content p {
    color: #ccc;
    font-size: 1.1rem;
    max-width: 500px;
    margin-bottom: 30px;
}

/* Эффект Глитча (Помех) для цифр 404 */
.glitch-wrapper {
    position: relative;
    margin-bottom: 20px;
}

.glitch {
    font-size: 8rem;
    font-weight: bold;
    color: #66fcf1;
    position: relative;
    margin: 0;
    line-height: 1;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0c1620; /* Цвет фона, чтобы перекрывать оригинал */
}

.glitch::before {
    left: 2px;
    text-shadow: -1px 0 #ff00c1;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: -1px 0 #00fff9;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 5s infinite linear alternate-reverse;
}

/* Анимация помех */
@keyframes glitch-anim {
    0% { clip: rect(31px, 9999px, 94px, 0); }
    20% { clip: rect(6px, 9999px, 86px, 0); }
    40% { clip: rect(68px, 9999px, 3px, 0); }
    60% { clip: rect(21px, 9999px, 16px, 0); }
    80% { clip: rect(96px, 9999px, 79px, 0); }
    100% { clip: rect(4px, 9999px, 63px, 0); }
}

@keyframes glitch-anim2 {
    0% { clip: rect(69px, 9999px, 32px, 0); }
    20% { clip: rect(3px, 9999px, 14px, 0); }
    40% { clip: rect(89px, 9999px, 18px, 0); }
    60% { clip: rect(47px, 9999px, 83px, 0); }
    80% { clip: rect(25px, 9999px, 66px, 0); }
    100% { clip: rect(59px, 9999px, 35px, 0); }
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .glitch { font-size: 6rem; }
}
@media (max-width:500px) {.slider-container {padding:0 20px}
    .review-slide {width:calc(100vw - 135px)}
}