* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #0a0a1a; color: #fff; line-height: 1.6; }
a { color: #4a9eff; text-decoration: none; }
a:hover { text-decoration: underline; }

nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background: #12122a; }
.logo { font-size: 1.5rem; font-weight: bold; color: #fff; }
.nav-links a { margin-left: 2rem; color: #aaa; }
.nav-links a:hover { color: #fff; }

.hero { text-align: center; padding: 6rem 2rem; background: linear-gradient(135deg, #1a1a3e 0%, #0a0a1a 100%); }
.hero h1 { font-size: 3rem; margin-bottom: 1rem; }
.hero p { font-size: 1.25rem; color: #aaa; margin-bottom: 2rem; }
.cta-buttons { display: flex; gap: 1rem; justify-content: center; }

.btn { display: inline-block; padding: 0.75rem 2rem; border-radius: 8px; font-weight: 600; transition: all 0.2s; border: none; cursor: pointer; }
.btn.primary { background: #4a9eff; color: #fff; }
.btn.primary:hover { background: #3a8eef; text-decoration: none; }
.btn.secondary { background: transparent; border: 2px solid #4a9eff; color: #4a9eff; }
.btn.secondary:hover { background: #4a9eff22; text-decoration: none; }
.btn.danger { background: #e94560; color: #fff; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; padding: 4rem 2rem; max-width: 1200px; margin: 0 auto; }
.feature { background: #12122a; padding: 2rem; border-radius: 12px; text-align: center; }
.feature h3 { margin-bottom: 1rem; color: #4a9eff; }

.pricing { padding: 4rem 2rem; text-align: center; }
.pricing h2 { margin-bottom: 3rem; font-size: 2rem; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; max-width: 1000px; margin: 0 auto; }
.plan { background: #12122a; padding: 2rem; border-radius: 12px; }
.plan.featured { border: 2px solid #4a9eff; transform: scale(1.05); }
.plan h3 { margin-bottom: 1rem; }
.price { font-size: 2.5rem; font-weight: bold; margin-bottom: 1.5rem; }
.price span { font-size: 1rem; color: #aaa; }
.plan ul { list-style: none; margin-bottom: 2rem; }
.plan li { padding: 0.5rem 0; border-bottom: 1px solid #2a2a4a; }
.plan li:last-child { border: none; }

footer { text-align: center; padding: 2rem; background: #12122a; color: #aaa; }
footer a { color: #aaa; margin: 0 1rem; }

.container { max-width: 500px; margin: 4rem auto; padding: 2rem; background: #12122a; border-radius: 12px; }
.container h2 { margin-bottom: 2rem; text-align: center; }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5rem; color: #aaa; }
.form-group input, .form-group textarea { width: 100%; padding: 0.75rem; border: 1px solid #2a2a4a; border-radius: 6px; background: #0a0a1a; color: #fff; font-size: 1rem; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: #4a9eff; }
.btn-full { width: 100%; }
.message { padding: 1rem; border-radius: 6px; margin-bottom: 1rem; }
.message.success { background: #1a4a1a; color: #4aff4a; }
.message.error { background: #4a1a1a; color: #ff4a4a; }

.dashboard { max-width: 900px; margin: 2rem auto; padding: 0 2rem; }
.card { background: #12122a; padding: 1.5rem; border-radius: 12px; margin-bottom: 1.5rem; }
.card h3 { margin-bottom: 1rem; color: #4a9eff; }
.service-id { background: #0a0a1a; padding: 1rem; border-radius: 6px; margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; }
.service-id code { font-size: 1.25rem; font-weight: bold; color: #4aff4a; }
.badge { padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8rem; }
.badge.verified { background: #1a4a1a; color: #4aff4a; }
.badge.pending { background: #4a4a1a; color: #ffff4a; }