/* ════════════════════════════════════════════════════════════════════
   Saathi360 mega-menu — STANDALONE, fully namespaced (.mkt-* / .mega-*).
   Safe to drop onto the existing homepage (home.html) without touching its
   global styles. Reuses the page's brand tokens (--grad-cta, --ink-*,
   --line, --sh-*, --e-out) which home.html already defines, and its .btn /
   .grad-text classes. (Homepage swap, 2026-06-14)
═══════════════════════════════════════════════════════════════════════ */
:root{ --nav-h:72px; }

.mkt-nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid rgba(15,23,42,.08);
  transition:.3s var(--e-out,cubic-bezier(.16,1,.3,1))}
.mkt-nav.scrolled{box-shadow:0 4px 24px rgba(15,23,42,.08);background:rgba(255,255,255,.9)}
.mkt-nav-inner{max-width:1320px;margin:0 auto;width:100%;padding:0 24px;display:flex;align-items:center;gap:8px}
.mkt-brand img{height:46px;display:block}
.mkt-nav-links{display:flex;align-items:center;gap:2px;margin-left:18px;list-style:none;padding:0;margin-block:0}
.mkt-nav-links>li{position:static;margin:0}
.mkt-nav-trigger{display:flex;align-items:center;gap:5px;font-weight:600;font-size:15px;
  color:var(--ink-2,#1e2348);padding:9px 14px;border-radius:10px;cursor:pointer;
  background:none;border:0;font-family:inherit;transition:.18s;text-decoration:none}
.mkt-nav-trigger:hover,.mkt-nav-trigger[aria-expanded="true"]{color:#8b5cf6;background:rgba(139,92,246,.07)}
.mkt-nav-trigger .chev{width:15px;height:15px;transition:transform .25s var(--e-out,ease)}
.mkt-nav-trigger[aria-expanded="true"] .chev{transform:rotate(180deg)}
.mkt-nav-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
/* Smaller/medium nav + drawer buttons (the base .btn is oversized for a navbar). */
.mkt-nav-actions .btn{padding:9px 18px;font-size:14px}
.mkt-drawer .btn{padding:11px 16px;font-size:14px}

.mega{position:fixed;left:0;right:0;top:var(--nav-h);z-index:1001;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .22s var(--e-out,ease),transform .22s var(--e-out,ease),visibility .22s}
.mega.open{opacity:1;visibility:visible;transform:translateY(0)}
.mega-card{max-width:1240px;margin:0 auto;padding:26px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);border-radius:0 0 28px 28px;box-shadow:0 28px 80px rgba(15,23,42,.16),0 10px 24px rgba(15,23,42,.08)}
/* upward arrow pointing to the active top-menu item */
.mega-card{position:relative}
.mega-card::before{content:"";position:absolute;top:-7px;left:var(--arrow-x,140px);
  width:17px;height:17px;background:rgba(255,255,255,.92);
  border-left:1px solid rgba(15,23,42,.08);border-top:1px solid rgba(15,23,42,.08);
  transform:translateX(-50%) rotate(45deg);transition:left .22s cubic-bezier(.16,1,.3,1)}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr) .9fr;gap:10px 28px}
.mega-col-head{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#767ea3;margin:4px 0 10px}
.mega-item{display:flex;align-items:center;gap:12px;padding:11px 12px;min-height:54px;border-radius:14px;transition:.18s var(--e-out,ease);position:relative;text-decoration:none}
.mega-item:hover{background:rgba(99,102,241,.06)}
.mega-ico{flex:0 0 38px;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;border:1.5px solid currentColor;background:transparent}
.mega-ico svg{width:20px;height:20px}
.mega-item:hover .mega-ico{transform:scale(1.06)}
.mega-txt b{display:block;font-size:14px;color:#0a0e27;font-weight:700;margin-bottom:1px;line-height:1.25}
.mega-txt span{font-size:12.5px;color:#767ea3;line-height:1.3;text-wrap:pretty}
.mega-item::after{content:"";position:absolute;left:62px;bottom:6px;height:2px;width:0;
  background:var(--grad-cta,linear-gradient(135deg,#6366f1,#8b5cf6,#ec4899));border-radius:2px;transition:width .22s var(--e-out,ease)}
.mega-item:hover::after{width:calc(100% - 76px)}
.mega-feat{border-left:1px solid rgba(15,23,42,.08);padding-left:24px;display:flex;flex-direction:column}
.mega-feat .tag{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8b5cf6;margin-bottom:8px}
.mega-feat-card{border-radius:18px;overflow:hidden;border:1px solid rgba(15,23,42,.08);
  background:linear-gradient(160deg,#fff,#f5f3ff);box-shadow:0 4px 14px rgba(15,23,42,.08);flex:1;display:flex;flex-direction:column;justify-content:center;padding:20px 18px}
.mega-feat-card .btn{margin-top:14px}
.mega-feat-card h4{font-size:15px;margin:0 0 6px}
.mega-feat-card p{font-size:12.5px;color:#767ea3;margin:0 0 12px}
.mega-feat-viz{margin-top:auto;border-radius:12px;overflow:hidden}

/* icon tile hues */
.hue-amber{color:#f59e0b}
.hue-violet{color:#7c3aed}
.hue-sky{color:#0ea5e9}
.hue-rose{color:#f43f5e}
.hue-cyan{color:#06b6d4}
.hue-green{color:#16a34a}
.hue-emerald{color:#10b981}
.hue-indigo{color:#6366f1}
.hue-pink{color:#ec4899}
.hue-orange{color:#f97316}
.hue-teal{color:#14b8a6}
.hue-slate{color:#64748b}

/* mobile drawer */
.mkt-burger{display:none;background:none;border:0;color:#0a0e27;cursor:pointer}
.mkt-drawer{position:fixed;inset:0 0 0 auto;width:min(420px,90vw);z-index:1100;background:#fff;
  transform:translateX(100%);transition:transform .3s var(--e-out,ease);box-shadow:0 28px 80px rgba(15,23,42,.16);overflow-y:auto;padding:18px}
.mkt-drawer.open{transform:translateX(0)}
.mkt-drawer-ov{position:fixed;inset:0;z-index:1099;background:rgba(10,14,39,.4);opacity:0;visibility:hidden;transition:.25s}
.mkt-drawer-ov.open{opacity:1;visibility:visible}
.mkt-acc>summary{list-style:none;cursor:pointer;font-weight:700;font-size:16px;color:#0a0e27;padding:14px 6px;border-bottom:1px solid rgba(15,23,42,.08);display:flex;justify-content:space-between}
.mkt-acc>summary::-webkit-details-marker{display:none}
.mkt-acc[open]>summary{color:#8b5cf6}
.mkt-acc .sub{padding:6px 6px 14px}
.mkt-acc .sub a{display:block;padding:9px 8px;font-size:14.5px;color:#4b5176;border-radius:8px;text-decoration:none}
.mkt-acc .sub a:hover{background:#f4f5fb;color:#8b5cf6}

@media(max-width:980px){
  .mkt-nav-links,.mkt-nav-actions .btn-ghost{display:none}
  .mkt-burger{display:block}
  .mega-grid{grid-template-columns:1fr 1fr}.mega-feat{display:none}
}
@media(max-width:560px){ .mega-grid{grid-template-columns:1fr} }