:root {
  --bg: #070a12;
  --card: #0b1020;
  --elev: #0e1430;
  --text: #e9f0ff;
  --muted: #9bb0d3;
  --primary: #5aa8ff;
  --primary-700: #2a74f5;
  --accent: #7b5cff;
  --success: #00d38f;
  --warning: #ffcc66;
  --danger: #ff6b6b;
  --glow: 0 0 40px rgba(90,168,255,.35), 0 0 80px rgba(123,92,255,.18);
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-lg: 0 20px 60px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1000px 800px at 70% -200px, rgba(123,92,255,.12), transparent 40%),
              radial-gradient(800px 700px at -100px 20%, rgba(90,168,255,.15), transparent 50%),
              linear-gradient(0deg, #05070d, #05070d),
              #05070d;
  overflow-x: hidden;
}

#starfield { position: fixed; inset: 0; z-index: -2; background: transparent; pointer-events: none; }

.container { width: min(1200px, 92vw); margin: 0 auto; }

.site-header {
  position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(5,7,13,.75), rgba(5,7,13,.35));
  border-bottom: 1px solid rgba(154,175,214,.08);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
}
.site-header .logo { font-family: "Space Grotesk", sans-serif; font-weight: 800; letter-spacing: .5px; font-size: 1.2rem; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 16px; }
.site-header .logo span { color: var(--primary); text-shadow: var(--glow); }
.nav { display: flex; align-items: center; gap: 16px; padding: 0 16px; }
.nav a { color: var(--muted); text-decoration: none; padding: 10px 12px; border-radius: var(--radius-sm); transition: .25s ease; }
.nav a:hover { color: var(--text); background: rgba(154,175,214,.08); box-shadow: inset 0 0 0 1px rgba(154,175,214,.12); }
#menuToggle { display: none; margin-right: 12px; width: 42px; height: 42px; border-radius: 10px; border: 1px solid rgba(154,175,214,.18); background: rgba(15,20,40,.4); color: var(--text); }
#menuToggle span { display:block; width: 22px; height:2px; background: var(--text); margin:6px auto; border-radius: 2px; opacity:.9; }

.btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; border: 1px solid rgba(154,175,214,.18); color: var(--text); text-decoration: none; background: linear-gradient(180deg, rgba(16,22,45,.9), rgba(16,22,45,.6)); box-shadow: var(--shadow-lg); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn.small { padding: 8px 12px; font-size: .92rem; }
.btn.primary { border-color: rgba(90,168,255,.55); background: linear-gradient(180deg, rgba(41,102,196,.95), rgba(18,35,94,.95)); box-shadow: 0 10px 30px rgba(42,116,245,.35); }
.btn.ghost { background: rgba(15,20,40,.4); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 16px 44px rgba(0,0,0,.5), var(--glow); }

.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.card { background: linear-gradient(180deg, rgba(10,14,28,.9), rgba(10,14,28,.7)); border: 1px solid rgba(154,175,214,.1); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 18px; }

.site-footer { margin-top: 80px; border-top: 1px solid rgba(154,175,214,.08); background: linear-gradient(0deg, rgba(5,7,13,.75), rgba(5,7,13,.35)); }
.site-footer .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; padding: 28px 16px; align-items: start; }
@media (max-width: 900px){ .site-footer .footer-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); } }
@media (max-width: 620px){ .site-footer .footer-grid { grid-template-columns: 1fr; } }
.site-footer .logo { font-weight: 800; color: var(--text); }
.site-footer .legal { text-align: center; color: var(--muted); padding: 12px 0 20px; border-top: 1px solid rgba(154,175,214,.08); }

.hero { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 24px; padding: 36px 16px 8px; }
.hero h1 { font-size: clamp(2rem, 3.6vw, 3.2rem); margin: 0 0 12px; font-family: "Space Grotesk", sans-serif; letter-spacing: .5px; }
.hero p { margin: 0 0 18px; color: var(--muted); }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-visual { height: 320px; background: radial-gradient(500px 350px at 70% -10%, rgba(123,92,255,.24), transparent 40%); border-radius: var(--radius); border: 1px solid rgba(154,175,214,.08); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }

.about, .planets { padding: 16px; }

.reveal { opacity: 0; transform: translateY(14px); transition: .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Global form elements */
label { color: var(--muted); display:block; margin-bottom: 6px; }
input, textarea, select { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid rgba(154,175,214,.16); background: rgba(10,14,28,.7); color: var(--text); outline: none; transition: .2s ease; }
input:focus, textarea:focus, select:focus { border-color: rgba(90,168,255,.55); box-shadow: 0 0 0 4px rgba(90,168,255,.12); }

/* Footer enhancements */
.site-footer .footer-grid.container { padding: 28px 16px; }
.site-footer .footer-brand p { margin: 8px 0 12px; color: var(--muted); }
.site-footer .social { list-style: none; padding: 0; margin: 8px 0 0; display: flex; gap: 12px; }
.site-footer .social a { color: var(--muted); text-decoration: none; border: 1px solid rgba(154,175,214,.14); padding: 6px 10px; border-radius: 999px; transition: .2s ease; }
.site-footer .social a:hover { color: var(--text); border-color: rgba(154,175,214,.3); }
.site-footer .newsletter .row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.site-footer .newsletter input { border-radius: 999px; }
.site-footer .footer-bottom { border-top: 1px solid rgba(154,175,214,.08); padding: 10px 0; color: var(--muted); }
.site-footer .footer-bottom .container { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.site-footer .footer-bottom .links { display: flex; gap: 12px; }
.site-footer .footer-bottom .links a { color: var(--muted); text-decoration: none; }
@media (max-width: 720px){ .site-footer .footer-bottom .container { flex-direction: column; } }

/* Footer list styling */
.site-footer h4 { margin: 0 0 10px; font-family: "Space Grotesk", sans-serif; letter-spacing: .4px; }
.site-footer ul { list-style: none; padding: 0; margin: 8px 0 0; }
.site-footer ul li { margin: 6px 0; }
.site-footer ul li a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; text-decoration: none; color: var(--text); opacity: .9; transition: .2s ease; }
.site-footer ul li a::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: rgba(154,175,214,.5); }
.site-footer ul li a::after { content: '›'; margin-left: auto; color: var(--muted); opacity: 0; transform: translateX(-2px); transition: .2s ease; }
.site-footer ul li a:hover { background: rgba(154,175,214,.08); box-shadow: inset 0 0 0 1px rgba(154,175,214,.12); opacity: 1; }
.site-footer ul li a:hover::after { opacity: 1; transform: translateX(2px); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
}

/* Responsive navbar */
@media (max-width: 860px) {
  .site-header { grid-template-columns: auto auto auto; }
  .nav { position: fixed; right: 10px; top: 62px; display: none; flex-direction: column; background: rgba(8,10,20,.92); border: 1px solid rgba(154,175,214,.12); padding: 12px; border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 60; min-width: 180px; }
  .nav.open { display: flex; }
  #menuToggle { display: inline-block; }
}