:root{--neon:#ff4fa8;--neon-soft:#ffa3d1;--fg:#fdf2f8;--muted:#c9a3b6;--glass:rgba(30,8,20,.72);
--u:min(.105dvh,.24vw,1px);--glow:0 0 18px rgba(255,79,168,.7),0 0 40px rgba(255,79,168,.35)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#0b0306;color:var(--fg);font-family:Outfit,sans-serif}
main{position:fixed;inset:0;overflow:hidden}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.overlay{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(120,20,70,.25),rgba(18,4,10,.85) 75%),linear-gradient(rgba(18,4,10,.55),rgba(12,3,8,.85))}
.wrap{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;padding:calc(10*var(--u)) 12px}
.glass{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,79,168,.55)}
.glow{box-shadow:var(--glow)}
.ic{display:inline-flex;color:var(--neon)}.ic svg{width:1em;height:1em}
.profile{
  position:relative;
  display:flex;
  align-items:center;
  width:fit-content;
  max-width:min(calc(560*var(--u)),92vw);
  min-height:calc(86*var(--u));
  padding:calc(8*var(--u)) calc(16*var(--u)) calc(8*var(--u)) calc(8*var(--u));
  gap:calc(14*var(--u));
  border-radius:999px;
  overflow:visible;
  isolation:isolate;
  border:1px solid rgba(255,100,190,.8);
  background:
    linear-gradient(110deg,rgba(27,4,20,.96),rgba(34,5,25,.84) 52%,rgba(16,3,14,.9)),
    radial-gradient(circle at 13% 50%,rgba(255,67,176,.22),transparent 35%);
  box-shadow:
    0 0 0 1px rgba(255,159,221,.1) inset,
    0 0 8px rgba(255,72,177,.38),
    0 0 16px rgba(255,35,153,.12),
    inset 0 0 14px rgba(255,72,177,.05);
  animation:profileHover 8.5s ease-in-out infinite;
}
.profile.glow{
  box-shadow:
    0 0 0 1px rgba(255,159,221,.1) inset,
    0 0 8px rgba(255,72,177,.38),
    0 0 16px rgba(255,35,153,.12),
    inset 0 0 14px rgba(255,72,177,.05);
}
.profile::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  overflow:hidden;
  clip-path:inset(0 round 999px);
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%);
  background-size:220% 100%;
  background-repeat:no-repeat;
  background-position:-90% 0;
  animation:profileSweep 9s ease-in-out infinite;
  z-index:1;
}
.profile::after{
  content:"";
  position:absolute;
  left:22%;
  right:22%;
  bottom:-4px;
  height:8px;
  border-radius:50%;
  background:rgba(255,40,155,.12);
  filter:blur(8px);
  z-index:-2;
}
.profile-avatar{
  position:relative;
  flex:0 0 auto;
  width:calc(74*var(--u));
  height:calc(74*var(--u));
}
.avatar-ring{
  position:absolute;
  inset:0;
  padding:2px;
  border-radius:50%;
  background:conic-gradient(from 210deg,#ff42ad,#ffd1ed,#ff42ad,#ff79c3,#ff42ad);
  box-shadow:0 0 10px rgba(255,74,179,.8),0 0 20px rgba(255,50,165,.32);
  animation:avatarPulse 5.2s ease-in-out infinite;
}
.avatar-ring::after{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:50%;
  border:1px solid rgba(255,120,200,.35);
  animation:ringExpand 4.8s ease-out infinite;
}
.avatar-ring img{
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #230715;
}
.crown-decor{
  position:absolute;
  z-index:4;
  left:calc(-2*var(--u));
  top:calc(-20*var(--u));
  color:#ff83c8;
  font-family:Georgia,serif;
  font-size:calc(34*var(--u));
  line-height:1;
  transform:rotate(-12deg);
  text-shadow:0 0 7px #ff43ad,0 0 18px rgba(255,67,173,.9);
  animation:crownFloat 6s ease-in-out infinite;
}
.avatar-heart{
  position:absolute;
  z-index:5;
  left:calc(-1*var(--u));
  bottom:calc(1*var(--u));
  width:calc(22*var(--u));
  height:calc(22*var(--u));
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(145deg,#ff8dcc,#ff3fa8);
  border:1.5px solid rgba(255,220,239,.8);
  box-shadow:0 0 8px rgba(255,66,172,.9);
  font-size:calc(12*var(--u));
  animation:heartBeat 3.2s ease-in-out infinite;
}
.profile-online-dot{
  position:absolute;
  z-index:6;
  right:calc(-1*var(--u));
  bottom:calc(2*var(--u));
  width:calc(14*var(--u));
  height:calc(14*var(--u));
  border-radius:50%;
  background:#24e879;
  border:3px solid #260817;
  box-shadow:0 0 8px rgba(36,232,121,.9);
  animation:onlineGlow 3s ease-in-out infinite;
}
.profile-main{
  min-width:0;
  flex:0 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:calc(7*var(--u));
}
.profile-brand{
  display:flex;
  align-items:center;
  gap:calc(7*var(--u));
  position:relative;
}
.profile-name{
  font-family:"Great Vibes",cursive;
  font-size:calc(42*var(--u));
  line-height:.9;
  font-weight:400;
  color:#fff;
  text-shadow:0 0 8px #ff4eae,0 0 22px rgba(255,61,170,.75);
}
.verified{
  position:relative;
  width:calc(26*var(--u));
  height:calc(26*var(--u));
  flex:0 0 auto;
  display:grid;
  place-items:center;
  overflow:visible;
  animation:verifiedFloat 4.8s ease-in-out infinite;
}
.verified svg{
  width:100%;
  height:100%;
  overflow:visible;
  filter:drop-shadow(0 0 5px rgba(255,79,168,.85));
  animation:verifiedGlow 4s ease-in-out infinite;
}
.verified-orbit{
  fill:none;
  stroke:rgba(255,214,238,.75);
  stroke-width:.7;
  stroke-dasharray:1.4 2.4;
  stroke-linecap:round;
  transform-origin:12px 12px;
  animation:verifiedOrbit 10s linear infinite;
}
.verified-seal{
  fill:url(#verifiedGrad);
  transform-origin:12px 12px;
  transform-box:fill-box;
  animation:verifiedPulse 4.2s ease-in-out infinite;
}
.verified-check{
  fill:none;
  stroke:#fff;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform-origin:12px 12px;
  transform-box:fill-box;
  animation:verifiedPop 5s ease-in-out infinite;
}
.verified-spark{
  fill:#fff;
  transform-box:fill-box;
  transform-origin:center;
  filter:drop-shadow(0 0 2px #fff);
}
.verified-spark.a{animation:verifiedTwinkle 2.8s ease-in-out infinite}
.verified-spark.b{animation:verifiedTwinkle 2.8s ease-in-out .9s infinite}
.verified::after{
  content:"";
  position:absolute;
  inset:14%;
  border-radius:50%;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.7) 50%,transparent 66%);
  animation:verifiedShine 4.6s ease-in-out infinite;
}
.brand-heart{
  color:#ff86c9;
  font-size:calc(16*var(--u));
  text-shadow:0 0 9px #ff45aa;
  animation:heartBeat 3.2s ease-in-out infinite;
}
.profile-status-row{
  display:flex;
  align-items:center;
  gap:calc(8*var(--u));
  flex-wrap:nowrap;
}
.profile-status{
  display:flex;
  align-items:center;
  gap:calc(5*var(--u));
  color:#fff;
  font-size:calc(14*var(--u));
  font-weight:400;
  white-space:nowrap;
}
.profile-status i{
  width:calc(9*var(--u));
  height:calc(9*var(--u));
  border-radius:50%;
  background:#25e77a;
  box-shadow:0 0 10px rgba(37,231,122,.95);
  animation:onlineGlow 3s ease-in-out infinite;
}
.profile-separator{
  width:1px;
  height:calc(16*var(--u));
  background:rgba(255,157,215,.5);
}
.exclusive-pill{
  display:flex;
  align-items:center;
  gap:calc(6*var(--u));
  padding:calc(5*var(--u)) calc(12*var(--u));
  border-radius:999px;
  color:#ffc4e4;
  font-size:calc(11*var(--u));
  font-weight:700;
  letter-spacing:.1em;
  border:1px solid rgba(255,78,174,.8);
  background:rgba(255,47,160,.08);
  box-shadow:0 0 13px rgba(255,56,169,.35),inset 0 0 12px rgba(255,75,174,.08);
  animation:exclusivePulse 5.2s ease-in-out infinite;
}
.exclusive-crown{
  display:flex;
  color:#fff;
}
.exclusive-crown svg{
  width:calc(14*var(--u));
  height:calc(14*var(--u));
}
@keyframes profileHover{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes profileSweep{0%,25%{background-position:-90% 0}65%,100%{background-position:190% 0}}
@keyframes avatarPulse{50%{box-shadow:0 0 22px rgba(255,74,179,1),0 0 42px rgba(255,50,165,.48)}}
@keyframes ringExpand{0%{transform:scale(.97);opacity:.7}75%,100%{transform:scale(1.13);opacity:0}}
@keyframes crownFloat{50%{transform:rotate(-8deg) translateY(-4px)}}
@keyframes heartBeat{0%,100%{transform:scale(1)}12%{transform:scale(1.16)}22%{transform:scale(1)}}
@keyframes onlineGlow{50%{transform:scale(1.13);box-shadow:0 0 18px rgba(36,232,121,1)}}
@keyframes verifiedFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes verifiedGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(255,79,168,.7))}50%{filter:drop-shadow(0 0 9px rgba(255,79,168,1))}}
@keyframes verifiedOrbit{to{transform:rotate(360deg)}}
@keyframes verifiedPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes verifiedPop{0%,40%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes verifiedShine{0%,30%{transform:translateX(-130%) rotate(14deg);opacity:0}48%{opacity:.85}72%,100%{transform:translateX(130%) rotate(14deg);opacity:0}}
@keyframes verifiedTwinkle{0%,100%{opacity:.2;transform:scale(.55) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(18deg)}}
@keyframes exclusivePulse{50%{box-shadow:0 0 22px rgba(255,56,169,.55),inset 0 0 18px rgba(255,75,174,.13)}}
@keyframes cardBreath{
  0%,100%{box-shadow:0 0 14px rgba(255,79,168,.22),0 0 0 rgba(255,79,168,0)}
  50%{box-shadow:0 0 22px rgba(255,79,168,.4),0 0 40px rgba(255,79,168,.12)}
}
@keyframes cardShine{0%,35%{background-position:-90% 0}78%,100%{background-position:190% 0}}
@keyframes accessGlow{50%{text-shadow:0 0 10px rgba(255,79,168,.85)}}
@keyframes pricePulse{
  0%,100%{transform:scale(1);text-shadow:0 0 10px var(--neon),0 0 30px var(--neon)}
  50%{transform:scale(1.03);text-shadow:0 0 16px var(--neon),0 0 42px rgba(255,79,168,.85)}
}
@keyframes timerGlow{50%{box-shadow:0 0 12px rgba(255,79,168,.35);border-color:rgba(255,120,200,.85)}}
@keyframes timerTick{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes featFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes ctaGlow{
  0%,100%{box-shadow:0 0 14px rgba(255,79,168,.45)}
  50%{box-shadow:0 0 22px rgba(255,79,168,.75),0 0 36px rgba(255,79,168,.28)}
}
@keyframes ctaShine{0%,32%{background-position:-90% 0}70%,100%{background-position:190% 0}}
@keyframes ctaArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}

.title{display:flex;flex-direction:column;align-items:center;margin-bottom:calc(14*var(--u))}
.title h1{font-family:"Great Vibes",cursive;font-weight:400;line-height:1;font-size:calc(88*var(--u));color:var(--neon-soft);text-shadow:0 0 10px var(--neon),0 0 30px var(--neon);display:flex;align-items:center}
.title h1 .ic{font-size:calc(40*var(--u));margin-left:calc(8*var(--u))}
.title p{letter-spacing:.45em;font-size:calc(11*var(--u));margin-top:calc(6*var(--u));opacity:.8}
.card{
  position:relative;
  width:100%;
  max-width:calc(440*var(--u));
  margin-top:calc(18*var(--u));
  padding:calc(30*var(--u)) calc(22*var(--u)) calc(18*var(--u));
  border-radius:24px;
  text-align:center;
  isolation:isolate;
  animation:cardBreath 8s ease-in-out infinite;
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  clip-path:inset(0 round 24px);
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.1) 50%,transparent 62%);
  background-size:220% 100%;
  background-repeat:no-repeat;
  background-position:-90% 0;
  animation:cardShine 11s ease-in-out infinite;
}
.badge{
  position:absolute;
  left:50%;
  top:calc(-16*var(--u));
  transform:translateX(-50%);
  white-space:nowrap;
  border-radius:999px;
  font-weight:600;
  letter-spacing:.05em;
  font-size:calc(13*var(--u));
  padding:calc(5*var(--u)) calc(18*var(--u));
  display:flex;
  align-items:center;
  gap:calc(8*var(--u));
  overflow:hidden;
  isolation:isolate;
  clip-path:inset(0 round 999px);
  animation:badgePulse 4.6s ease-in-out infinite;
}
.badge::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.4) 50%,transparent 64%);
  background-size:220% 100%;
  background-repeat:no-repeat;
  background-position:-90% 0;
  animation:badgeShine 4.8s ease-in-out infinite;
  z-index:1;
}
.badge .ic{
  position:relative;
  z-index:2;
  animation:badgeZap 2.8s ease-in-out infinite;
}
.badge .ic svg{filter:drop-shadow(0 0 5px rgba(255,79,168,.85))}
@keyframes badgePulse{
  0%,100%{
    transform:translateX(-50%) scale(1);
    box-shadow:0 0 10px rgba(255,79,168,.55),0 0 22px rgba(255,79,168,.22);
  }
  50%{
    transform:translateX(-50%) scale(1.045);
    box-shadow:0 0 16px rgba(255,79,168,.9),0 0 34px rgba(255,79,168,.38);
  }
}
@keyframes badgeShine{0%,28%{background-position:-90% 0}62%,100%{background-position:190% 0}}
@keyframes badgeZap{
  0%,100%{transform:scale(1) rotate(0)}
  35%{transform:scale(1.18) rotate(-10deg)}
  50%{transform:scale(.96) rotate(8deg)}
  65%{transform:scale(1.08) rotate(-4deg)}
}
h2{font-weight:800;font-size:calc(28*var(--u))}
h2 em{color:var(--neon);animation:accessGlow 5s ease-in-out infinite}
h2 .ic{font-size:calc(20*var(--u));animation:heartBeat 3.2s ease-in-out infinite}
.sub{font-size:calc(17*var(--u));margin-top:calc(4*var(--u))}
.price{
  font-weight:800;
  line-height:1.2;
  font-size:calc(68*var(--u));
  color:var(--neon-soft);
  text-shadow:0 0 10px var(--neon),0 0 30px var(--neon);
  animation:pricePulse 4.8s ease-in-out infinite;
}
.old{font-size:calc(17*var(--u))}.old s{color:var(--muted)}.old span{opacity:.8}
.timer{display:flex;justify-content:center;gap:calc(8*var(--u));margin-top:calc(12*var(--u))}
.timer div{
  width:calc(76*var(--u));
  padding:calc(5*var(--u)) 0;
  border-radius:8px;
  animation:timerGlow 3.6s ease-in-out infinite;
}
.timer div:nth-child(2){animation-delay:.18s}
.timer div:nth-child(3){animation-delay:.36s}
.timer b{display:block;color:var(--neon);font-size:calc(22*var(--u));animation:timerTick 1.8s ease-in-out infinite}
.timer small{font-size:calc(10*var(--u))}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(8*var(--u));margin-top:calc(14*var(--u));font-size:calc(13*var(--u))}
.feats div{display:flex;flex-direction:column;align-items:center;gap:calc(4*var(--u))}
.feats .ic{font-size:calc(26*var(--u));animation:featFloat 4.4s ease-in-out infinite}
.feats div:nth-child(2) .ic{animation-delay:.22s}
.feats div:nth-child(3) .ic{animation-delay:.44s}
.cta{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:calc(8*var(--u));
  margin-top:calc(16*var(--u));
  padding:calc(12*var(--u)) 0;
  font-size:calc(18*var(--u));
  font-weight:700;
  color:#1a0610;
  text-decoration:none;
  border-radius:16px;
  width:100%;
  border:0;
  cursor:pointer;
  font-family:inherit;
  overflow:hidden;
  background:linear-gradient(var(--neon-soft),var(--neon));
  transition:transform .2s;
  animation:ctaGlow 4s ease-in-out infinite;
}
.cta::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.45) 50%,transparent 64%);
  background-size:220% 100%;
  background-repeat:no-repeat;
  background-position:-90% 0;
  animation:ctaShine 5s ease-in-out infinite;
}
.cta:hover{transform:scale(1.02)}
.cta:disabled{opacity:.7;cursor:wait;transform:none}
.cta .ic{position:relative;z-index:1;color:#1a0610;animation:ctaArrow 2.8s ease-in-out infinite}
.pay-modal,.pay-wait{
  position:fixed;
  inset:0;
  z-index:20;
  display:grid;
  place-items:center;
  padding:16px;
}
.pay-modal[hidden],.pay-wait[hidden]{display:none}
.pay-backdrop{position:absolute;inset:0;background:rgba(8,2,6,.72);backdrop-filter:blur(8px)}
.pay-sheet{
  position:relative;
  z-index:1;
  width:min(92vw,380px);
  padding:28px 22px 22px;
  border-radius:22px;
  text-align:center;
}
.pay-close{
  position:absolute;
  top:10px;
  right:12px;
  width:32px;
  height:32px;
  border:0;
  background:transparent;
  color:#ffb6dc;
  font-size:24px;
  cursor:pointer;
}
.pay-kicker{color:var(--neon-soft);font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:8px}
.pay-sheet h3{font-size:22px;margin-bottom:6px}
.pay-sub{color:var(--muted);font-size:13px;margin-bottom:16px}
.pay-sheet label{display:block;text-align:left;font-size:12px;margin-bottom:6px;color:#ffd0eb}
.pay-sheet input{
  width:100%;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,79,168,.45);
  background:rgba(18,4,12,.72);
  color:#fff;
  padding:0 12px;
  font:inherit;
  margin-bottom:14px;
  outline:none;
}
.pay-sheet input:focus{border-color:var(--neon);box-shadow:0 0 0 3px rgba(255,79,168,.18)}
.pay-note{margin-top:10px;font-size:11px;color:var(--muted)}
.pay-track{height:6px;border-radius:99px;background:rgba(255,79,168,.16);overflow:hidden;margin:18px 0 8px}
.pay-bar{height:100%;width:12%;border-radius:inherit;background:linear-gradient(90deg,var(--neon-soft),var(--neon));transition:width .4s ease}
.pay-retry{
  margin-top:14px;
  width:100%;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(255,79,168,.5);
  background:rgba(255,79,168,.12);
  color:#fff;
  font:inherit;
  cursor:pointer;
}
.pay-wait.is-err .pay-bar{background:#ff6b9d}
.secure{display:flex;align-items:center;justify-content:center;gap:calc(8*var(--u));margin-top:calc(10*var(--u));font-size:calc(13*var(--u));opacity:.8}.secure .ic{color:var(--fg)}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(10*var(--u));width:100%;max-width:calc(760*var(--u));padding:calc(12*var(--u)) calc(16*var(--u));border-radius:24px}
.strip>div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:calc(8*var(--u));min-width:0}
.strip .ic{font-size:calc(28*var(--u))}.strip b{display:block;font-size:calc(13*var(--u))}.strip small{color:var(--muted);font-size:calc(11*var(--u))}
@media(min-width:640px){.strip>div{flex-direction:row;text-align:left}}

@media(max-width:640px){
  .profile{
    width:fit-content;
    max-width:92vw;
    min-height:calc(74*var(--u));
    gap:calc(10*var(--u));
    padding:calc(6*var(--u)) calc(12*var(--u)) calc(6*var(--u)) calc(6*var(--u));
  }
  .profile-avatar{width:calc(62*var(--u));height:calc(62*var(--u))}
  .profile-name{font-size:calc(34*var(--u))}
  .verified{width:calc(22*var(--u));height:calc(22*var(--u))}
  .profile-status{font-size:calc(12*var(--u))}
  .profile-separator{height:calc(14*var(--u))}
  .exclusive-pill{font-size:calc(9*var(--u));padding:calc(4*var(--u)) calc(9*var(--u));letter-spacing:.08em}
  .exclusive-crown svg{width:calc(12*var(--u));height:calc(12*var(--u))}
  .crown-decor{font-size:calc(26*var(--u));top:calc(-16*var(--u))}
  .avatar-heart{width:calc(19*var(--u));height:calc(19*var(--u));font-size:calc(10*var(--u))}
  .profile-online-dot{width:calc(13*var(--u));height:calc(13*var(--u));border-width:3px}
}
@media(max-width:430px){
  .profile-status-row{gap:calc(8*var(--u))}
  .profile-separator{display:none}
  .exclusive-pill{padding:calc(4*var(--u)) calc(8*var(--u))}
}
@media(prefers-reduced-motion:reduce){
  .profile,.profile::before,.avatar-ring,.avatar-ring::after,.crown-decor,.avatar-heart,
  .profile-online-dot,.verified,.verified svg,.verified-orbit,.verified-seal,.verified-check,
  .verified-spark,.verified::after,.brand-heart,.profile-status i,.exclusive-pill,
  .badge,.badge::after,.badge .ic,.card,.card::before,h2 em,h2 .ic,.price,
  .timer div,.timer b,.feats .ic,.cta,.cta::after,.cta .ic{animation:none!important}
}