/* ===== iOS HOMESCREEN MODE ===== */

/* hide page title bar / header */
.page-title,
header,
header * {
  display: none !important;
}

/* hide group title (Public Apps) */
.services-group-title {
  display: none !important;
}

/* remove top spacing created by header */
#page_container {
  padding-top: 0px !important;
  margin-top: 0px !important;
}

/* center everything vertically like iOS */
body, #app {
  height: 100vh !important;
}

#page_container {
  max-width: 980px !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* make grid centered */
.services, .services-group, .grid {
  justify-content: center !important;
}

/* icon-only cards */
.service-card {
  width: 180px !important;
  height: 120px !important;
  padding: 18px !important;

  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  background: rgba(18,18,22,0.30) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 28px !important;
  box-shadow: 0 18px 55px rgba(0,0,0,0.45) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;

  transition: all 140ms ease;
}

.service-card:hover {
  transform: translateY(-4px) scale(1.03);
}

/* bigger icon, nicer */
.service-icon {
  transform: scale(1.25);
}

/* hide descriptions, keep name only */
.service-description {
  display: none !important;
}

/* Make names clean */
.service-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.4px !important;
}

/* mobile: 2 columns, centered */
@media (max-width: 700px) {
  #page_container {
    max-width: 100% !important;
    padding: 0 14px !important;
  }

  .service-card {
    width: 44vw !important;
    height: 110px !important;
  }
}