/* ========================================
   4. Hero Section
   ======================================== */
.hero-section {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding: var(--spacing-20) 0;
    text-align: center;
}

.hero-title {
    font-size: var(--text-5xl);
    color: var(--color-white);
    margin-bottom: var(--spacing-4);
}

.hero-description {
    font-size: var(--text-xl);
    color: var(--color-gray-200);
    margin-bottom: var(--spacing-8);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-button {
    display: inline-block;
    background-color: var(--color-secondary);
    color: var(--color-white);
    padding: var(--spacing-4) var(--spacing-8);
    border-radius: var(--radius-md);
    font-size: var(--text-lg);
    font-weight: 600;
    transition: background-color var(--transition-fast);
}

.hero-button:hover {
    background-color: var(--color-secondary-dark);
    color: var(--color-white);
}

/* ========================================
   5. Section Styles
   ======================================== */
.section-header {
    text-align: center;
    margin-bottom: var(--spacing-10);
}

.section-title {
    font-size: var(--text-3xl);
    color: var(--color-gray-800);
    margin-bottom: var(--spacing-3);
}

.section-description {
    font-size: var(--text-lg);
    color: var(--color-gray-500);
}

.section-footer {
    text-align: center;
    margin-top: var(--spacing-10);
}

/* Featured Projects Section */
.featured-projects-section {
    padding: var(--spacing-16) 0;
    background-color: var(--color-gray-50);
}

/* About Summary Section */
.about-summary-section {
    padding: var(--spacing-16) 0;
    text-align: center;
}

.about-text {
    max-width: 800px;
    margin: 0 auto var(--spacing-6);
    font-size: var(--text-lg);
    color: var(--color-gray-600);
}

.about-link {
    font-weight: 600;
    color: var(--color-primary);
}

/* CTA Section */
.cta-section {
    padding: var(--spacing-16) 0;
    background-color: var(--color-primary);
    color: var(--color-white);
    text-align: center;
}

.cta-title {
    color: var(--color-white);
    margin-bottom: var(--spacing-3);
}

.cta-description {
    color: var(--color-gray-200);
    margin-bottom: var(--spacing-8);
}

.cta-buttons {
    display: flex;
    gap: var(--spacing-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* Grid styles moved to layout/grid.css */
@media (max-width: 768px) {
    .hero-title {
        font-size: var(--text-3xl);
    }

    .hero-description {
        font-size: var(--text-base);
    }
}