/* Minimal, clean aesthetic similar to the reference image */
:root{
  --bg: #e8f0ff;
  --card: #ffffff;
  --accent: #2d5bff;
  --accent-weak: #eef2ff;
  --text: #1e2a45;
  --muted: #6b7a99;
  --radius: 18px;
  --shadow: 0 20px 40px rgba(21, 35, 92, 0.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--text);
  background: radial-gradient(circle at 20% 20%, #f2f6ff, var(--bg) 60%);
}

.page{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:32px;
}

.card{
  width:min(920px, 92vw);
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:34px;
}

h1{
  font-size:28px;
  margin:0 0 18px;
  font-weight:600;
  color:#3954d1;
}

.grid.two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}

.field{
  display:flex;
  flex-direction:column;
  margin-bottom:14px;
}

label{
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}

input,textarea{
  width:100%;
  border:0;
  outline:none;
  background:var(--accent-weak);
  border-radius:12px;
  padding:14px 16px;
  font-size:14px;
  color:var(--text);
}

textarea{resize:vertical}

.actions{
  display:flex;
  justify-content:center;
  margin-top:8px;
}

.btn{
  border:0;
  padding:12px 28px;
  border-radius:999px;
  font-weight:600;
  font-size:15px;
  cursor:pointer;
  background: linear-gradient(180deg, #3b6bff, var(--accent));
  color:white;
  box-shadow: 0 8px 18px rgba(45, 91, 255, .3);
  transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
}

.btn:hover{ transform: translateY(-1px); box-shadow:0 10px 22px rgba(45, 91, 255, .35); }
.btn:active{ transform: translateY(0); box-shadow:0 6px 14px rgba(45, 91, 255, .25); }

.note{
  margin-top:12px;
  font-size:13px;
  color:#1b9c5a;
  text-align:left;
}

.credit{
  margin-top:16px;
  font-size:12px;
  color:var(--muted);
}

/* Honeypot hidden but accessible to bots */
.hp{
  position:absolute !important;
  left:-9999px !important;
  height:0 !important;
  width:0 !important;
  opacity:0 !important;
}

/* Responsive */
@media (max-width: 640px){
  .grid.two{ grid-template-columns: 1fr; }
  .card{ padding:22px; }
  h1{ font-size:24px; }
}
