/* ============================================
   EIO - Engineering Innovation Oasis
   Corporate Security Website Styles
   Blue/Dark Blue Theme
   ============================================ */

/* CSS Variables */
:root {
    /* Primary Colors - Blue Scale */
    --primary-darkest: #0a1628;
    --primary-darker: #0f2341;
    --primary-dark: #1e3a5f;
    --primary: #2563eb;
    --primary-light: #3b82f6;
    --primary-lighter: #60a5fa;

    /* Accent */
    --accent: #06b6d4;
    --accent-light: #22d3ee;

    /* Neutrals */
    --text-dark: #1e293b;
    --text-body: #475569;
    --text-light: #94a3b8;
    --text-lighter: #cbd5e1;

    /* Backgrounds */
    --bg-white: #ffffff;
    --bg-light: #f8fafc;
    --bg-gray: #f1f5f9;
    --bg-dark: #0f172a;

    /* Functional */
    --success: #10b981;
    --error: #ef4444;

    /* Effects */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-blue: 0 10px 40px rgba(37, 99, 235, 0.3);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
}

/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    overflow-x: hidden;
}

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-body);
    background-color: var(--bg-white);
    overflow-x: hidden;
    max-width: 100vw;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-base);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul {
    list-style: none;
}

/* Container */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Section Labels & Titles */
.section-label {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
    margin-bottom: 16px;
}

.section-label::before {
    content: '';
    width: 40px;
    height: 2px;
    background: var(--primary);
    margin-right: 12px;
}

.section-label.light {
    color: var(--accent-light);
}

.section-label.light::before {
    background: var(--accent-light);
}

.section-title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    margin-bottom: 20px;
}

.section-title.light {
    color: var(--bg-white);
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--text-lighter);
    max-width: 600px;
}

.section-header {
    margin-bottom: 60px;
}

.section-header.centered {
    text-align: center;
}

.section-header.centered .section-label::before {
    display: none;
}

.section-header.centered .section-subtitle {
    margin: 0 auto;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-base);
}

.btn-primary {
    background: var(--primary);
    color: var(--bg-white);
}

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

.btn-outline {
    background: transparent;
    color: var(--bg-white);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--bg-white);
}

.btn-white {
    background: var(--bg-white);
    color: var(--primary-dark);
}

.btn-white:hover {
    background: var(--bg-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.btn-full {
    width: 100%;
}

.btn i {
    font-size: 0.875rem;
    transition: transform var(--transition-base);
}

.btn:hover i {
    transform: translateX(4px);
}

/* ============================================
   HEADER
   ============================================ */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    transition: var(--transition-base);
}

.header.scrolled {
    background: var(--primary-darkest);
    box-shadow: var(--shadow-lg);
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 40px;
    transition: var(--transition-base);
}

.header.scrolled .header-container {
    padding: 12px 40px;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo img {
    height: 50px;
    width: auto;
    transition: var(--transition-base);
}

.header.scrolled .logo img {
    height: 40px;
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-name {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bg-white);
    line-height: 1;
}

.logo-tagline {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.05em;
}

/* Navigation */
.nav {
    display: flex;
    align-items: center;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-list a {
    padding: 10px 20px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    border-radius: var(--radius-md);
    transition: var(--transition-base);
}

.nav-list a:hover,
.nav-list a.active {
    color: var(--bg-white);
    background: rgba(255, 255, 255, 0.1);
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-phone {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    color: var(--bg-white);
    font-weight: 500;
    font-size: 0.875rem;
}

.header-phone:hover {
    background: var(--primary);
}

.header-phone i {
    font-size: 0.875rem;
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-menu-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--bg-white);
    border-radius: 2px;
    transition: var(--transition-base);
}

.mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--primary-darkest);
    max-width: 100vw;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: brightness(0.4) contrast(1.2) saturate(0.8);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(37, 99, 235, 0.3) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(6, 182, 212, 0.15) 0%, transparent 50%),
        linear-gradient(
            180deg,
            rgba(10, 22, 40, 0.7) 0%,
            rgba(15, 35, 65, 0.6) 30%,
            rgba(30, 58, 95, 0.5) 70%,
            rgba(10, 22, 40, 0.8) 100%
        );
}

/* Futuristic grid pattern */
.hero-grid-pattern {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(37, 99, 235, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.08) 1px, transparent 1px);
    background-size: 80px 80px;
    animation: gridMove 20s linear infinite;
    mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
}

@keyframes gridMove {
    0% { transform: perspective(500px) rotateX(60deg) translateY(0); }
    100% { transform: perspective(500px) rotateX(60deg) translateY(80px); }
}

/* Scan lines effect */
.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.03) 2px,
        rgba(0, 0, 0, 0.03) 4px
    );
    pointer-events: none;
    z-index: 1;
}

/* City skyline silhouette */
.hero-city-silhouette {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background:
        linear-gradient(to bottom, transparent 0%, rgba(10, 22, 40, 0.9) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 400' preserveAspectRatio='xMidYMax slice'%3E%3Cpath fill='%230a1628' d='M0,400 L0,320 L40,320 L40,280 L60,280 L60,320 L100,320 L100,260 L120,260 L120,240 L140,240 L140,260 L180,260 L180,220 L200,220 L200,180 L220,180 L220,220 L260,220 L260,280 L300,280 L300,200 L320,200 L320,160 L340,160 L340,140 L360,140 L360,160 L380,160 L380,200 L420,200 L420,240 L460,240 L460,180 L480,180 L480,120 L500,120 L500,100 L520,100 L520,80 L540,80 L540,100 L560,100 L560,120 L580,120 L580,180 L620,180 L620,220 L660,220 L660,160 L680,160 L680,140 L700,140 L700,160 L740,160 L740,200 L780,200 L780,260 L820,260 L820,180 L840,180 L840,140 L860,140 L860,100 L880,100 L880,60 L900,60 L900,40 L920,40 L920,60 L940,60 L940,100 L960,100 L960,140 L980,140 L980,180 L1020,180 L1020,220 L1060,220 L1060,160 L1080,160 L1080,120 L1100,120 L1100,160 L1140,160 L1140,200 L1180,200 L1180,140 L1200,140 L1200,100 L1220,100 L1220,80 L1240,80 L1240,100 L1260,100 L1260,140 L1300,140 L1300,180 L1340,180 L1340,240 L1380,240 L1380,200 L1400,200 L1400,160 L1420,160 L1420,200 L1460,200 L1460,260 L1500,260 L1500,180 L1520,180 L1520,220 L1560,220 L1560,280 L1600,280 L1600,240 L1640,240 L1640,200 L1660,200 L1660,240 L1700,240 L1700,300 L1740,300 L1740,260 L1780,260 L1780,300 L1820,300 L1820,340 L1860,340 L1860,300 L1900,300 L1900,340 L1920,340 L1920,400 Z'/%3E%3C/svg%3E") no-repeat bottom center;
    background-size: cover;
    z-index: 1;
    pointer-events: none;
}

/* Floating particles */
.hero-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.hero-particles::before,
.hero-particles::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow:
        100px 100px 0 rgba(37, 99, 235, 0.8),
        200px 300px 0 rgba(6, 182, 212, 0.6),
        400px 150px 0 rgba(37, 99, 235, 0.7),
        600px 250px 0 rgba(6, 182, 212, 0.5),
        800px 100px 0 rgba(37, 99, 235, 0.6),
        1000px 350px 0 rgba(6, 182, 212, 0.7),
        1200px 200px 0 rgba(37, 99, 235, 0.5),
        1400px 300px 0 rgba(6, 182, 212, 0.8),
        150px 400px 0 rgba(37, 99, 235, 0.6),
        350px 450px 0 rgba(6, 182, 212, 0.5),
        550px 380px 0 rgba(37, 99, 235, 0.7),
        750px 420px 0 rgba(6, 182, 212, 0.6),
        950px 480px 0 rgba(37, 99, 235, 0.5),
        1150px 400px 0 rgba(6, 182, 212, 0.7),
        1350px 450px 0 rgba(37, 99, 235, 0.6);
    animation: floatParticles 15s linear infinite;
}

.hero-particles::after {
    animation-delay: -7.5s;
    opacity: 0.7;
}

@keyframes floatParticles {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100vh) translateX(50px); opacity: 0; }
}

/* Glowing orbs */
.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
    animation: glowPulse 8s ease-in-out infinite;
}

.hero-glow-1 {
    width: 400px;
    height: 400px;
    background: rgba(37, 99, 235, 0.3);
    top: 10%;
    right: 10%;
}

.hero-glow-2 {
    width: 300px;
    height: 300px;
    background: rgba(6, 182, 212, 0.25);
    bottom: 20%;
    left: 5%;
    animation-delay: -4s;
}

.hero-glow-3 {
    width: 200px;
    height: 200px;
    background: rgba(37, 99, 235, 0.2);
    top: 40%;
    left: 30%;
    animation-delay: -2s;
}

@keyframes glowPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

.hero-content {
    position: relative;
    z-index: 10;
    max-width: 800px;
    padding: 120px 40px 80px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    color: var(--bg-white);
    margin-bottom: 30px;
    backdrop-filter: blur(10px);
    animation: fadeInUp 0.8s ease;
}

.badge-dot {
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.hero-title {
    font-size: clamp(1.75rem, 5vw, 4rem);
    font-weight: 700;
    color: var(--bg-white);
    line-height: 1.1;
    margin-bottom: 24px;
    animation: fadeInUp 0.8s ease 0.1s both;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.text-gradient {
    background: linear-gradient(135deg, var(--accent-light), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 600px;
    animation: fadeInUp 0.8s ease 0.2s both;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    animation: fadeInUp 0.8s ease 0.3s both;
}

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

/* Scroll Indicator */
.hero-scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    animation: fadeIn 1s ease 0.5s both;
    z-index: 10;
}

.scroll-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, var(--primary-light), transparent);
    animation: scrollPulse 2s infinite;
}

@keyframes scrollPulse {
    0% { transform: scaleY(0); transform-origin: top; }
    50% { transform: scaleY(1); transform-origin: top; }
    51% { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================
   STATS SECTION
   ============================================ */
.stats {
    background: var(--primary-darkest);
    padding: 60px 0;
    position: relative;
}

.stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
}

.stats-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.stat-item {
    text-align: center;
    padding: 20px 50px;
    position: relative;
}

.stat-number {
    font-family: 'Outfit', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: var(--bg-white);
    line-height: 1;
    display: inline;
}

.stat-suffix {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: var(--primary-light);
    display: inline;
}

.stat-label {
    font-size: 0.9375rem;
    color: var(--text-lighter);
    margin-top: 8px;
}

.stat-divider {
    width: 1px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
}

/* ============================================
   ABOUT SECTION
   ============================================ */
.about {
    padding: 120px 0;
    background: var(--bg-white);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.about-text {
    font-size: 1.0625rem;
    color: var(--text-body);
    line-height: 1.8;
    margin-bottom: 20px;
}

.about-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 40px;
}

.feature-item {
    display: flex;
    gap: 16px;
}

.feature-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-icon i {
    font-size: 1.25rem;
    color: var(--bg-white);
}

.feature-text h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.feature-text p {
    font-size: 0.875rem;
    color: var(--text-light);
}

/* About Visual */
.about-visual {
    position: relative;
}

.about-image-wrapper {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.about-image-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 50%, rgba(37, 99, 235, 0.3));
    z-index: 1;
}

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

.about-accent-box {
    position: absolute;
    bottom: -30px;
    left: -30px;
    background: var(--primary);
    padding: 30px 40px;
    border-radius: var(--radius-lg);
    text-align: center;
    z-index: 2;
    box-shadow: var(--shadow-blue);
}

.accent-number {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--bg-white);
    line-height: 1;
}

.accent-text {
    display: block;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 4px;
}

/* ============================================
   SERVICES SECTION
   ============================================ */
.services {
    padding: 100px 0 0;
    background: var(--bg-white);
}

.section-subtitle-dark {
    font-size: 1.125rem;
    color: var(--text-body);
    max-width: 600px;
    margin: 0 auto;
}

/* Services Tiles Grid - Like ipsotek */
.services-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-top: 60px;
}

.service-tile {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.service-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease, filter 0.6s ease;
}

.tile-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    transition: background 0.4s ease;
}

.tile-title {
    position: relative;
    z-index: 2;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 400;
    color: var(--bg-white);
    text-align: center;
    padding: 20px;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s ease;
}

/* Hover Effects */
.service-tile:hover img {
    transform: scale(1.08);
}

.service-tile:hover .tile-overlay {
    background: rgba(10, 22, 40, 0.5);
}

.service-tile:hover .tile-title {
    transform: translateY(-5px);
}

/* Visible state for scroll animation */
.service-tile {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.service-tile.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animation delays for stagger effect */
.service-tile:nth-child(1) { transition-delay: 0s; }
.service-tile:nth-child(2) { transition-delay: 0.1s; }
.service-tile:nth-child(3) { transition-delay: 0.2s; }
.service-tile:nth-child(4) { transition-delay: 0.3s; }
.service-tile:nth-child(5) { transition-delay: 0.4s; }
.service-tile:nth-child(6) { transition-delay: 0.5s; }
.service-tile:nth-child(7) { transition-delay: 0.6s; }
.service-tile:nth-child(8) { transition-delay: 0.7s; }
.service-tile:nth-child(9) { transition-delay: 0.8s; }

/* ============================================
   PARTNERS SECTION
   ============================================ */
.partners {
    padding: 100px 0;
    background: var(--bg-light);
}

.partners-carousel {
    overflow: hidden;
    margin-top: 50px;
    position: relative;
}

.partners-carousel::before,
.partners-carousel::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 150px;
    z-index: 2;
    pointer-events: none;
}

.partners-carousel::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-light), transparent);
}

.partners-carousel::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-light), transparent);
}

.partners-track {
    display: flex;
    gap: 80px;
    animation: scroll 25s linear infinite;
    width: max-content;
}

.partner-logo {
    flex-shrink: 0;
    width: 180px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: grayscale(100%);
    opacity: 0.5;
    transition: var(--transition-base);
}

.partner-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.partner-logo img {
    max-width: 100%;
    max-height: 60px;
    object-fit: contain;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ============================================
   CTA SECTION
   ============================================ */
.cta {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
}

.cta-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.cta-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
}

.cta-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.cta h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: var(--bg-white);
    margin-bottom: 16px;
}

.cta p {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 32px;
}

/* ============================================
   CONTACT SECTION
   ============================================ */
.contact {
    padding: 120px 0;
    background: var(--bg-white);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

.contact-description {
    font-size: 1.0625rem;
    color: var(--text-body);
    margin-bottom: 40px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-item {
    display: flex;
    gap: 20px;
}

.contact-icon {
    width: 56px;
    height: 56px;
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition-base);
}

.contact-item:hover .contact-icon {
    background: var(--primary);
}

.contact-icon i {
    font-size: 1.25rem;
    color: var(--primary);
    transition: var(--transition-base);
}

.contact-item:hover .contact-icon i {
    color: var(--bg-white);
}

.contact-text h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.contact-text p {
    font-size: 0.9375rem;
    color: var(--text-body);
}

/* Contact Form */
.contact-form-wrapper {
    background: var(--bg-light);
    padding: 40px;
    border-radius: var(--radius-xl);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-dark);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 14px 18px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9375rem;
    border: 2px solid var(--bg-gray);
    border-radius: var(--radius-md);
    background: var(--bg-white);
    color: var(--text-dark);
    transition: var(--transition-base);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-light);
}

.form-group select {
    cursor: pointer;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    background: var(--primary-darkest);
    color: var(--text-lighter);
}

.footer-top {
    padding: 80px 0 60px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 60px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.footer-logo img {
    height: 45px;
}

.footer-logo span {
    font-family: 'Outfit', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bg-white);
}

.footer-brand p {
    font-size: 0.9375rem;
    color: var(--text-lighter);
    line-height: 1.7;
    margin-bottom: 24px;
}

.footer-social {
    display: flex;
    gap: 12px;
}

.footer-social a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-lighter);
    transition: var(--transition-base);
}

.footer-social a:hover {
    background: var(--primary);
    color: var(--bg-white);
}

.footer-links h4,
.footer-contact h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bg-white);
    margin-bottom: 24px;
}

.footer-links ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    font-size: 0.9375rem;
    color: var(--text-lighter);
    transition: var(--transition-base);
}

.footer-links a:hover {
    color: var(--primary-light);
    padding-left: 8px;
}

.footer-contact ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.9375rem;
}

.footer-contact i {
    color: var(--primary-light);
    margin-top: 4px;
}

.footer-bottom {
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-bottom p {
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-light);
}

/* ============================================
   WHATSAPP WIDGET
   ============================================ */
.whatsapp-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
}

.whatsapp-btn {
    width: 60px;
    height: 60px;
    background: #25d366;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
    transition: var(--transition-base);
}

.whatsapp-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 30px rgba(37, 211, 102, 0.5);
}

.whatsapp-btn i {
    font-size: 2rem;
    color: var(--bg-white);
}

.whatsapp-popup {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 360px;
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.95);
    transition: var(--transition-base);
}

.whatsapp-popup.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.popup-header {
    background: linear-gradient(135deg, #075e54, #128c7e);
    color: var(--bg-white);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.popup-header img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--bg-white);
    padding: 8px;
    object-fit: contain;
}

.popup-title h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bg-white);
}

.popup-title p {
    font-size: 0.75rem;
    opacity: 0.8;
}

.popup-close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--bg-white);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.popup-body {
    padding: 20px;
    background: #e5ddd5;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zM22.344 0L13.858 8.485 15.272 9.9l9.9-9.9h-2.828zM32 0l-3.172 3.172L27.414 4.586 32 9.172V0zm0 0' fill='%23128c7e' fill-opacity='.02'/%3E%3C/svg%3E");
    min-height: 100px;
}

.chat-message {
    background: var(--bg-white);
    padding: 14px 18px;
    border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
    max-width: 85%;
    box-shadow: var(--shadow-sm);
}

.chat-message p {
    font-size: 0.9375rem;
    color: var(--text-dark);
}

.message-time {
    font-size: 0.6875rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
}

.message-time::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #25d366;
    border-radius: 50%;
}

.popup-footer {
    padding: 16px 20px;
    background: var(--bg-light);
}

.whatsapp-chat-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    background: #25d366;
    color: var(--bg-white);
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.9375rem;
    transition: var(--transition-base);
}

.whatsapp-chat-btn:hover {
    background: #128c7e;
}

.whatsapp-chat-btn i {
    font-size: 1.25rem;
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */
@media (max-width: 1200px) {
    .services-tiles {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr;
    }

    .footer-contact {
        grid-column: span 3;
        margin-top: 20px;
    }
}

@media (max-width: 1024px) {
    .about-grid,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .about-visual {
        order: -1;
    }

    .stat-item {
        padding: 20px 30px;
    }
}

@media (max-width: 768px) {
    /* Header */
    .header-container {
        padding: 16px 20px;
    }

    .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--primary-darkest);
        flex-direction: column;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: var(--transition-base);
    }

    .nav.active {
        opacity: 1;
        visibility: visible;
    }

    .nav-list {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .nav-list a {
        font-size: 1.5rem;
        padding: 16px 32px;
    }

    .header-phone {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
        z-index: 1001;
    }

    /* Hero */
    .hero-content {
        padding: 140px 16px 100px;
        max-width: 100%;
    }

    .hero-title {
        font-size: clamp(1.5rem, 8vw, 2.5rem);
    }

    .hero-title br {
        display: none;
    }

    .hero-description {
        font-size: 1rem;
    }

    .hero-badge {
        font-size: 0.75rem;
        padding: 6px 14px 6px 10px;
    }

    .hero-particles,
    .hero-glow {
        display: none;
    }

    .hero-city-silhouette {
        height: 25%;
    }

    .hero-grid-pattern {
        display: none;
    }

    .hero-scroll-indicator {
        display: none;
    }

    /* Stats */
    .stats-grid {
        flex-direction: column;
        gap: 10px;
    }

    .stat-divider {
        width: 60px;
        height: 1px;
    }

    .stat-item {
        padding: 15px;
    }

    /* Services */
    .services-tiles {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-tile {
        aspect-ratio: 4 / 3;
    }

    .tile-title {
        font-size: 1.125rem;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-contact {
        grid-column: auto;
    }

    /* Form */
    .form-row {
        grid-template-columns: 1fr;
    }

    .contact-form-wrapper {
        padding: 30px 20px;
    }

    /* WhatsApp */
    .whatsapp-popup {
        width: 320px;
        right: -10px;
    }
}

@media (max-width: 480px) {
    .hero-buttons {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }

    .about-accent-box {
        bottom: -20px;
        left: 20px;
        padding: 20px 30px;
    }

    .accent-number {
        font-size: 2rem;
    }

    .logo-tagline {
        display: none;
    }

    /* Services - Single column on mobile */
    .services-tiles {
        grid-template-columns: 1fr;
    }

    .service-tile {
        aspect-ratio: 16 / 9;
    }

    .tile-title {
        font-size: 1.25rem;
    }
}

/* ============================================
   ANIMATIONS & UTILITIES
   ============================================ */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Smooth hover for all interactive elements */
button, a, input, select, textarea {
    -webkit-tap-highlight-color: transparent;
}

/* Selection color */
::selection {
    background: var(--primary);
    color: var(--bg-white);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-light);
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}