:root{
  --bg:#0b0f14;
  --card:#121826;
  --text:#e6edf3;
  --muted:#a6b3c2;
  --accent:#6ee7ff;
  --border:#223044;
  --shadow: 0 12px 28px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.5;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.container{width:min(1100px, 92%); margin:0 auto}
.muted{color:var(--muted)}
.dot{padding:0 .5rem; opacity:.6}

.skip-link{
  position:absolute; left:-999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto;
  background:var(--card); border:1px solid var(--border);
  padding:.75rem 1rem; border-radius:.75rem; z-index:9999;
}

.site-header{
  border-bottom:1px solid var(--border);
  background: rgba(18,24,38,.7);
  backdrop-filter: blur(8px);
  position:sticky; top:0; z-index:50;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 0;
}
.brand-link{
  font-weight:800; font-size:1.15rem; letter-spacing:.2px;
  color:var(--text);
}
.tagline{font-size:.9rem; color:var(--muted); margin-top:.15rem}

.site-nav{display:flex; gap:.8rem; flex-wrap:wrap; justify-content:flex-end}
.nav-link{
  padding:.5rem .75rem;
  border-radius:.75rem;
  border:1px solid transparent;
  color:var(--text);
}
.nav-link:hover{border-color:var(--border); text-decoration:none}
.nav-link.active{border-color:var(--accent);}

.site-main{padding:2.2rem 0 3rem}

.hero{
  background: radial-gradient(1200px 420px at 20% 0%, rgba(110,231,255,.18), transparent),
              radial-gradient(900px 420px at 80% 10%, rgba(167,139,250,.16), transparent);
  border:1px solid var(--border);
  border-radius:1.25rem;
  padding:2rem;
  box-shadow: var(--shadow);
}
.hero h1{margin:.2rem 0 0; font-size:2rem}
.hero p{margin:.8rem 0 1.2rem; max-width:60ch}

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1rem;
  margin-top:1.2rem;
}
@media (max-width: 900px){
  .grid{grid-template-columns:1fr}
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1.25rem;
  padding:1.25rem;
  box-shadow: var(--shadow);
}
.card h3{margin:.1rem 0 .6rem}
.card ul{margin:.6rem 0 0; padding-left:1.2rem}
.card li{margin:.35rem 0}

.btn{
  display:inline-block;
  background:var(--accent);
  color:#001018;
  font-weight:700;
  padding:.7rem 1rem;
  border-radius:1rem;
  border:0;
}
.btn:hover{filter:brightness(.95); text-decoration:none}
.btn-small{padding:.55rem .85rem; border-radius:.9rem}

.site-footer{
  border-top:1px solid var(--border);
  padding:2rem 0;
}
.footer-inner{display:flex; flex-direction:column; gap:1.5rem}
.footer-cols{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap:1rem;
}
@media (max-width: 900px){
  .footer-cols{grid-template-columns:1fr}
}
.footer-title{font-weight:800; margin-bottom:.35rem}
.footer-bottom{display:flex; gap:.4rem; flex-wrap:wrap}