:root{
  --text:#fff;
  --muted:#d6d0dc;
  --pink:#ff4fc8;
  --hot-pink:#ff2ca8;
  --violet:#8f5dff;
  --cyan:#58f7ff;
  --glass:rgba(13,9,20,.72);
  --glass-light:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.17);
}
*{box-sizing:border-box}
html{min-height:100%;background:#08050d}
body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#08050d;
}
.background{
  position:fixed;
  inset:-40px;
  background:
    linear-gradient(180deg,rgba(8,5,13,.35),rgba(8,5,13,.82)),
    url("assets/background.jpg") center/cover no-repeat;
  filter:saturate(1.15);
  transform:scale(1.05);
}
.grain{
  position:fixed;
  inset:0;
  opacity:.16;
  pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,.55) .55px, transparent .65px);
  background-size:5px 5px;
  mix-blend-mode:soft-light;
}
.orb{
  position:fixed;
  border-radius:50%;
  filter:blur(70px);
  opacity:.42;
  pointer-events:none;
}
.orb-a{width:290px;height:290px;background:var(--hot-pink);top:-80px;left:-100px}
.orb-b{width:320px;height:320px;background:var(--violet);right:-130px;bottom:4%}
.orb-c{width:180px;height:180px;background:var(--cyan);right:7%;top:18%;opacity:.23}
.page-shell{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:28px 18px;
}
.card{
  width:min(100%,440px);
  position:relative;
  overflow:hidden;
  padding:31px 24px 24px;
  text-align:center;
  border:1px solid var(--border);
  border-radius:32px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),
    var(--glass);
  box-shadow:
    0 30px 90px rgba(0,0,0,.66),
    inset 0 1px 0 rgba(255,255,255,.11);
  backdrop-filter:blur(24px) saturate(1.25);
}
.shine{
  position:absolute;
  width:280px;
  height:100px;
  left:-80px;
  top:-60px;
  transform:rotate(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  filter:blur(8px);
}
.profile-wrap{
  position:relative;
  display:inline-block;
}
.profile{
  width:150px;
  height:150px;
  object-fit:cover;
  object-position:center;
  border-radius:50%;
  padding:4px;
  background:linear-gradient(135deg,var(--pink),var(--violet) 50%,var(--cyan));
  box-shadow:
    0 0 0 8px rgba(255,255,255,.045),
    0 0 28px rgba(255,79,200,.55),
    0 0 65px rgba(88,247,255,.14);
}
.online-dot{
  position:absolute;
  width:19px;
  height:19px;
  right:10px;
  bottom:10px;
  border-radius:50%;
  background:#66ff9a;
  border:4px solid #17101e;
  box-shadow:0 0 14px rgba(102,255,154,.9);
}
h1{
  margin:20px 0 7px;
  font-size:clamp(2.25rem,8vw,3.45rem);
  line-height:1;
  letter-spacing:-.06em;
  font-weight:800;
}
.neon-z{
  display:inline-block;
  margin:0 .02em;
  font-family:Orbitron,Inter,sans-serif;
  color:#fff;
  text-shadow:
    0 0 3px #fff,
    0 0 9px var(--cyan),
    0 0 20px var(--cyan),
    0 0 34px var(--pink),
    0 0 55px var(--pink);
  animation:pulse 2s ease-in-out infinite alternate;
}
@keyframes pulse{
  from{transform:scale(1);filter:brightness(1)}
  to{transform:scale(1.07);filter:brightness(1.35)}
}
.tagline{
  margin:0 auto 27px;
  max-width:310px;
  color:var(--muted);
  font-size:.98rem;
  line-height:1.5;
}
.links{display:grid;gap:14px}
.button{
  min-height:66px;
  display:grid;
  grid-template-columns:34px 1fr auto;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  color:#fff;
  text-decoration:none;
  text-align:left;
  border:1px solid var(--border);
  border-radius:19px;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.button:hover,.button:focus-visible{
  transform:translateY(-2px) scale(1.006);
  border-color:rgba(255,255,255,.34);
}
.button-primary{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(255,44,168,.98),rgba(143,93,255,.98) 62%,rgba(88,247,255,.82));
  border-color:transparent;
  box-shadow:
    0 16px 36px rgba(255,44,168,.30),
    inset 0 1px 0 rgba(255,255,255,.28);
}
.button-primary::after{
  content:"";
  position:absolute;
  inset:-80% -35%;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.34) 50%,transparent 58%);
  transform:translateX(-45%) rotate(8deg);
  animation:sweep 3.6s ease-in-out infinite;
}
@keyframes sweep{
  0%,58%{transform:translateX(-55%) rotate(8deg)}
  100%{transform:translateX(60%) rotate(8deg)}
}
.button-secondary{
  background:rgba(255,255,255,.075);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.button-icon{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(255,255,255,.13);
  font-size:1.15rem;
}
.button-copy{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.button-copy strong{
  font-size:.96rem;
  letter-spacing:.015em;
}
.button-copy small{
  color:rgba(255,255,255,.78);
  font-size:.73rem;
}
.free-badge{
  position:relative;
  z-index:2;
  padding:7px 9px;
  border-radius:999px;
  color:#111;
  background:#fff;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.06em;
  box-shadow:0 6px 18px rgba(0,0,0,.2);
}
.arrow{font-size:1.1rem;opacity:.78}
.trust-row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:7px;
  margin:22px 0 8px;
  color:#b9b0c3;
  font-size:.72rem;
}
.dot{opacity:.55}
footer{
  color:#80768b;
  font-size:.7rem;
}
@media (max-width:420px){
  .card{padding:27px 18px 22px;border-radius:26px}
  .profile{width:136px;height:136px}
  .button{grid-template-columns:32px 1fr auto}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}


/* v4 responsive layout fixes */
html, body {
  width: 100%;
  min-height: 100%;
}

body {
  overflow-y: auto;
}

.page-shell {
  min-height: 100svh;
  align-items: start;
  padding-top: clamp(18px, 4vh, 38px);
  padding-bottom: clamp(18px, 4vh, 38px);
}

.card {
  margin: auto;
  max-height: none;
}

h1 {
  font-size: clamp(2rem, 6.2vw, 3.05rem);
  letter-spacing: -0.055em;
  white-space: nowrap;
}

.tagline {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-bottom: 22px;
}

.links {
  gap: 12px;
}

.button {
  min-height: 62px;
}

.trust-row {
  margin-top: 18px;
}

@media (max-height: 780px) and (min-width: 700px) {
  .page-shell {
    place-items: start center;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .card {
    padding: 22px 22px 18px;
    border-radius: 26px;
  }

  .profile {
    width: 118px;
    height: 118px;
  }

  h1 {
    margin-top: 15px;
    font-size: 2.55rem;
  }

  .tagline {
    margin-bottom: 18px;
    font-size: .92rem;
  }

  .button {
    min-height: 58px;
  }

  .trust-row {
    margin-top: 14px;
  }
}

@media (max-width: 430px) {
  .page-shell {
    padding: 16px 12px 22px;
  }

  .card {
    width: 100%;
    padding: 24px 16px 20px;
  }

  h1 {
    font-size: clamp(1.95rem, 10vw, 2.65rem);
  }

  .button-copy strong {
    font-size: .9rem;
  }

  .button-copy small {
    font-size: .69rem;
  }
}