:root{ /* глобальная область CSS (переменные доступны везде по сайту) */

    --bg:#000;  /* основной фон сайта (чёрный цвет) */
    --card:rgba(255,255,255,0.06); /* фон карточек (полупрозрачный белый на тёмном фоне) */
    --stroke:rgba(255,255,255,0.12); /* цвет границ (очень слабая белая обводка элементов) */
    --text:rgba(255,255,255,0.92); /* основной текст (почти белый, но не 100% чтобы не “резало глаза”) */
    --muted:rgba(255,255,255,0.6); /* второстепенный текст (подсказки, менее важная информация) */
    --card-width: clamp(110px, 32vw, 220px); /* ширина карточек: - минимум 110px - адаптивно 32% ширины экрана  - максимум 220px */
    --card-radius: 10px; /* скругление углов карточек (10px — мягкие углы) */

}

html, body {
    font-size: 15px;  /* базовый размер шрифта для всего сайта */
    line-height: 1.55;  /* межстрочный интервал для читаемости текста */
    font-weight: 400;  /* нормальная (не жирная) толщина шрифта */
    -webkit-font-smoothing: antialiased;  /* сглаживание шрифта в WebKit браузерах (Safari/Chrome) */
    margin: 0;  /* убирает стандартные внешние отступы браузера */
    padding: 0;  /* убирает внутренние отступы браузера */
    overflow-x: clip;  /* запрещает горизонтальный скролл (обрезает выход за экран по X) */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial;  /* системный стек шрифтов (быстрая загрузка + нативный вид на разных ОС) */
    background: radial-gradient(circle at top, #111 0%, #000 60%); /* радиальный градиент фона: светлее сверху, темнее к центру/низу */
    color: var(--text);  /* основной цвет текста (берётся из CSS переменной --text) */
    padding-top: 0;  /* убирает верхний отступ (часто используется если был sticky header) */
}



.wrapper{
    max-width:980px; /* ограничивает максимальную ширину контейнера 980px, чтобы контент не растягивался на широких экранах */
    margin:0 auto; /* центрирует блок по горизонтали (0 сверху/снизу, auto слева/справа) */
    padding:16px clamp(12px, 4vw, 20px); /* внутренние отступы: 16px сверху/снизу, и адаптивные слева/справа (минимум 12px, максимум 20px, иначе 4% ширины экрана) */
    width:100%; /* заставляет блок занимать всю доступную ширину внутри max-width */
}

.card{
    background:var(--card); /* задаёт фон карточки из CSS-переменной --card (у тебя это полупрозрачный тёмный фон) */
    border:1px solid var(--stroke); /* рамка 1px с цветом из переменной --stroke (полупрозрачный светлый контур) */
    border-radius:16px; /* скругление углов карточки (16px — мягкий современный стиль) */
    padding:18px; /* внутренние отступы: контент не прилипает к краям карточки */
    margin:14px 0; /* внешние отступы: сверху/снизу 14px, слева/справа 0 — разделяет карточки между собой */

}

button{ 
    background:rgba(255,255,255,0.12);  /* задаёт фон кнопки с полупрозрачным белым цветом (12% белого) */  
    border:1px solid var(--stroke);  /* граница кнопки: тонкая линия, цвет берётся из переменной --stroke */  
    color:#fff; /* цвет текста внутри кнопки — белый */  
    padding:10px 14px;  /* внутренние отступы: 10px сверху/снизу, 14px слева/справа */   
    border-radius:10px;  /* скругление углов кнопки — 10px радиус */   
    cursor:pointer; /* курсор меняется на "руку" при наведении (интерактивность) */
}

button:hover{
    background:rgba(255,255,255,0.2); /* задаёт фон кнопки с полупрозрачным белым цветом при наведении (20% белого) */  
}

h1{
    font-size:24px; /* размер шрифта заголовка 1 уровня */
    font-weight:600; /* полужирное начертание (не максимальный bold, а мягкий) */
    letter-spacing:-0.02em; /* слегка уменьшает расстояние между буквами */
    margin:0 0 14px 0; /* убирает верхний отступ, добавляет 14px снизу */
}

h2{
    font-size:18px; /* размер заголовка второго уровня меньше h1 */
    font-weight:600; /* полужирный текст для акцента */
    margin:0 0 10px 0; /* убирает верхний отступ, 10px снизу */
}

h3{
    font-size:16px; /* ещё меньший заголовок */
    font-weight:600; /* сохраняет акцент жирности */
    margin:0 0 8px 0; /* чуть меньший нижний отступ */
}

p{
    font-size:15px; /* основной размер текста для абзацев */
    line-height:1.6; /* увеличивает межстрочный интервал для читаемости */
    margin:0 0 6px 0; /* убирает верхний отступ, добавляет 12px снизу */
    color:rgba(255,255,255,0.75); /* белый цвет с прозрачностью (мягкий серый оттенок) */
}

.ps{
    font-size:15px; /* основной размер текста для абзацев */
    font-weight:400; /* сохраняет акцент жирности */
    line-height:1.6; /* увеличивает межстрочный интервал для читаемости */
    margin:0 0 12px 0; /* убирает верхний отступ, добавляет 12px снизу */
    color:rgba(255,255,255,0.9); /* белый цвет с прозрачностью (мягкий серый оттенок) */
    text-decoration:none;
    
}

.ps:hover {
    color:rgba(255,255,255); /* белый цвет с прозрачностью (мягкий серый оттенок) */
}

small{
    font-size:12px; /* уменьшенный текст для второстепенной информации */
    color:rgba(255,255,255,0.5); /* более бледный цвет для слабого акцента */
}

*{
    box-sizing:border-box; /* padding и border включаются в ширину/высоту элемента */
    -webkit-font-smoothing:antialiased; /* сглаживание шрифтов в WebKit (Chrome/Safari) */
}






/* HEADER */
.nav-header-1{
    position: sticky; /* делает элемент “прилипшим” к верху при скролле */
    top: 0; /* фиксирует навбар строго в верхней части окна */
    z-index: 999; /* поднимает слой выше остальных элементов страницы */
    width: 100%; /* растягивает навбар на всю ширину экрана */
    transform: translateZ(0); /* включает GPU-ускорение (плавнее анимации) */
    will-change: transform; /* подсказывает браузеру заранее оптимизировать трансформации */
    background: rgba(0,0,0,0.65); /* полупрозрачный тёмный фон */
    backdrop-filter: blur(25px); /* размытие контента под навбаром (эффект стекла) */
    -webkit-backdrop-filter: blur(25px); /* поддержка Safari (WebKit) */
    border-bottom: 1px solid rgba(255,255,255,0.08); /* тонкая нижняя линия для отделения навбара */
    transition: all 0.25s ease; /* плавные анимации при изменении любых свойств */
}

.nav-header-2{
    max-width:980px;   /* Ограничивает максимальную ширину блока до 980px (контент не растягивается на весь экран) */
    margin:0 auto;  /* Центрирует блок по горизонтали (auto слева и справа) */
    display:flex;   /* Включает flex-контейнер (все дочерние элементы становятся flex-элементами) */
    justify-content:space-between; /* Разносит элементы по краям: первый — слева, последний — справа */
    align-items:center; /* Выравнивает элементы по вертикали по центру */
    padding:12px 10px;   /* Внутренние отступы: 12px сверху/снизу, 10px слева/справа */
}

.nav-header-left{
    display:flex;   /* Делает контейнер flex — элементы внутри становятся в строку */
    gap:10px;    /* Добавляет расстояние 10px между элементами (кнопками/ссылками) */
}

.nav-header-right{
    display:flex;  /* Делает контейнер flex — элементы внутри становятся в строку */
}

.nav-header-item{
    position:relative; /* позволяет позиционировать псевдоэлементы (::after) относительно этой ссылки */
    height:38px; /* фиксированная высота кнопки навигации */
    display:flex; /* включаем flexbox для удобного выравнивания */
    align-items:center; /* выравнивание содержимого по вертикали (по центру) */
    justify-content:center; /* выравнивание по горизонтали (по центру) */
    padding:0 14px; /* отступы слева и справа, сверху/снизу 0 */
    border-radius:10px; /* скругление углов кнопки */
    font-size:14px; /* размер текста */
    color:rgba(255,255,255,0.6); /* цвет текста (полупрозрачный белый) */
    text-decoration:none; /* убираем подчеркивание у ссылок */
    transition:0.25s ease; /* плавная анимация всех изменений (цвет, фон и т.д.) */
}

.nav-header-item:hover{
    color:#fff; /* при наведении текст становится полностью белым */
    background:rgba(255,255,255,0.08); /* лёгкий светлый фон при hover */
}

.nav-header-item.active{
    color:#fff; /* активный пункт меню всегда белый (как при hover) */
}

.nav-header-item span{
    position:relative; /* нужно для позиционирования underline (::after) */
    display:inline-block; /* чтобы псевдоэлемент корректно работал по ширине текста */
}

.nav-header-item span::after{
    content:''; /* создаём пустой псевдоэлемент (это будет линия под текстом) */
    position:absolute; /* позиционируем относительно span */
    left:0; /* прижимаем к левому краю текста */
    bottom:-4px; /* опускаем линию немного ниже текста */
    width:100%; /* ширина линии = ширина текста */
    height:2px; /* толщина линии */
    background:#fff; /* цвет линии (белый) */
    border-radius:2px; /* немного скругляем края линии */
    transform:scaleX(0); /* изначально линия скрыта (сжата по горизонтали) */
    transform-origin:left; /* анимация будет "расти" слева направо */
    transition:0.3s ease; /* плавное появление линии */
}

.nav-header-item.active span::after{
    transform:scaleX(1); /* при активном пункте линия полностью раскрывается */
}


/* Стили для select (выпадающий список знаков) */
select.zodiac-select{
    appearance:none; /* убирает стандартный стиль select (браузерный) */
    -webkit-appearance:none; /* то же самое для Chrome/Safari */
    -moz-appearance:none; /* то же самое для Firefox */    
    background:rgba(255,255,255,0.05); /* полупрозрачный фон */
    border:1px solid rgba(255,255,255,0.08); /* тонкая светлая рамка */    
    color:#fff; /* белый текст */
    cursor:pointer; /* курсор "рука" при наведении */    
    height:38px; /* фиксированная высота */
    padding:0 10px; /* внутренние отступы слева/справа */    
    border-radius:10px; /* скругление углов */    
    display:flex; /* flex-контейнер (редко нужен для select, но ок) */
    align-items:center; /* выравнивание текста по вертикали */
}

/* Обёртка dropdown */
.zodiac-dropdown{
    position:relative; /* нужно, чтобы абсолютное меню позиционировалось относительно этого блока */
}

/* Кнопка/триггер открытия */
.zodiac-trigger{
    cursor:pointer; /* показывает, что элемент кликабельный */
    background:rgba(255,255,255,0.05); /* полупрозрачный фон */
    border:1px solid rgba(255,255,255,0.08); /* тонкая светлая рамка */  

}

/* Выпадающее меню */
.zodiac-menu{
    position:absolute; /* позиционируем относительно .zodiac-dropdown */
    top:50px; /* отступ сверху (ниже кнопки) */
    right:0; /* прижимаем к правому краю */   
    min-width:180px; /* минимальная ширина меню */  
    z-index: 99999; /* гарантирует, что dropdown будет поверх всех элементов */
    background:rgba(0,0,0,0.9); /* тёмный полупрозрачный фон */          
    border:1px solid rgba(255,255,255,0.08); /* тонкая рамка */
    border-radius:14px; /* скругление */    
    display:flex; /* flex-контейнер */
    flex-direction:column; /* элементы в колонку */
    gap:4px; /* расстояние между пунктами */    
    opacity:0; /* изначально невидимо */
    transform:translateY(10px) scale(0.98); /* немного сдвинуто вниз и уменьшено */
    pointer-events:none; /* нельзя кликать пока скрыто */    
    transition:0.25s ease; /* плавная анимация */
    overflow: hidden; /* обрезает внутренние элементы по радиусу (чтобы не вылезали за края) */
}

/* Ссылки внутри меню */
.zodiac-menu a{
    padding:10px 12px; /* внутренние отступы */
    color:rgba(255,255,255,0.7); /* слегка прозрачный текст */
    text-decoration:none; /* убираем подчеркивание */
    font-size:14px; /* размер текста */    
    transition:0.2s ease; /* плавный hover */    
    cursor:pointer; /* курсор "рука" */
}
/* Hover эффект */
.zodiac-menu a:hover{
    background:rgba(255,255,255,0.08); /* подсветка фона */
    color:#fff; /* текст становится белым */
}
/* Когда dropdown открыт */
.zodiac-dropdown.open .zodiac-menu{
    opacity:1; /* делаем видимым */
    transform:translateY(0) scale(1); /* возвращаем в нормальное положение */
    pointer-events:auto; /* можно кликать */
}
/* Активный пункт (текущий знак) */
.zodiac-menu a.active{
    background:rgba(255,255,255,0.15); /* более яркий фон */
    color:#fff; /* белый текст */
}
/* HEADER */














/* FOOTER */
.site-footer{
    margin-top:60px; /* отступ сверху от контента */
    padding:30px 16px; /* внутренние отступы: 30px сверху/снизу, 16px по бокам */
    border-top:1px solid rgba(255,255,255,0.06); /* тонкая верхняя граница (разделитель) */
    background:rgba(0,0,0,0.6); /* полупрозрачный чёрный фон */
    backdrop-filter: blur(20px); /* размытие фона под футером (glass-эффект) */
    -webkit-backdrop-filter: blur(20px); /* то же самое для Safari */
    font-size:14px; /* базовый размер текста в футере */
}

.footer-inner{
    max-width:980px; /* максимальная ширина контейнера */
    margin:0 auto; /* центрирование по горизонтали */
    display:grid; /* включаем grid-сетку */
    grid-template-columns: 1.2fr 1.3fr 1fr; /* 3 колонки: первая шире остальных */
    gap:24px; /* расстояние между колонками */
    text-align:left; /* выравнивание текста по левому краю */
    align-items:start; /* выравнивание элементов по верхнему краю */
}

.footer-title{
    font-size:14px; /* размер заголовка блока */
    font-weight:600; /* полужирный текст */
    color:#fff; /* белый цвет текста */
    margin-bottom:10px; /* отступ снизу (до текста/ссылок) */
}

.footer-text{
    font-size:13px; /* немного меньше основной текст */
    line-height:1.6; /* межстрочный интервал (для читаемости) */
    color:rgba(255,255,255,0.55); /* полупрозрачный белый (приглушённый текст) */
}

.footer-links{
    display:flex; /* используем flex для расположения ссылок */
    flex-wrap:wrap; /* перенос ссылок на новую строку при нехватке места */
    gap:3px 12px; /* расстояние: 10px по вертикали, 12px по горизонтали */
    justify-content:flex-start; /* выравнивание по левому краю */
    align-items:center; /* выравнивание по центру по вертикали */
}

.site-footer a{
    font-size:13px; /* размер текста ссылок */
    color:rgba(255,255,255,0.55); /* приглушённый цвет ссылок */
    text-decoration:none; /* убираем подчеркивание */
    transition:0.2s; /* плавный переход (hover эффект) */
    display:block; /* каждая ссылка — блочный элемент (удобно для клика) */
}

.site-footer a:hover{
    color:#fff; /* при наведении ссылка становится ярко-белой */
}

.footer-bottom{
    text-align:center; /* выравнивание по центру */
    margin-top:20px; /* отступ сверху от основного футера */
    font-size:12px; /* уменьшенный текст */
    color:rgba(255,255,255,0.35); /* очень приглушённый цвет (копирайт) */
}
/* FOOTER */









.blok{
    display:flex;              /* включает flexbox — элементы выстраиваются в строку */
    flex-wrap:wrap;            /* разрешает перенос элементов на новую строку */
    column-gap: 14px;          /* расстояние между элементами по горизонтали */
    row-gap: 0px; 
}

.blok-s{
    display:flex;
    flex-wrap:wrap;
    column-gap:14px;
    width:100%;
    margin-top:26px;
}

.blok-s a{
    display:block;
    width:100%;
}

.blok-s button{
    width:100%;
}



/*personal*/
input, button{
    width:100%;  /* растягивает элемент на всю ширину контейнера */
    margin:8px 0;  /* внешний отступ: сверху и снизу 8px, по бокам 0 */
    padding:12px;    /* внутренний отступ (контент не прилипает к краям) */
    border-radius:12px;   /* скругление углов */
    border:1px solid rgba(255,255,255,0.1); /* тонкая полупрозрачная рамка */
    background:rgba(255,255,255,0.05);   /* полупрозрачный фон */
    color:#fff;  /* цвет текста — белый */
    font-size:14px;   /* размер текста */
    outline:none;    /* убирает стандартную обводку при фокусе */
}

#loader{
    position:fixed;            /* фиксирует блок относительно экрана */
    inset:0;                   /* растягивает на весь экран (top/right/bottom/left = 0) */
    background:rgba(0,0,0,0.85); /* затемнённый фон (оверлей) */
    display:flex;              /* flex для центрирования */
    align-items:center;        /* центр по вертикали */
    justify-content:center;    /* центр по горизонтали */
    flex-direction:column;     /* элементы внутри идут вертикально */
    color:#fff;                /* цвет текста */
    z-index:9999;              /* поверх всех элементов */
}

.spinner{
    width:60px;                /* ширина круга */
    height:60px;               /* высота круга */
    border:4px solid rgba(255,255,255,0.2); /* светлая рамка */
    border-top:4px solid #fff; /* верхняя часть белая (создаёт эффект вращения) */
    border-radius:50%;         /* делает круг */
    animation:spin 1s linear infinite; /* запускает анимацию вращения */
    margin-bottom:20px;        /* отступ снизу */
}

@keyframes spin{
    to{transform:rotate(360deg);} /* поворачивает элемент на 360° */
}

.suggest-box{
    margin-top:-6px;           /* немного поднимает блок вверх */
    margin-bottom:10px;        /* отступ снизу */
}

.suggest-box div{
    background:rgba(0,0,0,0.85); /* тёмный фон */
    color:#fff;                  /* белый текст */
    padding:10px;                /* внутренний отступ */
    cursor:pointer;              /* курсор "рука" */
    border-radius:8px;           /* скругление */
    margin-top:4px;              /* отступ между элементами */
}

.suggest-box div:hover{
    background:rgba(255,255,255,0.15); /* подсветка при наведении */
}





/* Заголовки внутри блока .mystic */
.mystic h2{
    margin-bottom:14px; /* отступ снизу между заголовком и следующим элементом */
}

/* Обёртка одного бара (полоски) */
.bar{
    margin:14px 0; /* вертикальные отступы сверху и снизу между барами */
}

/* Строка с названием и процентом */
.label{
    display:flex; /* делаем flex-контейнер (в одну линию) */
    justify-content:space-between; /* раздвигаем текст влево и процент вправо */    
    margin-bottom:6px; /* небольшой отступ до самой полоски */
}

/* Фон полоски (трек) */
.track{
    height:8px; /* высота полоски */
    background:rgba(255,255,255,0.08); /* полупрозрачный фон (неактивная часть) */
    border-radius:20px; /* скругление краёв (капсула) */
    overflow:hidden; /* обрезает всё, что выходит за границы (важно для fill) */
}

/* Заполняемая часть полоски */
.fill{
    height:100%; /* занимает всю высоту родителя (.track) */
    width:0%; /* изначально 0% (анимация будет увеличивать ширину) */
    border-radius:20px; /* скругление, чтобы совпадало с треком */
    transition:width 1.4s ease, background 1.4s ease; 
    /* плавная анимация изменения ширины и цвета */
}

/* Процент справа */
.p{
    font-weight:600; /* делает текст чуть жирнее (акцент на процентах) */
}




/*taro*/

/* ===== CAROUSEL ===== */
.taro-carousel{
    position:relative;   /* Делает контейнер точкой отсчёта для position:absolute у карточек */
    width:100%;   /* Растягивается на всю ширину родителя */
    max-width:520px;  /* Ограничивает ширину (чтобы не разъезжалось на десктопе) */
    aspect-ratio: 3 / 2.2;   /* Фиксирует пропорции контейнера (важно для адаптивности) */
    margin:40px auto;   /* Отступ сверху/снизу 40px, по центру по горизонтали */
    perspective:1200px;   /* 🔥 Включает 3D-пространство (нужно для flip/поворотов карточек) */
    padding:0;   /* Убирает внутренние отступы */
    box-sizing:border-box;    /* padding и border включаются в ширину (чтобы не ломать размеры) */
}


/* ===== CARD ===== */
.taro-card{
    position:absolute;    /* Позволяет свободно двигать карточки внутри carousel */
    width:var(--card-width);     /* Ширина берётся из CSS-переменной (адаптивный контроль) */
    aspect-ratio: 2 / 3;    /* Делает карту всегда пропорциональной (как настоящая карта Таро) */
    top:50%;     /* Сдвигает верхнюю точку карточки к центру контейнера */
    left:50%;     /* Сдвигает левую точку карточки к центру контейнера */
    border-radius:var(--card-radius);    /* Скругление углов (из переменной для единообразия) */
    cursor:pointer;    /* Курсор "рука" — показывает что элемент кликабельный */
    transition:transform 0.6s ease, opacity 0.6s ease;    /* Плавные анимации:   - transform (движение, масштаб, поворот)   - opacity (прозрачность)    → важно для карусели (перелистывание) */
}

/* ===== FLIP INNER ===== */
.inner{
    width:100%; /* растягивает внутренний контейнер на всю ширину карточки */
    height:100%; /* растягивает по высоте карточки */
    position:relative; /* создаёт локальный контекст позиционирования для .front и .back */
    transform-style:preserve-3d; /* включает 3D-пространство, чтобы дочерние элементы могли "переворачиваться" */
    transition:transform 0.9s cubic-bezier(.22,1,.36,1); /* плавная анимация поворота с кастомной кривой */
}

/* общие стили для лицевой и обратной стороны */
.front,
.back{
    position:absolute; /* накладывает обе стороны друг на друга */
    width:100%; /* занимает всю ширину карточки */
    height:100%; /* занимает всю высоту карточки */
    border-radius:var(--card-radius); /* скругление углов */
    backface-visibility:hidden; /* скрывает "заднюю сторону" элемента при повороте */
    box-shadow:0 25px 60px rgba(0,0,0,0.7); /* тень для глубины и объёма */
}

/* лицевая сторона карты (рубашка) */
.front{
    background:url('/assets/img/taro/back.webp') center/contain no-repeat; 
    /* фоновое изображение:
       center — центрирование
       contain — вписать без обрезки
       no-repeat — без повторения */
}

/* обратная сторона карты (сама карта) */
.back{
    transform:rotateY(180deg); /* изначально переворачиваем на 180°, чтобы скрыть */
    background-size:cover; /* картинка заполняет весь блок (может обрезаться) */
    background-position:center; /* центрируем изображение */
}

/* состояние переворота */
.inner.flipped{
    transform:rotateY(180deg); /* переворачивает весь контейнер, показывая .back */
}

/* ===== POSITIONS ===== */
.left{
    transform:translate(-120%, -50%) scale(0.85);
    opacity:0.6;
}

.center{
    transform:translate(-50%, -50%) scale(1.15);
    z-index:3;
}

.right{
    transform:translate(20%, -50%) scale(0.85);
    opacity:0.6;
}

/* ===== LIMIT ===== */
#taro-limit{
    max-width:980px; /* максимальная ширина блока (чтобы не растягивался на больших экранах) */
    margin:10px auto 0; /* отступ сверху 10px, по бокам авто (центрирование), снизу 0 */
    padding:12px 14px; /* внутренние отступы: 12px сверху/снизу, 14px слева/справа */
    border-radius:12px; /* скругление углов блока */
    background:rgba(255,0,0,0.12); /* полупрозрачный красный фон (эффект предупреждения) */
    border:1px solid rgba(255,0,0,0.35); /* красная рамка вокруг блока */
    color:#ff6b6b; /* цвет текста (светло-красный) */
    font-size:14px; /* размер текста */
    text-align:center; /* выравнивание текста по центру */
    display:none; /* по умолчанию скрыт (показывается через JS при лимите) */
}

/* ===== INFO ===== */
.taro-info{
    max-width:980px; /* ограничение ширины (как у основного контента) */
    margin:20px auto; /* отступ сверху/снизу 20px, по центру по горизонтали */
    padding:18px; /* внутренние отступы со всех сторон */
    background:rgba(255,255,255,0.06); /* полупрозрачный светлый фон (glass эффект) */
    border:1px solid rgba(255,255,255,0.12); /* светлая рамка */
    border-radius:14px; /* скругление углов */
    color:#fff; /* цвет текста белый */
    font-size:14px; /* размер текста */
    line-height:1.5; /* межстрочный интервал (удобочитаемость) */

    display:flex; /* включаем flex-контейнер */
    flex-direction:column; /* элементы внутри располагаются вертикально */
}

.taro-welcome{
    display:block; /* обычный блочный элемент */
    text-align:left; /* выравнивание текста по левому краю */
    line-height:1.7; /* увеличенный межстрочный интервал (для текста описания) */
    font-size:14px; /* размер текста */
    opacity:0.9; /* небольшая прозрачность (чтобы текст выглядел мягче) */
}

/* Заголовки внутри блока приветствия таро */
.taro-welcome h2{
    font-size:16px;        /* размер шрифта заголовка */
    margin:14px 0 8px;     /* отступы: сверху 14px, снизу 8px */
    font-weight:600;       /* полужирный текст */
    color:#fff;            /* белый цвет текста */
}

/* Параграфы внутри блока приветствия */
.taro-welcome p{
    margin:0 0 12px;       /* убираем верхний отступ, снизу 12px */
}

/* Один блок с открытой картой (результат) */
.taro-entry{
    padding:0px 0;        /* внутренние отступы сверху и снизу */
    animation:fadeIn .35s ease; /* плавное появление (анимация fadeIn за 0.35с) */
}

/* Заголовок карты (название карты) */
.taro-entry b{
    display:block;         /* делаем жирный текст отдельной строкой */
    margin-bottom:6px;     /* отступ снизу от текста */
    font-size:15px;        /* чуть больше размер шрифта */
}

/* Разделительная линия между картами */
.taro-divider{
    height:1px;            /* толщина линии 1px */
    margin:10px 0;         /* отступы сверху и снизу */
    background:linear-gradient(
        90deg,
        transparent,                   /* начало прозрачное */
        rgba(255,255,255,0.25),        /* середина — полупрозрачный белый */
        transparent                    /* конец прозрачный */
    ); /* создаёт мягкую "затухающую" линию */
}

/* 🔥 УБИРАЕМ СИНИЙ HIGHLIGHT НА МОБИЛКАХ */
.taro-card,
.taro-card * {
    -webkit-tap-highlight-color: transparent;   /* отключает синий подсвет при тапе на iOS/Android */
}

/* 🔥 УБИРАЕМ OUTLINE (синий контур) */
.taro-card:focus,
.taro-card:active {
    outline: none;
}

/* 🔥 ДОПОЛНИТЕЛЬНО (на всякий случай) */
.taro-card {
    user-select: none;
    -webkit-user-select: none;
}

/* ===== ANIMATION ===== */
@keyframes fadeIn{
    from{opacity:0; transform:translateY(6px);}
    to{opacity:1; transform:translateY(0);}
}


/* 🔥 УБРАТЬ СИНИЙ ТАП-ХАЙЛАЙТ НА ВСЁМ САЙТЕ */
a, button, div, span {
    -webkit-tap-highlight-color: transparent;
}

/* 🔥 УБРАТЬ OUTLINE ПРИ КЛИКЕ */
a:focus,
button:focus,
a:active,
button:active {
    outline: none !important;
    box-shadow: none !important;
}

/* 🔥 УБРАТЬ СИНИЙ/СЕРЫЙ ФОКУС В CHROME */
* {
    -webkit-focus-ring-color: transparent;
}







.ball-wrap{
    display:flex;
    justify-content:center;
    margin:30px 0;
}

.ball-stage{
    position:relative;
    width:290px;
    height:290px;
    border-radius:50%;
    overflow:hidden;
}

.ball-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
    filter:contrast(1.15) saturate(1.25);
    user-select:none;
    z-index:1;
}

.ball-glow{
    position:absolute;
    inset:-40px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(184,134,60,0.28), transparent 65%);
    filter:blur(28px);
    animation:pulse 3.2s ease-in-out infinite;
    z-index:0;
}

@keyframes pulse{
    0%,100%{transform:scale(1);opacity:0.55;}
    50%{transform:scale(1.06);opacity:1;}
}

#scratch, #particles{
    position:absolute;
    inset:0;
    border-radius:50%;
}

#scratch{ z-index:3; cursor:grab; touch-action:none; }
#particles{ z-index:4; pointer-events:none; }













/* =========================
   ZODIAC DROPDOWN (GLASS FIXED)
   ========================= */

/* контейнер для input + dropdown */
.select-wrap{
    position: relative; /* делает этот блок точкой отсчёта для position:absolute внутри */
    overflow: visible;  /* позволяет dropdown выходить за границы контейнера */
}

/* выпадающий список */
.zodiac-dd__box{

    position: absolute; /* позиционируем относительно .select-wrap */
    top: calc(100% - 5px); /* размещаем чуть ниже input (100% его высоты) с небольшим наложением */
    left: -1px; /* сдвигаем на 1px влево, чтобы компенсировать увеличение ширины */
    width: calc(100% + 2px); /* делаем на 2px шире input (по 1px с каждой стороны) */
    display: none; /* скрыт по умолчанию, показывается через JS */
    z-index: 99999; /* гарантирует, что dropdown будет поверх всех элементов */
    background: rgba(0,0,0,0.9); /* тёмный полупрозрачный фон */
    border: 1px solid rgba(255,255,255,0.08); /* тонкая светлая рамка для глубины */
    border-radius: 14px; /* скруглённые углы */
    box-shadow: 0 20px 60px rgba(0,0,0,0.55); /* мягкая тень для эффекта "всплытия" */
    overflow: hidden; /* обрезает внутренние элементы по радиусу (чтобы не вылезали за края) */
    animation: zodiacFade .18s ease; /* плавное появление dropdown */
}

/* один пункт списка */
.zodiac-dd__item{
    padding:10px 12px; /* внутренние отступы */
    color:rgba(255,255,255,0.7); /* слегка прозрачный текст */
    text-decoration:none; /* убираем подчеркивание */
    font-size:14px; /* размер текста */    
    transition:0.2s ease; /* плавный hover */    
    cursor:pointer; /* курсор "рука" */
}

/* эффект при наведении */
.zodiac-dd__item:hover{
    background:rgba(255,255,255,0.08); /* подсветка фона */
    color:#fff; /* текст становится белым */
}

/* анимация появления */
@keyframes zodiacFade{
    from { 
        opacity: 0; /* старт — полностью прозрачный */
        transform: translateY(-6px); /* и чуть выше (эффект "выплывания") */
    }
    to   { 
        opacity: 1; /* становится видимым */
        transform: translateY(0); /* возвращается на место */
    }
}

















.main-dropdown {
    position: relative;
    cursor:pointer;
}

.main-menu {
    position:absolute; /* позиционируем относительно .zodiac-dropdown */
    top:50px; /* отступ сверху (ниже кнопки) */
    left: 0; /* прижимаем к правому краю */   
    min-width:220px; /* минимальная ширина меню */  
    z-index: 99999; /* гарантирует, что dropdown будет поверх всех элементов */
    background:rgba(0,0,0,0.9); /* тёмный полупрозрачный фон */          
    border:1px solid rgba(255,255,255,0.08); /* тонкая рамка */
    border-radius:14px; /* скругление */    
    display:flex; /* flex-контейнер */
    flex-direction:column; /* элементы в колонку */
    gap:4px; /* расстояние между пунктами */    
    opacity:0; /* изначально невидимо */
    transform:translateY(10px) scale(0.98); /* немного сдвинуто вниз и уменьшено */
    pointer-events:none; /* нельзя кликать пока скрыто */    
    transition:0.25s ease; /* плавная анимация */
    overflow: hidden; /* обрезает внутренние элементы по радиусу (чтобы не вылезали за края) */
    cursor:pointer;
    
}

.main-menu.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.main-menu a {
    padding:10px 12px; /* внутренние отступы */
    color:rgba(255,255,255,0.7); /* слегка прозрачный текст */
    text-decoration:none; /* убираем подчеркивание */
    font-size:14px; /* размер текста */    
    transition:0.2s ease; /* плавный hover */    
    cursor:pointer; /* курсор "рука" */
}

.main-menu a:hover {
    background:rgba(255,255,255,0.08); /* подсветка фона */
    color:#fff; /* текст становится белым */
}

.main-menu a.active {
    background:rgba(255,255,255,0.15); /* более яркий фон */
    color:#fff; /* белый текст */
}






.arrow {
    margin-left: 6px;
    font-size: 12px;
    opacity: 0.7;
}

.main-trigger {
    display: flex;
    align-items: center;
    gap: 6px; /* аккуратный отступ между текстом и стрелкой */
}

/* стрелка в стиле iOS */
.arrow {
    font-size: 14px;
    line-height: 1;
    opacity: 0.7;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

/* при наведении — чуть ярче */
.main-trigger:hover .arrow {
    opacity: 1;
}

/* при открытии — поворот */
.main-dropdown.open .arrow {
    transform: rotate(180deg);
}












/* Применяется только на экранах <= 768px (планшеты и мобильные) */
@media (max-width: 768px){

    .footer-inner{
        grid-template-columns:1fr; /* делаем 1 колонку вместо нескольких (вертикальный футер) */
        gap:20px; /* расстояние между блоками футера */
        text-align:center; /* выравниваем текст по центру */
        align-items:center; /* выравниваем элементы по центру по горизонтали */
    }

    .nav-header-2{
        padding:10px; /* уменьшаем внутренние отступы навбара для мобильных */
    }

    .nav-header-item{
        font-size:14px; /* уменьшаем размер текста пунктов меню */
        padding:0 10px; /* уменьшаем горизонтальные отступы */
        height:34px; /* уменьшаем высоту кнопок меню */
    }

    .nav-header-left{
        gap:6px; /* уменьшаем расстояние между пунктами меню */
    }

    .footer-block{
        display:flex; /* включаем flex */
        flex-direction:column; /* располагаем элементы вертикально */
        align-items:center; /* центрируем элементы */
    }

    .footer-text{
        text-align:center; /* текст в футере по центру */
    }

    .footer-links{
        align-items:center; /* выравнивание по вертикали */
        text-align:center; /* текст по центру */
        justify-content:center; /* центрируем ссылки по горизонтали */
    }

    :root{
        --card-width: clamp(95px, 42vw, 180px);  /* задаём адаптивную ширину карточек:  минимум 95px, максимум 180px,  между ними — 42% ширины экрана */
    }

    .taro-carousel{
        padding:0 10px; /* уменьшаем боковые отступы карусели */
    }

    .left{
        transform:translate(-115%, -50%) scale(0.8);  /* левая карта:   - сдвигается левее центра   - немного уменьшается (scale 0.8) */
    }

    .right{
        transform:translate(15%, -50%) scale(0.8);   /* правая карта:    - сдвигается правее центра  - тоже уменьшается */
    }
}



/* Применяется только для экранов шириной до 360px (очень маленькие смартфоны) */
@media (max-width:360px){

    /* Блок верхнего меню (вторая навигация) */
    .nav-header-2{
        gap:6px; /* уменьшает расстояние между элементами меню */
        padding:10px; /* внутренние отступы блока (сверху/снизу и по бокам) */
    }

    /* Отдельный пункт меню */
    .nav-header-item{
        height:34px; /* уменьшает высоту кнопки/пункта меню */
        font-size:12px; /* уменьшает размер текста внутри пункта меню */
        padding:0 6px; /* убирает вертикальные отступы, оставляет маленькие горизонтальные */
    }

    /* Подвал сайта */
    .site-footer{
        padding:24px 14px; /* уменьшенные отступы внутри футера для компактности */
    }

    /* Заголовки в футере */
    .footer-title{
        font-size:13px; /* уменьшенный размер заголовков */
    }

    /* Основной текст в футере */
    .footer-text{
        font-size:12px; /* уменьшенный размер обычного текста */
    }

    /* Ссылки в футере */
    .site-footer a{
        font-size:12px; /* уменьшенный размер ссылок */
    }

}