styles.css

:root{
  --bg:#0b1020;
  --card:#f7df1e;
  --muted:#e6e6e6;
  --accent:#323330;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:linear-gradient(180deg,#021022 0%, #07122a 60%);
  color:var(--muted);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.site-header{max-width:960px;width:100%;padding:48px 20px 8px;text-align:center}
.logo{display:inline-block;background:var(--card);color:#111;padding:8px 12px;border-radius:8px;font-weight:700;margin-bottom:12px}
h1{margin:8px 0 6px;font-size:28px;color:var(--card)}
.lead{margin:0 0 18px;color:#cfd8dc}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;max-width:1000px;width:100%;padding:20px}
.card{display:block;padding:18px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);text-decoration:none;color:inherit;box-shadow:0 6px 18px rgba(2,6,23,0.6);transition:transform .18s ease, box-shadow .18s ease}
.card h2{margin:0 0 6px;color:var(--card);font-size:18px}
.card p{margin:0;color:#cbd5da}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(2,6,23,0.7)}
.site-footer{margin:28px 0 56px;color:#9fb0bf}

@media (max-width:420px){h1{font-size:20px}.card{padding:14px}}