:root {
  --bg: #0b0f17;
  --card: #121a27;
  --text: #e9eef7;
  --muted: #a9b4c7;
  --stroke: rgba(255,255,255,.08);
  --radius: 16px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.container { max-width: 1100px; margin: 0 auto; padding: 18px; }

.topbar {
  position: sticky; top: 0;
  background: rgba(11,15,23,.9);
  border-bottom: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
}
.topbar .container { display: flex; gap: 14px; align-items: center; }
.brand, .crumb { color: var(--text); text-decoration: none; font-weight: 600; }
.crumb { color: var(--muted); font-weight: 500; }

.h1 { font-size: 26px; margin: 18px 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.tile {
  display: block;
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 16px;
  transition: transform .08s ease, border-color .08s ease;
  color: var(--text);
}
.tile:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.18); }

.tile-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  margin-bottom: 10px;
}
.tile-icon i { font-size: 18px; }

.tile-title { font-weight: 700; margin-bottom: 6px; }
.tile-desc { color: var(--muted); font-size: 14px; line-height: 1.35; }

.hero img {
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
}

.content {
  margin-top: 14px;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 16px;
  color: var(--text);
}
.content p { color: var(--text); line-height: 1.6; }
.content a { color: var(--text); }

.footer { border-top: 1px solid var(--stroke); margin-top: 30px; }
.footer small { color: var(--muted); }