*{box-sizing:border-box}html,body{margin:0;padding:0}
body{
  font-family:Arial,Helvetica,sans-serif;
  min-height:100vh;
  color:#f4f7ff;
  background:
    radial-gradient(circle at top, rgba(43,91,194,.22), transparent 34%),
    linear-gradient(180deg, #060b18 0%, #091328 45%, #060b18 100%);
}
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.card{
  width:min(520px,100%);
  text-align:center;
  background:rgba(10,18,38,.76);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  padding:34px 24px;
  box-shadow:0 16px 40px rgba(0,0,0,.28);
  backdrop-filter:blur(8px);
}
.badge{
  display:inline-block;
  margin-bottom:16px;
  padding:7px 12px;
  border-radius:999px;
  font-size:13px;
  color:#d9e4ff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}
h1{
  margin:0 0 10px;
  font-size:clamp(34px,7vw,54px);
  line-height:1.05;
  font-weight:700;
}
p{
  margin:0 0 24px;
  font-size:clamp(16px,2.8vw,19px);
  color:rgba(244,247,255,.82);
}
.btn{
  border:0;
  border-radius:999px;
  padding:14px 24px;
  font-size:18px;
  font-weight:700;
  color:#fff;
  cursor:pointer;
  background:linear-gradient(90deg,#5f9df7 0%,#7c75f2 100%);
  box-shadow:0 8px 22px rgba(76,110,245,.25);
}
.btn:hover{filter:brightness(1.04)}
.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:20;
}
.modal.active{display:block}
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.5);
}
.modal-panel{
  position:relative;
  z-index:1;
  width:min(560px,calc(100% - 24px));
  margin:28px auto;
  background:#0b1633;
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  padding:24px;
  box-shadow:0 20px 60px rgba(0,0,0,.34);
}
.close{
  position:absolute;
  right:14px;
  top:10px;
  width:40px;
  height:40px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#fff;
  font-size:34px;
  line-height:1;
  cursor:pointer;
}
h2{
  margin:8px 0 22px;
  font-size:clamp(26px,5vw,40px);
  font-weight:700;
}
label{
  display:block;
  margin:0 0 8px;
  font-size:17px;
  color:#eef3ff;
}
input,textarea{
  width:100%;
  margin:0 0 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  padding:15px 16px;
  font-size:17px;
}
input{
  color:#111827;
  background:#e9eef7;
}
textarea{
  min-height:150px;
  resize:vertical;
  color:#eef3ff;
  background:#122142;
}
.status{
  margin-top:14px;
  min-height:24px;
  font-size:15px;
  color:#dbe7ff;
}
.status.error{color:#ffd3d3}
.status.success{color:#d6ffe0}
@media (max-width:600px){
  .card{padding:28px 18px;border-radius:18px}
  .modal-panel{margin:16px auto;padding:20px 16px;border-radius:20px}
  .btn{width:100%}
}