/* ------------------------------
   SECTION BASE (unchanged)
------------------------------- */
.section {
  padding: 28px 18px;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.section-head h2 {
  margin: 0;
}

.see-all {
  color: var(--accent);
}

/* ------------------------------
   OUTER PAGE SCROLLER (horizontal)
   — same feel as your original
------------------------------- */
.app-pages,
.app-scroll {
  overflow-x: auto;
  overflow-y: hidden;

  display: flex;
  gap: 22px;               /* same gap as old good style */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  padding-bottom: 4px;
}

/* Hide scrollbar on mobile */
@media (max-width: 860px) {
  .app-pages::-webkit-scrollbar,
  .app-scroll::-webkit-scrollbar {
    display: none;
  }
  .app-pages,
  .app-scroll {
    scrollbar-width: none;
  }
}

/* Desktop scrollbar */
@media (min-width: 861px) {
  .app-pages::-webkit-scrollbar,
  .app-scroll::-webkit-scrollbar {
    height: 10px;
  }
  .app-pages::-webkit-scrollbar-track,
  .app-scroll::-webkit-scrollbar-track {
    background: #1a2026;
    border-radius: 10px;
  }
  .app-pages::-webkit-scrollbar-thumb,
  .app-scroll::-webkit-scrollbar-thumb {
    background: #3a4652;
    border-radius: 10px;
    border: 2px solid #1a2026;
  }
  .app-pages::-webkit-scrollbar-thumb:hover,
  .app-scroll::-webkit-scrollbar-thumb:hover {
    background: #4a5563;
  }
}

/* ------------------------------
   PAGE = VERTICAL STACK OF APPS
   (3 mobile, 6 desktop)
------------------------------- */
.app-page {
  scroll-snap-align: start;

  display: flex;
  flex-direction: column;
  gap: 14px;

  flex-shrink: 0;   /* so it stays as PAGE */
}

/* MOBILE — 3 apps per page */
@media (max-width: 860px) {
  .app-page {
    width: 88vw; /* fills screen, looks centered */
  }

  .app-card {
    height: 110px; /* original card height */
  }
}

/* DESKTOP — 6 apps per page */
@media (min-width: 861px) {
  .app-page {
    width: 420px; /* fits 6 cards vertically */
  }

  .app-card {
    height: 90px; /* original desktop list style */
  }
}