:root{
  --bg:#030b16;
  --bg2:#07182d;

  --card:rgba(8,18,35,0.72);

  --orange:#ff9f1c;
  --orange2:#ffbf47;

  --green:#41f28a;
  --green2:#7dffb0;

  --red:#ff6b6b;
  --red2:#ff9b9b;

  --yellow:#ffd54a;

  --text:#f4f7ff;
  --muted:#9cb2ca;

  --border:rgba(255,255,255,0.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:
    radial-gradient(circle at top,
      rgba(20,70,130,0.9) 0%,
      rgba(4,17,34,1) 45%
    ),
    linear-gradient(
      180deg,
      var(--bg) 0%,
      var(--bg2) 100%
    );

  position:relative;
}
body::before{
  content:"";

  position:absolute;

  width:700px;
  height:700px;

  background:
    radial-gradient(circle,
      rgba(255,159,28,0.16) 0%,
      rgba(255,159,28,0.08) 25%,
      transparent 70%
    );

  filter:blur(70px);

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

  z-index:0;
}

body::after{
  content:"";

  position:absolute;
  inset:0;

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

  background-size:42px 42px;

  opacity:.25;

  z-index:0;
}

@keyframes float{
  0%{
    transform:translateY(0px);
  }

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

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

.card{
  position:relative;
  z-index:2;

  width:min(520px,92vw);

  padding:42px;

  border-radius:24px;

  text-align:center;

  background:var(--card);

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

  backdrop-filter:blur(18px);

  box-shadow:
    0 10px 40px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.03);
}

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

  object-fit:cover;

  border-radius:18px;

  margin-bottom:18px;

  box-shadow:
    0 0 25px rgba(255,159,28,.28);
}

h1{
  font-size:28px;
  font-weight:800;

  margin-bottom:10px;

  letter-spacing:-0.5px;
}

p{
  color:var(--muted);

  font-size:15px;

  line-height:1.6;

  margin-bottom:26px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:180px;

  padding:14px 24px;

  border-radius:14px;

  text-decoration:none;

  font-weight:700;
  font-size:15px;

  transition:.25s ease;

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

.btn:hover{
  transform:
    translateY(-3px)
    scale(1.02);
}

/* SUCCESS */

.success h1{
  color:var(--green);
}

.success .btn{
  background:
    linear-gradient(
      135deg,
      var(--green),
      var(--green2)
    );

  color:#041122;

  box-shadow:
    0 10px 24px rgba(65,242,138,.22);
}

.success .btn:hover{
  box-shadow:
    0 14px 30px rgba(65,242,138,.34);
}

/* ERROR */

.error h1{
  color:var(--red);
}

.error .btn{
  background:
    linear-gradient(
      135deg,
      var(--red),
      var(--red2)
    );

  color:#111;

  box-shadow:
    0 10px 24px rgba(255,107,107,.22);
}

.error .btn:hover{
  box-shadow:
    0 14px 30px rgba(255,107,107,.34);
}