.hero { width: 90%; max-width: 700px; margin-bottom: 18px; }
.hero h1 { font-size: 2.4rem; margin: 6px 0 2px; color: var(--mauve); letter-spacing: 2px; }
.hero .tag { font-size: 0.85rem; color: var(--subtext1); margin: 0 0 6px; }
.hero .server { color: var(--green); }
.block { width: 90%; max-width: 700px; margin-bottom: 18px; }
.block p { font-size: 0.78rem; }
.steps { list-style: none; padding: 0; margin: 8px 0 2px; font-size: 0.78rem; line-height: 1.9; }
code { color: var(--yellow); background: var(--crust); padding: 1px 5px; border-radius: 4px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; width: 90%; max-width: 700px; margin-bottom: 18px; }
.card { display: block; text-decoration: none; background: var(--mantle); border-radius: 8px; padding: 14px;
  box-shadow: 0 0 0 1px var(--surface0); transition: box-shadow 0.15s; }
.card:hover { box-shadow: 0 0 0 1px var(--mauve); }
.card .t { color: var(--mauve); font-size: 0.9rem; }
.card .d { color: var(--overlay1); font-size: 0.68rem; margin-top: 6px; line-height: 1.5; }
.featured { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; width: 95%; max-width: 1150px; margin-bottom: 8px; }
.featured .label { text-align: center; color: var(--mauve); font-size: 0.72rem; margin-top: 6px; }
@media (max-width: 600px) { .hero, .block, .cards { width: 95%; } .hero h1 { font-size: 1.9rem; } }