/*
  Цвета взяты с карточек Telegram-канала,
  чтобы сайт и канал выглядели как одно целое.
*/
:root {
    --bg: #F7ECDC;        /* тёплый кремовый фон */
    --bg-light: #FCF6EC;  /* светлый крем (центр градиента, карточки) */
    --plum: #5E1A35;      /* сливовый — заголовки */
    --plum-soft: #7F4A61; /* приглушённый сливовый — обычный текст */
    --wine: #7A2E3E;      /* бордовый — цены */
    --gold: #B8904A;      /* золото — рамки, звёздочки */
    --gold-text: #82632A; /* золото потемнее — для мелкого текста, чтобы читался на креме */
    --copper: #C0612B;    /* рыжий, медный — "фирменная" деталь Вилки */
    --copper-on-dark: #E8874E; /* рыжий посветлее — для тёмного подвала */

    /* Цвета для отдельных элементов — чтобы в тёмной теме менять их независимо */
    --button-bg: #5E1A35;     /* фон кнопок */
    --button-hover: #7A2E3E;  /* фон кнопок при наведении */
    --button-text: #FCF6EC;   /* текст на кнопках */
    --hover-bg: #F3E3CC;      /* подсветка вариантов в тесте */
    --footer-bg: #5E1A35;     /* фон подвала */
    --footer-text: #F7ECDC;   /* текст подвала */
    --header-glass: rgba(252, 246, 236, 0.78);   /* полупрозрачный фон шапки при прокрутке */
}

/* ===== ТЁМНАЯ ТЕМА =====
   Меняем только значения переменных — все правила ниже подхватят их сами.
   Тёмная тема включается в двух случаях:
   1) в системе включён тёмный режим, и посетитель не выбрал светлую тему вручную;
   2) посетитель нажал кнопку 🌙 (тогда у <html> появляется data-theme="dark") */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #1C0E15;
        --bg-light: #2A1520;
        --plum: #F3DFC8;
        --plum-soft: #CDB2A6;
        --wine: #E8A8B8;
        --gold: #CDA562;
        --gold-text: #CDA562;   /* на тёмном фоне обычное золото и так хорошо читается */
        --copper: #E8874E;
        --button-bg: #7A2A4E;
        --button-hover: #95355F;
        --button-text: #FCF6EC;
        --hover-bg: #3A1D2B;
        --footer-bg: #120910;
        --footer-text: #CDB2A6;
        --header-glass: rgba(42, 21, 32, 0.78);
        color-scheme: dark;     /* полосы прокрутки и прочее браузерное тоже станет тёмным */
    }
}

:root[data-theme="dark"] {
    --bg: #1C0E15;
    --bg-light: #2A1520;
    --plum: #F3DFC8;
    --plum-soft: #CDB2A6;
    --wine: #E8A8B8;
    --gold: #CDA562;
    --gold-text: #CDA562;
    --copper: #E8874E;
    --button-bg: #7A2A4E;
    --button-hover: #95355F;
    --button-text: #FCF6EC;
    --hover-bg: #3A1D2B;
    --footer-bg: #120910;
    --footer-text: #CDB2A6;
    --header-glass: rgba(42, 21, 32, 0.78);
    color-scheme: dark;
}

/* Всё "рыжее": класс .ginger можно поставить любому слову */
.ginger {
    color: var(--copper);
}

* {
    box-sizing: border-box;
}

/* Атрибут hidden должен прятать элемент, даже если у него свой display */
[hidden] {
    display: none !important;
}

/* Плавная прокрутка при клике на пункты меню */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Lora', Georgia, serif;   /* если Lora не загрузится, будет Georgia */
    background-color: var(--bg);
    color: var(--plum-soft);
    line-height: 1.6;
    font-size: 18px;
    transition: background-color 0.4s, color 0.4s;   /* тема меняется плавно */
}

h1, h2, h3 {
    color: var(--plum);
    font-weight: 600;
}

/* ===== ШАПКА ===== */
.header {
    position: sticky;                   /* шапка "прилипает" к верху при прокрутке */
    top: 0;
    z-index: 10;                        /* и лежит поверх остального */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 32px;
    /* Наверху страницы шапка прозрачная — сливается с первым экраном */
    background-color: transparent;
    border-bottom: 1px solid var(--gold);
    transition: background-color 0.4s, padding 0.3s, box-shadow 0.4s;
}

/* Вторая, тонкая линия под основной — двойная рамка, как у карт на сайте */
.header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 1px;
    background-color: var(--gold);
    opacity: 0.45;
    pointer-events: none;
}

/* Когда начинаешь листать (класс .scrolled ставит script.js):
   шапка компактнее, фон — матовое стекло (полупрозрачный + размытие того, что под ним), мягкая тень */
.header.scrolled {
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: var(--header-glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 20px rgba(94, 26, 53, 0.08);
}

/* Луна внутри эмблемы-карты: рыжее колечко, освещённая часть растёт при прокрутке (script.js) */
.logo-mark .moon-ring {
    fill: none;
    stroke: var(--copper);
    stroke-width: 1.2;
}

/* Полнолуние — эмблема светится */
.logo-mark.full {
    filter: drop-shadow(0 0 4px rgba(192, 97, 43, 0.7));
}

/* "Вилка" — рукописным шрифтом, рыжим, чуть крупнее — как подпись */
.logo-script {
    font-family: 'Marck Script', 'Lora', cursive;
    font-weight: 400;
    font-size: 1.45em;
    line-height: 0.9;
    color: var(--copper);
}

/* Подпись "эзотерика с рыжей" — в обрамлении звёздочек */
.header .logo-tagline::before,
.header .logo-tagline::after {
    content: "✦";
    font-style: normal;
    font-size: 8px;
    color: var(--gold);
    vertical-align: 2px;
}

.header .logo-tagline::before { margin-right: 5px; }
.header .logo-tagline::after  { margin-left: 5px; }

/* Блик по "Вилка гадает": поверх каждого слова — его копия (из data-text),
   внутри букв которой раз в 7 секунд пробегает светлая полоса (как на "Эзотерике с рыжей") */
.shine {
    position: relative;
    display: inline-block;
}

.shine::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: transparent;
    background: linear-gradient(110deg,
        transparent 42%, #E8B954 47%, #FFF1C8 50%, #E8B954 53%, transparent 58%);
    background-size: 300% 100%;
    background-position: 0 0;           /* в покое полоса за краем — не видно */
    -webkit-background-clip: text;
    background-clip: text;
    pointer-events: none;
    animation: logo-shine 7s ease-in-out 4s infinite;
}

/* Второе слово ловит блик чуть позже — будто полоса идёт слева направо через оба слова */
.shine + .shine::after {
    animation-delay: 4.35s;
}

@keyframes logo-shine {
    0%        { background-position: 100% 0; }
    15%, 100% { background-position: 0 0; }
}

/* Логотип: эмблема слева, название в две строки справа */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.logo-mark {
    width: 26px;
    height: 34px;
    flex-shrink: 0;
    fill: none;
    stroke: var(--gold);
    stroke-width: 2;
    transition: transform 0.4s;
}

.logo-mark .thin {
    stroke-width: 0.8;
    opacity: 0.7;
}

.logo-mark .moon {
    fill: var(--copper);                /* рыжий полумесяц */
    stroke: none;
}

.logo-mark .star {
    fill: var(--gold);
    stroke: none;
}

/* При наведении карта слегка поворачивается — как будто её тянут из колоды */
.logo:hover .logo-mark {
    transform: rotate(-8deg);
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.logo-name {
    color: var(--plum);
    font-weight: 700;
    font-size: 20px;
}

.logo-tagline {
    color: var(--copper);
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0.5px;
}

nav {
    margin-left: auto;                  /* меню прижимается вправо, к кнопкам */
}

/* Пункт меню: луна слева + название в строку.
   Луны заодно разделяют пункты — отдельные звёздочки между ними не нужны */
nav a {
    position: relative;                 /* чтобы линию-подчёркивание ставить относительно ссылки */
    display: inline-flex;
    align-items: center;
    gap: 6px;                           /* расстояние от луны до слова */
    color: var(--plum-soft);
    text-decoration: none;
    margin-left: 22px;
    font-size: 17px;
    transition: color 0.2s;
}

nav a:hover {
    color: var(--gold-text);
}

/* Золотая линия под пунктом меню. Сначала сжата в точку (scaleX(0)) —
   при наведении "вырастает" из центра в обе стороны */
nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 1.5px;
    background-color: var(--gold);
    transform: scaleX(0);               /* transform-origin по умолчанию — центр */
    transition: transform 0.3s;
}

nav a:hover::after {
    transform: scaleX(1);
}

/* Пункт раздела, который сейчас на экране (класс .active ставит JavaScript):
   текст темнее, а его луна загорается */
nav a.active {
    color: var(--plum);
}

/* Подчёркивание (линия ::after) — только при наведении, не у текущего пункта:
   новое оформление считает текущий раздел по луне, и вторая отметка не нужна */
nav a::after {
    left: 20px;                         /* 14px луна + 6px зазор: линия только под словом */
    width: calc(100% - 20px);
}

/* Луна слева от слова (сами луны вставляет script.js в каждый пункт).
   У каждого пункта своя фаза, как на лунном пути вдоль страницы:
   "Обо мне" — новолуние, дальше луна растёт от раздела к разделу.
   Обычно луна бледная, у текущего раздела — загорается и чуть светится */
.nav-moon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;                     /* луна не сжимается, даже если места мало */
    opacity: 0.4;
    transition: opacity 0.3s, filter 0.3s, transform 0.3s;
}

nav a:hover .nav-moon {
    opacity: 0.75;
}

nav a.active .nav-moon {
    opacity: 1;
    transform: scale(1.15);
    filter: drop-shadow(0 0 3px rgba(226, 174, 60, 0.8));   /* золотое свечение */
}

/* Луна рисуется кодом (SVG): ring — золотое колечко, lit — освещённая часть */
.nav-moon .ring {
    fill: none;
    stroke: var(--gold);
    stroke-width: 1.3;
}

.nav-moon .lit {
    fill: var(--gold);
}

/* Кнопка "Записаться" внутри меню — только для выпадающего меню на телефоне.
   На компьютере её не показываем (в шапке есть своя) */
.nav-cta {
    display: none;
}

/* Кнопка "Записаться" в шапке */
.header-cta {
    flex-shrink: 0;
    margin-left: 28px;
    padding: 8px 20px;
    border-radius: 40px;
    border: 1px solid var(--gold);
    background-color: var(--button-bg);
    color: var(--button-text);
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.2s;
}

.header-cta:hover {
    background-color: var(--button-hover);
}

/* Блик по кнопке "Записаться": раз в 6 секунд по ней пробегает светлая полоса.
   overflow: hidden — полоса не вылезает за края кнопки */
.header-cta {
    position: relative;
    overflow: hidden;
}

.header-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg,
        transparent 42%, rgba(255, 240, 200, 0.45) 50%, transparent 58%);
    background-size: 300% 100%;
    background-position: 0 0;           /* в покое полоса за краем — не видно */
    pointer-events: none;
    animation: cta-shine 6s ease-in-out 3s infinite;
}

@keyframes cta-shine {
    0%        { background-position: 100% 0; }
    25%, 100% { background-position: 0 0; }
}

/* Кнопка смены темы — круглая, с золотой рамкой */
.theme-toggle {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin-left: 20px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    background-color: var(--bg);
    font-size: 18px;
    cursor: pointer;
    transition: transform 0.3s;
}

.theme-toggle:hover {
    transform: rotate(20deg);
}

/* Кнопка меню ☰ — на компьютере спрятана, показывается только на телефоне (см. внизу) */
.menu-toggle {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    background-color: var(--bg);
    color: var(--plum);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

/* ===== ПЕРВЫЙ ЭКРАН ===== */
.hero {
    padding: 48px 20px;
    /* radial-gradient — круговой градиент: светлее в центре, темнее по краям */
    background: radial-gradient(ellipse at center, var(--bg-light) 0%, var(--bg) 70%);
}

.frame {
    max-width: 760px;
    margin: 0 auto;
    padding: 72px 24px;
    text-align: center;
    border: 2px solid var(--gold);
    /* outline — вторая рамка; outline-offset сдвигает её внутрь (минус) */
    outline: 1px solid var(--gold);
    outline-offset: -12px;
}

.label {
    color: var(--gold-text);
    font-weight: 600;
    letter-spacing: 5px;                /* разрядка между буквами */
    font-size: 14px;
    margin: 0;
}

.hero h1 {
    font-size: 64px;
    text-transform: uppercase;          /* все буквы заглавные */
    letter-spacing: 2px;
    margin: 12px 0;
}

.subtitle {
    font-style: italic;
    font-size: 22px;
}

/* ===== РАЗДЕЛИТЕЛЬ: линия — звёздочка — линия ===== */
.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--gold);
    margin: 0 auto 24px;
}

/* ::before и ::after — "псевдоэлементы": CSS сам рисует линии слева и справа */
.divider::before,
.divider::after {
    content: "";
    width: 120px;
    height: 1px;
    background-color: var(--gold);
}

/* ===== КНОПКА ===== */
.button {
    display: inline-block;
    margin-top: 16px;
    padding: 14px 32px;
    background-color: var(--button-bg);
    color: var(--button-text);
    text-decoration: none;
    border-radius: 40px;
    border: 1px solid var(--gold);
    font-family: inherit;               /* у <button> свой шрифт — берём шрифт страницы */
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

.button:hover {
    background-color: var(--button-hover);
    transform: translateY(-2px);        /* кнопка чуть приподнимается */
}

/* Контурная кнопка: прозрачная, с золотой рамкой — "второстепенное действие" */
.button-outline {
    background-color: transparent;
    color: var(--plum);
}

.button-outline:hover {
    background-color: var(--hover-bg);
}

/* Две кнопки на первом экране — рядом, а на узком экране друг под другом */
.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 14px;
}

/* ===== РАЗДЕЛЫ ===== */
.section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 64px 20px;
    text-align: center;
    scroll-margin-top: 60px;            /* при переходе по меню раздел не прячется под шапкой */
}

.section h2 {
    font-size: 40px;
    margin: 0 0 12px;
}

.section-intro {
    font-style: italic;
    margin-bottom: 32px;
}

/* ===== КАРТОЧКИ ===== */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    text-align: left;
}

/* ===== КАРТОЧКИ КАК КАРТЫ ТАРО =====
   Двойная рамка (outline внутри), золотые уголки (4 маленькие картинки фоном), мягкая тень */
/* Уголки: одна и та же завитушка, отражённая для каждого угла.
   Картинки нарисованы прямо в коде (SVG), %23 — это знак # внутри ссылки.
   Храним их в переменной — ими пользуются и карточки (.card), и шаги записи (.step) */
:root {
    --card-corners:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M2 26V10Q2 2 10 2H26' fill='none' stroke='%23B8904A' stroke-width='1.3'/%3E%3Cpath d='M9 5.5L10 8.5L13 9.5L10 10.5L9 13.5L8 10.5L5 9.5L8 8.5Z' fill='%23B8904A'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cg transform='translate(28 0) scale(-1 1)'%3E%3Cpath d='M2 26V10Q2 2 10 2H26' fill='none' stroke='%23B8904A' stroke-width='1.3'/%3E%3Cpath d='M9 5.5L10 8.5L13 9.5L10 10.5L9 13.5L8 10.5L5 9.5L8 8.5Z' fill='%23B8904A'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cg transform='translate(0 28) scale(1 -1)'%3E%3Cpath d='M2 26V10Q2 2 10 2H26' fill='none' stroke='%23B8904A' stroke-width='1.3'/%3E%3Cpath d='M9 5.5L10 8.5L13 9.5L10 10.5L9 13.5L8 10.5L5 9.5L8 8.5Z' fill='%23B8904A'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cg transform='translate(28 28) scale(-1 -1)'%3E%3Cpath d='M2 26V10Q2 2 10 2H26' fill='none' stroke='%23B8904A' stroke-width='1.3'/%3E%3Cpath d='M9 5.5L10 8.5L13 9.5L10 10.5L9 13.5L8 10.5L5 9.5L8 8.5Z' fill='%23B8904A'/%3E%3C/g%3E%3C/svg%3E");
}

.card {
    background-color: var(--bg-light);
    background-image: var(--card-corners);
    background-position: top 12px left 12px, top 12px right 12px, bottom 12px left 12px, bottom 12px right 12px;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    padding: 30px 26px;
    border: 1px solid var(--gold);
    border-radius: 12px;
    outline: 1px solid rgba(184, 144, 74, 0.45);
    outline-offset: -7px;               /* вторая, тонкая рамка внутри — как у карт */
    box-shadow: 0 8px 20px rgba(94, 26, 53, 0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}

/* При наведении карта чуть приподнимается и мягко светится золотом */
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(94, 26, 53, 0.12), 0 0 18px rgba(226, 174, 60, 0.25);
}

/* Римский номер вверху — как у арканов */
.card-num {
    display: block;
    text-align: center;
    color: var(--gold-text);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 3px;
    margin-bottom: 6px;
}

/* ----- Услуги: всё по центру, под названием — звёздочка-разделитель ----- */
#services .card {
    text-align: center;
}

#services .card h3::after {
    content: "✦";
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--gold);
}

/* Золотые значки услуг (SVG) */
.card-icon {
    color: var(--gold);                 /* currentColor в SVG возьмёт этот цвет */
}

.card-icon svg {
    width: 52px;
    height: 52px;
    fill: none;                         /* фигуры без заливки... */
    stroke: currentColor;               /* ...только золотой контур */
    stroke-width: 1.6;
    stroke-linecap: round;              /* скруглённые концы линий */
    stroke-linejoin: round;
}

.card-icon .fill {
    fill: currentColor;                 /* залитые детали: звёздочка, песок, луна */
    stroke: none;
}

.card-icon .paper {
    fill: var(--bg-light);              /* передняя карта закрывает заднюю */
}

/* Предложение разбора после карты дня */
.day-cta {
    margin-top: 8px;
    animation: appear 0.6s 1.7s backwards;  /* появляется после переворота карты */
}

/* "Следующая карта откроется завтра" — появляется последней, после кнопки */
#come-back {
    animation: appear 0.6s 2s backwards;
}

.day-cta p {
    margin: 0;
    color: var(--plum);
    font-weight: 600;
}

.card h3 {
    font-size: 24px;
    margin: 8px 0;
}

.card-text {
    font-size: 16px;
}

/* Список цен: убираем точки списка и ставим цену вправо */
.price-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
}

/* Строка цены: "название ······· цена" — между ними золотая дорожка из точек, как в старинном меню.
   Как это устроено (приём "точки под текстом"):
   1) дорожка из точек идёт через ВСЮ строку, по линии букв последней строки;
   2) название и цена лежат поверх неё на фоне цвета карточки и закрывают точки под собой;
   3) видны точки только в промежутке между концом названия и ценой.
   Так длинное название ("Личность и сильные стороны") переносится по всей ширине карточки,
   а не сжимается в узкий столбик, и цена встаёт на уровень его последней строки */
.price-list li {
    position: relative;                 /* точки и цену ставим относительно строки */
    padding: 7px 0;
    font-size: 16px;
    line-height: 1.4;
    text-align: left;
}

/* Дорожка из точек: от левого края до правого, на высоте линии букв последней строки */
.price-list li::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(7px + 0.35em);         /* 7px — нижний отступ строки, 0.35em — подняться к линии букв */
    border-bottom: 2px dotted rgba(184, 144, 74, 0.7);
}

/* Строка-подсказка под ценой ("когда всё запутано…") — мелким курсивом, без точек */
.price-list li.price-hint {
    display: block;
    padding-top: 0;
    font-size: 13px;
    font-style: italic;
    color: var(--plum-soft);
}

.price-list li.price-hint::after {
    display: none;
}

/* В узких карточках услуг — чуть больше места для названий и цен */
#services .card {
    padding-left: 20px;
    padding-right: 20px;
}

/* Название: обычный текст, переносится по всей ширине карточки.
   position + z-index — чтобы лежать ПОВЕРХ дорожки из точек.
   --price-room — место под цену в конце последней строки (самая длинная цена "1 500 ₽" + зазоры) */
.price-list span:first-child {
    --price-room: 4.4em;
    position: relative;
    z-index: 1;
    /* Фон цвета карточки закрывает точки под буквами. Его ширина — всё название
       БЕЗ места под цену: там точки должны остаться видны.
       (У текста в несколько строк фон считается одной длинной полосой,
       поэтому "минус место под цену" отрезается именно от конца последней строки) */
    background: linear-gradient(var(--bg-light), var(--bg-light)) no-repeat;
    background-size: calc(100% - var(--price-room) + 6px) 100%;   /* +6px — зазор перед точками */
}

/* Место под цену — пустой "хвостик" в конце названия.
   \2060 — невидимый символ "не переносить": хвостик всегда держится за последнее слово.
   Если в строке не хватает места, на новую строку уходит слово вместе с хвостиком,
   поэтому цена никогда не налезает на текст */
.price-list span:first-child::after {
    content: "\2060";
    padding-right: var(--price-room);
}

/* :last-child — последний span в строке, то есть цена.
   Прижата к правому нижнему углу строки — на уровень последней строки названия */
.price-list span:last-child {
    position: absolute;
    z-index: 1;                         /* поверх точек */
    right: 0;
    bottom: 7px;
    padding-left: 6px;                  /* зазор после точек */
    background-color: var(--bg-light);
    color: var(--wine);
    font-weight: 600;
    white-space: nowrap;                /* цена не переносится на две строки */
}

/* Подсказка мелким шрифтом под названием услуги */
.price-hint {
    display: block;                     /* с новой строки, под названием */
    font-size: 13px;
    font-style: italic;
    color: var(--plum-soft);
    margin-top: 2px;
}

/* Комплекты по центру.
   flex + column — содержимое идёт столбиком, чтобы цену можно было прижать к низу */
.set {
    text-align: center;
    display: flex;
    flex-direction: column;
}

/* margin-top: auto забирает всё свободное место сверху —
   цена опускается вниз, и во всех карточках стоит на одной высоте */
.set .set-price {
    margin-top: auto;
    padding-top: 12px;
}

/* Плашка с бонусом в "Как записаться" — рыжая, как фирменная деталь Вилки */
.bonus {
    display: inline-block;
    max-width: 640px;
    margin: 8px auto 0;
    padding: 10px 24px;
    border: 1px dashed var(--copper);
    border-radius: 12px;
    color: var(--copper);
    font-size: 17px;
}

/* Плашка "выгода 250 ₽" */
.set-save {
    align-self: center;                 /* по ширине текста, а не на всю карточку */
    margin: 10px 0 0;
    padding: 3px 14px;
    border: 1px solid var(--copper);
    border-radius: 20px;
    color: var(--copper);
    font-size: 14px;
    font-style: italic;
}

.set-price {
    font-size: 26px;
    font-weight: 700;
    color: var(--wine);
    margin: 12px 0 0;
}

.set-price s {
    font-size: 18px;
    font-weight: 400;
    color: var(--plum-soft);
    opacity: 0.6;
    margin-right: 8px;
}

/* ===== КАРТА ДНЯ ===== */
.tarot-card {
    /* Сбрасываем стандартный вид кнопки браузера */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;                    /* курсор-"рука" при наведении */
    font-family: inherit;               /* шрифт как у страницы */

    width: 220px;
    height: 350px;
    margin: 8px auto 0;
    display: block;
    perspective: 1000px;                /* "глубина" сцены — без неё поворот выглядит плоским */
}

.tarot-inner {
    display: block;                     /* span по умолчанию строчный — делаем его блоком */
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;       /* дети живут в 3D */
}

/* Когда JavaScript добавит класс .flipped — карта открывается.
   transform — конечное положение (лицом к нам), animation — как она туда попадает */
.tarot-card.flipped .tarot-inner {
    transform: rotateY(180deg);
    animation: draw-card 1.8s ease-in-out;
}

/* Анимация "вытягивания" карты по кадрам (проценты — моменты времени):
   0–45%  — карта приподнимается и покачивается влево-вправо;
   45–80% — переворачивается с перехлёстом (200°, чуть дальше нужного);
   80–100% — качнулась обратно (172°) и встала ровно (180°).
   Во всех кадрах одинаковый набор функций transform — так браузер плавно переходит между ними */
@keyframes draw-card {
    0%   { transform: translateY(0)     rotateZ(0)     rotateY(0); }
    10%  { transform: translateY(-12px) rotateZ(-7deg) rotateY(-15deg); }
    22%  { transform: translateY(-18px) rotateZ(7deg)  rotateY(15deg); }
    34%  { transform: translateY(-22px) rotateZ(-4deg) rotateY(-10deg); }
    45%  { transform: translateY(-24px) rotateZ(0)     rotateY(0); }
    80%  { transform: translateY(-6px)  rotateZ(0)     rotateY(200deg); }
    90%  { transform: translateY(0)     rotateZ(0)     rotateY(172deg); }
    100% { transform: translateY(0)     rotateZ(0)     rotateY(180deg); }
}

/* Золотое свечение вокруг открывшейся карты */
.tarot-card.flipped .tarot-face {
    animation: card-glow 2.6s ease-out;
}

@keyframes card-glow {
    0%, 60% { box-shadow: 0 14px 26px rgba(94, 26, 53, 0.2); }
    75%     { box-shadow: 0 0 50px 12px rgba(205, 165, 98, 0.75); }
    100%    { box-shadow: 0 14px 26px rgba(94, 26, 53, 0.2); }
}

/* Когда карта уже открыта — она плавно поворачивается из стороны в сторону.
   Начинается через 1.8s (когда закончится вытягивание) и повторяется бесконечно.
   perspective() внутри transform даёт объём, чтобы поворот не выглядел плоским */
.tarot-card.flipped {
    animation: card-sway 5s ease-in-out 1.8s infinite;
}

@keyframes card-sway {
    0%, 100% { transform: perspective(900px) rotateY(0)      rotateZ(0); }
    25%      { transform: perspective(900px) rotateY(10deg)  rotateZ(1.5deg); }
    75%      { transform: perspective(900px) rotateY(-10deg) rotateZ(-1.5deg); }
}

/* Общее для обеих сторон: лежат друг на друге */
.tarot-back,
.tarot-face {
    position: absolute;
    inset: 0;                           /* растянуть на весь родитель */
    border-radius: 14px;
    border: 3px solid var(--gold);
    outline: 1px solid var(--gold);
    outline-offset: -12px;
    backface-visibility: hidden;        /* обратная сторона невидима */
    box-shadow: 0 14px 26px rgba(94, 26, 53, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Рубашка — сливовая, как на карточках канала */
.tarot-back {
    background: linear-gradient(#7A2A4E, #4A1429);
}

.back-star {
    color: var(--gold);
    font-size: 72px;
}

/* Лицо карты заранее повёрнуто, чтобы после переворота смотреть на нас */
.tarot-face {
    background-color: var(--bg-light);
    transform: rotateY(180deg);
    justify-content: space-between;
    padding: 24px 12px 26px;
    text-align: center;
}

.card-number {
    color: var(--gold-text);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 3px;
}

/* Рисунок карты (SVG вставляет JavaScript) */
.card-symbol svg {
    display: block;
    width: 150px;
    height: 150px;
    fill: none;
    stroke: var(--gold);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Части рисунка — по классам, которые указаны в script.js */
.card-symbol .f    { fill: var(--gold);   stroke: none; }    /* золотая заливка */
.card-symbol .c    { fill: var(--copper); stroke: none; }    /* рыжая заливка */
.card-symbol .cs   { stroke: var(--copper); }                /* рыжая линия */
.card-symbol .thin { stroke-width: 1; opacity: 0.6; }        /* тонкая линия */
.card-symbol .dash { stroke-dasharray: 3 5; stroke-width: 3; }  /* пунктир — струя воды */
.card-symbol .bolt { stroke-width: 3.5; }                    /* молния толще */

/* Название карты с золотой линией сверху — как на карточках канала */
.card-name {
    color: var(--plum);
    font-weight: 600;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding-top: 10px;
    border-top: 1px solid var(--gold);
    min-width: 70%;
}

.card-name.long {
    font-size: 14px;
    letter-spacing: 1px;
}

/* Подсказка сначала прозрачная и плавно появляется */
.card-message {
    max-width: 520px;
    min-height: 3.2em;                  /* место под текст заранее, чтобы страница не "прыгала" */
    margin: 28px auto 0;
    font-style: italic;
    font-size: 20px;
    color: var(--plum);
    opacity: 0;
    transition: opacity 0.6s 1.5s;      /* 0.6с длится, 1.5с задержка — после переворота */
}

.card-message.visible {
    opacity: 1;
}

/* Подпись "— Вилка" под подсказкой. Её рисует CSS, в HTML её нет */
.card-message::after {
    content: "— Вилка";
    display: block;
    margin-top: 8px;
    font-size: 17px;
    color: var(--copper);
}

/* Пока подсказки нет (карта не открыта) — и подписи нет */
.card-message:empty::after {
    content: none;
}

/* ===== ПОДБОР РАЗБОРА ===== */
/* Шесть вариантов — маленькие карты таро, разложенные веером */
.quiz-options {
    display: flex;
    flex-wrap: wrap;                    /* на узком экране карты переносятся во второй ряд */
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    max-width: 880px;
    margin: 12px auto 0;
    padding-top: 16px;                  /* место, чтобы выбранная карта могла "выехать" вверх */
}

/* Карта-вариант: значок сверху, подпись снизу, двойная рамка как у всех карт на сайте.
   --tilt и --lift задают наклон и высоту каждой карты в веере (ниже, через nth-child) */
.quiz-option {
    display: flex;
    flex-direction: column;             /* значок над подписью */
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 122px;
    min-height: 172px;
    padding: 18px 10px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.3;
    color: var(--plum);
    background-color: var(--bg-light);
    border: 1px solid var(--gold);
    border-radius: 10px;
    outline: 1px solid rgba(184, 144, 74, 0.45);
    outline-offset: -6px;               /* вторая рамка внутри */
    box-shadow: 0 6px 16px rgba(94, 26, 53, 0.1);
    cursor: pointer;
    transform: translateY(var(--lift, 0)) rotate(var(--tilt, 0deg));
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, color 0.3s;
}

/* Веер: крайние карты сильнее наклонены и чуть ниже — как карты в руке */
.quiz-option:nth-child(1) { --tilt: -6deg; --lift: 14px; }
.quiz-option:nth-child(2) { --tilt: -3.5deg; --lift: 5px; }
.quiz-option:nth-child(3) { --tilt: -1deg; --lift: 0px; }
.quiz-option:nth-child(4) { --tilt: 1deg; --lift: 0px; }
.quiz-option:nth-child(5) { --tilt: 3.5deg; --lift: 5px; }
.quiz-option:nth-child(6) { --tilt: 6deg; --lift: 14px; }

/* Наведение — карта приподнимается и выпрямляется, будто её берут из веера */
.quiz-option:hover {
    transform: translateY(calc(var(--lift, 0px) - 10px)) rotate(0deg);
    box-shadow: 0 12px 24px rgba(94, 26, 53, 0.16), 0 0 14px rgba(226, 174, 60, 0.25);
}

/* Значки на картах */
.quiz-icon {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: var(--gold);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.quiz-icon .dot {
    fill: var(--gold);
    stroke: none;
}

.quiz-icon .thin {
    stroke-width: 1;
    opacity: 0.6;
}

/* Выбранная карта (класс .active добавляет JavaScript): "вытянута" из веера —
   выше остальных, прямо, сливовая, как рубашка карты, и светится золотом */
.quiz-option.active {
    background-color: var(--button-bg);
    color: var(--button-text);
    transform: translateY(-16px) rotate(0deg);
    box-shadow: 0 14px 28px rgba(94, 26, 53, 0.25), 0 0 20px rgba(226, 174, 60, 0.5);
}

.quiz-option.active .quiz-icon {
    stroke: #E2B85C;                    /* на сливовом фоне золото чуть ярче */
}

.quiz-option.active .quiz-icon .dot {
    fill: #E2B85C;
}

/* На узком экране — два ряда по три карты, без веера (иначе наклоны выглядят беспорядочно) */
@media (max-width: 600px) {
    .quiz-options {
        gap: 10px;
        max-width: 400px;
    }

    .quiz-option {
        width: calc((100% - 20px) / 3);   /* три карты в ряд */
        min-height: 150px;
        font-size: 14px;
        --tilt: 0deg !important;
        --lift: 0px !important;
    }

    /* Карты стоят в два ряда — подъём наезжал бы на верхний ряд.
       Выбранную видно по цвету и свечению, а при касании она лишь чуть "вдавливается" */
    .quiz-option:hover,
    .quiz-option.active {
        transform: none;
    }

    .quiz-option:active {
        transform: scale(0.97);
    }
}

/* Совет "Вилка советует" — большая карта таро. Рамки, уголки и фон берутся из .card,
   здесь только размеры и то, что отличается */
.quiz-result {
    max-width: 560px;
    margin: 40px auto 0;
    padding: 40px 30px 32px;
    text-align: center;
    animation: appear 0.5s;             /* при появлении запускаем анимацию appear */
}

/* Совет не "приподнимается" при наведении, как маленькие карточки — он и так главный */
.quiz-result.card:hover {
    transform: none;
}

/* Значок выбранной карты — крупно, над надписью */
.result-icon .quiz-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 4px;
}

/* Вид разбора — строчкой над названием */
.result-kind {
    margin: 10px 0 0;
    font-size: 18px;
    color: var(--plum-soft);
}

.quiz-result h3 {
    font-size: 28px;
    margin: 2px 0 8px;
}

/* Цена — с воздухом сверху и снизу, чтобы не липла к описанию и к плашке с подарком */
.quiz-result .set-price {
    margin: 14px 0 18px;
}

/* Звёздочка-разделитель под названием, как в карточках услуг */
.quiz-result h3::after {
    content: "✦";
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--gold);
}

/* Плашка с подарком */
.result-gift {
    margin: 4px auto 6px;
    font-size: 16px;
}

/* Мелкая подсказка под кнопкой */
.result-note {
    margin: 10px 0 0;
    font-size: 14px;
    font-style: italic;
    color: var(--plum-soft);
}

/* @keyframes — описываем анимацию: из какого состояния в какое */
@keyframes appear {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== ОБО МНЕ ===== */
.about {
    display: flex;
    align-items: center;
    gap: 48px;
    max-width: 860px;
    margin: 0 auto;
    text-align: left;
}

.avatar {
    border-radius: 50%;                 /* 50% превращает квадрат в круг */
    background: linear-gradient(#7A2A4E, #4A1429);
    border: 3px solid var(--gold);
    outline: 1px solid var(--gold);
    outline-offset: 8px;
    color: var(--gold);
    font-size: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Монограмма "В" в круге + маленькая рыжая звёздочка сбоку */
.avatar {
    position: relative;
    font-weight: 600;
    font-size: 96px;
    line-height: 1;
}

.avatar::after {
    content: "✦";
    position: absolute;
    top: 22%;
    right: 20%;
    font-size: 26px;
    color: var(--copper);
}

/* ===== МОНЕТА: "В" с одной стороны, фото с другой ===== */
.coin {
    flex-shrink: 0;                     /* монета не сжимается, даже если текста много */
    width: 200px;
    height: 200px;
    perspective: 800px;                 /* "глубина" — без неё поворот выглядит плоским */
}

.coin-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;       /* стороны живут в 3D, а не сплющиваются */
    animation: coin-flip 10s ease-in-out infinite;
}

/* Навёл мышку — монета замирает, чтобы рассмотреть.
   (hover: hover) — только там, где есть мышка, то есть на компьютере */
@media (hover: hover) {
    .coin:hover .coin-inner {
        animation-play-state: paused;
    }
}

/* Обе стороны лежат друг на друге */
.coin-side {
    position: absolute;
    inset: 0;                           /* растянуть на всю монету */
    width: 100%;
    height: 100%;
    box-sizing: border-box;             /* рамка входит в размер, а не добавляется к нему */
    backface-visibility: hidden;        /* "изнанку" стороны не видно, когда она отвернулась */
    -webkit-backface-visibility: hidden;
}

/* Сторона с фото: изначально развёрнута спиной к нам */
.coin-photo {
    transform: rotateY(180deg);
    border-radius: 50%;
    object-fit: cover;                  /* фото заполняет круг без искажений */
    border: 3px solid var(--gold);
    outline: 1px solid var(--gold);
    outline-offset: 8px;
}

/* "Подброшенная" монетка: крутится от текущего угла (--spin-from) до стороны с фото (--spin-to).
   Класс .coin-spin ставит script.js в момент, когда загорается орбита.
   !important — чтобы перебить обычную анимацию и паузу при наведении */
.coin-inner.coin-spin {
    animation: coin-spin 1.6s cubic-bezier(0.25, 0.8, 0.3, 1) !important;
}

@keyframes coin-spin {
    from { transform: rotateY(var(--spin-from)); }
    to   { transform: rotateY(var(--spin-to)); }
}

/* Сценарий вращения на 10 секунд:
   0–40% — видна "В", 40–50% — переворот, 50–90% — видно фото, 90–100% — переворот обратно */
@keyframes coin-flip {
    0%, 40%  { transform: rotateY(0deg); }
    50%, 90% { transform: rotateY(180deg); }
    100%     { transform: rotateY(360deg); }
}

/* Если человек в настройках системы просил "меньше анимации" — не крутим сами,
   а переворачиваем монету только при наведении мышки */
@media (prefers-reduced-motion: reduce) {
    .coin-inner {
        animation: none;
        transition: transform 0.8s;
    }
    .coin:hover .coin-inner {
        transform: rotateY(180deg);
    }
}

.about-text h2 {
    margin-top: 0;
}

/* ===== ОТЗЫВЫ ===== */
.review {
    margin: 0;                          /* у figure есть свой отступ — убираем */
    position: relative;
    padding-top: 62px;
    display: flex;
    flex-direction: column;             /* текст и подпись — столбиком */
    text-align: center;                 /* как на карте — всё по центру */
}

/* Большая золотая кавычка по центру вверху, как знак на карте */
.review::before {
    content: "“";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 72px;
    line-height: 1;
    color: var(--gold);
}

.review blockquote {
    margin: 0;
    font-style: italic;
    font-size: 17px;
    line-height: 1.6;
}

/* Подпись внизу, над ней — звёздочка-разделитель */
.review figcaption {
    margin-top: auto;                   /* auto "отталкивает" подпись к низу карточки */
    padding-top: 16px;
    color: var(--plum);
    font-weight: 600;
    font-size: 15px;
}

.review figcaption::before {
    content: "✦";
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--gold);
}

/* ===== ЧАСТЫЕ ВОПРОСЫ ===== */
.faq {
    max-width: 720px;
    margin: 0 auto;
    text-align: left;
}

.faq details {
    border-bottom: 1px solid rgba(184, 144, 74, 0.5);
    padding: 0 14px;
    transition: background-color 0.3s;
}

/* Открытый вопрос — на светлой подложке со скруглёнными углами, чтобы было видно, что читаешь.
   Линию снизу прячем: подложка сама отделяет вопрос */
.faq details[open] {
    background-color: var(--bg-light);
    border-radius: 10px;
    border-bottom-color: transparent;
}

.faq summary {
    list-style: none;                   /* убираем стандартный треугольник браузера */
    cursor: pointer;
    padding: 18px 40px 18px 28px;       /* слева место под звёздочку */
    position: relative;
    color: var(--plum);
    font-weight: 600;
}

/* Золотая звёздочка перед каждым вопросом */
.faq summary::before {
    content: "✦";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gold);
    font-size: 15px;
    transition: transform 0.3s;
}

/* У открытого вопроса звёздочка поворачивается — маленькая "искорка" */
.faq details[open] summary::before {
    transform: translateY(-50%) rotate(45deg);
}

/* Текст ответа — с тем же отступом, что и вопрос */
.faq details p {
    padding-left: 28px;
}

.faq summary::-webkit-details-marker {
    display: none;                      /* то же самое для Safari */
}

/* Свой значок "+" справа */
.faq summary::after {
    content: "+";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gold);
    font-size: 28px;
    transition: transform 0.3s;
}

/* [open] — атрибут, который браузер ставит открытому details. Поворачиваем "+" в "×" */
.faq details[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
}

.faq details p {
    margin: 0 0 18px;
    animation: appear 0.4s;
}

/* ===== ОЖИВЛЕНИЕ ===== */

/* Мерцающие звёзды на первом экране */
.hero {
    position: relative;
    overflow: hidden;                   /* звёзды не вылезают за край */
}

.frame {
    position: relative;
    z-index: 1;                         /* рамка лежит поверх вееров карт */
    overflow: hidden;                   /* колесо зодиака не вылезает за рамку */
    /* фон рамки = фон экрана, чтобы карты "прятались" за ней, а не просвечивали */
    background: radial-gradient(ellipse at center, var(--bg-light) 0%, var(--bg) 90%);
    animation: fade-in 0.8s backwards;  /* сначала проявляется сама рамка */
}

@keyframes fade-in {
    from { opacity: 0; }
}

/* ----- Сцена: рамка + веера карт по бокам ----- */
.hero-stage {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
}

/* Веер — три карты, сложенные стопкой и развёрнутые в разные стороны */
.hero-fan {
    position: absolute;
    top: 50%;
    width: 110px;
    height: 175px;
    margin-top: -88px;                  /* половина высоты — чтобы веер стоял по центру */
    animation: fan-in 1s 1.6s backwards;   /* выезжают из-за рамки после текста */
}

.hero-fan-left  { left: -78px; }
.hero-fan-right { right: -78px; }

@keyframes fan-in {
    from { opacity: 0; transform: translateX(var(--fan-from)); }
}
.hero-fan-left  { --fan-from: 60px; }   /* левый веер выезжает влево из-под рамки */
.hero-fan-right { --fan-from: -60px; }  /* правый — вправо */

/* Рубашка карты — как у "Карты дня": сливовый градиент, золотая рамка, звезда */
.fan-card {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: linear-gradient(#7A2A4E, #4A1429);
    border: 2px solid var(--gold);
    box-shadow: 0 6px 16px rgba(94, 26, 53, 0.25);
    transform-origin: 50% 100%;         /* поворот вокруг нижнего края — как веер в руке */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 26px;
}

/* Тонкая внутренняя рамка */
.fan-card::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(184, 144, 74, 0.6);
    border-radius: 4px;
}

.fan-card::after {
    content: "✦";
}

/* Каждая карта повёрнута по-своему и тихонько покачивается.
   nth-child(1) — первая карта, (2) — вторая... */
.hero-fan-left .fan-card:nth-child(1)  { --tilt: -26deg; }
.hero-fan-left .fan-card:nth-child(2)  { --tilt: -14deg; }
.hero-fan-left .fan-card:nth-child(3)  { --tilt: -2deg;  }
.hero-fan-right .fan-card:nth-child(1) { --tilt: 26deg;  }
.hero-fan-right .fan-card:nth-child(2) { --tilt: 14deg;  }
.hero-fan-right .fan-card:nth-child(3) { --tilt: 2deg;   }

.fan-card {
    transform: rotate(var(--tilt));
    animation: fan-sway 6s ease-in-out infinite;
}
.fan-card:nth-child(2) { animation-delay: -2s; }   /* минус — начинают "с середины", вразнобой */
.fan-card:nth-child(3) { animation-delay: -4s; }

@keyframes fan-sway {
    0%, 100% { transform: rotate(var(--tilt)); }
    50%      { transform: rotate(calc(var(--tilt) * 1.15 + 1deg)); }
}

/* ----- Колесо зодиака за текстом ----- */
.hero-wheel {
    position: absolute;
    z-index: -1;                        /* под текстом, но над фоном рамки */
    top: 50%;
    left: 50%;
    width: 540px;
    max-width: 125%;
    aspect-ratio: 1;                    /* квадрат: высота = ширине */
    color: var(--gold);
    opacity: 0.16;                      /* едва заметно, как водяной знак */
    transform: translate(-50%, -50%);   /* центр колеса — в центр рамки (даже если анимация выключена) */
    animation: wheel-spin 150s linear infinite;   /* один оборот за 2,5 минуты */
}

.hero-wheel svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
}

.hero-wheel text {
    fill: currentColor;
    stroke: none;
    font-size: 9px;
    text-anchor: middle;                /* текст по центру точки */
    dominant-baseline: central;
}

/* translate(-50%, -50%) ставит центр колеса в центр рамки, rotate — вращает */
@keyframes wheel-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ----- Золотые уголки ----- */
.corner {
    position: absolute;
    width: 40px;
    height: 40px;
    fill: none;
    stroke: var(--gold);
    stroke-width: 1.6;
    animation: fade-in 1s 0.4s backwards;
}

.corner .thin { stroke-width: 0.8; }
.corner .fill { fill: var(--gold); stroke: none; }

/* scale(-1, 1) — зеркально по горизонтали, scale(1, -1) — по вертикали */
.corner-tl { top: 18px;    left: 18px; }
.corner-tr { top: 18px;    right: 18px;  transform: scale(-1, 1); }
.corner-bl { bottom: 18px; left: 18px;   transform: scale(1, -1); }
.corner-br { bottom: 18px; right: 18px;  transform: scale(-1, -1); }

/* ----- Текст появляется по очереди, будто меню открывают ----- */
.hero .label        { animation: appear 0.7s 0.3s backwards; }
.hero h1            { animation: appear 0.8s 0.6s backwards; }
.hero .divider      { animation: fade-in 0.4s 1s backwards; }
.hero .subtitle     { animation: appear 0.7s 1.4s backwards; }
.hero .hero-buttons { animation: appear 0.7s 1.7s backwards; }

/* ----- Блик по надписи "ЭЗОТЕРИКА С РЫЖЕЙ" -----
   Поверх надписи лежит её прозрачная копия (::after, текст берётся из data-text).
   У копии фон — светлая полоса, а background-clip: text показывает фон только внутри букв.
   Двигаем полосу — и по буквам бежит блик, а цвета самих слов не меняются */
.label-shine {
    position: relative;
    display: inline-block;              /* ширина = ширине текста, а не всей рамки — иначе полоса огромная */
}

.label-shine::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: transparent;
    /* узкая полоса: по краям яркое золото, в середине светлая "искра" */
    background: linear-gradient(110deg,
        transparent 45%, #D9A23A 48%, #F6D47E 50%, #D9A23A 52%, transparent 55%);
    background-size: 300% 100%;         /* полоса втрое шире надписи — есть куда "ехать" */
    background-position: 0 0;           /* в покое полоса за краем — блика не видно */
    -webkit-background-clip: text;
    background-clip: text;
    pointer-events: none;
    /* 2.5s — ждём, пока надпись проявится; потом блик повторяется каждые 5 секунд */
    animation: label-shine 5s ease-in-out 2.5s infinite;
}

/* Первые 35% времени блик пробегает слева направо, остальное время — пауза */
@keyframes label-shine {
    0%        { background-position: 100% 0; }
    35%, 100% { background-position: 0 0; }
}

/* ===== ЛУННЫЙ ПУТЬ вдоль всей страницы (рисует script.js) ===== */
.moon-path {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;                        /* под всеми разделами — как водяной знак */
    pointer-events: none;               /* не мешает кликать */
    overflow: hidden;
}

.moon-path svg {
    display: block;
}

/* Сама дорожка: золотой пунктир из точек */
.path-line {
    fill: none;
    stroke: var(--gold);
    stroke-width: 1.8;
    stroke-linecap: round;              /* круглые концы — чёрточки длиной 1 становятся точками */
    stroke-dasharray: 1 9;
    opacity: 0.6;
}

/* Луны: пока линия не дошла — еле видны, потом "загораются" */
.path-moon {
    opacity: 0.2;
    transition: opacity 1s;
}

.path-moon.lit {
    opacity: 0.75;
}

.moon-ring { fill: none; stroke: var(--gold); stroke-width: 1.3; }
.lit-part  { fill: var(--gold); }

.path-star {
    fill: var(--gold);
    opacity: 0.45;
}

/* Загоревшаяся луна мягко светится */
.path-moon.lit {
    filter: drop-shadow(0 0 5px rgba(226, 174, 60, 0.55));
}

/* Вспышка в момент, когда линия дошла до луны: золотой круг расширяется и тает.
   transform-box: fill-box — масштабируем круг вокруг его собственного центра.
   .quiet — луна уже горела до перестройки пути, второй раз не вспыхивает */
.moon-halo {
    fill: var(--gold);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.path-moon.lit:not(.quiet) .moon-halo {
    animation: moon-flash 1.4s ease-out;
}

@keyframes moon-flash {
    0%   { opacity: 0.7; transform: scale(0.6); }
    100% { opacity: 0;   transform: scale(2.6); }
}

/* Подписи у лун: название фазы капителью + смысл курсивом */
.moon-caption {
    fill: var(--gold-text);
    font-size: 14px;
    font-style: italic;
}

.moon-caption .cap-title {
    font-style: normal;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Мини-созвездия: тонкие линии + звёздочки, загораются как луны */
.path-const {
    opacity: 0.2;
    transition: opacity 1s;
}

.path-const.lit {
    opacity: 0.8;
}

.path-const line {
    stroke: var(--gold);
    stroke-width: 0.8;
}

.path-const .path-star {
    opacity: 1;
}

/* Финал: полнолуние у "Как записаться" — вокруг появляется ореол из двух тонких колец,
   звёздочки рядом мерцают, свечение луны "дышит" */
.moon-aura {
    opacity: 0;
    transition: opacity 1.2s;
}

.final.lit .moon-aura {
    opacity: 1;
}

/* "Лунные моря" на полнолунии — чуть темнее самой луны */
.crater {
    fill: #8A6526;
    opacity: 0.35;
}

.aura-ring {
    fill: none;
    stroke: var(--gold);
    stroke-width: 1;
    opacity: 0.5;
}

.aura-ring.thin {
    stroke-width: 0.7;
    stroke-dasharray: 1 5;              /* внешнее кольцо — пунктиром, как дымка */
    opacity: 0.4;
}

.aura-stars .path-star {
    opacity: 1;
}

/* Мерцание — только прозрачностью (без масштаба: в SVG он считался бы от угла страницы) */
.final.lit .aura-stars {
    animation: aura-twinkle 3s ease-in-out infinite;
}

@keyframes aura-twinkle {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
}

.final.lit {
    opacity: 1;                         /* полнолуние — ярче остальных лун */
    animation: final-glow 3s ease-in-out infinite;
}

@keyframes final-glow {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(226, 174, 60, 0.5)); }
    50%      { filter: drop-shadow(0 0 14px rgba(226, 174, 60, 0.9)); }
}

/* Звёздочка-проводник на конце линии */
.path-guide {
    opacity: 0;
    transition: opacity 0.4s;
}

.path-guide.visible {
    opacity: 1;
}

.path-guide .path-star {
    fill: #F6D47E;
    opacity: 1;
}

.guide-glow {
    fill: var(--gold);
    opacity: 0.3;
    transform-box: fill-box;
    transform-origin: center;
    animation: guide-pulse 2s ease-in-out infinite;
}

@keyframes guide-pulse {
    0%, 100% { transform: scale(0.8); opacity: 0.3; }
    50%      { transform: scale(1.3); opacity: 0.55; }
}

.path-guide {
    filter: drop-shadow(0 0 4px rgba(246, 212, 126, 0.9));   /* звёздочка светится */
}

/* Линии разделителя "вырастают" из звёздочки в центре */
.hero .divider::before,
.hero .divider::after {
    animation: line-grow 0.8s 1.1s backwards;
}
.hero .divider::before { transform-origin: right; }   /* левая линия растёт влево */
.hero .divider::after  { transform-origin: left; }    /* правая — вправо */

@keyframes line-grow {
    from { transform: scaleX(0); }
}

/* На узких экранах для вееров нет места по бокам — прячем их */
@media (max-width: 1100px) {
    .hero-fan {
        display: none;
    }
}

.sparkle {
    z-index: 2;                         /* звёзды мерцают поверх рамки (но текст обходят) */
    position: absolute;                 /* координаты задаст JavaScript */
    color: var(--gold);
    pointer-events: none;               /* звёзды не мешают кликать */
    animation: twinkle 3s infinite ease-in-out;   /* infinite — повторять бесконечно */
}

@keyframes twinkle {
    0%, 100% { opacity: 0.15; transform: scale(0.7); }
    50%      { opacity: 0.9;  transform: scale(1.1); }
}

/* Карта дня "парит", пока её не перевернули (:not — "кроме") */
.tarot-card:not(.flipped) .tarot-back {
    animation: float 3s infinite ease-in-out;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* Появление разделов при прокрутке.
   Класс .reveal добавляет JavaScript — если JS не сработает, всё просто будет видно сразу */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s, transform 0.8s;
}

.reveal.shown {
    opacity: 1;
    transform: none;
}

/* Плавающая кнопка записи */
/* ===== ВСПЛЫВАЮЩАЯ ПОДСКАЗКА ("тост") ===== */
.toast {
    position: fixed;
    left: 50%;
    bottom: 84px;                       /* над плавающей кнопкой записи */
    z-index: 30;
    max-width: min(420px, calc(100% - 32px));
    padding: 12px 20px;
    background-color: var(--plum);
    color: var(--bg);
    border: 1px solid var(--gold);
    border-radius: 12px;
    font-size: 15px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(94, 26, 53, 0.3);
    /* Спрятана: прозрачная и чуть ниже. pointer-events: none — не мешает кликам */
    opacity: 0;
    transform: translate(-50%, 12px);
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
}

.toast.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.float-button {
    position: fixed;                    /* fixed — прикреплена к окну, а не к странице */
    right: 20px;
    bottom: 20px;
    z-index: 20;
    padding: 12px 22px;
    background-color: var(--button-bg);
    color: var(--button-text);
    border: 1px solid var(--gold);
    border-radius: 40px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(94, 26, 53, 0.3);
    /* Спрятана: прозрачная и сдвинута вниз */
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
}

.float-button.visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* Уважаем тех, у кого в системе выключены анимации (бывает от укачивания) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
    /* у "подброшенной" монетки своё правило с !important — выключаем отдельно */
    .coin-inner.coin-spin {
        animation: none !important;
    }
    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* ===== КАК ЗАПИСАТЬСЯ: три шага-карты ===== */
.steps {
    list-style: none;                   /* прячем стандартные 1. 2. 3. — номера у нас свои */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;                          /* в этих промежутках — пунктирные "ниточки" */
    max-width: 880px;
    margin: 8px auto 32px;
    padding: 0;
}

/* Карта-шаг: светлая, с золотой рамкой и тонкой рамкой внутри — как карты в колоде */
.step {
    position: relative;
    padding: 26px 20px 24px;
    background-color: var(--bg-light);
    /* те же золотые уголки, что у остальных карточек */
    background-image: var(--card-corners);
    background-position: top 12px left 12px, top 12px right 12px, bottom 12px left 12px, bottom 12px right 12px;
    background-size: 22px 22px;
    background-repeat: no-repeat;
    border: 1px solid var(--gold);
    border-radius: 10px;
    outline: 1px solid rgba(184, 144, 74, 0.4);
    outline-offset: -8px;               /* вторая рамка внутри */
    box-shadow: 0 8px 20px rgba(94, 26, 53, 0.08);
}

/* Пунктирная золотая "ниточка" к следующему шагу. :not(:last-child) — у последнего её нет */
.step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -48px;                       /* ровно на ширину промежутка */
    width: 48px;
    border-top: 2px dotted var(--gold);
}

/* Римский номер, как у арканов */
.step-num {
    display: block;
    color: var(--gold-text);
    font-weight: 600;
    letter-spacing: 3px;
    font-size: 18px;
}

.step-icon {
    width: 38px;
    height: 38px;
    margin: 10px 0 4px;
    fill: none;
    stroke: var(--gold);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.step-icon .fill {
    fill: var(--gold);
    stroke: none;
}

.step h3 {
    margin: 4px 0 8px;
    font-size: 22px;
    color: var(--plum);
}

.step p {
    margin: 0;
    font-size: 16px;
}

.steps b {
    color: var(--plum);
}

/* На узких экранах шаги идут столбиком, а "ниточки" — вертикальные */
@media (max-width: 760px) {
    .steps {
        grid-template-columns: 1fr;
        gap: 32px;
        max-width: 420px;
    }

    .step:not(:last-child)::after {
        top: auto;
        bottom: -32px;
        right: auto;
        left: 50%;
        width: 0;
        height: 32px;
        border-top: none;
        border-left: 2px dotted var(--gold);
    }
}

/* ===== ОБО МНЕ: месяц на фоне, орбита, вступление, цитата ===== */

/* Раздел — "холст" для бледного месяца: месяц позиционируется относительно него */
#about {
    position: relative;
    overflow: hidden;                   /* месяц не вылезает за край раздела */
}

.about-moon {
    position: absolute;
    top: 24px;
    right: 0;
    width: 360px;
    fill: var(--gold);
    opacity: 0.07;                      /* едва заметно, как водяной знак */
    pointer-events: none;
}

.about {
    position: relative;                 /* текст и монета — поверх месяца */
    max-width: 940px;
}

/* Монета в центре "орбиты" */
.coin-wrap {
    position: relative;
    flex-shrink: 0;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orbit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;                  /* вспышка расходится чуть дальше орбиты — не обрезаем */
}

.orbit-line {
    fill: none;
    stroke: var(--gold);
    stroke-width: 1;
    stroke-dasharray: 2 6;              /* пунктир: 2 — штрих, 6 — промежуток */
    opacity: 0.3;                       /* пока лунный путь не дошёл — орбита приглушённая */
    transition: opacity 1s, stroke-width 1s;
}

.planet {
    fill: var(--gold);
    opacity: 0.4;
    transition: opacity 1s, filter 1s;
}

/* ----- Орбита "загорается", когда до неё доходит лунный путь (класс .lit ставит script.js) ----- */
.orbit.lit .orbit-line {
    opacity: 1;
    stroke-width: 1.8;
}

.orbit.lit .planet {
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(226, 174, 60, 1));     /* планеты светятся */
}

/* Планеты медленно плывут по кругу: вращается вся орбита, один оборот за 90 секунд */
.orbit.lit {
    animation: orbit-turn 90s linear infinite;
}

@keyframes orbit-turn {
    to { transform: rotate(360deg); }
}

/* Вспышка: золотое кольцо расходится от орбиты наружу и тает (один раз, в момент загорания) */
.orbit-flash {
    fill: none;
    stroke: var(--gold);
    stroke-width: 3;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.orbit.lit .orbit-flash {
    animation: orbit-flash 1.6s ease-out;
}

@keyframes orbit-flash {
    0%   { opacity: 0.8; transform: scale(0.85); }
    100% { opacity: 0;   transform: scale(1.15); }
}

.planet.copper {
    fill: var(--copper);                /* одна "планета" рыжая — фирменная деталь */
}

.planet.hollow {
    fill: var(--bg);                    /* пустое колечко */
    stroke: var(--gold);
    stroke-width: 1.5;
}

/* Вступление — крупнее и сливовым, как первая фраза при знакомстве */
.about-lead {
    font-size: 21px;
    line-height: 1.5;
    color: var(--plum);
}

/* Цитата: курсив, золотая линия слева */
.about-quote {
    margin: 22px 0 4px;
    padding: 2px 0 2px 20px;
    border-left: 2px solid var(--gold);
    font-style: italic;
    font-size: 20px;
    line-height: 1.5;
    color: var(--plum);
}

/* Подпись под цитатой — ровно под её текстом (с тем же отступом от линии) */
.about-quote + .signature {
    padding-left: 22px;
}

/* ===== ОБО МНЕ: подпись и три факта ===== */
.signature {
    margin-top: -4px;
    color: var(--copper);
    font-size: 17px;
}

.about-facts {
    list-style: none;
    display: flex;
    flex-wrap: wrap;                    /* не помещаются в строку — переносятся */
    gap: 8px;
    margin: 20px 0 0;
    padding: 0;
}

/* Каждый факт — "таблетка" с золотой рамкой, как варианты в тесте */
.about-facts li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--gold);
    border-radius: 30px;
    background-color: var(--bg-light);
    color: var(--plum);
    font-size: 15px;
}

.about-facts svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--gold);
    stroke-width: 1.6;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.about-facts .fill {
    fill: var(--gold);
    stroke: none;
}

.note {
    max-width: 640px;
    margin: 24px auto;
    font-style: italic;
    font-size: 16px;
}

.center {
    text-align: center;
}

/* ===== ПОДВАЛ ===== */
.footer {
    position: relative;
    padding: 56px 20px 0;
    background-color: var(--footer-bg);
    color: var(--footer-text);
    font-size: 15px;
    border-top: 1px solid var(--gold);
}

/* Круглый медальон со звёздочкой ровно на верхней линии подвала */
.footer::before {
    content: "✦";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);   /* сдвигаем на половину своего размера — центр на линии */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    background-color: var(--footer-bg);
    color: var(--gold);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Три колонки: первая шире (1.6 доли), две другие по 1 доле */
.footer-inner {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

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

.footer-about p {
    max-width: 320px;
    margin: 6px 0 0;
    opacity: 0.85;
}

.footer-title {
    margin: 0 0 4px;
    color: var(--gold);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 3px;
}

.footer a {
    color: var(--footer-text);
    text-decoration: none;
    transition: color 0.2s;
}

.footer a:hover {
    color: var(--gold);
}

/* Логотип в подвале: светлое название и более яркий рыжий на тёмном фоне */
.footer .logo-name {
    color: var(--footer-text);
}

.footer .logo-tagline {
    color: var(--copper-on-dark);
}

/* Ночное небо в подвале: россыпь золотых точек-звёзд.
   Каждый radial-gradient — одна точка: "at X% Y%" — где она, 1px — её размер.
   Точки нарисованы фоном, поэтому на любом экране остаются крошечными */
.footer {
    background-image:
        radial-gradient(circle at 4% 14%,  rgba(205, 165, 98, 0.55) 0 1.2px, transparent 1.8px),
        radial-gradient(circle at 12% 70%, rgba(205, 165, 98, 0.45) 0 1px,   transparent 1.6px),
        radial-gradient(circle at 21% 9%,  rgba(205, 165, 98, 0.6)  0 1.4px, transparent 2px),
        radial-gradient(circle at 30% 52%, rgba(205, 165, 98, 0.4)  0 1px,   transparent 1.6px),
        radial-gradient(circle at 38% 20%, rgba(205, 165, 98, 0.5)  0 1.1px, transparent 1.7px),
        radial-gradient(circle at 47% 78%, rgba(205, 165, 98, 0.45) 0 1px,   transparent 1.6px),
        radial-gradient(circle at 54% 30%, rgba(205, 165, 98, 0.55) 0 1.3px, transparent 1.9px),
        radial-gradient(circle at 62% 8%,  rgba(205, 165, 98, 0.45) 0 1px,   transparent 1.6px),
        radial-gradient(circle at 69% 62%, rgba(205, 165, 98, 0.5)  0 1.2px, transparent 1.8px),
        radial-gradient(circle at 76% 26%, rgba(205, 165, 98, 0.4)  0 1px,   transparent 1.6px),
        radial-gradient(circle at 83% 80%, rgba(205, 165, 98, 0.55) 0 1.3px, transparent 1.9px),
        radial-gradient(circle at 92% 50%, rgba(205, 165, 98, 0.45) 0 1px,   transparent 1.6px),
        radial-gradient(circle at 97% 88%, rgba(205, 165, 98, 0.5)  0 1.1px, transparent 1.7px),
        radial-gradient(circle at 8% 92%,  rgba(205, 165, 98, 0.4)  0 1px,   transparent 1.6px);
}

/* Полумесяц в правом верхнем углу — постоянного размера, не растягивается */
.footer-moon {
    position: absolute;
    top: 28px;
    right: 4%;
    width: 190px;
    fill: var(--gold);
    opacity: 0.14;
    pointer-events: none;
}

/* Содержимое подвала — поверх неба */
.footer-inner,
.footer-bottom {
    position: relative;
}

/* ----- Печать в подвале ----- */
.seal {
    display: block;
    width: 150px;
    margin-bottom: 4px;
}

.seal svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.seal-ring {
    fill: none;
    stroke: var(--gold);
    stroke-width: 1.2;
}

.seal-ring.thin {
    stroke-width: 0.6;
    opacity: 0.6;
}

.seal-text {
    fill: var(--footer-text);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
}

.seal-ginger {
    fill: var(--copper-on-dark);        /* "РЫЖЕЙ" — рыжим */
}

/* Кольцо с текстом медленно вращается вокруг центра печати (один оборот за минуту).
   transform-origin в пикселях картинки: центр печати — (80, 80) */
.seal-text-ring {
    transform-origin: 80px 80px;
    animation: seal-turn 60s linear infinite;
}

/* При наведении — чуть быстрее, будто печать "оживает" */
.seal:hover .seal-text-ring {
    animation-duration: 20s;
}

@keyframes seal-turn {
    to { transform: rotate(360deg); }
}

.seal-mark {
    fill: none;
    stroke: var(--gold);
    stroke-width: 1.6;
}

.seal-mark .thin {
    stroke-width: 0.7;
    opacity: 0.7;
}

.seal-mark .moon {
    fill: var(--copper-on-dark);
    stroke: none;
}

.seal-mark .star {
    fill: var(--gold);
    stroke: none;
}

/* Короткая золотая чёрточка под заголовками колонок */
.footer-title::after {
    content: "";
    display: block;
    width: 28px;
    height: 1px;
    margin-top: 8px;
    background-color: var(--gold);
}

/* Ссылки в колонках: при наведении сдвигаются вправо, а слева выезжает звёздочка.
   :not(.footer-about) — логотип в первой колонке не трогаем */
.footer-col:not(.footer-about) a {
    position: relative;
    transition: color 0.2s, transform 0.2s;
}

.footer-col:not(.footer-about) a::before {
    content: "✦";
    position: absolute;
    left: -16px;
    color: var(--gold);
    font-size: 11px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.2s;
}

.footer-col:not(.footer-about) a:hover {
    transform: translateX(14px);
}

.footer-col:not(.footer-about) a:hover::before {
    opacity: 1;
}

/* "Наверх" — маленькая кнопка-таблетка с полумесяцем */
.footer .to-top {
    padding: 3px 14px;
    border: 1px solid var(--gold);
    border-radius: 20px;
    color: var(--gold);
    transition: background-color 0.2s;
}

.footer .to-top:hover {
    background-color: rgba(205, 165, 98, 0.15);
    color: var(--gold);
}

/* Нижняя строка подвала */
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    max-width: 1000px;
    margin: 44px auto 0;
    padding: 20px 0 24px;
    border-top: 1px solid rgba(205, 165, 98, 0.3);   /* полупрозрачное золото */
    font-size: 13px;
    opacity: 0.8;
}

/* ===== ПЛАНШЕТ И ТЕЛЕФОН: меню прячется под ☰ =====
   Пунктов в меню много (и у каждого луна), на экранах уже 1360px они не влезают в одну строку */
@media (max-width: 1360px) {
    /* Шапка в одну строку: логотип слева, кнопки справа */
    .header {
        flex-wrap: wrap;                /* разрешаем меню уйти на новую строку, когда оно открыто */
        gap: 10px;
        padding: 10px 16px;
    }

    .logo {
        margin-right: auto;             /* auto "отталкивает" кнопки к правому краю */
    }

    .header-cta {
        margin: 0;
    }

    .theme-toggle {
        margin: 0;
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    /* .js — класс, который ставит скрипт в <head>. Если JavaScript не работает,
       кнопки ☰ не будет, а меню просто останется открытым — по сайту всё равно можно ходить */
    .js .menu-toggle {
        display: block;                 /* на телефоне кнопку ☰ показываем */
    }

    nav {
        display: flex;
        order: 3;                       /* order — меняем порядок: меню идёт после кнопок... */
        flex-basis: 100%;               /* ...и занимает всю ширину, то есть новую строку */
        flex-direction: column;
        text-align: center;
        padding: 8px 0 4px;
        border-top: 1px solid var(--gold);
    }

    /* Меню спрятано, пока шапка не получит класс .nav-open */
    .js nav {
        display: none;
    }

    .header.nav-open nav {
        display: flex;
        animation: appear 0.3s;
    }

    nav {
        margin-left: 0;
    }

    nav a {
        margin: 0 auto;                 /* пункт по центру строки */
        padding: 10px 0;                /* большие отступы — по пункту легко попасть пальцем */
        font-size: 17px;
    }

    nav a::after {
        bottom: 6px;
    }

    /* ----- Выпадающее меню в нашем стиле ----- */

    /* Открытое меню — на "матовом стекле", даже если страница ещё не прокручена */
    .header.nav-open {
        background-color: var(--header-glass);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    /* Россыпь звёзд-точек на фоне меню — как в подвале */
    nav {
        padding: 6px 0 14px;
        background-image:
            radial-gradient(circle at 8% 18%,  rgba(184, 144, 74, 0.6) 0 1.2px, transparent 1.8px),
            radial-gradient(circle at 92% 30%, rgba(184, 144, 74, 0.5) 0 1px,   transparent 1.6px),
            radial-gradient(circle at 14% 62%, rgba(184, 144, 74, 0.5) 0 1px,   transparent 1.6px),
            radial-gradient(circle at 86% 74%, rgba(184, 144, 74, 0.6) 0 1.3px, transparent 1.9px),
            radial-gradient(circle at 6% 90%,  rgba(184, 144, 74, 0.4) 0 1px,   transparent 1.6px),
            radial-gradient(circle at 95% 8%,  rgba(184, 144, 74, 0.5) 0 1.1px, transparent 1.7px);
    }

    /* Пункт: луна + название в строку, по центру; между пунктами — золотой пунктир */
    nav a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: min(280px, 100%);
        padding: 12px 0;
        border-bottom: 1px dotted rgba(184, 144, 74, 0.55);
    }

    /* Подчёркивание в столбике не нужно — текущий раздел видно по луне */
    nav a::after {
        display: none;
    }

    /* Текущий раздел: название темнее и жирнее, луна светится */
    nav a.active {
        font-weight: 600;
    }

    /* В столбике луны крупнее и все яркие (на компьютере — бледные, кроме текущей):
       текущий пункт тут и так виден по жирному названию и свечению */
    .nav-moon {
        transform: none;
        opacity: 1;
        display: block;
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    nav a.active .nav-moon {
        transform: none;
    }

    .nav-moon .ring {
        fill: none;
        stroke: var(--gold);
        stroke-width: 1.1;
    }

    .nav-moon .lit {
        fill: var(--gold);
    }

    nav a.active .nav-moon {
        filter: drop-shadow(0 0 4px rgba(226, 174, 60, 0.9));
    }

    /* Пункты выезжают по очереди: каждый следующий — на 50 мс позже (--i ставит script.js) */
    .header.nav-open nav a {
        animation: menu-item 0.4s backwards;
        animation-delay: calc(var(--i) * 50ms);
    }

    @keyframes menu-item {
        from { opacity: 0; transform: translateY(-8px); }
    }

    /* Кнопка ☰ плавно поворачивается, превращаясь в ✕ */
    .menu-toggle {
        transition: transform 0.3s;
    }

    .header.nav-open .menu-toggle {
        transform: rotate(90deg);
    }
}

/* Кнопка "Записаться" внутри меню — только на телефоне, где её нет в шапке */
@media (max-width: 600px) {
    nav a.nav-cta {
        display: flex;
        width: auto;
        margin: 16px auto 4px;
        padding: 10px 28px;
        border: 1px solid var(--gold);
        border-radius: 40px;
        background-color: var(--button-bg);
        color: var(--button-text);
    }

    nav a.nav-cta:hover {
        background-color: var(--button-hover);
        color: var(--button-text);
    }

    /* Луна на кнопке — светлая, на тёмном фоне кнопки */
    .nav-cta .nav-moon .ring { stroke: var(--button-text); }
    .nav-cta .nav-moon .lit  { fill: var(--button-text); }
}

/* ===== ТЕЛЕФОН ===== */
@media (max-width: 600px) {
    /* На телефоне кнопку "Записаться" из шапки убираем — есть плавающая внизу */
    .header-cta {
        display: none;
    }

    /* Подвал: колонки друг под другом, всё по центру */
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
    }

    .footer-col {
        align-items: center;
    }

    .footer-about p {
        margin: 6px auto 0;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        /* плавающая кнопка в подвале прячется, поэтому лишнее место снизу не нужно */
    }

    /* Чёрточка под заголовком колонки — тоже по центру */
    .footer-title::after {
        margin-left: auto;
        margin-right: auto;
    }

    /* Печать в подвале — по центру, как и всё остальное */
    .seal {
        align-self: center;
    }

    /* Полумесяц поменьше и чуть за краем экрана */
    .footer-moon {
        width: 130px;
        top: 20px;
        right: -24px;
    }

    .about {
        flex-direction: column;         /* на телефоне круг над текстом */
        text-align: center;
        gap: 28px;
    }

    .about-facts {
        justify-content: center;        /* факты тоже по центру */
    }

    .coin-wrap {
        width: 230px;
        height: 230px;
    }

    /* Текст по центру — линия слева у цитаты смотрится криво, ставим звёздочку сверху */
    .about-quote {
        border-left: none;
        padding: 0;
    }

    .about-quote + .signature {
        padding-left: 0;                /* на телефоне всё по центру — отступ не нужен */
    }

    .about-quote::before {
        content: "✦";
        display: block;
        margin-bottom: 6px;
        color: var(--gold);
        font-style: normal;
        font-size: 16px;
    }

    .about-moon {
        width: 240px;
        right: -40px;
    }

    .coin {
        width: 150px;
        height: 150px;
    }

    .avatar {
        font-size: 72px;
    }

    .frame {
        padding: 48px 16px;
    }

    .hero {
        padding: 32px 12px;
    }

    .hero h1 {
        /* clamp(мин, желаемое, макс): 7.5vw = 7.5% ширины экрана.
           Шрифт сам уменьшается на узких телефонах, но не меньше 26px и не больше 38px */
        font-size: clamp(26px, 7.5vw, 38px);
        letter-spacing: 1px;
    }

    .section h2 {
        font-size: 32px;
    }

    .divider::before,
    .divider::after {
        width: 60px;
    }
}