/* Contact */
.contact { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 1200px; background: var(--bg); overflow: hidden; }

.contact-form { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 471px; padding: 20px; overflow: hidden; }
.contact-form label { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; }
.contact-form label p { font: 500 12px/1.2 "Inter", sans-serif; color: #888; white-space: pre; }

.field {
  display: flex;
  width: 100%;
  height: 40px;
  border-radius: 10px;
  background: #bbbbbb26;
  box-shadow: inset 0 0 0 1px #8888881a;
  overflow: hidden;
}
.field:focus-within { box-shadow: inset 0 0 0 1px #09f; }
.field input, .field textarea {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 0;
  outline: none;
  background: transparent;
  font: 400 14px/1.2 "Inter", sans-serif;
  color: #999;
}
.field ::placeholder { color: #999; opacity: 1; }
.field-area { height: auto; min-height: 100px; }
.field-area textarea { min-height: 100px; resize: vertical; }

/* Spam honeypot, never visible */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.contact-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--yellow);
  font: 600 14px/1.2 "Inter", sans-serif;
  color: #fff;
  cursor: pointer;
}
.contact-submit .label { white-space: pre; user-select: none; }
.contact-submit .spinner {
  display: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 7deg, #fff 342deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: spin 1s linear infinite;
}
.contact-submit[data-state="loading"] .label { display: none; }
.contact-submit[data-state="loading"] .spinner { display: block; }
.contact-submit[data-state="error"] { background: rgba(255, 34, 68, .15); color: #ff2244; }
.contact-submit:disabled { cursor: default; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1199.98px) {
  .contact { width: 800px; }
}
@media (max-width: 809.98px) {
  .contact { width: 100%; }
  .contact-form { width: 100%; }
}