/* =========================================
   1. VARIABLES & RESET
   ========================================= */
:root {
    --bg-color: #ffffff;
    --text-color: #1a1a1a;
    --gray-light: #f4f4f4;
    --gray-border: #e0e0e0;
    --font-main: 'Helvetica Neue', Arial, sans-serif;
    --container-width: 1400px;
    --spacing-unit: 20px;
    --header-height: 80px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.5;
    overflow-x: hidden;
    padding-top: var(--header-height); /* Компенсація фіксованого хедера */
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

ul {
    list-style: none;
}

img, svg {
    max-width: 100%;
    display: block;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-unit);
}

/* =========================================
   2. HEADER & NAVIGATION
   ========================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--bg-color);
    border-bottom: 1px solid var(--gray-border);
    z-index: 1000;
    height: var(--header-height);
    display: flex;
    align-items: center;
    transition: box-shadow 0.3s ease;
}

.header-inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-weight: 900;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    z-index: 1002;
}

/* --- Desktop Nav --- */
.desktop-nav {
    display: none;
}

@media (min-width: 1024px) {
    .desktop-nav {
        display: flex;
        height: 100%;
        align-items: center;
    }
    
    .nav-item {
        height: 100%;
        display: flex;
        align-items: center;
    }
    
    .nav-link {
        margin-right: 30px;
        font-weight: 600;
        font-size: 0.9rem;
        cursor: pointer;
        height: 100%;
        display: flex;
        align-items: center;
    }

    /* Mega Menu Dropdown */
    .mega-menu {
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        background: var(--bg-color);
        border-bottom: 1px solid #000;
        padding: 50px 0 80px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        pointer-events: none;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }

    .nav-item:hover .mega-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

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

    .mm-column h4 {
        font-size: 0.8rem;
        text-transform: uppercase;
        color: #999;
        margin-bottom: 25px;
        letter-spacing: 1px;
    }

    .mm-column ul li {
        margin-bottom: 12px;
        font-size: 1.2rem;
        font-weight: 700;
    }
    
    .mm-column ul li:hover {
        opacity: 0.6;
    }
    
    .link-arrow {
        margin-top: 20px;
        font-size: 0.95rem !important;
    }
}

/* --- Header Utils & Hamburger --- */
.header-utils {
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 1002;
}

.btn-contact {
    background: var(--text-color);
    color: var(--bg-color);
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
}

.btn-contact:hover {
    background: #333;
}

.hamburger-btn {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1002;
}

.hamburger-btn span {
    width: 25px;
    height: 2px;
    background-color: #000;
    transition: 0.3s;
}

@media (min-width: 1024px) {
    .hamburger-btn { display: none; }
}

/* --- Mobile Menu Overlay --- */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--bg-color);
    z-index: 1001;
    padding: 120px 20px 40px;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    display: flex;
    flex-direction: column;
}

.mobile-menu-overlay.active {
    transform: translateY(0);
}

.mobile-nav a {
    display: block;
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

/* =========================================
   3. HERO SECTION
   ========================================= */
.hero {
    padding: 100px 0 80px;
}

.hero h1 {
    font-size: clamp(2.5rem, 6vw, 6.5rem);
    line-height: 1;
    margin-bottom: 30px;
    letter-spacing: -0.03em;
    font-weight: 800;
}

.hero p {
    font-size: clamp(1.2rem, 2vw, 2rem);
    max-width: 800px;
    color: #444;
}

/* =========================================
   4. SERVICES SECTION
   ========================================= */
.services-section {
    padding: 60px 0;
    border-top: 1px solid var(--gray-border);
}

.service-item {
    display: grid;
    grid-template-columns: 0.5fr 2fr 3fr;
    padding: 50px 0;
    border-bottom: 1px solid var(--gray-border);
    align-items: flex-start;
    transition: background 0.2s;
}

.service-item:hover {
    background: #fafafa;
}

.svc-num {
    font-size: 1rem;
    color: #999;
    font-family: monospace;
}

.svc-title {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 15px;
}

.svc-desc {
    font-size: 1.3rem;
    color: #444;
    line-height: 1.4;
}

@media (max-width: 1023px) {
    .service-item {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* =========================================
   5. SOCIAL PROOF (BRANDS GRID)
   ========================================= */
.social-proof {
    padding: 100px 0;
    background: #000;
    color: #fff;
}

.social-proof h3 {
    margin-bottom: 60px;
    font-size: 1.5rem;
    color: #888;
    font-weight: 400;
}

.brands-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #333;
    border-left: 1px solid #333;
}

.brand-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    transition: background 0.3s;
}

.brand-item:hover {
    background: #111;
}

.brand-item svg {
    width: 40px;
    height: 40px;
    fill: #fff;
    opacity: 0.8;
}

.brand-item span {
    opacity: 0.8;
}

@media (max-width: 1023px) {
    .brands-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================
   6. FOOTER (CLEAN VERSION)
   ========================================= */
.site-footer {
    background: #111;
    color: #fff;
    padding: 120px 0 60px;
    border-top: 1px solid #333;
}

.footer-main-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
    min-height: 300px;
}

.footer-section h4 {
    color: #666;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 40px;
}

.footer-links-list li,
.legal-grid li {
    margin-bottom: 20px;
}

/* Company Links */
.footer-links-list a {
    font-size: 1.4rem;
    font-weight: 600;
    color: #fff;
}

.footer-links-list a:hover {
    color: #999;
}

/* Legal Grid */
.legal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 60px;
}

.legal-grid a {
    font-size: 0.95rem;
    color: #999;
}

.legal-grid a:hover {
    color: #fff;
    text-decoration: underline;
}

/* Footer Bottom */
.footer-bottom {
    margin-top: 100px;
    padding-top: 30px;
    border-top: 1px solid #222;
}

.copyright {
    color: #555;
    font-size: 0.85rem;
}

/* Mobile Footer */
@media (max-width: 768px) {
    .footer-main-content {
        grid-template-columns: 1fr;
        gap: 60px;
        min-height: auto;
    }
    
    .legal-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}
/* =========================================
   7. POLICY / TEXT PAGES
   ========================================= */

/* Hero Section for Text Pages */
.policy-hero {
    padding: 160px 0 80px;
    background: #fafafa; /* Світло-сірий фон для заголовка */
    border-bottom: 1px solid var(--gray-border);
}

.page-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: -1px;
}

.last-updated {
    font-size: 0.9rem;
    color: #666;
    font-family: monospace;
    text-transform: uppercase;
}

/* Content Area */
.policy-content {
    padding: 80px 0;
}

.text-container {
    max-width: 800px; /* Обмежуємо ширину для зручного читання */
    margin: 0 auto;   /* Центруємо колонку */
}

/* Typography for Legal Text */
.legal-text {
    font-size: 1.1rem;
    color: #333;
    line-height: 1.7; /* Більший міжрядковий інтервал */
}

.legal-text h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: 60px; /* Відступ перед новим розділом */
    margin-bottom: 25px;
    color: #000;
    letter-spacing: -0.5px;
    border-top: 1px solid #eee; /* Лінія над заголовком */
    padding-top: 40px;
}

.legal-text h2:first-of-type {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.legal-text p {
    margin-bottom: 20px;
}

.legal-text ul {
    list-style: disc; /* Маркери списку */
    padding-left: 20px;
    margin-bottom: 30px;
}

.legal-text li {
    margin-bottom: 10px;
    padding-left: 10px;
}

.intro {
    font-size: 1.3rem; /* Вступ трохи більший */
    font-weight: 400;
    margin-bottom: 50px;
    color: #000;
}
/* =========================================
   9. ABOUT PAGE - SPECIFIC MODULES
   ========================================= */

/* Stats Bar */
.stats-bar {
    padding: 40px 0;
    border-bottom: 1px solid var(--gray-border);
    background: #fafafa;
}

.stats-flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.stat-mini {
    font-size: 1.1rem;
    color: #444;
}

.stat-mini strong {
    color: #000;
    font-weight: 800;
    margin-right: 5px;
}

/* Section Label */
.section-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 2px;
    margin-bottom: 40px;
    border-left: 2px solid #000;
    padding-left: 15px;
}

/* History Timeline */
.history-section {
    padding: 120px 0;
}

.timeline {
    border-left: 1px solid var(--gray-border);
    margin-left: 20px;
    padding-left: 40px;
}

.timeline-item {
    position: relative;
    margin-bottom: 60px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -46px; /* Вирівнювання кружечка по лінії */
    top: 5px;
    width: 12px;
    height: 12px;
    background: #000;
    border-radius: 50%;
}

.timeline-item .year {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 10px;
    font-family: monospace;
}

.timeline-item h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.timeline-item p {
    max-width: 600px;
    color: #555;
    font-size: 1.1rem;
}

/* Methodology 4D Grid */
.methodology-section {
    padding: 100px 0;
    background: #1a1a1a;
    color: #fff;
}

.method-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.method-card {
    padding: 30px;
    background: #222;
    border: 1px solid #333;
    transition: 0.3s;
}

.method-card:hover {
    background: #000;
    border-color: #555;
}

.step {
    display: block;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
    font-family: monospace;
}

.method-card h4 {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.method-card p {
    font-size: 0.95rem;
    color: #aaa;
    line-height: 1.5;
}

/* Leadership Grid */
.leadership-section {
    padding: 120px 0;
}

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

.leader-card {
    text-align: left;
}

.leader-photo {
    width: 100%;
    height: 300px; /* Висота фото */
    background-color: #e0e0e0; /* Сірий фон замість фото */
    margin-bottom: 20px;
    position: relative;
}

/* Імітація фото для прикладу */
.leader-photo::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: #000;
}

.leader-card h5 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.leader-card span {
    display: block;
    font-size: 0.9rem;
    color: #666;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.leader-bio {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.4;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .method-grid, .leaders-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки на планшеті */
    }
}

@media (max-width: 768px) {
    .stats-flex {
        flex-direction: column;
        gap: 10px;
    }
    
    .method-grid, .leaders-grid {
        grid-template-columns: 1fr; /* 1 колонка на мобільному */
    }
    
    .about-hero {
        padding: 140px 0 60px;
    }
}
/* =========================================
   8. ABOUT PAGE (REFINED)
   ========================================= */

/* Hero: Value Proposition */
.about-hero {
    padding: 180px 0 100px;
    background: #fff;
    border-bottom: 1px solid var(--gray-border);
}

.eyebrow {
    display: block;
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #666;
    letter-spacing: 2px;
    margin-bottom: 20px;
    font-weight: 700;
}

.about-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1.1;
    font-weight: 800;
    max-width: 1000px;
    margin-bottom: 30px;
    color: #111;
}

.about-lead {
    font-size: 1.4rem;
    line-height: 1.6;
    color: #555;
    max-width: 800px;
}

/* Mission & Values */
.mission-section {
    padding: 100px 0;
    background: #f9f9f9;
}

.mission-header {
    margin-bottom: 60px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 40px;
}

.mission-header h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.mission-header p {
    font-size: 1.5rem;
    color: #444;
    max-width: 900px;
}

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

.value-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    border-top: 2px solid #000;
    padding-top: 20px;
}

.value-card p {
    color: #666;
    line-height: 1.5;
}

/* Social Proof (Stats) */
.social-proof-alt {
    padding: 60px 0;
    background: #000;
    color: #fff;
}

.proof-flex {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 40px;
    text-align: center;
}

.big-num {
    display: block;
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
}

.label {
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 1px;
}

/* Timeline */
.history-section {
    padding: 120px 0;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 60px;
}

.timeline {
    border-left: 2px solid #000;
    margin-left: 10px;
    padding-left: 40px;
}

.timeline-item {
    margin-bottom: 60px;
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -49px;
    top: 5px;
    width: 16px;
    height: 16px;
    background: #fff;
    border: 4px solid #000;
    border-radius: 50%;
}

.year {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 10px;
}

/* Team Grid */
.team-section {
    padding: 100px 0;
    background: #fff;
    border-top: 1px solid var(--gray-border);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.team-card {
    text-align: left;
}

.photo-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1.2; /* Пропорция портрета */
    background: #eee;
    margin-bottom: 20px;
    filter: grayscale(100%); /* Стильно: черно-белые фото */
    transition: 0.3s;
}

.team-card:hover .photo-placeholder {
    filter: grayscale(0%); /* При наведении - цветные */
    background: #ccc;
}

.team-card h4 { font-size: 1.2rem; margin-bottom: 5px; }
.role { font-size: 0.85rem; color: #888; text-transform: uppercase; display: block; margin-bottom: 15px; }
.bio { font-size: 0.9rem; color: #555; line-height: 1.4; }

/* Call to Action (CTA) */
.cta-section {
    padding: 120px 0;
    background: #000;
    color: #fff;
    text-align: center;
}

.cta-section h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    margin-bottom: 20px;
}

.cta-section p {
    font-size: 1.2rem;
    color: #aaa;
    margin-bottom: 40px;
}

.btn-large {
    display: inline-block;
    background: #fff;
    color: #000;
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 50px;
    transition: 0.3s;
}

.btn-large:hover {
    background: #ccc;
    transform: translateY(-3px);
}

/* Responsive */
@media (max-width: 1024px) {
    .values-grid, .team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .values-grid, .team-grid { grid-template-columns: 1fr; }
    .proof-flex { flex-direction: column; gap: 40px; }
}

/* =========================================
   UPDATED TEAM GRID (REAL PHOTOS)
   ========================================= */

.team-section {
    padding: 100px 0;
    background: #fff;
    border-top: 1px solid var(--gray-border);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.team-card {
    text-align: left;
}

/* Стилі для реальних фото */
.team-photo {
    width: 100%;
    aspect-ratio: 3 / 4; /* Портретний формат */
    object-fit: cover; /* Обрізає зайве, не сплющує обличчя */
    margin-bottom: 20px;
    filter: grayscale(100%); /* Чорно-білий фільтр */
    transition: all 0.4s ease;
    border-radius: 4px; /* Легке заокруглення */
    display: block;
}

/* Ефект при наведенні */
.team-card:hover .team-photo {
    filter: grayscale(0%); /* Стає кольоровим */
    transform: translateY(-5px); /* Трохи піднімається */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.team-card h4 {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 5px;
    color: #000;
}

.role {
    font-size: 0.85rem;
    color: #888;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
    letter-spacing: 1px;
    font-weight: 600;
}

.bio {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
}

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

@media (max-width: 600px) {
    .team-grid { grid-template-columns: 1fr; }
}

/* =========================================
   11. ABOUT PAGE - COMPLETE REFINED STYLES
   ========================================= */

/* Hero: Value Proposition */
.about-hero {
    padding: 180px 0 100px;
    background: #fff;
    border-bottom: 1px solid var(--gray-border);
}

.eyebrow {
    display: block;
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #666;
    letter-spacing: 2px;
    margin-bottom: 20px;
    font-weight: 700;
}

.about-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1.1;
    font-weight: 800;
    max-width: 1000px;
    margin-bottom: 30px;
    color: #111;
}

.about-lead {
    font-size: 1.4rem;
    line-height: 1.6;
    color: #555;
    max-width: 800px;
}

/* Detailed Values */
.values-detailed {
    margin-top: 40px;
}

.val-item {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
}

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

.val-item h3 {
    font-size: 1.6rem;
    margin-bottom: 15px;
    color: #000;
}

/* Industry Expertise Section */
.expertise-section {
    padding: 100px 0;
    background: #000; /* Чорний фон для контрасту */
    color: #fff;
}

.expertise-section .section-heading {
    color: #fff;
    opacity: 1;
}

.expertise-section h4 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: #fff;
}

.expertise-section p {
    color: #aaa;
    line-height: 1.5;
}

/* Team & Photos */
.team-photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    margin-bottom: 20px;
    filter: grayscale(100%);
    transition: all 0.4s ease;
    border-radius: 4px;
    display: block;
}

.team-card:hover .team-photo {
    filter: grayscale(0%);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* Call to Action */
.cta-section {
    padding: 120px 0;
    background: #000;
    color: #fff;
    text-align: center;
}

.btn-large {
    display: inline-block;
    background: #fff;
    color: #000;
    padding: 18px 45px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 50px;
    margin-top: 30px;
    transition: 0.3s;
}

.btn-large:hover {
    background: #ccc;
    transform: scale(1.05);
}

/* Mobile Adaptation */
@media (max-width: 768px) {
    .about-hero { padding: 140px 0 60px; }
    .expertise-section .approach-grid { grid-template-columns: 1fr; }
}
/* --- Expanded About Styles --- */
.about-lead-wrapper {
    display: flex;
    gap: 40px;
    margin-top: 40px;
}

.about-lead-sub {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #777;
    max-width: 500px;
}

.deep-dive-section {
    padding: 120px 0;
    border-top: 1px solid #eee;
}

.h2-large {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 50px;
}

.expertise-block {
    margin-bottom: 50px;
}

.expertise-block h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: #111;
}

.expertise-block p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #555;
}

/* Process Grid */
.process-section {
    padding: 100px 0;
    background: #fafafa;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.process-card {
    padding: 40px;
    background: #fff;
    border: 1px solid #eee;
    transition: transform 0.3s;
}

.process-card:hover { transform: translateY(-10px); }

.p-num {
    display: block;
    font-size: 0.9rem;
    font-weight: 800;
    color: #ccc;
    margin-bottom: 20px;
}

.process-card h4 { font-size: 1.3rem; margin-bottom: 15px; }

/* Ethics Section */
.ethics-section {
    padding: 120px 0;
    background: #fff;
}

/* Mobile Adaptation */
@media (max-width: 1024px) {
    .about-lead-wrapper { flex-direction: column; }
    .process-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .process-grid { grid-template-columns: 1fr; }
}
/* =========================================
   12. CONTACT PAGE STYLES
   ========================================= */

.contact-hero {
    height: 70vh;
    min-height: 500px;
    display: flex;
    align-items: center;
    /* ФОТО: Лондон, телефонная будка */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), 
                      url('https://images.unsplash.com/photo-1529655683826-aba9b3e77383?q=80&w=2070&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    color: #fff;
    margin-top: -80px;
    padding-top: 80px;
}

.contact-hero h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    max-width: 800px;
    margin-top: 20px;
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 80px;
    padding: 100px 0;
}

/* Form Styles */
.main-contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.main-contact-form input, 
.main-contact-form select, 
.main-contact-form textarea {
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
}

.main-contact-form input:focus {
    border-color: #000;
    outline: none;
}

/* Info Side */
.contact-info-side {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.info-block h4 {
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 10px;
}

.info-block p {
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Mobile Contact */
@media (max-width: 992px) {
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .form-row {
        grid-template-columns: 1fr;
    }
}
/* --- Desktop Nav Mega Menu Updated --- */
.mega-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    background: var(--bg-color);
    border-bottom: 1px solid #000;
    padding: 50px 0 80px;
    
    /* Состояние покоя */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px); 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    pointer-events: none;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Создаем "мост" (невидимую зону), чтобы меню не закрывалось при движении мыши к панели */
.mega-menu::before {
    content: '';
    position: absolute;
    top: -30px; 
    left: 0;
    width: 100%;
    height: 30px;
    background: transparent;
}

/* Активация при наведении */
.nav-item:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
/* --- AI Transformation Specific Styles --- */
.eyebrow {
    display: block;
    color: #0066FF; /* Tech Blue */
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.expertise-block {
    margin-bottom: 40px;
}

.expertise-block h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: #111;
}

.expertise-block p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #444;
}

.process-card {
    padding: 40px;
    border: 1px solid #e0e0e0;
    transition: all 0.4s ease;
}

.process-card:hover {
    border-color: #0066FF;
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 102, 255, 0.08);
}

.p-num {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #0066FF;
    margin-bottom: 20px;
}
/* --- Brand & Media Specifics --- */
.eyebrow {
    color: #FF3366; /* Vibrant Pink/Red for Creative energy */
    font-weight: 700;
}

.about-title {
    /* Subtle gradient for a premium media look */
    background: linear-gradient(to right, #1a1a1a, #555);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.process-card:hover {
    border-color: #FF3366;
    box-shadow: 0 15px 35px rgba(255, 51, 102, 0.1);
}
/* --- Commerce Page Specifics --- */
.commerce-accent {
    color: #D4AF37; /* Metallic Gold */
}

.process-card:hover {
    border-color: #D4AF37;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.1);
}

/* Використаємо золотий номер кроку для цієї сторінки */
.commerce-page .p-num {
    color: #D4AF37;
}

.p-num {
    color: #FF3366;
}
/* --- Customer Experience Page Specifics --- */
.cx-accent {
    color: #6366F1; /* Indigo */
}

.process-card:hover {
    border-color: #6366F1;
    box-shadow: 0 15px 35px rgba(99, 102, 241, 0.1);
}

/* При бажанні можна додати м'який градієнт до заголовка */
.about-title {
    background: linear-gradient(90deg, #111 0%, #6366F1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* --- Banking & Finance Page Specifics --- */
.banking-accent {
    color: #1E3A8A; /* Deep Navy Blue */
}

.process-card:hover {
    border-color: #1E3A8A;
    box-shadow: 0 10px 35px rgba(30, 58, 138, 0.1);
}

.banking-page .eyebrow {
    color: #1E3A8A;
}

.banking-page .p-num {
    color: #1E3A8A;
}
/* --- Health Page Specifics --- */
.health-accent {
    color: #0D9488; /* Teal Blue/Green */
}

.process-card:hover {
    border-color: #0D9488;
    box-shadow: 0 10px 30px rgba(13, 148, 136, 0.1);
}

.health-page .eyebrow {
    color: #0D9488;
}

.health-page .p-num {
    color: #0D9488;
}
/* --- Retail & Commerce Page Specifics --- */
.retail-accent {
    color: #F97316; /* Vibrant Orange */
}

.process-card:hover {
    border-color: #F97316;
    box-shadow: 0 10px 30px rgba(249, 115, 22, 0.1);
}

.retail-page .eyebrow {
    color: #F97316;
}

.retail-page .p-num {
    color: #F97316;
}
/* --- Tech & Media Page Specifics --- */
.tech-media-accent {
    color: #8B5CF6; /* Electric Violet */
}

.process-card:hover {
    border-color: #8B5CF6;
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.1);
}

.tech-media-page .eyebrow {
    color: #8B5CF6;
}

.tech-media-page .p-num {
    color: #8B5CF6;
}
/* --- Work Page Specifics --- */
.work-card {
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.work-card:hover {
    background: #000 !important; /* Чорний фон при наведенні */
    color: #fff !important;
}

.work-card:hover .svc-num,
.work-card:hover .svc-desc {
    color: #ccc !important;
}

.work-card .svc-desc strong {
    color: inherit;
    display: block;
    margin-top: 10px;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}
/* --- Insights Page Specifics --- */
.insights-grid-section {
    padding: 80px 0;
}

.insight-card {
    padding: 40px;
    border: 1px solid #e0e0e0;
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.insight-card:hover {
    border-color: #000;
    background: #f9f9f9;
}

.insight-card.featured {
    background: #111;
    color: #fff;
    border: none;
}

.insight-card.featured h3 {
    font-size: 2.5rem;
    margin: 20px 0;
}

.insight-card.featured .link-arrow {
    color: #fff;
}

.insight-tag {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #0066FF;
    display: block;
    margin-bottom: 15px;
}

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

.newsletter-section {
    padding: 100px 0;
    background: #f4f4f4;
    text-align: center;
}

.newsletter-box {
    max-width: 600px;
    margin: 0 auto;
}

.newsletter-form {
    margin-top: 30px;
    display: flex;
    gap: 10px;
}

.newsletter-form input {
    flex: 1;
    padding: 15px;
    border: 1px solid #ccc;
    font-size: 1rem;
}

@media (max-width: 768px) {
    .newsletter-form {
        flex-direction: column;
    }
}
/* --- Partners Page Specifics --- */
.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.partner-card {
    padding: 40px;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.partner-card:hover {
    border-color: #000;
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
}

.partner-status {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #0066FF;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.partner-card h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.partner-card p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
}
/* Стили для кликабельных плиток */
.clickable-card {
    display: block; /* Ссылка занимает всю площадь */
    text-decoration: none; /* Убираем подчеркивание */
    color: inherit; /* Текст наследует цвет (черный или белый для featured) */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.clickable-card:hover {
    transform: translateY(-5px); /* Легкий подъем при наведении */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    color: inherit; /* Чтобы текст не синел при наведении */
}

.insight-card.featured.clickable-card:hover {
    background-color: #1a1a1a; /* Чуть светлее черного при наведении на главную плитку */
}
/* Базові стилі для клікабельної картки */
.clickable-card {
    display: block;
    text-decoration: none;
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Специфічні налаштування для Featured (чорної) картки */
.insight-card.featured.clickable-card {
    background-color: #111 !important; /* Чорний фон */
    border: none;
}

.insight-card.featured.clickable-card .card-title,
.insight-card.featured.clickable-card .card-text,
.insight-card.featured.clickable-card .link-arrow {
    color: #ffffff !important; /* Завжди білий текст */
}

.insight-card.featured.clickable-card .insight-tag {
    color: #00f2ff !important; /* Яскравий колір тегу */
}

/* Стан при наведенні (Hover) */
.insight-card.featured.clickable-card:hover {
    background-color: #1a1a1a !important; /* Трохи світліший фон при наведенні */
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* Гарантуємо, що текст не зникає при ховері */
.insight-card.featured.clickable-card:hover .card-title,
.insight-card.featured.clickable-card:hover .card-text,
.insight-card.featured.clickable-card:hover .link-arrow {
    color: #ffffff !important; 
    opacity: 1 !important;
}

/* Для звичайних (білих) карток */
.insight-card.clickable-card:not(.featured) {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    color: #111;
}

.insight-card.clickable-card:not(.featured):hover {
    border-color: #111;
    background-color: #f9f9f9;
}
/* РЕШЕНИЕ ПРОБЛЕМЫ ИСЧЕЗНОВЕНИЯ ТЕКСТА */

/* 1. Базовое состояние для черной плитки */
body .insight-card.featured.clickable-card {
    background-color: #111111 !important;
    text-decoration: none !important;
    display: block !important;
}

/* 2. Принудительный белый цвет для всех текстовых элементов внутри черной плитки */
body .insight-card.featured.clickable-card .insight-title,
body .insight-card.featured.clickable-card .insight-desc,
body .insight-card.featured.clickable-card .link-arrow {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* 3. Состояние при наведении (HOVER) — ТЕКСТ ДОЛЖЕН ОСТАТЬСЯ БЕЛЫМ */
body .insight-card.featured.clickable-card:hover .insight-title,
body .insight-card.featured.clickable-card:hover .insight-desc,
body .insight-card.featured.clickable-card:hover .link-arrow {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* 4. Изменяем только фон самой плитки при наведении, чтобы она "ожила" */
body .insight-card.featured.clickable-card:hover {
    background-color: #222222 !important; /* Делаем чуть светлее при наведении */
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}

/* Убираем стандартное подчеркивание ссылок, если оно есть */
.clickable-card, .clickable-card:hover {
    text-decoration: none !important;
}
/* --- HOME PAGE STYLES --- */

/* 1. Hero Section with Background Photo */
.home-hero {
    height: 90vh; /* Майже на весь екран */
    min-height: 600px;
    display: flex;
    align-items: center;
    /* Фото нічного міста/технологій з темним накладанням */
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)), 
                      url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&q=80&w=2000');
    background-size: cover;
    background-position: center;
    color: #fff;
    margin-top: -80px; /* Компенсація хедера, щоб фото було під меню */
    padding-top: 80px;
}

.hero-title {
    font-size: 5rem;
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 30px;
    letter-spacing: -1px;
}

.hero-lead-wrapper {
    max-width: 600px;
}

.hero-lead {
    font-size: 1.25rem;
    margin-bottom: 40px;
    color: rgba(255, 255, 255, 0.9);
}

.hero-actions {
    display: flex;
    gap: 20px;
    align-items: center;
}

.btn-white {
    background: #fff;
    color: #000;
    border: 1px solid #fff;
}

.btn-white:hover {
    background: transparent;
    color: #fff;
}

.btn-link-white {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.3s;
}

.btn-link-white:hover {
    opacity: 0.7;
}

/* 2. Intro Text */
.intro-text {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 40px;
    color: #444;
}

/* 3. Home Cards (Solutions) */
.home-card {
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: #fff;
}

.home-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: #000;
}

/* 4. Partners Logos (Text style) */
.partners-section {
    padding: 60px 0;
    border-top: 1px solid #eee;
}

.partners-logos {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 30px;
    opacity: 0.6;
}

.p-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    letter-spacing: -0.5px;
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 3rem;
    }
    .partners-logos {
        justify-content: center;
    }
}
/* --- ВИПРАВЛЕННЯ ДЛЯ CONTACT PAGE (Вставте в кінець style.css) --- */

/* 1. Hero Section (Лондонське фото) */
.contact-hero {
    height: 70vh;
    min-height: 500px;
    display: flex;
    align-items: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), 
                      url('https://images.unsplash.com/photo-1529655683826-aba9b3e77383?q=80&w=2070&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    color: #fff;
    margin-top: -80px;
    padding-top: 80px;
}

/* 2. Основна розмітка (Сітка: Зліва форма, Справа інфо) */
.contact-form-section {
    padding: 80px 0;
    background: #fff;
}

.contact-grid-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* Форма ширша, Інфо вужче */
    gap: 60px;
    align-items: start;
}

/* 3. Стилі Форми */
.form-wrapper .h2-small {
    font-size: 2rem;
    margin-bottom: 10px;
    font-weight: 700;
    color: #000;
}

.form-desc {
    color: #666;
    margin-bottom: 30px;
}

.secure-form .form-group {
    margin-bottom: 20px;
}

.secure-form label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

.secure-form input,
.secure-form select,
.secure-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px; /* Легке заокруглення */
    font-size: 1rem;
    background: #f9f9f9;
    font-family: inherit;
    box-sizing: border-box; /* Важливо, щоб поля не вилазили */
}

.secure-form input:focus,
.secure-form select:focus,
.secure-form textarea:focus {
    outline: none;
    border-color: #000;
    background: #fff;
}

.form-row {
    display: flex;
    gap: 20px;
}

.form-row .form-group {
    flex: 1;
}

/* Кнопка */
.btn-large {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: 15px 40px;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
    text-align: center;
}

.btn-large:hover {
    background: #333;
}

/* 4. Стилі Правої Колонки (Інфо) */
.info-wrapper {
    background: #f4f4f4;
    padding: 40px;
    border-radius: 4px;
}

.info-label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 1px;
    margin-bottom: 5px;
    font-weight: 700;
}

.info-city {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #000;
    font-weight: 700;
}

.address-text, .reg-number {
    font-size: 1.1rem;
    color: #333;
    line-height: 1.5;
    margin-bottom: 0;
}

.info-divider {
    height: 1px;
    background: #ddd;
    margin: 30px 0;
}

.contact-email {
    font-size: 1.2rem;
    color: #0066FF;
    text-decoration: none;
    font-weight: 600;
}

/* 5. Стилі Карти (На всю ширину) */
.map-section {
    width: 100%;
    height: 500px;
    margin-top: 0;
    filter: grayscale(100%);
    transition: filter 0.5s;
    display: block;
}

.map-section iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.map-section:hover {
    filter: grayscale(0%);
}

/* Мобільна адаптація */
@media (max-width: 900px) {
    .contact-grid-layout {
        grid-template-columns: 1fr;
    }
    .form-row {
        flex-direction: column;
        gap: 0;
    }
}
/* --- BRAND & MEDIA PAGE STYLES --- */

.brand-hero {
    height: 80vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    /* ФОТО: Абстрактный свет / Медиа-студия / Цифровой сигнал */
    /* Фиолетово-синий градієнт для відчуття креативу та технологій */
    background-image: linear-gradient(rgba(10, 0, 20, 0.6), rgba(0, 0, 0, 0.9)), 
                      url('https://images.unsplash.com/photo-1533750516457-a7f992034fec?q=80&w=2076&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    color: #fff;
    margin-top: -80px;
    padding-top: 80px;
}

/* Специальный акцентный цвет для этой страницы (Фиолетовый неон) */
.brand-page .p-num {
    color: #bc13fe; 
}

.brand-page .process-card:hover {
    border-color: #bc13fe;
    box-shadow: 0 10px 40px rgba(188, 19, 254, 0.15);
}

.brand-page .pillar-details li::before {
    background-color: #bc13fe; /* Маркери списку теж фіолетові */
}
/* --- НОВОЕ ФОТО ДЛЯ AI TRANSFORMATION (Квантовый поток) --- */

.ai-hero-section {
    padding: 180px 0 120px;
    min-height: 80vh;
    display: flex;
    align-items: center;
    
    /* ФОТО: Квантовый туннель / Поток данных / Скорость */
    /* Глубокий синий и черный градиент для мистики и читаемости */
    background-image: linear-gradient(rgba(0, 5, 20, 0.7), rgba(0, 0, 0, 0.9)), 
                      url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=2070&auto=format&fit=crop');
                      
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Оставляем параллакс, он тут смотрится шикарно */
}
/* --- COMMERCE PAGE STYLES (Digital Gold) --- */

.commerce-hero {
    height: 80vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    /* ФОТО: Абстрактне золото / Цифрові потоки / Розкіш */
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9)), 
                      url('https://images.unsplash.com/photo-1634117622592-114e3024f77d?q=80&w=1974&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    color: #fff;
    margin-top: -80px;
    padding-top: 80px;
}

/* --- COMMERCE PAGE STYLES (Digital Gold) --- */

/* Это блок с фото для фона */
.commerce-hero {
    height: 80vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    /* ФОТО: Абстрактное золото / Цифровые потоки / Роскошь */
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9)), 
                      url('https://images.unsplash.com/photo-1634117622592-114e3024f77d?q=80&w=1974&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    color: #fff; /* Белый текст */
    margin-top: -80px;
    padding-top: 80px;
}
/* Золотой акцент для Commerce страницы */
.commerce-page .p-num,
.commerce-page .eyebrow {
    color: #FFD700 !important; /* Золотой цвет */
    border-color: #FFD700;
}

.commerce-page .process-card:hover {
    border-color: #FFD700;
    box-shadow: 0 10px 40px rgba(255, 215, 0, 0.15);
}

.commerce-page .pillar-details li::before {
    background-color: #FFD700;
}

.commerce-page .btn-large:hover {
    background: #FFD700;
    color: #000;
}
/* --- ФОТО ДЛЯ COMMERCE (Цифровые Активы / Блокчейн-структура) --- */

.commerce-hero {
    /* Принудительно устанавливаем фон */
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.9)), 
                      url('https://images.unsplash.com/photo-1639762681485-074b7f938ba0?q=80&w=2070&auto=format&fit=crop') !important;
    
    /* Фиксация позиции и размеров */
    background-size: cover !important;
    background-position: center center !important;
    
    /* Параметры блока */
    height: 80vh !important;
    min-height: 600px !important;
    display: flex !important;
    align-items: center !important;
    margin-top: -80px !important;
    padding-top: 80px !important;
    color: #fff !important;
}
}
/* --- НОВОЕ ОРИГИНАЛЬНОЕ ФОТО ДЛЯ ГЛАВНОЙ (Защитный Купол) --- */

.home-hero {
    /* Принудительно меняем фон на новое фото */
    background: linear-gradient(rgba(0, 5, 20, 0.6), rgba(0, 0, 0, 0.8)), 
                url('image_0.png') !important;
    
    /* Фиксируем параметры отображения */
    background-size: cover !important;
    background-position: center center !important;
    
    /* Гарантируем размеры блока */
    height: 95vh !important;
    min-height: 700px !important;
    display: flex !important;
    align-items: center !important;
    margin-top: -80px !important;
    padding-top: 80px !important;
}
/* --- CUSTOMER EXPERIENCE PAGE STYLES --- */

.cx-hero {
    height: 80vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    /* ФОТО: Абстрактний нейронний інтерфейс / Цифрова людина */
    /* Використовуємо глибокий синій градієнт для контрасту */
    background-image: linear-gradient(rgba(0, 10, 30, 0.7), rgba(0, 0, 0, 0.9)), 
                      url('https://images.unsplash.com/photo-1620712943543-bcc4688e7485?q=80&w=1965&auto=format&fit=crop') !important;
    background-size: cover;
    background-position: center;
    color: #fff;
    margin-top: -80px;
    padding-top: 80px;
}

/* Акцентний колір для цієї сторінки (Електрик блакитний - #00e5ff) */
.cx-page .p-num,
.cx-page .eyebrow {
    color: #00e5ff !important;
    border-color: #00e5ff;
}

.cx-page .process-card:hover {
    border-color: #00e5ff;
    box-shadow: 0 10px 40px rgba(0, 229, 255, 0.15);
}

.cx-page .pillar-details li::before {
    background-color: #00e5ff;
}

.cx-page .btn-large:hover {
    background: #00e5ff;
    color: #000;
}

/* --- TECH & DATA PAGE STYLES (Cyber Green) --- */

.tech-hero {
    /* Принудительные настройки для фона */
    height: 80vh !important;
    min-height: 600px !important;
    display: flex !important;
    align-items: center !important;
    
    /* ФОТО: Оптоволокно / Квантовые нити / Цифровая нервная система */
    background-image: linear-gradient(rgba(0, 10, 5, 0.8), rgba(0, 0, 0, 0.95)), 
                      url('https://images.unsplash.com/photo-1544197150-b99a580bbcbf?q=80&w=1935&auto=format&fit=crop') !important;
    
    background-size: cover !important;
    background-position: center !important;
    
    color: #fff !important;
    margin-top: -80px !important;
    padding-top: 80px !important;
}

/* Акцентный цвет: Matrix Green (#00ff9d) */
.tech-page .p-num,
.tech-page .eyebrow {
    color: #00ff9d !important;
    border-color: #00ff9d;
}

.tech-page .process-card:hover {
    border-color: #00ff9d;
    box-shadow: 0 10px 40px rgba(0, 255, 157, 0.15);
}

.tech-page .pillar-details li::before {
    background-color: #00ff9d;
}

.tech-page .btn-large:hover {
    background: #00ff9d;
    color: #000;
}
/* --- ФОН ГЛАВНОЙ: ВАРИАНТ 1 (Кибер-Город) --- */
.home-hero {
    /* Темный градиент поверх фото ночного мегаполиса */
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9)), 
                url('https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?q=80&w=2070&auto=format&fit=crop') !important;
    
    background-size: cover !important;
    background-position: center !important;
    height: 95vh !important;
    min-height: 700px !important;
    display: flex !important;
    align-items: center !important;
    margin-top: -80px !important;
    padding-top: 80px !important;
}
/* --- НОВОЕ ФОТО ДЛЯ TECH & DATA (Квантовое Ядро) --- */

.tech-hero {
    /* Принудительная замена фона */
    background: linear-gradient(rgba(0, 10, 30, 0.7), rgba(0, 0, 0, 0.9)), 
                url('https://images.unsplash.com/photo-1591453089816-0fbb971b454c?q=80&w=2070&auto=format&fit=crop') !important;
    
    /* Фиксация */
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important; /* Параллакс эффект */
    
    /* Размеры */
    height: 80vh !important;
    min-height: 600px !important;
    display: flex !important;
    align-items: center !important;
    margin-top: -80px !important;
    padding-top: 80px !important;
    color: #fff !important;
}
/* =========================================
   COOKIE BANNER & NOTIFICATIONS
   ========================================= */
.cookie-banner {
    position: fixed;
    bottom: 30px;
    right: 30px;
    max-width: 400px;
    background: rgba(10, 25, 47, 0.95); /* Глибокий темний колір бренду */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(100, 255, 218, 0.2); /* Легкий акцент Teal */
    border-radius: 12px;
    padding: 25px;
    z-index: 9999;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    color: #fff;
    font-family: var(--font-main, sans-serif);
    animation: slideUp 0.5s ease-out forwards;
    display: none; /* Приховано за замовчуванням */
}

.cookie-banner.active {
    display: block;
}

.cookie-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;
}

.cookie-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #a8b2d1;
    margin-bottom: 20px;
}

.cookie-text a {
    color: #64ffda; /* Teal accent */
    text-decoration: underline;
}

.cookie-actions {
    display: flex;
    gap: 15px;
}

.btn-accept {
    background: #64ffda;
    color: #0a192f;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
}

.btn-accept:hover {
    background: #4cd6b3;
    transform: translateY(-2px);
}

.btn-decline {
    background: transparent;
    border: 1px solid #a8b2d1;
    color: #a8b2d1;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-decline:hover {
    border-color: #fff;
    color: #fff;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
    .cookie-banner {
        bottom: 0;
        right: 0;
        left: 0;
        max-width: 100%;
        border-radius: 12px 12px 0 0;
        border-bottom: none;
    }
}