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

:root {
    --color-bg: #FFFFFF;
    --color-text: #0A0A0A;
    --color-text-muted: #666666;
    --color-accent: #0066FF;
    --color-border: #E5E5E5;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Navigation */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--color-border);
    z-index: 1000;
}

.nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

.logo {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    font-family: var(--font-mono);
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-star {
    color: var(--color-accent);
    animation: starPulse 3s ease-in-out infinite;
}

@keyframes starPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.cta-button {
    padding: 10px 24px;
    background: var(--color-text);
    color: var(--color-bg);
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: transform 0.2s, opacity 0.2s;
}

.cta-button:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* Hero Section */
.hero {
    padding: 180px 0 120px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: #0a0a15;
}

/* Starfield Background */
.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
}

/* Generate random stars using box-shadow - BRIGHTER and MORE VISIBLE */
#stars {
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    position: absolute;
    box-shadow: 
        100px 200px rgba(255, 255, 255, 0.9), 300px 100px rgba(255, 255, 255, 0.9), 500px 300px rgba(255, 255, 255, 0.9), 
        700px 150px rgba(255, 255, 255, 0.9), 900px 250px rgba(255, 255, 255, 0.9),
        150px 400px rgba(255, 255, 255, 0.8), 350px 500px rgba(255, 255, 255, 0.8), 550px 450px rgba(255, 255, 255, 0.8), 
        750px 350px rgba(255, 255, 255, 0.8), 950px 400px rgba(255, 255, 255, 0.8),
        200px 600px rgba(255, 255, 255, 0.7), 400px 700px rgba(255, 255, 255, 0.7), 600px 650px rgba(255, 255, 255, 0.7), 
        800px 550px rgba(255, 255, 255, 0.7), 1000px 600px rgba(255, 255, 255, 0.7),
        250px 800px rgba(255, 255, 255, 0.6), 450px 900px rgba(255, 255, 255, 0.6), 650px 850px rgba(255, 255, 255, 0.6), 
        850px 750px rgba(255, 255, 255, 0.6), 1050px 800px rgba(255, 255, 255, 0.6),
        125px 150px rgba(255, 255, 255, 0.9), 325px 250px rgba(255, 255, 255, 0.9), 525px 200px rgba(255, 255, 255, 0.9), 
        725px 300px rgba(255, 255, 255, 0.9), 925px 150px rgba(255, 255, 255, 0.9),
        175px 350px rgba(255, 255, 255, 0.8), 375px 450px rgba(255, 255, 255, 0.8), 575px 400px rgba(255, 255, 255, 0.8), 
        775px 500px rgba(255, 255, 255, 0.8), 975px 350px rgba(255, 255, 255, 0.8),
        225px 550px rgba(255, 255, 255, 0.7), 425px 650px rgba(255, 255, 255, 0.7), 625px 600px rgba(255, 255, 255, 0.7), 
        825px 700px rgba(255, 255, 255, 0.7), 1025px 550px rgba(255, 255, 255, 0.7),
        275px 750px rgba(255, 255, 255, 0.6), 475px 850px rgba(255, 255, 255, 0.6), 675px 800px rgba(255, 255, 255, 0.6), 
        875px 900px rgba(255, 255, 255, 0.6), 1075px 750px rgba(255, 255, 255, 0.6),
        50px 100px rgba(255, 255, 255, 0.9), 250px 50px rgba(255, 255, 255, 0.9), 450px 150px rgba(255, 255, 255, 0.9), 
        650px 100px rgba(255, 255, 255, 0.9), 850px 50px rgba(255, 255, 255, 0.9),
        75px 300px rgba(255, 255, 255, 0.8), 275px 350px rgba(255, 255, 255, 0.8), 475px 250px rgba(255, 255, 255, 0.8), 
        675px 300px rgba(255, 255, 255, 0.8), 875px 350px rgba(255, 255, 255, 0.8),
        1100px 200px rgba(255, 255, 255, 0.9), 1300px 400px rgba(255, 255, 255, 0.9), 1500px 300px rgba(255, 255, 255, 0.9), 
        1700px 500px rgba(255, 255, 255, 0.9), 1200px 100px rgba(255, 255, 255, 0.9),
        1150px 600px rgba(255, 255, 255, 0.8), 1350px 800px rgba(255, 255, 255, 0.8), 1550px 700px rgba(255, 255, 255, 0.8), 
        1750px 900px rgba(255, 255, 255, 0.8), 1250px 500px rgba(255, 255, 255, 0.8),
        1400px 150px rgba(255, 255, 255, 0.7), 1600px 250px rgba(255, 255, 255, 0.7), 1800px 350px rgba(255, 255, 255, 0.7), 
        1300px 50px rgba(255, 255, 255, 0.7), 1500px 450px rgba(255, 255, 255, 0.7),
        1450px 650px rgba(255, 255, 255, 0.6), 1650px 750px rgba(255, 255, 255, 0.6), 1850px 850px rgba(255, 255, 255, 0.6), 
        1350px 550px rgba(255, 255, 255, 0.6), 1550px 150px rgba(255, 255, 255, 0.6);
    animation: animStars 120s linear infinite, twinkle 4s ease-in-out infinite;
}

#stars:after {
    content: " ";
    position: absolute;
    top: 1000px;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 
        100px 200px rgba(255, 255, 255, 0.9), 300px 100px rgba(255, 255, 255, 0.9), 500px 300px rgba(255, 255, 255, 0.9), 
        700px 150px rgba(255, 255, 255, 0.9), 900px 250px rgba(255, 255, 255, 0.9),
        150px 400px rgba(255, 255, 255, 0.8), 350px 500px rgba(255, 255, 255, 0.8), 550px 450px rgba(255, 255, 255, 0.8), 
        750px 350px rgba(255, 255, 255, 0.8), 950px 400px rgba(255, 255, 255, 0.8),
        200px 600px rgba(255, 255, 255, 0.7), 400px 700px rgba(255, 255, 255, 0.7), 600px 650px rgba(255, 255, 255, 0.7), 
        800px 550px rgba(255, 255, 255, 0.7), 1000px 600px rgba(255, 255, 255, 0.7),
        250px 800px rgba(255, 255, 255, 0.6), 450px 900px rgba(255, 255, 255, 0.6), 650px 850px rgba(255, 255, 255, 0.6), 
        850px 750px rgba(255, 255, 255, 0.6), 1050px 800px rgba(255, 255, 255, 0.6),
        125px 150px rgba(255, 255, 255, 0.9), 325px 250px rgba(255, 255, 255, 0.9), 525px 200px rgba(255, 255, 255, 0.9), 
        725px 300px rgba(255, 255, 255, 0.9), 925px 150px rgba(255, 255, 255, 0.9),
        175px 350px rgba(255, 255, 255, 0.8), 375px 450px rgba(255, 255, 255, 0.8), 575px 400px rgba(255, 255, 255, 0.8), 
        775px 500px rgba(255, 255, 255, 0.8), 975px 350px rgba(255, 255, 255, 0.8),
        225px 550px rgba(255, 255, 255, 0.7), 425px 650px rgba(255, 255, 255, 0.7), 625px 600px rgba(255, 255, 255, 0.7), 
        825px 700px rgba(255, 255, 255, 0.7), 1025px 550px rgba(255, 255, 255, 0.7),
        275px 750px rgba(255, 255, 255, 0.6), 475px 850px rgba(255, 255, 255, 0.6), 675px 800px rgba(255, 255, 255, 0.6), 
        875px 900px rgba(255, 255, 255, 0.6), 1075px 750px rgba(255, 255, 255, 0.6),
        50px 100px rgba(255, 255, 255, 0.9), 250px 50px rgba(255, 255, 255, 0.9), 450px 150px rgba(255, 255, 255, 0.9), 
        650px 100px rgba(255, 255, 255, 0.9), 850px 50px rgba(255, 255, 255, 0.9),
        75px 300px rgba(255, 255, 255, 0.8), 275px 350px rgba(255, 255, 255, 0.8), 475px 250px rgba(255, 255, 255, 0.8), 
        675px 300px rgba(255, 255, 255, 0.8), 875px 350px rgba(255, 255, 255, 0.8),
        1100px 200px rgba(255, 255, 255, 0.9), 1300px 400px rgba(255, 255, 255, 0.9), 1500px 300px rgba(255, 255, 255, 0.9), 
        1700px 500px rgba(255, 255, 255, 0.9), 1200px 100px rgba(255, 255, 255, 0.9),
        1150px 600px rgba(255, 255, 255, 0.8), 1350px 800px rgba(255, 255, 255, 0.8), 1550px 700px rgba(255, 255, 255, 0.8), 
        1750px 900px rgba(255, 255, 255, 0.8), 1250px 500px rgba(255, 255, 255, 0.8),
        1400px 150px rgba(255, 255, 255, 0.7), 1600px 250px rgba(255, 255, 255, 0.7), 1800px 350px rgba(255, 255, 255, 0.7), 
        1300px 50px rgba(255, 255, 255, 0.7), 1500px 450px rgba(255, 255, 255, 0.7),
        1450px 650px rgba(255, 255, 255, 0.6), 1650px 750px rgba(255, 255, 255, 0.6), 1850px 850px rgba(255, 255, 255, 0.6), 
        1350px 550px rgba(255, 255, 255, 0.6), 1550px 150px rgba(255, 255, 255, 0.6);
}

#stars2 {
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 1);
    border-radius: 50%;
    position: absolute;
    box-shadow: 
        200px 300px rgba(255, 255, 255, 1), 400px 200px rgba(255, 255, 255, 1), 600px 400px rgba(255, 255, 255, 0.9), 
        800px 250px rgba(255, 255, 255, 0.9), 1000px 350px rgba(255, 255, 255, 0.9),
        250px 500px rgba(255, 255, 255, 0.8), 450px 600px rgba(255, 255, 255, 0.8), 650px 550px rgba(255, 255, 255, 0.8), 
        850px 450px rgba(255, 255, 255, 0.8), 1050px 500px rgba(255, 255, 255, 0.8),
        300px 700px rgba(255, 255, 255, 0.9), 500px 800px rgba(255, 255, 255, 0.9), 700px 750px rgba(255, 255, 255, 0.9), 
        900px 650px rgba(255, 255, 255, 0.9), 1100px 700px rgba(255, 255, 255, 0.9),
        1200px 300px rgba(255, 255, 255, 1), 1400px 500px rgba(255, 255, 255, 1), 1600px 400px rgba(255, 255, 255, 0.9), 
        1800px 600px rgba(255, 255, 255, 0.9), 1300px 200px rgba(255, 255, 255, 0.9),
        1250px 700px rgba(255, 255, 255, 0.8), 1450px 900px rgba(255, 255, 255, 0.8), 1650px 800px rgba(255, 255, 255, 0.8), 
        1850px 1000px rgba(255, 255, 255, 0.8), 1350px 600px rgba(255, 255, 255, 0.8);
    animation: animStars 150s linear infinite, twinkle 5s ease-in-out infinite;
}

#stars2:after {
    content: " ";
    position: absolute;
    top: 1000px;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 1);
    border-radius: 50%;
    box-shadow: 
        200px 300px rgba(255, 255, 255, 1), 400px 200px rgba(255, 255, 255, 1), 600px 400px rgba(255, 255, 255, 0.9), 
        800px 250px rgba(255, 255, 255, 0.9), 1000px 350px rgba(255, 255, 255, 0.9),
        250px 500px rgba(255, 255, 255, 0.8), 450px 600px rgba(255, 255, 255, 0.8), 650px 550px rgba(255, 255, 255, 0.8), 
        850px 450px rgba(255, 255, 255, 0.8), 1050px 500px rgba(255, 255, 255, 0.8),
        300px 700px rgba(255, 255, 255, 0.9), 500px 800px rgba(255, 255, 255, 0.9), 700px 750px rgba(255, 255, 255, 0.9), 
        900px 650px rgba(255, 255, 255, 0.9), 1100px 700px rgba(255, 255, 255, 0.9),
        1200px 300px rgba(255, 255, 255, 1), 1400px 500px rgba(255, 255, 255, 1), 1600px 400px rgba(255, 255, 255, 0.9), 
        1800px 600px rgba(255, 255, 255, 0.9), 1300px 200px rgba(255, 255, 255, 0.9),
        1250px 700px rgba(255, 255, 255, 0.8), 1450px 900px rgba(255, 255, 255, 0.8), 1650px 800px rgba(255, 255, 255, 0.8), 
        1850px 1000px rgba(255, 255, 255, 0.8), 1350px 600px rgba(255, 255, 255, 0.8);
}

#stars3 {
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 1);
    border-radius: 50%;
    position: absolute;
    box-shadow: 
        300px 400px rgba(255, 255, 255, 1), 500px 300px rgba(255, 255, 255, 1), 700px 500px rgba(255, 255, 255, 1), 
        900px 350px rgba(255, 255, 255, 1), 1100px 450px rgba(255, 255, 255, 1),
        1300px 400px rgba(255, 255, 255, 0.9), 1500px 600px rgba(255, 255, 255, 0.9), 1700px 500px rgba(255, 255, 255, 0.9), 
        1200px 300px rgba(255, 255, 255, 0.9), 1400px 700px rgba(255, 255, 255, 0.9),
        400px 200px rgba(255, 255, 255, 1), 600px 600px rgba(255, 255, 255, 1), 800px 800px rgba(255, 255, 255, 0.9),
        1000px 100px rgba(255, 255, 255, 0.9), 1600px 900px rgba(255, 255, 255, 0.9);
    animation: animStars 180s linear infinite, twinkle 6s ease-in-out infinite;
    filter: blur(0.5px);
}

#stars3:after {
    content: " ";
    position: absolute;
    top: 1000px;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 1);
    border-radius: 50%;
    box-shadow: 
        300px 400px rgba(255, 255, 255, 1), 500px 300px rgba(255, 255, 255, 1), 700px 500px rgba(255, 255, 255, 1), 
        900px 350px rgba(255, 255, 255, 1), 1100px 450px rgba(255, 255, 255, 1),
        1300px 400px rgba(255, 255, 255, 0.9), 1500px 600px rgba(255, 255, 255, 0.9), 1700px 500px rgba(255, 255, 255, 0.9), 
        1200px 300px rgba(255, 255, 255, 0.9), 1400px 700px rgba(255, 255, 255, 0.9),
        400px 200px rgba(255, 255, 255, 1), 600px 600px rgba(255, 255, 255, 1), 800px 800px rgba(255, 255, 255, 0.9),
        1000px 100px rgba(255, 255, 255, 0.9), 1600px 900px rgba(255, 255, 255, 0.9);
    filter: blur(0.5px);
}

@keyframes animStars {
    from {
        transform: translateY(0px);
    }
    to {
        transform: translateY(-1000px);
    }
}

@keyframes twinkle {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* White overlay for readability - REDUCED to 60-75% so stars are MORE VISIBLE */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.65) 0%,
        rgba(255, 255, 255, 0.70) 50%,
        rgba(255, 255, 255, 0.80) 100%
    );
    z-index: 1;
}

.hero-content {
    max-width: 900px;
    position: relative;
    z-index: 2;
}

.hero-title {
    font-size: clamp(48px, 8vw, 80px);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 32px;
    animation: fadeInUp 0.8s ease-out;
}

.gradient-text {
    background: linear-gradient(135deg, var(--color-accent) 0%, #0047AB 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 400;
}

.hero-description {
    font-size: 20px;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin-bottom: 40px;
    max-width: 700px;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    animation: fadeInUp 0.8s ease-out 0.4s backwards;
}

/* Buttons */
.btn {
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s;
    border: 2px solid transparent;
}

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

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.btn-secondary {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}

.btn-secondary:hover {
    border-color: var(--color-text);
}

/* Section Styles */
section {
    padding: 120px 0;
}

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

.label {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin-bottom: 16px;
}

.section-title {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* Why Section */
.why-section {
    background: #FAFAFA;
}

.why-content {
    max-width: 800px;
    margin-bottom: 80px;
}

.why-description {
    font-size: 24px;
    line-height: 1.6;
    color: var(--color-text);
    margin-bottom: 24px;
}

.why-tagline {
    font-size: 20px;
    font-weight: 500;
    color: var(--color-text);
}

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

.why-grid-four {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.why-card {
    padding: 40px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.why-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 102, 255, 0.08);
    border-color: var(--color-accent);
}

.why-card h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--color-text);
}

.why-card p {
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* Highlight styles for bold brand color */
.highlight {
    color: var(--color-accent);
    font-weight: 600;
}

/* Capabilities Section */
.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
}

.capability-card {
    background: var(--color-bg);
    padding: 48px 40px;
    transition: background 0.3s;
}

.capability-card:hover {
    background: #FAFAFA;
}

.capability-number {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--color-accent);
    margin-bottom: 24px;
}

.capability-card h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 16px;
}

.capability-card p {
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* Team Section */
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.team-card {
    text-align: left;
    display: flex;
    flex-direction: column;
}

.team-photo {
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(135deg, #E5E5E5 0%, #F5F5F5 100%);
    border-radius: 8px;
    margin-bottom: 24px;
    transition: transform 0.3s;
}

.team-card:hover .team-photo {
    transform: scale(1.02);
}

.team-card h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 4px;
}

.role {
    font-size: 14px;
    color: var(--color-accent);
    margin-bottom: 16px;
    font-weight: 500;
}

.bio {
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

.linkedin-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s;
    margin-top: auto;
}

.linkedin-link:hover {
    color: var(--color-accent);
}

/* CTA Section */
.cta-section {
    text-align: center;
    padding: 160px 0;
    background: var(--color-text);
    color: var(--color-bg);
}

.cta-section h2 {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 300;
    margin-bottom: 24px;
}

.cta-section p {
    font-size: 20px;
    opacity: 0.8;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.cta-section .btn-primary {
    background: var(--color-bg);
    color: var(--color-text);
}

/* Footer */
.footer {
    padding: 80px 0 40px;
    border-top: 1px solid var(--color-border);
    background: #FAFAFA;
}

.footer-main {
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    gap: 80px;
    margin-bottom: 60px;
}

.footer-brand {
    max-width: 400px;
}

.footer-logo {
    font-size: 20px;
    font-weight: 600;
    font-family: var(--font-mono);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.footer-tagline {
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
}

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

.social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    transition: all 0.3s;
}

.social-link:hover {
    background: var(--color-accent);
    color: var(--color-bg);
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

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

.footer-column h4 {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    color: var(--color-text);
}

.footer-column ul {
    list-style: none;
}

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

.footer-column ul li a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 15px;
    transition: color 0.2s;
}

.footer-column ul li a:hover {
    color: var(--color-accent);
}

.footer-bottom {
    padding-top: 40px;
    border-top: 1px solid var(--color-border);
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom p {
    color: var(--color-text-muted);
    font-size: 14px;
}

.footer-legal {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-legal a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.footer-legal a:hover {
    color: var(--color-accent);
}

.footer-legal .separator {
    color: var(--color-border);
}

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

/* Responsive */
@media (max-width: 1024px) {
    .why-grid-four {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-main {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .footer-links {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .nav .container {
        height: 70px;
    }
    
    .hero {
        padding: 140px 0 80px;
    }
    
    section {
        padding: 80px 0;
    }
    
    .section-header {
        margin-bottom: 60px;
    }
    
    .why-description {
        font-size: 20px;
    }
    
    .why-grid-four {
        grid-template-columns: 1fr;
    }
    
    .capabilities-grid {
        grid-template-columns: 1fr;
    }
    
    .team-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .footer-links {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 20px;
    }
    
    .hero-actions {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
        text-align: center;
    }
    
    .footer {
        padding: 60px 0 40px;
    }
}