:root{
  --bg:#070811;
  --bg2:#0b0d19;

  --card:rgba(15,17,30,.88);

  --line:rgba(255,255,255,.085);

  --text:#f7f7fb;
  --muted:#9ca3b8;

  --purple:#875cff;
  --purple2:#b06cff;
  --cyan:#45e4d0;

  --danger:#ff7188;

  --shadow:
    0 30px 100px rgba(0,0,0,.55);
}

*{
  box-sizing:border-box;
}

html{
  min-height:100%;
}

body{
  margin:0;
  min-height:100vh;

  font-family:
    "Plus Jakarta Sans",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color:var(--text);

  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(111,74,220,.25),
      transparent 32%
    ),
    radial-gradient(
      circle at 85% 85%,
      rgba(34,185,173,.13),
      transparent 30%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(139,92,246,.09),
      transparent 25%
    ),
    linear-gradient(
      145deg,
      #06070e,
      #090b15 55%,
      #070912
    );

  display:flex;
  align-items:center;
  justify-content:center;

  padding:
    max(24px, env(safe-area-inset-top))
    18px
    max(24px, env(safe-area-inset-bottom))
    18px;

  overflow-x:hidden;
}

body::before{
  content:"";

  position:fixed;
  width:280px;
  height:280px;

  top:-120px;
  left:-100px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(145,93,255,.18),
      transparent 68%
    );

  filter:blur(10px);

  pointer-events:none;
}

body::after{
  content:"";

  position:fixed;
  width:360px;
  height:360px;

  right:-170px;
  bottom:-180px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(45,210,191,.11),
      transparent 68%
    );

  pointer-events:none;
}

.page{
  width:100%;
  max-width:520px;

  margin:auto;

  position:relative;
  z-index:2;
}

.brand{
  display:flex;
  align-items:center;

  gap:13px;

  margin:
    0
    0
    18px
    3px;
}

.logo{
  width:52px;
  height:52px;

  flex:0 0 52px;

  display:grid;
  place-items:center;

  border-radius:17px;

  background:
    linear-gradient(
      145deg,
      #8558ff,
      #b66bff
    );

  box-shadow:
    0 15px 45px
    rgba(126,86,255,.28);

  font-size:27px;
  font-weight:900;

  position:relative;
}

.logo::after{
  content:"✦";

  position:absolute;

  right:5px;
  top:3px;

  font-size:11px;

  color:white;
  opacity:.85;
}

.brand-title{
  font-size:18px;
  font-weight:850;

  letter-spacing:-.02em;
}

.brand-sub{
  margin-top:3px;

  font-size:12px;

  color:var(--muted);

  letter-spacing:.02em;
}

.card{
  width:100%;

  border:
    1px solid
    rgba(255,255,255,.09);

  background:
    linear-gradient(
      145deg,
      rgba(20,22,38,.91),
      rgba(11,13,24,.91)
    );

  backdrop-filter:
    blur(24px);

  -webkit-backdrop-filter:
    blur(24px);

  border-radius:28px;

  padding:30px;

  box-shadow:var(--shadow);

  position:relative;

  overflow:hidden;
}

.card::before{
  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.045),
      transparent 25%,
      transparent 70%,
      rgba(255,255,255,.02)
    );
}

.card::after{
  content:"";

  position:absolute;

  top:-100px;
  right:-100px;

  width:220px;
  height:220px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(132,91,255,.08),
      transparent 70%
    );

  pointer-events:none;
}

.steps{
  display:flex;

  gap:7px;

  margin-bottom:30px;

  position:relative;
  z-index:1;
}

.bar{
  height:4px;

  flex:1;

  border-radius:99px;

  background:#292c3e;

  transition:.3s;
}

.bar.on{
  background:
    linear-gradient(
      90deg,
      var(--purple),
      var(--cyan)
    );

  box-shadow:
    0 0 14px
    rgba(116,92,255,.25);
}

.step{
  display:none;

  position:relative;

  z-index:1;
}

.step.active{
  display:block;

  animation:
    fadeUp
    .3s
    ease;
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(10px);
  }

  to{
    opacity:1;
    transform:none;
  }
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:8px;

  color:var(--cyan);

  font-size:11px;

  font-weight:850;

  letter-spacing:.18em;

  text-transform:uppercase;
}

.eyebrow::before{
  content:"";

  width:7px;
  height:7px;

  border-radius:50%;

  background:var(--cyan);

  box-shadow:
    0 0 12px
    rgba(69,228,208,.6);
}

.title{
  margin:
    10px
    0
    11px;

  font-size:
    clamp(
      27px,
      7vw,
      34px
    );

  line-height:1.08;

  letter-spacing:-.04em;
}

.desc{
  margin:
    0
    25px;

  color:var(--muted);

  font-size:14px;

  line-height:1.7;
}

label{
  display:block;

  margin-bottom:8px;

  color:#cfd3df;

  font-size:11px;

  font-weight:850;

  letter-spacing:.08em;
}

input{
  width:100%;

  height:56px;

  padding:
    0
    16px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:16px;

  background:
    rgba(5,7,15,.72);

  color:var(--text);

  outline:none;

  font-size:15px;

  transition:.2s;
}

input::placeholder{
  color:#687086;
}

input:focus{
  border-color:
    rgba(135,92,255,.65);

  box-shadow:
    0 0 0 4px
    rgba(135,92,255,.09);
}

button{
  width:100%;

  min-height:56px;

  margin-top:13px;

  border:0;

  border-radius:16px;

  color:white;

  font-size:14px;

  font-weight:850;

  background:
    linear-gradient(
      105deg,
      #8257ff,
      #657fff
    );

  box-shadow:
    0 13px 30px
    rgba(101,91,255,.20);

  cursor:pointer;

  transition:
    transform .2s,
    filter .2s,
    opacity .2s;
}

button:hover{
  transform:translateY(-1px);

  filter:brightness(1.06);
}

button:active{
  transform:translateY(0);
}

button:disabled{
  opacity:.55;

  cursor:wait;

  transform:none;
}

.msg{
  display:none;

  margin-top:16px;

  padding:14px 15px;

  border-radius:15px;

  font-size:13px;

  line-height:1.6;

  position:relative;

  z-index:2;
}

.msg.show{
  display:block;
}

.msg.ok{
  background:
    rgba(24,103,92,.16);

  border:
    1px solid
    rgba(69,228,208,.25);

  color:#baf7ed;
}

.msg.err{
  background:
    rgba(130,32,51,.16);

  border:
    1px solid
    rgba(255,92,120,.28);

  color:#ffc2cd;
}

.profile,
.video{
  margin-top:17px;

  padding:16px;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:17px;

  background:
    rgba(4,6,13,.48);
}

.row{
  display:flex;

  justify-content:space-between;

  align-items:flex-start;

  gap:16px;

  padding:8px 0;

  font-size:13px;

  line-height:1.5;
}

.row + .row{
  border-top:
    1px solid
    rgba(255,255,255,.045);
}

.row span{
  color:var(--muted);

  flex:0 0 auto;
}

.row b{
  text-align:right;

  overflow-wrap:anywhere;
}

.link{
  color:#86e4ff;

  text-decoration:none;

  word-break:break-all;

  text-align:right;
}

.link:hover{
  text-decoration:underline;
}

.success{
  text-align:center;

  padding:
    10px
    0
    4px;
}

.check{
  width:70px;
  height:70px;

  margin:
    0
    auto
    18px;

  display:grid;
  place-items:center;

  border-radius:22px;

  background:
    linear-gradient(
      145deg,
      #845cff,
      #45d7c4
    );

  font-size:34px;
  font-weight:900;

  box-shadow:
    0 18px 45px
    rgba(105,89,255,.25);
}

.note{
  margin-top:22px;

  padding-top:17px;

  border-top:
    1px solid
    rgba(255,255,255,.055);

  color:#626b80;

  text-align:center;

  font-size:11px;

  line-height:1.6;
}

.note span{
  color:#80889c;
}

@media(max-width:520px){

  body{
    padding:
      max(18px, env(safe-area-inset-top))
      14px
      max(18px, env(safe-area-inset-bottom))
      14px;
  }

  .page{
    max-width:480px;
  }

  .brand{
    margin-bottom:14px;
  }

  .logo{
    width:47px;
    height:47px;
    flex-basis:47px;
    border-radius:15px;
  }

  .card{
    padding:24px 20px 21px;

    border-radius:25px;
  }

  .steps{
    margin-bottom:25px;
  }

  .title{
    font-size:29px;
  }

  .desc{
    font-size:13.5px;
  }

  input,
  button{
    min-height:55px;
  }
}

@media(max-height:700px){

  body{
    align-items:flex-start;

    padding-top:
      max(18px, env(safe-area-inset-top));
  }

  .page{
    margin-top:10px;
  }
}