/* assets/css/style.css */

:root {
    /* Палітра як у CCG */
    --ccg-red: #E31E24;       /* Фірмовий червоний */
    --ccg-black: #1A1A1A;     /* Глибокий чорний */
    --ccg-gray: #F5F5F5;      /* Фон блоків */
    --ccg-text: #333333;      /* Текст */
    --font-main: 'Manrope', sans-serif;
}

body {
    font-family: 'Manrope', sans-serif !important;
    color: var(--ccg-text);
    background-color: #fff;
    line-height: 1.6;
}

#preloader {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #050505; /* Глибокий вугільний чорний */
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
}

#preloader._loaded {
    transform: translateY(-100%);
    opacity: 0;
}

/* Фонова сітка для глибини */
.preloader-overlay {
    position: absolute;
    width: 100%; height: 100%;
    background-image: radial-gradient(circle at center, rgba(227, 30, 36, 0.05) 0%, transparent 70%),
                      linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 100% 100%, 50px 50px, 50px 50px;
    z-index: 1;
}

.preloader-content {
    position: relative;
    z-index: 2;
    width: 300px;
}

/* Логотип та світіння */
.preloader-logo-wrap {
    position: relative;
    margin-bottom: 50px;
    text-align: center;
}

.p-logo {
    width: 140px;
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.2));
    position: relative;
    z-index: 5;
}

.logo-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100px; height: 100px;
    background: #E31E24;
    filter: blur(60px);
    opacity: 0.3;
    animation: pulseGlow 2s infinite ease-in-out;
}

/* Смуга завантаження */
.loader-db-wrap {
    width: 100%; height: 2px;
    background: rgba(255,255,255,0.1);
    position: relative;
    margin-bottom: 20px;
}

.loader-line-active {
    position: absolute;
    left: 0; top: 0; height: 100%;
    width: 0;
    background: #E31E24;
    box-shadow: 0 0 15px #E31E24;
    transition: width 0.5s cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

/* Футер прелоадера */
.preloader-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-family: 'Share Tech Mono', monospace;
}

.p-status {
    font-size: 10px;
    letter-spacing: 2px;
    color: #fff;
}

.p-label { opacity: 0.4; margin-right: 5px; }

#load-status { color: #E31E24; text-shadow: 0 0 5px #E31E24; }

.p-percentage {
    font-size: 24px;
    font-weight: 300;
    color: #fff;
    line-height: 1;
}

.p-percentage .unit { font-size: 12px; opacity: 0.3; margin-left: 2px; }

/* Декоративні кути */
.p-corner {
    position: absolute;
    width: 40px; height: 40px;
    border: 1px solid rgba(227, 30, 36, 0.3);
    z-index: 2;
}

.top-l { top: 40px; left: 40px; border-right: none; border-bottom: none; }
.bottom-r { bottom: 40px; right: 40px; border-left: none; border-top: none; }

@keyframes pulseGlow {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.2; }
    50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.5; }
}
/* --- ГЛОБАЛЬНІ ПЕРЕВИЗНАЧЕННЯ BOOTSTRAP --- */

/* Робимо все "гострим" (квадратним), як у будівництві */
.btn, .card, .form-control, .modal-content {
    border-radius: 0 !important; 
}

a {
    text-decoration: none;
    transition: all 0.3s ease;
}

/* --- КНОПКИ --- */
.btn-primary {
    background-color: var(--ccg-red);
    border-color: var(--ccg-red);
    text-transform: uppercase;
    font-weight: 700;
    padding: 12px 30px;
    letter-spacing: 0.5px;
}

.btn-primary:hover {
    background-color: #b0151a;
    border-color: #b0151a;
}

.btn-outline {
    border: 2px solid #fff;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    padding: 12px 30px;
}

.btn-outline:hover {
    background-color: #fff;
    color: var(--ccg-black);
}

/* --- ХЕДЕР --- */
.site-header {
position: fixed !important; 
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 2000 !important; /* Піднімаємо вище за все інше */
    display: block !important;
    background: black;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 15px 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header._scroll {
    padding: 10px 0; /* Зменшуємо висоту */
    background: rgba(5, 5, 5, 0.95); /* Напівпрозорий чорний фон */
    backdrop-filter: blur(10px); /* Ефект матового скла */
    border-bottom: 1px solid rgba(227, 30, 36, 0.2); /* Тонка червона лінія знизу */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}

/* Корекція логотипа при скролі */
.site-header._scroll .site-footer__headings-logo {
    height: 55px !important; /* Трохи зменшуємо логотип */
    transition: height 0.4s ease;
}
/* Коли меню зафіксоване, робимо ауру навколо лого сильнішою */
.site-header._scroll .header-logo-glow.core {
    opacity: 0.9;
    filter: blur(10px);
    background: #FF0000; /* Яскраво-червоний */
}

.site-header._scroll .header-logo-glow.aura {
    opacity: 0.5;
    filter: blur(25px);
}


.navbar-nav .nav-link {
    color: var(--ccg-black);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    margin-left: 20px;
}

.navbar-nav .nav-link.active, 
.navbar-nav .nav-link:hover {
    color: var(--ccg-red);
}

/* --- HERO SECTION (Головний екран) --- */
/* =========================================
   HOME HERO HUD INTERFACE
   ========================================= */

.home-hero {
    height: 100vh;
    position: relative;
    background: #000;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.video-background {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
}

.video-background video {
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0.7; /* Робимо відео трохи темнішим для HUD */
}

.video-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, transparent 20%, rgba(0,0,0,0.8) 100%);
    z-index: 2;
}

/* HUD ELEMENTS */
.hero-hud {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 3;
    pointer-events: none; /* Щоб кліки проходили до кнопок */
}

/* Сканер зліва /* =========================================
   HUD BOTTOM RIGHT POSITIONING
   ========================================= */

.hud-bottom-right {
    position: absolute;
    bottom: 10%; /* Відступ від низу */
    right: 5%;   /* Відступ від правого краю */
    padding: 15px 25px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    border-right: 3px solid #E31E24; /* Акцентна лінія справа */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 220px;
    z-index: 5;
}

/* Оновлений сканер (тепер горизонтальний, що бігає вгору-вниз всередині блоку) */
.hud-scanner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #E31E24, transparent);
    box-shadow: 0 0 10px #E31E24;
    animation: scanVertical 4s infinite linear;
}

.hud-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: 'Share Tech Mono', monospace; /* Технічний шрифт */
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 1px;
}

.stats-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 4px;
}

.text-red.pulse {
    color: #E31E24;
    font-weight: bold;
    animation: hudPulse 1.5s infinite;
}

/* --- АНІМАЦІЇ --- */

@keyframes scanVertical {
    0% { top: 0; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

@keyframes hudPulse {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}

/* Адаптивність */
@media (max-width: 768px) {
    .hud-bottom-right {
        bottom: 5%;
        right: 5%;
        min-width: 180px;
        padding: 10px 15px;
    }
}
/* Ефект лінзи окулярів */
.hero-hud-center {
    background: radial-gradient(circle, transparent 30%, rgba(227, 30, 36, 0.03) 100%);
    box-shadow: inset 0 0 100px rgba(0,0,0,0.5);
}

/* Точки фокусу, що "прив'язані" до жестів */
.hud-focus-point {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 1px solid #E31E24;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: focalPointAnim 8s infinite;
}

/* Перша точка з'являється там, де він зводить пальці */
.point-1 { top: 40%; left: 45%; animation-delay: 1s; }
.point-2 { top: 35%; left: 55%; animation-delay: 4s; }

@keyframes focalPointAnim {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    20%, 80% { opacity: 0.6; transform: scale(1.2); }
    50% { opacity: 1; transform: scale(1); box-shadow: 0 0 20px #E31E24; }
}

.hero-3d-overlay {
    position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 4;
        pointer-events: none;
        mix-blend-mode: screen;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #heroModel {
        /* 0.4 робить модель дуже прозорою, як справжню голограму */
        opacity: 0.4; 
        
        /* scale(0.8) зменшує до 80%, translateY(10%) опускає вниз */
        transform: scale(0.8) translateY(10%);
        
        filter: drop-shadow(0 0 20px rgba(227, 30, 36, 0.3)) brightness(1.1);
        transition: transform 2s ease-in-out, opacity 0.5s ease;
    }

/* Рамка зони взаємодії */
.hud-interaction-area {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 70vw; height: 50vh;
    border: 1px solid rgba(255,255,255,0.05);
}

/* Круговий прогрес справа */
.hud-right {
    position: absolute;
    top: 20%; right: 5%;
    text-align: center;
}

.hud-circle-wrap {
    width: 80px; height: 80px; position: relative;
}

.circle-bg { fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 2; }
.circle-progress {
    fill: none; stroke: #E31E24; stroke-width: 2;
    stroke-dasharray: 283; stroke-dashoffset: 50;
    animation: rotateCircle 10s linear infinite;
}

.hud-percent {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #fff; font-size: 14px; font-weight: 800;
}

.hud-label { color: #fff; font-size: 9px; letter-spacing: 2px; margin-top: 10px; opacity: 0.6; }

/* Центральна рамка (Target) */
.hud-target-box {
    position: absolute;
    top: 50%; left: 50%;
    width: 450px; height: 320px;
    transform: translate(-50%, -50%);
    z-index: 5;
    pointer-events: none;
    /* Анімація переходу для JS маніпуляцій */
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Кути з ефектом світіння */
.t-c {
    position: absolute;
    width: 40px; height: 40px;
    border: 2px solid #E31E24;
    filter: drop-shadow(0 0 8px rgba(227, 30, 36, 0.8));
    transition: all 0.5s ease;
}

.top-l { top: 0; left: 0; border-right: none; border-bottom: none; }
.top-r { top: 0; right: 0; border-left: none; border-bottom: none; }
.bottom-l { bottom: 0; left: 0; border-right: none; border-top: none; }
.bottom-r { bottom: 0; right: 0; border-left: none; border-top: none; }

/* Тонке перехрестя в центрі */
.target-cross {
    position: absolute;
    top: 50%; left: 50%;
    width: 20px; height: 20px;
    transform: translate(-50%, -50%);
}
.target-cross::before, .target-cross::after {
    content: ''; position: absolute; background: rgba(227, 30, 36, 0.5);
}
.target-cross::before { width: 100%; height: 1px; top: 50%; left: 0; }
.target-cross::after { height: 100%; width: 1px; left: 50%; top: 0; }

/* Скануюча лінія */
.target-scan-line {
    position: absolute;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, #E31E24, transparent);
    top: 0; opacity: 0.3;
    animation: scanLineMove 4s infinite linear;
}

/* Напис під рамкою */
.target-label {
    position: absolute;
    bottom: -25px; left: 0;
    font-family: monospace; font-size: 10px;
    color: #E31E24; letter-spacing: 2px;
}

@keyframes scanLineMove {
    0% { top: 0; opacity: 0; }
    50% { opacity: 0.5; }
    100% { top: 100%; opacity: 0; }
}

/* Контейнер для точок */
.hud-glitch-points {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 6;
}

/* Базовий стиль точки */
.ping-point {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #E31E24;
    border-radius: 50%;
    box-shadow: 0 0 15px #E31E24, 0 0 30px #E31E24;
    animation: pingBlink 2s infinite;
}

/* Текстова мітка біля точки */
.ping-point span {
    position: absolute;
    left: 20px;
    top: -5px;
    color: #E31E24;
    font-family: monospace;
    font-size: 10px;
    white-space: nowrap;
    opacity: 0.8;
}

/* Ефект пульсації та миготіння */
.ping-point::after {
    content: '';
    position: absolute;
    top: -10px; left: -10px; right: -10px; bottom: -10px;
    border: 1px solid #E31E24;
    border-radius: 50%;
    animation: pingOuter 1.5s infinite;
}

/* Позиціонування точок (підлаштовуємо під руки будівельника) */
.p1 { top: 22%; left: 58%; animation-delay: 0.2s; }
.p2 { top: 60%; left: 55%; animation-delay: 0.8s; }
.p3 { top: 45%; left: 45%; animation-delay: 1.5s; }
.p4 { top: 30%; left: 50%; animation-delay: 0.5s; }
.p5 { top: 20%; left: 45%; animation-delay: 1.0s; }

/* АНІМАЦІЇ */
@keyframes pingBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.8); }
}

@keyframes pingOuter {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
}

/* ANIMATIONS */
@keyframes scanLine {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(80px); }
}

@keyframes rotateCircle {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#hud-percent-val {
    font-variant-numeric: tabular-nums; /* Щоб цифри не "стрибали" по ширині при зміні */
    transition: text-shadow 0.3s ease;
}
/* Клас, який можна додавати через JS в момент оновлення */
.percent-updating {
    color: #E31E24;
    text-shadow: 0 0 10px #E31E24;
}
/* Тексти Hero (Масштаб та Колір) */
.home-hero__content {
    z-index: 10;
    position: relative;
}

.home-hero__title {
    font-size: 5rem; font-weight: 900; color: #fff; text-transform: uppercase;
}

.home-hero__title span {
    color: #E31E24; -webkit-text-stroke: 1px #E31E24;
}

.home-hero__subtitle {
    font-size: 1.2rem; color: #ccc; max-width: 500px; margin: 30px 0;
}

/* Індикатор скролу */
.hero-scroll-indicator {
    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
    z-index: 10; display: flex; flex-direction: column; align-items: center;
    color: #fff; font-size: 10px; letter-spacing: 3px;
}

.mouse {
    width: 20px; height: 35px; border: 2px solid #fff; border-radius: 20px;
    margin-top: 10px; position: relative;
}

.mouse::before {
    content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
    width: 4px; height: 8px; background: #E31E24; border-radius: 2px;
    animation: scrollMouse 2s infinite;
}

@keyframes scrollMouse {
    0% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, 15px); }
}
/* Кнопки */
.button_red {
    background: #E31E24;
    color: #fff;
    padding: 15px 35px;
    text-decoration: none;
    font-weight: 700;
    border-radius: 5px;
    transition: 0.3s;
}

.button_outline {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    padding: 13px 35px;
    font-weight: 700;
    border-radius: 5px;
    transition: 0.3s;
}

.button_outline:hover {
    background: #fff;
    color: #000;
}

/* Адаптивність для мобільних */
@media (max-width: 768px) {
    .home-hero {
        height: 100svh; /* Використовуємо svh для мобільних браузерів */
    }
    .home-hero__actions {
        flex-direction: column;
    }
}
/* =========================================
   АДАПТИВНІСТЬ ДЛЯ МОБІЛЬНИХ (iPhone та інші)
   ========================================= */

@media (max-width: 768px) {
    /* 1. ПРИХОВУЄМО ВІДЕО ТА ЗАЛИШАЄМО ЧОРНИЙ ФОН */
    .video-background video {
        display: none; /* Вимикаємо відео на мобільних */
    }
    
    .home-hero {
        background: #000; /* Гарантуємо чистий чорний фон */
        height: 100svh; /* Використовуємо динамічну висоту для Safari iPhone */
    }

    /* 2. ЗМЕНШЕННЯ ТЕКСТУ HERO */
    .home-hero__title {
        font-size: 2.8rem; /* Значно менший розмір для мобільних */
        line-height: 1.1;
        margin-bottom: 15px;
    }

    .home-hero__subtitle {
        font-size: 1rem;
        line-height: 1.4;
        max-width: 100%; /* Текст на всю ширину */
        margin: 20px 0;
    }

    .home-hero__content {
        padding: 0 20px; /* Додаємо відступи від країв екрану */
        text-align: left; /* Залишаємо вирівнювання зліва або міняємо на center */
    }

    /* 3. АДАПТАЦІЯ HUD ЕЛЕМЕНТІВ (щоб не перекривали текст) */
    
    /* Ховаємо занадто дрібні або заважаючі деталі на мобілці */
    .hud-interaction-area, 
    .hud-glitch-points,
    .hero-hud-center {
        display: none; 
    }

    /* Зменшуємо та переміщуємо HUD статистики */
    .hud-bottom-right {
        bottom: 20px;
        right: 20px;
        min-width: 150px;
        padding: 8px 12px;
        scale: 0.8; /* Пропорційно зменшуємо блок */
    }

    /* Переміщуємо круговий прогрес */
    .hud-right {
        top: 10%;
        right: 15px;
        scale: 0.7;
    }

    /* Адаптуємо 3D модель (голограму) */
    #heroModel {
        transform: scale(0.6) translateY(15%); /* Зменшуємо модель, щоб вона була фоном */
        opacity: 0.3;
    }

    /* Центральна рамка Target (зменшуємо її) */
    .hud-target-box {
        width: 280px; 
        height: 200px;
        opacity: 0.5; /* Робимо менш помітною */
    }

    .t-c {
        width: 20px; height: 20px; /* Менші кутики */
    }

    /* Кнопка */
    .button_red {
        width: 100%; /* Кнопка на всю ширину на мобілці */
        text-align: center;
        display: block;
        padding: 18px 20px;
    }
}

/* Специфічне виправлення для дуже малих екранів (iPhone SE) */
@media (max-width: 380px) {
    .home-hero__title {
        font-size: 2.2rem;
    }
}

/* --- КАРТКИ (Послуги/Проекти) --- */
.section-title {
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
}

/* Червона лінія під заголовком */
.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--ccg-red);
    margin-top: 10px;
}

.service-card {
    background: var(--ccg-gray);
    padding: 40px;
    height: 100%;
    transition: transform 0.3s;
    border-left: 4px solid transparent;
}

.service-card:hover {
    transform: translateY(-5px);
    border-left: 4px solid var(--ccg-red); /* Акцент при наведенні */
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
/* assets/css/style.css */

/* Базові налаштування */
body {
    font-family: 'Manrope', sans-serif;
    color: #333;
    background-color: #fff;
    margin: 0;
}

/* --- HEADER STYLES --- */
.site-header {
    position: absolute; /* Щоб лежав поверх відео */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 0;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.1); /* Легка лінія */
}

.site-header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-header__services {
    display: flex;
    align-items: center;
    gap: 25px; /* Відстань між елементами справа */
}
.site-header__headings {
    position: relative;
    display: flex;
    align-items: center;
}

.site-footer__headings-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

/* Саме логотип з інтенсивним червоним фільтром */
.site-footer__headings-logo {
    position: relative;
    z-index: 3;
    /* Створюємо ефект "самосвічення" самого лого */
    filter: drop-shadow(0 0 8px rgba(227, 30, 36, 0.8));
    animation: logoCorePulse 3s infinite ease-in-out;
}

/* Спільні стилі для шарів світіння */
.header-logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #E31E24;
    pointer-events: none;
}

/* Ядро (інтенсивне, невелике) */
.header-logo-glow.core {
    width: 50px;
    height: 40px;
    filter: blur(15px);
    z-index: 1;
    opacity: 0.6;
    animation: corePulse 3s infinite ease-in-out;
}

/* Аура (велика, м'яка) */
.header-logo-glow.aura {
    width: 100px;
    height: 80px;
    filter: blur(40px);
    z-index: 0;
    opacity: 0.3;
    animation: auraPulse 3s infinite ease-in-out;
}

/* АНІМАЦІЇ */

@keyframes logoCorePulse {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(227, 30, 36, 0.6)) brightness(1); }
    50% { filter: drop-shadow(0 0 20px rgba(227, 30, 36, 1)) brightness(1.2); }
}

@keyframes corePulse {
    0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.2); }
}

@keyframes auraPulse {
    0%, 100% { opacity: 0.1; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.4; transform: translate(-50%, -50%) scale(1.5); }
}

/* --- ТЕЛЕФОН --- */
.header-phone__number {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* --- МОВА (Lang Toggle) --- */
.lang-toggle {
    position: relative;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
}
.lang-toggle__current {
    display: flex;
    align-items: center;
    gap: 5px;
}
.lang-toggle__dropdown {
    display: none; /* Приховано за замовчуванням */
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 10px;
}
.lang-toggle:hover .lang-toggle__dropdown {
    display: block;
}
.lang-toggle__option {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
}
.lang-toggle__option:hover {
    color: #fff;
}

/* --- ЗВУК --- */
.toogle-sounds img {
    width: 20px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s;
}
.toogle-sounds img:hover {
    opacity: 1;
}

/* --- КНОПКА "ЗАЛИШИТИ ЗАЯВКУ" (SVG) --- */
.header-action__button {
    background: transparent;
    border: none;
    padding: 12px 24px;
    position: relative;
    cursor: pointer;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.button__svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.button__shape {
    fill: transparent;
    stroke: #fff;
    stroke-width: 1px;
    width: 100%;
    height: 100%;
    transition: all 0.4s ease;
}





/* Ефект при наведенні */

.header-action__button .button__shape {
    /* Початкові налаштування контуру */
    stroke-dasharray: 1; 
    stroke-dashoffset: 1; 
    stroke-width: 2px;
    stroke: rgba(255, 255, 255, 0.4); /* Білий колір */
    fill: transparent;
    
    /* 1. Повільне малювання білим при завантаженні (5 секунд) */
    animation: draw-white 5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    
    /* 2. Налаштування для червоного "дозаповнення" при наведенні */
    transition: 
        stroke-dashoffset 0.8s cubic-bezier(0.65, 0, 0.35, 1), 
        stroke 0.4s ease, 
        fill 0.4s ease;
}

.header-action__button:hover .button__shape {
    /* Зупиняємо білу анімацію, якщо вона ще йде */
    animation: none; 
    
    /* Малюємо лінію заново червоним кольором */
    stroke-dashoffset: 0; 
    stroke: #E31E24; 
    stroke-width: 3px;
    fill: rgba(227, 30, 36, 0.1);
}

/* Анімація малювання білого контуру */
@keyframes draw-white {
    0% { stroke-dashoffset: 1; }
    100% { stroke-dashoffset: 0; }
}

/* Колір тексту також змінюємо плавно */
.header-action__button:hover .button__text {
    color: #E31E24;
    transition: 0.3s ease;
}

/* --- ГАМБУРГЕР МЕНЮ (Виправлено) --- */
.header-toggle__button {
    background: none;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 20px;
    position: relative;
    padding: 0;
    z-index: 2000; /* Щоб бути поверх меню */
}

.toggle-line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff; /* Переконайся, що на білому фоні тут не #fff */
    position: absolute;
    left: 0;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transform-origin: center; /* Ключове виправлення */
}

/* Початкові позиції */
.toggle-line--top { top: 0; }
.toggle-line--middle { top: 50%; transform: translateY(-50%); }
.toggle-line--bottom { top: 100%; transform: translateY(-100%); }

/* АНІМАЦІЯ ПРИ .active */

/* Верхня лінія: стає в центр і крутиться */
.header-toggle__button.active .toggle-line--top {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

/* Середня лінія: просто зникає */
.header-toggle__button.active .toggle-line--middle {
    opacity: 0;
    transform: translateY(-50%) translateX(-10px);
}

/* Нижня лінія: стає в центр і крутиться в інший бік */
.header-toggle__button.active .toggle-line--bottom {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

/* Коли меню відкрите, лінії мають стати білими (якщо хедер був білий, а меню чорне) */
.header-toggle__button.active .toggle-line {
    background-color: #fff;
}/* assets/css/style.css */

/* --- FULLSCREEN MENU --- */
.fullscreen-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #111; /* Глибокий чорний */
    z-index: 990; /* Нижче за Хедер (1000), але вище за все інше */
    
    /* Стан "Закрито" */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px); /* Легкий зсув вгору */
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1); /* Плавна анімація */
}

/* Стан "Відкрито" (додається через JS) */
.fullscreen-menu.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.menu-grid {
    display: grid;
    grid-template-columns: 1fr;
}

/* На великих екранах ділимо на 2 колонки */
@media (min-width: 992px) {
    .menu-grid {
        grid-template-columns: 2fr 1fr;
    }
}

/* Стилізація посилань */
.main-overlay-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-overlay-nav li {
    margin-bottom: 20px;
    overflow: hidden; /* Для анімації появи */
}

.main-overlay-nav a {
    color: #fff;
    font-size: 40px; /* Великий розмір шрифту */
    font-weight: 800; /* Жирний, як у будівельників */
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.1;
    display: inline-block;
    transition: color 0.3s ease, transform 0.3s ease;
}

/* Менші пункти (Новини, Вакансії) */
.main-overlay-nav li.secondary-item a {
    font-size: 24px;
    font-weight: 600;
    color: #888; /* Сірий колір */
    margin-top: 10px;
}

/* Ховер ефекти */
.main-overlay-nav a:hover {
    color: #E31E24; /* Ваш брендовий червоний */
    transform: translateX(20px); /* Зсув вправо при наведенні */
}

/* Стилі для правої колонки з контактами */
.menu-contact-block {
    border-left: 1px solid rgba(255,255,255,0.1);
    padding-left: 40px;
}

.menu-contact-block a {
    text-decoration: none;
    transition: color 0.3s;
}
.menu-contact-block a:hover {
    color: #E31E24 !important;
}

/* Блокуємо прокрутку сайту, коли меню відкрите */
body.menu-open {
    overflow: hidden;
}
/* Додайте це до вашого style.css */

/* Обгортка для картинки, щоб робити zoom-ефект */
.service-card .img-wrapper {
    width: 100%;
    height: 220px; /* Фіксована висота для всіх карток */
    overflow: hidden; /* Обрізає все, що вилазить при зумі */
    margin-bottom: 25px; /* Відступ до заголовка H3 */
    background-color: #ddd; /* Заглушка, поки вантажиться фото */
}

/* Сама картинка */
.service-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Заповнює блок, не сплющуючи фото */
    transition: transform 0.6s ease; /* Плавний зум */
    filter: grayscale(100%); /* Ч/Б стиль за замовчуванням (якщо хочете як у CCG) */
}

/* Ховер ефект на всю картку */
.service-card:hover .service-card-img {
    transform: scale(1.05); /* Легке збільшення картинки */
    filter: grayscale(0%); /* Повернення кольору при наведенні */
}

/* Вимикаємо grayscale, якщо хочете, щоб фото завжди були кольорові — просто видаліть властивість filter */

/* assets/css/style.css */

/* --- PORTFOLIO GRID --- */
.home-portfolio__inner {
    display: grid;
    grid-template-columns: 1fr; /* Мобільна версія: 1 колонка */
    gap: 30px;
}

/* Планшет і Десктоп */
@media (min-width: 768px) {
    .home-portfolio__inner {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки */
    }
}

@media (min-width: 992px) {
    .home-portfolio__inner {
        grid-template-columns: repeat(3, 1fr); /* 3 колонки */
    }
}

/* --- ТЕКСТОВИЙ БЛОК --- */
.home-portfolio__info {
    padding-right: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.home-portfolio__excerpt {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* --- ПЛИТКИ (Hover Box) --- */
.hover-box {
    position: relative;
    overflow: hidden;
    height: 350px; /* Фіксована висота плитки */
    background: #f4f4f4;
}

.hover-box__link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    color: #fff;
}

/* Картинка */
.hover-box__picture {
    width: 100%;
    height: 100%;
    position: relative;
}

.hover-box__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Затемнення (Overlay) */
.bg__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Напівпрозорий чорний */
    opacity: 0; /* Приховано за замовчуванням */
    transition: opacity 0.4s ease;
    z-index: 1;
}

/* Текст на плитці */
.hover-box__info {
    position: absolute;
    bottom: 30px;
    left: 30px;
    z-index: 2;
    transform: translateY(10px);
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.hover-box__title {
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 5px;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.hover-box__subtitle {
    font-size: 14px;
    font-weight: 600;
    color: var(--ccg-red); /* Червоний акцент */
    opacity: 0; /* Приховано до наведення */
    transform: translateY(10px);
    transition: all 0.4s ease;
    text-transform: uppercase;
}

/* --- HOVER EFFECTS (Магія) --- */

/* 1. Картинка збільшується */
.hover-box:hover .hover-box__image {
    transform: scale(1.1);
}

/* 2. З'являється затемнення */
.hover-box:hover .bg__overlay {
    opacity: 1;
}

/* 3. Текст піднімається трохи вгору */
.hover-box:hover .hover-box__info {
    transform: translateY(0);
}

/* 4. З'являється напис "переглянути" */
.hover-box:hover .hover-box__subtitle {
    opacity: 1;
    transform: translateY(0);
}

/* assets/css/style.css */

/* --- SEO SECTION (Industrial Style) --- */
.seo-section {
    padding: 80px 0;
    background-color: #fff;
    border-top: 1px solid #e5e5e5;
}

.seo-wrapper {
    max-width: 900px; /* Робимо колонку вужчою для кращого читання */
    margin: 0 auto;
}

/* Заголовок */
.seo-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800; /* Дуже жирний */
    font-size: 2rem;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: var(--ccg-black); /* #1A1A1A */
    letter-spacing: -0.5px;
}

.seo-intro {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 30px;
    line-height: 1.6;
    font-weight: 500;
}

/* Прихований блок */
.seo-content {
    /* Стан "Закрито" */
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.5s ease-out, opacity 0.5s ease-out, margin 0.5s;
    overflow: hidden;
    margin-top: 0;
}

.seo-inner-text {
    overflow: hidden; /* Обов'язково для анімації grid */
}

/* Стан "Відкрито" (додається JS) */
.seo-content._open {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 20px;
}

/* Стилізація тексту всередині */
.seo-inner-text p {
    margin-bottom: 20px;
    color: #333;
    line-height: 1.7;
}

.seo-inner-text h3 {
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 15px;
    color: var(--ccg-black);
}

/* --- ЧЕРВОНО-ЧОРНИЙ СПИСОК --- */
.ccg-list {
    list-style: none;
    padding: 0;
    margin: 30px 0;
}

.ccg-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 15px;
    font-size: 15px;
    color: #444;
}

/* Червоний квадрат замість точки */
.ccg-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px; /* Центрування відносно першого рядка */
    width: 8px;
    height: 8px;
    background-color: var(--ccg-red); /* #E31E24 */
    /* border-radius: 50%; якщо хочете кружечки, видаліть цей рядок для квадратів */
}

/* --- КНОПКА ПЕРЕМИКАЧ --- */
.seo-toggler {
    margin-top: 30px;
    text-align: left; /* Або center */
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.btn-text-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 14px;
    color: var(--ccg-black);
    transition: color 0.3s ease;
}

.btn-icon {
    font-size: 10px;
    color: var(--ccg-red); /* Червона стрілка */
    transition: transform 0.4s ease;
}

/* Ховер ефект */
.btn-text-toggle:hover {
    color: var(--ccg-red);
}

/* Стан активної кнопки */
.btn-text-toggle._active .btn-icon {
    transform: rotate(180deg);
}
/* assets/css/style.css */

/* --- CONTACTS SECTION --- */
.home-contacts {
    padding: 80px 0;
    background-color: #fff;
    border-bottom: 1px solid #eee;
}

.section-contacts__inner {
    display: grid;
    grid-template-columns: 1fr; /* Мобільна: 1 колонка */
    gap: 40px;
}

/* На великих екранах - 3 колонки */
@media (min-width: 992px) {
    .section-contacts__inner {
        grid-template-columns: 1.2fr 1fr 1fr; /* Карта трохи ширша */
        gap: 60px;
    }
}

/* Заголовок секції */
.section-contacts__title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 2.5rem;
    text-transform: uppercase;
    margin-bottom: 30px;
    color: var(--ccg-black);
}

/* --- МАПА --- */
.section-contacts__map {
    width: 100%;
    background: #f0f0f0;
}

/* Робимо карту Чорно-Білою (Grayscale) */
.section-contacts__map iframe {
    filter: grayscale(100%);
    transition: filter 0.3s;
}

/* При наведенні можна повертати колір (опціонально) */
.section-contacts__map:hover iframe {
    filter: grayscale(0%);
}

/* --- ТЕКСТОВІ БЛОКИ --- */
.contact-subtitle {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 15px;
    color: var(--ccg-black);
}

.section-contacts__box {
    margin-bottom: 25px;
    font-size: 15px;
    line-height: 1.6;
    color: #555;
}

.contact-address {
    font-style: normal;
    margin-bottom: 5px;
    color: #888;
}

/* Посилання (Телефони/Email) */
.section-contacts__box a {
    color: var(--ccg-black);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

.section-contacts__box a:hover {
    color: var(--ccg-red);
}

.contact-email {
    color: var(--ccg-red) !important; /* Email завжди червоним або акцентним */
    border-bottom: 1px solid rgba(227, 30, 36, 0.3);
}

.contact-line {
    height: 1px;
    background-color: #eee;
    margin: 30px 0;
    width: 100%;
}

.contact-desc {
    font-size: 14px;
    color: #777;
    margin-bottom: 20px;
}

/* --- КНОПКА (Темна версія для білого фону) --- */
.button_dark {
    color: var(--ccg-black) !important; /* Чорний текст */
    padding: 15px 30px;
}

.button_dark .button__shape {
    stroke: var(--ccg-black) !important; /* Чорна рамка */
}

/* Ховер для темної кнопки */
.button_dark:hover {
    color: var(--ccg-red) !important;
}

.button_dark:hover .button__shape {
    stroke: var(--ccg-red) !important;
}
/* assets/css/style.css */

/* --- FOOTER (Light Version) --- */
.site-footer {
    background-color: #111; /* Глибокий темний фон */
    color: #fff;
    padding: 70px 0 40px;
    font-size: 14px;
}

/* Опис під лого */
.footer-desc {
    color: #888;
    line-height: 1.6;
    max-width: 300px;
}

/* Заголовки колонок */
.footer-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 25px;
    color: #fff;
    letter-spacing: 0.5px;
}

/* Навігація */
.footer-menu, .footer-contacts {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu li {
    margin-bottom: 12px;
}

.footer-menu a {
    color: #aaa;
    text-decoration: none;
    transition: all 0.3s;
}

.footer-menu a:hover {
    color: var(--ccg-red);
    padding-left: 5px; /* Ефект зсуву */
}

/* Контакти в футері */
.footer-contacts li {
    margin-bottom: 15px;
    color: #aaa;
    display: flex;
    flex-direction: column;
}

.footer-contacts span {
    font-size: 12px;
    text-transform: uppercase;
    color: #555;
    font-weight: 700;
    margin-bottom: 4px;
}

.footer-contacts a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
}

.footer-contacts a:hover {
    color: var(--ccg-red);
}

/* Copyright */
.footer-copyright {
    color: #444;
    font-size: 12px;
    margin-top: 30px;
    line-height: 1.5;
}

/* Соціальні мережі */
.footer-socials {
    display: flex;
    gap: 15px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255,255,255,0.05); /* Ледь помітний фон */
    color: #fff;
    border-radius: 50%; /* Круглі іконки */
    transition: all 0.3s ease;
}

.social-link:hover {
    background-color: var(--ccg-red);
    color: #fff;
    transform: translateY(-3px);
}

.social-link svg {
    width: 18px;
    height: 18px;
}
/* assets/css/style.css */

/* --- BREADCRUMBS --- */
.site-breadcrumbs {
    padding: 20px 0;
    background: #fff;
    font-size: 14px;
    color: #888;
}
.breadcrumbs a {
    color: #333;
    font-weight: 600;
    text-decoration: none;
}
.breadcrumbs .sep {
    margin: 0 10px;
    color: var(--ccg-red);
}

/* --- SERVICES PAGE SPECIFIC --- */
/* assets/css/style.css */

/* --- SERVICES GRID (4 in a row) --- */
.sw-services {
    padding: 40px 0 80px;
}

.sw-services-head h1 {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    color: var(--ccg-black);
    margin-bottom: 5px;
}

/* СІТКА */
.services-grid-row {
    display: grid;
    grid-template-columns: 1fr; /* Мобільна: 1 колонка */
    gap: 20px; /* Відстань між картками */
}

/* Планшет: 2 колонки */
@media (min-width: 768px) {
    .services-grid-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Десктоп: 4 колонки (ЯК ВИ ПРОСИЛИ) */
@media (min-width: 1200px) {
    .services-grid-row {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- КАРТКА ПОСЛУГИ --- */
.service-grid-item {
    background: #fff;
    transition: transform 0.3s ease;
}

.service-link-wrapper {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

/* Блок картинки */
.service-img-box {
    position: relative;
    width: 100%;
    height: 350px; /* Високі вертикальні картки */
    overflow: hidden;
}

.service-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    filter: grayscale(100%); /* Чорно-білі, як у стилі CCG */
}

/* Оверлей при наведенні */
.service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-view {
    border: 2px solid #fff;
    color: #fff;
    padding: 10px 20px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
}

/* Блок тексту знизу */
.service-info-box {
    padding: 20px 0;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.service-title {
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--ccg-black);
    margin-bottom: 5px;
    transition: color 0.3s;
}

.service-desc {
    font-size: 14px;
    color: #777;
    margin: 0;
}

/* --- HOVER EFFECTS --- */
.service-link-wrapper:hover .service-img-box img {
    transform: scale(1.1); /* Зум картинки */
    filter: grayscale(0%); /* Картинка стає кольоровою */
}

.service-link-wrapper:hover .service-overlay {
    opacity: 1; /* Поява кнопки */
}

.service-link-wrapper:hover .service-title {
    color: var(--ccg-red); /* Заголовок червоніє */
}

/* --- ABOUT INTRO --- */
/* Геро-секція на весь екран */
.about-hero {
    position: relative;
    width: 100%;
    height: 100vh; /* Повна висота екрану */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
}

.about-hero__video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.about-hero__video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Відео заповнює весь простір без деформації */
}

/* Затемнення відео для читабельності тексту */
.about-hero__video-bg::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 50% чорний оверлей */
}

.about-hero__container {
    position: relative;
    z-index: 2; /* Поверх відео */
}

.main-title {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 800;
    text-transform: uppercase;
}

.main-title span {
    color: #E31E24; /* Фірмовий червоний CCG */
}

/* Стилі для карток напрямків */
.direction-card {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    height: 100%;
    border-bottom: 3px solid transparent;
    transition: 0.3s;
}

.direction-card:hover {
    border-bottom-color: #E31E24;
    transform: translateY(-5px);
}

/* Сітка цінностей */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
}

.value-item h3 {
    color: #E31E24;
    font-weight: 700;
    margin-bottom: 15px;
}
/* Філософія */
.philosophy-quote {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1A1A1A;
    border-left: 5px solid #E31E24;
    padding-left: 20px;
    font-style: italic;
}

.philosophy-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

/* Директор */
.about-director {
    background-color: #111; /* Глибокий темний колір для акценту */
    position: relative;
    overflow: hidden;
}

.director-image img {
    max-width: 300px; /* або фіксована ширина, наприклад 400px */
    height: auto;
    border-radius: 30px; /* Величина закруглення */
    object-fit: cover;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1); /* Легка тінь для об'єму */
    border: 1px solid rgba(255,255,255,0.1); /* Тонка рамка */
}

.director-text {
    font-size: 1.25rem;
    line-height: 1.7;
    font-style: italic;
    color: #ddd;
}

.director-info h4 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Адаптивність */
@media (max-width: 768px) {
    .philosophy-quote {
        font-size: 1.4rem;
    }
    .director-text {
        font-size: 1.1rem;
    }
}

.values-dynamic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 25px;
    perspective: 1000px;
}

.dynamic-value-card {
    position: relative;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 40px 30px;
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    z-index: 1;
}

.dynamic-value-card:hover {
    transform: translateY(-10px) rotateX(5deg);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.card-number {
    font-size: 5rem;
    font-weight: 900;
    position: absolute;
    top: -10px;
    right: 0px;
    color: rgba(227, 30, 36, 0.05); /* Ледь помітний червоний номер */
    transition: 0.4s;
}

.dynamic-value-card:hover .card-number {
    color: rgba(227, 30, 36, 0.15);
    transform: scale(1.1);
}

.dynamic-value-card h3 {
    font-weight: 800;
    margin-bottom: 15px;
    color: #1a1a1a;
    position: relative;
}

.dynamic-value-card h3::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 30px;
    height: 3px;
    background: #E31E24;
    transition: 0.4s;
}

.dynamic-value-card:hover h3::before {
    width: 60px;
}

/* Ефект підсвітки, що слідує за мишкою */
.card-glow {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(600px circle at var(--x) var(--y), rgba(227, 30, 36, 0.15), transparent 40%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
}

.dynamic-value-card:hover .card-glow {
    opacity: 1;
}

.contact-hero {
    position: relative;
    padding: 120px 0 60px;
    background-color: #1a1a1a;
    color: #fff;
    overflow: hidden;
    min-height: 40vh;
    display: flex;
    align-items: center;
}

.breadcrumb-nav {
    margin-bottom: 20px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.breadcrumb-nav a {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    transition: 0.3s;
}

.breadcrumb-nav a:hover {
    color: #E31E24;
}

.breadcrumb-nav .sep {
    margin: 0 10px;
    color: rgba(255,255,255,0.2);
}

.contact-hero__title {
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.contact-hero__title span {
    color: #E31E24;
    -webkit-text-stroke: 1px #E31E24;
    -webkit-text-fill-color: transparent;
}

.contact-hero__desc {
    max-width: 500px;
    font-size: 1.1rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
}

/* Великий фоновий текст */
.contact-hero__bg-text {
    position: absolute;
    right: -5%;
    bottom: -10%;
    font-size: 20vw;
    font-weight: 900;
    color: rgba(255,255,255,0.03);
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

/* Корекція для основної секції контактів, щоб вона "наповзала" або стикувалася */
.home-contacts {
    background: #fff;
    padding: 80px 0;
    position: relative;
    z-index: 1;
    border-radius: 40px 40px 0 0; /* Скруглення зверху для сучасного вигляду */
    margin-top: -30px;
}
.vacancies-section {
    background: #fff;
    padding: 80px 0;
    margin-top: -40px;
    border-radius: 40px 40px 0 0;
    position: relative;
    z-index: 2;
}

/* Картки переваг */
.benefit-item {
    padding: 30px;
    background: #f9f9f9;
    border-radius: 20px;
    height: 100%;
    transition: 0.3s;
}

.benefit-item:hover {
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.benefit-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

/* Список вакансій */
.vacancy-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    margin-bottom: 20px;
    transition: 0.3s;
}

.vacancy-card:hover {
    border-color: #E31E24;
    box-shadow: 0 5px 20px rgba(227, 30, 36, 0.05);
}

.vacancy-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: #1a1a1a;
}

.vacancy-tags {
    margin-bottom: 10px;
}

.tag {
    display: inline-block;
    padding: 4px 12px;
    background: #f0f0f0;
    border-radius: 50px;
    font-size: 0.8rem;
    margin-right: 8px;
    color: #666;
}

.vacancy-salary {
    font-weight: 700;
    color: #E31E24;
}

/* Адаптивність */
@media (max-width: 768px) {
    .vacancy-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

.vacancy-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vacancy-card:hover {
    background: #fff;
    border-color: #E31E24;
    transform: translateX(10px); /* Легкий зсув вправо при наведенні */
    box-shadow: 0 10px 30px rgba(227, 30, 36, 0.1);
}

.vacancy-salary {
    font-size: 1.2rem;
    font-weight: 800;
    color: #E31E24;
    margin-top: 10px;
}

/* Корекція лінії */
.contact-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, #eee, transparent);
}
.button_red.btn-animated {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background: #E31E24;
    border: none;
    border-radius: 12px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 4px 15px rgba(227, 30, 36, 0.3);
}

.button_red.btn-animated:hover {
    background: #c01a1f;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(227, 30, 36, 0.5);
}

.button__icon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.button_red.btn-animated:hover .button__icon {
    transform: translateX(5px); /* Стрілка рухається вправо */
}

/* Ефект "відблиску", що пробігає по кнопці */
.button_red.btn-animated::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(30deg);
    transition: all 0.6s ease;
}

.button_red.btn-animated:hover::after {
    left: 120%;
}
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: rgba(26, 26, 26, 0.15); /* Темний фон з прозорістю */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 12px; /* У вашому стилі закруглення */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.back-to-top svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.back-to-top._active {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: #E31E24; /* Фірмовий червоний при наведенні */
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(227, 30, 36, 0.4);
    border-color: #E31E24;
}

.back-to-top:hover svg {
    transform: translateY(-3px); /* Стрілка трохи підстрибує вгору */
}

/* Адаптивність для мобільних */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }
}

/* Покращення карток портфоліо */
.modern-card {
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modern-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(227, 30, 36, 0.1);
}

.portfolio-card__image-wrap {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.portfolio-card__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.6s ease;
}

.modern-card:hover img {
    transform: scale(1.1);
}

.portfolio-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.4s;
    backdrop-filter: blur(4px);
}

.modern-card:hover .portfolio-card__overlay {
    opacity: 1;
}

.btn-case {
    padding: 12px 25px;
    border: 1px solid #fff;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.portfolio-article__content {
    padding: 25px;
}

.portfolio-article__content h4 {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 10px 0;
    text-transform: uppercase;
}

.category-tag {
    font-size: 0.8rem;
    color: #E31E24;
    font-weight: 700;
    text-transform: uppercase;
}

.time {
    font-size: 0.9rem;
    color: #aaa;
    font-weight: 600;
}

.portfolio-posts__categories {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

.categories-list {
    display: flex;
    list-style: none;
    padding: 10px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 50px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.categories-list__link {
    display: block;
    padding: 10px 25px;
    border-radius: 40px;
    text-decoration: none;
    color: #1a1a1a;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.categories-list__link.current,
.categories-list__link:hover {
    background: #E31E24;
    color: #fff;
    box-shadow: 0 5px 15px rgba(227, 30, 36, 0.3);
}

.portfolio-dynamic-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 колонки */
    gap: 30px;
}

.portfolio-item {
    background: #fdfdfd;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Основна сітка */
.portfolio-dynamic-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding-top: 50px;
}

/* Базова картка (Тип 1 та 3: Зображення зверху) */
.card-standard {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
}

.card-standard .portfolio-card__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-standard .portfolio-card__media {
    width: 100%;
    height: 380px; /* Фіксована висота для однакового вигляду в рядку */
    overflow: hidden;
}

.card-standard .portfolio-card__info {
    padding: 30px;
    order: 2; /* Текст другим */
    flex-grow: 1;
}

/* Тип 2: Текст зверху (is-inverted) */
.card-standard.is-inverted .portfolio-card__media {
    order: 2; /* Зображення вниз */
}

.card-standard.is-inverted .portfolio-card__info {
    order: 1; /* Текст вгору */
}

/* Четверта картка (Чорна, 100% ширина, 50/50) */
.card-full-width {
    grid-column: span 3;
    background: #111;
    color: #fff;
    border-radius: 25px;
    overflow: hidden;
    margin: 20px 0;
}

.card-full-width .portfolio-card__inner {
    display: flex;
    flex-direction: row; /* Зліва зображення, справа текст */
    min-height: 500px;
}

.card-full-width .portfolio-card__media {
    flex: 0 0 50%;
    height: auto; /* Висота підлаштовується під контент або min-height картки */
    min-height: 500px;
}

.card-full-width .portfolio-card__info {
    flex: 0 0 50%; /* Рівно 50% */
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.card-full-width .card-title {
    color: #fff;
    font-size: 3rem;
    line-height: 1.1;
}

.card-full-width .card-year {
    color: #E31E24;
    font-size: 1.2rem;
    margin-bottom: 10px;
    display: block;
}
/* Головне правило для всіх зображень портфоліо */
.portfolio-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Зображення заповнює площу, не розтягуючись */
    object-position: center; /* Центрування кадру */
    display: block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ефект при наведенні */
.portfolio-item:hover .portfolio-card__media img {
    transform: scale(1.08); /* Легкий зум без виходу за межі */
}

/* Адаптивність для мобільних */
@media (max-width: 992px) {
    .portfolio-dynamic-wrapper {
        grid-template-columns: 1fr 1fr;
    }
    .card-full-width { grid-column: span 2; }
}

@media (max-width: 768px) {
    .portfolio-dynamic-wrapper {
        grid-template-columns: 1fr;
    }
    .card-full-width { grid-column: span 1; }
    .card-full-width .portfolio-card__inner { flex-direction: column; }
    .card-full-width .portfolio-card__media { height: 300px; }
}

/* Базова кнопка для світлого фону */
/* 1. Базові налаштування кнопки */
.button-case {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Розміри */
    height: 50px;          /* Оптимальна висота для кліку */
    min-width: 140px;      /* Фіксована мінімальна ширина для солідності */
    padding: 0 30px;       /* Відступи з боків */
    /* Типографіка */
    font-family: inherit;  /* Ваш основний шрифт */
    font-size: 12px;       /* Акуратний розмір */
    font-weight: 800;      /* Жирний шрифт для контрасту */
    text-transform: uppercase;
    letter-spacing: 1.5px; /* "Повітря" між літерами */
    line-height: 1;
    
    /* Скидання стилів */
    background: transparent;
    border: none;
    cursor: pointer;
    overflow: hidden;      /* Щоб анімація не вилазила */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* Дуже плавний перехід */
    z-index: 1;
}

/* 2. Текст всередині */
.button-case .button__text {
    position: relative;
    z-index: 2;
    color: #1a1a1a;        /* Чорний за замовчуванням */
    transition: color 0.3s ease;
}

/* 3. SVG ОБВОДКА (Ключовий момент) */
.button-case .button__svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* Налаштування лінії для БІЛИХ карток */
.button-case .button__shape {
    stroke: #1a1a1a;         /* <--- ЧОРНА ОБВОДКА */
    stroke-width: 1px;       /* Товщина лінії */
    fill: transparent;       /* Всередині пусто */
    transition: all 0.4s ease;
    /* Якщо була анімація dasharray, скидаємо її, щоб бачити суцільну рамку */
    stroke-dasharray: none; 
    stroke-dashoffset: 0;
}

/* 4. Стан HOVER (Наведення) */
.button-case:hover {
    background-color: #E31E24; /* Фірмовий червоний фон */
    box-shadow: 0 10px 20px rgba(227, 30, 36, 0.25); /* Легка червона тінь */
    transform: translateY(-2px); /* Легкий підйом кнопки */
}

/* Текст стає білим при наведенні */
.button-case:hover .button__text {
    color: #ffffff !important;
}

/* При наведенні лінія SVG стає прозорою або білою (щоб не конфліктувати з фоном) */
.button-case:hover .button__shape {
    stroke: rgba(255, 255, 255, 0.5); 
    stroke-width: 0; /* Можна прибрати обводку, бо є заливка */
}

/* --- АДАПТАЦІЯ ДЛЯ ЧОРНОЇ КАРТКИ --- */

/* Якщо кнопка лежить на чорному фоні (клас .card-full-width) */
.card-full-width .button-case .button__text {
    color: #ffffff; /* Текст білий */
}

.card-full-width .button-case .button__shape {
    stroke: rgba(255, 255, 255, 0.3); /* Обводка світла */
}

/* Hover для чорної картки такий самий - червоний фон, білий текст */
.card-full-width .button-case:hover {
    background-color: #E31E24;
}

/* Контейнер модального вікна */
/* 1. Контейнер - Flexbox для поділу навпіл */
.modal-case-popup {
    width: 90vw !important;
    height: 90vh !important;
    max-width: 1400px !important;
    padding: 0 !important;
    border-radius: 0 !important; /* Гострі кути для стилю */
    background: #fff; /* Фон контейнера */
    display: flex !important;
    flex-direction: row;
    overflow: hidden;
    box-shadow: 0 50px 100px rgba(0,0,0,0.3);
}

/* 2. Ліва частина - ЗОБРАЖЕННЯ (60% ширини) */
.modal-image-side {
    flex: 0 0 60%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.modal-image-side img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Заповнює весь простір */
    transition: transform 1s ease;
}

/* Ефект повільного зуму картинки при відкритті */
.modal-case-popup:hover .modal-image-side img {
    transform: scale(1.05);
}

/* 3. Права частина - КОНТЕНТ (40% ширини) */
.modal-content-side {
    flex: 0 0 40%;
    height: 100%;
    padding: 60px 50px;
    background: #fff; /* Чистий білий фон */
    overflow-y: auto; /* Скрол для тексту */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Центрування контенту по вертикалі */
}

/* 4. Типографіка (Темна на білому) */
.modal-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    color: #1a1a1a;
    text-transform: uppercase;
    margin-bottom: 30px;
    letter-spacing: -1px;
}

.section-label {
    font-size: 0.8rem;
    color: #E31E24; /* Акцент */
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

/* Список робіт */
.work-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 50px;
}

.work-item {
    font-size: 1.1rem;
    color: #444;
    padding-left: 0;
    font-weight: 600;
    position: relative;
    padding-left: 25px;
}

/* Маркер списку замість бордера - червона риска */
.work-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 12px;
    height: 2px;
    background: #E31E24;
}

/* Футер з інфо */
.modal-info-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding-top: 30px;
    border-top: 2px solid #f0f0f0;
}

.info-block span {
    font-size: 0.75rem;
    color: #999;
    text-transform: uppercase;
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
}

.info-block p {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0;
}

/* Адаптивність */
@media (max-width: 1024px) {
    .modal-case-popup {
        flex-direction: column; /* Вертикальне розташування */
        height: auto !important;
        max-height: 95vh;
    }
    .modal-image-side {
        flex: 0 0 40%; /* Картинка зверху */
        height: 300px;
    }
    .modal-content-side {
        flex: 1;
        padding: 40px 30px;
    }
    .modal-title { font-size: 2.2rem; }
}
/* Сітка новин */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

/* Картка новини */
.news-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.news-card__link-wrap {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Зображення та Дата */
.news-card__image {
    position: relative;
    height: 240px;
    overflow: hidden;
}

.news-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Наліпка дати */
.news-date {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    min-width: 50px;
}

.news-date__day {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1;
}

.news-date__month {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #E31E24;
    font-weight: 700;
    margin-top: 2px;
}

/* Контент */
.news-card__content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.news-meta {
    margin-bottom: 10px;
}

.news-year {
    font-size: 0.8rem;
    color: #999;
    font-weight: 600;
}

.news-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 15px;
    line-height: 1.3;
    transition: color 0.3s ease;
    /* Обрізаємо заголовок, якщо він дуже довгий (2 рядки) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-desc {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
    /* Обрізаємо текст опису (3 рядки) */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Футер картки */
.news-footer {
    margin-top: auto; /* Притискає кнопку до низу */
}

.read-more {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: #1a1a1a;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.read-more svg {
    margin-left: 10px;
    transition: transform 0.3s ease;
}

/* Ефекти наведення */
.news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.news-card:hover .news-card__image img {
    transform: scale(1.05);
}

.news-card:hover .news-title {
    color: #E31E24;
}

.news-card:hover .read-more {
    color: #E31E24;
}

.news-card:hover .read-more svg {
    transform: translateX(5px);
}

/* Адаптивність */
@media (max-width: 992px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .news-grid { grid-template-columns: 1fr; }
    .news-card__image { height: 200px; }
}

/* --- DEV INTRO SECTION --- */
.dev-intro__wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.dev-content-block p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #444;
    margin-bottom: 20px;
}

.dev-features-list {
    list-style: none;
    padding: 0;
    margin-top: 30px;
}

.dev-features-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    font-weight: 700;
    color: #1a1a1a;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.dev-features-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 2px;
    background: #E31E24; /* Червона риска */
}

.dev-intro__image {
    position: relative;
    height: 500px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.15);
}

.dev-intro__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- DEV STAGES GRID --- */
.section-bg-light {
    background-color: #f9f9f9; /* Легкий сірий фон для контрасту */
}

.section-desc {
    font-size: 1.2rem;
    color: #666;
    max-width: 600px;
}

.dev-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.dev-card {
    background: #fff;
    padding: 40px 30px;
    border: 1px solid #eee;
    transition: all 0.4s ease;
    position: relative;
    border-radius: 4px; /* Трохи строгіші кути для девелопменту */
    overflow: hidden;
}

/* Номер етапу (великий і напівпрозорий) */
.dev-card__number {
    font-size: 4rem;
    font-weight: 900;
    color: #f0f0f0; /* Дуже світлий сірий */
    position: absolute;
    top: 10px;
    right: 20px;
    line-height: 1;
    transition: all 0.4s ease;
}

.dev-card__title {
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
    color: #1a1a1a;
}

.dev-card__desc {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    position: relative;
    z-index: 2;
}

/* HOVER EFFECTS */
.dev-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-color: #E31E24;
}

.dev-card:hover .dev-card__number {
    color: rgba(227, 30, 36, 0.1); /* Стає червонуватим */
    transform: scale(1.2);
}

.dev-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 4px;
    background: #E31E24;
    transition: width 0.4s ease;
}

.dev-card:hover::after {
    width: 100%;
}

/* --- CTA BOX --- */
.rounded-box {
    border-radius: 20px;
}

.bg-black {
    background: #111;
}

.text-white {
    color: #fff;
}

/* АДАПТИВНІСТЬ */
@media (max-width: 992px) {
    .dev-intro__wrapper {
        grid-template-columns: 1fr;
    }
    .dev-intro__image {
        height: 350px;
        order: -1; /* Картинка зверху на мобільному */
        margin-bottom: 30px;
    }
    .dev-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .dev-grid {
        grid-template-columns: 1fr;
    }
    .contact-hero__title {
        font-size: 2.5rem;
    }
}

/* =========================================
   DEV PAGE - NEW INTRO BANNER
   ========================================= */

/* Основна обгортка банера */
.dev-banner__wrapper {
    position: relative;
    /* Висота банера. Можна збільшити до 700px для більшого драматизму */
    height: 600px; 
    border-radius: 30px; /* Сильне заокруглення кутів */
    overflow: hidden; /* Обрізаємо все, що вилазить за радіус */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2); /* Глибока тінь */
    /* Центрування контенту всередині */
    display: flex;
    align-items: center;
}

/* 1. Фонове зображення */
.dev-banner__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.dev-banner__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Зображення заповнює весь блок без спотворень */
    object-position: center;
    transition: transform 1s ease; /* Плавний зум при наведенні */
}

/* Ефект легкого зуму при наведенні на весь блок */
.dev-banner__wrapper:hover .dev-banner__bg img {
    transform: scale(1.05);
}

/* 2. Шар затемнення (Overlay) */
.dev-banner__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Чорний колір з прозорістю 60% */
    z-index: 2;
    /* Можна додати легкий блюр для ефекту скла */
    /* backdrop-filter: blur(3px); */ 
}

/* 3. Контентний блок */
.dev-banner__content {
    position: relative;
    z-index: 3; /* Поверх усього */
    padding: 60px;
    max-width: 700px; /* Обмежуємо ширину тексту для зручності читання */
}

/* --- Типографіка для темного фону --- */

/* Білий заголовок */
.text-white {
    color: #ffffff !important;
}

/* Білий текст з легкою прозорістю (для абзаців) */
.text-white-opacity p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 25px;
}

/* Список на темному фоні */
.dev-features-list.list-white {
    margin-top: 35px;
}

.dev-features-list.list-white li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    font-weight: 700;
    color: #ffffff; /* Білий текст списку */
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

/* Червона риска залишається (вона вже прописана в глобальних стилях) */
.dev-features-list li::before {
    background: #E31E24; 
}

/* --- АДАПТИВНІСТЬ --- */
@media (max-width: 992px) {
    .dev-banner__wrapper {
        height: auto; /* На планшетах висота по контенту */
        min-height: 500px;
    }
    .dev-banner__content {
        padding: 40px;
    }
}

@media (max-width: 768px) {
    .dev-banner__wrapper {
        border-radius: 20px; /* Трохи менший радіус на мобільному */
    }
    .dev-banner__content {
        padding: 30px 25px;
    }
    .section-title.text-white {
        font-size: 2rem; /* Зменшуємо заголовок */
    }
}
/* =========================================
   SPECIALIZATION SECTION (DARK THEME)
   ========================================= */

.section-bg-dark {
    background-color: #1a1a1a; /* Темно-сірий фон секції */
    color: #fff;
}

.text-gray {
    color: #aaaaaa;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* СІТКА 2x2 */
.specialization-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px; /* Відступи між картками */
    margin-top: 50px;
}

/* КАРТКА СПЕЦІАЛІЗАЦІЇ */
.spec-card {
    background: rgba(255, 255, 255, 0.03); /* Дуже легка прозорість */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Тонка сіра рамка */
    padding: 40px;
    position: relative;
    transition: all 0.4s ease;
    overflow: hidden;
    height: 100%; /* Однаковий розмір карток */
}

/* Іконка SVG */
.spec-card__icon {
    color: #666; /* Сірий колір іконки у спокої */
    margin-bottom: 25px;
    transition: all 0.4s ease;
}

/* Заголовок картки */
.spec-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Текст опису */
.spec-card__text {
    font-size: 1rem;
    color: #999;
    line-height: 1.6;
    margin-bottom: 0;
    transition: color 0.4s ease;
}

/* Декоративна лінія внизу */
.spec-card__line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: #E31E24; /* Червоний акцент */
    transition: width 0.4s ease;
}

/* --- ЕФЕКТИ HOVER --- */
.spec-card:hover {
    background: rgba(255, 255, 255, 0.08); /* Трохи світлішає фон */
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-5px);
}

.spec-card:hover .spec-card__icon {
    color: #E31E24; /* Іконка стає червоною */
    transform: scale(1.1);
}

.spec-card:hover .spec-card__text {
    color: #ddd; /* Текст стає читабельнішим */
}

.spec-card:hover .spec-card__line {
    width: 100%; /* Червона лінія виїжджає на всю ширину */
}

/* --- АДАПТИВНІСТЬ --- */
@media (max-width: 992px) {
    .specialization-grid {
        gap: 20px;
    }
    .spec-card {
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .specialization-grid {
        grid-template-columns: 1fr; /* Одна колонка на мобільному */
    }
    .section-desc {
        font-size: 1rem;
    }
}
/* =========================================
   DEV ATTENTION SECTION (Technical Grid)
   ========================================= */
.attention-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.attention-item {
    background: #fff;
    padding: 30px 20px;
    border-left: 1px solid #eee; /* Тонка лінія зліва */
    transition: all 0.3s ease;
}

.att-icon {
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.att-title {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: #1a1a1a;
    text-transform: uppercase;
}

.att-desc {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
}

/* Hover Effects */
.attention-item:hover {
    border-left: 4px solid #E31E24; /* Потовщення червоної лінії */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    background: #fafafa;
}

.attention-item:hover .att-icon {
    transform: scale(1.1);
}

/* =========================================
   DEV FINANCE SECTION (Split Layout)
   ========================================= */
.section-bg-gray {
    background-color: #f4f4f4; /* Світло-сірий фон для контрасту */
}

.finance-wrapper {
    display: flex;
    align-items: center;
    gap: 60px;
}

/* Image Side */
.finance-image {
    flex: 1;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.finance-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Бейдж 100% Прозорість */
.finance-badge {
    position: absolute;
    bottom: 30px;
    right: 30px;
    background: #E31E24;
    color: #fff;
    padding: 20px;
    text-align: center;
    min-width: 120px;
    box-shadow: 0 10px 20px rgba(227, 30, 36, 0.4);
}

.badge-value {
    display: block;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
}

.badge-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 700;
}

/* Text Side */
.finance-content {
    flex: 1;
}

.finance-subtitle {
    font-size: 1.3rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 25px;
    margin-top: -10px;
}

.finance-text-block p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #333;
    margin-bottom: 20px;
}

/* АДАПТИВНІСТЬ */
@media (max-width: 992px) {
    .attention-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .finance-wrapper {
        flex-direction: column; /* Вертикальне розташування */
    }
    .finance-image {
        width: 100%;
        height: 300px;
    }
}

@media (max-width: 600px) {
    .attention-grid {
        grid-template-columns: 1fr;
    }
    .finance-badge {
        padding: 15px;
        bottom: 20px;
        right: 20px;
    }
    .badge-value { font-size: 1.5rem; }
}

/* =========================================
   CONSTRUCTION PAGE STYLES
   ========================================= */

/* --- Intro Section --- */
.lead-text {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.6;
    color: #333;
}

.constr-types {
    border-left: 2px solid #E31E24;
    padding-left: 25px;
}

.type-item {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
}

.check-icon {
    color: #E31E24;
    font-weight: 900;
    margin-right: 10px;
    line-height: 1.5;
}

.constr-image-wrapper {
    position: relative;
    border-radius: 20px 0 20px 0; /* Асиметричні кути */
    overflow: hidden;
    height: 500px;
    box-shadow: 20px 20px 0px rgba(227, 30, 36, 0.1); /* Декоративна тінь */
}

.constr-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Бейдж на фото */
.constr-experience-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #1a1a1a;
    color: #fff;
    padding: 20px 30px;
    border-top-right-radius: 20px;
}

.exp-year {
    display: block;
    font-weight: 900;
    font-size: 1.5rem;
    color: #E31E24;
    text-transform: uppercase;
}

.exp-text {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* --- Business Section (Dark) --- */
.business-text {
    font-size: 1.2rem;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
}

.business-divider {
    height: 1px;
    width: 100px;
    background: #E31E24;
    margin: 40px auto;
}

/* --- Advantages Grid --- */
.adv-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.adv-card {
    background: #fff;
    padding: 40px 30px;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
}

.adv-icon {
    margin-bottom: 25px;
    background: rgba(227, 30, 36, 0.05); /* Дуже світлий червоний фон */
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.adv-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.adv-card p {
    color: #666;
    line-height: 1.6;
}

/* Hover Effects */
.adv-card:hover {
    transform: translateY(-5px);
    border-bottom-color: #E31E24;
}

.adv-card:hover .adv-icon {
    background: #E31E24;
}

.adv-card:hover .adv-icon svg {
    stroke: #fff; /* Іконка стає білою */
}

/* Адаптивність */
@media (max-width: 992px) {
    .adv-grid-3 {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .constr-image-wrapper {
        height: 350px;
        margin-top: 30px;
    }
}

/* =========================================
   NEW PREMIUM WORK TYPES (DARK MODE)
   ========================================= */

.section-bg-dark {
    background-color: #111; /* Глибокий чорний */
    color: #fff;
}

/* --- Scope Grid (Верхня частина) --- */
.scope-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1px; /* Відступ для створення ліній */
    background: rgba(255,255,255,0.1); /* Колір ліній сітки */
    border: 1px solid rgba(255,255,255,0.1);
}

.scope-item {
    background: #111; /* Повертаємо чорний фон */
    flex: 1 0 24%; /* 4 колонки */
    padding: 20px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #888;
    transition: all 0.3s ease;
    cursor: default;
}

.scope-item:hover {
    color: #fff;
    background: #1a1a1a;
}

/* --- Technical List (Основна частина) --- */
.technical-list {
    display: flex;
    flex-direction: column;
}

.tech-item {
    display: flex;
    align-items: flex-start; /* Вирівнювання по верху */
    padding: 40px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Тонка лінія */
    transition: all 0.4s ease;
    cursor: default;
}

/* Номер (01, 02) */
.tech-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: #333; /* Темно-сірий, щоб не відволікати */
    margin-right: 60px;
    min-width: 60px;
    line-height: 1;
    font-family: 'Manrope', sans-serif; /* Якщо є */
    transition: color 0.3s ease;
}

/* Контент */
.tech-content {
    flex-grow: 1;
    padding-right: 40px;
}

.tech-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #fff;
    text-transform: uppercase;
}

.tech-desc {
    font-size: 1.05rem;
    color: #888;
    line-height: 1.6;
    max-width: 800px;
    margin: 0;
    transition: color 0.3s ease;
}

/* Стрілка справа */
.tech-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.tech-arrow {
    font-size: 1.2rem;
    color: #fff;
    transition: transform 0.3s ease;
}

/* --- HOVER EFFECTS --- */
.tech-item:hover {
    background: rgba(255, 255, 255, 0.02); /* Легке підсвічування фону */
    padding-left: 20px; /* Зсув вправо */
}

.tech-item:hover .tech-number {
    color: #E31E24; /* Номер стає червоним */
}

.tech-item:hover .tech-desc {
    color: #ccc; /* Текст світлішає */
}

.tech-item:hover .tech-action {
    border-color: #E31E24;
    background: #E31E24;
}

.tech-item:hover .tech-arrow {
    transform: translateX(3px); /* Стрілка рухається */
}

/* Акцент на Капітальний та Реконструкцію */
.tech-number.text-red {
    color: rgba(227, 30, 36, 0.5);
}
.tech-item.highlight-item:hover .tech-number.text-red {
    color: #E31E24;
}

/* АДАПТИВНІСТЬ */
@media (max-width: 992px) {
    .scope-item { flex: 1 0 49%; } /* 2 колонки */
    .tech-title { font-size: 1.5rem; }
}

@media (max-width: 768px) {
    .tech-item { flex-wrap: wrap; position: relative; }
    .tech-number { margin-bottom: 15px; font-size: 2rem; }
    .tech-action { position: absolute; top: 40px; right: 0; border: none; }
    .tech-content { padding-right: 0; }
    .scope-item { flex: 1 0 100%; border-bottom: 1px solid #222; }
}
/* =========================================
   STAGES & INFO SECTIONS (PREMIUM LIGHT)
   ========================================= */

.section-bg-white { background: #fff; }
.section-bg-light { background: #f9f9f9; }

/* --- 1. STAGES TIMELINE (Вертикальна лінія) --- */
.stages-timeline {
    position: relative;
    padding: 20px 0;
    max-width: 900px;
    margin: 0 auto;
}

/* Центральна червона лінія */
.stages-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40px; /* Відступ зліва для лінії */
    width: 2px;
    background: #E31E24;
    opacity: 0.2;
}

.stage-item {
    display: flex;
    margin-bottom: 50px;
    position: relative;
}

.stage-item:last-child { margin-bottom: 0; }

/* Маркер (Номер 01, 02) */
.stage-marker {
    width: 80px;
    height: 80px;
    background: #fff;
    border: 2px solid #E31E24;
    border-radius: 50%;
    color: #E31E24;
    font-size: 1.8rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 2; /* Поверх лінії */
    box-shadow: 0 10px 20px rgba(227, 30, 36, 0.15);
    transition: all 0.3s ease;
}

.stage-content {
    margin-left: 40px;
    padding-top: 10px;
}

.stage-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #1a1a1a;
}

.stage-content p {
    color: #555;
    line-height: 1.6;
    font-size: 1.05rem;
}

/* Hover Effect */
.stage-item:hover .stage-marker {
    background: #E31E24;
    color: #fff;
    transform: scale(1.1);
}

/* --- 2. INFO SECTION (Матеріали та Кошторис) --- */
.info-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 30px;
}

.sub-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #333;
    border-left: 3px solid #E31E24;
    padding-left: 15px;
}

.text-block p {
    color: #666;
    line-height: 1.7;
}

.custom-list {
    list-style: none;
    padding: 0;
}

.custom-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    color: #555;
}

.custom-list li::before {
    content: '•';
    color: #E31E24;
    font-size: 1.5rem;
    position: absolute;
    left: 0;
    top: -5px;
}

/* Червоний блок Кошторису */
.estimate-box {
    background: #E31E24;
    padding: 50px 40px;
    border-radius: 20px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(227, 30, 36, 0.3);
}

.estimate-icon {
    margin-bottom: 25px;
    color: #fff;
    opacity: 0.8;
}

.estimate-title {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: #fff;
}

.estimate-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255,255,255, 0.9);
    margin-bottom: 30px;
}

.estimate-text strong {
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.5);
}

/* Біла кнопка в червоному блоці */
.button_white1 {
    background: #fff;
    color: #E31E24;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 30px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
}

.button_white1:hover {
    background: #1a1a1a;
    color: #fff;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* --- 3. WHY US SECTION --- */
.why-us-wrapper {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    border: 2px solid #f0f0f0;
    padding: 60px;
    border-radius: 0; /* Строгий квадратний стиль */
    position: relative;
}

.why-us-wrapper::before, .why-us-wrapper::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #E31E24;
    transition: all 0.4s ease;
}

.why-us-wrapper::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.why-us-wrapper::after { bottom: -2px; right: -2px; border-left: none; border-top: none; }

.why-title {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 30px;
}

.why-content p {
    font-size: 1.2rem;
    color: #444;
    line-height: 1.7;
}

/* АДАПТИВНІСТЬ */
@media (max-width: 768px) {
    .stages-timeline::before { left: 20px; }
    .stage-marker { width: 40px; height: 40px; font-size: 1rem; }
    .stage-content { margin-left: 20px; }
    .estimate-box { padding: 30px; }
    .why-us-wrapper { padding: 30px 20px; }
}

/* =========================================
   FAQ ACCORDION STYLES
   ========================================= */

.faq-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 0;
}

/* Кнопка-заголовок */
.faq-trigger {
    width: 100%;
    background: none;
    border: none;
    padding: 25px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-question {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a1a1a;
    padding-right: 20px;
    transition: color 0.3s ease;
}

/* Іконка (Плюс) */
.faq-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    transition: transform 0.3s ease, color 0.3s ease;
    flex-shrink: 0; /* Щоб іконку не сплющувало */
}

/* Прихований контент */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.faq-body {
    padding-bottom: 30px;
    color: #555;
    line-height: 1.6;
    font-size: 1.05rem;
}

/* --- ACTIVE STATE (Коли відкрито) --- */

/* Зміна кольору тексту */
.faq-item.active .faq-question {
    color: #E31E24;
}

/* Обертання іконки (Плюс стає Хрестиком) */
.faq-item.active .faq-icon {
    transform: rotate(45deg); /* Обертаємо плюс на 45 градусів */
    color: #E31E24;
}

/* Бордер знизу теж стає червоним */
.faq-item.active {
    border-bottom-color: #E31E24;
}

/* Hover ефекти */
.faq-trigger:hover .faq-question {
    color: #E31E24;
}

/* Адаптивність */
@media (max-width: 768px) {
    .faq-question { font-size: 1.1rem; }
}

/* =========================================
/* =========================================
   ARCHITECTURE PAGE GLOBAL STYLES
   ========================================= */

/* Типографіка та загальні елементи */
.text-gray { color: #888; }
.lead-text { font-size: 1.3rem; font-weight: 500; line-height: 1.5; color: #1a1a1a; }
.description-text { font-size: 1.1rem; color: #555; line-height: 1.7; }

/* Зображення з закругленням (Split Section) */
.arch-image-wrap {
    border-radius: 30px 0 30px 0;
    overflow: hidden;
    box-shadow: 20px 20px 0 rgba(0,0,0,0.05);
}
.arch-image-wrap img { width: 100%; height: auto; display: block; }

/* --- SERVICES GRID (MASONRY LOOK) --- */
.arch-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.arch-card {
    background: #fff;
    border: 1px solid #eee;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
}

.arch-card__img { height: 250px; overflow: hidden; }
.arch-card__img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s ease;
}

.arch-card__content { padding: 30px; flex-grow: 1; }
.arch-card__header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 15px;
}
.arch-card__title { font-size: 1.2rem; font-weight: 800; text-transform: uppercase; margin: 0; }
.arch-card__num { font-size: 1.5rem; font-weight: 900; color: #E31E24; }
.arch-card__desc { color: #666; line-height: 1.6; }

/* Hover Effects for Grid */
.arch-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.1); }
.arch-card:hover .arch-card__img img { transform: scale(1.1); }

/* --- CHOOSE GRID --- */
.choose-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.choose-item { padding: 30px; background: #fff; border-left: 3px solid #E31E24; box-shadow: 0 5px 20px rgba(0,0,0,0.05); }
.choose-item h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 15px; }
.choose-item p { color: #555; margin: 0; line-height: 1.6; }


/* =========================================
   PREMIUM PROCESS SLIDER (DARK THEME)
   ========================================= */
/* =========================================
   PROCESS TIMELINE (SINGLE ROW)
   ========================================= */

.section-bg-dark {
    background-color: #0b0b0b;
    color: #fff;
    overflow: hidden;
}

.process-row {
    display: grid;
    /* Рівно 5 колонок */
    grid-template-columns: repeat(5, 1fr); 
    gap: 20px;
    position: relative;
    padding: 20px 0;
}

/* Окремий крок */
.proc-step {
    position: relative;
    text-align: center; /* Центруємо все */
    group: transition; /* Для ховеру */
}

/* Верхня частина (Номер, Іконка, Лінія) */
.proc-step-top {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

/* Номер зверху */
.proc-num {
    font-size: 0.9rem;
    font-weight: 700;
    color: #555;
    margin-bottom: 10px;
    font-family: 'Manrope', sans-serif;
    transition: color 0.3s ease;
}

/* Іконка в кружечку */
.proc-icon-box {
    width: 70px;
    height: 70px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2; /* Поверх лінії */
    transition: all 0.4s ease;
}

.proc-icon-box img {
    width: 30px;
    height: 30px;
    filter: invert(1);
    opacity: 0.6;
    transition: all 0.4s ease;
}

/* Сполучна лінія (Connector) */
.proc-connector {
    position: absolute;
    top: 50%; /* Центр іконки */
    left: 50%; /* Починається від центру поточної іконки */
    width: 100%; /* Тягнеться до наступної */
    height: 1px;
    background: #333;
    z-index: 1;
    transform: translateY(10px); /* Коригування під центр іконки */
}

/* Прибираємо лінію у останнього елемента */
.proc-step:last-child .proc-connector {
    display: none;
}

/* Контент знизу */
.proc-step-content {
    padding: 0 10px;
}

.proc-title {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.proc-desc {
    color: #777;
    font-size: 0.9rem;
    line-height: 1.4;
    transition: color 0.3s ease;
}

/* --- HOVER EFFECTS (Активний стан) --- */
.proc-step:hover .proc-icon-box {
    background: #E31E24;
    border-color: #E31E24;
    box-shadow: 0 0 20px rgba(227, 30, 36, 0.4);
    transform: translateY(-5px);
}

.proc-step:hover .proc-icon-box img {
    opacity: 1;
    filter: brightness(0) invert(1); /* Біла іконка */
}

.proc-step:hover .proc-num {
    color: #E31E24;
}

.proc-step:hover .proc-title {
    color: #fff;
}

.proc-step:hover .proc-desc {
    color: #aaa;
}

/* Якщо наводимо на елемент, лінія перед ним (або після) може підсвічуватись - опціонально */

/* --- АДАПТИВНІСТЬ --- */
@media (max-width: 992px) {
    /* На планшетах - скрол по горизонталі */
    .process-row {
        display: flex;
        overflow-x: auto;
        padding-bottom: 20px;
        gap: 0;
    }
    .proc-step {
        min-width: 200px; /* Фіксована ширина картки */
        flex-shrink: 0;
    }
    /* Лінія на мобільному має бути фіксована */
    .proc-connector {
        width: 200px; 
    }
}

/* =========================================
   VISUAL STEP SECTION (PUZZLE LAYOUT)
   ========================================= */

.visual-step-section {
    overflow: hidden; /* Ховаємо все, що вилазить за межі */
    padding-bottom: 100px;
}

.step-wrapper {
    position: relative;
    max-width: 1600px; /* Обмежуємо максимальну ширину для великих екранів */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* --- ВЕРХНІЙ БЛОК (ЛІВИЙ) --- */
.step-top-box {
    width: 50%; /* Займає половину екрану */
    position: relative;
    z-index: 1;
}

.step-top-box .step-img-container {
    height: 600px;
    border-radius: 0 30px 30px 0; /* Закруглення справа */
    overflow: hidden;
    position: relative;
}

.step-top-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- ОВЕРЛЕЙ (КОЛА І ТЕКСТ) --- */
.step-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.2); /* Легке затемнення */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

/* Декоративні кола */
.step-circles {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    pointer-events: none;
}

.circle {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
}

.c-1 { width: 300px; height: 300px; }
.c-2 { width: 500px; height: 500px; }

/* Текст на фото */
.step-content {
    position: relative;
    z-index: 2;
    text-align: left;
    padding-left: 20%; /* Зсув тексту трохи вправо */
}

.step-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
    display: block;
    margin-bottom: 10px;
}

.step-slogan {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 20px;
}

/* Іконка 4 крапки */
.step-grid-icon {
    display: grid;
    grid-template-columns: repeat(2, 6px);
    gap: 4px;
}
.step-grid-icon span {
    width: 6px; height: 6px;
    background: #fff;
    border-radius: 50%;
}

/* --- ЦИФРА ПОСЕРЕДИНІ --- */
.step-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 6rem;
    font-weight: 400;
    color: #999; /* Сірий колір, як на макеті */
    font-family: 'Manrope', sans-serif;
    z-index: 2;
    background: #fff; /* Фон під цифрою, щоб перекрити стик */
    padding: 20px;
    border-radius: 20px;
    line-height: 1;
}

/* --- НИЖНІЙ БЛОК (ПРАВИЙ) --- */
.step-bottom-box {
    width: 65%; /* Ширше за верхній */
    align-self: flex-end; /* Притискаємо вправо */
    margin-top: -150px; /* Наїжджаємо на верхній блок (OVERLAP) */
    position: relative;
    z-index: 3; /* Поверх верхнього */
    padding-left: 20px; /* Відступ, щоб було видно виріз */
}

.step-bottom-box .step-img-container {
    height: 500px;
    border-radius: 30px 0 0 30px; /* Закруглення зліва */
    overflow: hidden;
    /* Оце створює ефект "вирізу" і розділення фотографій */
    border-top: 20px solid #fff; 
    border-left: 20px solid #fff;
    box-shadow: -10px -10px 0 #fff; /* Додаткове маскування кута */
}

.step-bottom-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- АДАПТИВНІСТЬ --- */
@media (max-width: 992px) {
    .step-wrapper {
        flex-direction: column;
    }
    
    .step-top-box, .step-bottom-box {
        width: 100%; /* На всю ширину */
        margin: 0;
    }

    .step-top-box .step-img-container {
        border-radius: 0;
        height: 400px;
    }

    .step-bottom-box {
        margin-top: 20px; /* Відступ замість накладання */
        padding-left: 0;
    }

    .step-bottom-box .step-img-container {
        border: none; /* Прибираємо рамки */
        border-radius: 0;
        height: 400px;
        box-shadow: none;
    }

    /* Цифру ставимо між блоками */
    .step-number {
        position: relative;
        top: auto; left: auto;
        transform: none;
        text-align: center;
        margin: 20px 0;
        font-size: 4rem;
        background: transparent;
    }
}
/* --- ЛОГОТИП У СЕКЦІЇ VISUAL STEP --- */
.step-corner-logo {
    position: absolute;
    top: 0;
    right: 20%; /* Відступ від правого краю */
    width: 160px; /* Ширина логотипу */
    z-index: 10;
    padding-top: 90px;
}

.step-corner-logo img {
    width: 100%;
    height: auto;
    display: block;
    /* Якщо логотип білий, а фон білий - цей рядок зробить його чорним (інверсія) */
    /* filter: invert(1); */ 
}

.invert {
  filter: invert(1);
}

/* Адаптивність для мобільних */
@media (max-width: 992px) {
    .step-corner-logo {
        position: relative; /* Скасовуємо абсолютну позицію */
        top: auto;
        right: auto;
        margin: 0 auto 30px auto; /* Центруємо блок */
        width: 120px;
        text-align: center;
    }
}


/* =========================================
   INFRASTRUCTURE INTRO STYLES
   ========================================= */

.infra-intro {
    background-color: #fff;
    overflow: hidden;
}

/* Контейнер для зображення */
.infra-main-image {
    position: relative;
    padding-right: 20px;
    padding-bottom: 20px;
}

.infra-main-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0 40px 0 40px; /* Асиметричні кути як у будівництві */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
}

/* Декоративний елемент (Рамка-підкладка) */
.infra-main-image::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 30px;
    right: -10px;
    bottom: -10px;
    border: 2px solid #E31E24; /* Фірмовий червоний */
    border-radius: 0 40px 0 40px;
    z-index: 1;
    transition: all 0.4s ease;
}

/* Декоративна технічна мітка (Label) */
.infra-main-image::after {
    content: 'ENGINEERING SYSTEMS';
    position: absolute;
    top: 50%;
    right: -40px;
    transform: rotate(90deg) translateY(-50%);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 4px;
    color: rgba(0, 0, 0, 0.1);
    z-index: 3;
    white-space: nowrap;
}

/* Ефект при наведенні */
.infra-intro:hover .infra-main-image::before {
    top: 20px;
    left: 20px;
    right: 0;
    bottom: 0;
}

/* Текстові стилі для секції */
.lead-text {
    font-size: 1.25rem;
    line-height: 1.6;
    font-weight: 500;
    color: #1a1a1a;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.2;
}

/* Адаптивність */
@media (max-width: 992px) {
    .infra-main-image {
        margin-top: 40px;
        padding-right: 10px;
    }
    .infra-main-image::after {
        display: none; /* Ховаємо мітку на малих екранах */
    }
    .section-title {
        font-size: 2rem;
    }
}
/* =========================================
   INFRASTRUCTURE GRID (DARK STYLE)
   ========================================= */

.section-bg-dark {
    background-color: #0f0f0f;
    padding: 80px 0;
}

.text-gray {
    color: #888;
    max-width: 700px;
    margin: 0 auto;
}

.infra-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.infra-card {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 40px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
}

.infra-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.infra-card__icon {
    width: 60px;
    height: 60px;
    background: rgba(227, 30, 36, 0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.infra-card__icon img {
    width: 30px;
    filter: invert(1);
    opacity: 0.7;
}

.infra-card__num {
    font-size: 1.5rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.1);
    font-family: 'Manrope', sans-serif;
}

.infra-card__title {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.infra-card__text {
    color: #999;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Червона лінія знизу */
.infra-card__line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: #E31E24;
    transition: width 0.4s ease;
}

/* --- ЕФЕКТИ HOVER --- */
.infra-card:hover {
    transform: translateY(-10px);
    background: #222;
    border-color: rgba(227, 30, 36, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.infra-card:hover .infra-card__icon {
    background: #E31E24;
    box-shadow: 0 0 15px rgba(227, 30, 36, 0.4);
}

.infra-card:hover .infra-card__icon img {
    opacity: 1;
}

.infra-card:hover .infra-card__num {
    color: #E31E24;
}

.infra-card:hover .infra-card__line {
    width: 100%;
}

/* АДАПТИВНІСТЬ */
@media (max-width: 992px) {
    .infra-grid {
        grid-template-columns: 1fr;
    }
    .infra-card {
        padding: 30px;
    }
}
/* =========================================
   BROKEN GRID SECTION STYLES
   ========================================= */

.infra-broken-grid {
    padding: 100px 0;
    overflow: hidden;
}

.broken-grid-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    min-height: 500px;
}

/* Текстовий блок */
.grid-content-box {
    width: 50%;
    background: #fff;
    padding: 60px;
    z-index: 5;
    box-shadow: 30px 30px 60px rgba(0, 0, 0, 0.05);
    position: relative;
    margin-right: -100px; /* Наїжджає на картинку */
}

.top-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #E31E24;
    margin-bottom: 15px;
    display: block;
}

.infra-list {
    list-style: none;
    padding: 0;
}

.infra-list li {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-weight: 600;
    color: #333;
}

.infra-list li span {
    width: 20px;
    height: 2px;
    background: #E31E24;
    margin-right: 15px;
}

/* Блок зображення */
.grid-image-box {
    width: 60%;
    position: relative;
    z-index: 1;
}

.image-inner {
    position: relative;
    overflow: hidden;
    border-radius: 0 50px 0 0;
}

.image-inner img {
    width: 100%;
    height: 600px;
    object-fit: cover;
    display: block;
}

/* Технічний бейдж */
.tech-spec-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #1a1a1a;
    color: #fff;
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.tech-spec-badge .num {
    font-size: 2.5rem;
    font-weight: 900;
    color: #E31E24;
    line-height: 1;
}

.tech-spec-badge .label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
}

/* Декоративні лінії */
.decor-lines {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 100%;
    height: 100%;
    border-right: 2px solid #eee;
    border-top: 2px solid #eee;
    z-index: -1;
}

/* АДАПТИВНІСТЬ */
@media (max-width: 992px) {
    .broken-grid-wrapper {
        flex-direction: column;
    }
    .grid-content-box, .grid-image-box {
        width: 100%;
        margin: 0;
    }
    .grid-content-box {
        padding: 40px 20px;
        order: 2;
    }
    .grid-image-box {
        order: 1;
    }
    .image-inner img {
        height: 350px;
    }
    .tech-spec-badge {
        padding: 15px;
    }
}
/* =========================================
   INFRASTRUCTURE STEPS STYLES
   ========================================= */

.infra-steps {
    background-color: #f4f4f4;
}

.infra-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.step-box {
    position: relative;
}

/* Верхня частина з лінією */
.step-head {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.step-index {
    width: 50px;
    height: 50px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #1a1a1a;
    font-size: 1.1rem;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.step-line {
    flex-grow: 1;
    height: 1px;
    background: #ddd;
    margin-left: -1px;
    position: relative;
    z-index: 1;
}

/* Контент */
.step-name {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
    color: #1a1a1a;
}

.step-text {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
}

/* Hover ефект */
.step-box:hover .step-index {
    background: #E31E24;
    color: #fff;
    border-color: #E31E24;
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(227, 30, 36, 0.2);
}

.step-box:hover .step-name {
    color: #E31E24;
}

/* АДАПТИВНІСТЬ */
@media (max-width: 992px) {
    .infra-steps-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    .step-line {
        display: none; /* Ховаємо лінії на мобільному */
    }
}

@media (max-width: 576px) {
    .infra-steps-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   PREMIUM METALWORKING SECTION
   ========================================= */

.metal-promo-section {
    background-color: #0b0b0b;
    overflow: hidden;
}

.metal-promo-wrapper {
    display: flex;
    min-height: 650px;
    align-items: stretch;
}

/* КОНТЕНТ */
.metal-content {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 80px 10% 80px 5%;
    background: #0b0b0b;
    z-index: 2;
}

.metal-label {
    display: block;
    color: #E31E24;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.85rem;
    margin-bottom: 20px;
}

.metal-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.metal-desc {
    font-size: 1.1rem;
    color: #999;
    line-height: 1.7;
    max-width: 500px;
    margin-bottom: 40px;
}

/* Список фішок */
.metal-features {
    list-style: none;
    padding: 0;
}

.metal-features li {
    display: flex;
    align-items: center;
    color: #fff;
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 1rem;
}

.metal-features li span {
    color: #444;
    font-family: 'Manrope', sans-serif;
    margin-right: 15px;
    font-size: 0.8rem;
    border: 1px solid #333;
    padding: 4px 8px;
    border-radius: 4px;
}

/* ВІЗУАЛЬНА ЧАСТИНА */
.metal-visual {
    flex: 1.2;
    position: relative;
    overflow: hidden;
}

.metal-img-wrap {
    width: 100%;
    height: 100%;
}

.metal-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.3) brightness(0.7);
    transition: transform 0.8s ease;
}

.metal-promo-section:hover .metal-img-wrap img {
    transform: scale(1.05) grayscale(0);
}

/* Ефект світіння */
.metal-overlay-glow {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to right, #0b0b0b 0%, transparent 20%, transparent 80%, rgba(227, 30, 36, 0.1) 100%);
    pointer-events: none;
}

/* Фоновий напис */
.metal-bg-num {
    position: absolute;
    bottom: -30px;
    right: -20px;
    font-size: 10rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.02);
    line-height: 1;
    z-index: 1;
    pointer-events: none;
}

/* АДАПТИВНІСТЬ */
@media (max-width: 1200px) {
    .metal-title { font-size: 2.5rem; }
}

@media (max-width: 992px) {
    .metal-promo-wrapper { flex-direction: column; }
    .metal-content { padding: 60px 5%; order: 2; }
    .metal-visual { height: 400px; order: 1; }
    .metal-bg-num { font-size: 6rem; }
}
/* Специфічно для сторінки металообробки */
.page-metalworking .contact-hero__bg-text {
    /* Можна додати легкий контур замість заливки для "технічного" вигляду */
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.05);
    color: transparent;
    letter-spacing: 10px;
}

/* Налаштування для адаптивності довгих слів */
@media (max-width: 1200px) {
    .contact-hero__bg-text {
        font-size: 8rem;
    }
}
/* =========================================
   MAGNETIC PREMIUM GRID
   ========================================= */

.metal-magnetic-grid {
    background-color: #fdfdfd;
    padding: 100px 0;
}

.magnetic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 250px;
    gap: 30px;
}

/* Базова картка */
.mag-card {
    background: #fff;
    border-radius: 30px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.02);
}

.mag-card__content {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

.mag-card__content--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

@media (max-width: 768px) {
  .mag-card__content--split {
    grid-template-columns: 1fr;
  }
}

/* Типографіка */
.mag-num {
    font-size: 0.9rem;
    font-weight: 800;
    color: #E31E24;
    display: block;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.mag-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 15px;
    color: #1a1a1a;
}

.mag-text {
    font-size: 1rem;
    color: #666;
    line-height: 1.5;
}

/* Конфігурація сітки (Broken Layout) */
.card-large { grid-column: span 2; grid-row: span 2; }
.card-tall { grid-column: span 1; grid-row: span 2; }
.card-square { grid-column: span 1; grid-row: span 1; }
.card-wide { grid-column: span 2; grid-row: span 1; }

/* Візуальні елементи */
.mag-card__visual {
    margin-top: 20px;
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
}

.mag-card__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Магнетичний ефект на ховер */
.mag-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 40px 80px rgba(0,0,0,0.08);
    border-color: rgba(227, 30, 36, 0.1);
}

.mag-card:hover .mag-card__visual img {
    transform: scale(1.1);
}

/* Декоративне коло для великої картки */
.mag-circle-decor {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: rgba(227, 30, 36, 0.02);
    border-radius: 50%;
    z-index: -1;
    transition: all 0.5s ease;
}

.mag-card:hover .mag-circle-decor {
    transform: scale(1.5);
    background: rgba(227, 30, 36, 0.05);
}

/* Адаптивність */
@media (max-width: 1100px) {
    .magnetic-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;
    }
    .card-large, .card-tall, .card-square, .card-wide {
        grid-column: span 2;
        grid-row: auto;
    }
}
/* =========================================
   PRECISION TURNING SECTION
   ========================================= */

.turning-section {
    position: relative;
    padding: 120px 0;
    background-image: radial-gradient(circle at top right, #fcfcfc 0%, #fff 100%);
}

.turning-quote {
    border-left: 3px solid #E31E24;
    padding-left: 25px;
    font-style: italic;
    color: #555;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Технічні показники */
.tech-specs {
    display: flex;
    gap: 40px;
    border-top: 1px solid #eee;
    padding-top: 30px;
}

.spec-item {
    display: flex;
    flex-direction: column;
}

.spec-val {
    font-size: 2.5rem;
    font-weight: 900;
    color: #1a1a1a;
    line-height: 1;
}

.spec-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #E31E24;
    margin-top: 5px;
}

/* Список робіт (Преміум стіл) */
.turning-list-wrapper {
    background: #fff;
    padding: 50px;
    border-radius: 40px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.02);
}

.turning-job-item {
    display: flex;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid #f5f5f5;
    transition: all 0.3s ease;
}

.turning-job-item:last-child {
    border-bottom: none;
}

.job-dot {
    width: 8px;
    height: 8px;
    background: #ddd;
    border-radius: 50%;
    margin-right: 20px;
    transition: all 0.3s ease;
}

.job-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}

/* Hover Effect */
.turning-job-item:hover {
    padding-left: 15px;
}

.turning-job-item:hover .job-dot {
    background: #E31E24;
    transform: scale(1.5);
    box-shadow: 0 0 10px rgba(227, 30, 36, 0.4);
}

.turning-job-item:hover .job-name {
    color: #1a1a1a;
}

/* Адаптивність */
@media (max-width: 992px) {
    .turning-list-wrapper {
        padding: 30px;
        margin-top: 30px;
    }
    .spec-val {
        font-size: 2rem;
    }
}
/* =========================================
   METALWORKING BROKEN GRID (Visual Step)
   ========================================= */

.metal-visual-grid {
    padding-bottom: 120px;
    background: #fff;
}

/* Використовуємо існуючу логіку step-wrapper */
.step-wrapper {
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* Накладання зображень */
.step-top-box {
    width: 55%;
    z-index: 1;
}

.step-top-box .step-img-container {
    height: 650px;
    border-radius: 0 40px 40px 0;
    overflow: hidden;
    position: relative;
}

.step-bottom-box {
    width: 60%;
    align-self: flex-end;
    margin-top: -180px; /* Сильне накладання */
    z-index: 3;
    padding-left: 20px;
}

.step-bottom-box .step-img-container {
    height: 550px;
    border-radius: 40px 0 0 40px;
    border-top: 25px solid #fff; /* Білий розріз */
    border-left: 25px solid #fff;
    overflow: hidden;
}

/* Текст та декорації */
.step-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 7rem;
    font-weight: 300;
    color: #eee;
    z-index: 2;
    background: #fff;
    padding: 10px 30px;
    border-radius: 20px;
}

.step-slogan {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

/* Адаптив для мобільних */
@media (max-width: 992px) {
    .step-top-box, .step-bottom-box {
        width: 100%;
        margin: 0;
    }
    .step-bottom-box .step-img-container {
        border: none;
        height: 400px;
    }
    .step-top-box .step-img-container {
        height: 400px;
    }
    .step-number {
        position: relative;
        font-size: 4rem;
        margin: 30px 0;
    }
}
/* =========================================
   METALWORKING CTA ADAPTATION
   ========================================= */

.cta-metal {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(227, 30, 36, 0.2);
    /* Градієнт, що імітує відблиск металу */
    background: linear-gradient(135deg, #000 0%, #111 100%);
}

.cta-label {
    display: block;
    color: #E31E24;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.8rem;
    margin-bottom: 15px;
}

.cta-desc {
    opacity: 0.8;
    max-width: 650px;
    margin: 0 auto 40px;
    font-size: 1.1rem;
    line-height: 1.6;
}

.cta-contact-alt {
    margin-top: 25px;
    font-size: 0.9rem;
    color: #888;
}

.cta-contact-alt a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.cta-contact-alt a:hover {
    color: #E31E24;
}

/* Фонова іконка для глибини */
.cta-bg-icon {
    position: absolute;
    right: -50px;
    bottom: -50px;
    width: 300px;
    height: 300px;
    pointer-events: none;
    z-index: 0;
}

.cta-content {
    position: relative;
    z-index: 1;
}

.rounded-box {
    border-radius: 40px;
}

/* Адаптивність */
@media (max-width: 768px) {
    .cta-box {
        padding: 40px 20px !important;
    }
    .cta-metal h2 {
        font-size: 1.8rem;
    }
}
/* Контейнер модалки */
.obra-modal {
    background: rgba(10, 10, 10, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 40px !important;
    width: 100%;
    max-width: 450px !important;
    border-radius: 0; /* Преміальний стиль часто гострий */
    position: relative;
    overflow: visible !important;
}

.obra-modal__subtitle {
    display: block;
    font-size: 10px;
    letter-spacing: 2px;
    color: #ff3b3b;
    margin-bottom: 10px;
    font-family: monospace;
}

.obra-modal__title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.obra-modal__title span {
    color: #ff3b3b;
}

/* Стилізація форми */
.input-group {
    position: relative;
    margin-bottom: 25px;
}

.input-group label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin-bottom: 8px;
}

.obra-form input, 
.obra-form textarea {
    width: 100%;
    background: transparent;
    border: none;
    color: #fff;
    padding: 10px 0;
    font-family: 'Manrope', sans-serif;
    outline: none;
}

.input-line {
    height: 1px;
    background: rgba(255,255,255,0.1);
    width: 100%;
    transition: 0.3s;
}

.obra-form input:focus + .input-line {
    background: #ff3b3b;
    box-shadow: 0 0 10px rgba(255, 59, 59, 0.5);
}

/* Декоративні кути */
.modal-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #ff3b3b;
    pointer-events: none;
}
.modal-corner.tl { top: -5px; left: -5px; border-right: 0; border-bottom: 0; }
.modal-corner.br { bottom: -5px; right: -5px; border-left: 0; border-top: 0; }

/* Кастомізація Fancybox для цієї модалки */
.fancybox__content > .f-button.is-close-btn {
    top: -40px;
    right: -10px;
    color: #fff;
}