:root{
  color-scheme:dark;--bg:#0c1015;--panel:#121820;--panel2:#171f29;
  --border:#29323d;--text:#f2f5f8;--muted:#9aa6b2;--accent:#e4ad4d;
  --soft:rgb(228 173 77 / .12);--max:1120px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;min-height:100vh;color:var(--text);
  background:radial-gradient(circle at 15% 0%,rgb(228 173 77 / .09),transparent 27rem),var(--bg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif
}
a{color:inherit}
.topbar,.hero,.hub,.about,footer{width:min(var(--max),calc(100% - 32px));margin:auto}
.topbar{
  min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px
}
.topbar nav{display:flex;gap:20px}
.topbar nav a{color:var(--muted);text-decoration:none}
.brand{font-weight:800;text-decoration:none}
body:before{
  content:"";position:absolute;left:0;right:0;top:64px;border-bottom:1px solid var(--border)
}
.hero{padding:90px 0 58px}
.eyebrow{
  margin:0 0 12px;color:var(--accent);font-size:.75rem;font-weight:800;letter-spacing:.17em
}
h1,h2,h3,p{margin-top:0}
h1{max-width:900px;margin-bottom:18px;font-size:clamp(2.8rem,8vw,6.5rem);line-height:.94;letter-spacing:-.065em}
h2{margin-bottom:0;font-size:clamp(1.6rem,3vw,2.35rem);letter-spacing:-.035em}
.intro{max-width:760px;margin:0;color:var(--muted);font-size:1.1rem;line-height:1.7}
.hub{padding:34px 0 72px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:20px}
#search{
  width:min(310px,100%);min-height:44px;padding:10px 14px;border:1px solid var(--border);
  border-radius:11px;outline:none;background:var(--panel);color:var(--text);font:inherit
}
#search:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgb(228 173 77 / .1)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.filter{
  min-height:36px;padding:7px 12px;border:1px solid var(--border);border-radius:999px;
  cursor:pointer;background:transparent;color:var(--muted);font:inherit
}
.filter:hover,.filter[aria-pressed=true]{border-color:rgb(228 173 77 / .55);background:var(--soft);color:var(--text)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.card{
  grid-column:span 4;min-height:215px;display:flex;flex-direction:column;padding:20px;
  border:1px solid var(--border);border-radius:18px;background:var(--panel);text-decoration:none;
  transition:.15s ease
}
.card:hover{transform:translateY(-3px);border-color:rgb(228 173 77 / .48);background:var(--panel2)}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:28px}
.icon{
  width:42px;height:42px;display:grid;place-items:center;border-radius:11px;
  background:var(--soft);color:var(--accent);font-weight:800
}
.category{color:var(--muted);font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.card h3{margin-bottom:9px;font-size:1.15rem}
.card p{color:var(--muted);line-height:1.55}
.card-bottom{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-bottom strong{color:var(--accent);font-size:.9rem}
.badge{padding:4px 8px;border:1px solid rgb(228 173 77 / .4);border-radius:999px;background:var(--soft);color:var(--accent);font-size:.72rem}
.about{padding:52px 0 72px;border-top:1px solid var(--border)}
.about p:last-child{max-width:720px;margin-top:14px;color:var(--muted);line-height:1.7}
code{padding:2px 6px;border:1px solid var(--border);border-radius:6px;background:var(--panel)}
footer{padding:26px 0 38px;color:#71808e;font-size:.82rem}
.hidden{display:none}
.empty{color:var(--muted);margin-top:28px}
@media(max-width:850px){.card{grid-column:span 6}}
@media(max-width:620px){
  .topbar,.hero,.hub,.about,footer{width:min(100% - 20px,var(--max))}
  .hero{padding:62px 0 38px}
  .section-head{align-items:stretch;flex-direction:column}
  #search{width:100%}
  .card{grid-column:1/-1;min-height:185px}
}