/* ============================================
   CONTACT / CTA
   ============================================ */

.contact {
  background: var(--navy-900);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.contact__field {
  position: absolute;
  right: -10%;
  top: 50%;
  transform: translateY(-50%);
  width: 640px;
  height: 640px;
  opacity: 0.5;
  pointer-events: none;
}

.contact__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

.contact__text .eyebrow { color: var(--violet-300); }
.contact__text .eyebrow::before { background: var(--violet-300); box-shadow: 0 0 0 3px rgba(167,139,250,0.18); }

.contact__text h2 {
  font-size: clamp(28px, 4vw, 42px);
  color: var(--white);
  margin-bottom: 18px;
}

.contact__text p {
  color: rgba(255,255,255,0.6);
  font-size: 16.5px;
  max-width: 460px;
  margin-bottom: 32px;
}

.contact__points {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact__points a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--white);
}

.contact__points svg { width: 18px; height: 18px; stroke: var(--violet-300); }

.contact__form {
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
}

.field input, .field textarea, .field select {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 13px 14px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14.5px;
  transition: border-color .3s, background .3s;
}

.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,0.32); }

.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--violet-400);
  background: rgba(255,255,255,0.08);
  outline: none;
}

.field textarea { resize: vertical; min-height: 90px; }

.contact__form .btn-primary {
  background: var(--violet-500);
  margin-top: 4px;
}
.contact__form .btn-primary:hover { background: var(--violet-400); }

.form-note {
  font-size: 12.5px;
  color: rgba(255,255,255,0.4);
  text-align: center;
}

@media (max-width: 860px) {
  .contact__grid { grid-template-columns: 1fr; }
  .contact__field { display: none; }
}