:root{
  --bg:#0b1020; --card:#12182b; --text:#e9efff; --muted:#a8b3d9; --accent:#6aa1ff; --accent2:#7ef0c1;
}

/* Base & layout */
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.container{ max-width:1100px; margin:0 auto; padding:20px; }

/* Nav */
.nav{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; }
.brand{ font-weight:700; text-decoration:none; color:var(--text); }
.nav-links a{ color:var(--muted); text-decoration:none; margin-left:14px; }
.nav-links a.cta{ color:#000; background:var(--accent2); padding:8px 12px; border-radius:10px; }

/* Hero */
.hero{ display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:center; margin-top:24px; }
.subhead{ color:var(--muted); }
.hero-img{ width:100%; border-radius:16px; box-shadow:0 8px 40px rgba(0,0,0,.4); }
.cta-row{ margin-top:12px; }

/* Buttons */
.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--accent);
  text-decoration:none;
  color:var(--text);
  margin-right:10px;
}
.btn.primary{ background:var(--accent); color:#000; border-color:transparent; }

/* Cards & grids */
.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:30px 0; }
.card{ background:var(--card); padding:16px; border-radius:16px; border:1px solid rgba(255,255,255,.08); }

/* Embeds */
.iframe-wrap{ border:1px solid rgba(255,255,255,.1); border-radius:16px; overflow:hidden; }
.iframe-wrap iframe{ width:100%; height:900px; border:0; background:#fff; }

/* Footer */
.footer{
  display:flex; align-items:center; justify-content:space-between;
  margin:28px 0; color:var(--muted);
}
/* Remove underlines in the footer explicitly */
.footer .footer-links a,
.footer .footer-links a:hover{
  text-decoration:none !important;
  color:#9ec0ff;
}
/* In case a framework adds decorative ::after underlines */
.footer .footer-links a::after{ content:none !important; }

/* Responsive */
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .grid{ grid-template-columns:1fr; }
}
