/* ===== Form ===== */
  form{ display:grid; gap:.85rem; max-width:520px }
  label{font-weight:700; font-size:.95rem; color:var(--muted)}
  input,textarea{
    border:1px solid rgba(0,0,0,.12);
    border-radius:14px; padding:.9rem; font-size:1rem; background:#fff;
    box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
  }
  input:focus,textarea:focus{
    outline:3px solid color-mix(in oklab, var(--brand) 30%, white 70%);
    border-color:transparent;
  }
  button.btn{
    justify-self:start; background:linear-gradient(90deg, var(--brand), var(--brand-2));
    color:#fff; border:none; border-radius:14px; padding:.85rem 1.1rem; font-weight:900; letter-spacing:.2px; cursor:pointer;
    box-shadow:0 10px 22px rgba(0,0,0,.12);
    transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
  }
  button.btn:hover{ transform:translateY(-1px); box-shadow:0 14px 26px rgba(0,0,0,.16); filter:brightness(1.3) }
  
  
 
#contact .contact-center {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1rem;
}

/* Center the form on the page while keeping fields full width */
#contact .contact-form {
  width: min(520px, 100%);
  margin: 0 auto;
}

/* Keep labels easy to read */
#contact .contact-form label {
  width: 100%;
  text-align: left;
}

/* Inputs/textarea full width inside the centered form */
#contact .contact-form input,
#contact .contact-form textarea {
  width: 100%;
}

/* Center the submit button (override the default start alignment) */
#contact .contact-form .btn {
  justify-self: center;
}

/* Optional: slightly tighten spacing under the intro paragraph */
#contact p.section-intro {
  margin-bottom: .6rem;
}

/* Optional (nice): center-align the section heading only on Contact */
#contact h2 {
  text-align: center;
} 

.toast { position: fixed; bottom: 1.5rem; right: 1.5rem; background: #28a745; /* green success color */ color: #fff; padding: 1rem 1.25rem; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.25); opacity: 0; transform: translateY(20px); transition: opacity .3s ease, transform .3s ease; z-index: 9999; font-weight: 500; } .toast.show { opacity: 1; transform: translateY(0);