/* =========================
   Meridyen — Premium UI Kit
   ========================= */

:root{
  --primary: #7c3aed;   /* purple-600 */
  --primary2:#ec4899;   /* pink-500  */
  --border: rgba(17,24,39,.10);
  --shadow: 0 12px 30px rgba(17,24,39,.10);
}

html { scroll-behavior: smooth; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.78rem 1.08rem;
  border-radius: .95rem;
  font-weight: 800;
  line-height: 1;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease,
              color .12s ease, border-color .12s ease, filter .12s ease;
  border: 1px solid transparent;
  user-select: none;
  white-space: nowrap;
}

.btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.btn:active{
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(17,24,39,.10);
}

.btn:focus{
  outline:none;
  box-shadow: 0 0 0 4px rgba(124,58,237,.20);
}

.btn-primary{
  color:#fff;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
}

.btn-primary:hover{
  filter: brightness(1.03);
}

.btn-secondary{
  color:#111827;
  background:#fff;
  border-color: rgba(17,24,39,.14);
}

.btn-secondary:hover{
  background:#f9fafb;
}

.btn-whatsapp{
  color:#fff;
  background:#22c55e;
}

.btn-whatsapp:hover{
  background:#16a34a;
}

.btn-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-weight: 900;
  color:#111827;
  text-decoration:none;
  transition: color .12s ease, transform .12s ease;
}

.btn-link:hover{
  color: var(--primary);
  transform: translateX(2px);
}

.nav-link{
  position: relative;
  padding: .25rem .15rem;
}

.nav-link.text-purple-700::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:3px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  opacity:.95;
}

/* Optional: nicer default focus for links/buttons */
a:focus-visible, button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(124,58,237,.18);
  border-radius: .9rem;
}

/* Mobile Adaptation */
@media (max-width: 640px) {
  .px-4 { padding-left: 1rem; padding-right: 1rem; }
  .w-full { width: 100%; }
  .btn { width: 100%; }
}

/* ==================== Mobile First Improvements ==================== */
@media (max-width: 640px) {
  .btn {
    width: 100%;
    padding: 1rem 1.25rem;
    font-size: 15px;
    border-radius: 0.75rem;
  }
  .btn-primary, .btn-whatsapp {
    font-size: 15px;
  }
  h1 {
    font-size: 28px !important;
  }
  .py-10, .py-12 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}
@media (max-width: 768px) {
  .space-y-16 > * + * {
    margin-top: 3rem;
  }
}

.wa-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: #22c55e;
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 24px;
  box-shadow: 0 12px 30px rgba(17,24,39,.18);
  z-index: 9999;
  text-decoration:none;
}
.wa-float:hover{ background:#16a34a; }
@media (min-width: 768px){
  .wa-float{ right: 24px; bottom: 24px; }
}

#mobileMenu { animation: slideDown 0.3s ease forwards; }
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.mobile-link { transition: all 0.2s ease; }
.mobile-link:hover { background-color:#f3f4f6; color: var(--primary); }