/* ============================================================================
   Noor brand hub (bynoor.app) — additions on top of the shared styles.css.
   ============================================================================ */

/* ------------------------------------------------------------- hub hero -- */
.hub-hero { padding-bottom: clamp(48px, 7vw, 90px); }
.hub-hero .hero-copy .hero-sub { max-width: 40ch; }

.hub-hero-icons {
  display: flex; justify-content: center; align-items: flex-end; gap: clamp(18px, 3.5vw, 34px);
  margin-top: clamp(44px, 6vw, 72px);
}
.hub-hero-icons img {
  width: clamp(84px, 11vw, 128px); height: auto; aspect-ratio: 1;
  border-radius: 24.5%;
  border: 1px solid var(--glass-stroke);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.04);
}
.hub-hero-icons img:nth-child(2) {
  width: clamp(104px, 13.5vw, 156px);
  box-shadow: 0 30px 70px -18px rgba(0,0,0,0.7), 0 12px 44px -12px rgba(217,179,108,0.28);
}

/* ------------------------------------------------------------ app cards -- */
.app-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.app-card {
  display: flex; flex-direction: column;
  padding: 30px 26px;
  border-radius: var(--radius-card);
  background: var(--glass-fill);
  border: 1px solid var(--hairline);
  transition: transform .3s ease, border-color .3s;
}
.app-card:hover { transform: translateY(-4px); border-color: var(--glass-stroke); }

.app-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.app-icon {
  width: 64px; height: 64px; border-radius: 24.5%;
  border: 1px solid var(--glass-stroke);
  box-shadow: 0 14px 34px -12px rgba(0,0,0,0.6);
}
.app-tag {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.4px;
  color: rgba(217,179,108,0.9);
  padding: 7px 12px; border-radius: var(--radius-pill);
  background: rgba(217,179,108,0.08); border: 1px solid rgba(217,179,108,0.2);
  white-space: nowrap;
}
.app-card h3 { font-size: 22px; margin-bottom: 10px; }
.app-card p { color: var(--muted); font-size: 15.5px; line-height: 1.55; flex: 1; }

.app-actions { display: flex; align-items: center; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.store-btn svg { width: 15px; height: 15px; margin-top: -2px; }
.app-link { font-size: 14px; color: var(--gold-bright); opacity: .9; transition: opacity .2s; }
.app-link:hover { opacity: 1; }

@media (max-width: 900px) {
  .app-cards { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}