:root {
    --header-height: 48px; /* keep in sync with .navbar total height */

    /* Primary Color Palette - Blues */
    --primary-blue: #1e40af;
    --primary-blue-light: #3b82f6;
    --primary-blue-lighter: #60a5fa;
    --primary-blue-dark: #1e3a8a;

    /* Accent Colors - Cyan/Teal */
    --accent-cyan: #06b6d4;
    --accent-cyan-light: #22d3ee;
    --accent-cyan-dark: #0891b2;

    /* Secondary Colors */
    --gray-slate: #64748b;
    --gray-light: #e2e8f0;
    --gray-dark: #1e293b;
    --gray-lighter: #94a3b8;

    /* Status Colors - Adjusted to match brand */
    --success: #10b981;
    --success-bg: rgba(16, 185, 129, 0.15);
    --success-text: #065f46;
    --error: #ef4444;
    --error-bg: rgba(239, 68, 68, 0.15);
    --error-text: #dc2626;

    /* White/Opacity variations */
    --white: #ffffff;
    --white-95: rgba(255, 255, 255, 0.95);
    --white-90: rgba(255, 255, 255, 0.9);
    --white-85: rgba(255, 255, 255, 0.85);
    --white-70: rgba(255, 255, 255, 0.7);
    --white-60: rgba(255, 255, 255, 0.6);
    --white-20: rgba(255, 255, 255, 0.2);
    --white-15: rgba(255, 255, 255, 0.15);
    --white-10: rgba(255, 255, 255, 0.1);
    --white-05: rgba(255, 255, 255, 0.05);

    /* Background Colors */
    --bg-dark: #0a0f1a;
    --bg-section-1: rgba(20, 30, 50, 0.95);
    --bg-section-2: rgba(30, 40, 60, 0.95);
    --bg-section-3: rgba(40, 50, 70, 0.95);
    --bg-card: rgba(255, 255, 255, 0.1);
    --bg-card-hover: rgba(255, 255, 255, 0.15);

    /* Gradient Colors */
    --gradient-primary: linear-gradient(135deg, #1e40af 0%, #0369a1 100%);
    --gradient-accent: linear-gradient(135deg, #1e40af 0%, #06b6d4 100%);
    --gradient-light: linear-gradient(135deg, #60a5fa 0%, #06b6d4 100%);
    --gradient-text: linear-gradient(135deg, #F0F4F8 0%, #FAFAFA 100%);
    --gradient-brand: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%);
}

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    color: #1e293b;
    background: #0a0f1a;
}

/* Enhanced Navbar */
.navbar {
    position: static;
    background: rgba(10, 15, 25, 0.85);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.navbar.scrolled {
    background: rgba(10, 15, 25, 0.95);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3rem;
}

.nav-brand {
    display: flex;
    align-items: center;
}

.brand-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.brand-link:hover {
    transform: translateY(-1px);
}

.nav-logo {
    height: 2rem;
    width: auto;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.brand-link:hover .nav-logo {
    transform: scale(1.05);
}

.nav-brand-text {
    font-size: 1.25rem;
    font-weight: 700;
    background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.3s ease;
    line-height: 1.2;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
    border-radius: 0.4rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.nav-link:hover::before {
    left: 100%;
}

.nav-link:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.nav-link.active {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.15);
}

.nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
}

.nav-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 2;
}

.nav-text {
    font-weight: 500;
}

.nav-cta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%);
    color: #1e293b;
    text-decoration: none;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    font-size: 0.85rem;
}

.nav-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(30, 64, 175, 0.1), transparent);
    transition: left 0.5s ease;
}

.nav-cta:hover::before {
    left: 100%;
}

.nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
}

.nav-cta svg {
    width: 0.8rem;
    height: 0.8rem;
    transition: transform 0.3s ease;
}

.nav-cta:hover svg {
    transform: translateX(2px);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: background 0.3s ease;
}

.nav-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}

.hamburger-line {
    width: 1.5rem;
    height: 2px;
    background: #475569;
    transition: all 0.3s ease;
    border-radius: 1px;
}

.nav-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.nav-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Hero Section */
.hero {
    text-align: center;
    padding: 6rem 0 4rem 0;
    min-height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    perspective: 1000px;
}

/* Dark base with level 7 blur + animated gradient */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, #0a0f1a 0%, #0f1428 50%, #0a0f1a 100%);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    z-index: 0;
    animation: gradientShift 20s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% {
        filter: hue-rotate(0deg) brightness(1);
    }
    50% {
        filter: hue-rotate(5deg) brightness(1.05);
    }
}

/* Wave 1 - Main flowing wave (background) */
.wave-1 {
    position: absolute;
    top: 30%;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(180deg,
        rgba(30, 64, 175, 0.28) 0%,
        rgba(30, 64, 175, 0.20) 30%,
        rgba(6, 182, 212, 0.24) 50%,
        transparent 100%
    );
    clip-path: polygon(
        0% 42%, 4% 40%, 8% 39%, 12% 38%, 15% 40%, 18% 41%, 22% 39%, 25% 38%, 28% 40%, 31% 41%, 35% 39%, 38% 40%, 42% 41%, 45% 42%, 48% 40%, 52% 39%, 55% 41%, 58% 42%, 62% 40%, 65% 39%, 68% 41%, 71% 42%, 75% 41%, 78% 40%, 82% 41%, 85% 42%, 88% 40%, 91% 39%, 95% 41%, 98% 40%, 100% 40%,
        100% 100%,
        0% 100%
    );
    animation: waveFlow1 5s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    will-change: clip-path;
    filter: blur(12px) drop-shadow(0 4px 12px rgba(6, 182, 212, 0.22));
    opacity: 0.95;
}

@keyframes waveFlow1 {
    0%, 100% {
    clip-path: polygon(
        0% 42%, 4% 41%, 8% 38%, 12% 36%, 15% 38%, 18% 42%, 22% 37%, 25% 35%, 28% 38%, 31% 42%, 35% 38%, 38% 36%, 42% 40%, 45% 43%, 48% 39%, 52% 37%, 55% 40%, 58% 44%, 62% 39%, 65% 37%, 68% 40%, 71% 44%, 75% 40%, 78% 38%, 82% 41%, 85% 44%, 88% 39%, 91% 37%, 95% 40%, 98% 42%, 100% 40%,
        100% 100%,
        0% 100%
    );
    }
    50% {
        clip-path: polygon(
            0% 38%, 4% 40%, 8% 39%, 12% 42%, 15% 38%, 18% 35%, 22% 39%, 25% 42%, 28% 39%, 31% 36%, 35% 40%, 38% 43%, 42% 39%, 45% 36%, 48% 40%, 52% 43%, 55% 39%, 58% 36%, 62% 41%, 65% 44%, 68% 39%, 71% 36%, 75% 40%, 78% 43%, 82% 38%, 85% 35%, 88% 40%, 91% 43%, 95% 39%, 98% 36%, 100% 40%,
            100% 100%,
            0% 100%
        );
    }
}

/* Wave 2 - Secondary wave (lower background) */
.wave-2 {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 35%;
    background: linear-gradient(180deg,
        rgba(6, 182, 212, 0.24) 0%,
        rgba(6, 182, 212, 0.28) 25%,
        rgba(30, 64, 175, 0.22) 50%,
        transparent 100%
    );
    clip-path: polygon(
        0% 52%, 5% 50%, 10% 49%, 15% 48%, 20% 50%, 25% 51%, 30% 49%, 35% 47%, 40% 50%, 45% 52%, 50% 49%, 55% 47%, 60% 50%, 65% 52%, 70% 49%, 75% 48%, 80% 50%, 85% 51%, 90% 49%, 95% 48%, 100% 50%,
        100% 100%,
        0% 100%
    );
    animation: waveFlow2 6s ease-in-out infinite reverse;
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    will-change: clip-path;
    filter: blur(12px) drop-shadow(0 4px 12px rgba(30, 64, 175, 0.22));
    opacity: 0.95;
}

@keyframes waveFlow2 {
    0%, 100% {
    clip-path: polygon(
        0% 52%, 5% 50%, 10% 49%, 15% 47%, 20% 50%, 25% 53%, 30% 48%, 35% 45%, 40% 49%, 45% 53%, 50% 49%, 55% 46%, 60% 50%, 65% 53%, 70% 49%, 75% 47%, 80% 50%, 85% 52%, 90% 49%, 95% 47%, 100% 50%,
        100% 100%,
        0% 100%
    );
    }
    50% {
        clip-path: polygon(
            0% 49%, 5% 51%, 10% 52%, 15% 49%, 20% 46%, 25% 50%, 30% 53%, 35% 50%, 40% 47%, 45% 51%, 50% 54%, 55% 50%, 60% 47%, 65% 51%, 70% 53%, 75% 50%, 80% 47%, 85% 51%, 90% 54%, 95% 50%, 100% 50%,
            100% 100%,
            0% 100%
        );
    }
}


/* Subtle gradient overlay */
.wave-glow-1 {
    position: absolute;
    top: 15%;
    left: 20%;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(30, 64, 175, 0.20), transparent 70%);
    border-radius: 50%;
    filter: blur(70px);
    z-index: 0;
    animation: glowShift1 6s ease-in-out infinite;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.7;
}

@keyframes glowShift1 {
    0%, 100% { transform: translate(0, 0); opacity: 0.5; }
    50% { transform: translate(45px, -45px); opacity: 0.8; }
}

.wave-glow-2 {
    position: absolute;
    bottom: 15%;
    right: 15%;
    width: 530px;
    height: 530px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.19), transparent 70%);
    border-radius: 50%;
    filter: blur(75px);
    z-index: 0;
    animation: glowShift2 8s ease-in-out infinite;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.7;
}

@keyframes glowShift2 {
    0%, 100% { transform: translate(0, 0); opacity: 0.5; }
    50% { transform: translate(-55px, 55px); opacity: 0.8; }
}

/* Light rays for depth */
.light-ray {
    position: absolute;
    width: 200%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(6, 182, 212, 0.1) 20%,
        rgba(96, 165, 250, 0.15) 50%,
        rgba(6, 182, 212, 0.1) 80%,
        transparent 100%
    );
    pointer-events: none;
    filter: blur(2px);
    z-index: 0;
    animation: raySweep 15s ease-in-out infinite;
}

.light-ray.ray-1 {
    top: 15%;
    left: 0;
    transform: rotate(-5deg);
    animation-delay: 0s;
    opacity: 0.6;
}

.light-ray.ray-2 {
    top: 40%;
    left: 0;
    transform: rotate(3deg);
    animation-delay: -5s;
    opacity: 0.4;
}

.light-ray.ray-3 {
    top: 65%;
    left: 0;
    transform: rotate(-2deg);
    animation-delay: -10s;
    opacity: 0.5;
}

@keyframes raySweep {
    0%, 100% {
        transform: translateX(-50%) rotate(var(--ray-rotate, 0deg));
        opacity: 0.3;
    }
    50% {
        transform: translateX(0) rotate(var(--ray-rotate, 0deg));
        opacity: 0.7;
    }
}

/* Parallax depth layers */
.depth-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
}

.depth-layer.layer-1 {
    background: radial-gradient(
        ellipse 800px 600px at 20% 30%,
        rgba(30, 64, 175, 0.08) 0%,
        transparent 60%
    );
    animation: parallaxFloat1 25s ease-in-out infinite;
}

.depth-layer.layer-2 {
    background: radial-gradient(
        ellipse 700px 500px at 80% 70%,
        rgba(6, 182, 212, 0.06) 0%,
        transparent 60%
    );
    animation: parallaxFloat2 30s ease-in-out infinite;
}

@keyframes parallaxFloat1 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-30px, -20px) scale(1.1);
        opacity: 0.7;
    }
}

@keyframes parallaxFloat2 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.4;
    }
    50% {
        transform: translate(40px, 30px) scale(1.15);
        opacity: 0.6;
    }
}

/* Film grain overlay */
.grain-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 50%, transparent 20%, rgba(255, 255, 255, 0.01) 21%),
        radial-gradient(circle at 80% 80%, transparent 20%, rgba(255, 255, 255, 0.01) 21%),
        radial-gradient(circle at 40% 40%, transparent 20%, rgba(0, 0, 0, 0.01) 21%);
    background-size: 200px 200px, 180px 180px, 150px 150px;
    background-position: 0 0, 50px 50px, 100px 100px;
    pointer-events: none;
    opacity: 0.15;
    z-index: 0;
    animation: grainMove 8s linear infinite;
}

@keyframes grainMove {
    0% {
        background-position: 0 0, 50px 50px, 100px 100px;
    }
    100% {
        background-position: 200px 200px, 250px 250px, 300px 300px;
    }
}

/* Subtle mesh overlay */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, 0.02) 25%, rgba(255, 255, 255, 0.02) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.02) 75%, rgba(255, 255, 255, 0.02) 76%, transparent 77%, transparent),
        linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, 0.02) 25%, rgba(255, 255, 255, 0.02) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.02) 75%, rgba(255, 255, 255, 0.02) 76%, transparent 77%, transparent);
    background-size: 150px 150px;
    z-index: 5;
    pointer-events: none;
    opacity: 0.18; /* slightly stronger for subtle texture */
    backdrop-filter: blur(2.5px);
    -webkit-backdrop-filter: blur(2.5px);
}

/* Additional floating shapes */
.floating-shape.shape-4 {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%;
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.08), rgba(59, 130, 246, 0.04));
    top: -80px;
    right: 30%;
    animation: morphFloat 12s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(30, 64, 175, 0.15));
}

.floating-shape.shape-5 {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 72% 28% 66% 34% / 58% 48% 52% 42%;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.08), rgba(30, 64, 175, 0.03));
    bottom: 5%;
    left: -150px;
    animation: morphFloat 14s ease-in-out infinite reverse;
    filter: drop-shadow(0 0 22px rgba(6, 182, 212, 0.18));
}

/* Morphing animation for organic feel */
@keyframes morphFloat {
    0%, 100% {
        transform: translateY(0px) scale(1) rotate(0deg);
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    25% {
        transform: translateY(-40px) scale(1.08) rotate(90deg);
        border-radius: 30% 60% 70% 40% / 50% 50% 30% 70%;
    }
    50% {
        transform: translateY(-80px) scale(1.15) rotate(180deg);
        border-radius: 70% 30% 66% 34% / 33% 66% 33% 67%;
    }
    75% {
        transform: translateY(-40px) scale(1.08) rotate(270deg);
        border-radius: 40% 60% 30% 70% / 40% 40% 60% 50%;
    }
}

/* Animated grid pattern overlay */
.hero-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.03) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.03) 75%, rgba(255, 255, 255, 0.03) 76%, transparent 77%, transparent),
        linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.03) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.03) 75%, rgba(255, 255, 255, 0.03) 76%, transparent 77%, transparent);
    background-size: 80px 80px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
    animation: gridShift 20s linear infinite;
}

@keyframes gridShift {
    0% { background-position: 0 0; }
    100% { background-position: 80px 80px; }
}

/* Subtle grid pattern overlay */
.hero-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, 0.02) 25%, rgba(255, 255, 255, 0.02) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.02) 75%, rgba(255, 255, 255, 0.02) 76%, transparent 77%, transparent),
        linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, 0.02) 25%, rgba(255, 255, 255, 0.02) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.02) 75%, rgba(255, 255, 255, 0.02) 76%, transparent 77%, transparent);
    background-size: 80px 80px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.3;
}

/* Hero badge */
.hero-badge {
    margin-bottom: 1.5rem;
}

/* Enhanced Glassmorphism Badge */
.badge-text {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 0.7rem 1.3rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    animation: fadeInScale 0.8s ease-out 0s backwards;
}

.badge-text:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(45deg, #fff, #e0e7ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero stats */
.hero-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin: 0 0 4.5rem 0;
    flex-wrap: wrap;
    animation: slideInUp 0.8s ease-out 0.7s backwards;
    /* turn stats row into a dark glass card */
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border-radius: 16px;
    padding: 2rem 2.25rem;
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.45);
    border: 1px solid rgba(148, 163, 184, 0.25);
    isolation: isolate;
}

.stat-item {
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    min-width: 180px;
}

.stat-item:hover {
    transform: translateY(-8px) scale(1.05);
}

.stat-number {
    font-size: clamp(2rem, 6vw, 3.5rem);
    font-weight: 800;
    background: var(--gradient-light);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    font-variant-numeric: tabular-nums;
    animation: countUp 0.6s ease-out 0.8s backwards;
    text-shadow: 0 2px 12px rgba(14, 165, 233, 0.35);
}

.stat-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: fadeInScale 0.6s ease-out 0.8s backwards;
}

/* divider twist between stat items */
.hero-stats .stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 15%;
    right: -1.5rem;
    bottom: 15%;
    width: 1px;
    background: linear-gradient(180deg, var(--primary-blue-lighter), var(--accent-cyan));
    opacity: 0.35;
}

/* Enhanced buttons */
.btn-glow {
    position: relative;
    overflow: hidden;
}

.btn-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-glow:hover::before {
    left: 100%;
}

.btn-icon {
    width: 16px;
    height: 16px;
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.btn-primary:hover .btn-icon {
    transform: translateX(3px);
}

/* Hero gradient overlay */
.hero-gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 140px; /* reduced height for a minimal look */
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(10, 20, 40, 0) 0%,
        rgba(10, 20, 40, 0.3) 70%,
        rgba(10, 20, 40, 0.8) 100%
    );
    z-index: 2;
}

/* subtle animated wave divider at the bottom edge */
.hero-gradient-overlay::before {
    content: '';
    position: absolute;
    top: -60px;
    left: 0;
    right: 0;
    height: 100px; /* slimmer divider */
    background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.12) 60%, rgba(255,255,255,0) 100%);
    clip-path: polygon(
        0% 62%, 8% 58%, 16% 57%, 24% 59%, 32% 63%, 40% 66%, 48% 65%, 56% 62%, 64% 59%, 72% 58%, 80% 60%, 88% 64%, 96% 66%, 100% 64%,
        100% 100%, 0% 100%
    );
    animation: waveDivider 9s ease-in-out infinite;
    opacity: 0.25; /* much subtler */
}

/* thin highlight for crisp separation */
.hero-gradient-overlay::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px; /* reduced thickness */
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.35), rgba(255,255,255,0));
    filter: blur(0.4px);
    opacity: 0.45; /* softer */
}

@keyframes waveDivider {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

/* Scroll Indicator Enhanced */
.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
    z-index: 3;
    animation: bounce 2s infinite;
    transition: opacity 0.3s ease;
}

.scroll-arrow {
    width: 2px;
    height: 30px;
    background: rgba(255, 255, 255, 0.7);
    position: relative;
    border-radius: 10px;
}

.scroll-arrow::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: slideDown 2s infinite;
}

.scroll-text {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}

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

@keyframes slideDown {
    0% {
        opacity: 1;
        transform: translateY(-10px);
    }
    100% {
        opacity: 0;
        transform: translateY(10px);
    }
}

/* Hero content positioning */
.hero-content {
    z-index: 10;
    max-width: 900px;
    position: relative;
    transform: translateY(-48px); /* lift content up */
}

@media (max-width: 768px) {
    .hero-content {
        transform: translateY(-16px); /* gentler lift on mobile */
    }
}

/* Hero Logo Icon */
.hero-logo-icon {
    height: 160px;
    width: auto;
    margin: 0 auto 4rem;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
    animation: fadeInScale 0.8s ease-out 0.15s backwards, spotlight 6s ease-in-out infinite;
    position: relative;
}

/* Infinity symbol glow animation */
.hero-logo-icon::before,
.hero-logo-icon::after {
    content: '';
    position: absolute;
    width: 140px;
    height: 140px;
    background: radial-gradient(
        circle,
        rgba(6, 182, 212, 1) 0%,
        rgba(6, 182, 212, 0.7) 30%,
        rgba(6, 182, 212, 0.3) 50%,
        transparent 70%
    );
    border-radius: 50%;
    pointer-events: none;
    filter: blur(12px);
    opacity: 0.9;
    z-index: -1;
}

.hero-logo-icon::before {
    animation: infinity-loop-1 10s ease-in-out infinite;
}

.hero-logo-icon::after {
    animation: infinity-loop-2 10s ease-in-out infinite 5s;
    opacity: 0.9;
}

@keyframes infinity-loop-1 {
    0% {
        transform: translate(-50px, -30px) scale(1);
        opacity: 1;
    }
    12.5% {
        transform: translate(-25px, -50px) scale(1.3);
        opacity: 1;
    }
    25% {
        transform: translate(0px, -45px) scale(1);
        opacity: 0.8;
    }
    37.5% {
        transform: translate(25px, -50px) scale(1.3);
        opacity: 1;
    }
    50% {
        transform: translate(50px, -30px) scale(1);
        opacity: 1;
    }
    62.5% {
        transform: translate(25px, 30px) scale(1.3);
        opacity: 1;
    }
    75% {
        transform: translate(0px, 45px) scale(1);
        opacity: 0.8;
    }
    87.5% {
        transform: translate(-25px, 30px) scale(1.3);
        opacity: 1;
    }
    100% {
        transform: translate(-50px, -30px) scale(1);
        opacity: 1;
    }
}

@keyframes infinity-loop-2 {
    0% {
        transform: translate(50px, 30px) scale(1);
        opacity: 1;
    }
    12.5% {
        transform: translate(25px, 30px) scale(1.3);
        opacity: 1;
    }
    25% {
        transform: translate(0px, 45px) scale(1);
        opacity: 0.8;
    }
    37.5% {
        transform: translate(-25px, 30px) scale(1.3);
        opacity: 1;
    }
    50% {
        transform: translate(-50px, 30px) scale(1);
        opacity: 1;
    }
    62.5% {
        transform: translate(-25px, -30px) scale(1.3);
        opacity: 1;
    }
    75% {
        transform: translate(0px, -45px) scale(1);
        opacity: 0.8;
    }
    87.5% {
        transform: translate(25px, -30px) scale(1.3);
        opacity: 1;
    }
    100% {
        transform: translate(50px, 30px) scale(1);
        opacity: 1;
    }
}

@keyframes spotlight {
    0%, 100% {
        filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15)) drop-shadow(0 0 30px rgba(6, 182, 212, 0.7));
    }
    50% {
        filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15)) drop-shadow(0 0 60px rgba(6, 182, 212, 1));
    }
}

/* Enhanced Hero Headline */
.hero-headline {
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 2rem 0;
    letter-spacing: -0.02em;
    display: flex;
    flex-direction: column;
    align-items: center; /* start from left */
    gap: 0.28em; /* slightly tighter to bind both lines */
    background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.headline-line {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.32em; /* tighten word gaps for cohesion */
    justify-content: center; /* start from left */
}

/* First and second lines same size */
.headline-line--primary { font-size: 1em; }

/* Slightly lighter/smaller second line so first line leads */
.headline-line--secondary {
    font-size: 0.7em; /* slightly smaller than primary */
    font-weight: 700;  /* slightly lighter weight ok */
    margin-top: -0.08em; /* modest tightening */
}


/* Individual word animation - Wave Cascade */
.headline-word {
    display: inline-block;
    background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0;
    transform: translateY(25px) rotateX(90deg);
    animation: waveCascade 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Wave cascade stagger - creates flowing wave effect */
.headline-word:nth-child(1) { animation-delay: 0.1s; }
.headline-word:nth-child(2) { animation-delay: 0.25s; }
.headline-word:nth-child(3) { animation-delay: 0.4s; }
.headline-word:nth-child(4) { animation-delay: 0.55s; }
.headline-word:nth-child(5) { animation-delay: 0.7s; }
.headline-word:nth-child(6) { animation-delay: 0.85s; }
.headline-word:nth-child(7) { animation-delay: 1.0s; }

@keyframes waveCascade {
    0% {
        opacity: 0;
        transform: translateY(25px) rotateX(90deg) scale(0.8);
        filter: blur(8px);
    }
    50% {
        opacity: 0.7;
        transform: translateY(-8px) rotateX(45deg) scale(1.05);
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0deg) scale(1);
        filter: blur(0px);
    }
}

/* Rotating Text Animation */
.rotating-text-wrapper {
    position: relative;
    display: inline-block;
    /* width is set dynamically by JS to the widest word */
    height: 1.3em;
    text-align: left;
    /* Ensure smooth transitions without layout shift */
    overflow: hidden;
    line-height: 1.3;
    flex-shrink: 0;
}

.rotating-text-item {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}

.rotating-text-item.active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.rotating-text-item.leaving {
    opacity: 0;
    transform: translateY(-20px);
}

@keyframes rotateText {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    50% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* Hero Description */
.hero-description {
    font-size: 1.1rem;
    color: #F0F4F8; /* fallback for browsers that don't support text gradients */
    background: linear-gradient(135deg, #F0F4F8 0%, #FAFAFA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 3.5rem 0;
    line-height: 1.8;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    animation: slideInUp 0.8s ease-out 0.5s backwards;
}

/* Animation Keyframes */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

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

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(30, 64, 175, 0.4);
    }
    50% {
        box-shadow: 0 0 40px rgba(30, 64, 175, 0.6);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* Hero Buttons */
.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    animation: slideInUp 0.8s ease-out 0.9s backwards;
}

.btn-primary, .btn-secondary {
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, #1e40af 0%, #0369a1 100%);
    color: white;
    box-shadow: 0 10px 30px rgba(30, 64, 175, 0.3);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.btn-primary:hover {
    transform: translateY(-6px) scale(1.08);
    box-shadow: 0 20px 50px rgba(30, 64, 175, 0.5);
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-secondary {
    background: white;
    color: #1e40af;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: 2px solid white;
}

.btn-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(30, 64, 175, 0.1), transparent);
    transition: left 0.6s ease;
}

.btn-secondary:hover {
    transform: translateY(-6px) scale(1.08);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    background: rgba(255, 255, 255, 0.95);
}

.btn-secondary:hover::before {
    left: 100%;
}

.btn-icon {
    width: 1.2rem;
    height: 1.2rem;
    transition: transform 0.3s ease;
}

.btn-primary:hover .btn-icon,
.btn-secondary:hover .btn-icon {
    transform: translateX(4px);
}

/* Section Titles */
.section-title {
    font-size: 2.2rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 3rem;
    color: rgba(255, 255, 255, 0.95);
}

/* Services Section Background Effects */
.services-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(30, 64, 175, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.services-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 0%, rgba(255, 255, 255, 0.02) 50%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

/* Services Section - "Connected Solutions" Story */
.services-section {
    background: linear-gradient(135deg, rgba(20, 30, 50, 0.95) 0%, rgba(30, 40, 60, 0.9) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Elegant flowing mesh for services */
.services-section::before {
    background-image:
        linear-gradient(135deg, rgba(6, 182, 212, 0.08) 0%, transparent 30%),
        linear-gradient(225deg, rgba(30, 64, 175, 0.08) 0%, transparent 30%),
        linear-gradient(315deg, rgba(6, 182, 212, 0.06) 0%, transparent 30%),
        linear-gradient(45deg, rgba(96, 165, 250, 0.06) 0%, transparent 30%);
    background-size: 400% 400%;
    animation: serviceFlow 20s ease-in-out infinite;
}

@keyframes serviceFlow {
    0%, 100% { background-position: 0% 0%, 100% 100%, 0% 100%, 100% 0%; opacity: 0.4; }
    33% { background-position: 100% 0%, 0% 100%, 100% 100%, 0% 0%; opacity: 0.6; }
    66% { background-position: 0% 100%, 100% 0%, 100% 0%, 0% 100%; opacity: 0.5; }
}

.services-section::after {
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(6, 182, 212, 0.15) 0%,
        rgba(30, 64, 175, 0.08) 40%,
        transparent 70%
    );
    opacity: 0.6;
    transition: background 0.3s ease;
}

.services-header {
    margin-bottom: 4rem;
    position: relative;
    z-index: 1;
}

.services-subtitle {
    font-size: 1.1rem;
    color: #F0F4F8;
    background: linear-gradient(135deg, #F0F4F8 0%, #FAFAFA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.7;
    margin-top: 1rem;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}

.service-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-accent);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    background: rgba(255, 255, 255, 0.15);
}

.service-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient-accent);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: white;
}

.service-icon svg {
    width: 28px;
    height: 28px;
}

.service-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1rem;
}

.service-description {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.service-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-features li {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    padding: 0.25rem 0;
    position: relative;
    padding-left: 1.5rem;
}

.service-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: bold;
}

.services-cta {
    /* Dark glass card so it's not blinding on a dark page */
    position: relative;
    background: rgba(15, 23, 42, 0.55); /* deepen base for stronger contrast */
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    border-radius: 16px;
    padding: 3rem 2rem;
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.45);
    border: 1px solid rgba(148, 163, 184, 0.25); /* subtle slate border */
    overflow: hidden; /* contain animated accents */
    isolation: isolate; /* keep pseudo-element effects behind content */
    /* spotlight animation vars */
    --sx: 25%;
    --sy: 0%;
}

.services-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    pointer-events: none;
    /* soft inner vignette and sheen */
    background:
      radial-gradient(120% 140% at 50% 0%, rgba(2, 6, 23, 0.24) 0%, rgba(2, 6, 23, 0.0) 60%),
      linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
}

/* Ensure readable text inside the dark card */
.services-cta .cta-title {
    color: #F8FAFC;
    background: linear-gradient(135deg, #e0f2fe 0%, #c7d2fe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 8px rgba(59, 130, 246, 0.15);
}

/* Animated gradient ring around the card */
.services-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    pointer-events: none;
    /* Subtle moving spotlight within the card */
    background: radial-gradient(75% 60% at var(--sx) var(--sy),
      rgba(59, 130, 246, 0.28) 0%, rgba(6, 182, 212, 0.18) 40%, rgba(2, 6, 23, 0) 72%);
    mix-blend-mode: screen;
    animation: spotlightMove 18s ease-in-out infinite alternate;
}

@keyframes spotlightMove {
  0%   { --sx: 15%; --sy: -20%; }
  40%  { --sx: 85%; --sy: 30%; }
  80%  { --sx: 45%; --sy: 110%; }
  100% { --sx: 30%; --sy: 60%; }
}

/* Register custom properties for smoother animation */
@property --sx { syntax: '<percentage>'; inherits: false; initial-value: 25%; }
@property --sy { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

/* Button micro-interaction */
.services-cta .btn-primary {
    position: relative;
}
.services-cta .btn-primary::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 999px;
    background: radial-gradient(60% 60% at 50% 50%, rgba(59, 130, 246, 0.35), rgba(6, 182, 212, 0.0));
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}
.services-cta .btn-primary:hover::after {
    opacity: 1;
    transform: scale(1);
}

.cta-title {
    font-size: 2rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 1rem;
}

.cta-subtitle {
    color: #F0F4F8;
    background: linear-gradient(135deg, #F0F4F8 0%, #FAFAFA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.btn-large {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
}

/* About Section Background Effects */
.about-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 70%, rgba(6, 182, 212, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 70% 30%, rgba(30, 64, 175, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.about-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.015) 50%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

/* About Section - "Growth Journey" Story */
.about-section {
    padding: 0;
    background: linear-gradient(135deg, rgba(30, 40, 60, 0.95) 0%, rgba(40, 50, 70, 0.9) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Living growth organic flow */
.about-section::before {
    background:
        radial-gradient(ellipse 800px at 30% bottom, rgba(6, 182, 212, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 900px at 70% top, rgba(30, 64, 175, 0.12) 0%, transparent 50%);
    animation: aboutBreath 15s ease-in-out infinite;
    filter: blur(60px);
}

@keyframes aboutBreath {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-40px) scale(1.15);
        opacity: 0.8;
    }
}

.about-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 40px,
            rgba(6, 182, 212, 0.02) 40px,
            rgba(6, 182, 212, 0.02) 80px
        );
    background-size: 200px 200px;
    opacity: 0.3;
    animation: gridSlide 30s linear infinite;
}

@keyframes gridSlide {
    0% { background-position: 0 0; }
    100% { background-position: 200px 200px; }
}

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

.about-content .lead {
    font-size: 1.2rem;
    font-weight: 500;
    color: #F0F4F8; /* fallback */
    background: linear-gradient(135deg, #F0F4F8 0%, #FAFAFA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.about-content p {
    font-size: 1rem;
    line-height: 1.8;
    color: #F0F4F8; /* fallback */
    background: linear-gradient(135deg, #F0F4F8 0%, #FAFAFA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
}

/* Ensure About section paragraphs get the gradient even when .about-content wrapper isn't used */
.about-section p,
.about-section .lead {
    color: #F0F4F8;
    background: linear-gradient(135deg, #F0F4F8 0%, #FAFAFA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Projects Section Background Effects */
.projects-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 40% 60%, rgba(6, 182, 212, 0.06) 0%, transparent 50%),
                radial-gradient(circle at 60% 40%, rgba(30, 64, 175, 0.06) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.projects-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(225deg, transparent 0%, rgba(255, 255, 255, 0.01) 50%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

/* Projects Section - "Stellar Achievements" Story */
.projects-section {
    padding: 0;
    background: linear-gradient(135deg, rgba(40, 50, 70, 0.95) 0%, rgba(50, 60, 80, 0.9) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Sophisticated diamond grid for projects */
.projects-section::before {
    background:
        repeating-conic-gradient(
            from 0deg at 50% 50%,
            transparent 0deg,
            rgba(6, 182, 212, 0.04) 45deg,
            transparent 90deg,
            rgba(96, 165, 250, 0.03) 135deg,
            transparent 180deg,
            rgba(30, 64, 175, 0.03) 225deg,
            transparent 270deg,
            rgba(6, 182, 212, 0.03) 315deg,
            transparent 360deg
        ),
        radial-gradient(ellipse 900px at 35% 45%, rgba(6, 182, 212, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse 750px at 65% 55%, rgba(96, 165, 250, 0.08) 0%, transparent 50%);
    background-size: 400px 400px, 100% 100%, 100% 100%;
    animation: projectGrid 45s linear infinite;
    opacity: 0.5;
}

@keyframes projectGrid {
    from {
        transform: rotate(0deg);
        background-position: 0 0, 0% 0%, 0% 0%;
    }
    to {
        transform: rotate(360deg);
        background-position: -400px -400px, 100% 100%, -100% -100%;
    }
}

.projects-section::after {
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 100px,
            rgba(6, 182, 212, 0.03) 100px,
            rgba(6, 182, 212, 0.03) 105px,
            transparent 105px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 100px,
            rgba(96, 165, 250, 0.025) 100px,
            rgba(96, 165, 250, 0.025) 103px,
            transparent 103px
        );
    background-size: 200px 200px, 180px 180px;
    opacity: 0.4;
    animation: projectLines 60s linear infinite;
}

@keyframes projectLines {
    from { background-position: 0 0, 50px 50px; }
    to { background-position: 200px 200px, -50px -50px; }
}

.projects-header {
    margin-bottom: 4rem;
}

.projects-subtitle {
    font-size: 1.1rem;
    color: #F0F4F8;
    background: linear-gradient(135deg, #F0F4F8 0%, #FAFAFA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.7;
    margin-top: 1rem;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.project-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
}

.project-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    background: rgba(255, 255, 255, 0.12);
}

.project-image {
    height: 220px;
    position: relative;
    overflow: hidden;
}

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.project-card:hover .project-overlay {
    opacity: 1;
}

.project-tech {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tech-tag {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.project-links {
    display: flex;
    justify-content: flex-end;
}

.project-link {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 0.75rem;
    border-radius: 50%;
    color: white;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-link:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
}

.project-link svg {
    width: 18px;
    height: 18px;
}

.project-placeholder {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.project-gradient-1 {
    background: linear-gradient(135deg, #1e3a8a 0%, #0891b2 100%);
}

.project-gradient-2 {
    background: linear-gradient(135deg, #075985 0%, #0891b2 100%);
}

.project-gradient-3 {
    background: linear-gradient(135deg, #2563eb 0%, #0284c7 100%);
}

.project-gradient-4 {
    background: linear-gradient(135deg, #0891b2 0%, #0d9488 100%);
}

.project-gradient-5 {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
}

.project-gradient-6 {
    background: linear-gradient(135deg, #075985 0%, #0891b2 100%);
}

.project-content {
    padding: 2rem;
}

.project-category {
    font-size: 0.85rem;
    color: rgba(6, 182, 212, 0.85);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.project-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.project-description {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.project-stats {
    display: flex;
    gap: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.stat {
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.projects-cta {
    position: relative;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border-radius: 16px;
    padding: 3rem 2rem;
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.45);
    border: 1px solid rgba(148, 163, 184, 0.25);
    overflow: hidden;
    isolation: isolate;
    --px: 20%;
    --py: 0%;
}

.projects-cta::before { content: none; }

.projects-cta .cta-title {
    background: linear-gradient(135deg, #e0f2fe 0%, #c7d2fe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 8px rgba(59, 130, 246, 0.15);
    position: relative;
    display: inline-block;
}

/* Animated underline twist unique to projects CTA */
.projects-cta .cta-title::after {
    content: '';
    display: block;
    height: 3px;
    border-radius: 9999px;
    margin: 0.75rem auto 0;
    width: 0;
    background: linear-gradient(90deg, var(--primary-blue-lighter), var(--accent-cyan), var(--primary-blue-lighter));
    box-shadow: 0 2px 12px rgba(14, 165, 233, 0.35);
    animation: ctaUnderline 9s ease-in-out infinite;
}

@keyframes ctaUnderline {
  0%   { width: 0%;   opacity: 0.5; }
  25%  { width: 42%;  opacity: 0.8; }
  50%  { width: 74%;  opacity: 1; }
  75%  { width: 42%;  opacity: 0.8; }
  100% { width: 0%;   opacity: 0.5; }
}

/* Testimonials Section Background Effects */
.testimonials-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 25% 75%, rgba(6, 182, 212, 0.07) 0%, transparent 50%),
                radial-gradient(circle at 75% 25%, rgba(30, 64, 175, 0.07) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.testimonials-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(315deg, transparent 0%, rgba(255, 255, 255, 0.012) 50%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

/* Testimonials Section - "Trust Glow" Story */
.testimonials-section {
    background: linear-gradient(135deg, rgba(25, 35, 55, 0.95) 0%, rgba(35, 45, 65, 0.9) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Floating warmth bubbles */
.testimonials-section::before {
    background:
        radial-gradient(circle at 20% 20%, rgba(251, 191, 36, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 60% 40%, rgba(251, 191, 36, 0.06) 0%, transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(251, 191, 36, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(6, 182, 212, 0.10) 0%, transparent 40%);
    animation: testimonialFloat 25s ease-in-out infinite;
    filter: blur(50px);
}

@keyframes testimonialFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.4;
    }
    25% {
        transform: translate(30px, -40px) scale(1.2);
        opacity: 0.6;
    }
    50% {
        transform: translate(-20px, 50px) scale(0.9);
        opacity: 0.5;
    }
    75% {
        transform: translate(-40px, -20px) scale(1.1);
        opacity: 0.6;
    }
}

.testimonials-section::after {
    background:
        radial-gradient(
            ellipse 800px at 50% 50%,
            rgba(251, 191, 36, 0.04) 0%,
            transparent 60%
        );
    animation: testimonialGlow 18s ease-in-out infinite;
}

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

.testimonials-header {
    margin-bottom: 4rem;
}

.testimonials-subtitle {
    font-size: 1.1rem;
    color: #F0F4F8;
    background: linear-gradient(135deg, #F0F4F8 0%, #FAFAFA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.7;
    margin-top: 1rem;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.testimonial-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
}

.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    background: rgba(255, 255, 255, 0.12);
}

.testimonial-content {
    margin-bottom: 1.5rem;
}

.quote-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #1e3a8a 0%, #0891b2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.2);
}

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

.testimonial-text {
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    font-size: 1rem;
    font-style: italic;
    margin: 0;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e3a8a 0%, #0891b2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    font-size: 0.9rem;
}

.author-info {
    flex: 1;
}

.author-name {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.25rem;
}

.author-title {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.author-rating {
    color: #fbbf24;
    font-size: 0.9rem;
}

.testimonials-stats {
    /* Dark glass stats card to match the new aesthetic */
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border-radius: 16px;
    padding: 3rem 2rem;
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

/* Divider twist inside testimonials stats */
.testimonials-stats .stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 15%;
    right: -1.5rem;
    bottom: 15%;
    width: 1px;
    background: linear-gradient(180deg, var(--primary-blue-lighter), var(--accent-cyan));
    opacity: 0.35;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
}

.testimonials-stats .stat-item {
    text-align: center;
}

.testimonials-stats .stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.testimonials-stats .stat-label {
    color: var(--gray-lighter);
    font-weight: 500;
    font-size: 0.9rem;
}

/* Contact Section Background Effects */
.contact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(30, 64, 175, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.contact-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 0%, rgba(255, 255, 255, 0.02) 50%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

/* Contact Section - "Reaching Out" Story */
.contact-section {
    padding: 0;
    background: linear-gradient(135deg, rgba(20, 30, 50, 0.95) 0%, rgba(30, 40, 60, 0.9) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Elegant radial pulse for contact */
.contact-section::before {
    background:
        conic-gradient(
            from 0deg at 50% 50%,
            transparent 0deg,
            rgba(6, 182, 212, 0.08) 72deg,
            transparent 144deg,
            rgba(96, 165, 250, 0.06) 216deg,
            transparent 288deg,
            rgba(30, 64, 175, 0.05) 360deg
        ),
        radial-gradient(ellipse 1100px at 25% 35%, rgba(6, 182, 212, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 950px at 75% 65%, rgba(96, 165, 250, 0.10) 0%, transparent 55%);
    background-size: 100% 100%, 100% 100%, 100% 100%;
    animation: contactPulse 50s ease-in-out infinite;
    filter: blur(50px);
}

@keyframes contactPulse {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1) rotate(0deg);
    }
    33% {
        opacity: 0.6;
        transform: scale(1.2) rotate(120deg);
    }
    66% {
        opacity: 0.5;
        transform: scale(1.1) rotate(240deg);
    }
}

.contact-section::after {
    background:
        radial-gradient(
            circle at 40% 40%,
            rgba(6, 182, 212, 0.08) 0%,
            transparent 35%
        ),
        radial-gradient(
            circle at 60% 60%,
            rgba(96, 165, 250, 0.06) 0%,
            transparent 35%
        );
    background-size: 800px 800px, 700px 700px;
    animation: contactFloat 40s ease-in-out infinite;
}

@keyframes contactFloat {
    0%, 100% {
        background-position: 0% 0%, 100% 100%;
        opacity: 0.3;
    }
    50% {
        background-position: 100% 100%, 0% 0%;
        opacity: 0.5;
    }
}

.contact-header {
    margin-bottom: 4rem;
}



.contact-subtitle {
    font-size: 1.1rem;
    color: #F0F4F8;
    background: linear-gradient(135deg, #F0F4F8 0%, #FAFAFA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.7;
    margin-top: 1rem;
}

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

.contact-info {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.contact-methods {
    margin-bottom: 3rem;
}

.contact-method {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-method:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

.method-icon {
    width: 50px;
    height: 50px;
    background: var(--gradient-accent);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.method-icon svg {
    width: 24px;
    height: 24px;
}

.method-content h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5rem;
}

.method-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.method-content a {
    color: rgba(6, 182, 212, 0.9);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.method-content a:hover {
    color: rgba(6, 182, 212, 1);
}

.method-content span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
}

.social-links h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1rem;
}

.social-icons {
    display: flex;
    gap: 1rem;
}

.social-link {
    width: 45px;
    height: 45px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.social-link:hover {
    background: linear-gradient(135deg, #1e40af, #06b6d4);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.social-link svg {
    width: 20px;
    height: 20px;
}

.contact-form-container {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.form-header {
    text-align: center;
    margin-bottom: 2rem;
}

.form-header h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5rem;
}

.form-header p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.875rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Style select dropdown options */
.form-select option {
    background: rgba(20, 30, 50, 0.95);
    color: rgba(255, 255, 255, 0.9);
    padding: 0.5rem;
}

.form-select option:hover {
    background: rgba(6, 182, 212, 0.2);
}

.form-input::placeholder,
.form-select::placeholder,
.form-textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: rgba(6, 182, 212, 0.6);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2);
    background: rgba(255, 255, 255, 0.15);
}

.form-input.error,
.form-select.error,
.form-textarea.error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

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

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.checkbox-label input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark {
    background: linear-gradient(135deg, #1e40af, #06b6d4);
    border-color: #1e40af;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.btn-submit {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.spinner {
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
}

.form-error {
    color: #ef4444;
    font-size: 0.8rem;
    margin-top: 0.25rem;
    display: none;
}

.form-error.show {
    display: block;
}

.form-success {
    background: var(--success-bg);
    color: var(--success);
    padding: 1rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    font-weight: 500;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.form-success svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.form-error-message {
    background: var(--error-bg);
    color: var(--error);
    padding: 1rem;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1rem;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.form-error-message svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.form-error-message ul {
    margin: 0;
    padding-left: 1rem;
}

.form-error-message li {
    margin-bottom: 0.25rem;
}

/* Footer */
/* Simplified Footer */
.footer {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: #e2e8f0;
    padding: 3rem 0 1rem;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    align-items: start;
}

.footer-brand {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.footer-logo {
    height: 2.5rem;
    width: auto;
    filter: brightness(0) invert(1);
    flex-shrink: 0;
}

.footer-brand-text h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
    margin: 0 0 0.5rem 0;
}

.footer-brand-text p {
    color: #94a3b8;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.footer-section h4 {
    font-size: 1rem;
    font-weight: 600;
    color: white;
    margin: 0 0 1rem 0;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section li {
    margin-bottom: 0.5rem;
}

.footer-section a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: white;
}

.footer-bottom {
    padding: 1.5rem 0;
    margin-top: 2rem;
}

.footer-bottom-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-bottom p {
    color: #94a3b8;
    font-size: 0.9rem;
    margin: 0;
}

.footer-social {
    display: flex;
    gap: 1rem;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    color: #94a3b8;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-social a:hover {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    transform: translateY(-2px);
}

.footer-social svg {
    width: 1rem;
    height: 1rem;
}

/* Animations */
.fade-in {
    opacity: 0;
    animation: fadeIn 1s ease forwards;
}

.fade-in-delay {
    opacity: 0;
    animation: fadeIn 1s ease 0.6s forwards;
}

.slide-up {
    transform: translateY(20px);
    opacity: 0;
    animation: slideUp 1s ease forwards;
}

.slide-up-delay {
    transform: translateY(20px);
    opacity: 0;
    animation: slideUp 1s ease 0.6s forwards;
}
.fade-up-section [class*="fade-stagger-"] {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUpSoft 1.2s ease forwards;
}

.fade-up-section .fade-stagger-1 { animation-delay: 0.2s; }
.fade-up-section .fade-stagger-2 { animation-delay: 0.5s; }
.fade-up-section .fade-stagger-3 { animation-delay: 0.8s; }

@keyframes fadeUpSoft {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

/* Responsive Design */
@media (max-width: 1024px) {
    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .testimonials-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

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

    .navbar {
        padding: 0.5rem;
        flex-direction: column;
        gap: 0.5rem;
        position: sticky;
        top: 0;
        z-index: 100;
        backdrop-filter: blur(10px);
        background: rgba(10, 15, 25, 0.9);
    }

    .nav-menu {
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .nav-link {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }

    .hero {
        padding: 2rem 0;
        min-height: calc(100vh - 120px);
    }

    .hero-title,
    .hero-headline {
        font-size: 1.9rem !important;
        line-height: 1.3;
    }

    .hero-subtitle {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
    }

    .hero-stats {
        gap: 2rem;
        margin: 1.5rem 0;
    }

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

    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .services-section,
    .about-section,
    .projects-section,
    .testimonials-section,
    .contact-section {
        min-height: auto;
        padding: 3rem 0;
        display: block;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .service-card {
        padding: 1.5rem;
    }

    .projects-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .project-card {
        margin-bottom: 1rem;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .testimonial-card {
        padding: 1.5rem;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .contact-info {
        padding: 1.5rem;
    }

    .contact-method {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .contact-form-container {
        padding: 1.5rem;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .form-group {
        margin-bottom: 1rem;
    }

    .social-icons {
        justify-content: center;
    }

    .scroll-indicator {
        bottom: 1rem;
    }

    .scroll-text {
        font-size: 0.7rem;
    }

    .hero-badge {
        margin-bottom: 1rem;
    }

    .badge-text {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }

    .floating-shape {
        display: none; /* Hide floating shapes on mobile for better performance */
    }

    /* Hide enhanced background effects on mobile for performance */
    .light-ray,
    .depth-layer,
    .grain-overlay {
        display: none;
    }

    /* Disable gradient animation on mobile */
    .hero::before {
        animation: none;
    }

    /* Mobile wave optimization - waves are already optimized for visibility */

    .wave-1, .wave-2 {
        filter: blur(8px) drop-shadow(0 3px 10px rgba(6, 182, 212, 0.18));
    }

    .wave-1::before, .wave-2::before {
        filter: blur(20px); /* Minimize blur on mobile for performance */
        opacity: 0.15;
    }

    /* Mobile button optimization */
    .btn-primary, .btn-secondary {
        min-height: 48px; /* Better touch targets */
        padding: 0.75rem 1.5rem;
    }

}

@media (max-width: 480px) {
    .hero-title,
    .hero-headline {
        font-size: 1.7rem !important;
    }

    .rotating-text-wrapper {
        width: 140px;
        height: 1.2em;
    }

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

    .hero-stats {
        flex-direction: column;
        gap: 1rem;
    }

    .stat-number {
        font-size: 1.8rem;
    }

    .section-title {
        font-size: 1.6rem;
    }

    .service-card,
    .project-card,
    .testimonial-card {
        padding: 1rem;
    }

    .contact-info,
    .contact-form-container {
        padding: 1rem;
    }

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

    .testimonials-stats .stat-number {
        font-size: 2rem;
    }

    .btn-large {
        padding: 0.875rem 2rem;
        font-size: 1rem;
    }

    .hero-logo {
        height: 80px;
    }

    .method-icon {
        width: 40px;
        height: 40px;
    }

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

    .social-link {
        width: 40px;
        height: 40px;
    }

    .social-link svg {
        width: 18px;
        height: 18px;
    }
}

/* Level 7 backdrop blur layer over background and waves, under content */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 20, 40, 0.12); /* level 7 background for blur visibility */
    z-index: 2; /* above waves (0) but below content (10) */
    pointer-events: none;
    backdrop-filter: blur(45px) saturate(140%) contrast(115%);
    -webkit-backdrop-filter: blur(45px) saturate(140%) contrast(115%);
    opacity: 0.85;
}

/* Enhanced wave glow effect - balanced visibility */
.wave-1, .wave-2 {
    mix-blend-mode: screen;
}

/* Subtle glow helper for depth - moderate blur */
.wave-1::before, .wave-2::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: inherit;
    clip-path: inherit;
    filter: blur(30px);
    opacity: 0.2;
    mix-blend-mode: screen;
    pointer-events: none;
}

/* Floating particles for subtle detail */
.floating-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: floatParticle 8s linear infinite;
}

.particle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { top: 40%; left: 80%; animation-delay: 2s; }
.particle:nth-child(3) { top: 60%; left: 30%; animation-delay: 4s; }
.particle:nth-child(4) { top: 80%; left: 70%; animation-delay: 6s; }
.particle:nth-child(5) { top: 30%; left: 60%; animation-delay: 1s; }
.particle:nth-child(6) { top: 70%; left: 20%; animation-delay: 3s; }

@keyframes floatParticle {
    0% {
        transform: translateY(0px) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: scale(1);
    }
    90% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        transform: translateY(-100px) scale(0);
        opacity: 0;
    }
}

/* Keep the bottom transition overlay above the blur */
.hero-gradient-overlay { z-index: 3; }