/* ═══════════════════════════════════════════════════
   header.css — Avyukta CRM Global Header & Base Styles
   Extracted from header.php for caching & performance
════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root{
  --ink:#0d0f1a;
  --ink2:#1e2235;
  --muted:#6b7280;
  --accent:#4f46e5;
  --accent2:#7c3aed;
  --green:#10b981;
  --surface:#f8f9ff;
  --surface-2:#f0f2fc;
  --line:#e5e7f0;
  --white:#fff;
  --grad:linear-gradient(135deg,#4f46e5 0%,#7c3aed 60%,#a855f7 100%);
  --grad-warm:linear-gradient(135deg,#6366f1,#8b5cf6);
  --shadow:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(79,70,229,.07);
  --shadow-lg:0 8px 40px rgba(79,70,229,.13),0 2px 8px rgba(0,0,0,.06);
  --r:18px;
  --container:1180px;
  font-size:16px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Sora',sans-serif;color:var(--ink);background:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* ── LAYOUT ── */
.container{max-width:var(--container);margin:0 auto;padding:0 1.5rem}
section{padding:5rem 0}

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4,h5{letter-spacing:-.025em;line-height:1.1}
.serif{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.75rem 1.6rem;border-radius:100px;font-weight:700;font-size:.92rem;text-decoration:none;transition:all .2s;cursor:pointer;border:none;font-family:'Sora',sans-serif}
.btn-grad{background:var(--grad);color:#fff;box-shadow:0 4px 20px rgba(79,70,229,.35)}
.btn-grad:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(79,70,229,.45)}
.btn-ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:rgba(79,70,229,.04)}
.btn-outline{background:transparent;border:1.5px solid rgba(255,255,255,.4);color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.12)}
.btn-white{background:#fff;color:var(--accent);font-weight:700}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.12)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent2);transform:translateY(-2px)}

/* ── EYEBROW ── */
.eyebrow{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;background:rgba(79,70,229,.08);color:var(--accent);padding:.35rem .85rem;border-radius:100px;margin-bottom:.9rem}

/* ── HEADER / NAV ── */
header{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:3px solid #7c3aed;
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 12px rgba(79,70,229,.07);
}
.site-nav{
  max-width:var(--container);margin:0 auto;
  padding:0 1.5rem;height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}

/* Brand */
.site-nav .brand{
  display:flex;align-items:center;gap:.6rem;
  text-decoration:none;font-weight:800;font-size:1rem;
  color:var(--ink);white-space:nowrap;flex-shrink:0;
}
.logo-img{
  height:50px;
  width:auto;
  display:block;
}

/* Desktop nav links */
.site-nav .nav-menu{
  display:flex;align-items:center;gap:.05rem;
  margin-left:auto;padding-right:1rem;
}
.site-nav .nav-menu a{
  text-decoration:none;color:var(--muted);
  font-size:.88rem;font-weight:600;
  padding:.4rem .75rem;border-radius:8px;
  transition:color .15s,background .15s;white-space:nowrap;
}
.site-nav .nav-menu a:hover{color:var(--ink);background:var(--surface-2)}
.site-nav .nav-menu a.active{color:var(--ink);font-weight:700}

/* Desktop CTA */
.site-nav .nav-cta{flex-shrink:0}

/* ── HAMBURGER BUTTON ── */
.nav-toggle{
  display:none;
  flex-direction:column;justify-content:center;align-items:center;
  width:40px;height:40px;
  border:1.5px solid var(--line);border-radius:10px;
  background:#fff;cursor:pointer;gap:5px;
  flex-shrink:0;padding:0;
  transition:border-color .2s;
}
.nav-toggle:hover{border-color:var(--accent)}
.nav-toggle span{
  display:block;width:18px;height:2px;
  background:var(--ink);border-radius:2px;
  transition:transform .3s ease, opacity .3s ease;
}

/* Hamburger → X animation */
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── MOBILE DRAWER ── */
.mobile-menu{
  display:none;
  position:fixed;
  top:67px;
  left:0;right:0;
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 32px rgba(79,70,229,.12);
  z-index:999;
  padding:1.25rem 1.5rem 1.5rem;
  transform:translateY(-8px);
  opacity:0;
  transition:transform .25s ease, opacity .25s ease;
}
.mobile-menu.open{
  display:block;
  transform:translateY(0);
  opacity:1;
}
.mobile-menu a{
  display:flex;align-items:center;
  text-decoration:none;color:var(--ink);
  font-size:.97rem;font-weight:600;
  padding:.75rem 1rem;border-radius:12px;
  transition:background .15s, color .15s;
}
.mobile-menu a:hover{background:var(--surface-2);color:var(--accent)}
.mobile-menu a.active{background:rgba(79,70,229,.07);color:var(--accent);font-weight:700}
.mobile-menu .mobile-cta{
  margin-top:.75rem;padding-top:.75rem;
  border-top:1px solid var(--line);
}
.mobile-menu .mobile-cta a{
  background:var(--grad);color:#fff;
  border-radius:100px;
  justify-content:center;
  font-weight:700;
  box-shadow:0 4px 16px rgba(79,70,229,.3);
}
.mobile-menu .mobile-cta a:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(79,70,229,.4);
  color:#fff;background:var(--grad);
}

/* ── REVEAL ANIMATION ── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ── CONTACT MODAL ── */
#contactModal{
  display:none;
  position:fixed;
  z-index:2000;
  left:0;top:0;
  width:100%;height:100%;
  background:rgba(0,0,0,0.6);
}
#contactModal .modal-content{
  background:#fff;
  margin:8% auto;
  padding:0;
  border-radius:10px;
  width:90%;
  max-width:900px;
  position:relative;
  box-shadow:0px 5px 15px rgba(0,0,0,0.3);
  overflow:hidden;
}
#contactModal .iframe-wrapper{
  position:relative;
  width:100%;
  padding-bottom:37%;
  height:0;
  overflow:hidden;
  border-radius:10px;
}
#contactModal .iframe-wrapper iframe{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  border:none;
  z-index:1;
}
#contactModal .close-btn{
  color:black;
  font-size:30px;
  font-weight:bold;
  position:absolute;
  right:15px;top:10px;
  cursor:pointer;
  z-index:9999;
}
#contactModal .close-btn:hover{color:red}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .site-nav .nav-menu{display:none}
  .site-nav .nav-cta{display:none}
  .nav-toggle{display:flex}

  #contactModal .modal-content{
    width:95%;
    margin:34% auto;
  }
  #contactModal .iframe-wrapper{
    padding-bottom:120%;
  }
}