:root {
    /* Цвета фона */
    --color-bg:         #f7f8fc;           /* Основной фон страницы */
    --color-white:      #fff;              /* Белый (карточки, секции) */
    --color-surface:    #ebeef6;           /* Границы, разделители */
    --color-surface-2:  #dfe2ee;           /* Вторичные границы (инпуты) */

    /* Цвета текста */
    --color-ink:        #0b0e1e;           /* Основной текст */
    --color-ink-2:      #353856;           /* Вторичный текст */
    --color-ink-3:      #6e7196;           /* Приглушённый текст */

    /* Акцентные цвета */
    --color-blue:       #1d4ed8;           /* Основной синий */
    --color-blue-glow:  rgba(29,78,216,.1); /* Синее свечение (фоны) */
    --color-teal:       #0d9488;           /* Бирюзовый акцент */

    /* Градиенты */
    --gradient-primary: linear-gradient(135deg, #1d4ed8, #0d9488);
    --gradient-dark: linear-gradient(135deg, #161b2e, #263347);
    /* Тени */
    --shadow-sm:   0 1px 3px rgba(11,14,30,0.04);
    --shadow-md:   0 4px 24px rgba(11,14,30,.06);
    --shadow-lg:   0 16px 48px rgba(11,14,30,.08);
    --shadow-glow: 0 8px 32px rgba(29,78,216,0.14);

    /* Скругление */
    --radius:    14px;
    --radius-sm: 10px;

    /* Шрифты */
    --font-display: 'Outfit', sans-serif;    /* Заголовки, кнопки */
    --font-body:    'DM Sans', sans-serif;   /* Основной текст */
    --font-mono:    'Space Mono', monospace; /* Техническое, бейджи */
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-ink);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}
/* ============================================================
   МОДАЛЬНЫЙ ОВЕРЛЕЙ (затемнённый фон)

   Фиксированный на весь экран. Полупрозрачный тёмный фон
   с размытием (backdrop-filter). Скрыт по умолчанию.
   По центру — белая карточка (modal-box).
   ============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 14, 30, 0.45);    /* Тёмный полупрозрачный */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;

    /* Скрытое состояние */
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s ease;
}

/* Видимое состояние (добавляется JS) */
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}


/* ============================================================
   МОДАЛЬНАЯ КАРТОЧКА (белый блок с формой)
   ============================================================ */
.modal-box {
    background: var(--color-white);
    border-radius: 18px;
    padding: 2rem;
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;              /* Скролл если не помещается */
    box-shadow: 0 24px 64px rgba(11, 14, 30, 0.12);
    position: relative;

    /* Анимация: выезжает снизу при открытии */
    transform: translateY(16px);
    transition: transform 0.35s ease;
}

/* При активном оверлее — карточка на месте */
.modal-overlay.active .modal-box {
    transform: none;
}


/* ============================================================
   КНОПКА ЗАКРЫТИЯ (X)
   Круглая, в правом верхнем углу
   ============================================================ */
.modal-close {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--color-surface);
    background: var(--color-bg);
    color: var(--color-ink-2);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.modal-close:hover {
    background: var(--color-surface);
}


/* ============================================================
   ЗАГОЛОВОК И ОПИСАНИЕ МОДАЛКИ
   ============================================================ */
.modal-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 0.3rem;
}

.modal-desc {
    font-size: 0.85rem;
    color: var(--color-ink-3);
    margin-bottom: 1.2rem;
}


/* ============================================================
   ПОЛЯ ФОРМЫ (общие стили)
   ============================================================ */

/* Строка из 2 полей рядом */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* Обёртка одного поля */
.form-group {
    margin-bottom: 0.75rem;
}

/* Метка поля */
.form-group label {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.7rem;
    color: var(--color-ink-2);
    margin-bottom: 0.3rem;
}

/* Текстовые поля, email, tel */
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.65rem 0.9rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    background: var(--color-bg);
    border: 1.5px solid var(--color-surface-2);
    border-radius: 8px;
    color: var(--color-ink);
    outline: none;
    transition: all 0.25s ease;
}

/* Фокус: синяя рамка + свечение */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px var(--color-blue-glow);
}

/* Textarea */
.form-group textarea {
    resize: vertical;
    min-height: 70px;
}

/* Select (выпадающий список) */
.form-group select {
    appearance: auto;
    cursor: pointer;
}


/* ============================================================
   КНОПКА ОТПРАВКИ
   ============================================================ */
.btn-primary {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.85rem 2rem;
    background: var(--color-ink);
    color: #fff;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.35s ease;
}

.btn-primary:hover {
    background: var(--color-blue);
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}

.btn-primary svg {
    width: 15px; height: 15px;
    stroke: currentColor; fill: none; stroke-width: 2;
}


/* ============================================================
   СООБЩЕНИЕ ОБ УСПЕШНОЙ ОТПРАВКЕ
   ============================================================ */
.form-success {
    text-align: center;
    padding: 1.5rem 0;
}

.form-success svg {
    width: 44px; height: 44px;
    stroke: var(--color-teal);
    fill: none; stroke-width: 1.5;
    margin-bottom: 0.8rem;
}

.form-success h4 {
    font-family: var(--font-display);
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.form-success p {
    color: var(--color-ink-3);
    font-size: 0.88rem;
}


/* ============================================================
   АДАПТИВНОСТЬ
   ============================================================ */
@media (max-width: 768px) {
    .modal-overlay {
        padding: 1rem;
    }

    .modal-box {
        padding: 1.5rem;
        border-radius: 14px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}
.logos-bar {
    background: var(--color-white);
    border-top: 1px solid var(--color-surface);
    border-bottom: 1px solid var(--color-surface);
    padding: 2.5rem 6vw;
    text-align: center;
}


/* ============================================================
   ПОДПИСЬ "TRUSTED BY INDUSTRY LEADERS WORLDWIDE"

   Мелкий uppercase текст, серый.
   Создаёт контекст для ряда индустрий ниже.
   ============================================================ */
.logos-label {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.72rem;
    color: var(--color-ink-3);             /* #6e7196 — серый */
    text-transform: uppercase;
    letter-spacing: 0.12em;               /* Разрежённые буквы */
    margin-bottom: 1.5rem;
}


/* ============================================================
   РЯД НАЗВАНИЙ ИНДУСТРИЙ

   Flexbox по центру с переносом.
   Opacity: 0.4 — полупрозрачный, ненавязчивый.

   Каждое название — жирный Outfit, крупный.
   Имитирует «логотипы партнёров» без реальных изображений.
   ============================================================ */
.logos-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3.5rem;                           /* Расстояние между названиями */
    flex-wrap: wrap;                       /* Перенос на узких экранах */
    opacity: 0.4;                          /* Приглушённый вид */
}

/* Отдельное название индустрии */
.logos-row span {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    color: var(--color-ink);               /* #0b0e1e — тёмный */
}


/* ============================================================
   АДАПТИВНОСТЬ
   ============================================================ */

/* Планшет: уменьшенный gap */
@media (max-width: 1024px) {
    .logos-row {
        gap: 2.5rem;
    }

    .logos-row span {
        font-size: 1rem;
    }
}

/* Мобильный: вертикальное расположение */
@media (max-width: 768px) {
    .logos-bar {
        padding: 2rem 1.5rem;
    }

    .logos-row {
        gap: 1.5rem 2.5rem;
    }

    .logos-row span {
        font-size: 0.88rem;
    }
}

/* Маленький мобильный: 2 в ряд */
@media (max-width: 480px) {
    .logos-row {
        gap: 1rem 2rem;
    }

    .logos-row span {
        font-size: 0.78rem;
    }
}

/* ============================================================
   HERO-СЕКЦИЯ — полноэкранный первый экран
   Белый фон, min-height 85vh, flex-center
   ============================================================ */
.hero {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--color-white);
}

/* Фоновые градиенты (декоративные) */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
            radial-gradient(ellipse 60% 50% at 70% 35%, rgba(29,78,216,0.06), transparent),
            radial-gradient(ellipse 50% 40% at 25% 75%, rgba(13,148,136,0.04), transparent);
}


/* ============================================================
   ДЕКОРАТИВНЫЕ ОРБЫ (плавающие размытые круги)
   ============================================================ */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    animation: orb-float 14s ease-in-out infinite;
}

.hero-orb-1 {
    width: 500px; height: 500px;
    background: rgba(29,78,216,0.08);
    top: -8%; right: -3%;
}

.hero-orb-2 {
    width: 380px; height: 380px;
    background: rgba(13,148,136,0.06);
    bottom: -5%; left: 12%;
    animation-delay: 4s;
}

@keyframes orb-float {
    0%, 100% { transform: translate(0) scale(1); }
    50%      { transform: translate(20px, -15px) scale(1.04); }
}


/* ============================================================
   СЕТКА HERO — 2 колонки: текст | визуал
   ============================================================ */
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    padding: 0 6vw;
}

/* Левая колонка — текст */
.hero-left {
    position: relative;
    z-index: 2;
    animation: fade-up 0.9s ease 0.3s both;
}

/* Правая колонка — визуал */
.hero-right {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fade-up 0.9s ease 0.6s both;
}

/* Анимация появления снизу */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   БЕЙДЖ "NDT Equipment Manufacturer"
   Маленькая таблетка с пульсирующей точкой
   ============================================================ */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem 0.4rem 0.5rem;
    background: var(--color-blue-glow);
    border: 1px solid rgba(29,78,216,0.1);
    border-radius: 100px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.7rem;
    color: var(--color-blue);
    margin-bottom: 2rem;
}

/* Пульсирующая точка */
.hero-badge i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--color-blue);
    animation: badge-pulse 2s ease infinite;
}

@keyframes badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(29,78,216,0.4); }
    50%      { box-shadow: 0 0 0 6px rgba(29,78,216,0); }
}


/* ============================================================
   ЗАГОЛОВОК H1
   ============================================================ */
.hero-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.8rem, 5.5vw, 4.6rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
    max-width: 800px;
}

/* Градиентный текст "Future of NDT" */
.hero-title .gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ============================================================
   ОПИСАНИЕ
   ============================================================ */
.hero-subtitle {
    font-weight: 400;
    font-size: 1.05rem;
    color: var(--color-ink-3);
    line-height: 1.8;
    max-width: 560px;
    margin-bottom: 2.5rem;
}


/* ============================================================
   КНОПКИ
   ============================================================ */
.hero-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-primary {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.85rem 2rem;
    background: var(--color-ink);
    color: #fff;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.35s;
}

.btn-primary:hover {
    background: var(--color-blue);
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}

.btn-primary svg {
    width: 15px; height: 15px;
    stroke: currentColor; fill: none; stroke-width: 2;
}

.btn-outline {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.85rem 2rem;
    background: transparent;
    color: var(--color-ink-2);
    border: 1.5px solid var(--color-surface-2);
    border-radius: 100px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s;
    text-decoration: none;
}

.btn-outline:hover {
    border-color: var(--color-blue);
    color: var(--color-blue);
}


/* ============================================================
   ВИЗУАЛ СПРАВА — вращающиеся кольца + карточка с радаром
   ============================================================ */
.hero-visual-wrap {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1;
}

/* Орбитальные кольца */
.hero-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(29,78,216,0.1);
    animation: ring-rotate 25s linear infinite;
}

.hero-ring-1 { inset: 0; }
.hero-ring-2 {
    inset: 12%;
    border-style: dashed;
    border-color: rgba(13,148,136,0.12);
    animation-direction: reverse;
    animation-duration: 18s;
}
.hero-ring-3 {
    inset: 24%;
    border-color: rgba(29,78,216,0.08);
    animation-duration: 22s;
}

@keyframes ring-rotate {
    to { transform: rotate(360deg); }
}

/* Светящаяся точка на внешнем кольце */
.hero-ring-1::before {
    content: '';
    position: absolute;
    top: -5px; left: 50%;
    width: 10px; height: 10px;
    background: var(--color-blue);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(29,78,216,0.5);
}

/* Светящаяся точка на среднем кольце */
.hero-ring-2::after {
    content: '';
    position: absolute;
    bottom: 15%; right: -5px;
    width: 8px; height: 8px;
    background: var(--color-teal);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(13,148,136,0.5);
}


/* ============================================================
   ЦЕНТРАЛЬНАЯ КАРТОЧКА (с радар-визуалом внутри)
   ============================================================ */
.hero-device {
    position: absolute;
    inset: 26%;
    background: var(--color-white);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(11,14,30,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,0,0,0.04);
    overflow: hidden;
}

.hero-device::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(29,78,216,0.12), transparent 60%);
}

.hero-robot {
    width: 75%;
    aspect-ratio: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Анимация вращения радарного луча */
@keyframes radar-sweep {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* ============================================================
   ПАРЯЩИЕ КАРТОЧКИ (18,000+, Aerospace, 5 CE)
   ============================================================ */
.hero-float-card {
    position: absolute;
    background: var(--color-white);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(11,14,30,0.07);
    border: 1px solid rgba(0,0,0,0.04);
    padding: 0.7rem 1rem 0.7rem 1.1rem;
    z-index: 5;
    border-left: 3px solid var(--color-blue);
    backdrop-filter: blur(8px);
}

/* Цвет левой полоски для каждой карточки */
.hero-float-card:nth-child(5) { border-left-color: var(--color-blue); }
.hero-float-card:nth-child(6) { border-left-color: var(--color-teal); }
.hero-float-card:nth-child(7) { border-left-color: #6c3bff; }

/* Позиции карточек */
.hero-float-1 { top: 8%; right: 5%; animation: float-bounce 5s ease-in-out infinite; }
.hero-float-2 { bottom: 22%; left: 0%; animation: float-bounce 5s ease-in-out 1.5s infinite; }
.hero-float-3 { top: 38%; left: -4%; animation: float-bounce 5s ease-in-out 3s infinite; }

@keyframes float-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* Текст в карточках */
.hero-float-value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--color-ink);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.hero-float-label {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.6rem;
    color: var(--color-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.1rem;
}

.hero-float-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.55rem;
    color: var(--color-teal);
    margin-top: 0.2rem;
}

.hero-float-status::before {
    content: '';
    width: 5px; height: 5px;
    background: var(--color-teal);
    border-radius: 50%;
}


/* ============================================================
   АДАПТИВНОСТЬ
   ============================================================ */
@media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-right { display: none; }
}

@media (max-width: 768px) {
    .hero { min-height: 70vh; }
    .hero-grid { padding: 0 1.5rem; }
    .hero-title { font-size: clamp(2rem, 8vw, 3rem); }
    .hero-buttons { flex-direction: column; }
}

/* ============================================================
   СЕКЦИЯ CONTACT — КОНТЕЙНЕР
   ============================================================ */
.contact-section {
    padding: 2rem 0vw;
    max-width: 1440px;
    margin: 0 auto;
    /*background: var(--color-white);*/
}


.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

/* Карта */
.contact-map {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--color-surface);
    box-shadow: var(--shadow-lg);
    line-height: 0;
}

.contact-map iframe {
    width: 100%;
    height: 420px;
    border: none;
    display: block;
}


/* ============================================================
   ПЕРЕИСПОЛЬЗУЕМЫЕ КОМПОНЕНТЫ ТЕКСТА
   ============================================================ */
.section-tag {
    display: inline-flex;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-blue);
    background: var(--color-blue-glow);
    border-radius: 100px;
    padding: 0.3rem 0.8rem;
    margin-bottom: 1rem;
}

.section-heading {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.8rem, 3.2vw, 2.8rem);
    letter-spacing: -0.025em;
    line-height: 1.12;
    margin-bottom: 0.8rem;
}
div.certs-inner .section-desc{margin:0 auto;}
.section-desc {
    font-weight: 400;
    color: var(--color-ink-3);
    font-size: 0.98rem;
    line-height: 1.75;
    max-width: 560px;
    margin-bottom: 2rem;
}


/* ============================================================
   КОНТАКТНАЯ ИНФОРМАЦИЯ (левая колонка)
   3 строки: адрес, телефон, email
   ============================================================ */

/* Строка контактной информации */
.contact-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

/* Иконка контакта (квадрат 40×40) */
.contact-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;               /* Не сжимается во flex */
    background: var(--color-blue-glow);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-blue);
}

.contact-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
}

/* Маленькая метка (HEADQUARTERS, PHONE, EMAIL) */
.contact-label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink-3);
}

/* Основное значение (адрес, номер, email) */
.contact-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
}

.contact-value a {
    color: var(--color-ink);
    text-decoration: none;
}

.contact-value a:hover {
    color: var(--color-blue);
}

/* Дополнительная строка (P.O. Box, WhatsApp, рабочие часы) */
.contact-sub {
    font-size: 0.78rem;
    color: var(--color-ink-3);
}



/* ============================================================
   АНИМАЦИЯ ПОЯВЛЕНИЯ
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}


/* ============================================================
   АДАПТИВНОСТЬ
   ============================================================ */
@media (max-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-map iframe {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .contact-section {
        padding: 1rem 1rem;
    }
}

/* ============================================================
   СЕКЦИЯ GLOBAL PRESENCE — ТЁМНЫЙ ФОН

   Полноширинная секция с тёмно-синим фоном (#0b0e1e).
   Внутри: точечная карта мира (SVG), пульсирующие маркеры
   городов, центрированный текст и карточки статистики.
   ============================================================ */
.global-section {
    position: relative;
    padding: 0;
    max-width: 100%;
    overflow: hidden;
    background: #0b0e1e;          /* Тёмно-синий/чёрный */
}


/* ============================================================
   ВНУТРЕННИЙ КОНТЕЙНЕР
   Flexbox по центру, минимальная высота 580px
   ============================================================ */
.global-inner {
    position: relative;
    min-height: 580px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 6vw;
}

/* Декоративные свечения (синее и бирюзовое) */
.global-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
            radial-gradient(ellipse 60% 50% at 50% 50%, rgba(29,78,216,0.12), transparent),
            radial-gradient(ellipse 40% 40% at 80% 70%, rgba(13,148,136,0.08), transparent);
}


/* ============================================================
   ФОНОВАЯ КАРТА МИРА (SVG dot-matrix)

   Абсолютно позиционирована на весь контейнер.
   Opacity: 0.4 — приглушена чтобы не мешать тексту.
   ============================================================ */
.global-map-bg {
    position: absolute;
    inset: 0;
    opacity: 0.4;
}

/* SVG карта занимает всё пространство */
.world-map-svg {
    width: 100%;
    height: 100%;
}


/* ============================================================
   МАРКЕР ГОРОДА (пульсирующая точка)

   Круг 9×9px с цветным свечением.
   Абсолютно позиционирован по координатам (top/left в %).
   ::after — расширяющееся кольцо-пульсация.
   ============================================================ */
.map-dot {
    position: absolute;
    width: 9px;
    height: 9px;
    background: #5b9aff;                    /* Синяя точка */
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(91,154,255,0.6);  /* Свечение */
    z-index: 3;
    transform: translate(-50%, -50%);       /* Центрирование по координатам */
}

/* Пульсирующее кольцо вокруг точки */
.map-dot::after {
    content: '';
    position: absolute;
    inset: -7px;
    border: 1.5px solid rgba(91,154,255,0.25);
    border-radius: 50%;
    animation: map-pulse 2.8s ease-out infinite;
}

/* Анимация пульсации */
@keyframes map-pulse {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(3);   opacity: 0; }
}

/* Бирюзовый вариант маркера */
.map-dot.teal {
    background: #34d9a8;
    box-shadow: 0 0 10px rgba(52,217,168,0.6);
}

.map-dot.teal::after {
    border-color: rgba(52,217,168,0.25);
}


/* ============================================================
   ПОДПИСЬ ГОРОДА

   Полупрозрачный стеклянный бейдж над точкой.
   ============================================================ */
.map-label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);              /* Над точкой */
    transform: translateX(-50%);           /* Центрирование */
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.52rem;
    color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(4px);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.05);
    white-space: nowrap;
    pointer-events: none;
    z-index: 3;
}


/* ============================================================
   ЗАГОЛОВОЧНЫЙ БЛОК

   Стеклянная подложка с blur, чтобы текст не сливался с картой.
   ============================================================ */
.global-header {
    position: relative;
    z-index: 4;
    text-align: center;
    margin-bottom: 2.5rem;
    background: rgba(11,14,30,0.7);        /* Тёмный полупрозрачный */
    backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 2rem 3rem;
    max-width: 640px;
}

/* Бейдж — зелёный на тёмном фоне */
.global-header .section-tag {
    color: #34d9a8;                         /* Яркий бирюзово-зелёный */
    background: rgba(52,217,168,0.15);
    margin-bottom: 0.75rem;
}

/* Заголовок — белый */
.global-header .section-heading {
    color: #fff;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    margin-bottom: 0.5rem;
}

/* Описание — полупрозрачный белый */
.global-header .section-desc {
    color: rgba(255,255,255,0.55);
    margin: 0 auto;
    max-width: 480px;
    font-size: 0.88rem;
}


/* ============================================================
   КАРТОЧКИ СТАТИСТИКИ (стеклянные, на тёмном фоне)
   ============================================================ */
.global-stats {
    position: relative;
    z-index: 4;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Стеклянная карточка */
.global-stat-card {
    background: rgba(255,255,255,0.06);    /* Полупрозрачный белый */
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 1.25rem 1.75rem;
    text-align: center;
    min-width: 160px;
    transition: all 0.3s ease;
}

/* Hover: ярче + подъём */
.global-stat-card:hover {
    background: rgba(255,255,255,0.1);
    transform: translateY(-3px);
}

/* Крупная белая цифра */
.global-stat-value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    color: #fff;
}

/* Мелкая подпись */
.global-stat-label {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.68rem;
    color: rgba(255,255,255,0.4);
    margin-top: 0.2rem;
}


/* ============================================================
   АДАПТИВНОСТЬ
   ============================================================ */
@media (max-width: 768px) {
    .global-inner {
        min-height: 400px;
        padding: 3rem 1.5rem;
    }

    .global-header {
        padding: 1.5rem 1.5rem;
        max-width: 100%;
    }

    .global-stats {
        gap: 0.5rem;
    }

    .global-stat-card {
        min-width: 130px;
        padding: 1rem 1.2rem;
    }
}

/* ============================================================
   СЕКЦИЯ CTA — ВНЕШНИЙ КОНТЕЙНЕР

   Обёртка с отступами. Внутри — тёмная карточка.
   ============================================================ */
.cta-section {
    padding: 2.5rem 6vw 3rem;
    max-width: 100%;
    text-align: center;
}


/* ============================================================
   ТЁМНАЯ КАРТОЧКА CTA

   Градиентный фон (тёмно-синий → сланцевый).
   Крупные скругления (24px). Паддинг 5rem.
   Декоративные свечения через ::before.
   ============================================================ */
.cta-card {
    max-width: 100%;               /* Полная ширина */
    margin: 0 auto;
    background: var(--gradient-dark);  /* #0b0e1e → #1e293b */
    border-radius: 24px;
    padding: 5rem 3rem;
    position: relative;
    overflow: hidden;              /* Обрезка свечений */
}

/* Декоративные радиальные свечения (синее + бирюзовое) */
.cta-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
            radial-gradient(
                    ellipse 50% 70% at 20% 20%,
                    rgba(29, 78, 216, 0.18),   /* Синее свечение — верхний левый */
                    transparent
            ),
            radial-gradient(
                    ellipse 40% 50% at 80% 80%,
                    rgba(13, 148, 136, 0.12),  /* Бирюзовое — нижний правый */
                    transparent
            );
}


/* ============================================================
   ТЕКСТ ВНУТРИ ТЁМНОЙ КАРТОЧКИ
   ============================================================ */

/* Бейдж "GET STARTED" — бирюзовый на тёмном */
.cta-card .section-tag {
    color: var(--color-teal);              /* #0d9488 */
    background: rgba(13, 148, 136, 0.15); /* Полупрозрачный бирюзовый */
}

/* Заголовок — белый */
.cta-card .section-heading {
    color: #fff;
}

/* Описание — полупрозрачный белый */
.cta-card .section-desc {
    color: rgba(255, 255, 255, 0.55);
    margin: 0 auto;
}


/* ============================================================
   СТРОКА КНОПОК
   ============================================================ */
.cta-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;                    /* Над ::before свечениями */
    margin-top: 2rem;
}


/* ============================================================
   КНОПКА "REQUEST A QUOTE" — белая на тёмном фоне

   Pill-shape (border-radius: 100px).
   Белый фон, тёмный текст.
   Hover: подъём + глубокая тень.
   ============================================================ */
.btn-white {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.85rem 2.2rem;
    background: #fff;
    color: var(--color-ink);       /* #0b0e1e */
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.btn-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}


/* ============================================================
   КНОПКА "VIEW PRODUCTS" — контурная на тёмном фоне

   Прозрачный фон, полупрозрачная белая рамка и текст.
   ============================================================ */
.btn-outline-light {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.85rem 2.2rem;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.btn-outline-light:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}


/* ============================================================
   АДАПТИВНОСТЬ
   ============================================================ */
@media (max-width: 768px) {
    .cta-section {
        padding: 2rem 1.5rem;
    }

    .cta-card {
        padding: 3rem 1.5rem;
        border-radius: 16px;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}

/* ============================================================
   СЕКЦИЯ CERTIFICATIONS & STANDARDS — ВНЕШНИЙ КОНТЕЙНЕР

   Полноширинная полоса с белым фоном, тонкими границами
   сверху и снизу. Весь контент центрирован.
   ============================================================ */
.certs-section {
    background: var(--color-white);
    border-top: 1px solid var(--color-surface);
    border-bottom: 1px solid var(--color-surface);
    padding: 5rem 6vw;
    max-width: 100%;
    text-align: center;            /* Центрируем весь контент */
}


/* ============================================================
   ВНУТРЕННИЙ КОНТЕЙНЕР
   ============================================================ */
.certs-inner {
    max-width: 1440px;
    margin: 0 auto;
}


/* ============================================================
   СЕТКА СЕРТИФИКАТОВ

   Flexbox-ряд карточек по центру. Wrap на узких экранах.
   ============================================================ */
.certs-grid {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: 2.5rem;
}


/* ============================================================
   КАРТОЧКА СЕРТИФИКАТА

   Структура:
   ┌────────────┐
   │    ┌──┐    │
   │    │✓ │    │  ← cert-icon (иконка-галочка)
   │    └──┘    │
   │            │
   │  KALMAR    │  ← cert-name (название продукта)
   │ CE Certif. │  ← cert-sub (тип сертификата)
   └────────────┘

   ============================================================ */
.cert-card {
    width: 160px;
    padding: 1.75rem 1rem;
    background: var(--color-bg);           /* Светлый серо-голубой */
    border: 1px solid var(--color-surface);
    border-radius: var(--radius);          /* 14px */
    text-align: center;
    transition: all 0.3s ease;
}

/* Hover: подъём + тень */
.cert-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(29, 78, 216, 0.1);
}


/* ============================================================
   ИКОНКА СЕРТИФИКАТА

   Квадрат 44×44px со скруглёнными углами.
   Внутри — SVG галочка в круге.
   ============================================================ */
.cert-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 0.75rem;       /* Центрирование + отступ снизу */
    background: var(--color-blue-glow);   /* Синее свечение */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cert-icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--color-blue);     /* Синий контур */
    fill: none;
    stroke-width: 1.5;
}


/* ============================================================
   НАЗВАНИЕ ПРОДУКТА В СЕРТИФИКАТЕ
   (например: KALMAR, ROBOSCOPE, FAZAR)
   ============================================================ */
.cert-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
}


/* ============================================================
   ТИП СЕРТИФИКАТА
   (например: CE Certificate)
   ============================================================ */
.cert-sub {
    font-size: 0.65rem;
    color: var(--color-ink-3);
    margin-top: 0.15rem;
}


/* ============================================================
   АДАПТИВНОСТЬ
   ============================================================ */
@media (max-width: 600px) {
    .certs-grid > * {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
/* Мобильный: уменьшенные отступы */
@media (max-width: 768px) {
    .certs-section {
        padding: 3rem 1.5rem;
    }

    .cert-card {
        width: 100%;
        padding: 1.5rem 0.75rem;
    }

    .cert-name {
        font-size: 0.82rem;
    }
}

/* Очень маленький экран: карточки в 2 ряда */
@media (max-width: 400px) {
    .cert-card {
        width: 100%;
    }
}
/* ============================================================
   СЕКЦИЯ QUALITY PROCESS — КОНТЕЙНЕР
   Стандартная секция с ограниченной шириной
   ============================================================ */
.process-section {
    padding: 5rem 6vw;
    max-width: 1440px;
    margin: 0 auto;
}


/* ============================================================
   ЗАГОЛОВОЧНАЯ ОБЛАСТЬ
   ============================================================ */
.process-header {
    max-width: 600px;
    margin-bottom: 3rem;
}


/* ============================================================
   ТАЙМЛАЙН / ТРЕК ПРОЦЕССА

   CSS Grid из 5 колонок с соединительной линией.

   Визуально:
   ●─────────●─────────●─────────●─────────●
   01        02        03        04        05
   Consult.  Design    Manufact. Test      Deploy

   ============================================================ */
.process-track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    position: relative;           /* Для ::before линии */
}

/* ============================================================
   СОЕДИНИТЕЛЬНАЯ ЛИНИЯ

   Горизонтальная градиентная полоса, проходящая через все точки.
   Позиционируется абсолютно на уровне центра точек (top: 28px).
   Полупрозрачная (opacity: 0.2) чтобы не перебивать точки.
   ============================================================ */
.process-track::before {
    content: '';
    position: absolute;
    top: 28px;                    /* Выравнивание по центру точек */
    left: 10%;                    /* Отступ от краёв */
    right: 10%;
    height: 2px;
    background: var(--gradient-primary);  /* Синий → бирюзовый */
    border-radius: 2px;
    opacity: 0.2;
}


/* ============================================================
   ОТДЕЛЬНЫЙ ШАГ ПРОЦЕССА

   Структура шага:

        ● ← точка (step-dot), абсолютно позиционирована

       01  ← номер (step-number)
   Consultation ← название (step-title)
   Описание...  ← описание (step-desc)

   ============================================================ */
.process-step {
    text-align: center;
    padding-top: 3.5rem;          /* Место для точки сверху */
    position: relative;           /* Для позиционирования точки */
}


/* ============================================================
   ТОЧКА НА ТАЙМЛАЙНЕ

   Круг 20×20px с синей рамкой, белым фоном и синим
   свечением вокруг (box-shadow). Внутри — маленький
   заполненный кружок 6×6px (::after).

   Визуально:
   ╭──╮
   │●│  ← внешний круг (белый) + внутренний (синий)
   ╰──╯

   ============================================================ */
.step-dot {
    position: absolute;
    top: 18px;                    /* Чуть выше padding-top шага */
    left: 50%;
    transform: translateX(-50%);  /* Центрирование */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-white);       /* Белый фон */
    border: 2px solid var(--color-blue);  /* Синяя рамка */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 4px var(--color-blue-glow);  /* Свечение */
}

/* Внутренний кружок */
.step-dot::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-blue);        /* Синий заполненный */
}


/* ============================================================
   НОМЕР ШАГА (01, 02, 03, 04, 05)
   Моноширинный шрифт, синий, мелкий
   ============================================================ */
.step-number {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--color-blue);
    margin-bottom: 0.3rem;
}


/* ============================================================
   НАЗВАНИЕ ШАГА
   ============================================================ */
.step-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
}


/* ============================================================
   ОПИСАНИЕ ШАГА
   ============================================================ */
.step-desc {
    font-size: 0.72rem;
    color: var(--color-ink-3);
    line-height: 1.5;
    padding: 0 0.25rem;
}


/* ============================================================
   АДАПТИВНОСТЬ
   ============================================================ */

/* Планшет: 3 колонки вместо 5 */
@media (max-width: 1024px) {
    .process-track {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    /* Линия скрывается — не имеет смысла в многострочном режиме */
    .process-track::before {
        display: none;
    }
}

/* Мобильный: 2 колонки */
@media (max-width: 768px) {
    .process-section {
        padding: 3rem 1.5rem;
    }

    .process-track {
        grid-template-columns: 1fr 1fr;
        gap: 2rem 1rem;
    }
}

/* Маленький мобильный: 1 колонка */
@media (max-width: 480px) {
    .process-track {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}
/* ============================================================
   СЕКЦИЯ MANUFACTURING CAPABILITIES — ВНЕШНИЙ КОНТЕЙНЕР
   Полноширинная полоса с белым фоном и тонкими границами
   ============================================================ */
.manufacturing-section {
    background: var(--color-white);
    border-top: 1px solid var(--color-surface);
    border-bottom: 1px solid var(--color-surface);
    padding: 5rem 6vw;
    max-width: 100%;
}


/* ============================================================
   ВНУТРЕННИЙ КОНТЕЙНЕР
   Ограничивает контент по ширине
   ============================================================ */
.manufacturing-inner {
    max-width: 1440px;
    margin: 0 auto;
}


/* ============================================================
   ЗАГОЛОВОЧНАЯ ОБЛАСТЬ
   Содержит бейдж, заголовок и описание.
   max-width: 600px — чтобы текст не растягивался на всю ширину
   ============================================================ */
.manufacturing-header {
    max-width: 600px;
    margin-bottom: 3rem;
}


/* ============================================================
   СЕТКА КАРТОЧЕК — 2 колонки
   ============================================================ */
.manufacturing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}


/* ============================================================
   КАРТОЧКА ПРОИЗВОДСТВЕННОЙ ВОЗМОЖНОСТИ

   Структура карточки:
   ┌─────────────────────────────────┐
   │  ── (градиентная полоска)    01 │  ← номер (водяной знак)
   │                                 │
   │  Заголовок                      │
   │                                 │
   │  Описание текстом...            │
   │                                 │
   └─────────────────────────────────┘
   ============================================================ */
.manufacturing-card {
    position: relative;             /* Для позиционирования номера */
    padding: 2.25rem;
    border-radius: var(--radius);   /* 14px */
    border: 1px solid var(--color-surface);
    background: var(--color-bg);    /* Светлый серо-голубой */
    overflow: hidden;               /* Обрезка номера, если выходит за край */
    transition: all 0.35s ease;
}

/* Hover: появляется тень */
.manufacturing-card:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(29, 78, 216, 0.1);
}


/* ============================================================
   НОМЕР-ВОДЯНОЙ ЗНАК (01, 02, 03, 04)

   Крупная полупрозрачная цифра в правом верхнем углу.
   Используется градиентный текст (синий → бирюзовый).
   ============================================================ */
.manufacturing-number {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 4rem;
    line-height: 1;
    position: absolute;
    top: 0.5rem;
    right: 1.5rem;

    /* Градиентный полупрозрачный текст */
    background: linear-gradient(
            135deg,
            rgba(29, 78, 216, 0.12),    /* Синий, очень прозрачный */
            rgba(13, 148, 136, 0.08)    /* Бирюзовый, ещё прозрачнее */
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ============================================================
   ГРАДИЕНТНАЯ АКЦЕНТНАЯ ПОЛОСКА

   Тонкая горизонтальная линия (32×3px) с градиентом.
   Визуально отделяет номер от заголовка.
   ============================================================ */
.manufacturing-bar {
    width: 32px;
    height: 3px;
    border-radius: 3px;
    background: var(--gradient-primary);   /* #1d4ed8 → #0d9488 */
    margin-bottom: 1rem;
}


/* ============================================================
   ЗАГОЛОВОК КАРТОЧКИ
   ============================================================ */
.manufacturing-card h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    margin-bottom: 0.6rem;
}


/* ============================================================
   ОПИСАНИЕ КАРТОЧКИ
   ============================================================ */
.manufacturing-card p {
    color: var(--color-ink-3);     /* Серый (#6e7196) */
    font-size: 0.88rem;
    line-height: 1.7;
}


/* ============================================================
   АДАПТИВНОСТЬ
   ============================================================ */

/* Планшет: карточки в 1 колонку */
@media (max-width: 1024px) {
    .manufacturing-grid {
        grid-template-columns: 1fr;
    }
}

/* Мобильный: уменьшенные отступы */
@media (max-width: 768px) {
    .manufacturing-section {
        padding: 3rem 1.5rem;
    }

    .manufacturing-card {
        padding: 1.75rem;
    }

    .manufacturing-number {
        font-size: 3rem;
    }
}
/* ============================================================
   СЕКЦИЯ «О КОМПАНИИ» — ОСНОВНОЙ КОНТЕЙНЕР
   Полноширинная полоса с белым фоном
   ============================================================ */
.about-section {
    background: var(--color-white);
    border-top: 1px solid var(--color-surface);
    border-bottom: 1px solid var(--color-surface);
    padding: 5rem 6vw;
    max-width: 100%;
}


/* ============================================================
   ВНУТРЕННЯЯ СЕТКА — 2 КОЛОНКИ
   Левая: текст + фичи | Правая: 4 карточки статистики
   ============================================================ */
.about-inner {
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}


/* ============================================================
   СПИСОК ПРЕИМУЩЕСТВ (3 штуки, вертикально)
   Каждое: иконка + заголовок + описание
   ============================================================ */
.about-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

/* Строка преимущества (иконка слева + текст справа) */
.about-feature-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}


/* ============================================================
   ИКОНКА ПРЕИМУЩЕСТВА
   Квадрат 40×40 со скругленными углами и SVG-иконкой
   ============================================================ */
.about-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;           /* Не сжимается во flex */
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;      /* Цвет берётся из color иконки */
    fill: none;
    stroke-width: 1.5;
}

/* Цветовые варианты иконок */
.about-icon.blue {
    background: var(--color-blue-glow);    /* rgba(29,78,216, 0.1) */
    color: var(--color-blue);              /* #1d4ed8 */
}

.about-icon.teal {
    background: var(--color-teal-glow);    /* rgba(13,148,136, 0.08) */
    color: var(--color-teal);              /* #0d9488 */
}

.about-icon.red {
    background: rgba(220, 38, 38, 0.07);
    color: var(--color-red);               /* #dc2626 */
}


/* ============================================================
   ТЕКСТ ПРЕИМУЩЕСТВА
   ============================================================ */

/* Заголовок преимущества — жирный Outfit */
.about-feature-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
}

/* Описание преимущества — серый, мелкий */
.about-feature-desc {
    font-size: 0.82rem;
    color: var(--color-ink-3);
    line-height: 1.55;
}


/* ============================================================
   СЕТКА СТАТИСТИКИ (правая колонка)
   2×2 карточки с цифрами
   ============================================================ */
.about-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}


/* ============================================================
   КАРТОЧКА СТАТИСТИКИ (базовый стиль)
   ============================================================ */
.about-stat-card {
    background: var(--color-bg);           /* Светлый серо-голубой фон */
    border: 1px solid var(--color-surface);
    border-radius: var(--radius);          /* 14px */
    padding: 2rem;
    text-align: center;
}


/* ============================================================
   УЛУЧШЕННАЯ КАРТОЧКА (текущий дизайн — с иконкой и описанием)
   ============================================================ */
.about-stat-enhanced {
    text-align: left;
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: all 0.4s ease;
    border: 1px solid transparent;         /* Подготовка для hover */
}

/* Hover-эффект: подъём + тень + тонкая синяя рамка */
.about-stat-enhanced:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(11, 14, 30, 0.07);
    border-color: rgba(29, 78, 216, 0.08);
}


/* ============================================================
   ИКОНКА В КАРТОЧКЕ СТАТИСТИКИ
   Квадрат 40×40, цвет зависит от варианта
   ============================================================ */
.about-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.2rem;
}

.about-stat-icon svg {
    width: 20px;
    height: 20px;
}

/* Цветовые варианты иконок в карточках */
.about-stat-icon-blue {
    background: rgba(29, 78, 216, 0.08);
    color: #1d4ed8;
}

.about-stat-icon-teal {
    background: rgba(13, 148, 136, 0.08);
    color: #0d9488;
}

.about-stat-icon-orange {
    background: rgba(217, 119, 6, 0.08);
    color: #d97706;
}

.about-stat-icon-red {
    background: rgba(220, 38, 38, 0.07);
    color: #dc2626;
}


/* ============================================================
   ЦИФРА В КАРТОЧКЕ — крупный градиентный текст
   ============================================================ */
.about-stat-number {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2rem;                       /* В enhanced-карточках */
    background: var(--gradient-primary);   /* Градиент синий → бирюзовый */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ============================================================
   ОПИСАНИЕ В КАРТОЧКЕ — серый мелкий текст
   ============================================================ */
.about-stat-desc {
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--color-ink-3);
}


/* ============================================================
   АДАПТИВНОСТЬ
   ============================================================ */

/* Планшет: 2 колонки → 1 колонка */
@media (max-width: 1024px) {
    .about-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

/* Мобильный: уменьшенные отступы, статистика → 1 колонка */
@media (max-width: 768px) {
    .about-section {
        padding: 3rem 1.5rem;
    }

    .about-stats-grid {
        grid-template-columns: 1fr;
    }

    .about-features {
        gap: 0.75rem;
    }
}

/* ============================================================
   ОСНОВНОЙ КОНТЕЙНЕР СТРАНИЦЫ
   ============================================================ */
.page-container {
    margin: 0 auto;
}


/* ============================================================
   HERO-БАННЕР (тёмный блок с названием и видео)
   ============================================================ */
.product-hero {
    position: relative;
    background: var(--gradient-dark);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 3rem;
    padding: 3rem;
}

/* Декоративный градиент (НЕ блокирует клики!) */
.product-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none; /* КРИТИЧЕСКИ ВАЖНО */
    background:
            radial-gradient(ellipse 50% 50% at 20% 40%, rgba(29,78,216,0.18), transparent),
            radial-gradient(ellipse 40% 40% at 80% 70%, rgba(13,148,136,0.1), transparent);
}

/* 2-колоночная сетка внутри hero */
.product-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 2.5rem;
    align-items: center;
}

/* Бейдж категории — яркий на тёмном фоне */
.hero-category-badge {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #5bf0d0;
    background: rgba(91,240,208,0.15);
    padding: 0.3rem 0.8rem;
    border-radius: 100px;
    display: inline-block;
    margin-bottom: 1rem;
}

/* Название товара */
.hero-product-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 0.75rem;
}

/* Описание */
.hero-product-desc {
    color: rgba(255,255,255,1);
    font-size: 0.9rem;
    line-height: 1.75;
    max-width: 460px;
    margin-bottom: 1.5rem;
}

/* Кнопка Request Quote на тёмном фоне */
.hero-quote-btn {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.85rem 2.2rem;
    background: #fff;
    color: var(--color-ink);
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s;
}

.hero-quote-btn:hover {
    background: #e8ecf5;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* Видео-плеер */
.hero-video {
    width: 100%;
    border-radius: 12px;
    aspect-ratio: 16 / 9;
    background: #000;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}


/* ============================================================
   СЕКЦИЯ ТЕХНИЧЕСКИХ ХАРАКТЕРИСТИК
   ============================================================ */
.specs-section {
    margin-bottom: 3rem;
}

/* Заголовок секции с цветной полоской */
.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-ink);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Цветная вертикальная полоска перед заголовком */
.section-title::before {
    content: '';
    width: 4px;
    height: 20px;
    background: var(--gradient-primary);
    border-radius: 4px;
    flex-shrink: 0;
}

/* Таблица характеристик */
.specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    background: var(--color-white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-surface);
}

.specs-table tr {
    border-bottom: 1px solid var(--color-surface);
    transition: background 0.2s;
}

.specs-table tr:last-child {
    border-bottom: none;
}

.specs-table tr:hover {
    background: rgba(29,78,216,0.02);
}

/* Левая колонка — название параметра */
.specs-table td:first-child {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--color-ink);
    width: 40%;
    padding: 0.85rem 1.25rem;
}

/* Правая колонка — значение */
.specs-table td:last-child {
    color: var(--color-ink-3);
    padding: 0.85rem 1.25rem;
}


/* ============================================================
   СЕКЦИЯ ОПИСАНИЯ
   ============================================================ */
.description-section {
    margin-bottom: 3rem;
}

.description-text {
    font-size: 0.92rem;
    color: var(--color-ink-2);
    line-height: 1.85;
    max-width: 900px;
}


/* ============================================================
   СЕКЦИЯ КЛЮЧЕВЫХ ОСОБЕННОСТЕЙ
   ============================================================ */
.features-section {
    margin-bottom: 3rem;
}

/* Сетка фич — 2 колонки */
.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* Отдельная фича */
.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--color-white);
    border: 1px solid var(--color-surface);
    border-radius: var(--radius-sm);
    transition: all 0.3s;
}

.feature-item:hover {
    border-color: rgba(29,78,216,0.12);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Точка-маркер фичи */
.feature-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-blue);
    flex-shrink: 0;
    margin-top: 0.45rem;
}

/* Чередование цветов маркеров (чётные — бирюзовые) */
.feature-item:nth-child(even) .feature-dot {
    background: var(--color-teal);
}

.feature-text {
    font-size: 0.85rem;
    color: var(--color-ink-2);
    line-height: 1.6;
}


/* ============================================================
   СЕКЦИЯ ГАЛЕРЕИ
   ============================================================ */
.gallery-section {
    margin-bottom: 3rem;
}

/* Сетка галереи — адаптивная */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

/* Карточка изображения */
.gallery-card {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--color-surface);
    background: var(--color-white);
    transition: all 0.35s;
}

.gallery-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(29,78,216,0.1);
}

.gallery-card img {
    width: 100%;
    display: block;
    aspect-ratio: 4/3;
    object-fit: cover;
}

/* Подпись к изображению */
.gallery-caption {
    padding: 0.65rem 0.9rem;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.74rem;
    color: var(--color-ink-3);
    line-height: 1.4;
}


/* ============================================================
   НИЖНЯЯ ПАНЕЛЬ ДЕЙСТВИЙ
   ============================================================ */
.actions-bar {
    display: flex;
    gap: 0.75rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-surface);
}

/* ============================================================
   АДАПТИВНОСТЬ
   ============================================================ */
@media (max-width: 1024px) {
    .product-hero-grid {
        grid-template-columns: 1fr;
    }

    .product-hero {
        padding: 2rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page-container {
        padding: 1rem 1rem 3rem;
    }

    .product-hero {
        padding: 1.5rem;
        border-radius: var(--radius);
    }

    .hero-product-title {
        font-size: 1.3rem;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .actions-bar {
        flex-direction: column;
    }
}

/* ============================================================
   КАРТОЧКА ТОВАРА В КАТАЛОГЕ
   Используется в сетке products-grid
   ============================================================ */

/* Сетка каталога — адаптивная, минимум 300px на карточку */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

/* Карточка товара */
.product-card {
    background: var(--color-white);
    border: 1px solid var(--color-surface);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

/* Изображение товара */
.product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    background: var(--color-surface); /* Фон-заглушка пока грузится */
}

/* Контентная часть карточки */
.product-body {
    padding: 1.5rem;
}

/* Бейдж категории (AEROSPACE, RAILWAY, PORTABLE) */
.product-category {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--color-blue);
    background: var(--color-blue-glow);
    padding: 0.2rem 0.55rem;
    border-radius: 100px;
    display: inline-block;
    margin-bottom: 0.6rem;
}

/* Название товара */
.product-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-ink);
    margin-bottom: 0.5rem;
}

/* Краткое описание (обрезка до 3 строк) */
.product-desc {
    font-family: var(--font-body);
    font-size: 0.83rem;
    color: var(--color-ink-3);
    line-height: 1.65;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Строка кнопок внизу карточки */
.product-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Кнопка "Full Specs" — контурная */
.btn-details {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.73rem;
    padding: 0.5rem 1rem;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.25s;
    background: var(--color-bg);
    border: 1.5px solid var(--color-surface-2);
    color: var(--color-ink-2);
    display: inline-block;
    text-decoration: none;
    line-height: normal;
    box-sizing: border-box;
}

.btn-details:hover {
    border-color: var(--color-blue);
    color: var(--color-blue);
}
li.nav-item > button.active {
    border-color: var(--color-ink)!important;
    background-color: var(--color-ink)!important;
    color: var(--color-white)!important;
}
/* Кнопка "Get Quote" — заливка */
.btn-quote {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.73rem;
    padding: 0.5rem 1rem;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.25s;
    background: var(--color-ink);
    border: none;
    color: #fff;
    display: inline-block;
    text-decoration: none;
    line-height: normal;
    box-sizing: border-box;
}

.btn-quote:hover {
    background: #30457f;
    color: #fff;
}
.tab-content>.active{display:grid!important;}
.main_page .jlcc-add-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.main_page .jlcc-add-to-cart {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.73rem;
    padding: 0.5rem 1rem;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.25s;
    background: var(--color-bg);
    border: 1.5px solid var(--color-surface-2);
    color: var(--color-ink-2);
}

.main_page .jlcc-add-to-cart:hover {
    border-color: var(--color-blue);
    color: var(--color-blue);
}

.main_page .jlcc-count {
    min-width: 64px;
    padding: 0.5rem 0.85rem;
    border-radius: 100px;
    border: 1.5px solid var(--color-surface-2);
    color: var(--color-ink-2);
    background: var(--color-white);
}
/* ============================================================
   АДАПТИВНОСТЬ
   ============================================================ */

@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
}
.site-footer {
    background: var(--color-white);
    border-top: 1px solid var(--color-surface);
}


/* ============================================================
   ВЕРХНЯЯ ЧАСТЬ FOOTER — 4 КОЛОНКИ
   ============================================================ */
.footer-grid {
    max-width: 1440px;
    margin: 0 auto;
    padding: 1.5rem 3vw;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;   /* Бренд шире остальных */
    gap: 3rem;
}


/* ============================================================
   КОЛОНКА БРЕНДА (первая, широкая)
   Логотип + описание
   ============================================================ */
.footer-brand {
    /* Занимает 1.5fr — самая широкая колонка */
}

/* Логотип — тот же стиль что в навигации */
.footer-logo {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--color-ink);
    text-decoration: none;
    display: inline-block;
    margin-bottom: 0.75rem;
}

/* Градиентная точка в логотипе */
.footer-logo span {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Описание под логотипом */
.footer-brand-desc {
    font-size: 0.85rem;
    color: var(--color-ink-3);
    line-height: 1.6;
    max-width: 280px;
}


/* ============================================================
   КОЛОНКА ССЫЛОК (Products, Company, HQ)
   ============================================================ */
.footer-col {
    /* Каждая занимает 1fr */
}

/* Заголовок колонки */
.footer-col-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-ink);
    margin-bottom: 1rem;
}

/* Ссылка в колонке */
.footer-col-link {
    display: block;
    font-size: 0.85rem;
    color: var(--color-ink-3);
    text-decoration: none;
    padding: 0.2rem 0;
    transition: color 0.25s ease;
}

.footer-col-link:hover {
    color: var(--color-blue);
}

/* Текстовая строка (не ссылка) — адрес, телефон */
.footer-col-text {
    display: block;
    font-size: 0.85rem;
    color: var(--color-ink-3);
    padding: 0.2rem 0;
}


/* ============================================================
   НИЖНЯЯ ПОЛОСА — КОПИРАЙТ
   ============================================================ */
.footer-bottom {
    max-width: 1440px;
    margin: 0 auto;
    padding: 1.5rem 6vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--color-surface);
    font-size: 0.75rem;
    color: var(--color-ink-3);
}


/* ============================================================
   АДАПТИВНОСТЬ
   ============================================================ */

/* Планшет: 2 колонки */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

/* Мобильный: 1 колонка */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 2.5rem 1.5rem 1.5rem;
    }

    .footer-bottom {
        padding: 1.25rem 1.5rem;
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
}