/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
}

/* ============================================================ */
/* DESKTOP — fixed 1920px design canvas (matches background.png), */
/* scaled uniformly by JS (see index.html) to fit any viewport   */
/* instead of being recalculated per breakpoint/device.           */
/* ============================================================ */

.desktop {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: url("./images/background.png") no-repeat center center;
  background-size: cover;
  background-color: #161920;
}

.desktop-scaler {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  padding: 10px 0;
  transform-origin: top left;
}

.menu-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 16px;
  justify-content: center;
}

.title-group {
  width: 100%;
  text-align: center;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title-img {
  width: 35%;
  height: 100%;
}

.logo-desktop .title-img {
  width: 50%;
}

.section-desktop {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.section-left {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.box-text {
  text-align: center;
}

.speed-test-btn {
  transition: transform 0.25s ease;
}

.speed-test-btn:hover {
  transform: scale(1.08);
}

.speed-test {
  width: 100%;
  height: auto;
  object-fit: cover;
  cursor: pointer;
}

/* Link items (ping gauges) */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.link-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.link-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: flex-end;
  justify-content: center;
  gap: 24px;
}

.link-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.25s ease;
}

.link-item:hover {
  transform: scale(1.08);
}

.link-circle {
  position: relative;
  width: 170px;
  height: 170px;
  overflow: hidden;
}

.link-ring-1 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.link-ring-1 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.link-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.link-ms {
  color: #fff;
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
}

.link-bg {
  position: relative;
}

.link-content-1 {
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translate(0, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.link-content-1-ms {
  background: linear-gradient(#d40200, #5c0202);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
}

/* Download / QR */
.download-qr-app {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
}

.download-qr-app-img {
  width: 100%;
}

.download-qr-app-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.download-app-btn-left {
  position: absolute;
  top: 35%;
  left: 20%;
  cursor: pointer;
  transition: transform 0.25s ease;
}

.download-app-btn-right {
  position: absolute;
  top: 35%;
  right: 4%;
  cursor: pointer;
  transition: transform 0.25s ease;
}

.download-app-btn-left:hover,
.download-app-btn-right:hover {
  transform: scale(1.08);
}

.download-desktop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Right banner */
.section-right {
  width: 100%;
  max-width: 44rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

.banner-right {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Floating social rail — fixed size, positioned on the real .desktop
   stage (a sibling of .desktop-scaler, not inside it) so it stays a
   constant physical size on screen instead of shrinking/growing with
   the canvas scale. Same technique 98Win uses for its .social-icons. */
.social-icons {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.social-icon {
  width: 90px;
  height: 90px;
  cursor: pointer;
  transition: transform 0.25s ease;
}

.social-icon:hover {
  transform: scale(1.08);
}

.social-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* No per-breakpoint overrides needed below 1920px: the JS scaler in
   index.html uniformly scales the whole .desktop-scaler canvas instead,
   so every position/size above stays in the exact same proportion on
   any tablet or laptop width. */

/* END DESKTOP */

/* ============================================================ */
/* MOBILE — fixed 393px design canvas (matches background-h5.png), */
/* scaled uniformly by JS. Same technique as the desktop canvas.  */
/* ============================================================ */

.mobile {
  display: none;
}

.mobile-scaler {
  position: relative;
  width: 393px;
  transform-origin: top left;
}

.mobile-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px 32px;
  box-sizing: border-box;
}

.mobile-logo {
  width: 100%;
  text-align: center;
  margin-bottom: 16px;
}

.mobile-title-img {
  width: 70%;
  height: auto;
}

.mobile-box-text {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}

.mobile-speed-test {
  width: 100%;
  height: auto;
}

.link-items-mobile {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 12px;
  width: 100%;
  margin-bottom: 20px;
}

.link-item-mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.link-item-mobile:active {
  transform: scale(0.96);
}

.link-circle-mobile {
  position: relative;
  width: 148px;
  height: 148px;
  overflow: hidden;
}

.link-circle-mobile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.link-content-mobile {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.link-ms-mobile {
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
}

.link-bg-mobile {
  position: relative;
  width: 148px;
}

.link-bg-mobile img {
  width: 100%;
  height: auto;
  display: block;
}

.link-content-1-mobile {
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translate(0, -50%);
}

.link-content-1-ms-mobile {
  background: linear-gradient(#d40200, #5c0202);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
}

.mobile-speed-btn {
  width: 100%;
  margin-bottom: 20px;
  cursor: pointer;
}

.mobile-speed-btn img {
  width: 100%;
  height: auto;
  display: block;
}

.download-qr-app-mobile {
  width: 100%;
  position: relative;
  margin-bottom: 24px;
}

.download-qr-img-mobile {
  width: 100%;
  height: auto;
  display: block;
}

.download-app-btn-left-mobile {
  position: absolute;
  top: 35%;
  left: 19%;
  width: 60px;
  cursor: pointer;
  transition: transform 0.25s ease;
}

.download-app-btn-right-mobile {
  position: absolute;
  top: 35%;
  right: 3%;
  width: 60px;
  cursor: pointer;
  transition: transform 0.25s ease;
}

.download-app-btn-left-mobile:hover,
.download-app-btn-right-mobile:hover {
  transform: scale(1.08);
}

.download-app-btn-left-mobile img,
.download-app-btn-right-mobile img {
  width: 100%;
  height: auto;
  display: block;
}

.mobile-social-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
}

.social-btn-link-mobile {
  display: block;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.social-btn-link-mobile img {
  width: 100%;
  height: auto;
  display: block;
}

.social-btn-link-mobile:active {
  transform: scale(0.95);
}

/* This is the only media query left in the file: it switches which of
   the two fixed canvases is shown. Everything above it just adapts via
   the JS scaler's transform: scale(...), not per-device breakpoints.
   Threshold is 1365px (not the usual 767px "phone" cutoff) so that
   tablets are included too, in both portrait AND landscape — e.g. an
   iPad Pro 12.9" landscape is 1366px wide, same ballpark as a laptop,
   but width alone can't tell a landscape tablet apart from a laptop,
   so anything under this width just gets the mobile canvas.

   The extra `max-aspect-ratio: 3/2` condition carves out wide-but-short
   "smart display" devices (Google Nest Hub 1024×600, Nest Hub Max
   1280×800 — aspect ratio ~1.6-1.71) so they keep the full desktop
   banner like the original per-device CSS did, instead of falling into
   the mobile canvas just because their width happens to be under 1366.
   A real landscape tablet (iPad ~1.33) still matches this query and
   gets the mobile canvas as intended; only unusually "flat" widescreen
   devices are excluded. Must stay in sync with MOBILE_BREAKPOINT /
   WIDESCREEN_RATIO in the JS scaler below. */
@media (max-width: 1365px) and (max-aspect-ratio: 3/2) {
  .desktop {
    display: none !important;
  }

  .mobile {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: url("./images/background-h5.png") no-repeat center center;
    background-size: cover;
  }
}

/* END MOBILE */