/* ============================================
   Updates page — same card system as /contact
   Form internals live in contact.css (shared).
   ============================================ */
.updates-page .contact-hero {
  padding: 124px 0 56px;
}

/* The card sits clear of the gradient with real breathing room above it,
   matching the rhythm on /contact. */
.updates-section {
  padding-top: clamp(48px, 5.5vw, 80px);
  padding-bottom: var(--sp-20);
}
.updates-section > .container {
  display: flex;
  justify-content: center;
}
/* Same surface as .contact-card so both forms read as one system. */
.updates-card {
  position: relative;
  width: 100%;
  max-width: 660px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  border: 1px solid rgba(26, 75, 216, 0.07);
  border-radius: 28px;
  overflow: hidden;
  padding: clamp(32px, 4vw, 56px);
  box-shadow:
    0 1px 1px rgba(11, 11, 16, 0.02),
    0 2px 4px rgba(11, 11, 16, 0.03),
    0 12px 28px -16px rgba(20, 26, 74, 0.12),
    0 48px 100px -52px rgba(20, 26, 74, 0.22);
  animation: quietIn 0.34s ease-out both;
}
/* The one ornament, matched to /contact: a brand line on the top edge. */
.updates-card:before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, rgba(26, 75, 216, 0) 0%, rgba(26, 75, 216, 0.7) 28%, rgba(44, 68, 224, 0.5) 62%, rgba(26, 75, 216, 0) 100%);
}
/* Soft iridescent corner glow for visual energy. */
.updates-card:after {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(26, 75, 216, 0.08), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.updates-card > * {
  position: relative;
  z-index: 1;
}


@media (max-width: 900px) {
  .updates-section {
    padding-top: 44px;
  }
}

@media (max-width: 620px) {
  .updates-page .contact-hero {
    padding: 104px 0 48px;
  }
  .updates-section {
    padding-top: 36px;
  }
}

/* Tablet rhythm — matches responsive.css's 761-1024px band. */
@media (max-width: 1024px) and (min-width: 761px) {
  .updates-section { padding-block: 56px 72px; }
}

/* ============================================================
   Ambient motion, matched to the contact page
   ============================================================ */
.updates-page .updates-section {
  position: relative;
  overflow: hidden;
}
.updates-page .updates-section:before,
.updates-page .updates-section:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.updates-page .updates-section:before {
  width: 420px;
  height: 420px;
  top: -80px;
  left: -140px;
  background: rgba(120, 145, 255, 0.16);
  animation: none;
}
.updates-page .updates-section:after {
  width: 360px;
  height: 360px;
  bottom: -120px;
  right: -120px;
  background: rgba(234, 168, 118, 0.14);
  animation: none;
}
.updates-page .updates-section > .container {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .updates-page .updates-section:before,
  .updates-page .updates-section:after {
    animation: none;
  }
}