:root{
  --bg:#050712;
  --bg2:#11102A;
  --bg3:#211B45;

  --card:rgba(33,27,69,.72);

  --lavande:#6D5BBB;
  --lavande-claire:#7360BC;
  --argent-violet:#A190D7;
  --argent-clair:#CFC7E9;

  --violet:#2F2462;
  --violet-fonce:#211B45;
  --violet-lumineux:#433893;
  --violet-principal:#52478D;

  --magenta:#A93877;

  --text:#F7F5FF;
  --muted:#CFC7E9;

  --border:rgba(255,255,255,.06);
}

*{
  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:var(--bg3);

  position:relative;
}

body::before{
  content:"";

  position:absolute;
  inset:0;

  background:url('banner.png') center/cover no-repeat;

  filter:blur(8px);

  z-index:0;
}

body::after{
  content:"";

  position:absolute;
  inset:0;

  background:rgba(5,7,18,.55);

  z-index:1;
}

.card{

  position:relative;
  z-index:3;

  width:min(520px,92vw);

  padding:42px;

  border-radius:28px;

  text-align:center;

  background:var(--card);

  border:1px solid rgba(109,91,187,.2);

  backdrop-filter:blur(22px);

  box-shadow:
    0 18px 55px rgba(0,0,0,.45),
    0 0 45px rgba(109,91,187,.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(109,91,187,.55),
    0 0 55px rgba(67,56,147,.28);
}

h1{

  font-size:30px;

  font-weight:800;

  letter-spacing:-0.7px;

  margin-bottom:10px;

  color:var(--argent-violet);

  text-shadow:
    0 0 18px rgba(109,91,187,.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(--lavande) 0%,
      var(--violet-principal) 50%,
      var(--violet-lumineux) 100%
    );

  box-shadow:
    0 14px 35px rgba(67,56,147,.25);

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

.btn:hover{

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

  box-shadow:
    0 22px 45px rgba(109,91,187,.28),
    0 0 35px rgba(169,56,119,.20);
}

.btn:active{

  transform:scale(.98);
}

.success h1{

  color:var(--lavande-claire);

  text-shadow:
    0 0 15px rgba(109,91,187,.45);
}

.success .btn{

  background:
    linear-gradient(
      135deg,
      var(--lavande-claire),
      var(--lavande)
    );

  color:var(--text);

  box-shadow:
    0 14px 35px rgba(109,91,187,.28);
}

.error h1{

  color:var(--magenta);

  text-shadow:
    0 0 15px rgba(169,56,119,.35);
}

.error .btn{

  background:var(--magenta);

  color:var(--text);

  box-shadow:
    0 14px 35px rgba(169,56,119,.30);
}