/* =========================
   PREMIUM MOBILE MENU (Hamburger)
   - modern, high-contrast button
   - animated to X when menu is open
   - bigger logo on mobile
========================= */

.nav-toggle{
  display:none;
  width:48px;
  height:48px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(15,23,42,.55);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  box-shadow:0 14px 40px rgba(0,0,0,.25);
  padding:0;
  cursor:pointer;
  position:relative;
  outline:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.nav-toggle span{
  display:block;
  position:absolute;
  left:50%;
  width:22px;
  height:2px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  transform:translateX(-50%);
  transition:transform .18s ease, opacity .18s ease, top .18s ease;
}

.nav-toggle span:nth-child(1){top:16px}
.nav-toggle span:nth-child(2){top:23px}
.nav-toggle span:nth-child(3){top:30px}

.nav-toggle:hover{transform:translateY(-1px); box-shadow:0 18px 55px rgba(0,0,0,.28)}
.nav-toggle:active{transform:translateY(0)}
.nav-toggle:focus-visible{box-shadow:0 0 0 4px rgba(193,18,31,.28), 0 18px 55px rgba(0,0,0,.28); border-color:rgba(193,18,31,.35)}

/* Open -> X */
header.menu-open .nav-toggle span:nth-child(1){top:23px; transform:translateX(-50%) rotate(45deg)}
header.menu-open .nav-toggle span:nth-child(2){opacity:0}
header.menu-open .nav-toggle span:nth-child(3){top:23px; transform:translateX(-50%) rotate(-45deg)}

/* Keep desktop as-is: inline menu */
@media (max-width: 980px){
  .nav{gap:10px}
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center}
  .cta{gap:10px}
  .cta .btn{padding:10px 12px; border-radius:12px}

  /* Bigger, clearer logo on phone */
  .brand img,
  .brand .brand-logo{height:72px; width:auto; max-width:none}

  /* Hide menu by default on phone */
  .menu{display:none !important}

  /* Open state */
  header.menu-open .menu{
    display:flex !important;
    flex-direction:column;
    gap:10px;
    width:100%;
    margin-top:10px;
    padding:12px;
    border-radius:18px;
    border:1px solid rgba(230,233,238,.95);
    background:rgba(255,255,255,.92);
    box-shadow:0 18px 60px rgba(11,15,20,.12);
  }
  header.menu-open .menu a{
    width:100%;
    justify-content:flex-start;
  }
}

@media (max-width: 520px){
  .brand img,
  .brand .brand-logo{height:64px}
}

@media (max-width: 360px){
  .brand img,
  .brand .brand-logo{height:60px}
}

/* =========================
   Premium CTA buttons
========================= */
.btn.whatsapp{
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:#fff;
  border:none;
  box-shadow:0 8px 24px rgba(18,140,126,.32);
}
.btn.whatsapp:hover{
  background:linear-gradient(135deg,#1ebe5d,#0e6f64);
  box-shadow:0 10px 30px rgba(18,140,126,.42);
  transform:translateY(-1px);
}
.btn.call{
  background:linear-gradient(135deg,#2563eb,#1e40af);
  color:#fff;
  border:none;
  box-shadow:0 8px 24px rgba(30,64,175,.25);
}
.btn.call:hover{
  background:linear-gradient(135deg,#1d4ed8,#1e3a8a);
  box-shadow:0 10px 30px rgba(30,64,175,.32);
  transform:translateY(-1px);
}
.btn.whatsapp svg,.btn.call svg{display:block}