/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    text-align: center;
    overflow: hidden;
    padding-top: 60px;
}

.stars {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, var(--accent-color) 0.1px, transparent 1px);
    background-size: 50px 50px;
    animation: stars 20s linear infinite;
    opacity: 0.3;
}

@keyframes stars {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50px); }
}

.hero h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 1rem;
    animation: fadeIn 1s ease-out;
}

.hero p {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    margin-bottom: 2rem;
    opacity: 0.9;
}