* {
  box-sizing: border-box;
}

:root {
  --bg: #070711;
  --panel: #11111d;
  --text: #f8fafc;
  --muted: #a7aec0;
  --border: rgba(255,255,255,.09);

  --purple: #8b5cf6;
  --purple-dark: #6d28d9;
  --blue: #2563eb;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Arial, sans-serif;
  color: var(--text);

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(139,92,246,.35),
      transparent 35%
    ),
    radial-gradient(
      circle at 85% 70%,
      rgba(37,99,235,.25),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #070711,
      #0c0c18 50%,
      #080811
    );
}


button,
input {
  font: inherit;
}


/* Основной контейнер */

.page-shell {
  min-height:100vh;

  display:grid;
  grid-template-columns:
1.25fr
0.75fr;
}


/* Левая часть */

.hero {

  position:relative;

  display:flex;
  flex-direction:column;

  padding:
    45px
    7vw
    60px;


  border-right:
    1px solid var(--border);


  overflow:hidden;


  background-image:
    linear-gradient(
      90deg,
      rgba(7,7,17,.95) 0%,
      rgba(7,7,17,.65) 45%,
      rgba(7,7,17,.25) 100%
    ),
    url("images/referral-gamer.png");


  background-size:cover;


  background-position:center;
}


.hero::after {

  content:"";

  position:absolute;

  width:600px;
  height:600px;

  right:-250px;
  bottom:-250px;

  background:
    radial-gradient(
      circle,
      rgba(139,92,246,.25),
      transparent 65%
    );

  pointer-events:none;
}



/* Логотип */

.brand {

  position:relative;
  z-index:2;
}


.brand-logo {

  width:260px;

  height:auto;

  object-fit:contain;
}



/* Контент */

.hero-content {

  max-width:720px;

  padding-top:90px;

  position:relative;
  z-index:2;
}



.eyebrow,
.card-kicker {

  display:inline-flex;

  padding:
    8px 14px;

  border-radius:999px;

  border:
    1px solid rgba(139,92,246,.35);

  background:
    rgba(139,92,246,.12);

  color:#c4b5fd;

  font-size:12px;

  font-weight:800;

  text-transform:uppercase;

  letter-spacing:.1em;
}



h1 {

  margin:
    24px 0 22px;

  font-size:
    clamp(44px,5vw,72px);

  line-height:1.1;

  letter-spacing:-.05em;

}


h1 span {

    background: linear-gradient(
        135deg,
        #c4b5fd,
        #38bdf8
    );

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;
}



.hero-text {

  max-width:620px;

  margin:0;

  color:#d1d5e0;

  font-size:
    clamp(18px,2vw,23px);

  line-height:1.8;
}




/* Правая часть */

.registration-panel {

  display:grid;

  place-items:center;

  padding:30px;
}



.registration-card {

  width:min(100%,440px);

  padding:30px;

  background:
    linear-gradient(
      180deg,
      rgba(24,24,39,.95),
      rgba(12,12,22,.95)
    );

  border:
    1px solid var(--border);

  border-radius:28px;

  box-shadow:
    0 30px 80px rgba(0,0,0,.45);
}



h2 {

  margin:
    18px 0 12px;

  font-size:
    clamp(30px,4vw,42px);

  line-height:1.05;

}



.card-description {

  margin:
    0 0 30px;

  color:var(--muted);

  line-height:1.6;

  font-size:15px;

}



label {

  display:block;

  margin-bottom:9px;

  font-size:14px;

  font-weight:700;

}



.label-row {

  display:flex;

  justify-content:space-between;

  align-items:center;

}



.label-row span {

  margin-bottom:9px;

  color:#7f8799;

  font-size:12px;

}



input {

  width:100%;

  height:52px;

  margin-bottom:20px;

  padding:0 16px;


  background:
    rgba(255,255,255,.05);


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


  border-radius:15px;


  color:white;

  font-size:17px;

}



input:focus {

  outline:none;

  border-color:
    rgba(139,92,246,.8);

  box-shadow:
    0 0 0 4px rgba(139,92,246,.15);
}



/* Кнопка регистрации */

#registerButton {

  width:100%;

  min-height:54px;

  margin-top:8px;


  border:0;

  border-radius:16px;


  background:
    linear-gradient(
      135deg,
      #8b5cf6,
      #6d28d9 55%,
      #2563eb
    );


  color:white;


  font-weight:800;

  cursor:pointer;
}



#registerButton:disabled {

  opacity:.7;

  cursor:wait;

}



.button-loader {

  display:none;

  width:22px;

  height:22px;

  border:
    3px solid rgba(255,255,255,.3);

  border-top-color:white;

  border-radius:50%;

  animation:
    spin .8s linear infinite;

}



.is-loading .button-text {

  display:none;

}


.is-loading .button-loader {

  display:block;

}



@keyframes spin {

  to {
    transform:rotate(360deg);
  }

}



/* Сообщения */

.form-message {

  min-height:22px;

  margin-top:18px;

  font-size:14px;

  font-weight:700;

}



.form-message.success,
.form-message.error {

  padding:13px 15px;

  border-radius:13px;

}



.form-message.success {

  background:
    rgba(34,197,94,.1);

  color:#86efac;

}



.form-message.error {

  background:
    rgba(239,68,68,.1);

  color:#fca5a5;

}



/* Вход в клуб */

.login-block {

  margin-top:25px;

  text-align:center;

}


.login-block p {

  margin:
    0 0 12px;

  color:var(--muted);

  font-size:14px;

}



.login-button {

  width:100%;

  height:50px;
margin-bottom: 18px;

  border-radius:14px;


  border:
    1px solid rgba(139,92,246,.65);


  background:
    rgba(139,92,246,.10);


  color:#ddd6fe;


  font-weight:700;


  cursor:pointer;

}



.login-button:hover {
  background: rgba(139, 92, 246, .20);
  box-shadow: 0 0 22px rgba(139, 92, 246, .18);

}



/* Подпись */

.privacy-note {

  margin-top:16px;

  color:#747c8f;

  font-size:11px;

  line-height:1.5;

  text-align:center;

}



/* Планшеты */

@media(max-width:980px){

  .page-shell {

    grid-template-columns:1fr;

  }


  .hero {

    border-right:0;

    border-bottom:
      1px solid var(--border);

    padding:
      30px 25px 45px;

  }


  .hero-content {

    padding-top:60px;

  }


  .registration-panel {

    padding:
      30px 20px 50px;

  }

}



/* Телефоны */

@media(max-width:680px){

  .brand-logo {

    width:170px;

  }


  h1 {

    font-size:46px;

  }


  .hero-image {

    height:220px;

  }


  .registration-card {

    padding:25px 20px;

  }

}


@media(max-width:420px){

  .hero {

    padding-inline:18px;

  }


  .registration-panel {

    padding-inline:12px;

  }


  h1 {

    font-size:40px;

  }

}