/* ============================================================
   GUEST LANDING STYLES
   ============================================================ */

#guest-landing {
    position: fixed;
    top: var(--header-height); /* ← ИЗМЕНИТЬ: отступаем сверху на высоту хедера */
    left: 0;
    width: 100%;
    height: calc(100% - var(--header-height)); /* ← ИЗМЕНИТЬ: высота минус хедер */
    background: var(--bg-body);
    z-index: 50; /* ← ИЗМЕНИТЬ: меньше чем у хедера (100) */
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 20px;
}

.landing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 820px;
    margin: 40px auto;
    flex: 1;
}

.landing-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.2s ease;
}

.landing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.card-themes {
    flex-direction: row;
    padding: 0;
    overflow: hidden;
}

.theme-preview {
    flex: 1;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
}

.theme-preview.light { background: #f4f5f7; color: #2c3e50; }
.theme-preview.dark { background: #1a1d23; color: #e4e7ec; }
.theme-preview i { font-size: 48px; }

.card-demo {
    position: relative;
    min-height: 300px;
    background-image: radial-gradient(circle, var(--border-color) 1px, transparent 1px);
    background-size: 20px 20px;
}

#demo-mindmap { width: 100%; height: 100%; }

.demo-overlay {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
}

.card-info h3, .card-rules h3 {
    margin-top: 0;
    color: var(--color-primary);
}

.feature-list { list-style: none; padding: 0; margin-top: 16px; }
.feature-list li { margin-bottom: 8px; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.feature-list i { color: var(--color-success); }

.rules-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.landing-footer {
    max-width: 800px;
    margin: 0 auto 20px auto;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 20px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-link {
    text-decoration: none;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.footer-link:hover { color: var(--color-primary); }
.footer-link i { font-size: 24px; }
.footer-link span { font-size: 11px; color: var(--text-secondary); max-width: 150px; text-align: center; }

.copyright { text-align: center; font-size: 12px; color: var(--text-muted); margin-bottom: 20px; }

@media (max-width: 850px) {
    .landing-grid { grid-template-columns: 1fr; max-width: 390px; }
    .landing-footer { flex-direction: column; align-items: center; }
}

/* DEMO ANIMATION */
.demo-node {
    position: absolute;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    animation: demoNodeAppear 0.4s ease forwards;
    transform: none;
}
.demo-node i { font-size: 14px; color: var(--color-primary); }
.demo-n2 { animation-delay: 0.3s; }
.demo-n3 { animation-delay: 0.6s; }
.demo-n4 { animation-delay: 0.9s; }

@keyframes demoNodeAppear {
    from { opacity: 0; transform: translateX(-50%) scale(0.8); }
    to   { opacity: 1; transform: translateX(-50%) scale(1); }
}
.demo-n2, .demo-n3 { animation-name: demoNodeAppearSimple; }
@keyframes demoNodeAppearSimple {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}

.demo-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.demo-line {
    stroke: var(--color-primary);
    stroke-width: 2;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: demoLineDraw 0.5s ease forwards;
}
.line-1 { animation-delay: 0.5s; }
.line-2 { animation-delay: 0.8s; }
.line-3 { animation-delay: 1.1s; }
.line-4 { animation-delay: 1.4s; }
@keyframes demoLineDraw { to { stroke-dashoffset: 0; } }