:root{
  --bg1:#0f172a; --bg2:#1e293b;
  --accent:#6366f1; --accent2:#8b5cf6;
  --text:#f8fafc; --sub:#94a3b8;
  --card:rgba(255,255,255,0.05);
  --stroke:rgba(255,255,255,0.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
  color:var(--text);line-height:1.6;
  background:
    radial-gradient(circle at 20% 10%, rgba(49,46,129,0.55) 0%, transparent 50%),
    radial-gradient(circle at 80% 90%, rgba(76,29,149,0.5) 0%, transparent 50%),
    linear-gradient(160deg,var(--bg1),var(--bg2));
  min-height:100vh;
}
.container{max-width:720px;margin:0 auto;padding:48px 24px}
header{text-align:center;margin-bottom:40px}
header .logo{
  display:inline-flex;align-items:center;justify-content:center;
  width:96px;height:96px;border-radius:22px;
  background:linear-gradient(135deg,#6366f1,#8b5cf6,#ec4899);
  box-shadow:0 20px 50px -15px rgba(99,102,241,0.6);
  position:relative;margin-bottom:16px;
}
header .logo::before,
header .logo::after,
header .logo .ring{
  content:"";position:absolute;border-radius:50%;border:2px solid rgba(255,255,255,0.55);
}
header .logo::before{width:72px;height:72px;border-width:3px;opacity:0.35}
header .logo::after{width:54px;height:54px;opacity:0.6}
header .logo .ring{width:36px;height:36px;opacity:0.85}
header .logo svg{position:relative;z-index:2;width:22px;height:26px}
header h1{
  font-size:34px;font-weight:800;
  background:linear-gradient(90deg,#a5b4fc,#c4b5fd);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
header p.tagline{color:var(--sub);font-size:14px;margin-top:4px}
nav{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}
nav a{
  color:var(--text);text-decoration:none;font-size:13px;font-weight:600;
  padding:8px 14px;border-radius:999px;background:var(--card);
  border:1px solid var(--stroke);transition:background 0.2s, transform 0.15s;
}
nav a:hover{background:rgba(255,255,255,0.09)}
nav a.active{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent}

h2{font-size:16px;font-weight:700;color:#fff;margin:24px 0 10px;letter-spacing:0.2px}
article.card{
  background:var(--card);border:1px solid var(--stroke);border-radius:18px;
  padding:18px 22px;margin-bottom:14px;backdrop-filter:blur(12px);
}
article.card h3{font-size:15px;font-weight:700;margin-bottom:6px;color:#fff}
article.card p{font-size:14px;color:var(--sub)}
.meta{text-align:center;color:var(--sub);font-size:11px;margin-top:6px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.grid .tile{
  background:var(--card);border:1px solid var(--stroke);border-radius:16px;
  padding:18px;text-decoration:none;color:var(--text);
  transition:transform 0.15s, background 0.2s;
}
.grid .tile:hover{background:rgba(255,255,255,0.08);transform:translateY(-2px)}
.grid .tile .icon{font-size:28px;margin-bottom:6px;display:block}
.grid .tile .title{font-size:14px;font-weight:700}
.grid .tile .sub{font-size:11px;color:var(--sub);margin-top:2px}
footer{text-align:center;margin-top:48px;padding-top:24px;border-top:1px solid var(--stroke);color:var(--sub);font-size:11px}
footer a{color:#a5b4fc;text-decoration:none}
footer a:hover{text-decoration:underline}
@media (max-width:520px){
  .container{padding:32px 18px}
  header h1{font-size:28px}
  .grid{grid-template-columns:1fr}
}