/* Shared marketing navigation — dropdowns, mobile menu, keyboard/focus. One copy for every
   page (SEO layout + homepage + agency + blog). Uses each page's brand tokens with safe
   fallbacks so it renders correctly wherever it's linked. Namespaced .snav-* to avoid clashing
   with any page's existing nav CSS. Interaction is in /nav.js. */

/* The page keeps its own <nav> wrapper class (positioning/background); we only ensure it can
   anchor the mobile panel and lay out as a flex row. */
.snav-wrap{position:relative}
.snav-panel{display:flex;align-items:center;flex:1;gap:16px;justify-content:space-between;margin-left:26px}

.snav-menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.snav-item{position:relative}

.snav-top{display:inline-flex;align-items:center;gap:6px;font-family:var(--fb,'Inter',sans-serif);
  font-weight:600;font-size:14px;line-height:1;color:var(--ink2,#565185);background:none;border:0;
  cursor:pointer;padding:9px 12px;border-radius:10px;text-decoration:none;white-space:nowrap}
.snav-top:hover,.snav-top:focus-visible{color:var(--pp,#6f33fb)}
.snav-top:focus-visible{outline:2px solid var(--pp,#6f33fb);outline-offset:2px}
.snav-caret{transition:transform .18s ease;opacity:.75}
.snav-item.snav-open>.snav-top .snav-caret{transform:rotate(180deg)}
.snav-item.snav-open>.snav-top{color:var(--pp,#6f33fb)}

/* Desktop dropdown */
.snav-drop{position:absolute;top:100%;left:0;min-width:250px;padding:8px;margin-top:8px;
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:var(--gborder,1px solid rgba(255,255,255,.7));border-radius:16px;
  box-shadow:var(--gshadow,0 24px 70px rgba(86,70,160,.18));
  display:flex;flex-direction:column;gap:1px;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s}
/* invisible bridge so the pointer can travel from button to menu without closing */
.snav-drop::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.snav-item.snav-open>.snav-drop{opacity:1;visibility:visible;transform:none}
.snav-drop a{display:block;padding:9px 12px;border-radius:10px;font-size:14px;font-weight:500;
  color:var(--ink2,#565185);white-space:nowrap}
.snav-drop a:hover,.snav-drop a:focus-visible{background:rgba(111,51,251,.09);color:var(--pp,#6f33fb)}
.snav-drop a:focus-visible{outline:none}
.snav-viewall{margin-top:5px;border-top:1px solid var(--line,rgba(120,100,190,.16));
  padding-top:11px!important;color:var(--pp,#6f33fb)!important;font-weight:700!important}

/* CTA cluster (pages that use link CTAs get these; homepage/agency keep their own button classes) */
.snav-cta{display:flex;align-items:center;gap:12px}
.snav-login{background:none;border:0;cursor:pointer;font-family:var(--fd,'Plus Jakarta Sans',sans-serif);
  font-weight:700;font-size:13px;color:var(--ink2,#565185);padding:10px 8px;text-decoration:none;white-space:nowrap}
.snav-login:hover,.snav-login:focus-visible{color:var(--pp,#6f33fb)}
.snav-start{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:999px;
  background:linear-gradient(135deg,var(--pp,#6f33fb),var(--ppd,#5a22e6));color:#fff!important;
  font-family:var(--fd,'Plus Jakarta Sans',sans-serif);font-weight:700;font-size:13px;border:0;cursor:pointer;
  text-decoration:none;white-space:nowrap;box-shadow:0 12px 28px rgba(111,51,251,.34)}
.snav-start:hover{transform:translateY(-1px)}

/* Burger (mobile only) */
.snav-burger{display:none;background:none;border:0;cursor:pointer;padding:8px;border-radius:10px;margin-left:auto}
.snav-burger span{display:block;width:22px;height:2px;background:var(--ink,#272250);margin:4px 0;border-radius:2px;transition:.2s}
.snav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.snav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.snav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------------------- Mobile ---------------------- */
@media (max-width:900px){
  .snav-burger{display:inline-flex}
  .snav-panel{position:absolute;top:calc(100% + 12px);left:0;right:0;margin:0;flex-direction:column;
    align-items:stretch;gap:2px;padding:10px;
    background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
    border:var(--gborder,1px solid rgba(255,255,255,.7));border-radius:18px;
    box-shadow:var(--gshadow,0 24px 70px rgba(86,70,160,.2));
    max-height:calc(100vh - 130px);overflow-y:auto;display:none}
  .snav-panel.snav-panel-open{display:flex}
  .snav-menu{flex-direction:column;align-items:stretch;gap:1px;width:100%}
  .snav-item{width:100%}
  .snav-top{width:100%;justify-content:space-between;font-size:15px;padding:13px 12px}
  .snav-drop{position:static;min-width:0;margin:0;padding:2px 0 6px 8px;border:0;box-shadow:none;
    background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;
    opacity:1;visibility:visible;transform:none;transition:none;display:none}
  .snav-drop::before{display:none}
  .snav-item.snav-open>.snav-drop{display:flex}
  .snav-drop a{padding:11px 12px}
  .snav-viewall{margin-top:2px}
  .snav-cta{flex-direction:column;align-items:stretch;gap:8px;width:100%;margin-top:8px;
    border-top:1px solid var(--line,rgba(120,100,190,.16));padding-top:12px}
  .snav-cta>*{width:100%;justify-content:center;text-align:center}
  .snav-start{padding:13px 18px}
  .snav-login{padding:12px 8px}
}