:root{
  --bg: #0b0b10;
  --bg2: #11111a;
  --text: #e7e7f0;
  --muted: #a7a7c0;
  --accent: #00ffaa;
  --accent2: #8a2be2;
  --card: #141420;
  --ring: rgba(138,43,226,.25);
}
@media (prefers-color-scheme: light){
  :root{ --bg:#fafbff; --bg2:#f0f3ff; --text:#10111a; --muted:#4b4d66; --card:#ffffff; --ring:rgba(0,0,0,.08);}  
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(138,43,226,.25), transparent 50%),
    radial-gradient(1200px 600px at 110% 50%, rgba(0,255,170,.18), transparent 50%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  min-height:100%;
}
.container{ max-width:1100px; margin:0 auto; padding:24px; }
header{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.logo{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text);
}
.logo-mark{ width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg, var(--accent), var(--accent2)); display:grid; place-items:center; box-shadow:0 10px 30px -8px var(--ring); }
.logo-mark span{ font-weight:800; font-family: "Chakra Petch", system-ui; color:#0a0b10; }
.logo-text{ font-family:"Chakra Petch", system-ui; font-weight:700; letter-spacing:.5px; font-size:20px; }
nav a{ color:var(--muted); text-decoration:none; margin-left:18px; font-weight:600; }
nav a:hover{ color:var(--text); }
.hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; padding:72px 0; }
@media (max-width: 900px){ .hero{ grid-template-columns:1fr; padding:48px 0; } }
.title{ font-family:"Chakra Petch", system-ui; font-size:clamp(36px, 6vw, 64px); line-height:1.02; margin:0 0 10px; }
.subtitle{ color:var(--muted); font-size:clamp(16px, 2.2vw, 20px); margin:0 0 24px; }
.cta{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.btn{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none; padding:14px 18px; border-radius:14px; font-weight:700;
  background:var(--card); color:var(--text); border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 25px -12px var(--ring);
  transition: all .2s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow:0 12px 28px -10px var(--ring); }
.btn.primary{ background:linear-gradient(135deg, var(--accent), var(--accent2)); color:#0b0b10; border:none; }
.card{
  background:var(--card); border-radius:20px; padding:22px; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 12px 28px -16px var(--ring);
}
.panel{ display:grid; gap:16px; }
.grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
@media (max-width: 900px){ .grid{ grid-template-columns: 1fr; } }
.stat{ display:flex; align-items:center; justify-content:center; gap:14px; padding:16px; border-radius:16px; background:rgba(255,255,255,.03); border:1px dashed rgba(255,255,255,.08); }
.stat strong{ font-family:"Chakra Petch"; font-size:22px; }
.muted{ color:var(--muted); }
.glow{ position:relative; }
.glow::after{
  content:""; position:absolute; inset:-2px; border-radius:24px; filter:blur(24px); opacity:.35; z-index:-1;
  background:conic-gradient(from 180deg at 50% 50%, var(--accent), transparent 20%, var(--accent2), transparent 60%, var(--accent));
  animation:spin 8s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
footer{ padding:40px 0 24px; color:var(--muted); font-size:14px; }
footer a{ color:inherit; }
.footer-content{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.section-title{ font-size:32px; margin-bottom:8px; }
.highlight{ background:linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* Accessibility helpers */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

.links {
  margin: 3rem auto;
  max-width: 1000px;   /* keeps it centered and not too wide */
  padding: 0 1rem;     /* adds breathing space on mobile */
  text-align: center;
}

.links h2 {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
}

.links ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 900px;
}

.links li {
  margin: 0;
}

.links a {
  display: block;
  padding: 1rem;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #0b0b10;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.links a:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  color: white;
}