/* ============================================================
ОБЪЕДИНЕННЫЕ ГЛОБАЛЬНЫЕ СТИЛИ — САМЫЕ ПОСЛЕДНИЕ ПРАКТИКИ 2026
============================================================ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

:root {
/* Основная палитра — глубокий технологичный зелёный + акценты */
--bg-primary: #f6faf8;
--bg-surface: #ffffff;
--bg-elevated: #eef4f1;
--color-primary: #0a3622; /* тёмно-зелёный, почти чёрный */
--color-primary-light: #1a5e41;
--color-accent: #2ecc71; /* яркий живой зелёный */
--color-accent-glow: rgba(46, 204, 113, 0.15);
--color-accent-secondary: #27ae60;
--color-text-primary: #1a2e2a;
--color-text-secondary: #2c4a3e;
--color-text-soft: #3d5e51;
--color-border: #d0e0d8;
--color-border-light: #e2ede7;

/* Тени и эффекты */
--shadow-sm: 0 8px 20px rgba(10, 54, 34, 0.06);
--shadow-md: 0 20px 35px -8px rgba(10, 54, 34, 0.12);
--shadow-lg: 0 30px 50px -15px rgba(10, 54, 34, 0.2);
--shadow-glow: 0 0 0 1px rgba(46, 204, 113, 0.2), 0 20px 40px -10px rgba(35, 169, 91, 0.3);

/* Анимации */
--transition-standard: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
--transition-smooth: all 0.45s cubic-bezier(0.19, 1, 0.22, 1);

/* Радиусы */
--radius-card: 36px;
--radius-element: 24px;
--radius-button: 60px;
}

body {
font-family: "Inter", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #f8fafd;
color: #0b1c2e;
line-height: 1.7;
padding: 0 20px 60px;
transition: background-color 0.3s ease;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100vh;
display: flex;
flex-direction: column;
}

@supports (font-variation-settings: normal) {
body { font-family: 'Inter Variable', sans-serif; }
}

/* Контейнер с максимальной шириной для удобочитаемости */
.ultimate-container {
max-width: 1360px;
margin: 0 auto;
width: 100%;
}

/* АНИМАЦИИ ПОЯВЛЕНИЯ — ЖИВАЯ СТРАНИЦА */
@keyframes smoothReveal {
0% { opacity: 0; transform: translateY(28px); filter: blur(2px); }
100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes fadeUp {
0% { opacity: 0; transform: translateY(30px); }
100% { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
0% { opacity: 0; transform: scale(0.94); }
100% { opacity: 1; transform: scale(1); }
}

@keyframes softGlow {
0%, 100% { box-shadow: 0 0 0 0 var(--color-accent-glow); }
50% { box-shadow: 0 0 0 12px rgba(46, 204, 113, 0); }
}

.section-animate {
animation: smoothReveal 0.9s cubic-bezier(0.15, 0.85, 0.3, 1.05) forwards;
opacity: 0;
}

.animate-in {
opacity: 0;
animation: fadeUp 0.7s cubic-bezier(0.2, 0.9, 0.1, 1) forwards;
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

.delay-1 { animation-delay: 0.05s; }
.delay-2 { animation-delay: 0.12s; }
.delay-3 { animation-delay: 0.20s; }
.delay-4 { animation-delay: 0.28s; }
.delay-5 { animation-delay: 0.36s; }
.delay-6 { animation-delay: 0.44s; }
.delay-7 { animation-delay: 0.52s; }

/* Заголовки */
h1 {
font-size: clamp(3rem, 12vw, 5.2rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.1;
margin: 30px 0 15px;
background: linear-gradient(145deg, #0f283f 0%, #1e4d6b 80%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 8px 20px rgba(0,70,110,0.12);
}

h2 {
font-size: 2.4rem;
font-weight: 700;
letter-spacing: -0.02em;
margin: 56px 0 28px;
display: flex;
align-items: center;
gap: 16px;
color: #0a2537;
border-bottom: 2px solid rgba(35, 169, 91, 0.25);
padding-bottom: 16px;
}

h2 i {
color: #23a95b;
font-size: 2.2rem;
background: rgba(35, 169, 91, 0.08);
padding: 14px;
border-radius: 24px;
backdrop-filter: blur(8px);
box-shadow: 0 4px 8px rgba(0,0,0,0.02);
}

h3 {
font-size: 1.9rem;
font-weight: 650;
margin: 40px 0 20px;
color: #1e3a5f;
}

h4 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 16px;
}

/* Стили карточек (glassmorphism + парение) */
.glass-panel, .card {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 42px;
padding: 32px 36px;
box-shadow: 0 25px 45px -12px rgba(0, 20, 50, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
border: 1px solid rgba(255,255,255,0.4);
transition: all 0.35s cubic-bezier(0.2, 0, 0, 1);
margin-bottom: 30px;
}

.glass-panel:hover, .card:hover {
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 34px 55px -16px rgba(0, 40, 80, 0.22);
transform: translateY(-6px);
}

/* Таблицы — детальные, без упрощений */
.comparison-matrix, .compare-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 14px;
margin: 30px 0 20px;
}

.comparison-matrix th, .compare-table th {
text-align: left;
padding: 18px 24px;
font-weight: 700;
font-size: 1.2rem;
background: transparent;
color: #153e5a;
border-bottom: 2px dashed #b0c8da;
}

.comparison-matrix td, .compare-table td {
background: #ffffff;
padding: 24px 28px;
border-radius: 28px;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.03);
font-weight: 500;
vertical-align: top;
border: 1px solid rgba(0,0,0,0.02);
transition: background 0.2s;
}

.comparison-matrix tr td:first-child {
font-weight: 700;
background: #edf3f9;
width: 28%;
color: #0b1e2f;
}

/* Бейджи и индикаторы */
.status-badge, .badge {
display: inline-block;
padding: 8px 20px;
border-radius: 60px;
font-size: 0.9rem;
font-weight: 600;
margin-right: 10px;
margin-bottom: 8px;
background: #eef3f9;
color: #1e3a5f;
letter-spacing: -0.01em;
}

.badge-pro {
background: #d9f0e1;
color: #0a6130;
border-left: 4px solid #23a95b;
}

.badge-con {
background: #fee9e7;
color: #b13e3e;
border-left: 4px solid #d14;
}

.badge-neutral, .badge-dark {
background: #e9ecf2;
color: #2a4059;
}

/* Изображения */
img {
max-width: 100%;
height: auto;
border-radius: 36px;
box-shadow: 0 25px 40px -12px rgba(0, 30, 60, 0.25);
display: block;
margin: 40px auto;
border: 1px solid rgba(255,255,255,0.8);
transition: transform 0.4s, box-shadow 0.4s;
}

img:hover {
transform: scale(1.01);
box-shadow: 0 30px 50px -14px #0a1e2e66;
}

/* Устройство агрегатов: flex-сетка */
.tech-grid, .grid-2col {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin: 30px 0 20px;
}

.tech-card {
flex: 1 1 320px;
background: #ffffffdb;
backdrop-filter: blur(10px);
border-radius: 38px;
padding: 32px 28px;
box-shadow: 0 14px 30px rgba(0,0,0,0.04);
border: 1px solid #ffffff;
}

.tech-card h4 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 22px;
display: flex;
gap: 14px;
align-items: center;
}

/* Прогресс бары — живые шкалы */
.rating-row {
display: flex;
align-items: center;
gap: 18px;
margin: 22px 0;
}

.rating-label {
width: 150px;
font-weight: 650;
color: #1c3f5c;
}

.progress-container {
height: 16px;
background: #dde3ec;
border-radius: 60px;
flex: 1;
overflow: hidden;
box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
}

.progress-fill {
height: 16px;
border-radius: 60px;
background: linear-gradient(90deg, #23a95b, #1f9a50);
width: 0%;
box-shadow: 0 0 8px #23a95b80;
transition: width 0.8s ease;
}

.progress-fill.akpp-fill { background: linear-gradient(90deg, #1e4d6b, #3173a0); }

/* Вердикт-блок */
.final-verdict {
background: linear-gradient(145deg, #0a1e2e 0%, #183c54 100%);
color: white;
border-radius: 56px;
padding: 48px 44px;
margin: 60px 0 30px;
box-shadow: 0 38px 50px -16px #04121c;
}

.modern-link, .button-link {
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.25);
color: white;
padding: 16px 32px;
border-radius: 60px;
font-weight: 600;
backdrop-filter: blur(12px);
transition: 0.25s;
display: inline-block;
text-decoration: none;
margin-top: 20px;
font-size: 1.1rem;
}

.modern-link:hover, .button-link:hover {
background: white;
color: #0a1e2e;
border-color: white;
transform: translateY(-3px);
box-shadow: 0 12px 20px -8px rgba(35, 169, 91, 0.4);
}

/* Адаптивность — особенно мобильные */
@media (max-width: 700px) {
body { padding: 0 12px 40px; }
.glass-panel, .card { padding: 24px 18px; }
h2 { font-size: 2rem; }
.comparison-matrix td, .compare-table td { padding: 18px 14px; display: block; width: 100%; }
.comparison-matrix tr, .compare-table tr { display: block; margin-bottom: 24px; }
.comparison-matrix td:first-child { border-radius: 22px 22px 8px 8px; }
.comparison-matrix td:last-child { border-radius: 8px 8px 22px 22px; }
.rating-row { flex-wrap: wrap; }
}

/* Пульсирующая точка (живая) */
.live-dot {
display: inline-block;
width: 14px;
height: 14px;
background: #23a95b;
border-radius: 50%;
margin-right: 10px;
box-shadow: 0 0 0 0 #23a95b;
animation: pulseLive 2.2s infinite;
}

@keyframes pulseLive {
0% { box-shadow: 0 0 0 0 rgba(35,169,91,0.6); }
70% { box-shadow: 0 0 0 12px rgba(35,169,91,0); }
100% { box-shadow: 0 0 0 0 rgba(35,169,91,0); }
}

/* Навигация по сервисам (ссылки из примера) */
.service-links, .link-group {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin: 35px 0 15px;
}

.service-links a, .link-group a {
background: white;
padding: 14px 30px;
border-radius: 60px;
font-weight: 550;
color: #003366;
text-decoration: none;
box-shadow: 0 8px 16px rgba(0,0,0,0.02);
transition: all 0.2s;
border: 1px solid #dfe6f0;
font-size: 1.05rem;
}

.service-links a i { margin-right: 10px; color:#23a95b; }
.service-links a:hover, .link-group a:hover { background: #0f283f; color: white; border-color: #0f283f; }

/* дополнительные украшения */
.inline-highlight {
background: #e3f0da;
padding: 4px 12px;
border-radius: 30px;
font-weight: 600;
}

.text-muted-extra {
color: #4a627a;
font-size: 0.95rem;
margin-top: 8px;
}

/* плавный скролл */
html { scroll-behavior: smooth; }

.text-center { text-align: center; }
.mt-4 { margin-top: 32px; }
.mb-2 { margin-bottom: 16px; }

/* Улучшение читаемости на очень маленьких экранах */
@media (max-width: 480px) {
h2 i { padding: 8px; font-size: 1.6rem; }
.glass-panel { padding: 18px 12px; }
.final-verdict { padding: 30px 20px; }
}
/* добавим плавность всем ссылкам */
a { transition: all 0.2s; }
/* выделение важного */
strong { color: #0a2a44; }
.final-verdict strong { color: white; }