/* ==========================================================================
   МАГИЧЕСКАЯ СТРАНИЦА ПРАВИЛ — Rules Magic Page
   ========================================================================== */

/* Основной контейнер */
.v2-magic-rules {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════
   АТМОСФЕРА — Снегопад, Северное сияние, Звёзды
   ═══════════════════════════════════════════════════════════════════ */

.v2-magic-atmosphere {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Северное сияние */
.v2-magic-aurora {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 20% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 30%, rgba(56, 189, 248, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 70% 60% at 50% 80%, rgba(245, 200, 66, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 50% 30% at 70% 60%, rgba(236, 72, 153, 0.1) 0%, transparent 50%);
    animation: auroraShift 15s ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes auroraShift {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.7;
    }
    25% {
        transform: scale(1.1) rotate(2deg);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.05) rotate(-1deg);
        opacity: 0.8;
    }
    75% {
        transform: scale(0.95) rotate(1deg);
        opacity: 1;
    }
}

/* Звёзды */
.v2-magic-stars {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(1px 1px at 10% 10%, rgba(255, 255, 255, 0.8) 50%, transparent 50%),
    radial-gradient(1px 1px at 20% 40%, rgba(255, 255, 255, 0.6) 50%, transparent 50%),
    radial-gradient(2px 2px at 30% 20%, rgba(255, 255, 255, 0.9) 50%, transparent 50%),
    radial-gradient(1px 1px at 40% 60%, rgba(255, 255, 255, 0.5) 50%, transparent 50%),
    radial-gradient(1px 1px at 50% 30%, rgba(255, 255, 255, 0.7) 50%, transparent 50%),
    radial-gradient(2px 2px at 60% 70%, rgba(255, 255, 255, 0.6) 50%, transparent 50%),
    radial-gradient(1px 1px at 70% 15%, rgba(255, 255, 255, 0.8) 50%, transparent 50%),
    radial-gradient(1px 1px at 80% 45%, rgba(255, 255, 255, 0.5) 50%, transparent 50%),
    radial-gradient(2px 2px at 90% 25%, rgba(255, 255, 255, 0.7) 50%, transparent 50%),
    radial-gradient(1px 1px at 95% 80%, rgba(255, 255, 255, 0.6) 50%, transparent 50%);
    animation: starsTwinkle 8s ease-in-out infinite;
    will-change: opacity;
}

@keyframes starsTwinkle {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.8;
    }
}

/* Снегопад */
.v2-magic-snow {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.v2-snowflake {
    position: absolute;
    width: var(--size);
    height: var(--size);
    background: white;
    border-radius: 50%;
    opacity: 0.8;
    top: -20px;
    left: calc(var(--i) * 2%);
    animation: snowFall calc(8s + var(--i) * 0.1s) linear infinite;
    animation-delay: calc(var(--i) * -0.2s);
    box-shadow: 0 0 calc(var(--size) * 2) rgba(255, 255, 255, 0.5);
}

@keyframes snowFall {
    0% {
        transform: translateY(-20px) rotate(0deg) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(100vh) rotate(360deg) translateX(50px);
        opacity: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   HERO — Ворота в Мастерскую
   ═══════════════════════════════════════════════════════════════════ */

.v2-magic-hero {
    position: relative;
    /*min-height: 80vh;*/
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    z-index: 1;
}

/* Гирлянда */
.v2-magic-garland {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 40px;
    padding: 0 40px;
}

.v2-garland-light {
    width: 12px;
    height: 16px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: garlandGlow 2s ease-in-out infinite;
    animation-delay: var(--delay);
    box-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
}

.v2-garland-light:nth-child(odd) {
    background: #ef4444;
    color: #ef4444;
}

.v2-garland-light:nth-child(even) {
    background: #22c55e;
    color: #22c55e;
}

.v2-garland-light:nth-child(3n) {
    background: #f5c842;
    color: #f5c842;
}

.v2-garland-light:nth-child(4n) {
    background: #3b82f6;
    color: #3b82f6;
}

@keyframes garlandGlow {
    0%, 100% {
        opacity: 0.4;
        transform: scale(0.9);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

.v2-magic-hero-content {
    position: relative;
    z-index: 2;
}

.v2-magic-logo {
    margin-bottom: 24px;
}

.v2-magic-logo-icon {
    font-size: 80px;
    display: inline-block;
    animation: treeFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(34, 197, 94, 0.5));
}

@keyframes treeFloat {
    0%, 100% {
        transform: translateY(0) rotate(-2deg);
    }
    50% {
        transform: translateY(-15px) rotate(2deg);
    }
}

.v2-magic-title {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 20px;
    text-shadow: 0 4px 30px rgb(250 163 2 / 16%);
}

.v2-magic-title-word {
    display: block;
    color: var(--v2-text);
}

.v2-magic-title-accent {
    background: linear-gradient(135deg, #f5c842 0%, #f56a0d 30%, #dcad22 60%, #fbbf24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffd0d04f;
    background-clip: text;
    animation: goldShimmer 3s linear infinite;
    background-size: 200% 100%;
}

@keyframes goldShimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.v2-magic-subtitle {
    font-size: 20px;
    color: var(--v2-text-muted);
    margin: 0 0 48px;
    max-width: 500px;
}

.v2-magic-scroll-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--v2-text-muted);
    animation: scrollBounce 2s ease-in-out infinite;
}

.v2-scroll-icon {
    font-size: 24px;
    animation: scrollArrow 1.5s ease-in-out infinite;
}

@keyframes scrollArrow {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    50% {
        transform: translateY(8px);
        opacity: 1;
    }
}

.v2-scroll-text {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   СЕКЦИИ
   ═══════════════════════════════════════════════════════════════════ */

.v2-magic-section {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto 80px;
    padding: 0 20px;
}

.v2-magic-section-header {
    text-align: center;
    margin-bottom: 48px;
}

.v2-section-decoration {
    font-size: 48px;
    margin-bottom: 16px;
    display: inline-block;
    animation: decorationPulse 2s ease-in-out infinite;
}

@keyframes decorationPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.v2-magic-section-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--v2-text);
    margin: 0 0 12px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.v2-magic-section-desc {
    font-size: 18px;
    color: var(--v2-text-muted);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   НАРРАТОР — Персонаж рассказчик
   ═══════════════════════════════════════════════════════════════════ */

.v2-magic-narrator {
    display: flex;
    gap: 20px;
    margin-bottom: 32px;
}

.v2-narrator-right {
    flex-direction: row-reverse;
}

.v2-magic-narrator-avatar {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.v2-narrator-emoji {
    font-size: 64px;
    display: block;
    position: relative;
    z-index: 2;
}

.v2-narrator-glow {
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    animation: narratorGlow 2s ease-in-out infinite;
}

.v2-glow-green {
    background: radial-gradient(circle, rgba(34, 197, 94, 0.4) 0%, transparent 70%);
}

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

.v2-magic-narrator-speech {
    background: var(--v2-bg-card);
    border-radius: var(--v2-radius-xl);
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    flex: 1;
}

.v2-magic-narrator-speech::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 30px;
    border: 8px solid transparent;
    border-right-color: var(--v2-bg-card);
}

.v2-narrator-right .v2-magic-narrator-speech::before {
    left: auto;
    right: -12px;
    border-right-color: transparent;
    border-left-color: var(--v2-bg-card);
}

.v2-narrator-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--v2-gold);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.v2-narrator-text p {
    font-size: 16px;
    color: var(--v2-text);
    line-height: 1.7;
    margin: 0;
}

.v2-magic-lead {
    font-size: 18px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   СХЕМА ОБМЕНА — Новый визуальный дизайн
   ═══════════════════════════════════════════════════════════════════ */

.v2-exchange-scheme {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--v2-radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 32px;
    margin-bottom: 32px;
}

.v2-scheme-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.v2-scheme-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--v2-bg-card);
    border-radius: var(--v2-radius-lg);
    padding: 16px 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    min-width: 180px;
    position: relative;
    transition: all 0.3s ease;
}

.v2-scheme-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.v2-scheme-highlight {
    border-color: var(--v2-gold);
    box-shadow: 0 0 30px rgba(245, 200, 66, 0.15);
}

.v2-scheme-star {
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 20px;
    animation: schemeStar 2s ease-in-out infinite;
}

@keyframes schemeStar {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.2) rotate(15deg);
        opacity: 1;
    }
}

.v2-scheme-avatar {
    font-size: 36px;
    flex-shrink: 0;
}

.v2-scheme-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.v2-scheme-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--v2-text);
}

.v2-scheme-desc {
    font-size: 12px;
    color: var(--v2-text-muted);
}

.v2-scheme-santa {
    border-color: var(--v2-purple);
}

.v2-scheme-recipient {
    border-color: var(--v2-green);
}

/* Стрелка между карточками */
.v2-scheme-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 120px;
}

.v2-arrow-line {
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--v2-gold), var(--v2-gold-light));
    border-radius: 2px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.v2-arrow-line::after {
    content: '';
    position: absolute;
    right: -6px;
    border: 6px solid transparent;
    border-left-color: var(--v2-gold-light);
}

.v2-arrow-gift {
    font-size: 20px;
    background: var(--v2-bg-deep);
    padding: 4px 8px;
    border-radius: 50%;
    animation: arrowGift 2s ease-in-out infinite;
    position: absolute;
    bottom: 10px;
}

@keyframes arrowGift {
    0%, 100% {
        transform: translateX(-15px) scale(1);
    }
    50% {
        transform: translateX(15px) scale(1.1);
    }
}

.v2-arrow-text {
    font-size: 11px;
    color: var(--v2-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

/* Разделитель */
.v2-scheme-divider {
    text-align: center;
    padding: 24px 0;
    position: relative;
}

.v2-scheme-divider::before,
.v2-scheme-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.v2-scheme-divider::before {
    left: 0;
}

.v2-scheme-divider::after {
    right: 0;
}

.v2-scheme-divider-text {
    font-size: 14px;
    color: var(--v2-text-muted);
    background: rgba(0, 0, 0, 0.2);
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .v2-exchange-scheme {
        padding: 20px;
    }

    .v2-scheme-row {
        flex-direction: column;
        gap: 16px;
    }

    .v2-scheme-card {
        width: 100%;
        max-width: 280px;
    }

    @keyframes arrowGift {
        0%, 100% {
            transform: rotate(-90deg) translateX(-10px) scale(1);
        }
        50% {
            transform: rotate(-90deg) translateX(10px) scale(1.1);
        }
    }
}

/* Light Theme */
.v2-theme-light .v2-exchange-scheme {
    background: rgba(0, 0, 0, 0.03);
}

.v2-theme-light .v2-scheme-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
}

.v2-theme-light .v2-scheme-highlight {
    border-color: var(--v2-gold);
}

/* ═══════════════════════════════════════════════════════════════════
   КОДЕКС САНТЫ — Дополнительные элементы
   ═══════════════════════════════════════════════════════════════════ */

/* Клятва */
.v2-codex-oath {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: rgba(245, 200, 66, 0.1);
    border: 1px solid rgba(245, 200, 66, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 28px;
}

.v2-oath-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.v2-oath-text {
    font-size: 16px;
    font-style: italic;
    color: #5c3d2e;
    line-height: 1.6;
    font-weight: 500;
}

/* Футер Кодекса */
.v2-codex-footer {
    margin-top: 28px;
    text-align: center;
}

.v2-codex-badge {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(139, 90, 43, 0.2), rgba(245, 200, 66, 0.15));
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: #5c3d2e;
}

/* Highlight */
.v2-magic-highlight {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(245, 200, 66, 0.1) 0%, rgba(245, 200, 66, 0.05) 100%);
    border-radius: var(--v2-radius-lg);
    border: 1px solid rgba(245, 200, 66, 0.2);
}

.v2-highlight-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.v2-highlight-text {
    font-size: 15px;
    color: var(--v2-text);
    line-height: 1.6;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   TIMELINE — Путь подарка (Ёлочные шары)
   ═══════════════════════════════════════════════════════════════════ */

.v2-magic-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Вертикальная линия (гирлянда) */
.v2-magic-timeline::before {
    content: '';
    position: absolute;
    left: 39px;
    top: 60px;
    bottom: 60px;
    width: 3px;
    background: linear-gradient(to bottom,
    #ef4444, #f5c842, #22c55e, #3b82f6, #a855f7);
    border-radius: 3px;
    box-shadow: 0 0 15px rgba(245, 200, 66, 0.3);
}

.v2-timeline-step {
    display: flex;
    gap: 24px;
    padding: 20px 0;
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s ease;
}

.v2-timeline-step.v2-timeline-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Ёлочный шар */
.v2-timeline-ornament {
    position: relative;
    width: 80px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.v2-ornament-string {
    width: 2px;
    height: 20px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent);
}

.v2-ornament-ball {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: inset -8px -8px 20px rgba(0, 0, 0, 0.3),
    inset 8px 8px 20px rgba(255, 255, 255, 0.2),
    0 10px 30px rgba(0, 0, 0, 0.3);
    animation: ornamentSwing 4s ease-in-out infinite;
}

.v2-ornament-ball::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 12px;
    width: 12px;
    height: 8px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transform: rotate(-30deg);
}

.v2-ornament-ball::after {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 10px;
    background: linear-gradient(to bottom, #fbbf24, #d97706);
    border-radius: 4px 4px 0 0;
}

@keyframes ornamentSwing {
    0%, 100% {
        transform: rotate(-3deg);
    }
    50% {
        transform: rotate(3deg);
    }
}

.v2-ornament-gold {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
}

.v2-ornament-green {
    background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
}

.v2-ornament-star {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
}

.v2-ornament-icon {
    font-size: 28px;
    position: relative;
    z-index: 2;
}

/* Timeline Content */
.v2-timeline-content {
    flex: 1;
    background: var(--v2-bg-card);
    border-radius: var(--v2-radius-lg);
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.v2-timeline-step:hover .v2-timeline-content {
    border-color: rgba(245, 200, 66, 0.3);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
}

.v2-timeline-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--v2-gold);
    color: var(--v2-text-dark);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
}

.v2-timeline-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--v2-text);
    margin: 0 0 8px;
}

.v2-timeline-text {
    font-size: 15px;
    color: var(--v2-text-muted);
    line-height: 1.6;
    margin: 0 0 12px;
}

.v2-timeline-tip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(245, 200, 66, 0.1);
    border-radius: var(--v2-radius-sm);
    font-size: 13px;
    color: var(--v2-gold-light);
}

.v2-tip-icon {
    font-size: 16px;
}

.v2-timeline-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--v2-gold);
    color: var(--v2-text-dark);
    border-radius: var(--v2-radius-md);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.v2-timeline-action:hover {
    background: var(--v2-gold-light);
    transform: translateX(4px);
    color: #000;
}

.v2-timeline-magic {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--v2-purple);
}

.v2-magic-sparkle {
    animation: sparkle 1.5s ease-in-out infinite;
}

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

.v2-timeline-services {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.v2-service-badge {
    padding: 6px 12px;
    background: var(--v2-bg-elevated);
    border-radius: var(--v2-radius-sm);
    font-size: 12px;
    color: var(--v2-text-muted);
}

.v2-timeline-karma {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--v2-red-bright);
}

.v2-karma-icon {
    animation: heartBeat 1s ease-in-out infinite;
}

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

/* ═══════════════════════════════════════════════════════════════════
   СВИТОК — Кодекс правил
   ═══════════════════════════════════════════════════════════════════ */

.v2-magic-scroll {
    position: relative;
    margin: 32px 0;
}

.v2-scroll-decoration {
    height: 40px;
    background: linear-gradient(to right, #8b5a2b, #d2a679, #8b5a2b);
    border-radius: 20px;
    position: relative;
    z-index: 2;
}

.v2-scroll-decoration::before,
.v2-scroll-decoration::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #a0522d 0%, #8b4513 100%);
    border-radius: 50%;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
}

.v2-scroll-decoration::before {
    left: -10px;
}

.v2-scroll-decoration::after {
    right: -10px;
}

.v2-scroll-content {
    background: linear-gradient(to bottom, #f5e6c8 0%, #e8d4a8 50%, #f5e6c8 100%);
    padding: 40px;
    position: relative;
    box-shadow: inset 0 0 50px rgba(139, 90, 43, 0.2);
}

.v2-scroll-title {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: #5c3d2e;
    margin-bottom: 32px;
    font-family: 'Georgia', serif;
}

.v2-scroll-rules {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.v2-scroll-rule {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    border: 1px solid rgba(139, 90, 43, 0.2);
}

.v2-rule-critical {
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.3);
}

.v2-rule-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.v2-rule-content strong {
    display: block;
    font-size: 16px;
    color: #3d2314;
    margin-bottom: 4px;
}

.v2-rule-content p {
    font-size: 14px;
    color: #5c3d2e;
    margin: 0;
    line-height: 1.5;
}

.v2-exchange-main .v2-rule-content strong {
    color: var(--v2-text);
}

.v2-exchange-main .v2-rule-content p {
    color: var(--v2-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════
   ГРИНЧ
   ═══════════════════════════════════════════════════════════════════ */

.v2-section-grinch {
    margin-bottom: 80px;
}

.v2-grinch-card {
    display: flex;
    gap: 24px;
    padding: 32px;
    background: linear-gradient(135deg, #1a2332 0%, rgba(34, 197, 94, 0.1) 100%);
    border-radius: var(--v2-radius-xl);
    border: 1px solid rgba(34, 197, 94, 0.3);
    position: relative;
    overflow: hidden;
}

.v2-grinch-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.1) 0%, transparent 50%);
    animation: grinchGlow 4s ease-in-out infinite;
}

@keyframes grinchGlow {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.6;
    }
}

.v2-grinch-avatar {
    position: relative;
    flex-shrink: 0;
}

.v2-grinch-emoji {
    max-width: 150px;
    display: block;
}

.v2-grinch-heart {
    position: absolute;
    top: 0px;
    right: -10px;
    font-size: 24px;
    animation: heartGrow 2s ease-in-out infinite;
}

@keyframes heartGrow {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
}

.v2-grinch-content {
    flex: 1;
    position: relative;
    z-index: 2;
}

.v2-grinch-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--v2-green);
    margin-bottom: 16px;
}

.v2-grinch-story p {
    font-size: 15px;
    color: var(--v2-text-muted);
    line-height: 1.7;
    margin: 0 0 12px;
    font-style: italic;
}

.v2-grinch-warning {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: var(--v2-radius-md);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.v2-warning-icon {
    font-size: 20px;
}

.v2-grinch-warning span:last-child {
    font-size: 14px;
    color: var(--v2-text);
}

/* ═══════════════════════════════════════════════════════════════════
   FAQ — Магические вопросы
   ═══════════════════════════════════════════════════════════════════ */

.v2-magic-faq {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.v2-faq-snow-item {
    background: var(--v2-bg-card);
    border-radius: var(--v2-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
}

.v2-faq-snow-item:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

.v2-faq-question-magic {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.v2-faq-question-magic:hover {
    background: var(--v2-bg-elevated);
}

.v2-faq-q-icon {
    font-size: 20px;
    opacity: 0.7;
}

.v2-faq-q-text {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: var(--v2-text);
}

.v2-faq-toggle-magic {
    font-size: 28px;
    color: var(--v2-gold);
    font-weight: 300;
    line-height: 1;
    transition: transform 0.3s ease;
}

.v2-faq-open .v2-faq-toggle-magic {
    transform: rotate(45deg);
}

.v2-faq-answer-magic {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.v2-faq-open .v2-faq-answer-magic {
    max-height: 300px;
}

.v2-faq-answer-magic p {
    padding: 0 20px 20px;
    font-size: 14px;
    color: var(--v2-text-muted);
    line-height: 1.7;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 16px;
}

.v2-faq-answer-magic a {
    color: var(--v2-gold);
}

/* ═══════════════════════════════════════════════════════════════════
   CTA — Призыв к действию
   ═══════════════════════════════════════════════════════════════════ */

.v2-magic-cta {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto 60px;
    padding: 60px 40px;
    text-align: center;
    background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 50%, #1a2332 100%);
    border-radius: var(--v2-radius-xl);
    border: 1px solid rgba(245, 200, 66, 0.2);
    overflow: hidden;
}

.v2-cta-widget.v2-magic-cta .v2-cta-content {
    flex-direction: column;
}

.v2-cta-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(245, 200, 66, 0.2) 0%, transparent 70%);
    animation: ctaGlow 3s ease-in-out infinite;
}

@keyframes ctaGlow {
    0%, 100% {
        opacity: 0.5;
        transform: translateX(-50%) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translateX(-50%) scale(1.2);
    }
}

.v2-cta-content {
    position: relative;
    z-index: 2;
}

.v2-cta-gift {
    position: relative;
    display: inline-block;
    margin-bottom: 24px;
}

.v2-cta-gift-icon {
    font-size: 80px;
    display: block;
    animation: giftBounce 2s ease-in-out infinite;
}

@keyframes giftBounce {
    0%, 100% {
        transform: translateY(0) rotate(-5deg);
    }
    50% {
        transform: translateY(-15px) rotate(5deg);
    }
}

.v2-cta-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--v2-text);
    margin: 0 0 12px;
}

.v2-cta-text {
    font-size: 18px;
    color: var(--v2-text-muted);
    margin: 0 0 32px;
}

.v2-cta-text strong {
    color: var(--v2-gold);
}

.v2-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

/* Магические кнопки */
.v2-magic-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    border-radius: var(--v2-radius-md);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.v2-magic-btn-primary {
    background: linear-gradient(135deg, #f5c842 0%, #d97706 100%);
    color: #000;
    box-shadow: 0 4px 20px rgba(245, 200, 66, 0.4);
}

.v2-magic-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(245, 200, 66, 0.5);
    color: #000;
}

.v2-btn-sparkle {
    animation: btnSparkle 2s ease-in-out infinite;
}

@keyframes btnSparkle {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}

.v2-magic-btn-secondary {
    background: transparent;
    border: 2px solid var(--v2-gold);
    color: var(--v2-gold);
}

.v2-magic-btn-secondary:hover {
    background: rgba(245, 200, 66, 0.1);
    transform: translateY(-3px);
    color: var(--v2-gold);
}

/* Мерри */
.v2-cta-merry {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.v2-merry-avatar {
    font-size: 28px;
}

.v2-merry-text {
    font-size: 14px;
    color: var(--v2-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════
   CTA WIDGET — Дополнительные стили
   ═══════════════════════════════════════════════════════════════════ */

/* Компактный стиль */
.v2-cta-compact {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 32px 40px;
    background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%);
    border-radius: var(--v2-radius-xl);
    border: 1px solid rgba(245, 200, 66, 0.2);
    overflow: hidden;
}

.v2-cta-compact .v2-cta-glow {
    position: absolute;
    top: -50%;
    left: -10%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(245, 200, 66, 0.15) 0%, transparent 70%);
    animation: ctaGlow 3s ease-in-out infinite;
}

.v2-cta-compact .v2-cta-content {
    display: flex;
    align-items: center;
    gap: 32px;
    width: 100%;
    z-index: 2;
}

.v2-cta-compact .v2-cta-gift {
    flex-shrink: 0;
    margin: 0;
}

.v2-cta-compact .v2-cta-gift-icon {
    font-size: 56px;
}

.v2-cta-compact .v2-cta-title {
    font-size: 24px;
    margin: 0 0 6px;
}

.v2-cta-compact .v2-cta-text {
    font-size: 15px;
    margin: 0;
}

.v2-cta-compact .v2-cta-buttons {
    flex-shrink: 0;
    margin: 0;
    gap: 12px;
}

.v2-cta-compact .v2-cta-merry {
    display: none;
}

/* Минимальный стиль */
.v2-cta-minimal {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto 40px;
    padding: 32px;
    text-align: center;
    background: var(--v2-bg-card);
    border-radius: var(--v2-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.v2-cta-minimal .v2-cta-title {
    font-size: 22px;
    margin: 0 0 8px;
}

.v2-cta-minimal .v2-cta-text {
    font-size: 14px;
    margin: 0 0 20px;
}

.v2-cta-minimal .v2-cta-buttons {
    margin: 0;
}

.v2-cta-minimal .v2-magic-btn {
    padding: 12px 24px;
    font-size: 14px;
}

.v2-cta-merry .v2-character-avatar-img {
    width: 60px;
}

/* Responsive CTA compact */
@media (max-width: 768px) {
    .v2-magic-section {
        padding: 0 0px;
    }

    .v2-cta-compact {
        flex-direction: column;
        text-align: center;
        padding: 28px 20px;
        gap: 20px;
    }

    .v2-cta-compact .v2-cta-content {
        flex-direction: column;
        gap: 16px;
    }

    .v2-cta-compact .v2-cta-gift-icon {
        font-size: 48px;
    }

    .v2-cta-compact .v2-cta-title {
        font-size: 20px;
    }

    .v2-cta-compact .v2-cta-buttons {
        flex-direction: column;
        width: 100%;
    }

    .v2-cta-minimal {
        padding: 24px 20px;
    }

    .v2-cta-minimal .v2-cta-title {
        font-size: 18px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .v2-magic-hero {
        min-height: 70vh;
        padding: 60px 20px;
    }

    .v2-magic-garland {
        gap: 24px;
    }

    .v2-magic-logo-icon {
        font-size: 60px;
    }

    .v2-magic-title {
        font-size: 36px;
    }

    .v2-magic-subtitle {
        font-size: 16px;
    }

    .v2-arrow-gift {
        display: none;
    }

    .v2-magic-narrator {
        flex-direction: column;
        align-items: flex-start;
    }

    .v2-narrator-right {
        flex-direction: column;
        align-items: flex-end;
    }

    .v2-magic-narrator-speech::before {
        display: none;
    }

    .v2-magic-concept {
        flex-direction: column;
        padding: 20px;
    }

    .v2-concept-arrow {
        transform: rotate(90deg);
        width: 60px;
    }

    .v2-concept-arrow-reverse {
        transform: rotate(-90deg);
    }

    .v2-magic-timeline::before {
        left: 29px;
    }

    .v2-timeline-step {
        gap: 0px;
    }

    .v2-timeline-ornament {
        width: 60px;
    }

    .v2-ornament-ball {
        width: 50px;
        height: 50px;
    }

    .v2-ornament-icon {
        font-size: 22px;
    }

    .v2-scroll-content {
        padding: 24px;
    }

    .v2-scroll-title {
        font-size: 22px;
    }

    .v2-grinch-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .v2-magic-cta {
        max-width: 100%;
        padding: 32px 20px;
        margin: 0 0 40px;
        border-radius: var(--v2-radius-lg);
    }

    .v2-cta-glow {
        width: 200px;
        height: 200px;
    }

    .v2-cta-gift-icon {
        font-size: 56px;
    }

    .v2-cta-title {
        font-size: 22px;
        line-height: 1.3;
    }

    .v2-cta-text {
        font-size: 15px;
        margin-bottom: 24px;
    }

    .v2-cta-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .v2-magic-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 24px;
        font-size: 15px;
    }

    .v2-btn-sparkle {
        font-size: 14px;
    }

    .v2-cta-merry {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }

    .v2-merry-avatar {
        font-size: 24px;
    }

    .v2-merry-text {
        font-size: 13px;
    }
}

/* Light Theme */
.v2-theme-light .v2-magic-atmosphere {
    opacity: 0.3;
}

.v2-theme-light .v2-timeline-content,
.v2-theme-light .v2-magic-narrator-speech,
.v2-theme-light .v2-faq-snow-item,
.v2-theme-light .v2-concept-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
}

.v2-theme-light .v2-magic-concept {
    background: rgba(0, 0, 0, 0.03);
}

.v2-theme-light .v2-grinch-card {
    background: linear-gradient(135deg, #f8fafc 0%, rgba(34, 197, 94, 0.1) 100%);
}

.v2-theme-light .v2-magic-cta {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}


/* ==========================================================================
   СТРАНИЦА ПРАВИЛ (Базовая версия) — Rules Page
   ========================================================================== */

/* Hero блок правил */
.v2-rules-hero {
    position: relative;
    background: linear-gradient(135deg, #1a2332 0%, #0f172a 50%, #1e1b4b 100%);
    border-radius: var(--v2-radius-xl);
    padding: 60px 40px;
    margin-bottom: 32px;
    text-align: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.v2-rules-hero-bg {
    position: absolute;
    inset: 0;
    opacity: 0.5;
    overflow: hidden;
}

.v2-rules-hero-particles {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(2px 2px at 20% 30%, rgba(245, 200, 66, 0.4) 50%, transparent 50%),
    radial-gradient(2px 2px at 40% 70%, rgba(255, 255, 255, 0.3) 50%, transparent 50%),
    radial-gradient(1px 1px at 70% 40%, rgba(245, 200, 66, 0.3) 50%, transparent 50%),
    radial-gradient(2px 2px at 90% 20%, rgba(255, 255, 255, 0.2) 50%, transparent 50%),
    radial-gradient(1px 1px at 10% 80%, rgba(245, 200, 66, 0.4) 50%, transparent 50%);
    animation: twinkle 4s ease-in-out infinite;
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.7;
    }
}

.v2-rules-hero-content {
    position: relative;
    z-index: 2;
}

.v2-rules-hero-icon {
    font-size: 64px;
    margin-bottom: 16px;
    animation: float 3s ease-in-out infinite;
}

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

.v2-rules-hero-title {
    font-size: 42px;
    font-weight: 700;
    color: var(--v2-text);
    margin: 0 0 12px;
    background: linear-gradient(135deg, #f5c842 0%, #fde68a 50%, #f5c842 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.v2-rules-hero-subtitle {
    font-size: 18px;
    color: var(--v2-text-muted);
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
}

/* Intro с Сантой */
.v2-rules-intro {
    margin-bottom: 40px;
}

.v2-character-message-large {
    padding: 24px 28px;
}

.v2-character-message-large .v2-character-text p {
    margin: 0 0 12px;
    line-height: 1.7;
}

.v2-character-message-large .v2-character-text p:last-child {
    margin-bottom: 0;
}

.v2-character-avatar-lg {
    font-size: 48px !important;
    width: 64px !important;
    height: 64px !important;
}

/* Секции правил */
.v2-rules-section {
    margin-bottom: 48px;
}

.v2-rules-section-header {
    text-align: center;
    margin-bottom: 32px;
}

.v2-rules-section-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--v2-text);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.v2-rules-section-icon {
    font-size: 32px;
}

.v2-rules-section-subtitle {
    font-size: 16px;
    color: var(--v2-text-muted);
    margin: 0;
}

/* Шаги (Steps) */
.v2-rules-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.v2-rules-steps::before {
    content: '';
    position: absolute;
    left: 28px;
    top: 48px;
    bottom: 48px;
    width: 2px;
    background: linear-gradient(to bottom, var(--v2-gold), var(--v2-green));
    opacity: 0.3;
}

.v2-rules-step {
    display: flex;
    gap: 20px;
    padding: 24px;
    background: var(--v2-bg-card);
    border-radius: var(--v2-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 16px;
    position: relative;
    transition: all 0.3s ease;
}

.v2-rules-step:hover {
    border-color: rgba(245, 200, 66, 0.3);
    transform: translateX(8px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.v2-rules-step-number {
    position: absolute;
    left: -12px;
    top: 24px;
    width: 24px;
    height: 24px;
    background: var(--v2-gold);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    z-index: 2;
}

.v2-rules-step-icon {
    font-size: 40px;
    width: 60px;
    height: 60px;
    background: var(--v2-bg-elevated);
    border-radius: var(--v2-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.v2-rules-step-content {
    flex: 1;
}

.v2-rules-step-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--v2-text);
    margin: 0 0 8px;
}

.v2-rules-step-text {
    font-size: 15px;
    color: var(--v2-text-muted);
    line-height: 1.6;
    margin: 0 0 12px;
}

.v2-rules-step-tip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(245, 200, 66, 0.1);
    border-radius: var(--v2-radius-sm);
    font-size: 13px;
    color: var(--v2-gold-light);
}

.v2-rules-step-tip-icon {
    font-size: 16px;
}

.v2-rules-step-services {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.v2-rules-service-badge {
    padding: 6px 12px;
    background: var(--v2-bg-elevated);
    border-radius: var(--v2-radius-sm);
    font-size: 12px;
    color: var(--v2-text-muted);
}

/* Сетка правил */
.v2-rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.v2-rule-card {
    background: var(--v2-bg-card);
    border-radius: var(--v2-radius-lg);
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.v2-rule-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-4px);
}

.v2-rule-card-important {
    border-color: rgba(220, 38, 38, 0.3);
    background: linear-gradient(135deg, var(--v2-bg-card) 0%, rgba(220, 38, 38, 0.05) 100%);
}

.v2-rule-card-important:hover {
    border-color: rgba(220, 38, 38, 0.5);
}

.v2-rule-card-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

.v2-rule-card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--v2-text);
    margin: 0 0 8px;
}

.v2-rule-card-text {
    font-size: 14px;
    color: var(--v2-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Предупреждение от Гринча */
.v2-rules-warning {
    margin-top: 24px;
}

.v2-character-grinch {
    background: linear-gradient(135deg, var(--v2-bg-card) 0%, rgba(16, 185, 129, 0.08) 100%);
    border-color: rgba(16, 185, 129, 0.3);
}

.v2-character-avatar-grinch {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

/* FAQ */
.v2-faq {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.v2-faq-item {
    background: var(--v2-bg-card);
    border-radius: var(--v2-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
}

.v2-faq-item:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

.v2-faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--v2-text);
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    transition: all 0.2s ease;
}

.v2-faq-question:hover {
    background: var(--v2-bg-elevated);
}

.v2-faq-question[aria-expanded="true"] {
    background: var(--v2-bg-elevated);
}

.v2-faq-question-text {
    flex: 1;
    padding-right: 16px;
}

.v2-faq-toggle {
    font-size: 24px;
    color: var(--v2-gold);
    font-weight: 300;
    transition: transform 0.3s ease;
}

.v2-faq-question[aria-expanded="true"] .v2-faq-toggle {
    transform: rotate(45deg);
}

.v2-faq-answer {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.v2-faq-answer-content {
    padding: 18px 20px;
    font-size: 14px;
    color: var(--v2-text-muted);
    line-height: 1.7;
}

.v2-faq-answer-content a {
    color: var(--v2-gold);
}

/* CTA блок правил */
.v2-rules-cta {
    background: linear-gradient(135deg, #1a2332 0%, #0f172a 50%, #1e1b4b 100%);
    border-radius: var(--v2-radius-xl);
    padding: 48px 40px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.v2-rules-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(245, 200, 66, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.v2-rules-cta-content {
    position: relative;
    z-index: 2;
}

.v2-rules-cta-icon {
    font-size: 56px;
    margin-bottom: 16px;
    animation: float 3s ease-in-out infinite;
}

.v2-rules-cta-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--v2-text);
    margin: 0 0 12px;
}

.v2-rules-cta-text {
    font-size: 18px;
    color: var(--v2-text-muted);
    margin: 0 0 24px;
}

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

.v2-rules-cta-character {
    margin-top: 32px;
    display: flex;
    justify-content: center;
}

.v2-character-message-compact {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
}

/* ==========================================================================
   СТРАНИЦА О ПРОЕКТЕ — About Page (Компактная версия)
   ========================================================================== */

/* Основной контейнер */
.v2-about {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Баннер (Hero) */
.v2-about-banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
    background: var(--v2-bg-card);
    border-radius: var(--v2-radius-xl);
    padding: 40px;
    margin-bottom: 32px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.v2-about-banner-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.08) 0%, rgba(56, 189, 248, 0.05) 100%);
}

.v2-about-banner-content {
    position: relative;
    z-index: 2;
}

.v2-about-badge {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(245, 200, 66, 0.15);
    border: 1px solid rgba(245, 200, 66, 0.3);
    border-radius: 50px;
    color: var(--v2-gold-light);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
}

.v2-about-banner-title {
    font-size: 40px;
    font-weight: 700;
    color: var(--v2-text);
    margin: 0 0 12px;
    line-height: 1.1;
}

.v2-about-banner-text {
    font-size: 16px;
    color: var(--v2-text-muted);
    margin: 0;
    line-height: 1.5;
}

.v2-about-banner-image {
    position: relative;
    z-index: 2;
}

/* Плейсхолдеры для изображений */
.v2-about-banner-placeholder,
.v2-about-image-placeholder,
.v2-gallery-placeholder {
    background: var(--v2-bg-elevated);
    border-radius: var(--v2-radius-lg);
    border: 2px dashed rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--v2-text-dim);
    min-height: 200px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.v2-about-banner-placeholder:hover,
.v2-about-image-placeholder:hover {
    border-color: rgba(245, 200, 66, 0.3);
    background: rgba(245, 200, 66, 0.05);
}

.v2-about-banner-placeholder span,
.v2-about-image-placeholder span,
.v2-gallery-placeholder span {
    font-size: 48px;
    opacity: 0.5;
}

.v2-about-banner-placeholder small,
.v2-about-image-placeholder small,
.v2-gallery-placeholder small {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Rows — Текст + Изображение */
.v2-about-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 40px;
}

.v2-about-row-reverse {
    direction: rtl;
}

.v2-about-row-reverse > * {
    direction: ltr;
}

.v2-about-col-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.v2-about-col-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.v2-about-image-placeholder {
    width: 100%;
    min-height: 280px;
}

/* Типографика */
.v2-about-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--v2-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.v2-about-h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--v2-text);
    margin: 0;
    line-height: 1.2;
}

.v2-about-col-text p {
    font-size: 15px;
    color: var(--v2-text-muted);
    line-height: 1.7;
    margin: 0;
}

/* Blockquote */
.v2-about-blockquote {
    background: rgba(168, 85, 247, 0.08);
    border-left: 3px solid var(--v2-purple);
    border-radius: 0 var(--v2-radius-md) var(--v2-radius-md) 0;
    padding: 16px 20px;
    font-size: 14px;
    font-style: italic;
    color: var(--v2-text);
    margin: 0;
    position: relative;
}

.v2-about-blockquote-icon {
    font-size: 20px;
    margin-right: 8px;
    font-style: normal;
}

.v2-about-blockquote cite {
    display: block;
    font-style: normal;
    font-size: 13px;
    color: var(--v2-text-muted);
    margin-top: 8px;
}

/* Статистика — Компактная полоса */
.v2-about-stats-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 24px;
    background: linear-gradient(135deg, var(--v2-bg-card) 0%, rgba(245, 200, 66, 0.05) 100%);
    border-radius: var(--v2-radius-lg);
    border: 1px solid rgba(245, 200, 66, 0.15);
    margin-bottom: 40px;
}

.v2-about-stat-item {
    text-align: center;
}

.v2-about-stat-num {
    display: block;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--v2-gold) 0%, var(--v2-gold-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.v2-about-stat-text {
    font-size: 13px;
    color: var(--v2-text-muted);
}

.v2-about-stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
}

/* Секции */
.v2-about-section {
    margin-bottom: 40px;
}

.v2-about-section-head {
    margin-bottom: 24px;
}

.v2-about-section-desc {
    font-size: 14px;
    color: var(--v2-text-muted);
    margin: 8px 0 0;
}

/* Команда — Сетка карточек */
.v2-about-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.v2-team-card {
    background: var(--v2-bg-card);
    border-radius: var(--v2-radius-lg);
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.v2-team-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-4px);
}

.v2-team-card-grinch {
    border-color: rgba(100, 116, 139, 0.3);
}

.v2-team-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.v2-team-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--v2-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}

.v2-team-santa {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
}

.v2-team-merry {
    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
}

.v2-team-elves {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.v2-team-rudolph {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.v2-team-grinch {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

.v2-team-info {
    flex: 1;
    min-width: 0;
}

.v2-team-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--v2-text);
    margin: 0;
}

.v2-team-role {
    font-size: 12px;
    color: var(--v2-gold);
}

.v2-team-desc {
    font-size: 13px;
    color: var(--v2-text-muted);
    line-height: 1.5;
    margin: 0 0 12px;
}

.v2-team-image-slot {
    /*background: var(--v2-bg-elevated);*/
    border-radius: var(--v2-radius-md);
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    opacity: 1;
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

.v2-team-image-slot img{
    object-position: top;
}

/* Миссия — Список */
.v2-about-mission-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.v2-mission-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.v2-mission-icon {
    font-size: 24px;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: var(--v2-bg-elevated);
    border-radius: var(--v2-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.v2-mission-item strong {
    display: block;
    font-size: 15px;
    color: var(--v2-text);
    margin-bottom: 2px;
}

.v2-mission-item p {
    font-size: 13px;
    color: var(--v2-text-muted);
    margin: 0;
    line-height: 1.4;
}

.v2-about-image-mission {
    background: linear-gradient(135deg, rgba(245, 200, 66, 0.1) 0%, rgba(220, 38, 38, 0.05) 100%);
}

/* Ценности — Компактная строка */
.v2-about-values-compact {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 20px;
    background: var(--v2-bg-card);
    border-radius: var(--v2-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 40px;
}

.v2-value-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.v2-value-icon {
    font-size: 20px;
}

.v2-value-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--v2-text);
}

/* CTA — Компактный */
.v2-about-cta-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 32px;
    background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%);
    border-radius: var(--v2-radius-xl);
    border: 1px solid rgba(168, 85, 247, 0.2);
    margin-bottom: 40px;
}

.v2-about-cta-left {
    flex: 1;
}

.v2-about-cta-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--v2-text);
    margin: 0 0 8px;
}

.v2-about-cta-text {
    font-size: 15px;
    color: var(--v2-text-muted);
    margin: 0 0 12px;
}

.v2-about-cta-chars {
    display: flex;
    gap: 8px;
}

.v2-about-cta-chars span {
    font-size: 24px;
}

.v2-about-cta-right {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Галерея */
.v2-about-gallery {
    margin-bottom: 32px;
}

.v2-about-gallery-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--v2-text);
    margin-bottom: 16px;
    text-align: center;
}

.v2-about-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 120px);
    gap: 12px;
}

.v2-gallery-item {
    border-radius: var(--v2-radius-md);
    overflow: hidden;
}

.v2-gallery-large {
    grid-column: span 2;
    grid-row: span 2;
}

.v2-gallery-placeholder {
    height: 100%;
    min-height: 0;
}

.v2-gallery-placeholder span {
    font-size: 32px;
}

.v2-gallery-large .v2-gallery-placeholder span {
    font-size: 56px;
}

/* Footer */
.v2-about-footer-compact {
    text-align: center;
    padding: 24px;
    font-size: 16px;
    color: var(--v2-text-muted);
}

.v2-about-footer-compact strong {
    color: var(--v2-gold);
}

/* ==========================================================================
   RESPONSIVE — About Page
   ========================================================================== */

@media (max-width: 768px) {
    .v2-about-banner {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .v2-about-banner-title {
        font-size: 28px;
    }

    .v2-about-banner-image {
        display: none;
    }

    .v2-about-row {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .v2-about-row-reverse {
        direction: ltr;
    }

    .v2-about-col-image {
        order: -1;
    }

    .v2-about-image-placeholder {
        min-height: 180px;
    }

    .v2-about-stats-bar {
        flex-direction: column;
        gap: 16px;
    }

    .v2-about-stat-divider {
        width: 60px;
        height: 1px;
    }

    .v2-about-team-grid {
        grid-template-columns: 1fr;
    }

    .v2-about-cta-compact {
        flex-direction: column;
        text-align: center;
        padding: 24px;
    }

    .v2-about-cta-chars {
        justify-content: center;
    }

    .v2-about-cta-right {
        width: 100%;
    }

    .v2-about-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 100px);
    }

    .v2-gallery-large {
        grid-column: span 2;
        grid-row: span 1;
    }
}

/* Light Theme */
.v2-theme-light .v2-about-banner,
.v2-theme-light .v2-about-stats-bar,
.v2-theme-light .v2-team-card,
.v2-theme-light .v2-about-values-compact {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

.v2-theme-light .v2-about-cta-compact {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.v2-theme-light .v2-about-banner-placeholder,
.v2-theme-light .v2-about-image-placeholder,
.v2-theme-light .v2-gallery-placeholder,
.v2-theme-light .v2-team-image-slot {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   RESPONSIVE — Rules & About Pages
   ========================================================================== */

@media (max-width: 768px) {
    /* Rules Hero */
    .v2-rules-hero {
        padding: 40px 24px;
    }

    .v2-rules-hero-icon {
        font-size: 48px;
    }

    .v2-rules-hero-title {
        font-size: 28px;
    }

    .v2-rules-hero-subtitle {
        font-size: 16px;
    }

    /* Rules Steps */
    .v2-rules-steps::before {
        display: none;
    }

    .v2-rules-step {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }

    .v2-rules-step:hover {
        transform: none;
    }

    .v2-rules-step-number {
        position: static;
        margin-bottom: 12px;
    }

    .v2-rules-step-icon {
        width: 48px;
        height: 48px;
        font-size: 28px;
    }

    /* Rules Grid */
    .v2-rules-grid {
        grid-template-columns: 1fr;
    }

    /* Rules CTA */
    .v2-rules-cta {
        padding: 32px 24px;
    }

    .v2-rules-cta-title {
        font-size: 24px;
    }

    .v2-rules-cta-buttons {
        flex-direction: column;
    }
}

/* ==========================================================================
   LIGHT THEME — Rules Page
   ========================================================================== */

.v2-theme-light .v2-rules-hero {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);
}

.v2-theme-light .v2-rules-hero-title {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 50%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.v2-theme-light .v2-rules-step,
.v2-theme-light .v2-rule-card,
.v2-theme-light .v2-faq-item {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

.v2-theme-light .v2-rules-step:hover,
.v2-theme-light .v2-rule-card:hover {
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.v2-theme-light .v2-rules-step-icon {
    background: rgba(0, 0, 0, 0.03);
}

.v2-theme-light .v2-faq-question:hover,
.v2-theme-light .v2-faq-question[aria-expanded="true"] {
    background: rgba(0, 0, 0, 0.02);
}

.v2-theme-light .v2-rules-cta {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #f8fafc 100%);
}


.lg-backdrop {
    background-color: #00000069 !important;
}


/* ==========================================================================
   SNOWFALL WIDGET — Универсальный снегопад для любых страниц
   ==========================================================================
   
   Использование:
   
   1. Через виджет напрямую:
      <?= SnowfallWidget::widget(['count' => 50]) ?>
   
   2. Через класс на контейнере страницы:
      <div class="v2-page v2-with-snow"> ... </div>
      + в layout: <?= SnowfallWidget::widget(['global' => true]) ?>
   
   ========================================================================== */

/* Контейнер снегопада */
.v2-snowfall-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.v2-snowfall-fixed {
    position: fixed;
    z-index: -1;
}

.v2-snowfall-absolute {
    position: absolute;
}

/* Северное сияние */
.v2-snowfall-aurora {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 20% 20%, rgba(168, 85, 247, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 30%, rgba(56, 189, 248, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse 70% 60% at 50% 80%, rgba(245, 200, 66, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 50% 30% at 70% 60%, rgba(236, 72, 153, 0.08) 0%, transparent 50%);
    animation: v2SnowAurora 20s ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes v2SnowAurora {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    33% {
        transform: scale(1.1) rotate(2deg);
        opacity: 0.8;
    }
    66% {
        transform: scale(0.95) rotate(-1deg);
        opacity: 0.7;
    }
}

/* Звёзды */
.v2-snowfall-stars {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(1px 1px at 10% 15%, rgba(255, 255, 255, 0.8) 50%, transparent 50%),
    radial-gradient(2px 2px at 25% 35%, rgba(255, 255, 255, 0.7) 50%, transparent 50%),
    radial-gradient(1px 1px at 40% 20%, rgba(255, 255, 255, 0.6) 50%, transparent 50%),
    radial-gradient(1px 1px at 55% 45%, rgba(255, 255, 255, 0.7) 50%, transparent 50%),
    radial-gradient(2px 2px at 70% 25%, rgba(255, 255, 255, 0.8) 50%, transparent 50%),
    radial-gradient(1px 1px at 85% 55%, rgba(255, 255, 255, 0.6) 50%, transparent 50%),
    radial-gradient(1px 1px at 15% 70%, rgba(255, 255, 255, 0.5) 50%, transparent 50%),
    radial-gradient(2px 2px at 60% 75%, rgba(255, 255, 255, 0.7) 50%, transparent 50%),
    radial-gradient(1px 1px at 90% 80%, rgba(255, 255, 255, 0.6) 50%, transparent 50%);
    animation: v2SnowStars 8s ease-in-out infinite;
    will-change: opacity;
}

/* ==========================================================================
   Low Power режим — автоматом включается на mobile <=480px или prefers-reduced-motion
   ========================================================================== */
.v2-low-power .v2-snowfall-aurora,
.v2-low-power .v2-magic-aurora {
    animation-duration: 28s;
    opacity: 0.45;
}

.v2-low-power .v2-snowfall-stars,
.v2-low-power .v2-magic-stars,
.v2-low-power .v2-faq-stars,
.v2-low-power .v2-auth-stars {
    display: none;
}

.v2-low-power .v2-snowflake {
    animation-duration: calc(var(--snow-duration, 10s) * 1.2);
}

.v2-low-power .v2-shooting-star {
    animation-duration: calc(var(--star-duration, 1s) * 1.1);
}

.v2-low-power .v2-faq-aurora,
.v2-low-power .v2-auth-aurora {
    animation-duration: 28s;
    opacity: 0.45;
}

/* Унификация анимаций FAQ/Auth: используем общие классы */
.v2-faq-aurora,
.v2-auth-aurora {
    animation: auroraShift 15s ease-in-out infinite;
    will-change: transform, opacity;
}

.v2-faq-stars,
.v2-auth-stars {
    animation: starsTwinkle 8s ease-in-out infinite;
    will-change: opacity;
}

@media (max-width: 480px) {
    .v2-snowfall-aurora,
    .v2-magic-aurora {
        animation-duration: 26s;
    }
    
    .v2-snowfall-stars,
    .v2-magic-stars {
        animation-duration: 10s;
    }
    
    .v2-snowflake {
        animation-duration: calc(var(--snow-duration, 10s) * 1.15);
    }
}

@keyframes v2SnowStars {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.7;
    }
}

/* Контейнер снежинок */
.v2-snowfall-snow {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Снежинка */
.v2-snowflake {
    position: absolute;
    width: var(--snow-size, 4px);
    height: var(--snow-size, 4px);
    background: white;
    border-radius: 50%;
    opacity: 0;
    top: -20px;
    left: var(--snow-left, 50%);
    animation: v2SnowFall var(--snow-duration, 10s) linear infinite;
    animation-delay: var(--snow-delay, 0s);
    box-shadow: 0 0 calc(var(--snow-size, 4px) * 1.5) rgba(255, 255, 255, 0.6),
    0 0 calc(var(--snow-size, 4px) * 3) rgba(255, 255, 255, 0.3);
    will-change: transform, opacity;
}

@keyframes v2SnowFall {
    0% {
        transform: translateY(-20px) translateX(0) rotate(0deg);
        opacity: 0;
    }
    5% {
        opacity: var(--snow-opacity, 0.6);
    }
    25% {
        transform: translateY(25vh) translateX(calc(var(--snow-drift, 0px) * 0.5)) rotate(90deg);
    }
    50% {
        transform: translateY(50vh) translateX(var(--snow-drift, 0px)) rotate(180deg);
        opacity: var(--snow-opacity, 0.6);
    }
    75% {
        transform: translateY(75vh) translateX(calc(var(--snow-drift, 0px) * 1.5)) rotate(270deg);
    }
    95% {
        opacity: calc(var(--snow-opacity, 0.6) * 0.5);
    }
    100% {
        transform: translateY(100vh) translateX(calc(var(--snow-drift, 0px) * 2)) rotate(360deg);
        opacity: 0;
    }
}

/* ==========================================================================
   Модификаторы снегопада
   ========================================================================== */

/* Лёгкий снег (меньше снежинок, медленнее) */
.v2-snow-light .v2-snowflake {
    animation-duration: calc(var(--snow-duration, 10s) * 1.5);
}

/* Сильный снег (быстрее, больше сноса) */
.v2-snow-heavy .v2-snowflake {
    animation-duration: calc(var(--snow-duration, 10s) * 0.7);
    --snow-drift: calc(var(--snow-drift, 0px) * 1.5);
}

/* Без северного сияния */
.v2-snow-no-aurora .v2-snowfall-aurora {
    display: none;
}

/* Без звёзд */
.v2-snow-no-stars .v2-snowfall-stars {
    display: none;
}

/* ==========================================================================
   Светлая тема
   ========================================================================== */

.v2-theme-light .v2-snowflake {
    background: rgba(100, 116, 139, 0.4);
    box-shadow: 0 0 calc(var(--snow-size, 4px) * 1.5) rgba(100, 116, 139, 0.3),
    0 0 calc(var(--snow-size, 4px) * 3) rgba(100, 116, 139, 0.15);
}

.v2-theme-light .v2-snowfall-aurora {
    background: radial-gradient(ellipse 80% 50% at 20% 20%, rgba(168, 85, 247, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 30%, rgba(56, 189, 248, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse 70% 60% at 50% 80%, rgba(245, 200, 66, 0.04) 0%, transparent 50%);
}

.v2-theme-light .v2-snowfall-stars {
    display: none;
}

/* ==========================================================================
   Отключение анимаций для экономии ресурсов
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .v2-snowflake,
    .v2-snowfall-aurora,
    .v2-snowfall-stars {
        animation: none;
    }

    .v2-snowflake {
        opacity: 0.4;
        top: 50%;
    }
}


/* ==========================================================================
   SHOOTING STARS WIDGET — Падающие звёзды / Метеоры
   ==========================================================================
   
   Создаёт эффект падающих звёзд, которые появляются в случайные моменты
   и пролетают по диагонали через экран, оставляя светящийся хвост.
   
   Использование:
   
   1. Через виджет:
      <?= ShootingStarsWidget::widget(['maxStars' => 5]) ?>
   
   2. Через класс:
      <div class="v2-page v2-with-shooting-stars"> ... </div>
   
   ========================================================================== */

/* Контейнер падающих звёзд */
.v2-shooting-stars-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.v2-shooting-fixed {
    position: fixed;
}

.v2-shooting-absolute {
    position: absolute;
}

.v2-shooting-stars-canvas {
    position: absolute;
    inset: 0;
}

/* Падающая звезда */
.v2-shooting-star {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--star-size, 3px);
    height: var(--star-size, 3px);
    background: var(--star-head-color, #ffffff);
    border-radius: 50%;
    transform: translate3d(var(--star-start-x, 0), var(--star-start-y, 0), 0) rotate(var(--star-angle, 45deg));
    animation: v2ShootingStarFly var(--star-duration, 1s) linear forwards;
    box-shadow: 0 0 6px 2px var(--star-head-color, #ffffff),
    0 0 12px 4px rgba(255, 255, 255, 0.5);
    will-change: transform, opacity;
}

/* Хвост звезды — всегда позади головы */
.v2-shooting-star::before {
    content: '';
    position: absolute;
    /* Позиционируем от центра головы, хвост уходит "назад" */
    left: 50%;
    top: 50%;
    transform-origin: right center;
    transform: translateY(-50%) translateX(-100%);
    width: var(--star-tail, 100px);
    height: 2px;
    background: linear-gradient(
            90deg,
            var(--star-tail-color, transparent) 0%,
            var(--star-head-color, #ffffff) 100%
    );
    border-radius: 100px;
    opacity: 0.8;
}

/* Свечение вокруг головы */
.v2-shooting-star::after {
    content: '';
    position: absolute;
    inset: -4px;
    background: radial-gradient(
            circle,
            var(--star-head-color, #ffffff) 0%,
            transparent 70%
    );
    border-radius: 50%;
    opacity: 0.6;
    animation: v2StarGlow var(--star-duration, 1s) linear forwards;
}

/* Быстрые звёзды — больше свечения и блеска */
.v2-shooting-star.v2-star-fast {
    box-shadow: 0 0 8px 3px var(--star-head-color, #ffffff),
    0 0 16px 6px rgba(255, 255, 255, 0.6),
    0 0 24px 8px rgba(255, 255, 255, 0.3);
}

.v2-shooting-star.v2-star-fast::before {
    height: 3px;
    opacity: 1;
}

.v2-shooting-star.v2-star-fast::after {
    inset: -6px;
    opacity: 0.8;
}

/* Медленные звёзды — более тусклые, мерцающие */
.v2-shooting-star.v2-star-slow {
    box-shadow: 0 0 4px 1px var(--star-head-color, #ffffff),
    0 0 8px 2px rgba(255, 255, 255, 0.3);
}

.v2-shooting-star.v2-star-slow::before {
    height: 1px;
    opacity: 0.6;
}

.v2-shooting-star.v2-star-slow::after {
    animation: v2StarGlowSlow var(--star-duration, 1s) linear forwards;
}

/* Мерцание для медленных звёзд */
@keyframes v2StarGlowSlow {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    10% {
        opacity: 0.5;
        transform: scale(1);
    }
    30% {
        opacity: 0.7;
        transform: scale(1.1);
    }
    50% {
        opacity: 0.4;
        transform: scale(0.9);
    }
    70% {
        opacity: 0.6;
        transform: scale(1.05);
    }
    90% {
        opacity: 0.3;
        transform: scale(0.95);
    }
    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

/* Анимация полёта */
@keyframes v2ShootingStarFly {
    0% {
        opacity: 0;
        transform: translate3d(var(--star-start-x, 0), var(--star-start-y, 0), 0) rotate(var(--star-angle, 45deg)) scale(0.5);
    }
    5% {
        opacity: 1;
        transform: translate3d(var(--star-start-x, 0), var(--star-start-y, 0), 0) rotate(var(--star-angle, 45deg)) scale(1);
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate3d(
            calc(var(--star-start-x, 0) + var(--star-dx, 0)),
            calc(var(--star-start-y, 0) + var(--star-dy, 0)),
            0
        ) rotate(var(--star-angle, 45deg)) scale(0.8);
    }
}

/* Анимация свечения */
@keyframes v2StarGlow {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    10% {
        opacity: 0.8;
        transform: scale(1.2);
    }
    50% {
        opacity: 0.6;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

/* ==========================================================================
   Модификаторы падающих звёзд
   ========================================================================== */

/* Редкие звёзды — управляется через JS (minInterval/maxInterval) */

/* Яркие звёзды */
.v2-stars-bright .v2-shooting-star {
    box-shadow: 0 0 10px 4px var(--star-head-color, #ffffff),
    0 0 20px 8px rgba(255, 255, 255, 0.6);
}

.v2-stars-bright .v2-shooting-star::before {
    height: 3px;
    opacity: 1;
}

/* Золотые звёзды */
.v2-stars-golden .v2-shooting-star {
    --star-head-color: #fde68a;
    --star-tail-color: rgba(253, 230, 138, 0);
}

/* Ледяные звёзды */
.v2-stars-ice .v2-shooting-star {
    --star-head-color: #67e8f9;
    --star-tail-color: rgba(103, 232, 249, 0);
}

/* Радужные звёзды (каждая звезда — свой цвет через JS) */
.v2-stars-rainbow .v2-shooting-star:nth-child(5n+1) {
    --star-head-color: #f472b6;
    --star-tail-color: rgba(244, 114, 182, 0);
}

.v2-stars-rainbow .v2-shooting-star:nth-child(5n+2) {
    --star-head-color: #a78bfa;
    --star-tail-color: rgba(167, 139, 250, 0);
}

.v2-stars-rainbow .v2-shooting-star:nth-child(5n+3) {
    --star-head-color: #38bdf8;
    --star-tail-color: rgba(56, 189, 248, 0);
}

.v2-stars-rainbow .v2-shooting-star:nth-child(5n+4) {
    --star-head-color: #4ade80;
    --star-tail-color: rgba(74, 222, 128, 0);
}

.v2-stars-rainbow .v2-shooting-star:nth-child(5n+5) {
    --star-head-color: #fbbf24;
    --star-tail-color: rgba(251, 191, 36, 0);
}

/* ==========================================================================
   Светлая тема — падающие звёзды
   ========================================================================== */

.v2-theme-light .v2-shooting-star {
    --star-head-color: rgba(100, 116, 139, 0.8);
    --star-tail-color: rgba(100, 116, 139, 0);
    box-shadow: 0 0 4px 1px rgba(100, 116, 139, 0.6),
    0 0 8px 2px rgba(100, 116, 139, 0.3);
}

/* ==========================================================================
   Отключение анимаций
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .v2-shooting-star {
        display: none;
    }
}


/* ==========================================================================
   FAQ PAGE — Волшебная библиотека знаний
   ========================================================================== */

/* Основной контейнер */
.v2-faq-page {
    position: relative;
    /*min-height: 100vh;*/
    overflow: hidden;
}

.v2-faq-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ═══════════════════════════════════════════════════════════════════
   АТМОСФЕРА — Снегопад, Северное сияние
   ═══════════════════════════════════════════════════════════════════ */

.v2-faq-atmosphere {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.v2-faq-aurora {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 20% 20%, rgba(168, 85, 247, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 30%, rgba(56, 189, 248, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse 70% 60% at 50% 80%, rgba(245, 200, 66, 0.08) 0%, transparent 50%);
    animation: auroraShift 20s ease-in-out infinite;
    will-change: transform, opacity;
}

.v2-faq-stars {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(1px 1px at 15% 15%, rgba(255, 255, 255, 0.7) 50%, transparent 50%),
    radial-gradient(2px 2px at 35% 25%, rgba(255, 255, 255, 0.8) 50%, transparent 50%),
    radial-gradient(1px 1px at 55% 45%, rgba(255, 255, 255, 0.6) 50%, transparent 50%),
    radial-gradient(1px 1px at 75% 35%, rgba(255, 255, 255, 0.7) 50%, transparent 50%),
    radial-gradient(2px 2px at 85% 65%, rgba(255, 255, 255, 0.5) 50%, transparent 50%);
    animation: starsTwinkle 6s ease-in-out infinite;
    will-change: opacity;
}

.v2-faq-snow {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.v2-faq-snowflake {
    position: absolute;
    width: var(--snow-size);
    height: var(--snow-size);
    background: white;
    border-radius: 50%;
    opacity: 0;
    top: -20px;
    left: var(--snow-left);
    animation: faqSnowFall var(--snow-duration) linear infinite;
    animation-delay: var(--snow-delay);
    box-shadow: 0 0 calc(var(--snow-size) * 2) rgba(255, 255, 255, 0.5);
}

@keyframes faqSnowFall {
    0% {
        transform: translateY(-20px) translateX(0) rotate(0deg);
        opacity: 0;
    }
    5% {
        opacity: 0.7;
    }
    50% {
        transform: translateY(50vh) translateX(var(--snow-drift)) rotate(180deg);
        opacity: 0.6;
    }
    95% {
        opacity: 0.5;
    }
    100% {
        transform: translateY(100vh) translateX(calc(var(--snow-drift) * 2)) rotate(360deg);
        opacity: 0;
    }
}

/* Плавающие книги на фоне */
.v2-faq-books-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.v2-faq-book-float {
    position: absolute;
    font-size: 40px;
    opacity: 0.15;
    animation: faqBookFloat 8s ease-in-out infinite;
    animation-delay: var(--delay);
}

@keyframes faqBookFloat {
    0%, 100% {
        transform: translateY(0) rotate(-5deg);
    }
    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   HERO — Библиотека
   ═══════════════════════════════════════════════════════════════════ */

.v2-faq-hero {
    position: relative;
    /*min-height: 60vh;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px 40px;
    z-index: 1;
}

.v2-faq-hero-content {
    position: relative;
    z-index: 2;
}

/* Свиток */
.v2-faq-hero-scroll {
    position: relative;
    display: inline-block;
    margin-bottom: 24px;
}

.v2-faq-scroll-icon {
    font-size: 72px;
    display: block;
    animation: faqScrollFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(245, 200, 66, 0.4));
}

@keyframes faqScrollFloat {
    0%, 100% {
        transform: translateY(0) rotate(-3deg);
    }
    50% {
        transform: translateY(-12px) rotate(3deg);
    }
}

.v2-faq-scroll-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(245, 200, 66, 0.3) 0%, transparent 60%);
    animation: faqGlowPulse 2s ease-in-out infinite;
}

@keyframes faqGlowPulse {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

/* Заголовок */
.v2-faq-hero-title {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 16px;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

.v2-faq-title-line {
    display: block;
    color: var(--v2-text);
}

.v2-faq-title-accent {
    background: linear-gradient(135deg, #f5c842 0%, #fde68a 40%, #f5c842 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: faqTitleShimmer 4s linear infinite;
    background-size: 200% 100%;
}

@keyframes faqTitleShimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.v2-faq-hero-subtitle {
    font-size: 18px;
    color: var(--v2-text-muted);
    margin: 0 0 32px;
    max-width: 500px;
}

/* Статистика в hero */
.v2-faq-hero-stats {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.v2-faq-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--v2-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
}

.v2-faq-stat-icon {
    font-size: 24px;
}

.v2-faq-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--v2-gold);
}

.v2-faq-stat-label {
    font-size: 12px;
    color: var(--v2-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Подсказка скролла */
.v2-faq-scroll-hint {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--v2-text-muted);
}

.v2-faq-scroll-arrow {
    font-size: 24px;
    animation: faqScrollBounce 1.5s ease-in-out infinite;
}

@keyframes faqScrollBounce {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    50% {
        transform: translateY(8px);
        opacity: 1;
    }
}

.v2-faq-scroll-text {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   ОСНОВНОЙ КОНТЕНТ
   ═══════════════════════════════════════════════════════════════════ */

.v2-faq-main {
    position: relative;
    z-index: 1;
    padding: 40px 0 80px;
}

/* ═══════════════════════════════════════════════════════════════════
   FAQ WIDGET СТИЛИ
   ═══════════════════════════════════════════════════════════════════ */

.v2-faq-widget {
    position: relative;
}

/* Сообщение от Мерри */
.v2-faq-merry-intro {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
    animation: faqFadeInUp 0.6s ease-out;
}

.v2-faq-merry-avatar {
    width: 110px;
    height: 110px;
    font-size: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: faqMerryBounce 2s ease-in-out infinite;
}

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

.v2-faq-merry-bubble {
    background: var(--v2-bg-card);
    border-radius: var(--v2-radius-xl);
    padding: 20px 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    flex: 1;
}

.v2-faq-merry-bubble::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 20px;
    border: 6px solid transparent;
    border-right-color: var(--v2-bg-card);
}

.v2-faq-merry-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--v2-gold);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.v2-faq-merry-text {
    font-size: 15px;
    color: var(--v2-text);
    line-height: 1.6;
    margin: 0;
}

/* Поиск */
.v2-faq-search-wrapper {
    margin-bottom: 32px;
    animation: faqFadeInUp 0.6s ease-out 0.1s backwards;
}

.v2-faq-search {
    display: flex;
    align-items: center;
    background: var(--v2-bg-card);
    border-radius: var(--v2-radius-xl);
    padding: 4px 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.v2-faq-search:focus-within {
    border-color: var(--v2-gold);
    box-shadow: 0 0 30px rgba(245, 200, 66, 0.2);
}

.v2-faq-search-icon {
    font-size: 20px;
    margin-right: 12px;
    opacity: 0.6;
}

.v2-faq-search-input {
    flex: 1;
    background: none;
    border: none;
    font-size: 16px;
    color: var(--v2-text);
    padding: 14px 0;
    outline: none;
    font-family: inherit;
}

.v2-faq-search-input::placeholder {
    color: var(--v2-text-muted);
}

.v2-faq-search-clear {
    font-size: 18px;
    color: var(--v2-text-muted);
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s;
}

.v2-faq-search-clear:hover {
    color: var(--v2-text);
}

.v2-faq-search-hint {
    font-size: 13px;
    color: var(--v2-text-dim);
    margin-top: 8px;
    padding-left: 20px;
}

/* Навигация по категориям */
.v2-faq-categories-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
    animation: faqFadeInUp 0.6s ease-out 0.2s backwards;
}

.v2-faq-category-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--v2-bg-card);
    border-radius: var(--v2-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--v2-text-muted);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
}

.v2-faq-category-link:hover {
    border-color: var(--v2-gold);
    color: var(--v2-text);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.v2-faq-category-link-icon {
    font-size: 18px;
}

.v2-faq-category-link-title {
    font-weight: 500;
}

/* Сообщение "Ничего не найдено" */
.v2-faq-no-results {
    text-align: center;
    padding: 60px 20px;
    background: var(--v2-bg-card);
    border-radius: var(--v2-radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.v2-faq-no-results-icon {
    font-size: 64px;
    margin-bottom: 16px;
    display: block;
}

.v2-faq-no-results-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--v2-text);
    margin-bottom: 8px;
}

.v2-faq-no-results-text {
    font-size: 15px;
    color: var(--v2-text-muted);
}

.v2-faq-no-results-text a {
    color: var(--v2-gold);
}

/* Категории */
.v2-faq-categories {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.v2-faq-category {
    animation: faqFadeInUp 0.6s ease-out backwards;
    scroll-margin-top: 20px;
}

.v2-faq-category:nth-child(1) {
    animation-delay: 0.1s;
}

.v2-faq-category:nth-child(2) {
    animation-delay: 0.15s;
}

.v2-faq-category:nth-child(3) {
    animation-delay: 0.2s;
}

.v2-faq-category:nth-child(4) {
    animation-delay: 0.25s;
}

.v2-faq-category:nth-child(5) {
    animation-delay: 0.3s;
}

.v2-faq-category:nth-child(6) {
    animation-delay: 0.35s;
}

.v2-faq-category:nth-child(7) {
    animation-delay: 0.4s;
}

.v2-faq-category-flash {
    animation: faqCategoryFlash 1s ease-out;
}

@keyframes faqCategoryFlash {
    0% {
        box-shadow: 0 0 0 0 rgba(245, 200, 66, 0.5);
    }
    50% {
        box-shadow: 0 0 40px 10px rgba(245, 200, 66, 0.3);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(245, 200, 66, 0);
    }
}

/* Заголовок категории */
.v2-faq-category-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding: 20px 24px;
    background: var(--v2-bg-card);
    border-radius: var(--v2-radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.v2-faq-category-icon {
    font-size: 40px;
    flex-shrink: 0;
}

.v2-faq-category-info {
    flex: 1;
}

.v2-faq-category-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--v2-text);
    margin: 0 0 4px;
}

.v2-faq-category-desc {
    font-size: 14px;
    color: var(--v2-text-muted);
    margin: 0;
}

.v2-faq-category-expert {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.v2-faq-expert-avatar {
    font-size: 32px;
    width: 70px;
}

.v2-faq-expert-name {
    font-size: 11px;
    color: var(--v2-text-muted);
    text-align: center;
    white-space: nowrap;
}

/* Вопросы */
.v2-faq-questions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.v2-faq-item {
    background: var(--v2-bg-card);
    border-radius: var(--v2-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}

.v2-faq-item:hover {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.v2-faq-item.v2-faq-open {
    border-color: rgba(245, 200, 66, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.v2-faq-item.v2-faq-highlight {
    border-color: var(--v2-gold);
    box-shadow: 0 0 20px rgba(245, 200, 66, 0.15);
}

.v2-faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 0.2s;
}

.v2-faq-question:hover {
    background: rgba(255, 255, 255, 0.03);
}

.v2-faq-q-marker {
    width: 30px;
    height: 30px;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--v2-gold);
    color: var(--v2-text-dark);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.v2-faq-q-text {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--v2-text);
    line-height: 1.5;
}

.v2-faq-toggle {
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--v2-text-muted);
    transition: transform 0.3s ease, color 0.2s;
    flex-shrink: 0;
}

.v2-faq-item.v2-faq-open .v2-faq-toggle {
    transform: rotate(180deg);
    color: var(--v2-gold);
}

/* Ответ */
.v2-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.v2-faq-item.v2-faq-open .v2-faq-answer {
    max-height: 2000px;
}

.v2-faq-answer-content {
    display: flex;
    gap: 14px;
    padding: 4px 20px 22px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 0;
    background: rgba(0, 0, 0, 0.1);
}

.v2-faq-a-marker {
    width: 30px;
    height: 30px;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--v2-green);
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 14px;
}

.v2-faq-a-text {
    flex: 1;
    font-size: 14px;
    color: var(--v2-text-muted);
    line-height: 1.75;
    padding-top: 14px;
}

.v2-faq-a-text strong {
    color: var(--v2-text);
    font-weight: 600;
}

.v2-faq-a-text a {
    color: var(--v2-gold);
    text-decoration: none;
    font-weight: 500;
}

.v2-faq-a-text a:hover {
    text-decoration: underline;
}

.v2-faq-a-text ol,
.v2-faq-a-text ul {
    margin: 14px 0;
    padding-left: 20px;
}

.v2-faq-a-text li {
    margin-bottom: 8px;
}

/* Таблица в ответах */
.v2-faq-table {
    width: 100%;
    margin: 12px 0;
    border-collapse: collapse;
}

.v2-faq-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.v2-faq-table td:last-child {
    text-align: right;
    font-weight: 600;
    color: var(--v2-green);
}

.v2-faq-table tr:last-child td {
    border-bottom: none;
}

/* Анимация появления */
@keyframes faqFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   НИЖНИЙ БЛОК — Контакты
   ═══════════════════════════════════════════════════════════════════ */

.v2-faq-bottom {
    position: relative;
    z-index: 1;
    padding: 0 0 60px;
}

.v2-faq-contact-card {
    position: relative;
    background: linear-gradient(135deg, rgba(245, 200, 66, 0.1) 0%, rgba(168, 85, 247, 0.08) 50%, rgba(56, 189, 248, 0.06) 100%);
    border-radius: var(--v2-radius-xl);
    padding: 48px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    overflow: hidden;
}

.v2-faq-contact-decoration {
    position: absolute;
    top: 20px;
    right: 30px;
    display: flex;
    gap: 12px;
}

.v2-faq-contact-star {
    font-size: 20px;
    animation: faqStarFloat 3s ease-in-out infinite;
    animation-delay: var(--delay);
}

@keyframes faqStarFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-10px) rotate(15deg);
        opacity: 1;
    }
}

.v2-faq-contact-content {
    position: relative;
    z-index: 2;
}

.v2-faq-contact-avatar {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}

.v2-faq-avatar-emoji {
    font-size: 64px;
    display: block;
    position: relative;
    z-index: 2;
}

.v2-faq-avatar-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.3) 0%, transparent 60%);
    animation: faqAvatarGlow 2s ease-in-out infinite;
}

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

.v2-faq-contact-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--v2-text);
    margin: 0 0 12px;
}

.v2-faq-contact-text {
    font-size: 16px;
    color: var(--v2-text-muted);
    margin: 0 0 24px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.v2-faq-contact-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.v2-faq-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--v2-radius-lg);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.v2-faq-btn-primary {
    background: var(--v2-gradient-gold);
    color: #000;
    box-shadow: 0 4px 20px rgba(245, 200, 66, 0.3);
}

.v2-faq-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(245, 200, 66, 0.4);
}

.v2-faq-btn-outline {
    background: transparent;
    border: 2px solid var(--v2-gold);
    color: var(--v2-gold);
}

.v2-faq-btn-outline:hover {
    background: rgba(245, 200, 66, 0.1);
    transform: translateY(-3px);
}

.v2-faq-btn-icon {
    font-size: 18px;
}

.v2-faq-contact-email {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
}

.v2-faq-email-label {
    color: var(--v2-text-dim);
}

.v2-faq-email-link {
    color: var(--v2-gold);
    text-decoration: none;
    font-weight: 500;
}

.v2-faq-email-link:hover {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER WIDGET — Универсальный виджет футера V2
   ═══════════════════════════════════════════════════════════════════ */

.v2-page-footer {
    position: relative;
    z-index: 1;
    padding: 40px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.v2-footer-widget {
    text-align: center;
}

.v2-footer-links {
    display: flex;
    justify-content: center;
    gap: 12px 28px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.v2-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--v2-text-muted);
    text-decoration: none;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: var(--v2-radius-md);
    transition: all 0.3s ease;
}

.v2-footer-link:hover {
    color: var(--v2-gold);
    background: rgba(245, 200, 66, 0.1);
    transform: translateY(-2px);
}

.v2-footer-link-icon {
    font-size: 16px;
}

.v2-footer-link-label {
    font-weight: 500;
}

.v2-footer-signature {
    font-size: 14px;
    color: var(--v2-text-dim);
    margin: 0;
    padding-top: 8px;
}

/* Старые стили для обратной совместимости */
.v2-faq-footer {
    position: relative;
    z-index: 1;
    padding: 40px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.v2-faq-footer-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.v2-faq-footer-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--v2-text-muted);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.v2-faq-footer-link:hover {
    color: var(--v2-gold);
}

.v2-faq-footer-text {
    font-size: 14px;
    color: var(--v2-text-dim);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Адаптивность
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .v2-faq-hero {
        min-height: 50vh;
        padding: 40px 20px 30px;
    }

    .v2-faq-scroll-icon {
        font-size: 56px;
    }

    .v2-faq-hero-title {
        font-size: 36px;
    }

    .v2-faq-hero-subtitle {
        font-size: 16px;
    }

    .v2-faq-hero-stats {
        gap: 16px;
    }

    .v2-faq-hero-stat {
        padding: 12px 16px;
    }

    .v2-faq-stat-value {
        font-size: 20px;
    }

    .v2-faq-merry-intro {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .v2-faq-merry-bubble::before {
        display: none;
    }

    .v2-faq-categories-nav {
        justify-content: center;
    }

    .v2-faq-category-link {
        padding: 8px 12px;
        font-size: 13px;
    }

    .v2-faq-category-header {
        flex-wrap: wrap;
        padding: 16px;
    }

    .v2-faq-category-icon {
        font-size: 32px;
    }

    .v2-faq-category-title {
        font-size: 18px;
    }

    .v2-faq-category-header {
        gap: 2px;
    }

    .v2-faq-category-expert {
        width: 100%;
        flex-direction: row;
        justify-content: center;
        margin-top: 5px;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .v2-faq-question {
        padding: 14px 16px;
    }

    .v2-faq-q-marker,
    .v2-faq-a-marker {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .v2-faq-q-text {
        font-size: 14px;
    }

    .v2-faq-answer-content {
        padding: 4px 16px 18px 16px;
        gap: 12px;
    }

    .v2-faq-q-marker,
    .v2-faq-a-marker {
        width: 26px;
        height: 26px;
        min-width: 26px;
        font-size: 12px;
    }

    .v2-faq-a-text {
        font-size: 13px;
        padding-top: 12px;
    }

    .v2-faq-a-marker {
        margin-top: 12px;
    }

    .v2-faq-contact-card {
        padding: 32px 20px;
    }

    .v2-faq-contact-title {
        font-size: 22px;
    }

    .v2-faq-contact-text {
        font-size: 14px;
    }

    .v2-faq-contact-actions {
        flex-direction: column;
    }

    .v2-faq-contact-btn {
        justify-content: center;
    }

    .v2-faq-footer-links {
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .v2-faq-hero-title {
        font-size: 28px;
    }

    .v2-faq-hero-stats {
        flex-direction: column;
    }

    .v2-faq-hero-stat {
        flex-direction: row;
        gap: 12px;
    }

    .v2-faq-categories-nav {
        flex-direction: column;
    }

    .v2-faq-category-link {
        justify-content: center;
    }

    .v2-faq-book-float {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT THEME — FAQ Page
   ═══════════════════════════════════════════════════════════════════ */

.v2-theme-light .v2-faq-aurora {
    background: radial-gradient(ellipse 80% 50% at 20% 20%, rgba(168, 85, 247, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 30%, rgba(56, 189, 248, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 70% 60% at 50% 80%, rgba(245, 200, 66, 0.05) 0%, transparent 50%);
}

.v2-theme-light .v2-faq-snowflake {
    background: rgba(0, 0, 0, 0.1);
}

.v2-theme-light .v2-faq-hero-stat {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

.v2-theme-light .v2-faq-merry-bubble,
.v2-theme-light .v2-faq-search,
.v2-theme-light .v2-faq-category-link,
.v2-theme-light .v2-faq-category-header,
.v2-theme-light .v2-faq-item,
.v2-theme-light .v2-faq-no-results {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

.v2-theme-light .v2-faq-merry-bubble::before {
    border-right-color: #ffffff;
}

.v2-theme-light .v2-faq-search:focus-within {
    border-color: var(--v2-gold);
}

.v2-theme-light .v2-faq-category-link:hover {
    border-color: var(--v2-gold);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.v2-theme-light .v2-faq-item:hover {
    border-color: rgba(0, 0, 0, 0.15);
}

.v2-theme-light .v2-faq-question:hover {
    background: rgba(0, 0, 0, 0.02);
}

.v2-theme-light .v2-faq-contact-card {
    background: linear-gradient(135deg, rgba(245, 200, 66, 0.08) 0%, rgba(168, 85, 247, 0.05) 50%, rgba(56, 189, 248, 0.03) 100%);
    border-color: rgba(0, 0, 0, 0.08);
}

.v2-theme-light .v2-faq-table td {
    border-color: rgba(0, 0, 0, 0.08);
}


/* ==========================================================================
   ACCORDION WIDGET — Универсальный виджет аккордеона V2
   ========================================================================== */

.v2-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Элемент аккордеона */
.v2-accordion-item {
    background: var(--v2-bg-card);
    border-radius: var(--v2-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}

.v2-accordion-item:hover {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.v2-accordion-item.v2-accordion-open {
    border-color: rgba(245, 200, 66, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

/* Триггер (кнопка вопроса) */
.v2-accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 0.2s;
}

.v2-accordion-trigger:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Иконка */
.v2-accordion-icon {
    font-size: 20px;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.v2-accordion-item:hover .v2-accordion-icon {
    opacity: 1;
}

/* Текст вопроса */
.v2-accordion-question {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--v2-text);
    line-height: 1.5;
}

/* Кнопка toggle */
.v2-accordion-toggle {
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: transform 0.3s ease;
}

.v2-accordion-toggle::before,
.v2-accordion-toggle::after {
    content: '';
    position: absolute;
    background: var(--v2-gold);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.v2-accordion-toggle::before {
    width: 14px;
    height: 2px;
}

.v2-accordion-toggle::after {
    width: 2px;
    height: 14px;
}

.v2-accordion-open .v2-accordion-toggle::after {
    height: 0;
    opacity: 0;
}

/* Контент (ответ) */
.v2-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.v2-accordion-item.v2-accordion-open .v2-accordion-content {
    max-height: 2000px;
}

.v2-accordion-answer {
    padding: 0 20px 22px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.1);
    font-size: 14px;
    color: var(--v2-text-muted);
    line-height: 1.75;
}

.v2-accordion-answer p {
    margin: 14px 0 0;
    color: var(--v2-text);
}

.v2-accordion-answer p:first-child {
    margin-top: 14px;
}

.v2-accordion-answer strong {
    color: var(--v2-text);
    font-weight: 600;
}

.v2-accordion-answer a {
    color: var(--v2-gold);
    text-decoration: none;
    font-weight: 500;
}

.v2-accordion-answer a:hover {
    text-decoration: underline;
}

.v2-accordion-answer ol,
.v2-accordion-answer ul {
    margin: 14px 0;
    padding-left: 20px;
}

.v2-accordion-answer li {
    margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   Стиль Magic (с иконками)
   ═══════════════════════════════════════════════════════════════════ */

.v2-accordion-magic .v2-accordion-icon {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--v2-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.v2-accordion-magic .v2-accordion-item.v2-accordion-open .v2-accordion-icon {
    background: rgba(245, 200, 66, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════
   Стиль Minimal
   ═══════════════════════════════════════════════════════════════════ */

.v2-accordion-minimal .v2-accordion-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
}

.v2-accordion-minimal .v2-accordion-item:last-child {
    border-bottom: none;
}

.v2-accordion-minimal .v2-accordion-trigger {
    padding: 16px 0;
}

.v2-accordion-minimal .v2-accordion-answer {
    padding: 0 0 16px 0;
    background: transparent;
    border-top: none;
}

/* ═══════════════════════════════════════════════════════════════════
   Светлая тема
   ═══════════════════════════════════════════════════════════════════ */

.v2-theme-light .v2-accordion-item {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

.v2-theme-light .v2-accordion-item:hover {
    border-color: rgba(0, 0, 0, 0.15);
}

.v2-theme-light .v2-accordion-trigger:hover {
    background: rgba(0, 0, 0, 0.02);
}

.v2-theme-light .v2-accordion-answer {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

.v2-theme-light .v2-accordion-minimal .v2-accordion-item {
    border-color: rgba(0, 0, 0, 0.1);
}

/* ═══════════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .v2-accordion-trigger {
        padding: 14px 16px;
        gap: 12px;
    }

    .v2-accordion-question {
        font-size: 14px;
    }

    .v2-accordion-answer {
        padding: 0 16px 18px 16px;
        font-size: 13px;
    }

    .v2-accordion-toggle {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }

    .v2-accordion-toggle::before {
        width: 12px;
    }

    .v2-accordion-toggle::after {
        height: 12px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ВИДЖЕТ ГИРЛЯНДЫ — Декоративная анимированная гирлянда
   ═══════════════════════════════════════════════════════════════════════════ */

.v2-garland {
    --garland-gap: 50px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Полноширинный режим — выходит за пределы контейнера */
.v2-garland--fullwidth {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
}

/* Провод гирлянды (верёвка) */
.v2-garland-wire {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(60, 80, 40, 0.8) 5%,
            rgba(60, 80, 40, 0.9) 50%,
            rgba(60, 80, 40, 0.8) 95%,
            transparent 100%
    );
    border-radius: 2px;
    z-index: 1;
}

/* Добавляем провисание (катенарная кривая) */
.v2-garland--with-wire .v2-garland-wire {
    height: 3px;
    background: radial-gradient(ellipse 100% 200% at 50% -50%, transparent 48%, rgba(60, 80, 40, 0.9) 50%, transparent 52%),
    linear-gradient(90deg, transparent 0%, rgba(60, 80, 40, 0.7) 10%, rgba(60, 80, 40, 0.85) 50%, rgba(60, 80, 40, 0.7) 90%, transparent 100%);
}

/* Контейнер лампочек */
.v2-garland-lights {
    display: flex;
    justify-content: center;
    gap: var(--garland-gap);
    padding: 8px 40px 60px;
    position: relative;
    z-index: 2;
}

/* Отдельная лампочка */
.v2-garland-light {
    width: 14px;
    height: 20px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    position: relative;
    animation: v2GarlandGlow 2s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
    box-shadow: 0 0 20px currentColor,
    0 0 40px currentColor,
    0 0 60px currentColor;
    transition: transform 0.3s ease;
}

/* Подвес лампочки (патрон) */
.v2-garland--with-wire .v2-garland-light::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 10px;
    background: rgba(60, 80, 40, 0.9);
    border-radius: 2px 2px 0 0;
}

/* Блик на лампочке */
.v2-garland-light::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 4px;
    height: 6px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
}

/* Цвета лампочек */
.v2-garland-red {
    background: linear-gradient(135deg, #ff6b6b 0%, #ef4444 50%, #dc2626 100%);
    color: #ef4444;
}

.v2-garland-green {
    background: linear-gradient(135deg, #6ee7b7 0%, #22c55e 50%, #16a34a 100%);
    color: #22c55e;
}

.v2-garland-gold {
    background: linear-gradient(135deg, #fde047 0%, #f5c842 50%, #eab308 100%);
    color: #f5c842;
}

.v2-garland-blue {
    background: linear-gradient(135deg, #93c5fd 0%, #3b82f6 50%, #2563eb 100%);
    color: #3b82f6;
}

/* Анимация мигания */
@keyframes v2GarlandGlow {
    0%, 100% {
        opacity: 0.5;
        transform: scale(0.9);
        filter: brightness(0.7);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
        filter: brightness(1.2);
    }
}

/* Стиль Magic — более крупные лампочки с интенсивным свечением */
.v2-garland--magic .v2-garland-light {
    width: 16px;
    height: 24px;
    box-shadow: 0 0 25px currentColor,
    0 0 50px currentColor,
    0 0 80px currentColor,
    0 0 100px currentColor;
}

.v2-garland--magic .v2-garland-lights {
    gap: 60px;
}

/* Стиль Mini — компактные лампочки */
.v2-garland--mini .v2-garland-light {
    width: 10px;
    height: 14px;
    box-shadow: 0 0 10px currentColor,
    0 0 20px currentColor;
}

.v2-garland--mini .v2-garland-lights {
    gap: 30px;
    padding: 6px 20px 0;
}

.v2-garland--mini .v2-garland-light::before {
    top: -7px;
    width: 4px;
    height: 7px;
}

/* Позиция снизу */
.v2-garland--bottom {
    flex-direction: column-reverse;
}

.v2-garland--bottom .v2-garland-wire {
    top: auto;
    bottom: 0;
}

.v2-garland--bottom .v2-garland-light {
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
}

.v2-garland--bottom .v2-garland-light::before {
    top: auto;
    bottom: -10px;
    border-radius: 0 0 2px 2px;
}

.v2-garland--bottom .v2-garland-lights {
    padding: 0 40px 8px;
}

/* Фиксированная позиция */
.v2-garland--fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    pointer-events: none;
}

/* Адаптивность */
@media (max-width: 992px) {
    .v2-garland-lights {
        gap: calc(var(--garland-gap) * 0.7);
        padding: 8px 20px 0;
    }

    .v2-garland--magic .v2-garland-lights {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .v2-garland-lights {
        gap: calc(var(--garland-gap) * 0.5);
        padding: 6px 10px 0;
    }

    .v2-garland-light {
        width: 12px;
        height: 16px;
    }

    .v2-garland--magic .v2-garland-light {
        width: 14px;
        height: 20px;
    }

    .v2-garland--magic .v2-garland-lights {
        gap: 30px;
    }

    .v2-garland--mini .v2-garland-light {
        width: 8px;
        height: 12px;
    }

    .v2-garland--mini .v2-garland-lights {
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .v2-footer-links{
        justify-content: center;
        gap: 2px 1px;
        flex-wrap: wrap;
        margin-bottom: 0px;
    }
    .v2-garland-lights {
        gap: 25px;
    }

    .v2-garland-light {
        width: 10px;
        height: 14px;
        box-shadow: 0 0 15px currentColor,
        0 0 30px currentColor;
    }

    .v2-garland--magic .v2-garland-lights {
        gap: 20px;
    }
}

/* ==========================================================================
   ERROR PAGE — Страница ошибки
   ========================================================================== */

.v2-error-page {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 20px 64px;
    z-index: 1;
}

.v2-error-hero {
    position: relative;
    text-align: center;
    padding: 32px 28px;
    border-radius: var(--v2-radius-xl);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.95) 50%, rgba(17, 24, 39, 0.92) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: var(--v2-shadow-card);
    overflow: hidden;
}

.v2-error-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(245, 200, 66, 0.08), transparent 50%),
    radial-gradient(circle at 80% 40%, rgba(56, 189, 248, 0.08), transparent 55%);
    pointer-events: none;
}

.v2-error-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--v2-text-muted);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 12px;
    position: relative;
    z-index: 1;
}

.v2-error-badge-icon {
    font-size: 16px;
}

.v2-error-code {
    font-size: 52px;
    font-weight: 800;
    color: var(--v2-text);
    letter-spacing: 3px;
    margin: 18px 0 10px;
    position: relative;
    z-index: 1;
}

.v2-error-hero-icon {
    font-size: 42px;
    filter: drop-shadow(0 0 18px rgba(245, 200, 66, 0.5));
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.v2-error-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--v2-text);
    margin: 0 0 12px;
    position: relative;
    z-index: 1;
}

.v2-error-subtitle {
    color: var(--v2-text-muted);
    margin: 0 auto 20px;
    max-width: 640px;
    position: relative;
    z-index: 1;
}

.v2-error-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.v2-error-card {
    margin-top: 24px;
}
.v2-error-card .v2-card-header, .v2-error-message{
    text-align: center;
    justify-content: center;
}

.v2-error-message {
    font-size: 15px;
    line-height: 1.6;
    color: var(--v2-text);
}

.v2-error-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.v2-error-meta-item {
    padding: 12px 14px;
    border-radius: var(--v2-radius-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.v2-error-meta-label {
    display: block;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--v2-text-dim);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.v2-error-meta-value {
    color: var(--v2-text);
    font-weight: 600;
    word-break: break-word;
}

.v2-error-help {
    margin-top: 20px;
}

.v2-error-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.v2-error-link {
    color: var(--v2-gold);
    text-decoration: none;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: var(--v2-radius-md);
    background: rgba(245, 200, 66, 0.08);
    border: 1px solid rgba(245, 200, 66, 0.2);
    transition: all 0.25s ease;
}

.v2-error-link:hover {
    color: var(--v2-bg-dark);
    background: var(--v2-gold);
    border-color: var(--v2-gold);
}

@media (max-width: 768px) {
    .v2-error-page {
        padding: 28px 16px 48px;
    }

    .v2-error-hero {
        padding: 24px 18px;
    }

    .v2-error-code {
        font-size: 42px;
    }

    .v2-error-title {
        font-size: 24px;
    }

    .v2-error-subtitle {
        font-size: 14px;
    }
}