:root{
  --bg:#0e1419;
  --panel:#131b22;
  --ink:#cfe8ff;
  --ink-dim:#9db7cc;
  --blue:#4bb3ff;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial}
a{color:#74c7ff;text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

.site-header{position:sticky;top:0;background:#0f151b;border-bottom:1px solid #0c1014;z-index:10}
.header-inner{display:flex;gap:24px;height:64px;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{height:38px;width:auto;display:block;filter:drop-shadow(0 0 6px rgba(80,180,255,.15))}
@media (min-width: 1024px){
  .brand-logo{height:44px}
}
.brand-word{letter-spacing:.08em;font-weight:700;color:#7bd0ff}

.main-nav a{margin-left:18px;opacity:.9}
.main-nav a:hover{opacity:1}

.main-content{padding:42px 0 24px}
.hero h1{font-size:52px;margin:0 0 6px}
.hero .lede{margin:0 0 18px;color:var(--ink-dim)}

.daily-cta{margin-bottom:18px}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:14px;padding:10px 14px;border:1px solid #1e2a35;background:#12202b;color:#cfe8ff}
.btn:hover{background:#0f1b24;text-decoration:none}
.btn-quiet{border-color:#1a2530;background:#0f1a22}
.btn-gfm{border-color:#2b6ea6;background:#0f2232}

.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:10px}
.card{background:var(--panel);padding:18px;border-radius:14px;border:1px solid #18222c;display:block}
.card h3{margin:0 0 8px}
.card p{margin:0;color:var(--ink-dim)}

.site-footer{margin-top:40px;border-top:1px solid #0f151b;background:#0d1318}
.site-footer .footer-top{display:flex;justify-content:center;padding:18px 0}
.site-footer .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:8px 0 22px}
.motto{color:var(--ink-dim);margin-top:6px}
.socials{display:flex;gap:18px;flex-wrap:wrap}
.socials a{opacity:.95}
.socials a:hover{opacity:1}

@media (max-width: 900px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 560px){
  .cards{grid-template-columns:1fr}
}