.footer-subscribe {
  --subscribe-padding: 12px;
}

.popup {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 980px;
  height: auto;
  background: rgba(255,255,255,0.02); /* subtle contrast on the dark footer */
  border-radius: 10px;
  padding: var(--subscribe-padding);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 26px rgba(0,0,0,0.32);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  animation: fadeInUp 560ms cubic-bezier(.2,.9,.2,1) both;
}

.form {
  display: flex;
  align-items: center;
  padding: 10px;
  gap: 12px;
  width: 100%;
  max-width: 920px;
  background: transparent;
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  flex: 0 0 48px;
}

.note {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--light);
  flex: 0 0 260px;
}

.title { font-weight:700; font-size:16px; }
.subtitle { font-weight:500; font-size:13px; opacity:0.9 }

.input_field {
  flex: 1 1 320px;
  height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(31,42,68,0.08);
  background: var(--light);
  color: var(--dark);
  outline: none;
  transition: box-shadow 160ms ease, transform 120ms ease;
}

.input_field:focus { box-shadow: 0 8px 24px rgba(31,42,68,0.06); }

.form .submit {
  flex: 5 5 40px;
  height: 44px;
  border-radius: 8px;
  border: 0;
  background: linear-gradient(180deg,#FF6A00 0%,#FF8C00 50%,#FF6A00 100%);
  color: #fff;
  font-weight:700;
  box-shadow: 0 10px 28px rgba(244,124,32,0.12);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.form .submit:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(244,124,32,0.16); }

/* responsive: stack in small viewports */
@media (max-width: 720px) {
  .popup { padding: 10px; }
  .form { flex-direction: column; align-items: stretch; }
  .note { order: -1; flex: none; margin-bottom: 6px }
  .input_field { width: 100%; flex: none; }
  .form .submit { width: 100%; flex: none; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}