/*
 * landing.css — Первый экран «Ясна Вижу» (index.html), тёмно-золотой бренд.
 * Загружается ПОСЛЕ tokens.css + common.css. Никаких локальных :root.
 * Тема — общий dark-brand (фон/шрифты/частицы берутся из common.css).
 */

/* Landing keeps space-between layout for the hero composition */
body {
    justify-content: space-between;
}

/* Local size token for the lens/orb */
:root {
    --sphere-size: clamp(120px, min(65vw, calc(100vh - 280px)), 300px);
}

/* ── Profile icon (overrides common.css positioning for the hero) ── */
.profile-btn {
    position: absolute; top: 36px; right: 28px; z-index: 30;
    width: 46px; height: 46px;
}
.profile-btn svg { width: 21px; height: 21px; opacity: 0.7; }

/* ── Header / logo ── */
/* Колонка: логотип сверху, подпись строго по центру под ним.
   (база в common.css — flex-row + space-between, поэтому здесь явно
   переопределяем направление, иначе лого и подпись встают в ряд.) */
header {
    width: 100%; max-width: none;
    padding: clamp(24px, 5vh, 40px) 0 clamp(8px, 2vh, 20px);
    text-align: center; z-index: 10;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.logo-img {
    width: clamp(96px, 30vw, 150px);
    height: auto; display: block; margin: 0 auto;
}
.version-tag {
    font-family: var(--font-body); font-size: clamp(9px, 2.2vw, 10px);
    font-weight: 300; letter-spacing: 0.12em;
    color: var(--text-dim); opacity: 0.6;
    margin-top: 10px; display: block; text-transform: lowercase;
    padding: 0 16px;
}

/* ── Lens / Orb ── */
.lens-container {
    position: relative; width: var(--sphere-size);
    aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    margin-top: clamp(-20px, -2.5vh, -5px); perspective: 1000px;
}
.lens-ring {
    position: absolute; width: 100%; height: 100%; border-radius: 50%;
    background: #0a0a18;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.4), inset 0 0 25px rgba(30, 30, 80, 0.35);
    z-index: 1; overflow: hidden;
}
.lens-ring::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.08) 0%, transparent 40%),
                radial-gradient(circle at 50% 50%, rgba(20, 20, 60, 0.2) 0%, transparent 50%),
                radial-gradient(circle at 50% 50%, transparent 60%, rgba(10, 10, 24, 1) 100%);
    border-radius: 50%;
}

/* Circular orbit text */
.orbit-text-track {
    position: absolute; width: 88%; height: 88%; border-radius: 50%;
    top: 6%; left: 6%; animation: spin 30s linear infinite; z-index: 2;
}
.orbit-char {
    position: absolute; height: 50%; left: 50%; transform-origin: bottom center;
    font-family: var(--font-display); font-size: clamp(7px, 1.8vw, 9px);
    color: var(--gold-bright);
    letter-spacing: 2px; text-transform: uppercase; opacity: 0.7;
}

/* Core sphere — gold wires */
.core-sphere {
    position: relative; width: 60%; height: 60%; border-radius: 50%; z-index: 5;
    transform-style: preserve-3d; animation: float 6s ease-in-out infinite;
}
.core-sphere::before {
    content: ''; position: absolute; top: 10%; left: 10%; width: 80%; height: 80%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gold-rgb), 0.35) 0%, rgba(184, 154, 106, 0.2) 40%, rgba(0, 0, 0, 0) 70%);
    box-shadow: 0 0 30px rgba(var(--gold-rgb), 0.3), 0 0 60px rgba(var(--gold-rgb), 0.12);
    opacity: 0.85; mix-blend-mode: screen;
}
.wire { position: absolute; border-radius: 50%; inset: 0; width: 100%; height: 100%; }
.w1 { border: 2px solid rgba(var(--gold-rgb), 0.85); box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.5); transform: rotateY(0deg); animation: spin3d 10s linear infinite; }
.w2 { border: 2px solid rgba(var(--gold-rgb), 0.55); box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.35); transform: rotateY(60deg); animation: spin3d 12s linear infinite reverse; }
.w3 { border: 2px solid rgba(var(--gold-rgb), 0.65); box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.4); transform: rotateY(120deg); animation: spin3d 14s linear infinite; }
.w4 { border: 1.5px solid rgba(184, 154, 106, 0.55); box-shadow: 0 0 6px rgba(var(--gold-rgb), 0.2); transform: rotateX(60deg) scale(0.8); }
.w5 { border: 1.5px solid rgba(var(--gold-rgb), 0.45); box-shadow: 0 0 6px rgba(var(--gold-rgb), 0.25); transform: rotateX(-60deg) scale(0.6); }

/* ── Content deck ── */
.content-deck {
    width: 100%; padding: 0 clamp(16px, 5vw, 30px) 0; text-align: center; z-index: 10;
    display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2.5vh, 20px);
}
.slogan {
    font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
    letter-spacing: 0.15em; font-size: clamp(11px, 2.7vw, 12px); color: var(--gold-dim);
    display: flex; justify-content: space-between; width: 100%; padding: 0 10px;
    opacity: 0.8;
}

/* ── Service links ── */
.services-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; width: 100%; }
.svc-link {
    font-family: var(--font-display); font-weight: 500; font-size: clamp(13px, 3.1vw, 14px);
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-light);
    opacity: 0.8; text-decoration: none; padding: clamp(7px, 1.5vh, 11px) clamp(8px, 2.5vw, 14px);
    transition: var(--transition); cursor: pointer; position: relative; overflow: hidden;
}
.svc-link:hover { opacity: 1; color: var(--gold); }
.svc-link:hover::after {
    content: ''; position: absolute; bottom: 5px; left: 14px; right: 14px;
    height: 1px; background: var(--gold); box-shadow: 0 0 4px var(--gold);
}
.svc-link::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.18), transparent);
    pointer-events: none;
}
.svc-link.shine-active::before { animation: link-shine 0.6s ease forwards; }
@keyframes link-shine { 0% { left: -100%; } 100% { left: 100%; } }
.svc-separator {
    font-size: 10px; opacity: 0.4; display: flex; align-items: center;
    padding: 0 2px; user-select: none; color: var(--gold);
}

/* ── CTA Button ── */
.btn-neural {
    position: relative; background: #0a0a18; color: var(--text-light);
    font-family: var(--font-display); font-size: clamp(11px, 2.7vw, 12px); text-transform: uppercase;
    letter-spacing: 0.12em; padding: clamp(12px, 2vh, 16px) clamp(24px, 6vw, 36px);
    border: 1px solid var(--gold-border-active); border-radius: var(--radius-pill);
    cursor: pointer; overflow: hidden; transition: var(--transition);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    text-decoration: none; display: inline-block;
}
.btn-neural:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4), 0 0 12px rgba(var(--gold-rgb), 0.25);
}

/* ── Footer ── */
.meta-footer {
    width: 100%; padding: clamp(10px, 2vh, 16px) clamp(16px, 5vw, 30px);
    border-top: 1px solid var(--gold-border);
    font-family: var(--font-body); font-size: clamp(8px, 1.8vw, 8px); line-height: 1.4;
    font-weight: 300; letter-spacing: 0.06em;
    color: var(--text-dim); text-align: center; opacity: 0.6;
}

/* ── Animations ── */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spin3d { from { transform: rotateY(0deg) rotateX(0deg); } to { transform: rotateY(360deg) rotateX(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }