:root { color-scheme: dark; }
html { scroll-behavior: smooth; }
.skiplink{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skiplink:focus{
  left:16px; top:16px; width:auto; height:auto; padding:10px 12px;
  background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  border-radius: 12px; z-index:9999;
}
.navlink{
  padding: .55rem .75rem;
  border-radius: 14px;
  color: rgba(255,255,255,.78);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.navlink:hover{ background: rgba(255,255,255,.08); color: #fff; }
.navlink[aria-current="page"]{ background: rgba(99,102,241,.22); color: #fff; box-shadow: 0 0 0 1px rgba(99,102,241,.25); }
.btn{
  padding: .62rem .92rem;
  border-radius: 14px;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.1;
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{
  background: linear-gradient(135deg, rgba(99,102,241,.95), rgba(79,70,229,.95));
  box-shadow: 0 10px 30px rgba(79,70,229,.22);
}
.btn-primary:hover{ box-shadow: 0 18px 60px rgba(79,70,229,.28); }
.btn-ghost{ background: rgba(255,255,255,.08); }
.btn-ghost:hover{ background: rgba(255,255,255,.12); }
.card{
  border-radius: 1.25rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.kicker{
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .74rem;
  color: rgba(255,255,255,.65);
}
.gradient-grid{
  background-image:
    radial-gradient(800px 400px at 15% 20%, rgba(99,102,241,.30), transparent 60%),
    radial-gradient(700px 350px at 85% 20%, rgba(56,189,248,.18), transparent 55%),
    radial-gradient(900px 500px at 50% 85%, rgba(236,72,153,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 40%);
}
.noise{
  position: relative;
}
.noise:before{
  content:"";
  pointer-events:none;
  position:absolute; inset:0;
  opacity:.09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.35rem .6rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.80);
  font-size: .82rem;
}
.hr{
  height:1px; width:100%;
  background: rgba(255,255,255,.10);
}