/* variables.css - CSS-переменные (цвета, шрифты, отступы) */

:root {
    /* ===== ЦВЕТА ===== */

    /* Основные цвета бренда (синие/стальные акценты) */
    --color-primary: #2C5F8A;
    --color-primary-dark: #1D3E5C;
    --color-primary-light: #4A7FA8;
    --color-primary-bg: rgba(44, 95, 138, 0.08);

    /* Стальные акценты */
    --color-steel: #5A6B7C;
    --color-steel-light: #7A8B9C;
    --color-steel-dark: #3A4B5C;

    /* Фоновые цвета */
    --color-bg-white: #FFFFFF;
    --color-bg-light: #F5F7FA;
    --color-bg-card: #FFFFFF;
    --color-bg-hover: #F9FAFB;
    --color-bg-secondary: #EBEEF2;

    /* Текст */
    --color-text-primary: #1A1A1A;
    --color-text-secondary: #2B2220;
    --color-text-tertiary: #9CA3AF;
    --color-text-light: #FFFFFF;
    --color-text-link: #2C5F8A;
    --color-text-link-hover: #1D3E5C;

    /* Границы и разделители */
    --color-border: #E5E7EB;
    --color-border-light: #F0F2F5;
    --color-border-dark: #C0C4C9;
    --color-border-focus: #2C5F8A;

    /* Акценты (сдержанные) */
    --color-success: #2E7D32;
    --color-success-bg: rgba(46, 125, 50, 0.08);
    --color-danger: #D32F2F;
    --color-danger-bg: rgba(211, 47, 47, 0.08);
    --color-warning: #F57C00;
    --color-warning-bg: rgba(245, 124, 0, 0.08);

    /* Бейджи и метки */
    --color-badge-bg: #EBEEF2;
    --color-badge-text: #2C5F8A;
    --color-badge-hot: #D32F2F;
    --color-badge-new: #2E7D32;

    /* Шапка и подвал */
    --color-header-bg: #FFFFFF;
    --color-header-border: #E5E7EB;
    --color-footer-bg: #F5F7FA;
    --color-footer-text: #6B7280;

    --company-yellow: #FDC500;
    --company-yellow-dark: #FDC500;

    /* Тени */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);
    --shadow-focus: 0 0 0 2px rgba(44, 95, 138, 0.2);

    /* ===== ТИПОГРАФИКА ===== */

    /* Шрифты */
    --font-primary: 'Inter', 'Roboto', 'Arial', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Roboto Mono', 'Courier New', monospace;

    /* Размеры шрифтов */
    --font-h1: 40px;
    --font-h2: 32px;
    --font-h3: 24px;
    --font-h4: 20px;
    --font-body: 16px;
    --font-small: 14px;
    --font-xs: 12px;

    /* Веса шрифтов */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Высота строки */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-loose: 1.6;

    /* ===== ОТСТУПЫ (SPACING) ===== */

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --spacing-4xl: 80px;

    /* ===== РАДИУСЫ ===== */

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-round: 50%;
    --radius-pill: 9999px;

    /* ===== АНИМАЦИИ ===== */

    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* ===== БРЕЙКПОИНТЫ (согласно ТЗ) ===== */

    --breakpoint-desktop-xl: 1920px;
    --breakpoint-desktop: 1440px;
    --breakpoint-desktop-sm: 1280px;
    --breakpoint-tablet: 1024px;
    --breakpoint-tablet-sm: 768px;
    --breakpoint-mobile-lg: 414px;
    --breakpoint-mobile: 375px;

    /* ===== КОНТЕЙНЕРЫ ===== */

    --container-max-width: 1280px;
    --container-padding: 20px;
    --container-padding-mobile: 16px;

    /* ===== Z-ИНДЕКСЫ ===== */

    --z-dropdown: 100;
    --z-sticky: 200;
    --z-header: 300;
    --z-modal: 1000;
    --z-popup: 1100;
    --z-tooltip: 1200;

    --img-2: url('/static/img/assets/bg_m2.webp');
    --img-3: url('/static/img/assets/bg_3.webp');
    --img-page-1: url('/static/img/assets/printer_1.webp');
    --img-page-2: url('/static/img/assets/printer_2.webp');
    --img-page-3: url('/static/img/assets/printer_3.webp');
    --img-page-4: url('/static/img/assets/printer_4.webp');
}

/* Типографика для заголовков (согласно ТЗ) */
h1 {
    font-size: 40px;
    font-weight: var(--font-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}

h2 {
    font-size: 32px;
    font-weight: var(--font-medium);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    letter-spacing: -0.5px;
}

h3 {
    font-size: 24px;
    font-weight: var(--font-medium);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}

h4 {
    font-size: 20px;
    font-weight: var(--font-medium);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}

body {
    font-size: var(--font-body);
    font-weight: var(--font-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    /*
    background-image: url('/static/img/assets/image 220.webp');
    background-repeat: repeat-y;
    background-position: top center;*/
    background: white;
    background-size: 100% auto;
}

@media (max-width: 768px) {
    h1 { font-size: 32px; }
    h2 { font-size: 28px; }
    h3 { font-size: 22px; }
    h4 { font-size: 18px; }
    body { font-size: 14px; }
}

.bg-1 {
  background-color: rgba(248, 250, 252, 0.92);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

.bg-1::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.2);
}

.bg-1 > * {
  position: relative;
  z-index: 2;
}

.bg-2 {
  background-image: var(--img-2);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

.bg-2::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
}

.bg-2 > * {
  position: relative;
  z-index: 2;
}

.bg-3 {
  background-image: var(--img-3);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

.bg-3::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
}

.bg-3 > * {
  position: relative;
  z-index: 2;
}

.hero-block {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2a44 100%);
}

.block-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 50px 24px;
}

.hero-block h1 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
    color: #fff;
}
.hero-block-subtitle {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 32px;
    max-width: 800px;
    color: #ccc;
}

.positioning-grid {
    gap: 30px;
}

.positioning-card-img {
    position: relative;
    height: 400px;
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.positioning-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.1) 100%);
    transition: all 0.3s ease;
}


.positioning-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 24px 24px;
    color: white;
    z-index: 2;
}

.positioning-content h3 {
    font-size: 24px;
    margin-bottom: 12px;
    color: white;
    font-weight: 600;
}

.positioning-content p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    font-size: 14px;
    margin: 0;
}

@media (max-width: 768px) {
    .positioning-card-img {
        height: 320px;
    }

    .positioning-content {
        padding: 20px 20px 16px;
    }

    .positioning-content h3 {
        font-size: 20px;
    }
}

.section-subtitle {
    font-size: var(--font-body);
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: var(--spacing-xl);
}