@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700;800;900&display=swap');

:root{
  --bg:#0b0c10;
  --bg2:#16181f;
  --charcoal:#111319;
  --pink:#ff4fc7;
  --pink2:#ff97de;
  --chrome:#f4f5f7;
  --steel:#b9c0cb;
  --text:#ffffff;
  --muted:#ebe0eb;
  --line:rgba(255,255,255,.14);
}

*{box-sizing:border-box}
html,body{min-height:100%}

body{
  margin:0;
  font-family:Inter,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 80% 8%, rgba(255,79,199,.12), transparent 24rem),
    radial-gradient(circle at 15% 88%, rgba(255,79,199,.08), transparent 18rem),
    linear-gradient(135deg,#090a0d,#14161d 46%,#0d0f14);
  overflow-x:hidden;
}

.bg-photo{
  position:fixed;
  inset:-12px;
  background:
    linear-gradient(rgba(7,8,10,.58), rgba(7,8,10,.84)),
    url("gym_texture.png") center center / 380px 380px repeat;
  filter:contrast(1.08) brightness(.56) grayscale(.1);
  transform:scale(1.02);
  opacity:.92;
  pointer-events:none;
}

.bg-dark{
  position:fixed;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.2)),
    linear-gradient(90deg, rgba(0,0,0,.22), transparent 30%, transparent 70%, rgba(0,0,0,.22));
  pointer-events:none;
}

.mirror-panel{
  position:fixed;
  left:50%;
  top:4%;
  transform:translateX(-50%);
  width:min(860px, calc(100vw - 60px));
  height:88vh;
  border-radius:34px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 20px 70px rgba(0,0,0,.30);
  backdrop-filter:blur(8px);
  pointer-events:none;
}

.mirror-highlight{
  position:fixed;
  left:50%;
  top:5%;
  transform:translateX(-50%);
  width:min(760px, calc(100vw - 120px));
  height:14vh;
  border-radius:999px;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.10), rgba(255,255,255,0) 72%);
  filter:blur(18px);
  opacity:.35;
  pointer-events:none;
}

.gym-wall{
  position:fixed;
  inset:0;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.035) 0 2px,
      transparent 2px 130px,
      rgba(255,255,255,.02) 130px 132px,
      transparent 132px 260px),
    repeating-linear-gradient(180deg,
      transparent 0 86px,
      rgba(255,255,255,.018) 86px 88px,
      transparent 88px 176px);
  opacity:.12;
  pointer-events:none;
}

.rack-lines{
  position:fixed;
  inset:0;
  background:
    linear-gradient(118deg, transparent 0 56%, rgba(255,255,255,.045) 56.4%, transparent 56.8%),
    linear-gradient(62deg, transparent 0 36%, rgba(255,255,255,.03) 36.4%, transparent 36.8%);
  opacity:.16;
  pointer-events:none;
}

.light-beam{
  position:fixed;
  top:-10%;
  width:34vw;
  height:72vh;
  filter:blur(10px);
  opacity:.11;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,.72), rgba(255,255,255,0));
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
}
.beam-left{left:-6%; transform:rotate(-4deg)}
.beam-right{right:-6%; transform:rotate(4deg)}

.pink-smoke{
  position:fixed;
  border-radius:999px;
  filter:blur(90px);
  pointer-events:none;
}
.smoke-one{
  width:310px;height:310px;
  right:4%;top:8%;
  background:rgba(255,79,199,.26);
  animation:smokeOne 8.5s ease-in-out infinite alternate;
}
.smoke-two{
  width:240px;height:240px;
  left:8%;bottom:12%;
  background:rgba(255,79,199,.18);
  animation:smokeTwo 10s ease-in-out infinite alternate;
}
@keyframes smokeOne{to{transform:translate(-28px,20px) scale(1.12)}}
@keyframes smokeTwo{to{transform:translate(20px,-16px) scale(1.08)}}

.floor-grid{
  position:fixed;
  inset:auto 0 0 0;
  height:38vh;
  pointer-events:none;
  opacity:.06;
  background:
    linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size:44px 44px;
  transform:perspective(480px) rotateX(70deg) translateY(62px);
  transform-origin:bottom;
}

.dumbbell{
  position:fixed;
  width:150px;
  height:26px;
  pointer-events:none;
  opacity:.12;
  filter:drop-shadow(0 0 18px rgba(255,79,199,.10));
}
.dumbbell:before,
.dumbbell:after{
  content:"";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:22px;
  border-radius:6px;
  border:2px solid rgba(255,255,255,.18);
  box-shadow:
    inset 8px 0 0 rgba(255,255,255,.10),
    inset 16px 0 0 rgba(255,255,255,.06),
    inset -8px 0 0 rgba(255,255,255,.10),
    inset -16px 0 0 rgba(255,255,255,.06);
}
.dumbbell:before{left:0}
.dumbbell:after{right:0}
.dumbbell-one{
  left:6%;
  top:24%;
  transform:rotate(-14deg);
}
.dumbbell-two{
  right:6%;
  bottom:23%;
  transform:rotate(16deg);
}
.dumbbell-one,
.dumbbell-two{
  background:
    linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.08)) center/66px 4px no-repeat;
}
.dumbbell-one::before,.dumbbell-one::after,
.dumbbell-two::before,.dumbbell-two::after{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
}

.dust-layer{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.dust{
  position:absolute;
  width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle,#fff,rgba(255,255,255,.22) 42%,rgba(255,255,255,0));
  box-shadow:0 0 12px rgba(255,255,255,.12);
  animation:dustDrift linear infinite;
}
.d1{left:6%;top:78%;animation-duration:14s;animation-delay:-1s}
.d2{left:14%;top:58%;animation-duration:12s;animation-delay:-3s}
.d3{left:22%;top:84%;animation-duration:16s;animation-delay:-6s}
.d4{left:31%;top:67%;animation-duration:13s;animation-delay:-8s}
.d5{left:42%;top:80%;animation-duration:17s;animation-delay:-4s}
.d6{left:51%;top:26%;animation-duration:15s;animation-delay:-7s}
.d7{left:62%;top:82%;animation-duration:18s;animation-delay:-10s}
.d8{left:71%;top:61%;animation-duration:12s;animation-delay:-2s}
.d9{left:79%;top:74%;animation-duration:19s;animation-delay:-11s}
.d10{left:87%;top:23%;animation-duration:14s;animation-delay:-5s}
.d11{left:92%;top:58%;animation-duration:16s;animation-delay:-9s}
.d12{left:28%;top:16%;animation-duration:15s;animation-delay:-12s}
@keyframes dustDrift{
  0%{opacity:0;transform:translateY(12px) scale(.6)}
  12%{opacity:.5}
  52%{opacity:.35;transform:translateY(-56px) translateX(12px) scale(1)}
  100%{opacity:0;transform:translateY(-122px) translateX(-12px) scale(.45)}
}

.topbar{
  position:relative;
  z-index:2;
  padding:24px 24px 0;
}
.back-link{
  color:#fff;
  text-decoration:none;
  font-weight:900;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(16px);
  border-radius:999px;
  padding:12px 18px;
}

.hero{
  position:relative;
  z-index:2;
  width:min(900px,calc(100% - 32px));
  margin:40px auto 0;
  text-align:center;
  padding:18px 0 68px;
}

.mini-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
  color:#f4eef6;
  font-size:11px;
  letter-spacing:.17em;
  font-weight:900;
  box-shadow:0 0 20px rgba(255,79,199,.08);
}
.icon-mini{
  display:inline-flex;
  width:14px;height:14px;
}
.icon-mini .social-svg{width:14px;height:14px}

.avatar-stage{display:flex;justify-content:center}

.athlete-card{
  position:relative;
  width:220px;
  height:190px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    linear-gradient(135deg, rgba(255,255,255,.04), transparent 42%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 16px 44px rgba(0,0,0,.26),
    0 0 30px rgba(255,79,199,.08);
  backdrop-filter:blur(18px);
}
.small-card{
  width:200px;
  height:174px;
}
.card-corner{
  position:absolute;
  width:28px;
  height:28px;
  border:2px solid rgba(255,255,255,.24);
}
.card-corner.tl{top:12px;left:12px;border-right:0;border-bottom:0;border-radius:12px 0 0 0}
.card-corner.tr{top:12px;right:12px;border-left:0;border-bottom:0;border-radius:0 12px 0 0}
.card-corner.bl{bottom:12px;left:12px;border-right:0;border-top:0;border-radius:0 0 0 12px}
.card-corner.br{bottom:12px;right:12px;border-left:0;border-top:0;border-radius:0 0 12px 0}

.avatar-ring{
  width:146px;height:146px;
  border-radius:999px;
  padding:7px;
  background:linear-gradient(135deg, #ffffff 0%, #cfd4df 26%, #ff86dc 58%, #9ea6b3 100%);
  box-shadow:
    0 0 18px rgba(255,79,199,.18),
    0 0 46px rgba(255,255,255,.08);
  position:relative;
  overflow:hidden;
  animation:ringPulse 3s ease-in-out infinite alternate;
}
.small-ring{width:126px;height:126px}
@keyframes ringPulse{
  from{
    transform:scale(1);
    box-shadow:
      0 0 18px rgba(255,79,199,.16),
      0 0 38px rgba(255,255,255,.08);
  }
  to{
    transform:scale(1.035);
    box-shadow:
      0 0 34px rgba(255,79,199,.28),
      0 0 56px rgba(255,255,255,.12);
  }
}

.avatar-ring:before{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.26);
  box-shadow:
    inset 0 0 14px rgba(255,255,255,.14),
    0 0 10px rgba(255,255,255,.08);
  opacity:.7;
  animation:steelFlicker 2.8s ease-in-out infinite alternate;
  z-index:2;
  pointer-events:none;
}
.avatar-ring:after{
  content:"";
  position:absolute;
  inset:-15%;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.58),transparent);
  transform:translateX(-140%) rotate(18deg);
  animation:shine 4.6s ease-in-out infinite;
  z-index:3;
  pointer-events:none;
}
@keyframes steelFlicker{
  0%,100%{opacity:.42}
  38%{opacity:.82}
  58%{opacity:.28}
  75%{opacity:.64}
}
@keyframes shine{
  0%,54%{transform:translateX(-140%) rotate(18deg)}
  82%,100%{transform:translateX(140%) rotate(18deg)}
}

.avatar-photo{
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 30%;
  border-radius:50%;
  display:block;
  filter:saturate(1.02) contrast(1.06);
  transition:transform .45s ease;
}
.avatar-ring:hover .avatar-photo{transform:scale(1.08)}

.eyebrow{
  color:#ffd3f2;
  font-size:12px;
  letter-spacing:.42em;
  font-weight:900;
  text-transform:uppercase;
}
h1{
  margin:14px 0 6px;
  font-size:clamp(54px,8vw,98px);
  line-height:.9;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:
    0 0 8px rgba(255,79,199,.18),
    0 0 18px rgba(255,255,255,.08),
    0 12px 32px rgba(0,0,0,.35);
}
.tagline{
  margin:22px auto 0;
  color:var(--muted);
  font-size:clamp(20px,3vw,26px);
  line-height:1.4;
  font-weight:800;
}

.links{
  width:min(780px,100%);
  margin:50px auto 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.link-card{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 22px;
  border-radius:22px;
  color:#fff;
  text-decoration:none;
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 14px 34px rgba(0,0,0,.22);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  position:relative;
  overflow:hidden;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.link-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,149,221,.34);
  background:rgba(255,255,255,.085);
  box-shadow:
    0 0 22px rgba(255,79,199,.10),
    0 16px 38px rgba(0,0,0,.24);
}
.link-card:before{
  content:"";
  position:absolute;
  inset:0 auto 0 -80%;
  width:60%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);
  transition:left .72s ease;
}
.link-card:hover:before{left:125%}

.left{display:flex;align-items:center;gap:12px;font-weight:900;font-size:19px}
.icon{
  width:38px;height:38px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,79,199,.14));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 0 12px rgba(255,255,255,.08);
}
.instagram{background:linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,79,199,.18))}
.xicon{background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(170,176,189,.18))}
.vip{background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,79,199,.22))}

.social-svg{
  width:18px;height:18px;
  fill:none;stroke:#fff;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.social-svg.fill{fill:#fff;stroke:none}

.link-card small{
  color:#f1e3f0;
  font-size:13px;
}
.featured{
  background:linear-gradient(135deg,rgba(255,79,199,.14),rgba(255,255,255,.07));
}

.vip-cta{
  grid-column:1 / -1;
  min-height:82px;
  background:
    radial-gradient(circle at 12% 50%,rgba(255,255,255,.08),transparent 24%),
    linear-gradient(135deg,rgba(255,79,199,.36),rgba(255,255,255,.10));
  border-color:rgba(255,149,221,.28);
  box-shadow:
    0 0 18px rgba(255,79,199,.12),
    0 18px 46px rgba(0,0,0,.26);
}
.vip-cta:hover{
  box-shadow:
    0 0 26px rgba(255,79,199,.18),
    0 20px 48px rgba(0,0,0,.28);
}

.footer{
  margin-top:30px;
  color:rgba(255,255,255,.52);
  font-size:12px;
  letter-spacing:.10em;
  font-weight:800;
}

.vip-hero{padding-top:18px}
.vip-box{
  width:min(540px,100%);
  margin:42px auto 0;
  padding:28px;
  border-radius:30px;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(20px);
  box-shadow:
    0 0 22px rgba(255,79,199,.08),
    0 24px 80px rgba(0,0,0,.28);
  text-align:left;
}
.vip-mini{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  padding:8px 12px;
  border-radius:999px;
  color:#ffe4f6;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  font-size:11px;
  letter-spacing:.16em;
  font-weight:900;
}
.check-row{
  display:flex;
  align-items:center;
  gap:13px;
  padding:16px;
  margin-bottom:16px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13);
  color:#fff0fb;
  font-weight:900;
}
.check-row input{
  width:21px;height:21px;
  accent-color:var(--pink);
}
.vip-button{
  width:100%;
  min-height:68px;
  display:flex;
  justify-content:center;
  align-items:center;
  border:0;
  cursor:pointer;
  border-radius:20px;
  color:#fff;
  background:linear-gradient(135deg,#ff64cd,#cfd4df 55%,#8b909d);
  font-weight:900;
  font-size:18px;
  box-shadow:0 0 24px rgba(255,79,199,.12);
  position:relative;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.vip-button:hover{
  transform:translateY(-2px);
  box-shadow:0 0 34px rgba(255,79,199,.18);
}
.vip-button:before{
  content:"";
  position:absolute;
  inset:0 auto 0 -80%;
  width:60%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
  transform:skewX(-18deg);
  transition:left .72s ease;
}
.vip-button:hover:before{left:125%}

.notice{
  margin:16px 0 0;
  color:#e7d7e7;
  font-size:13px;
  line-height:1.55;
  text-align:center;
}

.stage{
  opacity:0;
  transform:translateY(20px);
  animation:stageIn .78s ease forwards;
}
.delay-1{animation-delay:.12s}.delay-2{animation-delay:.24s}.delay-3{animation-delay:.36s}.delay-4{animation-delay:.48s}
.delay-5{animation-delay:.60s}.delay-6{animation-delay:.72s}.delay-7{animation-delay:.84s}.delay-8{animation-delay:.96s}
.delay-9{animation-delay:1.06s}
@keyframes stageIn{to{opacity:1;transform:translateY(0)}}

@media(max-width:720px){
  .hero{width:min(100% - 28px,900px);margin-top:24px}
  .mirror-panel{width:calc(100vw - 24px);height:90vh;border-radius:28px}
  .athlete-card{width:184px;height:162px}
  .small-card{width:168px;height:148px}
  .avatar-ring{width:118px;height:118px}
  .small-ring{width:106px;height:106px}
  .eyebrow{font-size:10px;letter-spacing:.32em}
  h1{font-size:clamp(46px,12.2vw,64px);letter-spacing:.04em}
  .tagline{font-size:20px}
  .links{grid-template-columns:1fr;margin-top:38px}
  .vip-cta{grid-column:auto}
  .link-card{min-height:70px}
  .left{font-size:18px}
  .icon{width:36px;height:36px}
  .link-card small{font-size:12px}
  .floor-grid{height:30vh}
  .dumbbell{width:110px;height:20px;opacity:.08}
}

@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{animation:none !important;transition:none !important}
  .stage{opacity:1;transform:none}
}