* { box-sizing: border-box; }
:root {
  color-scheme: dark;
  --violet: #260033;
  --pink: #ff35d4;
  --lilac: #df4aff;
}
html { min-height: 100%; background: var(--violet); }
body {
  margin: 0; min-height: 100svh; color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(ellipse at 0% 12%, rgba(183, 18, 198, .40), transparent 34%),
    radial-gradient(ellipse at 100% 88%, rgba(137, 13, 185, .40), transparent 34%),
    linear-gradient(155deg, #31003e 0%, #21002f 55%, #300044 100%);
  overflow-x: hidden;
}
.landing {
  position: relative; isolation: isolate;
  width: min(100%, 620px); min-height: 100svh;
  margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 22px max(42px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center;
}
.location-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 9px 22px; margin: 8px 0 42px;
  border: 1px solid rgba(235, 106, 255, .58); border-radius: 999px;
  background: rgba(124, 34, 139, .40); box-shadow: inset 0 0 20px rgba(255, 72, 228, .08);
  color: #fff; font-size: clamp(14px, 3.5vw, 19px); letter-spacing: .1px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.location-pill svg { width: 23px; height: 23px; flex: 0 0 auto; fill: #ff65e5; }
.location-pill svg circle { fill: #3d0648; }
.profile { display: flex; flex-direction: column; align-items: center; width: 100%; }
.avatar-wrap {
  position: relative; width: clamp(176px, 43vw, 226px); aspect-ratio: 1;
  border-radius: 50%; padding: 5px; margin-bottom: 17px;
  background: linear-gradient(140deg, #ffb4f4, #ff35d4 48%, #bd3bff);
  box-shadow: 0 0 10px rgba(255, 57, 220, .8), 0 0 28px rgba(211, 43, 255, .30);
}
.avatar { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; border-radius: 50%; }
.online-dot {
  position: absolute; width: 29px; height: 29px; right: 5px; bottom: 14px;
  border: 3px solid #fff; border-radius: 50%; background: #20ed79;
  box-shadow: 0 0 0 2px rgba(20, 0, 30, .25);
}
h1 {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 0 34px; max-width: 100%; text-align: center;
  font-size: clamp(24px, 6vw, 34px); line-height: 1.12; font-weight: 750; letter-spacing: -.8px;
}
.verified {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 26px; height: 26px; background: #20aaff; color: white;
  clip-path: polygon(50% 0%, 62% 10%, 78% 8%, 84% 23%, 98% 32%, 92% 48%, 100% 62%, 85% 72%, 82% 88%, 65% 90%, 50% 100%, 37% 90%, 20% 92%, 15% 76%, 2% 66%, 8% 50%, 0% 36%, 15% 25%, 19% 10%, 37% 11%);
}
.verified svg { width: 18px; height: 18px; fill: currentColor; }
.hero-link {
  position: relative; display: block; width: 100%; aspect-ratio: 1.42;
  overflow: hidden; border-radius: 27px; border: 3px solid var(--lilac);
  background: #16001f; text-decoration: none; color: #fff;
  box-shadow: 0 0 8px rgba(227, 66, 255, .88), 0 0 24px rgba(209, 42, 255, .26);
  -webkit-tap-highlight-color: transparent;
}
.hero-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transition: transform .35s ease; }
.image-shade {
  position: absolute; inset: 48% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(17, 0, 25, .88));
  pointer-events: none;
}
.cta {
  position: absolute; left: 10px; right: 10px; bottom: clamp(22px, 5vw, 36px);
  text-align: center; color: #fff; font-size: clamp(23px, 5.1vw, 32px);
  font-weight: 750; line-height: 1.12; letter-spacing: .15px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .52);
  animation: gentle-pulse 3.6s ease-in-out infinite;
  pointer-events: none;
}
.hero-link:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.hero-link:active .hero-image { transform: scale(1.015); }
.hearts { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.hearts span {
  position: absolute; bottom: -8vh; left: var(--x, 50%); color: #ff2bc8;
  font-size: var(--size, 20px); opacity: var(--opacity, .32);
  text-shadow: 0 0 9px rgba(255, 38, 207, .32);
  animation: float-up var(--duration, 17s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.hearts span:nth-child(1) { --x: 5%; --size: 22px; --duration: 18s; --delay: -4s; }
.hearts span:nth-child(2) { --x: 17%; --size: 16px; --duration: 22s; --delay: -13s; --opacity: .25; }
.hearts span:nth-child(3) { --x: 28%; --size: 25px; --duration: 20s; --delay: -8s; }
.hearts span:nth-child(4) { --x: 42%; --size: 13px; --duration: 24s; --delay: -17s; --opacity: .22; }
.hearts span:nth-child(5) { --x: 58%; --size: 18px; --duration: 19s; --delay: -2s; --opacity: .26; }
.hearts span:nth-child(6) { --x: 71%; --size: 24px; --duration: 23s; --delay: -11s; }
.hearts span:nth-child(7) { --x: 84%; --size: 17px; --duration: 21s; --delay: -6s; --opacity: .28; }
.hearts span:nth-child(8) { --x: 94%; --size: 26px; --duration: 25s; --delay: -15s; }
.hearts span:nth-child(9) { --x: 11%; --size: 13px; --duration: 26s; --delay: -20s; --opacity: .2; }
.hearts span:nth-child(10) { --x: 35%; --size: 18px; --duration: 22s; --delay: -10s; --opacity: .25; }
.hearts span:nth-child(11) { --x: 51%; --size: 14px; --duration: 27s; --delay: -7s; --opacity: .24; }
.hearts span:nth-child(12) { --x: 66%; --size: 21px; --duration: 20s; --delay: -18s; }
.hearts span:nth-child(13) { --x: 78%; --size: 12px; --duration: 24s; --delay: -3s; --opacity: .2; }
.hearts span:nth-child(14) { --x: 23%; --size: 19px; --duration: 26s; --delay: -22s; }
.hearts span:nth-child(15) { --x: 89%; --size: 15px; --duration: 21s; --delay: -12s; --opacity: .23; }
.hearts span:nth-child(16) { --x: 3%; --size: 15px; --duration: 25s; --delay: -9s; --opacity: .2; }
.hearts span:nth-child(17) { --x: 47%; --size: 23px; --duration: 19s; --delay: -14s; }
.hearts span:nth-child(18) { --x: 62%; --size: 12px; --duration: 28s; --delay: -5s; --opacity: .18; }
.hearts span:nth-child(19) { --x: 31%; --size: 14px; --duration: 24s; --delay: -16s; --opacity: .23; }
.hearts span:nth-child(20) { --x: 97%; --size: 18px; --duration: 23s; --delay: -19s; --opacity: .24; }
@keyframes float-up { from { transform: translateY(0) rotate(-8deg); } to { transform: translateY(-115vh) rotate(12deg); } }
@keyframes gentle-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .88; transform: scale(1.012); } }
@media (min-width: 700px) {
  .landing { padding-top: 38px; }
  .location-pill { margin-bottom: 35px; }
}
@media (max-width: 380px) {
  .landing { padding-left: 16px; padding-right: 16px; }
  .location-pill { margin-bottom: 30px; }
  h1 { margin-bottom: 28px; letter-spacing: -.6px; }
  .hero-link { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}