@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Lato", sans-serif;
  background: linear-gradient(135deg,#0a0a0a,#1a1a1a);
  color: #f5f5f5;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  height:100vh;
}

.outer-box {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  animation: fadeIn 1s ease;
}

.inner-box {
  background: rgba(18,18,18,0.95);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(197,27,27,0.12), 0 0 20px rgba(197,27,27,0.06) inset;
  padding: 22px;
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
  overflow: hidden;
}

h1 { color:#e42a1a; text-align:center; font-size:1.4rem; margin-bottom:4px; }
.subtitle { text-align:center; color:#bfbfbf; font-size:0.85rem; margin-bottom:6px; }

form { display:flex; flex-direction:column; gap:8px; flex:1; }

label { font-size:0.85rem; color:#ddd; margin-bottom:4px; font-weight:600; }
input[type="text"], input[type="email"], input[type="tel"], textarea {
  margin-top: 10px;
  width:100%;
  padding:10px 12px;
  background:#0f0f0f;
  border:1px solid #2f2f2f;
  color:#fff;
  border-radius:6px;
  font-size:0.95rem;
  
}
input:focus, textarea:focus { outline:none; border-color:#d51818; background:#151515; }

textarea { resize:none; min-height:100px; }

.btn {
  background:#c51b1b;
  color:#fff;
  border:none;
  padding:10px 14px;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
  font-size:1rem;
  transition: transform .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-3px); background:#b21818; }

/* WhatsApp icon */
.wp {
  height: 25px;
  position: absolute;
  top: 15px;
  right: 15px;
  transition: transform 0.3s ease;
  cursor: pointer;
}
.wp:hover { transform: scale(1.2); }

/* Success overlay */
#successMessage {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  background: rgba(0,0,0,0.75);
  transform: scale(.98);
  opacity:0;
  pointer-events:none;
  transition: opacity .25s ease, transform .25s ease;
  padding:20px;
  text-align:center;
}
#successMessage.show {
  opacity:1;
  transform: scale(1);
  pointer-events:auto;
}
#successMessage svg { width:72px; height:72px; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45)); }
#successMessage p { color: #fff; font-weight:700; }
#successMessage small { color:#ddd; font-size:0.85rem; }

/* Footer */
.signup-footer {
  text-align: center;
  margin-top: 10px;
  font-size: 0.75rem;
  color: #aaa;
}
.signup-footer a {
  color: #bf1e1e;
  text-decoration: none;
}
.signup-footer a:hover {
  color: #fff;
}

/* Responsive */
@media (max-width:420px){
  .inner-box { padding:16px; }
  h1{ font-size:1.2rem; }
}

@keyframes fadeIn { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none;} }