/* ==================== СБРОС И ПЕРЕМЕННЫЕ ==================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

:root {
--primary-dark: #0b1120;
--primary-accent: #1e293b;
--accent-blue: #3b82f6;
--accent-red: #ef4444;
--accent-green: #10b981;
--accent-orange: #f59e0b;
--accent-purple: #8b5cf6;
--bg-body: #f0f4f8;
--card-bg: #ffffff;
--text-main: #1e293b;
--text-secondary: #475569;
--border-light: #e2e8f0;
--shadow-elevation-1: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-elevation-2: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-elevation-3: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--transition-smooth: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
--border-radius-large: 32px;
--border-radius-medium: 24px;
--border-radius-small: 16px;
}

body {
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', sans-serif;
background-color: var(--bg-body);
color: var(--text-main);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: 24px 0 60px;
}

.container {
max-width: 1440px;
margin: 0 auto;
padding: 0 24px;
}

/* ==================== ТИПОГРАФИКА ==================== */
h1 {
font-size: clamp(36px, 8vw, 64px);
font-weight: 900;
letter-spacing: -0.03em;
line-height: 1.1;
text-align: center;
padding: 40px 24px;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: white;
border-radius: var(--border-radius-large);
margin-bottom: 32px;
box-shadow: var(--shadow-elevation-3);
border: 1px solid rgba(255, 255, 255, 0.05);
backdrop-filter: blur(4px);
}

h2 {
font-size: clamp(26px, 5vw, 42px);
font-weight: 800;
margin: 56px 0 32px;
padding-bottom: 16px;
border-bottom: 5px solid;
display: inline-block;
letter-spacing: -0.02em;
line-height: 1.2;
}

h3 {
font-size: clamp(20px, 4vw, 28px);
font-weight: 700;
margin: 32px 0 20px;
letter-spacing: -0.01em;
}

h4 {
font-size: clamp(18px, 3vw, 22px);
font-weight: 600;
margin: 24px 0 16px;
}

p {
margin-bottom: 20px;
font-size: clamp(16px, 2.5vw, 18px);
color: var(--text-secondary);
}

/* ==================== АНИМАЦИИ ==================== */
@keyframes fadeSlideUp {
0% { opacity: 0; transform: translateY(40px); }
100% { opacity: 1; transform: translateY(0); }
}

@keyframes softFloat {
0% { transform: translateY(0); }
50% { transform: translateY(-6px); }
100% { transform: translateY(0); }
}

@keyframes shimmer {
0% { background-position: -1000px 0; }
100% { background-position: 1000px 0; }
}

@keyframes pulseGlow {
0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
70% { box-shadow: 0 0 0 20px rgba(59, 130, 246, 0); }
100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

.animate-on-scroll {
opacity: 0;
animation: fadeSlideUp 0.8s ease forwards;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* ==================== КОМПОНЕНТЫ ==================== */
.card-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
margin: 40px 0;
}

.tech-card {
background: var(--card-bg);
border-radius: var(--border-radius-medium);
padding: 32px 24px;
box-shadow: var(--shadow-elevation-1);
transition: var(--transition-smooth);
border: 1px solid var(--border-light);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}

.tech-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-elevation-3);
border-color: var(--accent-blue);
}

.tech-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 8px;
height: 100%;
background: linear-gradient(to bottom, var(--accent-blue), var(--accent-purple));
}

.card-icon {
font-size: 56px;
margin-bottom: 24px;
display: inline-block;
animation: softFloat 5s ease-in-out infinite;
}

.badge {
display: inline-block;
padding: 6px 16px;
border-radius: 100px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 20px;
align-self: flex-start;
}

.stat-bar {
display: flex;
align-items: center;
gap: 16px;
margin-top: 20px;
margin-bottom: 10px;
}

.stat-label {
font-weight: 700;
min-width: 70px;
font-size: 15px;
}

.bar-bg {
flex-grow: 1;
height: 14px;
background: #e2e8f0;
border-radius: 30px;
overflow: hidden;
}

.bar-fill {
height: 100%;
width: 0%;
border-radius: 30px;
transition: width 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Таблицы */
.table-responsive {
overflow-x: auto;
margin: 36px 0;
border-radius: var(--border-radius-medium);
box-shadow: var(--shadow-elevation-1);
background: var(--card-bg);
-webkit-overflow-scrolling: touch;
border: 1px solid var(--border-light);
}

table {
width: 100%;
border-collapse: collapse;
min-width: 700px;
}

th {
background: var(--primary-accent);
color: white;
padding: 20px 18px;
font-weight: 700;
text-align: left;
font-size: 16px;
white-space: nowrap;
}

td {
padding: 18px;
border-bottom: 1px solid var(--border-light);
vertical-align: top;
font-size: 15px;
}

tr:last-child td {
border-bottom: none;
}

tr:hover td {
background: #f8fafc;
}

/* Блоки доказательств */
.info-block {
background: var(--card-bg);
border-radius: var(--border-radius-medium);
padding: 36px;
margin: 40px 0;
box-shadow: var(--shadow-elevation-1);
border-left: 12px solid;
transition: var(--transition-smooth);
}

.info-block:hover {
box-shadow: var(--shadow-elevation-2);
}

.image-modern {
width: 100%;
height: auto;
border-radius: var(--border-radius-medium);
box-shadow: var(--shadow-elevation-2);
transition: var(--transition-smooth);
border: 1px solid rgba(255,255,255,0.3);
object-fit: cover;
aspect-ratio: 16 / 9;
}

.image-modern:hover {
transform: scale(1.01);
box-shadow: var(--shadow-elevation-3);
}

.float-right {
float: right;
margin: 0 0 30px 40px;
max-width: 45%;
shape-margin: 20px;
}

.float-left {
float: left;
margin: 0 40px 30px 0;
max-width: 45%;
}

/* Сетка ссылок */
.link-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 18px;
margin-top: 30px;
}

.link-card {
background: white;
padding: 18px 24px;
border-radius: 60px;
text-decoration: none;
color: var(--primary-dark);
font-weight: 600;
box-shadow: var(--shadow-elevation-1);
transition: var(--transition-smooth);
border: 1px solid var(--border-light);
display: block;
}

.link-card:hover {
background: var(--primary-accent);
color: white;
transform: translateX(8px);
}

/* ==================== АДАПТИВНОСТЬ ==================== */
@media (max-width: 1200px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}

@media (max-width: 768px) {
body {
padding: 12px 0 30px;
}
.container {
padding: 0 16px;
}
.card-grid {
grid-template-columns: 1fr;
}
.float-right, .float-left {
float: none;
margin: 20px 0;
max-width: 100%;
}
.info-block {
padding: 24px 20px;
}
h1 {
padding: 28px 16px;
border-radius: 24px;
}
}

@media (max-width: 480px) {
th, td {
padding: 12px;
}
}

/* Эффект загрузки */
.shimmer-effect {
background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
background-size: 200% 100%;
animation: shimmer 2s infinite;
}

/* Кнопка */
.btn-primary {
display: inline-block;
padding: 16px 36px;
background: var(--primary-accent);
color: white;
border-radius: 60px;
text-decoration: none;
font-weight: 700;
font-size: 18px;
transition: var(--transition-smooth);
box-shadow: var(--shadow-elevation-1);
border: none;
cursor: pointer;
margin-top: 16px;
}

.btn-primary:hover {
background: var(--accent-blue);
transform: scale(1.02);
box-shadow: 0 12px 25px -5px rgba(59, 130, 246, 0.4);
}






.master-container {
max-width: 1440px;
margin: 0 auto;
background: #ffffff;
border-radius: 48px;
box-shadow: 0 30px 60px -15px rgba(0,20,50,0.2);
overflow: hidden;
padding: 40px 50px 60px;
border: 1px solid rgba(255,255,255,0.5);
}

@media (max-width: 1024px) {
body { padding: 12px; }
.master-container { padding: 30px 25px 40px; border-radius: 32px; }
}
@media (max-width: 600px) {
body { padding: 8px; }
.master-container { padding: 20px 16px 30px; border-radius: 24px; }
}

/* ==================== ТИПОГРАФИКА ==================== */
h1, h2, h3, h4, h5 {
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.2;
}

h1 {
font-size: clamp(3rem, 10vw, 5.5rem);
background: linear-gradient(145deg, #0f2b3d, #2563eb, #7c3aed);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 10px;
text-shadow: 0 5px 20px rgba(37,99,235,0.15);
}

h2 {
font-size: clamp(2.2rem, 6vw, 3.2rem);
margin: 50px 0 25px;
padding-bottom: 15px;
border-bottom: 4px solid;
border-image: linear-gradient(90deg, #3b82f6, #a855f7) 1;
border-bottom-style: solid;
border-bottom-color: #e2e8f0;
position: relative;
}
h2 i {
color: #3b82f6;
margin-right: 18px;
font-size: 2.2rem;
vertical-align: middle;
}

h3 {
font-size: clamp(1.6rem, 4vw, 2.2rem);
margin: 35px 0 20px;
color: #1e293b;
}

h4 {
font-size: 1.4rem;
margin: 25px 0 15px;
color: #334155;
}

/* ==================== КОМПОНЕНТЫ ==================== */
.badge {
display: inline-block;
background: #e0e7ff;
color: #3730a3;
padding: 6px 14px;
border-radius: 60px;
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.3px;
margin-right: 8px;
border: 1px solid #c7d2fe;
}

.badge-danger { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.badge-success { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.badge-warning { background: #fef3c7; color: #92400e; border-color: #fde68a; }

.glass-card {
background: rgba(255,255,255,0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 32px;
padding: 28px 32px;
border: 1px solid rgba(255,255,255,0.5);
box-shadow: 0 15px 35px -10px rgba(0,0,0,0.05);
transition: all 0.3s ease;
}
.glass-card:hover {
background: rgba(255,255,255,0.85);
box-shadow: 0 20px 40px -12px rgba(37,99,235,0.15);
}



.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin: 40px 0;
}

.stat-number {
font-size: 3.5rem;
font-weight: 800;
color: #2563eb;
line-height: 1;
margin-bottom: 10px;
}

.img-fluid {
max-width: 100%;
height: auto;
border-radius: 24px;
box-shadow: 0 20px 30px -10px rgba(0,0,0,0.1);
border: 1px solid #f1f5f9;
}

.img-float-left {
float: left;
margin: 10px 30px 20px 0;
max-width: 45%;
shape-margin: 20px;
}
.img-float-right {
float: right;
margin: 10px 0 20px 30px;
max-width: 45%;
shape-margin: 20px;
}

@media (max-width: 768px) {
.img-float-left, .img-float-right {
float: none;
max-width: 100%;
margin: 20px 0;
display: block;
}
}

/* Навигация */
.toc {
background: #f8fafc;
border-radius: 32px;
padding: 30px 35px;
margin: 40px 0;
border: 1px solid #e2e8f0;
}
.toc ul {
columns: 2;
list-style: none;
padding: 0;
}
.toc li {
margin-bottom: 12px;
break-inside: avoid;
}
.toc a {
text-decoration: none;
color: #334155;
font-weight: 500;
display: flex;
align-items: center;
gap: 12px;
transition: color 0.2s;
}
.toc a:hover { color: #2563eb; }
.toc a i { color: #3b82f6; width: 20px; }

@media (max-width: 640px) {
.toc ul { columns: 1; }
}

/* Кнопка наверх */
.go-top {
position: fixed;
bottom: 30px;
right: 30px;
background: #1e293b;
color: white;
width: 55px;
height: 55px;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
transition: 0.2s;
z-index: 99;
border: 1px solid #475569;
}
.go-top:hover { background: #2563eb; transform: scale(1.1); }