.contact-panel,
.contact-info,
[data-animate] {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.contact-hero {
  padding-top: 6rem;
  padding-bottom: 4rem;
}

.contact-hero .hero-title {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

.contact-hero .hero-subtitle {
  max-width: 40rem;
  margin: 1rem auto 0;
  color: var(--text-soft);
}

.contact-panel {
  padding: 2.2rem 2rem;
}

.contact-panel h2 {
  font-size: 1.6rem;
}

.contact-panel .form-control,
.contact-panel .form-select {
  background: #020617;
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: var(--text-main);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.contact-panel .form-control:focus,
.contact-panel .form-select:focus {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 1px rgba(0,160,255,0.4);
}

.contact-info {
  padding: 2rem 1.8rem;
}

.contact-info .info-item {
  display: flex;
  gap: 0.9rem;
  margin-bottom: 1.3rem;
}

.contact-info i {
  font-size: 1.4rem;
  color: var(--accent-soft);
}

.contact-info strong {
  display: block;
  font-weight: 600;
  color: #fff;
}

.contact-info p {
  margin: 0;
  color: var(--text-soft);
}

[data-animate] {
  opacity: 0;
  transform: translateY(18px) translateZ(0);
  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-animate].in-view {
  opacity: 1;
  transform: translateY(0) translateZ(0);
}