:root {
  --bg:#050d18; --card:#0b1f35; --primary:#0a3cff;
  --accent:#00b3ff; --text:#e6eef7; --muted:#9bb0c9;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

body {
  background:radial-gradient(circle at top,#07162a,var(--bg));
  color:var(--text);
  font-family:Segoe UI,system-ui,sans-serif;
}

a { color:var(--accent); }
a:focus, button:focus, input:focus, textarea:focus {
  outline:3px solid var(--accent);
  outline-offset:2px;
}

header {
  padding:20px 6%;
  display:flex; justify-content:space-between; align-items:center;
  background:rgba(5,13,24,.95);
}

nav a { margin-left:22px; text-decoration:none; color:var(--text); }

.hero {
  padding:120px 6%;
  display:grid; grid-template-columns:1.2fr 1fr; gap:60px;
}

.section { padding:90px 6%; }
.section-title { font-size:2.2rem; margin-bottom:40px; }

.grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:35px;
}

.card {
  background:linear-gradient(180deg,#0b1f35,#07182b);
  border-radius:16px;
  padding:30px;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
}

button {
  background:linear-gradient(135deg,var(--primary),var(--accent));
  border:none; color:white;
  padding:14px 34px;
  border-radius:40px;
  cursor:pointer;
}

.page { animation:fade .6s ease; }
@keyframes fade { from{opacity:0;transform:translateY(10px);} to{opacity:1;} }

footer {
  padding:50px 6%;
  background:#040b14;
  color:var(--muted);
  text-align:center;
}

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