* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #fff; background: #0a0a1a; }
a { color: #4fc3f7; text-decoration: none; }

nav { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 5%; }
.logo { font-size: 1.5rem; font-weight: 700; }
.logo span { color: #4fc3f7; }
nav ul { display: flex; list-style: none; gap: 2rem; }
nav ul a { color: #ccc; transition: color .2s; }
nav ul a:hover { color: #4fc3f7; }

@media (max-width: 768px) {
    nav { flex-direction: column; gap: 1rem; }
    nav ul { gap: 1rem; }
}

.hero { text-align: center; padding: 8rem 2rem 6rem; }
.hero h1 { font-size: 3rem; margin-bottom: 1rem; }
.hero p { font-size: 1.2rem; color: #aaa; margin-bottom: 2rem; }
button { background: #4fc3f7; color: #0a0a1a; border: none; padding: .8rem 2rem; font-size: 1rem; border-radius: 4px; cursor: pointer; font-weight: 600; }
button:hover { background: #039be5; }

.services { padding: 4rem 5%; text-align: center; }
.services h2 { margin-bottom: 2rem; font-size: 2rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; }
.card { background: #12122a; padding: 2rem; border-radius: 8px; border: 1px solid #222; }
.card h3 { margin-bottom: .5rem; }
.card p { color: #aaa; }

.about { padding: 4rem 5%; text-align: center; max-width: 700px; margin: auto; }
.about h2 { margin-bottom: 1rem; font-size: 2rem; }
.about p { color: #aaa; line-height: 1.7; }

footer { text-align: center; padding: 2rem; color: #555; border-top: 1px solid #1a1a2e; margin-top: 4rem; }

.popup-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7); justify-content: center; align-items: center; z-index: 1000; }
.popup-overlay.active { display: flex; }
.popup { background: #1a1a2e; padding: 3rem; border-radius: 8px; text-align: center; position: relative; }
.popup a { font-size: 1.3rem; font-weight: 600; }
.popup h2 { margin-bottom: 1rem; }
.popup p { color: #aaa; margin-bottom: 1rem; }
#popup-close { position: absolute; top: 1rem; right: 1.5rem; font-size: 1.5rem; cursor: pointer; color: #aaa; }

@media (max-width: 768px) {
    .hero h1 { font-size: 1.8rem; }
    .hero { padding: 4rem 1.5rem 3rem; }
    .services { padding: 3rem 1.5rem; }
    .cards { grid-template-columns: 1fr; }
    .about { padding: 3rem 1.5rem; }
    .popup { padding: 2rem 1.5rem; margin: 1rem; }
}