/* ═══════════════════════════════════════
   CONTACT SECTION
═══════════════════════════════════════ */

#contact {
  background: var(--blue);
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}

.contact-bg-a {
  position: absolute;
  top: -80px; right: -80px;
  width: 380px; height: 380px;
  background: rgba(253, 160, 2, 0.07);
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.contact-bg-b {
  position: absolute;
  bottom: -60px; left: -60px;
  width: 280px; height: 280px;
  background: rgba(255, 255, 255, 0.045);
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}

/* Two-column layout */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 56px;
  align-items: start;
}

/* Info cards */
.contact-info-cards    { display: flex; flex-direction: column; gap: 13px; margin-bottom: 28px; }

.ci-card {
  display: flex;
  gap: 14px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  padding: 17px;
  transition: background 0.2s, border-color 0.2s;
}
.ci-card:hover {
  background: rgba(253, 160, 2, 0.1);
  border-color: rgba(253, 160, 2, 0.32);
}

.ci-icon {
  width: 42px; height: 42px;
  background: rgba(253, 160, 2, 0.14);
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}
.ci-label { font-family: var(--ff-mono); font-size: 10px; color: var(--amber); letter-spacing: 0.09em; margin-bottom: 3px; }
.ci-val   { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 2px; }
.ci-sub   { font-size: 12px; font-weight: 300; color: rgba(255, 255, 255, 0.46); }

/* Social icon row */
.social-row { display: flex; gap: 10px; }
.soc-btn {
  width: 42px; height: 42px;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  transition: all 0.2s;
}
.soc-btn:hover {
  background: rgba(253, 160, 2, 0.2);
  border-color: var(--amber);
  color: var(--amber);
}

/* ── Form box ── */
.form-box {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 26px;
  padding: 36px;
  backdrop-filter: blur(16px);
}
.form-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 22px;
  color: #fff;
  margin-bottom: 22px;
}

.form-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.form-grp  { margin-bottom: 16px; }

.form-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.44);
  letter-spacing: 0.09em;
  display: block;
  margin-bottom: 7px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 12px 15px;
  font-size: 14px;
  color: #fff;
  outline: none;
  appearance: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input::placeholder,
.form-textarea::placeholder { color: rgba(255, 255, 255, 0.3); }
.form-select option          { background: rgb(3, 11, 253); color: #fff; }

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(253, 160, 2, 0.14);
}
.form-textarea { resize: vertical; min-height: 84px; }

.submit-btn {
  width: 100%;
  background: var(--amber);
  color: var(--blue);
  font-weight: 700;
  font-size: 15px;
  padding: 15px;
  border-radius: 11px;
  transition: transform 0.2s, box-shadow 0.2s;
  margin-top: 6px;
}
.submit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(253, 160, 2, 0.45); }

.form-note {
  font-size: 12px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.37);
  text-align: center;
  margin-top: 11px;
}

/* Success state */
.success-wrap  { text-align: center; padding: 52px 16px; display: none; }
.success-emoji { font-size: 58px; margin-bottom: 18px; }
.success-h {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 24px;
  color: #fff;
  margin-bottom: 10px;
}
.success-p { font-size: 14px; font-weight: 300; color: rgba(255, 255, 255, 0.58); line-height: 1.7; }

/* Responsive */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}