:root{--bg:#0f172a;--fg:#e5e7eb;--muted:#94a3b8;--card:#111827;--accent:#60a5fa;--radius:14px}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;background:radial-gradient(1200px 800px at 50% -10%,#1f2937 0%,var(--bg) 60%);color:var(--fg)}
main{display:grid;place-items:center;min-height:100vh;padding:2rem}
.card{width:100%;max-width:760px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 40px rgba(0,0,0,.5);padding:2rem 2.5rem;border-radius:var(--radius);backdrop-filter:blur(6px)}
h1{margin:0 0 .25rem;font-size:2rem}.subtitle{margin:0 0 1rem;color:var(--muted)}.counter{font-weight:600;font-size:1.1rem}
/* ---- Link styling ---- */
a {
  color: #4da3ff;              /* bright blue (adjust to taste) */
  text-decoration: none;       /* remove underline */
  font-weight: 500;
}

a:hover {
  color: #80c8ff;              /* lighter on hover */
  text-decoration: underline;  /* underline when hovered */
}

a:visited {
  color: #a6c8ff;              /* slightly different for visited links */
}

/* --- Header & Navigation --- */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #111827; /* dark gray-blue */
  color: #f9fafb; /* light text */
  position: sticky;
  top: 0;
  z-index: 1000;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logo img {
  width: 40px;
  height: 40px;
}

.site-title {
  font-size: 1.5rem;
  font-weight: 600;
}

.nav-menu a {
  color: #80c8ff;
  text-decoration: none;
  margin-left: 1.5rem;
  font-weight: 500;
}

.nav-menu a:hover {
  color: #facc15; /* gold hover */
}
/* Smooth scroll for anchor links */
html {
  scroll-behavior: smooth;
}

/* Optional: add spacing so anchored sections don't hide under header */
section {
  scroll-margin-top: 100px;
}