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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #0A0A0A;
    color: #FFFFFF;
    line-height: 1.6;
    overflow-x: hidden;
}

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

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(8px);
    z-index: 1000;
    padding: 24px 0;
}

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

.logo-icon {
    font-weight: 700;
    font-size: 28px;
    color: #FFFFFF;
}

.logo-text {
    font-weight: 600;
    font-size: 20px;
    color: #FFFFFF;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #0A0A0A;
    position: relative;
    overflow: hidden;
    padding-top: 80px;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        radial-gradient(circle at 60% 20%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        radial-gradient(circle at 90% 50%, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        radial-gradient(circle at 10% 60%, rgba(255, 255, 255, 0.09) 1px, transparent 1px),
        radial-gradient(circle at 70% 85%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        radial-gradient(circle at 15% 85%, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 75% 45%, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        radial-gradient(circle at 25% 15%, rgba(255, 255, 255, 0.09) 1px, transparent 1px),
        radial-gradient(circle at 65% 75%, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        radial-gradient(circle at 45% 35%, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 95% 80%, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        radial-gradient(circle at 5% 25%, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 55% 90%, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        radial-gradient(circle at 35% 65%, rgba(255, 255, 255, 0.09) 1px, transparent 1px),
        radial-gradient(circle at 80% 35%, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 300px 300px, 280px 280px, 250px 250px, 320px 320px, 270px 270px, 290px 290px, 240px 240px, 310px 310px, 260px 260px, 330px 330px, 280px 280px, 300px 300px, 290px 290px, 270px 270px, 310px 310px, 260px 260px, 280px 280px, 250px 250px, 300px 300px, 320px 320px;
    animation: float 40s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-5px) rotate(0.3deg); }
}

.hero-title {
    font-size: clamp(4rem, 10vw, 6.5rem);
    font-weight: 600;
    margin-bottom: 32px;
    position: relative;
    z-index: 2;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.hero-subtitle {
    font-size: clamp(1.4rem, 4vw, 2.1rem);
    font-weight: 400;
    margin-bottom: 56px;
    opacity: 0.8;
    position: relative;
    z-index: 2;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.cta-button {
    background-color: #FFFFFF;
    color: #1A1A1A;
    border: none;
    padding: 18px 36px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    letter-spacing: 0.02em;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.15);
}

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

.section-title {
    font-size: clamp(2.8rem, 6.5vw, 4rem);
    font-weight: 600;
    text-align: center;
    margin-bottom: 80px;
    letter-spacing: -0.02em;
}

/* About Section */
.about-content {
    max-width: 900px;
    margin: 0 auto;
}

.about-content p {
    font-size: 18px;
    margin-bottom: 32px;
    opacity: 0.8;
    line-height: 1.6;
    letter-spacing: -0.01em;
}

/* Services Section */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    margin-top: 80px;
}

.service-card {
    background-color: #1A1A1A;
    padding: 48px 40px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
}

.service-card h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #FFFFFF;
    letter-spacing: -0.01em;
}

.service-card p {
    font-size: 15px;
    opacity: 0.7;
    line-height: 1.6;
    letter-spacing: -0.005em;
}

/* Testimonials Section */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 32px;
    margin-top: 80px;
}

.testimonial-card {
    background-color: #1A1A1A;
    padding: 48px 40px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.2);
}

.testimonial-card blockquote {
    font-size: 18px;
    font-style: italic;
    margin-bottom: 24px;
    line-height: 1.6;
    opacity: 0.85;
    letter-spacing: -0.005em;
}

.testimonial-card cite {
    font-size: 15px;
    font-weight: 600;
    opacity: 0.7;
    display: block;
    letter-spacing: -0.01em;
    line-height: 1.4;
}

/* Contact Section */
.contact-subtitle {
    text-align: center;
    font-size: 20px;
    margin-bottom: 48px;
    opacity: 0.8;
    letter-spacing: -0.01em;
}

.contact-buttons {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.contact-button {
    background-color: transparent;
    color: #FFFFFF;
    text-decoration: none;
    padding: 16px 32px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
    display: inline-block;
    letter-spacing: 0.02em;
}

.contact-button:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.05);
}

/* Footer */
.footer {
    background-color: #1A1A1A;
    padding: 48px 0;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer p {
    font-size: 14px;
    opacity: 0.6;
    letter-spacing: 0.01em;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }
    
    section {
        padding: 80px 0;
    }
    
    .services-grid,
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .contact-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .contact-button {
        width: 100%;
        max-width: 320px;
        text-align: center;
    }
    
    .hero-title {
        font-size: 3.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.3rem;
    }
    
    .section-title {
        font-size: 3rem;
    }
    
    .service-card,
    .testimonial-card {
        padding: 40px 32px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }
    
    .hero-title {
        font-size: 3rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .section-title {
        font-size: 2.5rem;
    }
    
    .service-card,
    .testimonial-card {
        padding: 32px 24px;
    }
    
    .about-content p {
        font-size: 18px;
    }
    
    .contact-button {
        padding: 18px 32px;
        font-size: 15px;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Focus styles for accessibility */
button:focus,
a:focus {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}