.apps-header {
  display: flex;
  width: min(calc(100% - 3rem), var(--max));
  margin: 0 auto;
  padding: 2rem 0;
  align-items: center;
  justify-content: space-between;
}
.apps-index { width: min(calc(100% - 3rem), var(--max)); min-height: 75vh; margin: 0 auto; padding: 7rem 0; }
.apps-index h1 em { color: var(--accent); font-style: normal; }
.apps-lead { max-width: 620px; margin: 2rem 0 4rem; color: var(--muted); font-size: 1.08rem; }
.app-list { display: grid; gap: 1rem; }
.app-card, .app-empty { padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }
.app-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; transition: border-color .2s ease, transform .2s ease; }
.app-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.app-card h2, .app-empty h2 { margin: .4rem 0; font-size: clamp(1.8rem, 4vw, 3rem); }
.app-card p, .app-empty p { margin: 0; color: var(--muted); }
.app-icon { display: grid; width: 84px; height: 84px; place-items: center; border-radius: 20px; color: #07130e; background: linear-gradient(145deg, var(--accent), var(--accent-blue)); font: 700 1.2rem "Manrope", sans-serif; }
.app-empty span { color: var(--accent); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 640px) {
  .apps-header, .apps-index { width: calc(100% - 2rem); }
  .apps-index { padding: 4rem 0; }
  .app-card { grid-template-columns: 1fr; }
}