.landing-main { max-width: 860px; margin: 0 auto; padding: 12vh 24px 64px; }
.landing-head { display: flex; align-items: center; gap: 18px; margin-bottom: 40px; }
.landing-head svg { width: 64px; height: 64px; flex: none; }
.landing-head h1 { font: 600 56px/1 var(--serif); margin: 0; letter-spacing: -0.02em; }
.landing-head p { margin: 6px 0 0; color: var(--muted); font-size: 17px; }

.modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.module {
  display: flex; flex-direction: column; gap: 10px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px;
  transition: border-color 150ms, transform 150ms;
}
.module:hover { border-color: var(--accent); transform: translateY(-2px); }
.module-head { display: flex; align-items: center; gap: 12px; }
.module-head img { width: 40px; height: 40px; }
.module h2 { font: 600 26px/1.1 var(--serif); margin: 0; }
.module p { margin: 0; color: var(--muted); }
.module .count { font: 12px var(--mono); color: var(--muted); margin-top: auto; }

@media (max-width: 720px) {
  .landing-main { padding: 32px 16px 48px; }
  .landing-head { margin-bottom: 24px; }
  .landing-head svg { width: 48px; height: 48px; }
  .landing-head h1 { font-size: 42px; }
}