* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
}

header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

nav {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
    color: white;
    letter-spacing: 0.05em;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2.5rem;
}

.nav-links a {
    text-decoration: none;
    color: white;
    font-size: 0.95rem;
    transition: opacity 0.2s;
}

.nav-links a:hover {
    opacity: 0.75;
}

.nav-links a.active {
    font-weight: bold;
}

.hero {
    position: relative;
    overflow: hidden;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    background-color: #07041a;
    background-image:
        /* bright "pop" stars - small intense core with a soft glow halo each */
        radial-gradient(2px 2px at 18% 22%, rgba(255,255,255,1), transparent),
        radial-gradient(6px 6px at 18% 22%, rgba(255,240,255,0.35), transparent),
        radial-gradient(2.5px 2.5px at 38% 55%, rgba(255,255,255,1), transparent),
        radial-gradient(7px 7px at 38% 55%, rgba(220,180,255,0.3), transparent),
        radial-gradient(2px 2px at 62% 28%, rgba(255,255,255,1), transparent),
        radial-gradient(6px 6px at 62% 28%, rgba(255,240,255,0.35), transparent),
        radial-gradient(2.5px 2.5px at 75% 70%, rgba(255,255,255,1), transparent),
        radial-gradient(7px 7px at 75% 70%, rgba(220,180,255,0.3), transparent),
        radial-gradient(2px 2px at 25% 75%, rgba(255,255,255,1), transparent),
        radial-gradient(6px 6px at 25% 75%, rgba(255,240,255,0.35), transparent),
        radial-gradient(2.5px 2.5px at 88% 40%, rgba(255,255,255,1), transparent),
        radial-gradient(7px 7px at 88% 40%, rgba(255,220,255,0.3), transparent),
        radial-gradient(2px 2px at 50% 18%, rgba(255,255,255,1), transparent),
        radial-gradient(6px 6px at 50% 18%, rgba(255,240,255,0.35), transparent),
        radial-gradient(2.5px 2.5px at 10% 50%, rgba(255,255,255,1), transparent),
        radial-gradient(7px 7px at 10% 50%, rgba(220,180,255,0.3), transparent),
        /* dense regular stars - varied sizes and subtle color tints */
        radial-gradient(1.5px 1.5px at 8% 12%, rgba(255,255,255,0.95), transparent),
        radial-gradient(1px 1px at 15% 28%, rgba(255,255,255,0.85), transparent),
        radial-gradient(2px 2px at 22% 8%, rgba(255,240,255,0.95), transparent),
        radial-gradient(1px 1px at 30% 40%, rgba(220,200,255,0.9), transparent),
        radial-gradient(1.5px 1.5px at 38% 18%, rgba(255,255,255,0.95), transparent),
        radial-gradient(1px 1px at 45% 65%, rgba(255,220,255,0.85), transparent),
        radial-gradient(2.5px 2.5px at 52% 32%, rgba(255,255,255,1), transparent),
        radial-gradient(1px 1px at 58% 78%, rgba(200,180,255,0.85), transparent),
        radial-gradient(1.5px 1.5px at 65% 14%, rgba(255,255,255,0.95), transparent),
        radial-gradient(1px 1px at 72% 48%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1px 1px at 78% 72%, rgba(255,220,255,0.85), transparent),
        radial-gradient(2px 2px at 85% 22%, rgba(255,255,255,0.95), transparent),
        radial-gradient(1px 1px at 92% 55%, rgba(220,180,255,0.85), transparent),
        radial-gradient(1px 1px at 5% 60%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1.5px 1.5px at 12% 80%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 18% 92%, rgba(255,220,255,0.85), transparent),
        radial-gradient(1px 1px at 28% 85%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1px 1px at 35% 95%, rgba(200,180,255,0.85), transparent),
        radial-gradient(1.5px 1.5px at 48% 88%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 60% 92%, rgba(255,255,255,0.85), transparent),
        radial-gradient(2px 2px at 75% 88%, rgba(255,240,255,0.95), transparent),
        radial-gradient(1px 1px at 88% 80%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1px 1px at 95% 95%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1px 1px at 42% 5%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1px 1px at 80% 8%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1.5px 1.5px at 25% 55%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 68% 60%, rgba(255,220,255,0.85), transparent),
        /* additional stars to fill in gaps at wider viewports */
        radial-gradient(1px 1px at 3% 25%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1px 1px at 3% 88%, rgba(255,220,255,0.85), transparent),
        radial-gradient(1.5px 1.5px at 7% 38%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 7% 72%, rgba(220,200,255,0.85), transparent),
        radial-gradient(1px 1px at 11% 4%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1px 1px at 14% 58%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1.5px 1.5px at 14% 68%, rgba(255,240,255,0.9), transparent),
        radial-gradient(1px 1px at 20% 42%, rgba(255,255,255,0.85), transparent),
        radial-gradient(2px 2px at 21% 65%, rgba(255,255,255,0.95), transparent),
        radial-gradient(1px 1px at 27% 18%, rgba(220,200,255,0.85), transparent),
        radial-gradient(1px 1px at 32% 8%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1px 1px at 33% 70%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1.5px 1.5px at 41% 38%, rgba(255,240,255,0.9), transparent),
        radial-gradient(1px 1px at 43% 78%, rgba(220,180,255,0.85), transparent),
        radial-gradient(1px 1px at 46% 25%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1px 1px at 47% 48%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1.5px 1.5px at 54% 8%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 56% 58%, rgba(255,220,255,0.85), transparent),
        radial-gradient(1px 1px at 58% 25%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1px 1px at 63% 38%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1px 1px at 66% 82%, rgba(220,200,255,0.85), transparent),
        radial-gradient(1.5px 1.5px at 70% 32%, rgba(255,240,255,0.9), transparent),
        radial-gradient(1px 1px at 70% 5%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1px 1px at 73% 18%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1px 1px at 77% 35%, rgba(255,255,255,0.85), transparent),
        radial-gradient(2px 2px at 82% 62%, rgba(255,255,255,0.95), transparent),
        radial-gradient(1px 1px at 83% 8%, rgba(220,180,255,0.85), transparent),
        radial-gradient(1px 1px at 86% 90%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1.5px 1.5px at 90% 28%, rgba(255,240,255,0.9), transparent),
        radial-gradient(1px 1px at 91% 70%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1px 1px at 96% 18%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1px 1px at 97% 42%, rgba(220,200,255,0.85), transparent),
        radial-gradient(1px 1px at 98% 78%, rgba(255,255,255,0.85), transparent),
        /* purple nebula clouds for cosmic dust */
        radial-gradient(ellipse 500px 280px at 30% 40%, rgba(120, 50, 180, 0.38) 0%, transparent 65%),
        radial-gradient(ellipse 400px 220px at 70% 60%, rgba(90, 40, 160, 0.34) 0%, transparent 65%),
        radial-gradient(ellipse 350px 200px at 50% 50%, rgba(180, 90, 220, 0.22) 0%, transparent 65%);
}

/* rotated galactic band - the disk of the galaxy seen edge-on */
.hero::before {
    content: '';
    position: absolute;
    inset: -30%;
    background:
        radial-gradient(ellipse 65% 7% at 50% 50%, rgba(220, 160, 255, 0.4) 0%, transparent 65%),
        radial-gradient(ellipse 55% 5% at 50% 50%, rgba(255, 240, 255, 0.3) 0%, transparent 65%);
    transform: rotate(-22deg);
    pointer-events: none;
    z-index: 0;
}

/* bright galactic core glow */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle 180px at 50% 50%, rgba(255, 240, 255, 0.5) 0%, rgba(190, 130, 240, 0.25) 35%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
    padding: 2rem;
}

.hero h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 4rem;
    font-weight: normal;
    margin-bottom: 1.5rem;
    letter-spacing: 0.02em;
}

.hero p {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
    font-weight: normal;
}

section:not(.hero) {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

section h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    font-weight: normal;
    margin-bottom: 1.5rem;
    color: #6c2fa5;
}

.intro p {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    max-width: 780px;
}

.intro-cta {
    margin-top: 1.5rem;
}

.intro-cta a {
    color: #6c2fa5;
    font-weight: bold;
    text-decoration: none;
    border-bottom: 2px solid #6c2fa5;
    padding-bottom: 2px;
    transition: opacity 0.2s;
}

.intro-cta a:hover {
    opacity: 0.7;
}

.callout {
    max-width: 880px;
    margin: 2rem 0;
}

.callout h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.4rem;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 1rem;
}

.callout p {
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

.callout .tagline {
    font-style: italic;
    color: #555;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.service-card {
    background: #ead7f5;
    padding: 2rem;
    border-radius: 8px;
    border: 2px solid #b380e0;
}

.service-card h3 {
    color: #2c3e50;
    margin-bottom: 0.75rem;
    min-height: 3.2em;
}

footer {
    background: #0a0521;
    color: white;
    text-align: center;
    padding: 2rem;
}

@media (max-width: 600px) {
    .nav-links {
        gap: 1rem;
        font-size: 0.85rem;
    }
    .logo {
        font-size: 1rem;
    }
    .hero h1 {
        font-size: 2.5rem;
    }
    .hero p {
        font-size: 1rem;
    }
}