/* Hero Section Styles */

.hero-section {
    position: relative;
    height: 80vh;
    /* Occupy significant viewport height */
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--color-bg-primary);
    overflow: hidden;
    color: var(--color-text-on-dark);
}

/* Starfield / Dark Overlay effect */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradient overlay acting as the starfield background base */
    background: radial-gradient(ellipse at center, #1b2735 0%, #090a0f 100%);
    z-index: 1;
}

/* Optional: If we want to add CSS stars later, they would go here. 
   For now, keeping the base compliant with the prompt's request for "starfield feel". */

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 0 var(--spacing-unit);
}

.hero-title {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    animation: fadeInDown 1s ease-out;
}

.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
    color: #E5E7EB;
    font-weight: 300;
    animation: fadeInUp 1s ease-out 0.5s both;
}

.hero-cta-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
    animation: fadeInUp 1s ease-out 1s both;
}

/* Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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