.newsletter { padding: 80px 0; background: var(--paper); }
.newsletter-card { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(430px,.75fr); gap: 80px; align-items: end; overflow: hidden; padding: 76px; border-radius: 36px; background: radial-gradient(circle at 95% 110%,rgba(var(--cyan-rgb),.34),transparent 38%),var(--navy); }
.newsletter-card h2 {
  margin: 0; max-width: 690px; font-size: clamp(48px,5vw,76px); font-weight: 800; letter-spacing: -.05em; line-height: .98;
}
.newsletter-card > div > p:last-child { margin: 24px 0 0; color: rgba(255,255,255,.58); }
.newsletter-form { position: relative; display: flex; padding: 7px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(255,255,255,.06); }
.newsletter-form input { width: 100%; min-width: 0; border: 0; outline: 0; padding: 0 18px; background: transparent; color: var(--white); font-size: 15px; }
.newsletter-form input::placeholder { color: rgba(255,255,255,.42); }
.newsletter-form button { display: inline-flex; min-height: 54px; flex: 0 0 auto; align-items: center; gap: 10px; border: 0; border-radius: 10px; padding: 0 20px; background: var(--cyan); color: var(--navy); cursor: pointer; font-size: 14px; font-weight: 900; }

@media (max-width: 960px) {
  .newsletter-card { grid-template-columns: 1fr; gap: 48px; padding: 60px; }
}

@media (max-width: 640px) {
  .newsletter { padding: 24px 0; }
  .newsletter-card h2 { font-size: 46px; }
  .newsletter-card { gap: 36px; padding: 42px 24px; border-radius: 26px; }
  .newsletter-form { align-items: stretch; flex-direction: column; gap: 8px; padding: 8px; }
  .newsletter-form input { min-height: 52px; }
  .newsletter-form button { justify-content: center; }
}