/* ============ CONTACT ============ */
.contact { position: relative; background: var(--foreground); color: var(--background); overflow: hidden; }
.contact .glow { position: absolute; bottom: -6rem; left: -6rem; width: 24rem; height: 24rem; border-radius: 999px; background: rgba(14,118,188,.3); filter: blur(60px); pointer-events: none; }

.contact-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: flex-start; }
@media (min-width: 768px) { .contact-grid { grid-template-columns: 5fr 7fr; } }

.contact-left .overline { color: var(--accent); }
.contact-left .h2 { color: var(--background); }
.contact-left p.lead { margin: 1.5rem 0 0; max-width: 24rem; line-height: 1.7; color: rgba(255,255,255,.7); }

.contact-info { margin: 2.5rem 0 0; display: flex; flex-direction: column; gap: 1rem; }
.contact-info a, .contact-info div { display: flex; align-items: center; gap: .75rem; color: rgba(255,255,255,.9); transition: color .2s ease; }
.contact-info a:hover { color: var(--accent); }
.contact-info .circle { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: rgba(255,255,255,.1); flex: none; }

.contact-form { display: flex; flex-direction: column; gap: 1.75rem; width: 100%; }
.contact-form .form-row { gap: 1.75rem; }
.contact-form label { font-family: "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .15em; font-size: .7rem; color: rgba(255,255,255,.5); }
.contact-input {
  margin-top: .5rem; width: 100%; height: 3rem; font-family: inherit; font-size: .95rem;
  background: transparent; border: none; border-bottom: 2px solid rgba(255,255,255,.3);
  color: var(--background); outline: none; transition: border-color .2s ease; padding: 0;
}
.contact-textarea { min-height: 120px; padding-top: .5rem; resize: vertical; }
.contact-input:focus { border-bottom-color: var(--accent); }
.contact-input::placeholder { color: rgba(255,255,255,.4); }

.contact-submit {
  display: inline-flex; align-items: center; gap: .75rem; border-radius: 999px;
  background: var(--accent); color: var(--accent-foreground); padding: .75rem .75rem .75rem 1.75rem;
  font-size: 1rem; font-weight: 600; transition: background-color .3s ease, color .3s ease; align-self: flex-start;
}
.contact-submit:hover { background: var(--primary); color: #fff; }
.contact-submit:disabled { opacity: .6; cursor: default; }
.contact-submit .btn-icon { background: var(--foreground); color: var(--background); transition: transform .2s ease; }
.contact-submit:hover .btn-icon { transform: translateX(2px); }

/* ============ FOOTER ============ */
.footer { background: var(--foreground); color: var(--background); border-top: 1px solid rgba(255,255,255,.1); }
.footer-inner { max-width: 80rem; margin: 0 auto; padding: 3.5rem 1.25rem; }
@media (min-width: 640px) { .footer-inner { padding: 3.5rem 2rem; } }
.footer-top { display: flex; flex-direction: column; gap: 2.5rem; justify-content: space-between; }
@media (min-width: 768px) { .footer-top { flex-direction: row; align-items: flex-end; } }
.footer-logo { display: flex; align-items: center; gap: .5rem; }
.footer-logo .globe { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--primary); color: #fff; }
.footer-logo .brand { font-family: "Cabinet Grotesk", sans-serif; font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.footer-logo .brand span { color: var(--secondary); }
.footer-desc { margin: 1rem 0 0; max-width: 20rem; color: rgba(255,255,255,.6); }
.footer-links { display: flex; flex-wrap: wrap; gap: .75rem 2rem; }
.footer-links a { font-family: "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .15em; font-size: .75rem; color: rgba(255,255,255,.7); transition: color .2s ease; }
.footer-links a:hover { color: var(--accent); }
.footer-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: .75rem; justify-content: space-between; font-size: .75rem; color: rgba(255,255,255,.5); }
@media (min-width: 640px) { .footer-bottom { flex-direction: row; } }