:root {
    --dpx-scale: 1;
}

* { box-sizing: border-box; }

body {
    margin: 0; background-color: #050505; color: #ffffff;
    font-family: 'Inter', sans-serif; overflow-x: hidden;
    display: flex; flex-direction: column; min-height: 100vh;
    -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}

/* УЛЬТИМАТИВНАЯ ЗАЩИТА СЛОЕВ */
.glass-panel {
    background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(calc(40px * var(--dpx-scale, 1)));
    -webkit-backdrop-filter: blur(calc(40px * var(--dpx-scale, 1))); border: calc(1px * var(--dpx-scale, 1)) solid rgba(255, 255, 255, 0.08);
    display: flex; position: relative; z-index: 1; isolation: isolate;
    transform: translate3d(0, 0, 0); backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ФОНОВЫЕ СФЕРЫ */
.glow-sphere { position: fixed; border-radius: 50%; z-index: -1; }
.sphere-1 { width: calc(1000px * var(--dpx-scale, 1)); height: calc(1000px * var(--dpx-scale, 1)); filter: blur(calc(150px * var(--dpx-scale, 1))); background: radial-gradient(circle, rgba(99,102,241,0.5) 0%, rgba(168,85,247,0) 70%); top: -10%; left: 0%; }
.sphere-2 { width: calc(800px * var(--dpx-scale, 1)); height: calc(800px * var(--dpx-scale, 1)); filter: blur(calc(120px * var(--dpx-scale, 1))); background: radial-gradient(circle, rgba(56,189,248,0.4) 0%, rgba(59,130,246,0) 70%); bottom: -20%; right: -10%; }

/* ТИПОГРАФИКА */
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 700; }
/* ДОБАВЛЕН FONT-SIZE В БАЗОВЫЙ АБЗАЦ ДЛЯ ИДЕАЛЬНОГО МАСШТАБА: */
p { font-size: calc(16px * var(--dpx-scale, 1)); font-weight: 300; color: #a1a1aa; line-height: 1.6; margin: 0; }
.text-gradient { background: linear-gradient(to right, #60a5fa, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* НАВИГАЦИЯ */
.navbar { position: sticky; top: 0; z-index: 100; width: 100%; padding: calc(15px * var(--dpx-scale, 1)) calc(20px * var(--dpx-scale, 1)); justify-content: space-between; align-items: center; border-top: none; border-left: none; border-right: none; }
.logo-link { display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease, opacity 0.3s ease; }
.logo-link svg { width: calc(120px * var(--dpx-scale, 1)); height: calc(24px * var(--dpx-scale, 1)); }
.logo-link:hover { transform: scale(1.05); opacity: 0.9; }
.nav-back { color: #a1a1aa; text-decoration: none; font-size: calc(14px * var(--dpx-scale, 1)); transition: color 0.3s; }
.nav-back:hover { color: #ffffff; }

/* СЕТКА И БЛОКИ */
.main-container { max-width: calc(1000px * var(--dpx-scale, 1)); margin: 0 auto; padding: calc(60px * var(--dpx-scale, 1)) calc(20px * var(--dpx-scale, 1)); display: flex; flex-direction: column; width: 100%; gap: calc(80px * var(--dpx-scale, 1)); flex-grow: 1; }
.section-block { display: flex; flex-direction: column; gap: calc(30px * var(--dpx-scale, 1)); }
.hero-section { gap: calc(20px * var(--dpx-scale, 1)); }

/* ЭЛЕМЕНТЫ HERO */
.badge { padding: calc(10px * var(--dpx-scale, 1)) calc(20px * var(--dpx-scale, 1)); border-radius: calc(20px * var(--dpx-scale, 1)); font-size: calc(14px * var(--dpx-scale, 1)); color: #a1a1aa; width: fit-content; border-color: rgba(168, 85, 247, 0.4); }
.hero-title { font-size: calc(64px * var(--dpx-scale, 1)); }
.hero-desc { font-size: calc(20px * var(--dpx-scale, 1)); color: #e2e8f0; }

/* ЭЛЕМЕНТЫ ШАГОВ (STEPS) */
.step-header { display: flex; align-items: center; }
.step-badge { width: calc(40px * var(--dpx-scale, 1)); height: calc(40px * var(--dpx-scale, 1)); border-radius: 50%; background: #60a5fa; display: flex; align-items: center; justify-content: center; font-size: calc(18px * var(--dpx-scale, 1)); font-weight: 700; color: #050505; box-shadow: 0 0 calc(15px * var(--dpx-scale, 1)) rgba(96, 165, 250, 0.5); margin-right: calc(20px * var(--dpx-scale, 1)); flex-shrink: 0; }
.step-title { font-size: calc(32px * var(--dpx-scale, 1)); }

/* КАРТОЧКИ УСТАНОВКИ */
.cards-container { display: flex; flex-wrap: wrap; gap: calc(30px * var(--dpx-scale, 1)); }
.card { padding: calc(30px * var(--dpx-scale, 1)); border-radius: calc(20px * var(--dpx-scale, 1)); flex: 1; min-width: calc(300px * var(--dpx-scale, 1)); flex-direction: column; gap: calc(15px * var(--dpx-scale, 1)); }
.card h3 { font-size: calc(22px * var(--dpx-scale, 1)); }
.card-blue h3 { color: #60a5fa; }
.card-purple h3 { color: #a855f7; }
.card-note { font-size: calc(14px * var(--dpx-scale, 1)); margin-top: calc(10px * var(--dpx-scale, 1)); font-style: italic; }

/* БЛОКИ КОДА */
.code-block { background: rgba(0,0,0,0.5); padding: calc(20px * var(--dpx-scale, 1)); border-radius: calc(15px * var(--dpx-scale, 1)); border: calc(1px * var(--dpx-scale, 1)) solid rgba(255,255,255,0.05); overflow-x: auto; }
.code-inline { width: fit-content; border-radius: calc(10px * var(--dpx-scale, 1)); }
pre { margin: 0; font-family: monospace; font-size: calc(14px * var(--dpx-scale, 1)); line-height: 1.6; color: #e2e8f0; }
.code-container::-webkit-scrollbar { width: calc(8px * var(--dpx-scale, 1)); height: calc(8px * var(--dpx-scale, 1)); }
.code-container::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: calc(4px * var(--dpx-scale, 1)); }
.code-container::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: calc(4px * var(--dpx-scale, 1)); }

/* ФАЙЛОВЫЕ БЛОКИ (ИМИТАЦИЯ РЕДАКТОРА) */
.file-block { border-radius: calc(20px * var(--dpx-scale, 1)); flex-direction: column; overflow: hidden; }
.file-header { background: rgba(0,0,0,0.6); padding: calc(10px * var(--dpx-scale, 1)) calc(20px * var(--dpx-scale, 1)); border-bottom: calc(1px * var(--dpx-scale, 1)) solid rgba(255,255,255,0.05); font-family: monospace; color: #a1a1aa; font-size: calc(14px * var(--dpx-scale, 1)); }
.file-content { border-radius: 0; border: none; }

/* СПЕЦИАЛЬНЫЕ ВЫДЕЛЕНИЯ */
.highlight-box { background: rgba(34, 197, 94, 0.1); border: calc(1px * var(--dpx-scale, 1)) solid rgba(34, 197, 94, 0.3); border-left: calc(4px * var(--dpx-scale, 1)) solid #22c55e; padding: calc(20px * var(--dpx-scale, 1)); border-radius: calc(10px * var(--dpx-scale, 1)); }
.highlight-title { font-size: calc(20px * var(--dpx-scale, 1)); color: #22c55e; margin-bottom: calc(10px * var(--dpx-scale, 1)); }
.highlight-desc { color: #e2e8f0; font-size: calc(16px * var(--dpx-scale, 1)); margin: 0; }

.deploy-box { padding: calc(30px * var(--dpx-scale, 1)); border-radius: calc(20px * var(--dpx-scale, 1)); border-color: rgba(96, 165, 250, 0.4); }
.deploy-title { margin: 0; font-weight: 500; font-size: calc(18px * var(--dpx-scale, 1)); }
.deploy-list { color: #e2e8f0; line-height: 2; margin-top: calc(15px * var(--dpx-scale, 1)); font-size: calc(16px * var(--dpx-scale, 1)); padding-left: calc(20px * var(--dpx-scale, 1)); }
.deploy-note { margin-top: calc(15px * var(--dpx-scale, 1)); font-size: calc(14px * var(--dpx-scale, 1)); color: #a1a1aa; }

/* ПОДВАЛ */
.spacer { height: calc(60px * var(--dpx-scale, 1)); }
.footer { padding: calc(20px * var(--dpx-scale, 1)); display: flex; flex-direction: column; align-items: center; justify-content: center; border-top: calc(1px * var(--dpx-scale, 1)) solid rgba(255,255,255,0.05); background: rgba(0,0,0,0.6); backdrop-filter: blur(calc(40px * var(--dpx-scale, 1))); -webkit-backdrop-filter: blur(calc(40px * var(--dpx-scale, 1))); }
.footer-text { display: flex; align-items: center; gap: calc(5px * var(--dpx-scale, 1)); text-align: center; }
.footer-copyright { font-size: calc(14px * var(--dpx-scale, 1)); font-weight: 500; color: #e2e8f0; }
.footer-license { font-size: calc(12px * var(--dpx-scale, 1)); color: #a1a1aa; font-weight: 300; }
.footer-license a { color: #ffffff; text-decoration: underline; }