:root{
      --bg:#ffffff;
      --card:#ffffff;
      --muted:#556374;
      --accent:#7c5cff;
      --accent-2:#00d4ff;
      --glass: rgba(0,0,0,0.05);
      --radius:16px;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }

* { box-sizing:border-box; }

body { 
  display:flex; 
  justify-content:center; 
  align-items:center; 
  background:#f4f6f9;            /* ✔ Light background */
  color:#333;                    /* ✔ Dark text */
}

.contact-container { 
  background:#ffffff;            /* ✔ White card */
  border:1px solid #e5e5e5;      /* ✔ Light border */
  width:100%; 
  max-width:450px;
  padding:20px;
  border-radius:14px;
  box-shadow:0 4px 10px rgba(0,0,0,0.06);  /* ✔ Soft shadow */
}

.contact-container h2 { 
  text-align:center; 
  margin-bottom:18px;
  color:#333;                   /* ✔ Dark text */
}

.contact-container p {
  text-align:center;
  color:#555;                  /* ✔ Slightly darker text */
}

.contact-container input,
.contact-container textarea { 
  width:100%; 
  padding:12px 10px; 
  margin-bottom:15px; 
  border:1px solid #ccc;        /* ✔ Light field border */
  border-radius:8px; 
  background:#ffffff;           /* ✔ White fields */
  color:#333;
  font-size:14px; 
  transition:0.3s; 
}

.contact-container input::placeholder,
.contact-container textarea::placeholder {
  color:#888;
}

.contact-container input:focus,
.contact-container textarea:focus { 
  border-color:#4e89ff; 
  outline:none; 
  background:#f9fbff;          /* ✔ Light blue focus background */
}

.btn { 
    display: inline-block;
    padding: 10px 16px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    color: #fff;
}

.btn:hover { 
  opacity:0.9; 
}

#loading { 
  display:none; 
  text-align:center; 
  margin-bottom:10px; 
  color:#333;
}

.g-recaptcha { margin-bottom:15px; }

#debug { 
  margin-top:10px; 
  font-size:12px; 
  color:#666; 
  white-space:pre-wrap; 
}

@media screen and (max-width:480px) { 
  .contact-container { padding:15px;}