/* ══════════════════════════════════════════════════════════════
   APPS INDEX PAGE
   ══════════════════════════════════════════════════════════════ */

.apps-dbx { padding-top: 0; }

/* ── Hero ─────────────────────────────────────────────────────── */
.apps-dbx-hero {
  background: linear-gradient(160deg, #0d0b1e 0%, #1a1035 50%, #0f0f23 100%);
  color: #fff;
  padding: 5rem 0 4.5rem;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.apps-dbx-hero::before {
  content: "";
  position: absolute;
  inset: -40px;
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 1.5px, transparent 1.5px);
  background-size: 30px 30px;
  pointer-events: none;
}
.apps-dbx-hero::after {
  content: "";
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(87,70,245,.3) 0%, transparent 65%);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  pointer-events: none;
  animation: apps-blob 14s ease-in-out infinite;
}
@keyframes apps-blob {
  0%,100% { transform: translate(-50%,-50%) scale(1); opacity: .07; }
  50%      { transform: translate(-50%,-50%) scale(1.15); opacity: .12; }
}

.apps-dbx-hero-inner { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; padding: 0 2rem; }
.apps-dbx-hero h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight: 800; letter-spacing: -.025em; margin: 0 0 1rem; color: #fff;
}
.apps-dbx-hero p { font-size: 1.1rem; color: rgba(255,255,255,.7); line-height: 1.65; margin: 0 0 2rem; }

/* filter pills */
.apps-filters {
  display: inline-flex; gap: .5rem; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
  padding: .35rem;
}
.apps-filter-btn {
  padding: .45rem 1.1rem;
  border: none; background: transparent; color: rgba(255,255,255,.65);
  border-radius: 999px; font-size: .85rem; font-weight: 600;
  cursor: pointer; transition: background .2s, color .2s;
}
.apps-filter-btn:hover { background: rgba(255,255,255,.15); color: #fff; }
.apps-filter-btn.is-active { background: #5746f5; color: #fff; }

/* ── Body ─────────────────────────────────────────────────────── */
.apps-dbx-body { max-width: 1200px; margin: 0 auto; padding: 4rem 2rem; }
.apps-section-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #5746f5; margin: 0 0 1.5rem;
  display: flex; align-items: center; gap: .6rem;
}
.apps-section-label::after {
  content: ""; flex: 1; height: 1px; background: #e5e7eb;
}
.apps-section-block { margin-bottom: 4rem; }

/* ── Card grid ─────────────────────────────────────────────────── */
.apps-grid { display: grid; gap: 1.5rem; }
.apps-grid--live { grid-template-columns: repeat(2, 1fr); }
.apps-grid--road { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
  .apps-grid--live { grid-template-columns: 1fr; }
  .apps-grid--road { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .apps-grid--road { grid-template-columns: 1fr; }
}

/* ── Card ──────────────────────────────────────────────────────── */
.apps-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .25s, border-color .25s, transform .25s;
}
.apps-card:hover {
  box-shadow: 0 12px 40px rgba(87,70,245,.12);
  border-color: rgba(87,70,245,.2);
  transform: translateY(-4px);
}

.apps-card__media { position: relative; overflow: hidden; }
.apps-card--live .apps-card__media { height: 220px; }
.apps-card--road .apps-card__media { height: 160px; }

.apps-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.apps-card:hover .apps-card__media img { transform: scale(1.04); }

.apps-card__badge {
  position: absolute; top: .75rem; left: .75rem;
  padding: .2rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 700;
}
.apps-card--live .apps-card__badge { background: rgba(16,185,129,.9); color: #fff; }
.apps-card--road .apps-card__badge { background: rgba(245,158,11,.9); color: #fff; }

.apps-card__body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.apps-card__head { display: flex; align-items: center; gap: .85rem; margin-bottom: .9rem; }
.apps-card__icon {
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.apps-card__head h2 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.apps-card__body > p { font-size: .88rem; color: #6b7280; line-height: 1.6; margin: 0 0 1.25rem; flex: 1; }
.apps-card__actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.apps-card-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem 1rem; border-radius: 8px; font-size: .84rem; font-weight: 600;
  text-decoration: none; transition: background .2s, color .2s, border-color .2s;
}
.apps-card-btn--primary { background: #5746f5; color: #fff !important; border: 1px solid transparent; }
.apps-card-btn--primary:hover { background: #4637e5; }
.apps-card-btn--ghost { background: #f9fafb; color: #374151 !important; border: 1px solid #e5e7eb; }
.apps-card-btn--ghost:hover { background: #f3f4f6; }