/* Contact Us page styles - focused, responsive, accessible */
.hero {
  position: relative;
  padding: var(--space-64) 0 var(--space-48);
  background:
    radial-gradient(120% 120% at 80% 10%, rgba(0,229,255,0.10), transparent 60%),
    linear-gradient(180deg, rgba(0,229,255,0.06), rgba(255,159,26,0.04));
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hero-inner h1 { margin-bottom: var(--space-12); }
.hero-cta { display: flex; gap: var(--space-12); margin-top: var(--space-16); flex-wrap: wrap; }

.contact-section { padding: var(--space-48) 0; }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
  margin-top: var(--space-16);
}
@media (min-width: 768px) {
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.contact-card h3 { margin-bottom: var(--space-12); }
.contact-list { display: grid; gap: 10px; margin-top: 4px; color: var(--color-text); }
.contact-list i { color: var(--color-primary); margin-right: 8px; }
.contact-list a { color: var(--color-text); }
.contact-list a:hover { color: #7bf3ff; }

/* Form */
.contact-form { margin-top: var(--space-16); }
.grid-form { display: grid; gap: var(--space-16); grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-field { display: grid; gap: 8px; }
.form-field .hint { color: var(--color-text-muted); font-size: var(--text-sm); }
.field-meta { display: flex; justify-content: flex-end; color: var(--color-text-muted); font-size: var(--text-sm); }
.form-actions { display: flex; gap: var(--space-12); align-items: center; margin-top: var(--space-16); }
.form-status { margin-top: var(--space-16); font-weight: 600; }
.form-status.success { color: var(--color-success); }
.form-status.error { color: var(--color-danger); }

/* Social */
social-actions, .social-actions { display: flex; gap: var(--space-12); flex-wrap: wrap; margin-top: var(--space-12); }

/* Support cards */
.support-grid { display: grid; gap: var(--space-24); grid-template-columns: 1fr; }
@media (min-width: 768px) { .support-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Legal */
.legal .legal-grid { display: grid; gap: var(--space-24); grid-template-columns: 1fr; margin-top: var(--space-16); }
@media (min-width: 768px) { .legal .legal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Small refinements */
label { font-weight: 600; }
#message-counter { min-width: 84px; text-align: right; }

/* Button emphasis inside cards */
.card .btn { margin-top: 8px; }