:root {
  --pink-50: #fff7fb;
  --pink-100: #ffeaf5;
  --pink-300: #f8b8d8;
  --pink-500: #ed72ae;
  --pink-650: #ce4d8c;
  --ink: #251b22;
  --muted: #8f7684;
  --shadow: 0 18px 60px rgba(174, 82, 129, .18);
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--pink-50); }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  background:
    radial-gradient(circle at 14% 8%, rgba(255, 191, 221, .46), transparent 30rem),
    radial-gradient(circle at 90% 86%, rgba(255, 214, 235, .64), transparent 28rem),
    linear-gradient(155deg, #fffafd 0%, #fff0f8 100%);
}

a { -webkit-tap-highlight-color: transparent; }

.page-shell {
  width: min(100%, 520px);
  margin: 0 auto;
  padding: 20px 16px max(36px, env(safe-area-inset-bottom));
}

.profile-card { text-align: center; }

.hero-wrap {
  width: min(67vw, 315px);
  aspect-ratio: 1;
  margin: 4px auto 18px;
  padding: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff, #f39cc8 50%, #fff);
  box-shadow: 0 16px 50px rgba(225, 86, 154, .23), 0 0 0 8px rgba(255,255,255,.56);
}

.hero {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 38%;
  border: 4px solid rgba(255,255,255,.95);
  border-radius: 50%;
}

.identity { margin-bottom: 16px; }

.name-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.15rem, 9vw, 3rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1;
}

.verified {
  width: 23px;
  height: 23px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  margin-top: 3px;
  color: #fff;
  font-size: 11px;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 50%;
  background: linear-gradient(145deg, #59baf6, #1885e5);
  box-shadow: 0 4px 12px rgba(24,133,229,.28);
}

.handle, .bio { margin: 7px 0 0; }
.handle { color: var(--muted); font-size: .91rem; font-weight: 600; letter-spacing: .02em; }
.bio { margin-top: 6px; font-family: Georgia, serif; font-size: 1.05rem; font-style: italic; }

.socials {
  display: flex;
  justify-content: center;
  gap: 13px;
  margin: 18px 0 22px;
}

.social {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 23px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 50%;
  box-shadow: 0 9px 24px rgba(202,77,139,.19), inset 0 1px 1px rgba(255,255,255,.4);
  transition: transform .2s ease, box-shadow .2s ease;
}

.social:hover, .social:focus-visible { transform: translateY(-3px) scale(1.04); box-shadow: 0 13px 30px rgba(202,77,139,.27); }
.instagram { background: linear-gradient(135deg, #7f4bd9, #e24a8d 55%, #ffb653); }
.tiktok { background: linear-gradient(135deg, #25f4ee, #171119 48%, #fe2c55); }
.snapchat { color: #241c20; background: #ffed49; }
.telegram { background: linear-gradient(145deg, #55c6f3, #229ed9); }

.explore-button, .exclusive-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 61px;
  color: #fff;
  font-family: Georgia, serif;
  font-size: 1.13rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 19px;
  background: linear-gradient(110deg, #df5e9e, #ef83b8 52%, #d94f94);
  box-shadow: 0 14px 36px rgba(209, 71, 139, .3), 0 0 25px rgba(245, 139, 191, .32), inset 0 1px rgba(255,255,255,.42);
  transition: transform .2s ease, box-shadow .2s ease;
}

.explore-button:hover, .explore-button:focus-visible, .exclusive-button:hover, .exclusive-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(209,71,139,.38), 0 0 30px rgba(245,139,191,.4);
}

.explore-button i { font-size: .82rem; opacity: .9; }

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 17px;
}

.gallery img {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: block;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,.8);
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(107,65,85,.13);
}
.gallery img:nth-child(1) { object-position: 50% 30%; }
.gallery img:nth-child(2) { object-position: 50% 42%; }
.gallery img:nth-child(3) { object-position: 52% 50%; }

.exclusive-page { background: #1b1217; }
.exclusive-shell { width: min(100%, 540px); min-height: 100vh; margin: 0 auto; padding: 0; }
.exclusive-card { position: relative; min-height: 100vh; overflow: hidden; background: #24171f; }
.exclusive-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 53% 42%; }
.exclusive-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(28,15,22,.06) 25%, rgba(30,16,23,.36) 58%, rgba(24,12,19,.93) 100%); }
.exclusive-content { position: absolute; inset: auto 0 0; padding: 40px 20px max(38px, env(safe-area-inset-bottom)); text-align: center; color: #fff; }
.light-name h1 { text-shadow: 0 3px 18px rgba(0,0,0,.35); }
.exclusive-handle { margin: 8px 0 24px; color: rgba(255,255,255,.75); font-weight: 600; }
.exclusive-button { width: 100%; max-width: 440px; margin: 0 auto; }

@media (min-width: 620px) {
  .page-shell { padding-top: 34px; }
  .profile-card { padding: 24px; border: 1px solid rgba(255,255,255,.75); border-radius: 34px; background: rgba(255,255,255,.38); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
  .exclusive-shell { padding: 24px 0; }
  .exclusive-card { min-height: calc(100vh - 48px); border-radius: 32px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }