/* ==========================================
   ДИЗАЙН-СИСТЕМА "БИЗНЕС-ИНЖЕНЕРИЯ" (LINIUM)
========================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
    --bg-base: #F8F9FA;         /* Светлый чистый фон */
    --bg-card: rgba(255, 255, 255, 0.75); 
    --bg-muted: rgba(0, 0, 0, 0.03); 
    
    --text-main: #0F172A;       /* Глубокий темный (не чисто черный) */
    --text-dim: #64748B;        /* Инженерный серый */
    
    --accent: #0055FF;          /* Строгий синий */
    --accent-glow: rgba(0, 85, 255, 0.1); 
    --accent-ai: #8B5CF6;       /* Фиолетовый ИИ */
    
    --border: rgba(15, 23, 42, 0.08); /* Тонкие линии 1px */
    --border-highlight: rgba(15, 23, 42, 0.15);
    
    --warning: #F59E0B;         
    --error: #EF4444;           
    
    --font-sans: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
    font-family: var(--font-sans);
    background-color: var(--bg-base);
    color: var(--text-main);
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* ГЕОМЕТРИЧЕСКИЕ ФОРМЫ (Из презентации: 10-25% прозрачности, многослойность) */
.bg-shapes {
    position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;
    overflow: hidden; z-index: -2; pointer-events: none;
}
.bg-shapes::before {
    content: ''; position: absolute;
    top: -10%; left: -5%; width: 50vw; height: 50vw;
    background: radial-gradient(circle, rgba(0, 85, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
}
.bg-shapes::after {
    content: ''; position: absolute;
    bottom: -20%; right: -10%; width: 60vw; height: 60vw;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.05) 0%, transparent 70%);
    border-radius: 50%;
}

/* ИНТЕРАКТИВНЫЙ ХОЛСТ (Сетка) */
#engineering-grid {
    position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -1; pointer-events: auto; /* Позволяет ловить мышку */
}

/* Обновленные карточки (Тонкие линии) */
.case-card { 
    background: var(--bg-card); 
    backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--border); /* Строгая тонкая линия */
    border-radius: 16px; /* Чуть острее углы для строгости */
    padding: 24px; 
    margin-bottom: 20px; 
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.02); 
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* ==========================================
   ШАПКА (HEADER)
========================================== */
header { 
    position: fixed !important; 
    top: 16px; /* Отрыв от верхнего края */
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px); /* Отступы по бокам на мобилках */
    max-width: 800px; /* Ограничиваем ширину на ПК, чтобы была капсула */
    padding: 12px 20px; 
    z-index: 9999 !important; 
    display: flex; justify-content: space-between; align-items: center; 
    background: rgba(255, 255, 255, 0.65); 
    backdrop-filter: blur(32px) saturate(200%); -webkit-backdrop-filter: blur(32px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.8); 
    border-radius: 100px; /* Идеальная форма таблетки */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06), inset 0 -2px 6px rgba(255, 255, 255, 0.4);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.header-right { display: flex; align-items: center; gap: 8px; }
/* Кнопка "Аудит" (Акцентная) */
.header-diag-btn {
    background: var(--accent); color: #fff; border: none; border-radius: 100px;
    padding: 10px 16px; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: 0.3s;
    box-shadow: 0 4px 12px var(--accent-glow); display: flex; align-items: center; gap: 6px;
}
.header-diag-btn:hover { transform: scale(0.98); opacity: 0.9; }

/* Кнопка "Связаться" (Иконка телефона) */
.header-icon-btn {
    background: linear-gradient(135deg, #ffffff 0%, var(--bg-base) 100%);
    border: 1px solid rgba(0, 85, 255, 0.2); /* Легкая синяя обводка */
    border-radius: 50%;
    width: 38px; height: 38px; 
    display: flex; align-items: center; justify-content: center;
    color: var(--accent); /* Синяя иконка по умолчанию */
    cursor: pointer; 
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
    /* Двойная тень для объема и легкое синее свечение */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 0 16px rgba(0, 85, 255, 0.15);
    position: relative;
}

/* Микро-анимация "дыхания" для привлечения внимания */
@keyframes softPulse {
    0% { box-shadow: 0 4px 12px rgba(0,0,0,0.05), 0 0 0 0 rgba(0, 85, 255, 0.2); }
    70% { box-shadow: 0 4px 12px rgba(0,0,0,0.05), 0 0 0 8px rgba(0, 85, 255, 0); }
    100% { box-shadow: 0 4px 12px rgba(0,0,0,0.05), 0 0 0 0 rgba(0, 85, 255, 0); }
}
.header-icon-btn { animation: softPulse 3s infinite; }

/* Эффект при наведении */
.header-icon-btn:hover { 
    background: var(--accent); 
    color: #fff; 
    transform: scale(1.05); 
    border-color: var(--accent);
    box-shadow: 0 8px 20px var(--accent-glow);
    animation: none; /* Останавливаем пульсацию при наведении */
}

/* Эффект сжатия при скролле */
header.scrolled {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    max-width: 700px; /* Капсула слегка сужается */
}

/* Внутренние элементы шапки */
.header-left { display: flex; align-items: center; gap: 12px; }
.logo { font-weight: 800; letter-spacing: 1px; text-transform: uppercase; font-size: 1.15rem; color: var(--text-main); transition: 0.3s; }
.logo span { color: var(--accent); }
header.scrolled .logo { font-size: 1rem; } /* Логотип тоже чуть уменьшается */

.header-divider { width: 1px; height: 16px; background: var(--border); transition: 0.3s; }
header.scrolled .header-divider { height: 12px; }

.status-indicator { display: flex; align-items: center; gap: 8px; }
.pulse-dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 8px var(--accent); animation: pulseStatus 2s infinite; }
.status-text { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; }
header.scrolled .status-text { opacity: 0; width: 0; overflow: hidden; letter-spacing: -5px; } /* Прячем текст статуса при скролле, оставляем только точку */

/* Кнопка "Связаться" внутри шапки */
.header-contact-btn {
    background: #fff; border: 1px solid var(--border); border-radius: 100px; 
    padding: 10px 20px; font-size: 0.8rem; font-weight: 700; color: var(--text-main); 
    display: flex; align-items: center; gap: 8px; cursor: pointer; transition: 0.3s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}
.header-contact-btn:hover { background: var(--bg-muted); transform: scale(0.98); }
header.scrolled .header-contact-btn { padding: 8px 16px; font-size: 0.75rem; }

.logo { font-weight: 800; letter-spacing: 1px; text-transform: uppercase; font-size: 1.15rem; color: var(--text-main); }
.logo span { color: var(--accent); }

#app-root { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
}

.screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    /* ВАЖНО: Отступ 90px сверху, чтобы контент начинался ровно ПОД шапкой */
    padding: 90px 24px 120px 24px; 
    opacity: 0; pointer-events: none; transform: translateY(15px); transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.screen.active { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* Чиним липкие табы (чтобы они останавливались ровно под шапкой, а не уезжали за экран) */
#navigation-tabs {
    top: 70px !important; 
    z-index: 900 !important; 
}

@keyframes pulseStatus {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 12px var(--accent); }
    100% { transform: scale(0.95); opacity: 0.8; }
}
/* ==========================================
   НИЖНЕЕ МЕНЮ (BOTTOM BAR)
========================================== */
#bottom-bar {
    position: fixed; /* Фиксируем поверх всего */
    bottom: 24px; /* Отрыв от нижнего края экрана */
    left: 50%;
    transform: translateX(-50%); /* Идеальное центрирование */
    
    width: calc(100% - 32px); /* На телефоне: отступы по 16px по бокам */
    max-width: 480px; /* На ПК: не растягивается на весь экран */
    height: 72px; /* Делаем чуть изящнее и тоньше */
    
    background: rgba(255, 255, 255, 0.65); 
    backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); 
    
    border: 1px solid rgba(255, 255, 255, 0.8); /* Белый блик по краям стекла */
    border-radius: 36px; /* Форма идеальной пилюли */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08), inset 0 -2px 6px rgba(255, 255, 255, 0.4);
    
    display: flex; 
    justify-content: space-around; 
    align-items: center;
    padding: 0 8px; 
    z-index: 1000;
}

.nav-item { 
    position: relative; /* Для позиционирования светящейся точки */
    height: 100%;
    background: none; border: none; color: var(--text-dim); 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    flex: 1; cursor: pointer; transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
}

.nav-item svg { width: 22px; height: 22px; margin-bottom: 4px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.nav-item span { font-size: 0.65rem; text-transform: uppercase; font-weight: 600; letter-spacing: 0.3px; transition: 0.3s; }

/* АКТИВНОЕ СОСТОЯНИЕ */
.nav-item.active { color: var(--accent); }
/* Иконка слегка подпрыгивает */
.nav-item.active svg { stroke-width: 2.2; transform: translateY(-4px); }
.nav-item.active span { font-weight: 800; transform: translateY(-1px); }

/* Светящийся узел (точка) под активным элементом */
.nav-item::after {
    content: '';
    position: absolute;
    bottom: 10px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0;
    transform: scale(0);
    transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 8px var(--accent);
}
.nav-item.active::after {
    opacity: 1;
    transform: scale(1);
}

/* Спецэффект для вкладки ИИ (Фиолетовое свечение) */
.nav-item.active[data-target="ai"] { color: var(--accent-ai); }
.nav-item.active[data-target="ai"] svg { stroke: var(--accent-ai); filter: drop-shadow(0 4px 8px rgba(175, 82, 222, 0.3)); }
.nav-item.active[data-target="ai"]::after { background: var(--accent-ai); box-shadow: 0 0 8px var(--accent-ai); }

/* ==========================================
   КАРТОЧКИ КОНТЕНТА
========================================== */
.case-card { 
    background: var(--bg-card); 
    /* Apple Vibrancy Effect */
    backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6); /* Белый блик на рамке */
    border-radius: 20px; /* Большое скругление Apple Squircle */
    padding: 24px; 
    margin-bottom: 20px; 
    /* Многослойная мягкая тень */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02); 
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.case-card:active { transform: scale(0.98); } /* Эффект нажатия */

/* Стиль бейджиков (Тегов) */
.case-badge { 
    color: var(--accent); background: var(--accent-glow); 
    font-size: 0.7rem; font-weight: 700; font-family: var(--font-mono);
    text-transform: uppercase; padding: 6px 12px; border-radius: 8px; 
    display: inline-block; margin-bottom: 14px; 
}

.case-title { font-size: 1.3rem; margin-bottom: 10px; font-weight: 800; letter-spacing: -0.03em; color: var(--text-main); }
.case-text { font-size: 0.95rem; color: var(--text-dim); line-height: 1.5; margin-bottom: 16px; }

/* ==========================================
   ПЕРЕКЛЮЧАТЕЛЬ ТАБОВ (ОРИГИНАЛ iOS)
========================================== */
.segmented-control { 
    display: flex; 
    align-items: stretch; /* Чтобы все кнопки и фон были строго одной высоты */
    background: rgba(118, 118, 128, 0.12); /* Классический серый фон Apple */
    border-radius: 9px; 
    padding: 3px; /* Идеально ровный отступ внутри серого квадрата со всех 4-х сторон */
    
}

.segment-btn { 
    flex: 1; 
    display: flex; 
    align-items: center;      /* Строгое центрирование текста по вертикали */
    justify-content: center;  /* Строгое центрирование текста по горизонтали */
    background: transparent; 
    border: none; 
    color: var(--text-main); 
    padding: 6px 0; /* Оптимальная высота */
    font-size: 0.85rem; 
    font-weight: 500; 
    border-radius: 7px; 
    cursor: pointer; 
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); 
    margin: 0;
    line-height: 1;
}

.segment-btn.active { 
    background: #FFFFFF; 
    font-weight: 600;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12), 0 3px 1px rgba(0,0,0,0.04); 
}

/* Анимация экранов */
.sub-screen { display: none; animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; transform: translateY(10px); }
.sub-screen.active { display: block; }
@keyframes slideUp { to { opacity: 1; transform: translateY(0); } }

/* Чекбоксы в стиле Apple */
input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 22px; height: 22px; border-radius: 6px;
    border: 2px solid var(--text-dim);
    transition: 0.2s; position: relative; cursor: pointer;
}
input[type="checkbox"]:checked {
    background-color: var(--warning); border-color: var(--warning);
}
input[type="checkbox"]:checked::after {
    content: ''; position: absolute; left: 6px; top: 2px;
    width: 6px; height: 12px; border: solid white; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.module-stub { padding: 40px 20px; text-align: center; border: 1px dashed var(--border); border-radius: 20px; margin-top: 20px;}
/* ==========================================
   ПРЕМИАЛЬНЫЙ МАСШТАБ ДЛЯ ДЕСКТОПА (125%)
========================================== */
@media (min-width: 1024px) {
    /* Применяем нативный зум ко всему контенту, кроме фона (canvas) */
    header, 
    #app-root, 
    #bottom-bar,
    .modal-overlay {
        zoom: 1.25;
    }
}