#main-nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(120%) blur(8px);
  background:color-mix(in oklab,var(--bg),transparent 45%);border-bottom:1px solid var(--edge)}
.nav-wrap{max-width:1100px;margin:auto;padding:10px 16px;display:flex;gap:14px;align-items:center}
.logo{font-weight:800;letter-spacing:.4px;background:linear-gradient(90deg,#fff,var(--red));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.spacer{flex:1}
.nav-links{display:flex;gap:8px;align-items:center}
.nav-links a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--muted);
  font-weight:700;padding:8px 12px;border-radius:999px;transition:background .18s ease,color .18s ease,transform .18s ease}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text);background:rgba(255,0,0,.12)}
#themeToggle{border:1px solid var(--edge);background:var(--bg3);color:var(--text);padding:8px 12px;border-radius:12px;cursor:pointer}

.section{padding:90px 16px}
.center{max-width:1100px;margin:auto}
.shell{
  background:linear-gradient(180deg,color-mix(in oklab,var(--bg2),#000 4%),color-mix(in oklab,var(--bg2),#000 14%));
  border:1px solid var(--edge);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)
}
.h2{margin:0 0 8px 0}
.muted{color:var(--muted)}

.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;border:1px solid var(--edge);
  background:var(--bg3);color:var(--text);text-decoration:none;font-weight:800;box-shadow:var(--shadow);transition:transform .15s ease,background .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(90deg,var(--red),var(--red-2));color:#080808;border:0}

[data-scroll-progress]{position:fixed;left:0;top:54px;height:2px;width:0;background:var(--red);box-shadow:0 0 6px rgba(255,0,0,.5);z-index:100}
@media (max-width:768px){ [data-scroll-progress]{top:64px} }