:root {
  --pink: #ff4f9b;
  --violet: #a451f5;
  --blue: #496cff;
  --ink: #05040a;
  --white: #faf9ff;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--ink); color: var(--white); }
body { font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
button, select { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.landing-shell {
  width: 100vw;
  height: 100svh;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 89% 11%, rgba(92, 43, 172, .19), transparent 34%),
    radial-gradient(circle at 2% 58%, rgba(190, 27, 113, .14), transparent 31%),
    #05040a;
}

.artboard {
  container-type: inline-size;
  position: relative;
  width: min(100vw, calc(100svh * 943 / 1672));
  aspect-ratio: 943 / 1672;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 102% 24%, rgba(72, 32, 139, .23), transparent 43%),
    radial-gradient(ellipse at -8% 60%, rgba(169, 21, 104, .19), transparent 38%),
    linear-gradient(180deg, #030307 0%, #08050f 52%, #04030a 100%);
  box-shadow: 0 0 88px rgba(0, 0, 0, .62);
}

.artboard::after {
  content: '';
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 8cqw rgba(0, 0, 0, .22);
}

.brand-art,
.master-feature-icon,
.product-art,
.master-android,
.master-url-lock,
.master-trust {
  background-image: url('design-master.png');
  background-repeat: no-repeat;
}

.brand-art {
  position: absolute;
  z-index: 2;
  left: 32.87%;
  top: 1.91%;
  width: 34.25%;
  height: 13.52%;
  background-size: 291.95% auto;
  background-position: 50% 2.21%;
}

.language-picker {
  position: absolute;
  z-index: 20;
  top: 2.2%;
  right: 3.1%;
  height: 4.1cqw;
  min-height: 24px;
  display: flex;
  align-items: center;
  padding: 0 .9cqw 0 1.1cqw;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 1.4cqw;
  background: rgba(8, 6, 16, .72);
  backdrop-filter: blur(10px);
}

.language-picker > span { color: #9e94ae; font-size: 1.65cqw; }
.language-picker select {
  appearance: none;
  border: 0;
  outline: 0;
  color: #fff;
  background: transparent;
  padding: 0 2cqw 0 .7cqw;
  font-size: 1.45cqw;
  line-height: 1;
  font-weight: 800;
  cursor: pointer;
}
.language-picker option { color: #111; }
.language-picker i { position: absolute; right: .8cqw; top: .75cqw; color: #81768f; font-size: 1.5cqw; font-style: normal; pointer-events: none; }

.hero-copy {
  position: absolute;
  z-index: 3;
  left: 4.8%;
  top: 17.65%;
  width: 90.4%;
  text-align: center;
}

.hero-copy h1 {
  margin: 0;
  color: transparent;
  background: linear-gradient(95deg, #ff71ad 2%, #df72dd 35%, #9c61fc 62%, #4e75ff 98%);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 5.05cqw;
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 900;
  white-space: nowrap;
  text-shadow: 0 0 2.8cqw rgba(117, 70, 234, .12);
}

.hero-copy p {
  margin: 2.7cqw auto 0;
  color: #cbc7d0;
  font-size: 2.05cqw;
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: .015em;
}

.feature-row {
  position: absolute;
  z-index: 4;
  left: 5.9%;
  top: 28.95%;
  width: 88.2%;
  height: 9.1%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.78cqw;
}

.feature-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 1.75cqw;
  background:
    linear-gradient(145deg, rgba(16, 10, 21, .96), rgba(10, 8, 20, .94)) padding-box,
    linear-gradient(142deg, rgba(238, 82, 170, .66), rgba(96, 82, 210, .5)) border-box;
  box-shadow: inset 0 0 2.8cqw rgba(185, 48, 155, .06), 0 1.3cqw 2.8cqw rgba(0, 0, 0, .22);
}

.master-feature-icon {
  display: block;
  width: 9.55cqw;
  height: 9.12cqw;
  margin: -.4cqw 0 .35cqw;
  background-size: 1047.78% auto;
  filter: drop-shadow(0 0 1.15cqw rgba(225, 88, 218, .45));
}
.master-feature-icon.icon-1 { background-position: 12.19% 31.53%; }
.master-feature-icon.icon-2 { background-position: 37.51% 31.53%; }
.master-feature-icon.icon-3 { background-position: 63.54% 31.53%; }
.master-feature-icon.icon-4 { background-position: 88.28% 31.53%; }

.feature-card strong {
  display: block;
  width: 100%;
  padding: 0 .45cqw;
  color: #ece8f1;
  font-size: 1.62cqw;
  line-height: 1.12;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  letter-spacing: -.02em;
}

.product-art {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 38.05%;
  width: 100%;
  height: 45.45%;
  background-size: 100% auto;
  background-position: center 69.7%;
}

.product-art::before,
.product-art::after {
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  height: 5.5%;
  pointer-events: none;
}
.product-art::before { top: 0; background: linear-gradient(180deg, #08050f, transparent); }
.product-art::after { bottom: 0; background: linear-gradient(0deg, #06040d, transparent); }

.download-area {
  position: absolute;
  z-index: 10;
  left: 0;
  top: 83.15%;
  width: 100%;
  height: 16.85%;
}

.download-button {
  position: absolute;
  left: 12.3%;
  top: 0;
  width: 75.4%;
  height: 38.6%;
  display: flex;
  align-items: center;
  padding: 0 5.2cqw 0 7.5cqw;
  overflow: hidden;
  border: .2cqw solid rgba(255, 255, 255, .95);
  border-radius: 7cqw;
  background: linear-gradient(99deg, #f43f78 0%, #e84a9d 24%, #aa50e8 59%, #4967fa 100%);
  box-shadow:
    0 0 1.9cqw rgba(255, 58, 131, .95),
    0 0 3.6cqw rgba(91, 75, 255, .72),
    inset 0 .12cqw rgba(255, 255, 255, .55);
  transition: transform .18s ease, filter .18s ease;
}
.download-button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.16), transparent 34%, transparent 68%, rgba(255,255,255,.12));
  pointer-events: none;
}
.download-button:hover,
.download-button:focus-visible { transform: translateY(-.45cqw); filter: brightness(1.08); outline: none; }
.download-button:active { transform: scale(.988); }

.master-android {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 5.3cqw;
  height: 5.83cqw;
  margin-right: 2.9cqw;
  background-size: 1886% auto;
  background-position: 21.16% 87.82%;
}
.download-button strong {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 3.83cqw;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: -.035em;
}
.download-button strong::first-letter { letter-spacing: normal; }

.apk-url {
  position: absolute;
  left: 0;
  top: 48.2%;
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.8cqw;
  color: #aaa4b2;
  font-size: 2.18cqw;
  line-height: 1;
  font-weight: 400;
  white-space: nowrap;
}
.master-url-lock {
  width: 2.65cqw;
  height: 3.4cqw;
  background-size: 3772% auto;
  background-position: 22.33% 93.35%;
}

.trust-row {
  position: absolute;
  left: 12.1%;
  top: 70.8%;
  width: 75.8%;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.7cqw;
  border-top: 1px solid rgba(255, 255, 255, .11);
  color: #aaa4b2;
  font-size: 1.67cqw;
  line-height: 1;
}
.trust-row > span { display: flex; align-items: center; gap: 1.05cqw; white-space: nowrap; }
.trust-row b { color: #aaa4b2; font-size: 2.1cqw; font-weight: 400; }
.master-trust { display: block; flex: 0 0 auto; }
.trust-shield { width: 3.6cqw; height: 4.03cqw; background-size: 2773.5% auto; background-position: 18.81% 97.74%; }
.trust-lock { width: 3.18cqw; height: 4.03cqw; background-size: 3143.3% auto; background-position: 42.94% 97.74%; }
.trust-heart { width: 4.45cqw; height: 4.45cqw; background-size: 2245.2% auto; background-position: 67.26% 97.85%; }

@media (max-width: 390px) {
  .language-picker { min-height: 20px; }
  .hero-copy h1 { font-size: 4.85cqw; }
  .feature-card strong { font-size: 1.5cqw; }
}

@media (prefers-reduced-motion: no-preference) {
  .download-button { animation: button-glow 3.1s ease-in-out infinite; }
}

@keyframes button-glow {
  50% {
    box-shadow:
      0 0 2.6cqw rgba(255, 58, 131, .95),
      0 0 4.8cqw rgba(91, 75, 255, .8),
      inset 0 .12cqw rgba(255, 255, 255, .55);
  }
}