/* Header / Nav */
header{
  position:sticky; top:0; z-index:50; backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--panel), transparent 40%);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand {
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: .3px;
}
.brand svg {
  color: inherit;
}
.brand svg path {
  fill: currentColor !important;
}
.badge{font-size:12px; color:var(--muted); border:1px solid var(--line); padding:4px 8px; border-radius:999px}
nav a{color:var(--muted); text-decoration:none; margin:0 10px; font-weight:500}
nav a:hover{color:var(--text)}

/* Buttons */
.btn{
  appearance:none; border:1px solid var(--line);
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  color:var(--text); padding:10px 14px; border-radius:12px;
  transition:transform var(--speed) ease, box-shadow var(--speed) ease, border-color var(--speed) ease;
  cursor:pointer;
}
.btn.primary{
  border-color: color-mix(in srgb, var(--primary), white 60%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary), #000 20%), var(--primary));
  box-shadow: 0 8px 20px rgba(59,130,246,.25);
}
.btn:hover{transform: translateY(-1px); box-shadow: var(--shadow)}

/* Sections & Cards */
section{padding:72px 0; border-bottom:1px solid var(--line)}
.grid{display:grid; gap:18px}
@media (min-width:768px){ .grid.cols-2{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (min-width:1024px){ .grid.cols-3{grid-template-columns:repeat(3, minmax(0,1fr))} }

.card{
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel), #000 10%), var(--panel));
  border:1px solid var(--line); border-radius:var(--radius); padding:18px;
  transition: transform var(--speed) ease, box-shadow var(--speed) ease, border-color var(--speed) ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow);
  border-color: color-mix(in srgb, var(--primary), var(--line) 60%);
}

/* Chips */
.stack{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.chip{border:1px solid var(--line); color:var(--muted); padding:8px 12px; border-radius:999px; font-size:14px}

/* Footer */
.footer{padding:36px 0; color:var(--muted); font-size:14px}

/* Reveal animations */
.reveal{opacity:0; transform:translateY(16px)}
.reveal.in{opacity:1; transform:none; transition:opacity var(--speed) ease, transform var(--speed) ease}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.in, .btn{transition:none !important; transform:none !important}
  html{scroll-behavior:auto}
}