*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg1:#10051f;--bg2:#2b0b4f;--bg3:#57127d;
  --orb1:#b15cff;--orb2:#ff3ea5;--accent:#fff;
}
html{min-height:100%;background:#10051f}
body{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:22px;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:#fff;overflow-x:hidden;position:relative;
  background:linear-gradient(135deg,var(--bg1),var(--bg2) 48%,var(--bg3));
  transition:background 0.25s ease;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.08),transparent 35%),
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:auto,34px 34px,34px 34px;
  mask-image:linear-gradient(to bottom,black,transparent 92%);
}
.page-shell{width:100%;max-width:420px;position:relative;z-index:3}
.aurora{
  position:fixed;border-radius:50%;filter:blur(75px);opacity:.48;
  pointer-events:none;z-index:1;mix-blend-mode:screen;
  transition:background 1.25s ease,transform 8s ease-in-out;
}
.aurora-one{width:330px;height:330px;top:-100px;left:-100px;background:var(--orb1);animation:floatOne 9s ease-in-out infinite alternate}
.aurora-two{width:300px;height:300px;right:-110px;bottom:-90px;background:var(--orb2);animation:floatTwo 11s ease-in-out infinite alternate}
.aurora-three{width:220px;height:220px;left:35%;top:38%;background:var(--orb2);opacity:.16;animation:floatThree 13s ease-in-out infinite alternate}
@keyframes floatOne{to{transform:translate(55px,40px) scale(1.12)}}
@keyframes floatTwo{to{transform:translate(-45px,-55px) scale(1.1)}}
@keyframes floatThree{to{transform:translate(40px,-35px) scale(1.18)}}

.card{
  position:relative;text-align:center;padding:26px 22px 21px;border-radius:32px;
  overflow:hidden;background:rgba(14,9,27,.48);
  border:1px solid rgba(255,255,255,.17);
  box-shadow:0 24px 80px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.13);
  backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);
  animation:cardIn .75s cubic-bezier(.2,.85,.25,1) both;
}
.card:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(145deg,rgba(255,255,255,.09),transparent 32%,transparent 70%,rgba(255,255,255,.035));
}
@keyframes cardIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}

.top-badge{
  display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);
  color:rgba(255,255,255,.72);font-size:9px;font-weight:800;letter-spacing:1.6px;
  margin-bottom:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)
}
.status-dot{width:7px;height:7px;border-radius:50%;background:#62ffb0;box-shadow:0 0 12px #62ffb0;animation:statusPulse 1.8s ease-in-out infinite}
@keyframes statusPulse{50%{transform:scale(1.35);opacity:.65}}

.avatar-wrap{display:flex;justify-content:center;margin-bottom:17px}
.avatar-ring{
  width:132px;height:132px;padding:4px;border-radius:50%;position:relative;
  background:conic-gradient(from 0deg,var(--orb1),var(--orb2),#6cf8ff,var(--orb1));
  box-shadow:0 0 0 5px rgba(255,255,255,.035),0 14px 42px color-mix(in srgb,var(--orb1) 38%,transparent);
  animation:ringRotate 7s linear infinite;
}
.avatar-ring:after{
  content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px solid rgba(255,255,255,.12);animation:ringPulse 2.8s ease-in-out infinite
}
.avatar-ring img{
  width:124px;height:124px;display:block;border-radius:50%;object-fit:cover;
  border:3px solid rgba(14,9,27,.9);background:#1b1029;position:relative;z-index:2;
  animation:photoCounter 7s linear infinite
}
.avatar-glow{position:absolute;inset:10px;border-radius:50%;background:var(--orb1);filter:blur(22px);opacity:.18;z-index:1}
@keyframes ringRotate{to{transform:rotate(360deg)}}
@keyframes photoCounter{to{transform:rotate(-360deg)}}
@keyframes ringPulse{50%{transform:scale(1.05);opacity:.45}}

.title{
  font-size:clamp(25px, 5vw, 30px);line-height:1.1;font-weight:900;letter-spacing:.7px;
  background:linear-gradient(110deg,#fff,var(--accent),#fff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  margin-bottom:7px
}
.subtitle{font-size:13px;color:rgba(255,255,255,.56);font-weight:500;letter-spacing:.5px}

.chips{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin:18px 0 19px}
.chip{
  padding:7px 9px;border-radius:999px;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);font-size:9px;font-weight:700;
  color:rgba(255,255,255,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)
}

.btn{
  width:100%;min-height:58px;display:flex;align-items:center;justify-content:center;gap:9px;
  position:relative;overflow:hidden;border-radius:18px;text-decoration:none;color:#fff;
  font-size:16px;font-weight:800;letter-spacing:.15px;
  background:linear-gradient(135deg,var(--orb1),var(--orb2));
  background-size:200% 200%;box-shadow:0 12px 30px color-mix(in srgb,var(--orb2) 34%,transparent);
  transition:transform .22s ease,filter .22s ease,box-shadow .22s ease,background 1.25s ease;
  animation:buttonGradient 4s ease infinite,buttonBreath 2.4s ease-in-out infinite
}
.btn:hover{transform:translateY(-3px) scale(1.015);filter:brightness(1.08);box-shadow:0 17px 38px color-mix(in srgb,var(--orb2) 46%,transparent)}
.btn:active{transform:scale(.965);filter:brightness(.98)}
.btn:focus-visible{outline:3px solid rgba(255,255,255,.82);outline-offset:4px}
.btn-icon,.btn-arrow{font-size:20px;position:relative;z-index:2}
.btn-arrow{font-size:18px;margin-left:2px}
.btn-shine{
  position:absolute;top:-80%;left:-35%;width:30%;height:260%;transform:rotate(22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.36),transparent);
  animation:shine 3.4s ease-in-out infinite;pointer-events:none
}
@keyframes shine{0%,45%{left:-35%}70%,100%{left:120%}}
@keyframes buttonGradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes buttonBreath{0%,100%{box-shadow:0 12px 30px color-mix(in srgb,var(--orb2) 28%,transparent)}50%{box-shadow:0 16px 40px color-mix(in srgb,var(--orb2) 42%,transparent)}}

.support-line{display:flex;align-items:center;gap:9px;margin:20px 0 10px;color:rgba(255,255,255,.35);font-size:8px;font-weight:800;letter-spacing:1.5px}
.line{height:1px;flex:1;background:rgba(255,255,255,.10)}
.community-copy{font-size:11px;line-height:1.55;color:rgba(255,255,255,.50);margin-bottom:16px}

.disclaimer{
  text-align:left;padding:12px 13px;border-radius:14px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.43);font-size:9px;line-height:1.55;
}
.disclaimer strong{color:rgba(255,255,255,.70);font-weight:800}

.footer{margin-top:15px;font-size:10px;color:rgba(255,255,255,.34);line-height:1.6}
.brand{
  font-weight:800;text-decoration:none;
  background:linear-gradient(90deg,#fff,var(--accent));-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;transition:opacity .2s
}
.brand:hover{opacity:.72}
.footer-links{margin-top:6px;display:flex;justify-content:center;gap:7px}
.footer-links a{color:rgba(255,255,255,.40);text-decoration:none}
.footer-links a:hover{color:#fff}

.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);transform:scale(0);animation:rippleAnim .65s linear;pointer-events:none}
@keyframes rippleAnim{to{transform:scale(5);opacity:0}}

@media(max-width:380px){
  body{padding:14px}.card{padding:22px 17px 18px;border-radius:27px}.title{font-size:26px}
  .avatar-ring{width:116px;height:116px}.avatar-ring img{width:108px;height:108px}
  .chips{gap:5px}.chip{font-size:8px;padding:6px 8px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
}