/* GloStack — App Download landing page
   Recreated from the high-fidelity design handoff. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
img { max-width: 100%; }
body {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  background: #ffffff;
  color: #2a2a2a;
}
a { text-decoration: none; color: inherit; }

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

/* Header / logo */
.site-header {
  background: #ffffff;
  padding: 26px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo {
  height: 50px; width: auto;
  object-fit: contain;
  display: block;
}
.brand-word {
  font-size: 30px;
  font-weight: 600;
  color: #2a2a2a;
  letter-spacing: -0.5px;
}

/* Cream main panel */
.main-panel {
  flex: 1;
  background: #f2ede3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  padding: 60px 40px;
  flex-wrap: wrap;
}

/* Phones cluster.
   The inner coordinate space is fixed at 720x780; the cluster is rendered
   larger via transform: scale() and the outer box is sized to match
   (720*s x 780*s) so the scaled content exactly fills it. */
.phone-cluster { position: relative; flex: none; width: 864px; height: 936px; }
.phone-cluster-scale {
  position: absolute;
  top: 0; left: 0;
  width: 720px; height: 780px;
  transform-origin: top left;
  transform: scale(1.2);
}

/* Floating cards */
.card {
  position: absolute;
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card span { font-family: ui-monospace, monospace; font-size: 11px; }
.card-orange {
  top: 180px; left: 10px; width: 150px; height: 140px;
  transform: rotate(-12deg);
  background: repeating-linear-gradient(45deg, #f6c9a8, #f6c9a8 9px, #f2bd97 9px, #f2bd97 18px);
}
.card-orange span { color: #8a5a36; }
.card-yellow {
  top: 560px; left: 30px; width: 150px; height: 150px;
  transform: rotate(8deg);
  background: repeating-linear-gradient(45deg, #f2d59a, #f2d59a 9px, #ecca85 9px, #ecca85 18px);
}
.card-yellow span { color: #8a6f2e; }
.card-blue {
  top: 300px; right: 20px; width: 160px; height: 150px;
  transform: rotate(11deg);
  background: repeating-linear-gradient(45deg, #9cc2f0, #9cc2f0 9px, #8ab6ec 9px, #8ab6ec 18px);
}
.card-blue span { color: #3a5d8a; }
.card-purple {
  top: 540px; right: 15px; width: 170px; height: 130px;
  transform: rotate(-8deg);
  background: repeating-linear-gradient(45deg, #c8b6ec, #c8b6ec 9px, #bba6e8 9px, #bba6e8 18px);
}
.card-purple span { color: #5b4b87; }

/* Phones */
.phone { position: absolute; width: 330px; height: 680px; }
.phone-left { top: 60px; left: 70px; transform: rotate(-4deg); z-index: 2; }
.phone-right { top: 20px; left: 330px; transform: rotate(2deg); z-index: 1; }
.phone-bezel {
  width: 100%; height: 100%;
  background: #161616;
  border-radius: 48px;
  padding: 12px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .28);
}
.phone-right .phone-bezel { box-shadow: 0 30px 60px rgba(0, 0, 0, .32); }
.phone-screen {
  position: relative;
  width: 100%; height: 100%;
  background: #ffffff;
  border-radius: 38px;
  overflow: hidden;
}
.screen-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* App Store badge */
.badge-col {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  max-width: 420px;
}
.store-badge {
  display: inline-flex;
  transition: transform .15s ease, opacity .15s ease;
}
.store-badge:hover { transform: translateY(-2px); opacity: .9; }
.store-badge img { display: block; width: 200px; height: auto; }

/* Footer */
.site-footer {
  background: #ffffff;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.footer-links {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-links a { font-size: 15px; color: #6a6a6a; }
.footer-links a:hover { color: #2a2a2a; }
.footer-copy { font-size: 14px; color: #8a8a8a; }

/* Responsive scaling of the phones cluster + spacing.
   Cluster box = 720*s x 780*s so the scaled content exactly fills it.
   Each breakpoint's size is chosen to fit the NARROW end of its range
   (incl. side padding) so there is never horizontal overflow. */
@media (max-width: 980px) {
  /* range 861–980px; s=1.1 -> 792x858 fits 861 (avail ~813) */
  .main-panel { gap: 24px; padding: 48px 24px; }
  .phone-cluster { width: 792px; height: 858px; }
  .phone-cluster-scale { transform: scale(1.1); }
}
@media (max-width: 860px) {
  /* range 601–860px; s=.75 -> 540x585 fits 601 (avail ~553) */
  .phone-cluster { width: 540px; height: 585px; }
  .phone-cluster-scale { transform: scale(.75); }
}
@media (max-width: 600px) {
  /* range 481–600px; s=.60 -> 432x468 fits 481 (avail ~449) */
  .phone-cluster { width: 432px; height: 468px; }
  .phone-cluster-scale { transform: scale(.60); }
  .site-header { padding: 20px 16px; }
  .main-panel { padding: 36px 16px; gap: 28px; }
}
@media (max-width: 480px) {
  /* range 361–480px; s=.45 -> 324x351 fits 361 (avail ~329) */
  .phone-cluster { width: 324px; height: 351px; }
  .phone-cluster-scale { transform: scale(.45); }
  .brand-word { font-size: 24px; }
}
@media (max-width: 360px) {
  /* range 320–360px; s=.385 -> 277x300 fits 320 (avail ~288) */
  .phone-cluster { width: 277px; height: 300px; }
  .phone-cluster-scale { transform: scale(.385); }
  .store-badge img { width: 180px; }
}

/* Larger phones when there's room. The App Store badge wraps below the
   phones on the narrower of these ranges, which flexbox handles
   automatically. Each size fits the NARROW end of its range. */
@media (min-width: 1024px) {
  /* s=1.3 -> 936x1014 fits 1024 (avail ~944) */
  .phone-cluster { width: 936px; height: 1014px; }
  .phone-cluster-scale { transform: scale(1.3); }
}
@media (min-width: 1200px) {
  /* s=1.5 -> 1080x1170 fits 1200 (avail ~1120) */
  .phone-cluster { width: 1080px; height: 1170px; }
  .phone-cluster-scale { transform: scale(1.5); }
}