:root {
  color-scheme: light dark;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  background: #fff8fc;
  color: #31243e;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: clamp(20px, 5vw, 64px);
  background:
    radial-gradient(circle at 8% 7%, rgba(255, 119, 180, .52), transparent 30%),
    radial-gradient(circle at 92% 14%, rgba(134, 149, 255, .42), transparent 32%),
    radial-gradient(circle at 52% 100%, rgba(195, 143, 255, .38), transparent 42%),
    linear-gradient(145deg, #fff7fb, #f8f5ff 48%, #eef7ff);
}

.glass {
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 6vw, 72px);
  overflow: hidden;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: clamp(32px, 6vw, 64px);
  background: linear-gradient(145deg, rgba(255, 255, 255, .77), rgba(255, 255, 255, .45));
  box-shadow: 0 32px 100px rgba(102, 70, 132, .18), inset 0 1px 0 #fff;
  backdrop-filter: blur(30px) saturate(135%);
}

.mark {
  position: relative;
  display: grid;
  width: 92px;
  height: 92px;
  margin: 0 auto 22px;
  place-items: center;
  border-radius: 28px;
  background:
    radial-gradient(circle at 20% 15%, #ff8fbf, transparent 38%),
    radial-gradient(circle at 86% 82%, #839cff, transparent 40%),
    linear-gradient(145deg, #f4a1d0, #af8eea 50%, #73a3ee);
  box-shadow: 0 18px 42px rgba(122, 92, 184, .34), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.coin {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 3px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  color: #fff;
  font-size: 29px;
  font-weight: 850;
  text-shadow: 0 2px 8px rgba(81, 56, 124, .3);
}

.spark {
  position: absolute;
  color: #fff;
  font-size: 15px;
  filter: drop-shadow(0 2px 4px rgba(86, 53, 122, .28));
}

.spark.one {
  top: 8px;
  left: 9px;
}

.spark.two {
  right: 8px;
  bottom: 8px;
}

h1 {
  margin: 0;
  font-size: clamp(38px, 7vw, 68px);
  letter-spacing: -.045em;
}

p {
  line-height: 1.62;
}

.lead {
  max-width: 720px;
  margin: 14px auto 30px;
  color: #665772;
  font-size: clamp(18px, 2.5vw, 25px);
  font-weight: 650;
}

.store {
  display: inline-block;
  margin: 0 0 30px;
  padding: 14px 24px;
  border: 1px solid rgba(255, 255, 255, .84);
  border-radius: 999px;
  background: linear-gradient(135deg, #8f69dc, #5f89dc);
  box-shadow: 0 12px 28px rgba(106, 90, 180, .28);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
  text-align: start;
}

.card,
.wide {
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 28px;
  background: rgba(255, 255, 255, .48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 12px 36px rgba(108, 80, 139, .09);
}

.card {
  min-height: 220px;
  padding: 24px;
}

.card b,
.wide b {
  display: block;
  font-size: 18px;
}

.card p,
.wide p {
  margin-bottom: 0;
  color: #6b5b76;
}

.icon {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 28px;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(255, 139, 190, .68), rgba(122, 144, 234, .62));
  color: #fff;
  font-size: 22px;
  font-weight: 850;
}

.wide {
  margin-top: 16px;
  padding: 24px;
  text-align: start;
}

nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 34px;
}

nav a {
  color: #6c55a0;
  font-weight: 750;
  text-decoration: none;
}

[dir="rtl"] .grid,
[dir="rtl"] .wide {
  text-align: right;
}

@media (max-width: 760px) {
  body {
    padding: 12px;
  }

  .glass {
    padding: 30px 18px;
    border-radius: 34px;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .card {
    min-height: 0;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    background: #15111d;
    color: #fff;
  }

  body {
    background:
      radial-gradient(circle at 8% 7%, rgba(241, 86, 159, .34), transparent 34%),
      radial-gradient(circle at 92% 14%, rgba(84, 110, 226, .28), transparent 35%),
      radial-gradient(circle at 52% 100%, rgba(135, 82, 203, .24), transparent 42%),
      #15111d;
  }

  .glass {
    border-color: rgba(255, 255, 255, .13);
    background: linear-gradient(145deg, rgba(55, 43, 67, .82), rgba(30, 25, 40, .68));
  }

  .lead,
  .card p,
  .wide p {
    color: rgba(255, 255, 255, .84);
  }

  .card,
  .wide {
    border-color: rgba(255, 255, 255, .13);
    background: rgba(255, 255, 255, .07);
  }

  nav a {
    color: #d7c7ff;
  }
}