/* === Encom contact form: readable + subtle constellation background === */
.encom-contact {               /* the wrapper you added in step 1 */
  position: relative;
  max-width: 1000px;
  margin: 24px auto;
  padding: 28px;
  background: linear-gradient(180deg, rgba(10,31,68,.85), rgba(15,43,102,.85));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  overflow: hidden;
  color: #e6eefc;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

/* Constellation/nebula (pure CSS, no JS) */
.encom-contact::before,
.encom-contact::after { content:""; position:absolute; inset:0; pointer-events:none }
.encom-contact::before {
  background:
    radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(2px 2px at 30% 80%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 70% 40%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 85% 65%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(2px 2px at 55% 25%, rgba(255,255,255,.6) 50%, transparent 51%);
  opacity:.35; filter: drop-shadow(0 0 6px rgba(174,233,255,.28));
}
.encom-contact::after {
  background:
    radial-gradient(600px 300px at -10% -20%, rgba(42,168,255,.10), transparent 60%),
    radial-gradient(520px 260px at 120% 120%, rgba(39,225,193,.10), transparent 60%);
  animation: encomNebula 18s ease-in-out infinite; opacity:.55;
}
@keyframes encomNebula {
  0%,100% { transform: translate3d(0,0,0) scale(1) }
  50%     { transform: translate3d(14px,-10px,0) scale(1.02) }
}
@media (prefers-reduced-motion: reduce){ .encom-contact::after { animation:none } }

/* Make HubSpot text readable */
.encom-contact .hbspt-form h1,
.encom-contact .hbspt-form h2,
.encom-contact .hbspt-form h3,
.encom-contact .hbspt-form label,
.encom-contact .hbspt-form legend,
.encom-contact .hbspt-form .hs-richtext,
.encom-contact .hbspt-form .legal-consent-container,
.encom-contact .hbspt-form .submitted-message { color:#e6eefc !important; }
.encom-contact .hs-form-field label { font-weight:600 }

/* Inputs: light backgrounds so placeholders and text are visible */
.encom-contact .hbspt-form input[type="text"],
.encom-contact .hbspt-form input[type="email"],
.encom-contact .hbspt-form input[type="tel"],
.encom-contact .hbspt-form input[type="number"],
.encom-contact .hbspt-form textarea,
.encom-contact .hbspt-form select {
  background: #f8fbff !important;
  color: #0a1f44 !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
}
.encom-contact .hbspt-form ::placeholder { color:#5b6c8f; opacity:1 }
.encom-contact .hbspt-form input:focus,
.encom-contact .hbspt-form textarea:focus,
.encom-contact .hbspt-form select:focus {
  outline: 0;
  border-color: #27e1c1 !important;
  box-shadow: 0 0 0 3px rgba(39,225,193,.22) !important;
}

/* Submit button */
.encom-contact .hbspt-form .hs-button,
.encom-contact .hbspt-form input[type="submit"] {
  background: linear-gradient(180deg, #2aa8ff, #1b77ff) !important;
  color: #04223a !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 12px 18px !important;
  font-weight: 700 !important;
  cursor: pointer;
}

/* Error + links */
.encom-contact .hbspt-form .hs-error-msg { color:#ff9c9c !important; }
.encom-contact .hbspt-form a { color:#aee9ff !important; }