:root{
  --cfmsm-bg:#0b1220;
  --cfmsm-text:#ffffff;
  --cfmsm-hover:#60a5fa;
  --cfmsm-active:#93c5fd;
  --cfmsm-sticky-bg: var(--cfmsm-bg);
  --cfmsm-sticky-text: var(--cfmsm-text);
  --cfmsm-height:64px;
  --cfmsm-radius:12px;
  --cfmsm-gap:14px;
  --cfmsm-pad-x:16px;
  --cfmsm-pad-y:10px;
  --cfmsm-sub-bg:#0f172a;
  --cfmsm-sub-text:#e5e7eb;
  --cfmsm-sub-border:rgba(255,255,255,0.06);
  --cfmsm-sub-radius:12px;
  --cfmsm-sub-shadow:2;
  --cfmsm-ease:ease;
}

/* Navbar base */
.cfmsm-navbar{ position:relative; background: var(--cfmsm-bg); color: var(--cfmsm-text); border-radius: var(--cfmsm-radius); }
.cfmsm-container{ max-width:1200px; margin:0 auto; padding:0 16px; min-height:var(--cfmsm-height); display:flex; align-items:center; }
.cfmsm-flex{ width:100%; display:flex; align-items:center; gap:var(--cfmsm-gap); justify-content:flex-start; }
.cfmsm-logo img{ display:block; height:auto; max-height: calc(var(--cfmsm-height) - 22px); width:auto; }

/* Toggle button */
.cfmsm-toggle{ margin-inline-start:auto; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; background:transparent; border:0; cursor:pointer; }

/* Nav structure */
.cfmsm-nav-wrap{ width:100%; }
.cfmsm-nav{ list-style:none; margin:0; padding:0; display:none; }
.cfmsm-nav > li{ position:relative; }
.cfmsm-link{ display:inline-flex; align-items:center; gap:8px; padding: var(--cfmsm-pad-y) var(--cfmsm-pad-x); color:inherit; text-decoration:none; transition: background .25s var(--cfmsm-ease), transform .25s var(--cfmsm-ease), box-shadow .25s var(--cfmsm-ease); }
.cfmsm-link:hover{ color: var(--cfmsm-hover); }

/* Desktop default (safety): will be overridden per-instance by JS rules */
@media (min-width: 992px){
  .cfmsm-toggle{ display:none; }
  .cfmsm-nav{ display:flex; }
}

/* Style variants */
.cfmsm-style-pill .cfmsm-link{ border-radius:999px; }
.cfmsm-style-boxed .cfmsm-link{ background: rgba(255,255,255,.06); border-radius:8px; }
.cfmsm-style-ghost .cfmsm-link:hover{ outline:1px solid color-mix(in oklab, var(--cfmsm-hover) 35%, transparent); }

/* Underline variant */
.cfmsm-style-underline .cfmsm-link{ position:relative; }
.cfmsm-style-underline .cfmsm-link::after{ content:''; position:absolute; left:12px; right:12px; bottom:6px; height:2px; background: currentColor; transform: scaleX(0); transform-origin:center; transition: transform .18s var(--cfmsm-ease); }
.cfmsm-style-underline .cfmsm-link:hover::after,
.cfmsm-style-underline .current-menu-item > .cfmsm-link::after{ transform: scaleX(1); }

/* Submenu */
.cfmsm-nav .menu-item-has-children > .cfmsm-link::after{ content:'▾'; margin-inline-start:6px; font-size:.85em; opacity:.8; }
.cfmsm-sub{ position:absolute; top:100%; inset-inline-start:0; min-width:220px; background: var(--cfmsm-sub-bg); color: var(--cfmsm-sub-text); border:1px solid var(--cfmsm-sub-border); border-radius: var(--cfmsm-sub-radius); box-shadow: 0 calc(6px*var(--cfmsm-sub-shadow)) calc(18px*var(--cfmsm-sub-shadow)) rgba(0,0,0,.35); padding:8px; opacity:0; transform: translateY(8px); pointer-events:none; transition: opacity .2s var(--cfmsm-ease), transform .2s var(--cfmsm-ease); z-index: 9999; }
.cfmsm-sub li{ position:relative; }
.cfmsm-sub a{ display:flex; padding:8px 10px; color: inherit; text-decoration:none; border-radius:8px; }
.cfmsm-sub a:hover{ background: rgba(255,255,255,.06); color: var(--cfmsm-hover); }

/* Hover open (default) */
.cfmsm-nav > li:hover > .cfmsm-sub, .cfmsm-nav > li:focus-within > .cfmsm-sub{ opacity:1; transform:none; pointer-events:auto; }

/* Mega panel */
.cfmsm-has-mega{ position: static; }
.cfmsm-mega-panel{
  position:absolute; top:100%; left:0; width: var(--cfmsm-mega-w, 960px); max-width: 96vw;
  background: var(--cfmsm-sub-bg); color: var(--cfmsm-sub-text);
  border:1px solid var(--cfmsm-sub-border); border-radius: var(--cfmsm-sub-radius);
  box-shadow: 0 calc(6px*var(--cfmsm-sub-shadow)) calc(18px*var(--cfmsm-sub-shadow)) rgba(0,0,0,.35);
  padding:16px; display:none; z-index: 10000;
}
.cfmsm-mega-panel[data-align="center"]{ left:50%; transform: translateX(-50%); }
.cfmsm-mega-panel[data-align="end"]{ left:auto; right:0; transform:none; }
.cfmsm-mega-panel > *{ display:grid; grid-template-columns: repeat(var(--cfmsm-mega-cols, 4), minmax(0,1fr)); gap:16px; }

.cfmsm-has-mega:hover > .cfmsm-mega-panel,
.cfmsm-has-mega.cfmsm-open > .cfmsm-mega-panel{ display:block; }

/* Mobile open */
.cfmsm-open .cfmsm-nav{ display:block; }

/* CTA */
.cfmsm-cta-link{ margin-inline-start:auto; border-radius:999px; padding:10px 16px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; }
.cfmsm-cta-link.cfmsm-outline{ background: transparent; border:1px solid currentColor; }
.cfmsm-cta-link.cfmsm-ghost{ background: transparent; opacity:.85; }

/* === Design Presets === */
.cfmsm-preset-dark-elegant{ --cfmsm-bg:#0b1220; --cfmsm-text:#e5e7eb; --cfmsm-hover:#60a5fa; --cfmsm-active:#93c5fd; }
.cfmsm-preset-light-clean{ --cfmsm-bg:#ffffff; --cfmsm-text:#0b1220; --cfmsm-hover:#2563eb; --cfmsm-active:#1e3a8a; border:1px solid rgba(0,0,0,.06); }
.cfmsm-preset-glass-blur{ background: rgba(255,255,255,.08); backdrop-filter: blur(12px); --cfmsm-text:#e5e7eb; --cfmsm-hover:#a5b4fc; --cfmsm-active:#c4b5fd; }
.cfmsm-preset-gradient-sunset{ background: linear-gradient(90deg,#ff7a7a,#ffb86c); --cfmsm-text:#1f2937; --cfmsm-hover:#111827; --cfmsm-active:#111827; }
.cfmsm-preset-boxed-bold .cfmsm-link{ background: rgba(0,0,0,.08); border-radius: 10px; }
.cfmsm-preset-minimal-underline{ --cfmsm-bg: transparent; border:0; }

/* === Indicator Styles (Active) === */
.cfmsm-ind-underline .current-menu-item > .cfmsm-link::after{ content:''; position:absolute; inset-inline-start:12px; inset-inline-end:12px; bottom:6px; height:2px; background: currentColor; transform: scaleX(1); }
.cfmsm-ind-overline .current-menu-item > .cfmsm-link::before{ content:''; position:absolute; inset-inline-start:12px; inset-inline-end:12px; top:6px; height:2px; background: currentColor; }
.cfmsm-ind-border-b .current-menu-item > .cfmsm-link{ box-shadow: inset 0 -3px 0 var(--cfmsm-active); }
.cfmsm-ind-pill-active .current-menu-item > .cfmsm-link{ background: color-mix(in oklab, var(--cfmsm-hover) 18%, transparent); border-radius:999px; }
.cfmsm-ind-dot .current-menu-item > .cfmsm-link::before{ content:''; width:6px; height:6px; border-radius:999px; background: currentColor; position:absolute; inset-inline-start:8px; top:50%; transform: translateY(-50%); }
.cfmsm-ind-caret .current-menu-item > .cfmsm-link::after{ content:'▾'; margin-inline-start:6px; }
.cfmsm-ind-glow .current-menu-item > .cfmsm-link{ text-shadow: 0 0 12px color-mix(in oklab, currentColor 60%, transparent); }
.cfmsm-ind-corner .current-menu-item > .cfmsm-link{ position:relative; }
.cfmsm-ind-corner .current-menu-item > .cfmsm-link::before,
.cfmsm-ind-corner .current-menu-item > .cfmsm-link::after{ content:''; position:absolute; width:10px; height:10px; border:2px solid currentColor; }
.cfmsm-ind-corner .current-menu-item > .cfmsm-link::before{ inset-inline-start:8px; top:8px; border-right:none; border-bottom:none; }
.cfmsm-ind-corner .current-menu-item > .cfmsm-link::after{ inset-inline-end:8px; bottom:8px; border-left:none; border-top:none; }
.cfmsm-ind-marker .current-menu-item > .cfmsm-link{ box-shadow: inset 0 -8px 0 color-mix(in oklab, var(--cfmsm-hover) 25%, transparent); }
.cfmsm-ind-gradient-ul .current-menu-item > .cfmsm-link::after{ content:''; position:absolute; inset-inline-start:12px; inset-inline-end:12px; bottom:6px; height:3px; background: linear-gradient(90deg, var(--cfmsm-grad-from, var(--cfmsm-hover)), var(--cfmsm-grad-to, var(--cfmsm-active))); }
.cfmsm-ind-double .current-menu-item > .cfmsm-link::after{ content:''; position:absolute; inset-inline-start:12px; inset-inline-end:12px; bottom:6px; height:2px; background: currentColor; box-shadow: 0 -4px 0 currentColor; }

/* === Hover Effects === */
.cfmsm-hover-underline-slide .cfmsm-link{ position:relative; }
.cfmsm-hover-underline-slide .cfmsm-link::after{ content:''; position:absolute; inset-inline-start:12px; inset-inline-end:12px; bottom:6px; height:2px; background: currentColor; transform: scaleX(0); transition: transform .2s var(--cfmsm-ease); transform-origin:center; }
.cfmsm-hover-underline-slide .cfmsm-link:hover::after{ transform: scaleX(1); }
.cfmsm-hover-lift .cfmsm-link{ transition: transform .2s var(--cfmsm-ease); }
.cfmsm-hover-lift .cfmsm-link:hover{ transform: translateY(-2px); }
.cfmsm-hover-glow .cfmsm-link:hover{ text-shadow: 0 0 10px color-mix(in oklab, currentColor 65%, transparent); }
.cfmsm-hover-wipe .cfmsm-link{ background: linear-gradient(90deg, currentColor 0 0) no-repeat left bottom / 0 2px; transition: background-size .25s var(--cfmsm-ease); }
.cfmsm-hover-wipe .cfmsm-link:hover{ background-size: 100% 2px; }
.cfmsm-hover-scale .cfmsm-link:hover{ transform: scale(1.04); }
.cfmsm-hover-tilt .cfmsm-link:hover{ transform: skewX(-4deg); }
.cfmsm-hover-border-grow .cfmsm-link{ transition: box-shadow .2s var(--cfmsm-ease); }
.cfmsm-hover-border-grow .cfmsm-link:hover{ box-shadow: inset 0 -3px 0 currentColor; }
.cfmsm-hover-shadow-pulse .cfmsm-link:hover{ box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.cfmsm-hover-letter-space .cfmsm-link:hover{ letter-spacing: .6px; }
.cfmsm-hover-flip .cfmsm-link{ transition: transform .3s var(--cfmsm-ease); transform-style: preserve-3d; }
.cfmsm-hover-flip .cfmsm-link:hover{ transform: rotateX(18deg); }