*{box-sizing:border-box;margin:0;padding:0}
:root{--pink:#ff7db7;--pink-soft:#ffd0e6;--pink-glow:rgba(255,125,183,.32);--text:#101018;--muted:#8e8e93;--green:#34c759}
html,body{width:100%;min-height:100%}
body{min-height:100vh;min-height:100svh;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",sans-serif;background:radial-gradient(circle at 50% 18%,rgba(255,177,213,.24),transparent 32%),linear-gradient(180deg,#fff5fa 0%,#fffbfd 52%,#fff 100%);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));color:var(--text)}
.ambient{position:fixed;border-radius:999px;pointer-events:none;filter:blur(36px);opacity:.38;animation:ambientFloat 12s infinite ease-in-out}
.ambient-one{width:225px;height:225px;background:rgba(255,150,202,.24);top:11%;left:50%;transform:translateX(-50%)}
.ambient-two{width:175px;height:175px;background:rgba(255,255,255,.78);bottom:12%;right:11%;animation-delay:3s}
@keyframes ambientFloat{0%,100%{transform:translate(-50%,0) scale(1)}50%{transform:translate(-50%,-10px) scale(1.05)}}
.glitter{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.glitter span{position:absolute;width:4px;height:4px;border-radius:999px;background:rgba(255,255,255,.96);box-shadow:0 0 12px rgba(255,150,202,.35);opacity:.18;filter:blur(.35px);animation:glitterFloat 8.5s infinite ease-in-out}
.glitter span:nth-child(1){top:14%;left:18%;animation-delay:0s}.glitter span:nth-child(2){top:23%;left:77%;animation-delay:1.1s}.glitter span:nth-child(3){top:42%;left:10%;animation-delay:2.2s}.glitter span:nth-child(4){top:58%;left:87%;animation-delay:3.3s}.glitter span:nth-child(5){top:78%;left:26%;animation-delay:4.4s}.glitter span:nth-child(6){top:35%;left:58%;animation-delay:5.5s}.glitter span:nth-child(7){top:18%;left:48%;animation-delay:6.4s}.glitter span:nth-child(8){top:84%;left:68%;animation-delay:7.3s}
@keyframes glitterFloat{0%,100%{transform:translateY(0) scale(.9);opacity:.10}50%{transform:translateY(-17px) scale(1.4);opacity:.46}}
.page{width:100%;display:flex;align-items:center;justify-content:center;z-index:1}
.card{width:min(82vw,318px);height:515px;border-radius:34px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.94));border:1px solid rgba(255,255,255,.88);box-shadow:0 38px 82px rgba(64,28,48,.11),inset 0 1px 0 rgba(255,255,255,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:flex;flex-direction:column;align-items:center;padding-top:54px;animation:cardIn 720ms cubic-bezier(.22,1,.36,1) both}
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.avatar-wrap{width:96px;height:96px;border-radius:50%;padding:4px;position:relative;margin-bottom:24px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,255,255,.54));box-shadow:0 15px 38px rgba(0,0,0,.16),0 0 46px var(--pink-glow),inset 0 1px 1px rgba(255,255,255,.95);animation:avatarFloat 6s infinite ease-in-out}
.avatar-wrap:before{content:"";position:absolute;inset:-9px;border-radius:50%;background:radial-gradient(circle,rgba(255,150,202,.19),transparent 62%);z-index:-1}
.avatar-wrap:after{content:"";position:absolute;top:10px;left:17px;width:35px;height:13px;border-radius:50%;background:rgba(255,255,255,.52);filter:blur(4px);pointer-events:none}
.avatar{width:100%;height:100%;display:block;border-radius:50%;object-fit:cover;background:#fff}
@keyframes avatarFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.avatar-shine{position:absolute;inset:4px;border-radius:50%;overflow:hidden;pointer-events:none}
.avatar-shine:before{content:"";position:absolute;top:-45%;left:-80%;width:55%;height:190%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:rotate(24deg);animation:avatarShine 12s infinite ease-in-out}
@keyframes avatarShine{0%,72%{left:-85%;opacity:0}80%{opacity:.85}100%{left:145%;opacity:0}}
.sparkle{position:absolute;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 0 14px rgba(255,150,202,.75);opacity:0;pointer-events:none}
.sparkle-one{top:3px;right:8px;animation:avatarSparkle 7s infinite ease-in-out}.sparkle-two{bottom:10px;left:4px;width:5px;height:5px;animation:avatarSparkle 8.5s infinite ease-in-out;animation-delay:2.2s}
@keyframes avatarSparkle{0%,72%,100%{transform:scale(.5);opacity:0}80%{transform:scale(1.35);opacity:.7}88%{transform:scale(.85);opacity:.25}}
.name-row{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:9px}
h1{font-size:29px;line-height:.96;font-weight:850;letter-spacing:-1.7px;color:var(--text);text-align:center}
.verified{width:19px;height:19px;flex:0 0 auto;margin-top:2px;filter:drop-shadow(0 2px 6px rgba(0,149,246,.22))}
.status{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);font-size:13px;font-weight:500;margin-bottom:20px}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--green);position:relative}.status-dot:after{content:"";position:absolute;inset:-6px;border-radius:50%;background:rgba(52,199,89,.24);animation:onlinePulse 2.45s infinite ease-in-out}
@keyframes onlinePulse{0%{transform:scale(.62);opacity:.8}68%{transform:scale(2.05);opacity:0}100%{transform:scale(.62);opacity:0}}
.bio{width:275px;text-align:center;color:#111117;margin-bottom:24px}.bio span{display:block;white-space:nowrap;font-size:14.5px;line-height:1.35;font-weight:620;letter-spacing:-.15px}.bio span+span{margin-top:2px}
.cta{width:252px;height:58px;border-radius:999px;border:2px solid var(--pink-soft);background:rgba(255,255,255,.86);box-shadow:0 13px 30px rgba(255,125,183,.15),inset 0 1px 0 rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;position:relative;text-decoration:none;color:var(--pink);overflow:hidden;transform:translateZ(0);transition:transform 180ms cubic-bezier(.22,1,.36,1),border-color 180ms ease,box-shadow 180ms ease,background 180ms ease;animation:buttonBreath 4.2s infinite ease-in-out}
.cta:after{content:"";position:absolute;top:0;left:-75%;width:44%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.68),transparent);transform:skewX(-18deg);animation:buttonShine 5.8s infinite ease-in-out}
@keyframes buttonBreath{0%,100%{box-shadow:0 13px 30px rgba(255,125,183,.13),inset 0 1px 0 rgba(255,255,255,.95)}50%{box-shadow:0 15px 39px rgba(255,125,183,.25),inset 0 1px 0 rgba(255,255,255,.95)}}
@keyframes buttonShine{0%,66%{left:-75%;opacity:0}78%{opacity:1}100%{left:132%;opacity:0}}
.cta:hover{transform:scale(1.024);border-color:#ff9cca;background:rgba(255,255,255,.96)}.cta:active{transform:scale(.965)}
.lock-bubble{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:#fff0f7;display:flex;align-items:center;justify-content:center;z-index:2}.lock-bubble img{width:15px;height:15px;display:block}
.cta-label{white-space:nowrap;font-size:16px;font-weight:850;letter-spacing:-.15px;color:var(--pink);z-index:2;margin-left:18px}.cta-arrow{font-size:26px;line-height:1;font-weight:300;color:var(--pink);margin-left:8px;margin-top:-2px;z-index:2}
@media(max-width:390px){.card{width:310px;height:515px}h1{font-size:28px}.cta{width:248px}.bio{width:268px}.bio span{font-size:14px}}
@media(max-width:345px){.bio span{font-size:13.2px}}
@media(max-height:700px){.card{height:500px;padding-top:47px}.avatar-wrap{width:91px;height:91px;margin-bottom:21px}.bio{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}