*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
    overflow: hidden; /* Prevent scrolling */
    height: 100%;     /* Ensure body takes full height */
}

html {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  background-color: #C82A1A; /* Fallback for top of screen */
}

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  margin: 0;
  font-family: "Inter", sans-serif; 
  font-weight: 400; 
  color: #fff;
  position: relative; 
  background: linear-gradient(to bottom, #C82A1A, #62150D);
  
  /* Disable text selection */
  user-select: none; /* Standard */
  -webkit-user-select: none; /* Safari/Chrome */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
  cursor: default; /* Change cursor to default arrow */
  
  /* Centering */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Font Definitions --- */
@font-face {
  font-family: 'Clash Display';
  src: url('fonts/ClashDisplay-Medium.ttf') format('truetype');
  font-weight: 600;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('fonts/SF-Pro-Display-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Variable.ttf') format('truetype');
}

/* --- Rive Animations (Decorative) --- */
.track-graphic {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: 1440px;
  height: 1440px;
}
.track-graphic.top-left { top: -640px; left: -720px; }
.track-graphic.bottom-right { bottom: -640px; right: -720px; }
.track-graphic.mobile { display: none; }

/* --- Main Content Block --- */
.content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 70px;
}
.text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.app-title {
  font-family: 'Clash Display', sans-serif;
  font-size: 32pt;
  font-weight: 600;
  letter-spacing: -1px;
}
.tagline {
  font-family: 'Inter', sans-serif;
  font-weight: 250;
  font-size: 15pt;
  color: #ffffff;
}
.icon-container {
  position: relative;
  width: 164px;
  height: 164px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.appicon {
  width: 144px;
  height: 144px;
  border-radius: 32px;
}
.qrcode {
  width: 164px;
  height: 164px;
  border-radius: 40px;
  display: none;
}
.download-btn {
  font-family: 'SF Pro Display', sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #000;
  color: #fff;
  border-radius: 20px;
  padding: 10px 20px;
  font-size: 1.1rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.download-btn svg {
  width: 20px;
  height: 20px;
}

/* --- Mobile Styles --- */
@media (max-width: 540px) {
  .content {
    transform: translateY(-80px); /* Shift content up */
    gap: 50px;
  }
  .track-graphic.top-left,
  .track-graphic.bottom-right {
    display: none;
  }
  .track-graphic.mobile {
    display: block;
    width: 840px;
    height: 840px;
    bottom: -480px; /* Shifted down */
    right: -420px;  /* Anchored right */
  }
  .app-title { font-size: 2.5rem; }
  .tagline { font-size: 12px; }
}