/* ---------- Base (Blue/Black palette) ---------- */
:root{
  --bg: #0a0d12;
  --bg-accent: #0d1117;
  --fg: #e6e8ea;
  --muted:#a7adb3;
  --brand:#1e90ff;
  --brand-2:#6ab4ff;
  --ring: 0 0 0 3px rgba(30,144,255,.35);
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f9ff;
    --bg-accent:#ffffff;
    --fg:#0b0f14;
    --muted:#5f6b78;
    --brand:#196fe3;
    --brand-2:#7fb3ff;
  }
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2rem;
}

/* Background */
.bg{
  position:fixed; inset:0;
  background:
    radial-gradient(1000px 520px at 90% -10%, rgba(30,144,255,.10), transparent 55%),
    radial-gradient(720px 360px at 10% 110%, rgba(106,180,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-accent));
  pointer-events:none;
  z-index:-1;
}

/* Header */
.site-header{margin-top:4vh; text-align:center}
.brand-logo{
  width:min(180px, 40vw);
  height:auto;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.tag{margin-top:.35rem; color:var(--muted)}

/* Container */
.container{width:min(680px, 92vw)}

/* Link buttons */
.links{display:flex; flex-direction:column; gap:14px; margin-top:24px}
.btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 18px; border-radius:16px; border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, var(--brand), var(--brand-2));
  color:#001021; text-decoration:none; font-weight:700;
  transition: transform .08s ease, box-shadow .1s ease, background .2s ease, opacity .2s ease;
  will-change: transform;
}
.btn .icon{width:22px; height:22px; fill:currentColor}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0)}
.btn:focus-visible{outline:none; box-shadow: var(--ring)}

.btn.outline{
  background:transparent; color:var(--fg);
  border-color:#263040;
}
.btn.ghost{
  background:transparent;
  color:var(--muted);
  border:1px dashed #354257;
}

/* SEO Section */
#seo{
  margin-top:22px; background:rgba(255,255,255,.02);
  border:1px solid #263040; border-radius:18px; padding:18px 20px;
}
#seo h1{font-size: clamp(20px, 3.8vw, 28px); margin: 0 0 8px}
#seo h2{font-size: clamp(17px, 3.2vw, 22px); margin:18px 0 8px}
#seo p, #seo li, #seo details{color:var(--muted); line-height:1.65}
#seo ol, #seo ul{padding-left:18px}

/* Footer */
.site-footer{margin: 4vh 0 6vh; color:var(--muted)}

@media (hover:hover){
  .btn:hover{opacity:.95}
}