:root{
  /* Background */
  --bg:#05142f;
  --bg2:#0a2d68;
  --bg3:#09101f;

  /* Card */
  --card:rgba(8,20,48,.72);

  /* Primary */
  --cyan:#2dd8ff;
  --cyan2:#7ceeff;

  --blue:#2f74ff;
  --blue2:#4f96ff;

  --purple:#8753ff;
  --purple2:#b76cff;

  --pink:#ff4fe5;
  --pink2:#ff8af6;

  --teal:#45ffe3;

  /* Status */
  --success:#45ffc3;
  --success2:#26dca0;

  --error:#ff5c93;
  --error2:#ff8db5;

  /* Text */
  --text:#ffffff;
  --muted:#bddcff;

  /* Border */
  --border:rgba(255,255,255,.12);
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,
body{
  width:100%;
  height:100%;
}

body{
  font-family:Inter,system-ui,sans-serif;

  overflow:hidden;

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

  color:var(--text);

  background:
    radial-gradient(circle at top,
      rgba(46,216,255,.32) 0%,
      rgba(47,116,255,.18) 25%,
      transparent 55%
    ),
    linear-gradient(
      180deg,
      var(--bg2) 0%,
      var(--bg) 45%,
      var(--bg3) 100%
    );

  position:relative;
}

/* Halo lumineux */

body::before{
  content:"";

  position:absolute;

  width:900px;
  height:900px;

  background:
    radial-gradient(circle,
      rgba(45,216,255,.28) 0%,
      rgba(135,83,255,.16) 35%,
      rgba(255,79,229,.08) 55%,
      transparent 75%
    );

  filter:blur(100px);

  animation:float 10s ease-in-out infinite;

  z-index:0;
}

/* Texture */

body::after{
  content:"";

  position:absolute;
  inset:0;

  background-image:
    radial-gradient(
      rgba(255,255,255,.06) 1px,
      transparent 1px
    );

  background-size:40px 40px;

  opacity:.18;

  z-index:0;
}

@keyframes float{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-30px);
  }

  100%{
    transform:translateY(0px);
  }

}

.card{

  position:relative;
  z-index:2;

  width:min(520px,92vw);

  padding:42px;

  border-radius:28px;

  text-align:center;

  background:var(--card);

  border:1px solid rgba(124,238,255,.16);

  backdrop-filter:blur(22px);

  box-shadow:
    0 18px 55px rgba(0,0,0,.45),
    0 0 45px rgba(45,216,255,.12),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.logo{

  width:92px;
  height:92px;

  object-fit:cover;

  border-radius:22px;

  margin-bottom:20px;

  box-shadow:
    0 0 25px rgba(45,216,255,.55),
    0 0 55px rgba(135,83,255,.28);
}

h1{

  font-size:30px;

  font-weight:800;

  letter-spacing:-0.7px;

  margin-bottom:10px;

  color:var(--cyan2);

  text-shadow:
    0 0 18px rgba(124,238,255,.45);
}

p{

  color:var(--muted);

  font-size:15px;

  line-height:1.7;

  margin-bottom:28px;
}

.btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-width:200px;

  padding:15px 30px;

  border-radius:18px;

  text-decoration:none;

  font-size:15px;

  font-weight:800;

  color:white;

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

  background:
    linear-gradient(
      135deg,
      var(--cyan) 0%,
      var(--blue2) 40%,
      var(--purple) 72%,
      var(--pink) 100%
    );

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

  transition:
    transform .25s,
    box-shadow .25s;
}

.btn:hover{

  transform:
    translateY(-4px)
    scale(1.04);

  box-shadow:
    0 22px 45px rgba(45,216,255,.28),
    0 0 35px rgba(255,79,229,.20);
}

.btn:active{

  transform:scale(.98);
}

/* SUCCESS */

.success h1{

  color:var(--teal);

  text-shadow:
    0 0 15px rgba(69,255,227,.45);
}

.success .btn{

  background:
    linear-gradient(
      135deg,
      var(--teal),
      var(--cyan)
    );

  color:#042238;

  box-shadow:
    0 14px 35px rgba(69,255,227,.28);
}

/* ERROR */

.error h1{

  color:var(--error);

  text-shadow:
    0 0 15px rgba(255,92,147,.35);
}

.error .btn{

  background:
    linear-gradient(
      135deg,
      var(--error),
      var(--pink)
    );

  color:white;

  box-shadow:
    0 14px 35px rgba(255,92,147,.30);
}