@charset "UTF-8";
/* =============================================================================
   WHMCSModule Networks V2 - Modern Design System
   Version: 2.0
   ============================================================================= */

/* ----------------------------------------------
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ---------------------------------------------- */
:root {
  /* Brand Colors */
  --brand-primary:       #0057FF;
  --brand-primary-hover: #0042C2;
  --brand-gradient:      linear-gradient(135deg, #0057FF 0%, #1433D6 100%);
  --brand-green:         #17B26A;
  --brand-orange:        #F47D20;
  --brand-purple:        #7C3AED;

  /* Grays */
  --gray-50:   #FCFCFD;
  --gray-100:  #F9FAFB;
  --gray-200:  #F2F4F7;
  --gray-300:  #EAECF0;
  --gray-400:  #D0D5DD;
  --gray-500:  #98A2B3;
  --gray-600:  #6B6F7B;
  --gray-700:  #4E515A;
  --gray-800:  #393B42;
  --gray-900:  #1A1B1E;
  --gray-950:  #0E0F10;

  /* Semantic */
  --text-primary:   #1A1B1E;
  --text-secondary: #6B6F7B;
  --text-muted:     #98A2B3;
  --text-white:     #FFFFFF;
  --bg-white:       #FFFFFF;
  --bg-light:       #F9FAFB;
  --bg-dark:        #0E0F10;
  --border-color:   #EAECF0;
  --border-dark:    #2C2D30;

  /* Typography */
  --font-heading: 'Figtree', 'Rubik', sans-serif;
  --font-body:    'Inter', 'Rubik', sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* Font Sizes (Scaled up globally for high readability across all pages) */
  --fs-xs:   0.9375rem;  /* 15px */
  --fs-sm:   1.0625rem;  /* 17px */
  --fs-base: 1.1875rem;  /* 19px */
  --fs-lg:   1.375rem;   /* 22px */
  --fs-xl:   1.5rem;     /* 24px */
  --fs-2xl:  1.875rem;   /* 30px */
  --fs-3xl:  2.375rem;   /* 38px */
  --fs-4xl:  3rem;       /* 48px */
  --fs-5xl:  3.75rem;    /* 60px */

  /* Spacing */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-6: 1.5rem;   --space-8: 2rem;
  --space-10: 2.5rem;  --space-12: 3rem;    --space-16: 4rem;
  --space-20: 5rem;    --space-24: 6rem;

  /* Radii */
  --radius-sm:   4px;   --radius-md:   8px;
  --radius-lg:   12px;  --radius-xl:   16px;
  --radius-2xl:  24px;  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:    0 4px 16px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.05);
  --shadow-lg:    0 10px 40px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.08);
  --shadow-brand: 0 8px 32px rgba(0,87,255,.30);

  /* Transitions */
  --transition-base: all 0.25s ease;
  --transition-slow: all 0.45s ease;
}

/* ----------------------------------------------
   2. RESET & BASE
   ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body) !important;
  font-size: var(--fs-base);
  color: var(--text-secondary);
  line-height: 1.75;
  background: var(--bg-white);
  -webkit-font-smoothing: antialiased;
}

/* -- Wider container - fills large screens, removes side gaps -- */
.container {
  max-width: 1400px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  width: 100% !important;
}
@media (max-width: 1440px) { .container { max-width: 1280px !important; } }
@media (max-width: 1280px) { .container { max-width: 1140px !important; } }
@media (max-width: 1024px) { .container { max-width: 960px !important; } }
@media (max-width: 768px)  { .container { padding-left: 16px !important; padding-right: 16px !important; } }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading) !important;
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.5px;
  margin-top: 0;
}

h1 { font-size: clamp(2.25rem, 4vw + 1rem, var(--fs-5xl)); }
h2 { font-size: clamp(1.875rem, 3vw + .5rem, var(--fs-4xl)); }
h3 { font-size: clamp(1.5rem, 2vw + .5rem, var(--fs-3xl)); }
h4 { font-size: clamp(1.25rem, 1.5vw + .25rem, var(--fs-2xl)); }

p { margin-top: 0; margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
a { color: var(--brand-primary); text-decoration: none; transition: var(--transition-base); }
a:hover { color: var(--brand-primary-hover); text-decoration: none; }
img { max-width: 100%; height: auto; }

/* ----------------------------------------------
   3. PRELOADER - Futuristic Orbit & Glow System
   ---------------------------------------------- */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #060913;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
}

#preloader.loaded {
  opacity: 0;
  pointer-events: none;
}

.wm-preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  max-width: 420px;
  width: 100%;
}

/* Logo with breathing glow */
.wm-preloader-logo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wm-preloader-logo-img {
  height: 48px;
  width: auto;
  filter: drop-shadow(0 0 16px rgba(0, 87, 255, 0.65));
  animation: wm-logo-pulse 2.2s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes wm-logo-pulse {
  0%   { transform: scale(0.98); opacity: 0.85; }
  100% { transform: scale(1.03); opacity: 1; }
}

/* Futuristic 3-Ring Orbit Spinner */
.wm-preloader-orbit {
  position: relative;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wm-orbit-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
}

.wm-ring-1 {
  border-top-color: #0057FF;
  border-right-color: #0057FF;
  animation: wm-orbit-cw 1.2s linear infinite;
  box-shadow: 0 0 15px rgba(0, 87, 255, 0.5);
}

.wm-ring-2 {
  inset: 8px;
  border-bottom-color: #00D2FF;
  border-left-color: #00D2FF;
  animation: wm-orbit-ccw 0.9s linear infinite;
  box-shadow: 0 0 15px rgba(0, 210, 255, 0.5);
}

.wm-ring-3 {
  inset: 16px;
  border-top-color: #17B26A;
  animation: wm-orbit-cw 1.6s linear infinite;
}

.wm-orbit-core {
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #00D2FF 0%, #0057FF 100%);
  border-radius: 50%;
  box-shadow: 0 0 16px #00D2FF;
  animation: wm-core-pulse 1s ease-in-out infinite alternate;
}

@keyframes wm-orbit-cw {
  to { transform: rotate(360deg); }
}

@keyframes wm-orbit-ccw {
  to { transform: rotate(-360deg); }
}

@keyframes wm-core-pulse {
  from { transform: scale(0.8); opacity: 0.6; }
  to   { transform: scale(1.3); opacity: 1; }
}

/* Animated Progress Bar */
.wm-preloader-progress-wrap {
  width: 100%;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.wm-preloader-bar-bg {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.wm-preloader-bar-fill {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #0057FF, #00D2FF, #17B26A);
  border-radius: 999px;
  transform-origin: left center;
  animation: wm-bar-fill 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  box-shadow: 0 0 12px #00D2FF;
  will-change: transform;
}

@keyframes wm-bar-fill {
  0%   { transform: scaleX(0); }
  50%  { transform: scaleX(0.7); }
  100% { transform: scaleX(1); }
}

.wm-preloader-status {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.60);
  text-transform: uppercase;
}

.wm-loading-dots span {
  animation: wm-dot-blink 1.4s infinite fill-mode: both;
}
.wm-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.wm-loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes wm-dot-blink {
  0%, 80%, 100% { opacity: 0.2; }
  40%           { opacity: 1; }
}

/* Hide legacy preloader elements */
#preloader .animation-preloader,
#preloader .txt-loading,
#preloader .spinner.old,
#preloader .loader { display: none !important; }

/* ----------------------------------------------
   4. BODY PADDING + WRAPPER GAP FIX
   ---------------------------------------------- */

/* Override all conflicting body padding/margin from style.css.
   style.css sets body{padding-top:40px} and body{padding:0} at various
   breakpoints - we need exactly 68px (navbar height) and nothing else. */
body {
  padding-top: 68px !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 0 !important;
}

/* Kill any gap the original style.css puts on #wrapper / .wrapper.
   style.css sets wrapper{margin:0 0 0 270px!important} for sidebar layouts
   - reset that entirely for the new full-width theme. */
#wrapper,
.wrapper,
#wrapper.wrapper,
.wrapper.clearfix {
  margin: 0 !important;
  padding-top: 0 !important;
}

/* Kill any legacy header spacer elements */
.header-spacer,
#header-spacer,
.header-placeholder { display: none !important; height: 0 !important; }

/* ----------------------------------------------
   5. NAVBAR - Single unified sticky dark nav
   ---------------------------------------------- */

/* Hide old mobile-only navbar from themf */
nav.navbar.navbar-expand-md.new-navbar { display: none !important; }
/* Hide themf topbar */
#top-bar { display: none !important; }

/* Main nav */
#navbar-spy,
.wm-header-nav {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1050;
  background: rgba(8, 12, 24, 0.94) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background 0.35s ease, box-shadow 0.35s ease;
  padding: 0 !important;
  margin: 0 !important;
  height: 68px;
}

#navbar-spy.scrolled,
.wm-header-nav.scrolled {
  background: rgba(6, 9, 18, 0.98) !important;
  box-shadow: 0 4px 32px rgba(0,0,0,.40);
}

#navbar-spy .container,
.wm-header-nav .container {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  padding-top: 0;
  padding-bottom: 0;
  background: transparent !important;
  background-color: transparent !important;
}

/* Logo */
#navbar-spy .logo,
.wm-header-nav .logo {
  display: flex;
  align-items: center;
}

#navbar-spy .logo img,
#navbar-spy .logo img.logo-dark,
#navbar-spy .logo img.logo-light,
#navbar-spy .logo img.logo-colored,
.wm-header-nav .logo img,
.wm-header-nav .logo img.logo-dark,
.wm-header-nav .logo img.logo-light,
.wm-header-nav .logo img.logo-colored {
  height: 52px !important;
  max-height: 52px !important;
  width: auto !important;
  max-width: 240px !important;
  filter: none !important;
  object-fit: contain;
}

/* Desktop nav list */
.wm-desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
}

#navbar-spy .nav.navbar-nav,
.wm-header-nav .nav.navbar-nav {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
  flex-wrap: nowrap;
}

#navbar-spy .nav.navbar-nav > li,
.wm-header-nav .nav.navbar-nav > li { position: relative; }

#navbar-spy .nav.navbar-nav > li > a.menu-item,
#navbar-spy .nav.navbar-nav > li > a.nav-link,
.wm-header-nav .nav.navbar-nav > li > a.menu-item,
.wm-header-nav .nav.navbar-nav > li > a.nav-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 14px;
  font-family: var(--font-heading);
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.82) !important;
  border-radius: var(--radius-md);
  transition: var(--transition-base);
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border: none;
  position: relative;
}

#navbar-spy .nav.navbar-nav > li > a.dropdown-toggle::after,
#navbar-spy .nav.navbar-nav > li > a.menu-item.dropdown-toggle::after,
.wm-header-nav .nav.navbar-nav > li > a.dropdown-toggle::after {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(255,255,255,.60);
  margin-left: 4px;
  transition: transform 0.25s ease, border-top-color 0.25s ease;
  vertical-align: middle;
}

#navbar-spy .nav.navbar-nav > li.open > a.dropdown-toggle::after,
.wm-header-nav .nav.navbar-nav > li.open > a.dropdown-toggle::after {
  transform: rotate(180deg);
  border-top-color: #00D2FF;
}

#navbar-spy .nav.navbar-nav > li > a:hover,
#navbar-spy .nav.navbar-nav > li.open > a,
.wm-header-nav .nav.navbar-nav > li > a:hover,
.wm-header-nav .nav.navbar-nav > li.open > a {
  color: #FFFFFF !important;
  background: rgba(255,255,255,.09);
  box-shadow: inset 0 -2px 0 0 var(--brand-primary);
}

/* =============================================================================
   COMPLETE DROPDOWN & MEGA-MENU OVERRIDE (Nukes style.css #fff0 & #f2f2f2)
   ============================================================================= */

/* 1. Main Dropdown & Mega Menu Container (100% Solid Dark Blue-Black #0A0F1D) */
#navbar-spy .dropdown-menu,
.wm-header-nav .dropdown-menu,
.dropdown-menu.wm-mega-dropdown {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;
  transform: none !important;
  -webkit-transform: none !important;
  min-width: 240px;
  background-color: #0A0F1D !important;
  background: #0A0F1D !important;
  opacity: 1 !important;
  border: 1px solid rgba(0, 87, 255, 0.35) !important;
  border-top: 3px solid var(--brand-primary) !important;
  border-radius: 12px !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 87, 255, 0.25) !important;
  padding: 16px !important;
  margin: 0 !important;
  z-index: 99999 !important;
}

#navbar-spy .nav.navbar-nav li.open > .dropdown-menu,
#navbar-spy .nav.navbar-nav li:hover > .dropdown-menu,
.wm-header-nav .nav.navbar-nav li.open > .dropdown-menu,
.wm-header-nav .nav.navbar-nav li:hover > .dropdown-menu { 
  display: flex !important; 
}

/* 2. ADDONS 2-Column Mega Menu Positioning */
.wm-header-nav .dropdown-menu.wm-mega-2col {
  width: 560px !important;
  min-width: 560px !important;
  max-width: 560px !important;
  flex-direction: row !important;
  gap: 16px !important;
  left: 0 !important;
  transform: none !important;
  -webkit-transform: none !important;
}

.wm-header-nav ul.dropdown-menu.wm-mega-4col {
  width: 900px !important;
  min-width: 900px !important;
  max-width: 900px !important;
  flex-direction: row !important;
  gap: 16px !important;
  left: -200px !important;
  transform: none !important;
}

/* 3. Nuke style.css transparent background (#fff0) & white borders (#f2f2f2) on list items & anchors */
#navbar-spy ul.dropdown-menu li,
.wm-header-nav ul.dropdown-menu li,
#navbar-spy ul.dropdown-menu li a,
.wm-header-nav ul.dropdown-menu li a,
.wm-mega-col,
.wm-mega-col a {
  background-color: transparent !important;
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  height: auto !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

/* 4. Column Wrapper */
.wm-mega-col {
  flex: 1 1 0% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  background-color: #0A0F1D !important;
}

/* 5. Column Title Bar */
.wm-mega-title {
  font-family: var(--font-heading) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: #00D2FF !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 8px 10px 10px !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-radius: 6px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: auto !important;
  line-height: 1.4 !important;
}

/* 6. Mega Menu Link Items */
.wm-mega-col a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-radius: 6px !important;
  transition: all 0.18s ease !important;
  white-space: nowrap !important;
  background: transparent !important;
}

.wm-mega-col a i {
  font-size: 0.8125rem !important;
  width: 16px !important;
  text-align: center !important;
  color: #79A8FF !important;
  transition: transform 0.18s ease !important;
}

/* 7. Hover States */
.wm-mega-col a:hover {
  background-color: rgba(0, 87, 255, 0.25) !important;
  color: #00D2FF !important;
  transform: translateX(4px) !important;
  padding-left: 14px !important;
}

.wm-mega-col a:hover i {
  transform: scale(1.25) !important;
  color: #00D2FF !important;
}

/* Standard Single-Column Dropdowns (Cloud, Registrar, Services) */
.wm-header-nav ul.dropdown-menu:not(.wm-mega-dropdown) {
  width: 240px !important;
  min-width: 240px !important;
  padding: 10px !important;
  display: none !important;
  flex-direction: column !important;
}

.wm-header-nav ul.dropdown-menu:not(.wm-mega-dropdown) li a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 9px 14px !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-radius: 6px !important;
  transition: all 0.18s ease !important;
}

.wm-header-nav ul.dropdown-menu:not(.wm-mega-dropdown) li a:hover {
  background-color: rgba(0, 87, 255, 0.25) !important;
  color: #00D2FF !important;
  transform: translateX(4px) !important;
}

/* Sub-menus */
#navbar-spy .dropdown-submenu,
.wm-header-nav .dropdown-submenu { position: relative; }

#navbar-spy .dropdown-submenu > a::after,
.wm-header-nav .dropdown-submenu > a::after {
  content: '›';
  float: right;
  margin-left: 10px;
  font-size: 1.1rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.40);
  transition: color 0.2s ease, transform 0.2s ease;
}

#navbar-spy .dropdown-submenu:hover > a::after,
.wm-header-nav .dropdown-submenu:hover > a::after {
  color: #00D2FF;
  transform: translateX(2px);
}

#navbar-spy .dropdown-submenu > .dropdown-menu,
.wm-header-nav .dropdown-submenu > .dropdown-menu {
  top: -10px; left: 100%;
  transform: translateX(0) translateY(0);
  animation: wm-sub-in 0.2s ease;
}

@keyframes wm-sub-in {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

#navbar-spy .dropdown-submenu:hover > .dropdown-menu,
.wm-header-nav .dropdown-submenu:hover > .dropdown-menu { display: block; }

/* Right-side CTA button - Client Area icon */
.wm-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  gap: 0;
  background: var(--brand-gradient);
  color: #FFFFFF !important;
  border-radius: 50%;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(255, 255, 255, 0.20);
  box-shadow: 0 4px 16px rgba(0, 87, 255, 0.40);
  flex-shrink: 0;
  margin-left: 2px;
  text-decoration: none;
}
.wm-nav-cta i {
  font-size: 0.9rem;
  line-height: 1;
}
.wm-nav-cta-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.wm-nav-cta:hover {
  background: linear-gradient(135deg, #0066FF 0%, #1742FF 100%);
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 87, 255, 0.65), 0 0 12px rgba(0, 210, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.40);
}

/* Mobile hamburger */
.wm-nav-mobile-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: 10px;
  transition: var(--transition-base);
  margin-left: 8px;
}
.wm-nav-mobile-toggle span {
  display: block;
  width: 18px; height: 2px;
  background: rgba(255,255,255,.85);
  border-radius: 2px;
  transition: var(--transition-base);
  transform-origin: center;
}
.wm-nav-mobile-toggle span:nth-child(2) { margin: 4px 0; }
.wm-nav-mobile-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.wm-nav-mobile-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.wm-nav-mobile-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }

/* Mobile drawer */
.wm-mobile-drawer {
  position: fixed;
  top: 68px; left: 0; right: 0; bottom: 0;
  background: #080C18;
  z-index: 1040;
  overflow-y: auto;
  padding: 1.5rem 1.25rem;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  border-top: 1px solid var(--border-dark);
}
.wm-mobile-drawer.open { transform: translateX(0); }

.wm-mobile-drawer ul { list-style: none; padding: 0; margin: 0; }
.wm-mobile-drawer > ul > li { border-bottom: 1px solid var(--border-dark); }
.wm-mobile-drawer a {
  display: block;
  padding: 14px 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255,255,255,.80) !important;
}
.wm-mobile-drawer a:hover { color: #fff !important; }
.wm-mobile-cta-wrap { padding-top: 1.5rem; border-top: 1px solid var(--border-dark); margin-top: 1rem; }

/* ----------------------------------------------
   6. HERO SECTION
   ---------------------------------------------- */
.wm-hero {
  position: relative;
  min-height: auto !important;
  background: #080C18;
  overflow: hidden;
  padding: 1.75rem 0 2rem !important;
  margin-top: 0 !important;
}

/* Animated orbs */
.wm-hero::before {
  content: '';
  position: absolute;
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(0,87,255,.20) 0%, transparent 70%);
  top: -200px; left: -150px;
  border-radius: 50%;
  pointer-events: none;
  animation: wm-orb 9s ease-in-out infinite;
}
.wm-hero::after {
  content: '';
  position: absolute;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(23,178,106,.14) 0%, transparent 70%);
  bottom: -100px; right: 0;
  border-radius: 50%;
  pointer-events: none;
  animation: wm-orb 12s ease-in-out infinite reverse;
}
@keyframes wm-orb {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%       { transform: translate(30px,-40px) scale(1.06); }
}

/* Dot grid */
.wm-hero-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.wm-hero-content {
  position: relative;
  z-index: 2;
  min-height: 440px;
  contain: layout style;
}

#navbar-spy {
  min-height: 68px !important;
  box-sizing: border-box !important;
}

.wm-desktop-nav,
.wm-nav-actions {
  min-height: 40px !important;
  contain: layout style;
}

/* Eyebrow badge */
.wm-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(0, 87, 255, 0.18) !important;
  border: 1px solid rgba(0, 210, 255, 0.35) !important;
  border-radius: var(--radius-full);
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  font-family: var(--font-heading);
  color: #00D2FF !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 16px rgba(0, 87, 255, 0.20);
}
.wm-hero-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--brand-primary);
  border-radius: 50%;
  display: block;
  animation: wm-pulse 2s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes wm-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.6); opacity: 0.35; }
}

.wm-hero h1 {
  color: #fff;
  font-size: clamp(2.4rem, 5vw + .8rem, 4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1.5px;
  margin-bottom: 1.5rem;
}
.wm-hero h1 .highlight {
  background: linear-gradient(135deg, #4DA8FF 0%, #7C4DFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wm-hero-desc {
  font-size: var(--fs-lg);
  color: rgba(255,255,255,.58);
  line-height: 1.75;
  margin-bottom: 2rem;
  max-width: 500px;
}

/* Hero action buttons */
.wm-hero-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

.wm-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  background: var(--brand-primary);
  color: #fff !important;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: var(--font-body);
  transition: var(--transition-base);
  border: 2px solid var(--brand-primary);
  box-shadow: var(--shadow-brand);
  cursor: pointer;
}
.wm-btn-primary:hover {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 48px rgba(0,87,255,.42);
}

.wm-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  background: transparent;
  color: rgba(255,255,255,.82) !important;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: var(--font-body);
  transition: var(--transition-base);
  border: 2px solid rgba(255,255,255,.22);
  cursor: pointer;
}
.wm-btn-outline:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.42);
  color: #fff !important;
}

/* Hero stats strip */
.wm-hero-stats {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.wm-hero-stat-value {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: #fff;
}
.wm-hero-stat-label {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.42);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Hero floating badges */
.wm-hero-badge {
  position: absolute;
  bottom: 12px; left: -10px;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: wm-float 4s ease-in-out infinite;
  z-index: 5;
}
.wm-hero-badge2 { top: 12px; right: -10px; bottom: auto; left: auto; animation-delay: -2s; }
.wm-hero-badge-icon {
  width: 34px; height: 34px;
  background: var(--brand-gradient);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .85rem; flex-shrink: 0;
}
.wm-hero-badge-text strong { display: block; font-size: .8125rem; font-weight: 700; color: var(--text-primary); }
.wm-hero-badge-text span  { font-size: .65rem; color: var(--text-muted); font-family: var(--font-mono); }
@keyframes wm-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* Hero card (carousel wrapper) & complete reset of old style.css .carousel-item heights */
.wm-hero-card {
  background: transparent !important;
  border: none !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  backdrop-filter: none !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35) !important;
  height: auto !important;
}

.wm-hero-card .carousel-inner {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  border-radius: 20px !important;
}

.wm-hero-card .carousel-item {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  -webkit-transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.wm-hero-card img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 800 / 520 !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.wm-hero-visual {
  position: relative;
  height: auto !important;
  overflow: visible !important;
  max-width: 100% !important;
}

/* Currency Selector Dark Dropdown Styling */
#currencySelector,
.currency-dropdown {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background: rgba(255, 255, 255, 0.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23FFFFFF' opacity='0.7' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 10px center !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  padding: 7px 28px 7px 12px !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  font-family: var(--font-heading) !important;
  cursor: pointer !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

#currencySelector:hover,
#currencySelector:focus,
.currency-dropdown:hover,
.currency-dropdown:focus {
  background-color: rgba(255, 255, 255, 0.14) !important;
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 14px rgba(0, 87, 255, 0.35) !important;
}

#currencySelector option,
.currency-dropdown option {
  background-color: #0B1021 !important;
  color: #FFFFFF !important;
  font-size: 0.875rem !important;
  padding: 10px 14px !important;
  border: none !important;
}

/* ----------------------------------------------
   7. INTEGRATION LOGOS STRIP
   ---------------------------------------------- */
.wm-logos-strip {
  background: #080C19 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 2.25rem 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

html[data-theme="light"] .wm-logos-strip {
  background: #FFFFFF !important;
  border-top: 1px solid #E2E8F0 !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

.wm-logos-label {
  font-family: 'Figtree', var(--font-heading), sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  color: #00D2FF !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  text-align: center !important;
  margin-bottom: 1.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}

.wm-logos-label::before,
.wm-logos-label::after {
  content: '' !important;
  width: 40px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(0, 210, 255, 0.5)) !important;
}
.wm-logos-label::after {
  background: linear-gradient(90deg, rgba(0, 210, 255, 0.5), transparent) !important;
}

html[data-theme="light"] .wm-logos-label {
  color: #0057FF !important;
}

html[data-theme="light"] .wm-logos-label::before {
  background: linear-gradient(90deg, transparent, rgba(0, 87, 255, 0.4)) !important;
}
html[data-theme="light"] .wm-logos-label::after {
  background: linear-gradient(90deg, rgba(0, 87, 255, 0.4), transparent) !important;
}

.wm-logos-track-outer {
  overflow: hidden !important;
  -webkit-mask: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%) !important;
  mask: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%) !important;
}

.wm-logos-track {
  display: flex !important;
  align-items: center !important;
  gap: 3.5rem !important;
  animation: wm-scroll 26s linear infinite !important;
  width: max-content !important;
}

.wm-logos-track:hover { animation-play-state: paused !important; }

.wm-logos-track img {
  height: 34px !important;
  width: auto !important;
  filter: grayscale(1) opacity(0.55) brightness(1.2) !important;
  transition: all 0.3s ease !important;
  flex-shrink: 0 !important;
}

html[data-theme="light"] .wm-logos-track img {
  filter: grayscale(1) opacity(0.60) !important;
}

.wm-logos-track img:hover {
  filter: grayscale(0) opacity(1) brightness(1) !important;
  transform: scale(1.08) !important;
}
@keyframes wm-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ----------------------------------------------
   8. SECTION UTILITIES
   ---------------------------------------------- */
.wm-section     { padding: 5rem 0; }
.wm-section-alt { background: var(--bg-light); padding: 5rem 0; }
.wm-section-dark{ background: var(--bg-dark); padding: 5rem 0; }

.wm-section-header { margin-bottom: 3rem; }
.wm-section-header.centered { text-align: center; }

.wm-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(0, 87, 255, 0.16) !important;
  border: 1px solid rgba(0, 210, 255, 0.35) !important;
  border-radius: var(--radius-full);
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  font-family: var(--font-heading);
  color: #00D2FF !important;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}

.wm-platform-pills { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 0.85rem; 
  margin-top: 1.5rem; 
}

.wm-platform-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 20px !important;
  border-radius: 999px !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  font-family: 'Figtree', var(--font-body), sans-serif !important;
  color: #FFFFFF !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  letter-spacing: 0.2px !important;
  text-decoration: none !important;
}

.wm-platform-pill i,
.wm-pill-icon,
.wm-pill-img-favicon {
  width: 20px !important;
  height: 20px !important;
  font-size: 0.875rem !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  border-radius: 5px !important;
  transition: transform 0.25s ease !important;
}

.wm-platform-pill:hover i,
.wm-platform-pill:hover .wm-pill-icon,
.wm-platform-pill:hover .wm-pill-img-favicon {
  transform: scale(1.18) rotate(-6deg) !important;
}

.wm-platform-pill:hover {
  transform: translateY(-3px) scale(1.03) !important;
}

.wm-platform-pill.pill-whmcs {
  background: linear-gradient(135deg, #0057FF 0%, #00C2FF 100%) !important;
  box-shadow: 0 6px 20px rgba(0, 150, 255, 0.40) !important;
}

.wm-platform-pill.pill-whmcs:hover {
  box-shadow: 0 10px 28px rgba(0, 150, 255, 0.60) !important;
}

.wm-platform-pill.pill-blesta {
  background: linear-gradient(135deg, #109B53 0%, #17B26A 100%) !important;
  box-shadow: 0 6px 20px rgba(23, 178, 106, 0.40) !important;
}

.wm-platform-pill.pill-blesta:hover {
  box-shadow: 0 10px 28px rgba(23, 178, 106, 0.60) !important;
}

.wm-platform-pill.pill-wisecp {
  background: linear-gradient(135deg, #7C3AED 0%, #A855F7 100%) !important;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.40) !important;
}

.wm-platform-pill.pill-wisecp:hover {
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.60) !important;
}

.wm-platform-pill.pill-clientexec {
  background: linear-gradient(135deg, #F47D20 0%, #FF9E40 100%) !important;
  box-shadow: 0 6px 20px rgba(244, 125, 32, 0.40) !important;
}

.wm-platform-pill.pill-clientexec:hover {
  box-shadow: 0 10px 28px rgba(244, 125, 32, 0.60) !important;
}
.wm-section-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 2.8vw + .5rem, var(--fs-4xl));
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  margin-bottom: 1.1rem;
}
.wm-section-desc {
  font-size: var(--fs-xl);
  color: var(--text-secondary);
  max-width: 620px;
  line-height: 1.75;
}
.wm-section-header.centered .wm-section-desc { margin: 0 auto; }

/* ----------------------------------------------
   9. FEATURE CARDS (Why Choose Us)
   ---------------------------------------------- */
/* ----------------------------------------------
   9. FEATURE CARDS (Why Choose Us - WHMCS.com Style)
   ---------------------------------------------- */
.wm-feature-card {
  background: rgba(10, 15, 29, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 16px !important;
  padding: 2rem 2rem 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.40) !important;
}

.wm-feature-body {
  margin-bottom: 1.5rem !important;
}

.wm-feature-graphic {
  background: rgba(255, 255, 255, 0.02) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 1rem 0 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end !important;
  margin: 0 -2rem !important;
  overflow: hidden !important;
}

html[data-theme="light"] .wm-feature-graphic {
  background: #F8FAFC !important;
  border-top-color: #F1F5F9 !important;
}

.wm-feature-graphic img {
  width: 100% !important;
  max-width: 280px !important;
  height: auto !important;
  display: block !important;
  transition: transform 0.35s ease !important;
}

.wm-feature-card:hover .wm-feature-graphic img {
  transform: scale(1.05) translateY(-3px) !important;
}

.wm-feature-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: var(--accent-color, #0057FF) !important;
  border-radius: 16px 16px 0 0 !important;
}

.wm-feature-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.60), 0 0 25px rgba(0, 87, 255, 0.25) !important;
  border-color: rgba(0, 210, 255, 0.35) !important;
}

.wm-feature-card.accent-blue   { --accent-color: linear-gradient(90deg, #0057FF, #5BC8FF) !important; }
.wm-feature-card.accent-green  { --accent-color: linear-gradient(90deg, #17B26A, #7DDE8A) !important; }
.wm-feature-card.accent-orange { --accent-color: linear-gradient(90deg, #F47D20, #FFD166) !important; }
.wm-feature-card.accent-purple { --accent-color: linear-gradient(90deg, #7C3AED, #C084FC) !important; }
.wm-feature-card.accent-yellow { --accent-color: linear-gradient(90deg, #F59E0B, #FBBF24) !important; }
.wm-feature-card.accent-pink   { --accent-color: linear-gradient(90deg, #EC4899, #F472B6) !important; }

.wm-feature-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  margin-bottom: 1.5rem !important;
  flex-shrink: 0 !important;
  transition: all 0.25s ease !important;
}

.wm-feature-card:hover .wm-feature-icon {
  transform: scale(1.12) rotate(-4deg) !important;
}

.wm-feature-icon.blue   { background: rgba(0, 87, 255, 0.15) !important; color: #00D2FF !important; }
.wm-feature-icon.green  { background: rgba(23, 178, 106, 0.15) !important; color: #17B26A !important; }
.wm-feature-icon.orange { background: rgba(244, 125, 32, 0.15) !important; color: #F47D20 !important; }
.wm-feature-icon.purple { background: rgba(124, 58, 237, 0.15) !important; color: #A855F7 !important; }
.wm-feature-icon.yellow { background: rgba(245, 158, 11, 0.15) !important; color: #FBBF24 !important; }
.wm-feature-icon.pink   { background: rgba(236, 72, 153, 0.15) !important; color: #F472B6 !important; }

html[data-theme="light"] .wm-feature-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .wm-feature-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.10) !important;
  border-color: #CBD5E1 !important;
}

html[data-theme="light"] .wm-feature-icon.blue   { background: #EBF2FF !important; color: #0057FF !important; }
html[data-theme="light"] .wm-feature-icon.green  { background: #ECFDF3 !important; color: #109B53 !important; }
html[data-theme="light"] .wm-feature-icon.orange { background: #FFF7ED !important; color: #EA580C !important; }
html[data-theme="light"] .wm-feature-icon.purple { background: #F5F3FF !important; color: #7C3AED !important; }
html[data-theme="light"] .wm-feature-icon.yellow { background: #FFFBEB !important; color: #D97706 !important; }
html[data-theme="light"] .wm-feature-icon.pink   { background: #FDF2F8 !important; color: #DB2777 !important; }

.wm-feature-card h4 {
  font-family: var(--font-heading) !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin-bottom: 0.85rem !important;
  letter-spacing: -0.01em !important;
}

html[data-theme="light"] .wm-feature-card h4 {
  color: #0F172A !important;
}

.wm-feature-card p {
  font-size: 1rem !important;
  color: rgba(255, 255, 255, 0.72) !important;
  line-height: 1.75 !important;
  margin-bottom: 0 !important;
}

html[data-theme="light"] .wm-feature-card p {
  color: #475569 !important;
}

/* Feature & Contact Card Lists, Strongs & Callouts Theme Adaptation */
.wm-feature-card ul,
.wm-contact-card ul,
.wm-feature-card li,
.wm-contact-card li {
  color: rgba(255, 255, 255, 0.85) !important;
}
.wm-feature-card strong,
.wm-contact-card strong {
  color: #FFFFFF !important;
}

html[data-theme="light"] .wm-feature-card ul,
html[data-theme="light"] .wm-contact-card ul,
html[data-theme="light"] .wm-feature-card li,
html[data-theme="light"] .wm-contact-card li {
  color: #334155 !important;
}
html[data-theme="light"] .wm-feature-card strong,
html[data-theme="light"] .wm-contact-card strong {
  color: #0F172A !important;
}

.wm-example-box {
  background: rgba(0, 198, 255, 0.08) !important;
  border-left: 3px solid #00c6ff !important;
  border-radius: 8px !important;
  padding: 1rem 1.25rem !important;
  margin-top: 1rem !important;
  transition: all 0.3s ease !important;
}
.wm-example-box p,
.wm-example-box {
  color: rgba(255, 255, 255, 0.90) !important;
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.wm-example-box strong {
  color: #00c6ff !important;
}

html[data-theme="light"] .wm-example-box {
  background: #F0F9FF !important;
  border-left-color: #0284C7 !important;
  border: 1px solid #BAE6FD !important;
  border-left-width: 4px !important;
}
html[data-theme="light"] .wm-example-box p,
html[data-theme="light"] .wm-example-box {
  color: #1E293B !important;
}
html[data-theme="light"] .wm-example-box strong {
  color: #0284C7 !important;
}

/* ----------------------------------------------
   9B. WHMCS.com CORE VALUE PILLAR CARDS
   ---------------------------------------------- */
.wm-whmcs-pillar-card {
  background: rgba(10, 15, 29, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 20px !important;
  padding: 2.25rem 2rem 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow: hidden !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45) !important;
}

.wm-whmcs-pillar-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 30px rgba(0, 87, 255, 0.30) !important;
  border-color: rgba(0, 210, 255, 0.40) !important;
}

html[data-theme="light"] .wm-whmcs-pillar-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .wm-whmcs-pillar-card:hover {
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12) !important;
  border-color: #CBD5E1 !important;
}

.wm-pillar-body h3 {
  font-family: var(--font-heading) !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin-bottom: 0.75rem !important;
  letter-spacing: -0.3px !important;
}

html[data-theme="light"] .wm-pillar-body h3 {
  color: #0F172A !important;
}

.wm-pillar-body p {
  font-size: 0.9375rem !important;
  color: rgba(255, 255, 255, 0.70) !important;
  line-height: 1.65 !important;
  margin-bottom: 1.5rem !important;
}

html[data-theme="light"] .wm-pillar-body p {
  color: #64748B !important;
}

.wm-pillar-graphic {
  background: rgba(255, 255, 255, 0.02) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px 16px 0 0 !important;
  padding: 1.25rem 0 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end !important;
  margin: 0 -2rem !important;
  overflow: hidden !important;
}

html[data-theme="light"] .wm-pillar-graphic {
  background: #F8FAFC !important;
  border-top-color: #F1F5F9 !important;
}

.wm-pillar-graphic img {
  width: 100% !important;
  max-width: 320px !important;
  height: auto !important;
  display: block !important;
  transition: transform 0.35s ease !important;
}

.wm-whmcs-pillar-card:hover .wm-pillar-graphic img {
  transform: scale(1.05) translateY(-4px) !important;
}

/* ----------------------------------------------
   10. PRODUCT CARDS (Our Best-Selling Modules - Light & Dark Theme)
   ---------------------------------------------- */
.wm-product-card {
  background: rgba(10, 15, 29, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 16px !important;
  padding: 1.75rem !important;
  height: 100% !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important;
  position: relative !important;
}

.wm-product-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.65), 0 0 25px rgba(0, 87, 255, 0.30) !important;
  border-color: rgba(0, 210, 255, 0.40) !important;
}

html[data-theme="light"] .wm-product-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

html[data-theme="light"] .wm-product-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.10) !important;
  border-color: #CBD5E1 !important;
}

.wm-product-logo {
  height: 32px !important;
  width: auto !important;
  max-width: 140px !important;
  object-fit: contain !important;
  object-position: left !important;
  filter: brightness(0) invert(1) opacity(0.85) !important;
  transition: all 0.25s ease !important;
}

html[data-theme="light"] .wm-product-logo {
  filter: none !important;
  opacity: 0.9 !important;
}

.wm-product-card:hover .wm-product-logo {
  filter: none !important;
  opacity: 1 !important;
}

.wm-product-card h4 {
  font-family: 'Figtree', var(--font-heading), sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin-bottom: 0 !important;
}

html[data-theme="light"] .wm-product-card h4 {
  color: #0F172A !important;
}

.wm-product-card p {
  font-size: 0.90625rem !important;
  color: rgba(255, 255, 255, 0.70) !important;
  line-height: 1.6 !important;
  flex-grow: 1 !important;
  margin-bottom: 0 !important;
}

html[data-theme="light"] .wm-product-card p {
  color: #64748B !important;
}

.wm-product-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 0.25rem !important;
}

.wm-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  background: rgba(0, 87, 255, 0.15) !important;
  border: 1px solid rgba(0, 210, 255, 0.30) !important;
  border-radius: 999px !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  color: #00D2FF !important;
  font-family: 'Figtree', var(--font-heading), sans-serif !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

html[data-theme="light"] .wm-tag {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

.wm-product-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  font-family: 'Figtree', var(--font-heading), sans-serif !important;
  color: #00D2FF !important;
  margin-top: auto !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

html[data-theme="light"] .wm-product-link {
  color: #0057FF !important;
}

.wm-product-link::after {
  content: '→' !important;
  transition: transform 0.25s ease !important;
}

.wm-product-card:hover .wm-product-link::after {
  transform: translateX(6px) !important;
}

/* ----------------------------------------------
   11. ABOUT SECTION
   ---------------------------------------------- */
.wm-about-list {
  list-style: none; padding: 0; margin: 0 0 2rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.wm-about-list li {
  display: flex; align-items: flex-start;
  gap: .75rem;
  font-size: .9375rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.wm-about-list li::before {
  content: '';
  width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2317B26A'%3E%3Cpath fill-rule='evenodd' d='M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center / contain;
  flex-shrink: 0;
  margin-top: 2px;
}

.wm-platform-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.wm-platform-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  transition: var(--transition-base);
}
.wm-platform-pill:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }

/* ----------------------------------------------
   12. STATS SECTION
   ---------------------------------------------- */
.wm-stats {
  background: linear-gradient(135deg, #080C18 0%, #0C1829 50%, #080C18 100%);
  position: relative; overflow: hidden;
  padding: 5rem 0;
}
.wm-stats::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(0,87,255,.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.wm-stat-card { text-align: center; padding: 2rem; position: relative; z-index: 1; }
.wm-stat-card::after {
  content: '';
  position: absolute; right: 0; top: 20%; height: 60%; width: 1px;
  background: rgba(255,255,255,.07);
}
.wm-stat-card:last-child::after { display: none; }

.wm-stat-icon {
  width: 56px; height: 56px;
  background: rgba(0,87,255,.14);
  border: 1px solid rgba(0,87,255,.24);
  border-radius: var(--radius-xl);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  color: #79A8FF;
  margin: 0 auto 1rem;
}
.wm-stat-value {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3vw + .5rem, 3rem);
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: .5rem;
  display: block;
}
.wm-stat-suffix { font-size: var(--fs-2xl); font-weight: 700; color: var(--brand-primary); }
.wm-stat-label {
  font-size: .8125rem;
  font-weight: 500;
  color: rgba(255,255,255,.48);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ----------------------------------------------
   13. TESTIMONIALS
   ---------------------------------------------- */
.wm-testimonials { background: var(--bg-dark); padding: 5rem 0; }
.wm-testimonials .wm-section-eyebrow { color: #79A8FF; }
.wm-testimonials .wm-section-title   { color: #fff; }
.wm-testimonials .wm-section-desc    { color: rgba(255,255,255,.52); }

.wm-testimonial-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-xl);
  padding: 2rem;
  height: 100%;
  transition: var(--transition-slow);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.wm-testimonial-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.13);
  transform: translateY(-4px);
}
.wm-testimonial-stars { display: flex; gap: 4px; color: #FBB022; font-size: 1rem; }
.wm-testimonial-quote { font-size: .9375rem; color: rgba(255,255,255,.68); line-height: 1.75; flex-grow: 1; font-style: italic; }
.wm-testimonial-author {
  display: flex; align-items: center; gap: .75rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.06);
}
.wm-testimonial-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--brand-gradient);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  color: #fff;
  font-size: .875rem;
  flex-shrink: 0;
}
.wm-testimonial-name { font-size: .875rem; font-weight: 600; color: #fff; margin-bottom: 2px; }
.wm-testimonial-role { font-size: var(--fs-xs); color: rgba(255,255,255,.38); font-family: var(--font-mono); }

/* ----------------------------------------------
   14. CTA BANNER
   ---------------------------------------------- */
.wm-cta-banner {
  background: linear-gradient(135deg, #0057FF 0%, #1433D6 100%);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.wm-cta-banner::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.wm-cta-banner h2 { color: #fff; font-size: clamp(1.875rem, 3vw + .5rem, 3rem); letter-spacing: -1px; margin-bottom: 1rem; }
.wm-cta-banner p  { color: rgba(255,255,255,.72); font-size: var(--fs-lg); max-width: 520px; margin: 0 auto 2rem; line-height: 1.7; }
.wm-cta-actions {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
  text-align: center !important;
}

.wm-cta-actions h2,
.wm-cta-actions p {
  width: 100% !important;
  flex: 0 0 100% !important;
}

.wm-cta-actions > div {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin-top: 0.5rem !important;
}

.wm-cta-banner a,
.wm-cta-actions a,
.wm-cta-banner .wm-cta-buy-btn,
.wm-cta-actions .wm-cta-buy-btn,
.wm-cta-banner .wm-btn-white,
.wm-cta-banner .wm-btn-ghost {
  width: auto !important;
  max-width: max-content !important;
  min-width: 180px !important;
  flex: 0 1 auto !important;
  margin: 4px !important;
}

.wm-btn-white {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 30px;
  background: #fff; color: var(--brand-primary) !important;
  border-radius: var(--radius-md);
  font-size: .9375rem; font-weight: 700;
  transition: var(--transition-base);
  border: 2px solid #fff;
  box-shadow: 0 8px 32px rgba(0,0,0,.20);
}
.wm-btn-white:hover { background: rgba(255,255,255,.92); transform: translateY(-2px); box-shadow: 0 16px 48px rgba(0,0,0,.25); }

.wm-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px;
  background: transparent; color: #fff !important;
  border-radius: var(--radius-md);
  font-size: .9375rem; font-weight: 600;
  transition: var(--transition-base);
  border: 2px solid rgba(255,255,255,.35);
}
.wm-btn-ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.65); }

/* ----------------------------------------------
   15. FOOTER (Animated Mesh & Aura Background)
   ---------------------------------------------- */
@keyframes wmFooterGradientShift {
  0%   { transform: scale(1) translate3d(0, 0, 0); opacity: 0.85; }
  50%  { transform: scale(1.05) translate3d(15px, -10px, 0); opacity: 1; }
  100% { transform: scale(1) translate3d(0, 0, 0); opacity: 0.85; }
}

@keyframes wmFooterAuraPulse {
  0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.35; }
  50% { transform: scale(1.25) translate(30px, -20px); opacity: 0.65; }
}

#footer.wm-footer {
  position: relative !important;
  background: #060913 !important;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden !important;
}

#footer.wm-footer::before {
  content: '' !important;
  position: absolute !important;
  inset: -10% !important;
  background: linear-gradient(125deg, #060913 0%, #0D1730 35%, #191238 70%, #060913 100%) !important;
  opacity: 0.9 !important;
  animation: wmFooterGradientShift 18s ease-in-out infinite alternate !important;
  will-change: transform, opacity !important;
  pointer-events: none !important;
}

#footer.wm-footer::after {
  content: '' !important;
  position: absolute !important;
  bottom: -120px !important;
  right: -120px !important;
  width: 550px !important;
  height: 550px !important;
  background: radial-gradient(circle, rgba(147, 51, 234, 0.22) 0%, rgba(99, 102, 241, 0.12) 50%, transparent 75%) !important;
  filter: blur(65px) !important;
  animation: wmFooterAuraPulse 18s ease-in-out infinite reverse !important;
  will-change: transform, opacity !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.wm-footer-top {
  position: relative !important;
  z-index: 2 !important;
  padding: 4rem 0 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.wm-footer-logo-img {
  height: 38px; width: auto;
  filter: brightness(0) invert(1);
  display: block;
  margin-bottom: 1rem;
}
.wm-footer-desc { font-size: 1.0625rem !important; color: rgba(255,255,255,.65) !important; line-height: 1.75 !important; margin-bottom: 1.5rem !important; }

.wm-footer-social { display: flex; gap: .75rem; }
.wm-footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  color: rgba(255,255,255,.65) !important;
  font-size: 1.05rem !important;
  transition: var(--transition-base);
}
.wm-footer-social a:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff !important;
  transform: translateY(-2px);
}

.footer--widget-title h2 {
  font-family: var(--font-heading) !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  margin-bottom: 1.5rem !important;
  line-height: 1 !important;
}
.footer-widget-content ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .75rem;
}
.footer-widget-content ul li a {
  font-size: 1.0625rem !important;
  color: rgba(255,255,255,.75) !important;
  transition: var(--transition-base);
  display: inline-block;
}
.footer-widget-content ul li a:hover { color: #fff !important; padding-left: 4px; }

.wm-footer-bottom {
  position: relative !important;
  z-index: 2 !important;
  padding: 1.5rem 0 3.5rem !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.wm-footer-copy { font-size: 1rem !important; color: #F1F5F9 !important; font-weight: 500 !important; margin: 0; }
.wm-footer-copy a { color: #38BDF8 !important; font-weight: 600 !important; text-decoration: none !important; }
.wm-footer-copy a:hover { color: #00D2FF !important; text-decoration: underline !important; }
.wm-footer-legal { font-size: 0.875rem !important; color: #94A3B8 !important; line-height: 1.65 !important; margin-top: 6px; font-weight: 400 !important; }

.wm-dmca-img {
  height: 24px !important;
  width: auto !important;
  display: inline-block !important;
  vertical-align: middle !important;
  opacity: 0.90 !important;
  transition: all 0.25s ease !important;
  filter: none !important;
}

.wm-dmca-link:hover .wm-dmca-img {
  opacity: 1 !important;
  transform: scale(1.06) !important;
}

/* ----------------------------------------------
   ANIMATED FOOTER DOTTED VECTOR WORLD MAP LAYER
   ---------------------------------------------- */
.wm-footer-map-layer {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  max-width: 1300px !important;
  height: 100% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  opacity: 0.28 !important;
  color: #38BDF8 !important;
  transition: opacity 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html[data-theme="light"] .wm-footer-map-layer {
  opacity: 0.20 !important;
  color: #0057FF !important;
}

.wm-footer-map-svg {
  width: 100% !important;
  height: auto !important;
  max-height: 440px !important;
  object-fit: contain !important;
}

.wm-ping-core {
  fill: #00D2FF !important;
  filter: drop-shadow(0 0 6px #00D2FF) !important;
}

.wm-ping-core.highlight {
  fill: #17B26A !important;
  filter: drop-shadow(0 0 8px #17B26A) !important;
}

html[data-theme="light"] .wm-ping-core {
  fill: #0057FF !important;
  filter: drop-shadow(0 0 4px #0057FF) !important;
}

.wm-ping-ring {
  fill: none !important;
  stroke: #00D2FF !important;
  stroke-width: 1.5px !important;
  transform-origin: center !important;
  animation: wmMapPing 3s cubic-bezier(0, 0.2, 0.8, 1) infinite !important;
  will-change: transform, opacity !important;
}

html[data-theme="light"] .wm-ping-ring {
  stroke: #0057FF !important;
}

.wm-ping-ring.delay1 { animation-delay: 0.75s !important; }
.wm-ping-ring.delay2 { animation-delay: 1.5s !important; }
.wm-ping-ring.delay3 { animation-delay: 2.25s !important; }

@keyframes wmMapPing {
  0% {
    transform: scale(0.2);
    opacity: 0.95;
  }
  80%, 100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

.wm-map-label {
  font-family: var(--font-heading), 'Plus Jakarta Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  fill: rgba(255, 255, 255, 0.80) !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
}

html[data-theme="light"] .wm-map-label {
  fill: #1E293B !important;
}

.wm-map-label.main {
  fill: #17B26A !important;
  font-weight: 800 !important;
}

/* ----------------------------------------------
   16. SCROLL-TO-TOP
   ---------------------------------------------- */
#scroll {
  position: fixed !important;
  bottom: 30px !important;
  right: 30px !important;
  width: 48px !important;
  height: 48px !important;
  background: linear-gradient(135deg, #0057FF 0%, #00D2FF 100%) !important;
  border-radius: 50% !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  color: #FFFFFF !important;
  font-size: 1.1rem !important;
  box-shadow: 0 8px 25px rgba(0, 87, 255, 0.4) !important;
  transition: all 0.3s ease !important;
  z-index: 9999 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
#scroll[style*="display: block"] { display: flex !important; }
#scroll:hover {
  transform: translateY(-4px) scale(1.05) !important;
  box-shadow: 0 12px 35px rgba(0, 210, 255, 0.5) !important;
}
#scroll span::before {
  content: '\f077' !important;
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
}

/* ----------------------------------------------
   17. SCROLL FADE-IN ANIMATIONS
   ---------------------------------------------- */
.wm-fade-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.wm-fade-in.visible { opacity: 1 !important; transform: translateY(0) !important; }
.wm-fade-in:nth-child(2) { transition-delay: 0.10s; }
.wm-fade-in:nth-child(3) { transition-delay: 0.20s; }
.wm-fade-in:nth-child(4) { transition-delay: 0.30s; }
.wm-fade-in:nth-child(5) { transition-delay: 0.40s; }
.wm-fade-in:nth-child(6) { transition-delay: 0.50s; }

/* ----------------------------------------------
   18. RESPONSIVE
   ---------------------------------------------- */

/* Laptop / small desktop: keep every header item visible */
@media (max-width: 1440px) {
  .wm-header-nav .container-fluid {
    max-width: 100% !important;
    padding: 0 12px !important;
  }
  .wm-nav-wrapper {
    gap: 8px;
  }
  .wm-desktop-nav .nav.navbar-nav {
    gap: 0 !important;
  }
  #navbar-spy .nav.navbar-nav > li > a.menu-item,
  #navbar-spy .nav.navbar-nav > li > a.nav-link,
  .wm-header-nav .nav.navbar-nav > li > a.menu-item,
  .wm-header-nav .nav.navbar-nav > li > a.nav-link {
    padding: 7px 8px !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.2px;
  }
  #navbar-spy .logo img,
  .wm-header-nav .logo img,
  .wm-header-nav .logo img.logo-dark {
    height: 40px !important;
    max-height: 40px !important;
    max-width: 160px !important;
  }
  .wm-nav-actions {
    gap: 6px !important;
  }
  .wm-nav-cta {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin-left: 2px !important;
  }
  .wm-qs-trigger-btn .wm-qs-kbd {
    display: none !important;
  }
  .wm-qs-trigger-btn {
    padding: 6px 10px !important;
  }
  #currencySelector,
  .currency-dropdown {
    padding: 6px 22px 6px 8px !important;
    font-size: 0.75rem !important;
  }
}

@media (max-width: 1200px) {
  #navbar-spy .nav.navbar-nav > li > a.menu-item,
  #navbar-spy .nav.navbar-nav > li > a.nav-link,
  .wm-header-nav .nav.navbar-nav > li > a.menu-item,
  .wm-header-nav .nav.navbar-nav > li > a.nav-link {
    padding: 6px 6px !important;
    font-size: 0.72rem !important;
  }
  .wm-nav-cta {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
  }
}

@media (max-width: 991px) {
  .wm-desktop-nav { display: none !important; }
  .wm-nav-mobile-toggle { display: flex !important; }
  .wm-hero { min-height: auto; padding: 4rem 0 3rem; }
  .wm-hero h1 { font-size: clamp(2rem, 6vw, 2.75rem); }
  .wm-hero-desc { max-width: 100%; }
  .wm-hero-badge, .wm-hero-badge2 { display: none; }
  .wm-hero-stats { gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
  .wm-stat-card::after { display: none; }
}
@media (max-width: 767px) {
  body { padding-top: 68px; }
  .wm-section, .wm-section-alt, .wm-section-dark, .wm-stats, .wm-testimonials, .wm-cta-banner { padding: 3rem 0; }
  .wm-feature-card { padding: 1.5rem; }
  .wm-hero-actions { flex-direction: column; align-items: flex-start; }
  .wm-cta-actions { display: flex !important; flex-direction: column; align-items: center; gap: .75rem; }
  .wm-footer-bottom { flex-direction: column; text-align: center; }
  .wm-footer-top .col-md-3, .wm-footer-top .col-md-6 { margin-bottom: 2rem; }
}

/* ----------------------------------------------
   19. THEME TOGGLE BUTTON & LIGHT MODE CONCEPTS
   ---------------------------------------------- */
.wm-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: #79A8FF;
  cursor: pointer;
  outline: none;
  font-size: 0.9375rem;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.wm-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: scale(1.08);
  box-shadow: 0 0 16px rgba(0, 140, 255, 0.35);
}

.wm-theme-toggle .wm-icon-sun { display: none; color: #F59E0B; }
.wm-theme-toggle .wm-icon-moon { display: inline-block; color: #79A8FF; }

.wm-theme-toggle.is-light .wm-icon-sun { display: inline-block; }
.wm-theme-toggle.is-light .wm-icon-moon { display: none; }

/* Light Mode Concept Overrides */
html[data-theme="light"] body {
  background: #F8FAFC !important;
  color: #334155 !important;
}

html[data-theme="light"] #navbar-spy,
html[data-theme="light"] .wm-header-nav {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] #navbar-spy .logo img,
html[data-theme="light"] .wm-header-nav .logo img {
  filter: invert(1) !important;
}

html[data-theme="light"] #navbar-spy .nav.navbar-nav > li > a.menu-item,
html[data-theme="light"] #navbar-spy .nav.navbar-nav > li > a.nav-link,
html[data-theme="light"] .wm-header-nav .nav.navbar-nav > li > a.menu-item,
html[data-theme="light"] .wm-header-nav .nav.navbar-nav > li > a.nav-link {
  color: #1E293B !important;
}

html[data-theme="light"] #navbar-spy .nav.navbar-nav > li > a:hover,
html[data-theme="light"] .wm-header-nav .nav.navbar-nav > li > a:hover {
  background: #F1F5F9 !important;
  color: #0057FF !important;
}

html[data-theme="light"] #navbar-spy .dropdown-menu,
html[data-theme="light"] .wm-header-nav .dropdown-menu {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-top: 3px solid #0057FF !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="light"] #navbar-spy .dropdown-menu li a,
html[data-theme="light"] .wm-header-nav .dropdown-menu li a {
  color: #334155 !important;
}

html[data-theme="light"] #navbar-spy .dropdown-menu li a:hover,
html[data-theme="light"] .wm-header-nav .dropdown-menu li a:hover {
  background: #F1F5F9 !important;
  color: #0057FF !important;
}

html[data-theme="light"] .wm-theme-toggle {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #D97706 !important;
}

html[data-theme="light"] #currencySelector,
html[data-theme="light"] .currency-dropdown {
  background-color: #F1F5F9 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%231E293B' opacity='0.7' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

html[data-theme="light"] #currencySelector option,
html[data-theme="light"] .currency-dropdown option {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
}

html[data-theme="light"] .wm-hero {
  position: relative !important;
  background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 35%, #F0F9FF 70%, #EEF2FF 100%) !important;
  border-bottom: 1px solid #CBD5E1 !important;
  overflow: hidden !important;
}

html[data-theme="light"] .wm-hero::before {
  content: '' !important;
  position: absolute !important;
  top: -100px !important;
  left: -100px !important;
  width: 500px !important;
  height: 500px !important;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, rgba(56, 189, 248, 0.10) 50%, transparent 75%) !important;
  filter: blur(60px) !important;
  pointer-events: none !important;
}

html[data-theme="light"] .wm-hero::after {
  content: '' !important;
  position: absolute !important;
  bottom: -100px !important;
  right: -100px !important;
  width: 550px !important;
  height: 550px !important;
  background: radial-gradient(circle, rgba(0, 87, 255, 0.15) 0%, rgba(14, 165, 233, 0.08) 50%, transparent 75%) !important;
  filter: blur(65px) !important;
  pointer-events: none !important;
}

html[data-theme="light"] .wm-hero-eyebrow,
html[data-theme="light"] .wm-section-eyebrow {
  background: #EBF2FF !important;
  border: 1px solid #B4D0FF !important;
  color: #0040C1 !important;
  box-shadow: 0 4px 15px rgba(0, 87, 255, 0.08) !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .wm-hero h1 {
  color: #0F172A !important;
  text-shadow: none !important;
}

html[data-theme="light"] .wm-hero h1 .highlight {
  background: linear-gradient(135deg, #0057FF 0%, #0284C7 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

html[data-theme="light"] .wm-hero-desc {
  color: #334155 !important;
  font-weight: 500 !important;
}

html[data-theme="light"] .wm-btn-outline {
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}
html[data-theme="light"] .wm-btn-outline:hover {
  background: #F1F5F9 !important;
  border-color: #0057FF !important;
  color: #0057FF !important;
}

/* Hero Stats Strip Light Mode */
html[data-theme="light"] .wm-hero-stats {
  border-top: 1px solid #CBD5E1 !important;
}

html[data-theme="light"] .wm-hero-stat-value {
  background: linear-gradient(135deg, #0057FF 0%, #0284C7 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .wm-hero-stat-label {
  color: #475569 !important;
  font-weight: 600 !important;
}

/* Floating Badges Light Mode */
html[data-theme="light"] .wm-hero-badge,
html[data-theme="light"] .wm-hero-badge2 {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12) !important;
}

html[data-theme="light"] .wm-hero-badge-text strong {
  color: #0F172A !important;
}

html[data-theme="light"] .wm-hero-badge-text span {
  color: #475569 !important;
}

html[data-theme="light"] .wm-feature-card,
html[data-theme="light"] .wm-product-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}

html[data-theme="light"] .wm-section-alt {
  background: #F8FAFC !important;
}

/* Light Mode Overrides for Product Detail Sidebar & Buy Buttons */
html[data-theme="light"] .wm-btn-ghost {
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] .wm-btn-ghost:hover {
  background: #F1F5F9 !important;
  border-color: #0057FF !important;
  color: #0057FF !important;
}

html[data-theme="light"] .wm-buy-btn,
html[data-theme="light"] .wm-cta-buy-btn {
  background: linear-gradient(135deg, #0057FF 0%, #0284C7 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 25px rgba(0, 87, 255, 0.25) !important;
}

html[data-theme="light"] .wm-marketplace-btn {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] .wm-marketplace-btn:hover {
  background: #F8FAFC !important;
  border-color: #0057FF !important;
  color: #0057FF !important;
}

/* ----------------------------------------------
   GLOBAL LIGHT MODE STYLING SYSTEM
   ---------------------------------------------- */
html[data-theme="light"] .wm-section {
  background: #FFFFFF !important;
}

html[data-theme="light"] .wm-section-title {
  color: #0F172A !important;
}

html[data-theme="light"] .wm-section-desc {
  color: #475569 !important;
}

html[data-theme="light"] .wm-section p,
html[data-theme="light"] .wm-section-alt p {
  color: #334155 !important;
}

html[data-theme="light"] .wm-hero-title {
  color: #0F172A !important;
}

html[data-theme="light"] .wm-hero-badge-pill {
  background: #EBF2FF !important;
  border-color: #CBD5E1 !important;
  color: #0057FF !important;
}

/* Stats Counter Light Mode */
html[data-theme="light"] .wm-stats {
  background: #F8FAFC !important;
  border-top: 1px solid #E2E8F0 !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

html[data-theme="light"] .wm-stat-value {
  color: #0F172A !important;
}

html[data-theme="light"] .wm-stat-label {
  color: #64748B !important;
}

html[data-theme="light"] .wm-stat-card::after {
  background: #E2E8F0 !important;
}

html[data-theme="light"] .wm-stat-icon {
  background: #EBF2FF !important;
  border-color: #CBD5E1 !important;
  color: #0057FF !important;
}

/* Testimonials Light Mode */
html[data-theme="light"] .wm-testimonials {
  background: #FFFFFF !important;
  border-top: 1px solid #E2E8F0 !important;
}

html[data-theme="light"] .wm-testimonials .wm-section-title {
  color: #0F172A !important;
}

html[data-theme="light"] .wm-testimonials .wm-section-desc {
  color: #64748B !important;
}

html[data-theme="light"] .wm-testimonial-card {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .wm-testimonial-card:hover {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .wm-testimonial-quote {
  color: #334155 !important;
}

html[data-theme="light"] .wm-testimonial-name {
  color: #0F172A !important;
}

html[data-theme="light"] .wm-testimonial-role {
  color: #64748B !important;
}

html[data-theme="light"] .wm-testimonial-author {
  border-top-color: #E2E8F0 !important;
}

/* Footer Light Mode Overrides */
html[data-theme="light"] #footer.wm-footer {
  background: #F8FAFC !important;
  border-top: 1px solid #E2E8F0 !important;
  position: relative !important;
  overflow: hidden !important;
}

html[data-theme="light"] #footer.wm-footer::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 50%, #F1F5F9 100%) !important;
  opacity: 0.75 !important;
  animation: wmFooterGradientShift 22s ease-in-out infinite alternate !important;
  will-change: transform, opacity !important;
  pointer-events: none !important;
}

html[data-theme="light"] #footer.wm-footer::after {
  content: '' !important;
  position: absolute !important;
  bottom: -60px !important;
  right: -60px !important;
  width: 350px !important;
  height: 350px !important;
  background: radial-gradient(circle, rgba(0, 87, 255, 0.07) 0%, rgba(2, 132, 199, 0.04) 50%, transparent 75%) !important;
  filter: blur(45px) !important;
  animation: wmFooterAuraPulse 18s ease-in-out infinite reverse !important;
  will-change: transform, opacity !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

html[data-theme="light"] .wm-footer-top {
  border-bottom-color: #CBD5E1 !important;
}

html[data-theme="light"] .wm-footer-logo-img {
  filter: brightness(0) !important;
  opacity: 0.95 !important;
}

html[data-theme="light"] .wm-footer-desc {
  color: #334155 !important;
  font-weight: 500 !important;
}

html[data-theme="light"] .footer--widget-title h2 {
  color: #0F172A !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
}

html[data-theme="light"] .footer-widget-content ul li a {
  color: #334155 !important;
  font-weight: 600 !important;
}

html[data-theme="light"] .footer-widget-content ul li a:hover {
  color: #0057FF !important;
  transform: translateX(4px) !important;
}

html[data-theme="light"] .wm-footer-social a {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #1E293B !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .wm-footer-social a:hover {
  background: #0057FF !important;
  border-color: #0057FF !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
}

html[data-theme="light"] .wm-footer-copy {
  color: #1E293B !important;
  font-weight: 600 !important;
}

html[data-theme="light"] .wm-footer-copy a {
  color: #0057FF !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .wm-footer-legal {
  color: #475569 !important;
  font-weight: 500 !important;
}

/* ----------------------------------------------
   LIGHT MODE NAVBAR & DROPDOWNS OVERRIDE SYSTEM
   ---------------------------------------------- */
html[data-theme="light"] .wm-header-nav,
html[data-theme="light"] #navbar-spy {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .wm-header-nav a.menu-item,
html[data-theme="light"] #navbar-spy a.menu-item {
  color: #0F172A !important;
}

html[data-theme="light"] .wm-header-nav a.menu-item:hover,
html[data-theme="light"] #navbar-spy a.menu-item:hover,
html[data-theme="light"] .wm-header-nav li.has-dropdown:hover > a.menu-item {
  color: #0057FF !important;
}

/* Light Mode Dropdown Caret Down Arrow Visibility */
html[data-theme="light"] #navbar-spy .nav.navbar-nav > li > a.dropdown-toggle::after,
html[data-theme="light"] #navbar-spy .nav.navbar-nav > li > a.menu-item.dropdown-toggle::after,
html[data-theme="light"] .wm-header-nav .nav.navbar-nav > li > a.dropdown-toggle::after {
  border-top-color: #0F172A !important;
}

html[data-theme="light"] #navbar-spy .nav.navbar-nav > li:hover > a.dropdown-toggle::after,
html[data-theme="light"] #navbar-spy .nav.navbar-nav > li.open > a.dropdown-toggle::after,
html[data-theme="light"] .wm-header-nav .nav.navbar-nav > li:hover > a.dropdown-toggle::after,
html[data-theme="light"] .wm-header-nav .nav.navbar-nav > li.open > a.dropdown-toggle::after {
  border-top-color: #0057FF !important;
}

/* Light Mode All Dropdown Containers */
html[data-theme="light"] .dropdown-menu,
html[data-theme="light"] .wm-header-nav .dropdown-menu,
html[data-theme="light"] #navbar-spy .dropdown-menu,
html[data-theme="light"] .dropdown-menu.wm-mega-dropdown,
html[data-theme="light"] .wm-tabbed-mega {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  border-top: 3px solid #0057FF !important;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.15) !important;
  z-index: 999999 !important;
}

/* 1-Column Dropdown Items (Registrar, Services, Cloud) in Light Mode */
html[data-theme="light"] .dropdown-menu:not(.wm-mega-dropdown) li,
html[data-theme="light"] .wm-header-nav ul.dropdown-menu:not(.wm-mega-dropdown) li {
  background: transparent !important;
  width: 100% !important;
}

html[data-theme="light"] .dropdown-menu:not(.wm-mega-dropdown) li a,
html[data-theme="light"] .wm-header-nav ul.dropdown-menu:not(.wm-mega-dropdown) li a {
  color: #1E293B !important;
  background: transparent !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  display: block !important;
}

html[data-theme="light"] .dropdown-menu:not(.wm-mega-dropdown) li a:hover,
html[data-theme="light"] .wm-header-nav ul.dropdown-menu:not(.wm-mega-dropdown) li a:hover {
  background: #F1F5F9 !important;
  background-color: #F1F5F9 !important;
  color: #0057FF !important;
}

/* Mega Menu Columns (Addons) in Light Mode */
html[data-theme="light"] .wm-mega-col {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}

html[data-theme="light"] .wm-mega-title {
  color: #0057FF !important;
  background: #F8FAFC !important;
  background-color: #F8FAFC !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

html[data-theme="light"] .wm-mega-col a {
  color: #1E293B !important;
  background: transparent !important;
}

html[data-theme="light"] .wm-mega-col a i {
  color: #0057FF !important;
}

/* ----------------------------------------------
   MODULE CATALOG CARD SYSTEM
   ---------------------------------------------- */
.wm-prod-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.wm-prod-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 45px rgba(0, 87, 255, 0.25);
  border-color: rgba(0, 210, 255, 0.4);
}

html[data-theme="light"] .wm-prod-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 8px 24px rgba(149, 157, 165, 0.15) !important;
}

html[data-theme="light"] .wm-prod-card:hover {
  box-shadow: 0 18px 36px rgba(0, 87, 255, 0.18) !important;
  border-color: #0057FF !important;
}

/* Header Banners */
.wm-prod-card-header {
  position: relative;
  padding: 24px 20px 16px;
  color: #FFFFFF;
}

.bg-grad-whmcs { background: linear-gradient(135deg, #0057FF 0%, #00D2FF 100%); }
.bg-grad-blesta { background: linear-gradient(135deg, #059669 0%, #10B981 100%); }
.bg-grad-wisecp { background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%); }
.bg-grad-clientexec { background: linear-gradient(135deg, #9333EA 0%, #C084FC 100%); }
.bg-grad-gateway { background: linear-gradient(135deg, #0284C7 0%, #0EA5E9 100%); }

/* Diagonal Ribbon Badge */
.wm-prod-ribbon {
  position: absolute;
  top: 14px;
  left: -28px;
  z-index: 2;
  transform: rotate(-45deg);
  padding: 4px 32px;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.ribbon-whmcs { background: #84CC16; color: #0F172A; }
.ribbon-blesta { background: #06B6D4; color: #0F172A; }
.ribbon-wisecp { background: #FACC15; color: #0F172A; }
.ribbon-clientexec { background: #C084FC; color: #0F172A; }

/* Banner Content */
.wm-prod-banner-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 12px;
  padding-left: 42px;
}
.wm-prod-banner-icon {
  font-size: 1.85rem;
  color: #FFFFFF;
  opacity: 0.95;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  position: relative;
  z-index: 1;
}
.wm-prod-banner-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.wm-prod-banner-title {
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: right;
  color: #FFFFFF;
  line-height: 1.2;
}

/* Banner Meta: Price & Stars */
.wm-prod-banner-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.wm-prod-price .old-price {
  text-decoration: line-through !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 0.85rem !important;
  margin-right: 6px !important;
  font-weight: 500 !important;
}
.wm-prod-price .new-price {
  font-size: 0.98rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
}
.wm-prod-stars {
  color: #FACC15;
  font-size: 0.75rem;
}

/* Card Body */
.wm-prod-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}

.wm-prod-title {
  color: #FFFFFF;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.4;
}

html[data-theme="light"] .wm-prod-title {
  color: #0F172A !important;
}

.wm-prod-desc {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

html[data-theme="light"] .wm-prod-desc {
  color: #64748B !important;
}

/* Action Buttons */
.wm-prod-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.wm-btn-order {
  background: #10B981 !important;
  color: #FFFFFF !important;
  font-size: 0.825rem !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.wm-btn-order:hover {
  background: #059669 !important;
  color: #FFFFFF !important;
}

.wm-btn-details {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  font-size: 0.825rem !important;
  font-weight: 600 !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

.wm-btn-details:hover {
  background: rgba(0, 210, 255, 0.2) !important;
  border-color: #00D2FF !important;
  color: #00D2FF !important;
}

html[data-theme="light"] .wm-btn-details {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #334155 !important;
}

html[data-theme="light"] .wm-btn-details:hover {
  background: rgba(0, 87, 255, 0.08) !important;
  border-color: #0057FF !important;
  color: #0057FF !important;
}

/* ----------------------------------------------
   3D PERSPECTIVE TILT & HOLOGRAPHIC FLARE SYSTEM
   ---------------------------------------------- */
.wm-prod-card {
  transition: transform 0.15s cubic-bezier(0.2, 0, 0.4, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
  position: relative !important;
}

.wm-card-flare {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 16px !important;
  pointer-events: none !important;
  z-index: 10 !important;
  opacity: 0;
  transition: opacity 0.3s ease !important;
  mix-blend-mode: overlay !important;
}

/* Popular Search Tag Pills & Input Contrast Overrides */
.wm-popular-tags-label {
  color: rgba(255, 255, 255, 0.60) !important;
}

html[data-theme="light"] .wm-popular-tags-label {
  color: #0F172A !important;
}

.wm-tag-pill {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  color: rgba(255, 255, 255, 0.90) !important;
  border-radius: 20px !important;
  padding: 5px 14px !important;
  font-size: 0.80rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  outline: none !important;
}

.wm-tag-pill:hover,
.wm-tag-pill.active {
  background: rgba(0, 210, 255, 0.20) !important;
  border-color: #00D2FF !important;
  color: #00D2FF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 210, 255, 0.25) !important;
}

html[data-theme="light"] .wm-tag-pill {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .wm-tag-pill:hover,
html[data-theme="light"] .wm-tag-pill.active {
  background: #0057FF !important;
  border-color: #0057FF !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(0, 87, 255, 0.35) !important;
}

html[data-theme="light"] .wm-catalog-search-input {
  background: #FFFFFF !important;
  border-color: #0057FF !important;
  color: #0F172A !important;
  box-shadow: 0 12px 35px rgba(0, 87, 255, 0.12) !important;
}

html[data-theme="light"] .wm-catalog-search-input::placeholder {
  color: #64748B !important;
}

html[data-theme="light"] .wm-search-icon {
  color: #0057FF !important;
}

html[data-theme="light"] .wm-page-banner h1 {
  color: #0F172A !important;
}

html[data-theme="light"] .wm-page-banner-sub {
  color: #475569 !important;
}



.wm-prod-title {
  color: #FFFFFF;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.4;
}

.wm-prod-social-proof {
  font-size: 0.78rem;
  color: #00D2FF;
  font-family: var(--font-mono);
  margin-bottom: 12px;
}

.wm-prod-desc {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Action Buttons */
.wm-prod-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.wm-btn-order {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  background: #10B981;
  color: #FFFFFF !important;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: all 0.2s ease;
}
.wm-btn-order:hover {
  background: #059669;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.wm-btn-details {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  color: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.2s ease;
}
.wm-btn-details:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #00D2FF;
  color: #00D2FF !important;
}

.wm-filter-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.25s ease;
  cursor: pointer;
}
.wm-filter-btn:hover,
.wm-filter-btn.active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(0, 87, 255, 0.35);
}

/* Light Theme Overrides */
html[data-theme="light"] .wm-prod-card {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
}
html[data-theme="light"] .wm-prod-title {
  color: #0F172A !important;
}
html[data-theme="light"] .wm-prod-social-proof {
  color: #0284C7 !important;
}
html[data-theme="light"] .wm-prod-desc {
  color: #475569 !important;
}
html[data-theme="light"] .wm-btn-details {
  color: #334155 !important;
  border-color: #CBD5E1 !important;
}
html[data-theme="light"] .wm-btn-details:hover {
  background: #F1F5F9 !important;
  border-color: #0057FF !important;
  color: #0057FF !important;
}
html[data-theme="light"] .wm-catalog-search-input {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
}
html[data-theme="light"] .wm-catalog-search-input::placeholder {
  color: #94A3B8 !important;
}
html[data-theme="light"] .wm-filter-btn {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #334155 !important;
}
html[data-theme="light"] .wm-filter-btn:hover,
html[data-theme="light"] .wm-filter-btn.active {
  background: #0057FF !important;
  border-color: #0057FF !important;
  color: #FFFFFF !important;
}
html[data-theme="light"] .wm-filter-result-count {
  color: #64748B !important;
}

html[data-theme="light"] .wm-mega-col a:hover {
  background: #F1F5F9 !important;
  background-color: #F1F5F9 !important;
  color: #0057FF !important;
}

/* Light Mode Mobile Hamburger Toggle Button */
html[data-theme="light"] .wm-nav-mobile-toggle {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
}
html[data-theme="light"] .wm-nav-mobile-toggle span {
  background: #0F172A !important;
}

/* Light Mode Mobile Drawer Navigation Menu */
html[data-theme="light"] .wm-mobile-drawer {
  background: #FFFFFF !important;
  border-top-color: #E2E8F0 !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

html[data-theme="light"] .wm-mobile-drawer-header {
  border-bottom-color: #E2E8F0 !important;
}

html[data-theme="light"] .wm-mobile-brand {
  color: #0F172A !important;
}

html[data-theme="light"] .wm-mobile-close-btn {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

html[data-theme="light"] .wm-mobile-menu-link {
  color: #0F172A !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

html[data-theme="light"] .wm-acc-arrow {
  color: #64748B !important;
}

html[data-theme="light"] .wm-mobile-has-sub.active .wm-acc-arrow {
  color: #0057FF !important;
}

html[data-theme="light"] .wm-mobile-sub-menu a {
  color: #334155 !important;
}

html[data-theme="light"] .wm-mobile-sub-menu a:hover {
  color: #0057FF !important;
  background: #EFF6FF !important;
}

html[data-theme="light"] .wm-mobile-actions-footer {
  border-top-color: #E2E8F0 !important;
}

/* Tabbed Mega Menu (Servers) Sidebar & Panels in Light Mode */
html[data-theme="light"] .wm-tabbed-mega {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  border-top: 3px solid #0057FF !important;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.15) !important;
}

html[data-theme="light"] .wm-tab-sidebar {
  background: #F8FAFC !important;
  background-color: #F8FAFC !important;
  border-right: 1px solid #E2E8F0 !important;
}

html[data-theme="light"] .wm-tab-header-label {
  color: #64748B !important;
}

html[data-theme="light"] .wm-tab-btn {
  color: #334155 !important;
  background: transparent !important;
}

html[data-theme="light"] .wm-tab-btn:hover,
html[data-theme="light"] .wm-tab-btn.active {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  color: #0057FF !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .wm-tab-btn .wm-tab-arrow {
  color: #94A3B8 !important;
}
html[data-theme="light"] .wm-tab-btn.active .wm-tab-arrow {
  color: #0057FF !important;
}

html[data-theme="light"] .wm-tab-pane-title {
  color: #0F172A !important;
}

html[data-theme="light"] .wm-tab-pane-count {
  background: #EBF2FF !important;
  color: #0057FF !important;
}

html[data-theme="light"] .wm-module-card {
  background: #F8FAFC !important;
  background-color: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

html[data-theme="light"] .wm-module-card:hover {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border-color: #0057FF !important;
  box-shadow: 0 6px 20px rgba(0, 87, 255, 0.12) !important;
}

html[data-theme="light"] .wm-mc-title {
  color: #0F172A !important;
}

html[data-theme="light"] .wm-module-card:hover .wm-mc-title {
  color: #0057FF !important;
}

/* ----------------------------------------------
   INTERACTIVE TABBED MEGA-MENU (Servers Platform)
   ---------------------------------------------- */
.wm-header-nav .nav.navbar-nav > li.wm-servers-tab-item {
  position: relative !important;
}

.wm-header-nav ul.dropdown-menu.wm-tabbed-mega,
.wm-header-nav .dropdown-menu.wm-tabbed-mega {
  width: 780px !important;
  min-width: 780px !important;
  max-width: 780px !important;
  padding: 0 !important;
  display: none !important;
  flex-direction: row !important;
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: -140px !important;
  transform: none !important;
  -webkit-transform: none !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0, 87, 255, 0.35) !important;
  border-top: 3px solid var(--brand-primary) !important;
  background: #0A0F1D !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95), 0 0 30px rgba(0, 87, 255, 0.25) !important;
}

.wm-header-nav .nav.navbar-nav li.open > .wm-tabbed-mega,
.wm-header-nav .nav.navbar-nav li:hover > .wm-tabbed-mega {
  display: flex !important;
}

/* CSS Content Visibility Containment for DOM Size Optimization */
.wm-tabbed-mega,
.wm-tab-pane,
.wm-qs-backdrop {
  content-visibility: auto !important;
  contain-intrinsic-size: 1px 400px !important;
}

/* Left Sidebar Tabs */
.wm-tab-sidebar {
  width: 230px !important;
  min-width: 230px !important;
  max-height: 520px !important;
  overflow-y: auto !important;
  background: rgba(6, 10, 20, 0.95) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 12px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.wm-tab-sidebar::-webkit-scrollbar {
  width: 4px;
}
.wm-tab-sidebar::-webkit-scrollbar-thumb {
  background: rgba(0, 210, 255, 0.3);
  border-radius: 4px;
}

.wm-tab-header-label {
  font-family: var(--font-heading) !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  padding: 4px 10px 8px !important;
  text-transform: uppercase !important;
}

.wm-tab-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  font-family: var(--font-heading) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  outline: none !important;
  text-align: left !important;
  width: 100% !important;
}

.wm-tab-btn i:first-child {
  width: 18px !important;
  font-size: 0.9375rem !important;
  color: #79A8FF !important;
  margin-right: 6px !important;
}

.wm-tab-arrow {
  font-size: 0.75rem !important;
  color: rgba(255, 255, 255, 0.30) !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
}

.wm-tab-btn:hover,
.wm-tab-btn.active {
  background: rgba(0, 87, 255, 0.22) !important;
  color: #00D2FF !important;
}

.wm-tab-btn.active .wm-tab-arrow,
.wm-tab-btn:hover .wm-tab-arrow {
  color: #00D2FF !important;
  transform: translateX(3px) !important;
}

/* Right Content Area */
.wm-tab-content-wrap {
  flex: 1 !important;
  padding: 16px 20px !important;
  background: #0A0F1D !important;
  overflow-y: auto !important;
  max-height: 440px !important;
}

.wm-tab-pane {
  display: none !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.wm-tab-pane.active {
  display: flex !important;
  animation: wm-pane-fade 0.22s ease-out !important;
}

@keyframes wm-pane-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wm-tab-pane-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.wm-tab-pane-title {
  font-family: var(--font-heading) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.wm-tab-pane-title i { color: var(--brand-primary) !important; }

.wm-tab-pane-count {
  font-size: 0.75rem !important;
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
  color: #17B26A !important;
  background: rgba(23, 178, 106, 0.12) !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(23, 178, 106, 0.25) !important;
}

/* Module Cards Grid */
.wm-tab-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
  margin-top: 4px !important;
}

.wm-module-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.wm-module-card:hover {
  background: rgba(0, 87, 255, 0.20) !important;
  border-color: rgba(0, 210, 255, 0.40) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(0, 87, 255, 0.25) !important;
}

.wm-mc-title {
  font-family: var(--font-body) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.90) !important;
}

.wm-module-card:hover .wm-mc-title {
  color: #FFFFFF !important;
}

.wm-mc-pill {
  font-size: 0.78125rem !important;
  font-weight: 700 !important;
  font-family: 'Figtree', var(--font-heading), sans-serif !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #FFFFFF !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

.wm-mc-pill.pill-whmcs {
  background: linear-gradient(135deg, #0057FF 0%, #00C2FF 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(0, 150, 255, 0.45) !important;
}

.wm-mc-pill.pill-blesta {
  background: linear-gradient(135deg, #109B53 0%, #17B26A 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(23, 178, 106, 0.45) !important;
}

.wm-mc-pill.pill-wisecp {
  background: linear-gradient(135deg, #7C3AED 0%, #A855F7 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.45) !important;
}

.wm-mc-pill.pill-clientexec {
  background: linear-gradient(135deg, #F47D20 0%, #FF9E40 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(244, 125, 32, 0.45) !important;
}

/* Light Mode Tabbed Mega Menu */
html[data-theme="light"] .wm-tabbed-mega {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

html[data-theme="light"] .wm-tab-sidebar {
  background: #F8FAFC !important;
  border-right-color: #E2E8F0 !important;
}

html[data-theme="light"] .wm-tab-header-label {
  color: #64748B !important;
}

html[data-theme="light"] .wm-tab-btn {
  color: #334155 !important;
}

html[data-theme="light"] .wm-tab-btn:hover,
html[data-theme="light"] .wm-tab-btn.active {
  background: #F1F5F9 !important;
  color: #0057FF !important;
}

html[data-theme="light"] .wm-tab-content-wrap {
  background: #FFFFFF !important;
}

html[data-theme="light"] .wm-tab-pane-title {
  color: #0F172A !important;
}

html[data-theme="light"] .wm-module-card {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

html[data-theme="light"] .wm-module-card:hover {
  background: #F1F5F9 !important;
  border-color: #0057FF !important;
}

html[data-theme="light"] .wm-mc-title {
  color: #1E293B !important;
}

/* ----------------------------------------------
   INTERACTIVE SPLIT COMPARISON SLIDER (Staff vs Client)
   ---------------------------------------------- */
.wm-split-comparison-container {
  position: relative;
  width: 100%;
  aspect-ratio: 900 / 650;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 30px rgba(0, 87, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
  user-select: none;
  background: #060913;
  cursor: ew-resize;
}

.wm-split-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.wm-split-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wm-layer-staff {
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
  transition: clip-path 0.05s ease-out;
}

.wm-layer-client {
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
  transition: clip-path 0.05s ease-out;
}

/* Floating Badges */
.wm-split-badge {
  position: absolute;
  top: 54px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  z-index: 10;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.40);
  pointer-events: none;
}

.wm-split-badge.badge-staff {
  left: 16px;
  background: rgba(0, 87, 255, 0.90);
  color: #FFFFFF;
  border: 1px solid rgba(0, 210, 255, 0.40);
}

.wm-split-badge.badge-client {
  right: 16px;
  background: rgba(23, 178, 106, 0.90);
  color: #FFFFFF;
  border: 1px solid rgba(125, 222, 138, 0.40);
}

/* Interactive Split Handle (↔) */
.wm-split-handle-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: linear-gradient(180deg, #00D2FF 0%, #0057FF 50%, #17B26A 100%);
  box-shadow: 0 0 16px #00D2FF;
  z-index: 20;
  transform: translateX(-50%);
  transition: left 0.05s ease-out;
}

.wm-split-handle-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background: #0057FF;
  border: 2px solid #00D2FF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 1rem;
  box-shadow: 0 0 20px rgba(0, 210, 255, 0.80), 0 4px 12px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease, background 0.2s ease;
}

.wm-split-comparison-container:hover .wm-split-handle-button {
  transform: translate(-50%, -50%) scale(1.12);
  background: #00D2FF;
  color: #080C19;
}

/* ----------------------------------------------
   MOBILE DRAWER & ACCORDION SYSTEM (max-width: 991px)
   ---------------------------------------------- */
@media (max-width: 991px) {
  .wm-desktop-nav { display: none !important; }
  .wm-nav-cta { display: none !important; }
  .wm-nav-mobile-toggle { display: flex !important; flex-shrink: 0 !important; }

  .wm-mobile-drawer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #060913 !important;
    z-index: 9999999 !important;
    overflow-y: auto !important;
    padding: 1.5rem !important;
    transform: translateX(-100%) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .wm-mobile-drawer.open {
    transform: translateX(0) !important;
  }

  .wm-mobile-drawer-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    margin-bottom: 1rem !important;
  }

  .wm-mobile-brand {
    font-family: var(--font-heading) !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
  }

  .wm-mobile-close-btn {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    color: #FFFFFF !important;
    font-size: 1.5rem !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  .wm-mobile-menu-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .wm-mobile-menu-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    font-family: var(--font-heading) !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.90) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    text-decoration: none !important;
    cursor: pointer !important;
  }

  .wm-acc-arrow {
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.50) !important;
    transition: transform 0.25s ease !important;
  }

  .wm-mobile-has-sub.active > .wm-mobile-menu-link .wm-acc-arrow {
    transform: rotate(180deg) !important;
    color: #00D2FF !important;
  }

  .wm-mobile-sub-menu {
    display: none !important;
    list-style: none !important;
    padding: 6px 0 6px 12px !important;
    margin: 0 !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .wm-mobile-has-sub.active > .wm-mobile-sub-menu {
    display: flex !important;
  }

  .wm-mobile-sub-menu a {
    display: block !important;
    padding: 8px 12px !important;
    font-size: 0.84375rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    border-radius: 6px !important;
    text-decoration: none !important;
  }

  .wm-mobile-sub-menu a:hover {
    color: #00D2FF !important;
    background: rgba(0, 87, 255, 0.15) !important;
  }

  .wm-mobile-sub-title {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #00D2FF !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 10px 12px 4px !important;
    display: block !important;
  }
  html[data-theme="light"] .wm-mobile-sub-title {
    color: #0057FF !important;
  }

  .wm-mobile-actions-footer {
    margin-top: auto !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  }
}

/* ----------------------------------------------
   21. CONTACT PAGE STYLING (Dark & Light Theme)
   ---------------------------------------------- */
.wm-contact-card {
  background: rgba(10, 15, 29, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 16px !important;
  padding: 2.5rem !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important;
}

.wm-contact-card h1,
.wm-contact-card h2,
.wm-contact-card h3,
.wm-contact-card h4,
.wm-contact-card .wm-section-title {
  color: #FFFFFF !important;
}

.wm-contact-card p,
.wm-contact-card .wm-section-desc {
  color: rgba(255, 255, 255, 0.70) !important;
}

html[data-theme="light"] .wm-contact-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .wm-contact-card h1,
html[data-theme="light"] .wm-contact-card h2,
html[data-theme="light"] .wm-contact-card h3,
html[data-theme="light"] .wm-contact-card h4,
html[data-theme="light"] .wm-contact-card .wm-section-title {
  color: #0F172A !important;
}

html[data-theme="light"] .wm-contact-card p,
html[data-theme="light"] .wm-contact-card .wm-section-desc {
  color: #475569 !important;
}

.wm-contact-map-card {
  background: rgba(10, 15, 29, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  height: 100% !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important;
}

.wm-contact-map-card h1,
.wm-contact-map-card h2,
.wm-contact-map-card h3,
.wm-contact-map-card h4 {
  color: #FFFFFF !important;
}

html[data-theme="light"] .wm-contact-map-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .wm-contact-map-card h1,
html[data-theme="light"] .wm-contact-map-card h2,
html[data-theme="light"] .wm-contact-map-card h3,
html[data-theme="light"] .wm-contact-map-card h4 {
  color: #0F172A !important;
}

.wm-contact-form-wrap form label {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  margin-bottom: 6px !important;
  display: block !important;
}

html[data-theme="light"] .wm-contact-form-wrap form label {
  color: #1E293B !important;
}

/* Contact Form Input Fields */
.wm-contact-form-wrap form input[type="text"],
.wm-contact-form-wrap form input[type="email"],
.wm-contact-form-wrap form input[type="number"],
.wm-contact-form-wrap form textarea,
.wm-contact-form-wrap .form-control {
  background: rgba(6, 10, 20, 0.80) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
  padding: 12px 16px !important;
  font-size: 0.9375rem !important;
  font-family: inherit !important;
  width: 100% !important;
  margin-bottom: 1.25rem !important;
  transition: all 0.25s ease !important;
}

.wm-contact-form-wrap form input:focus,
.wm-contact-form-wrap form textarea:focus,
.wm-contact-form-wrap .form-control:focus {
  border-color: #00D2FF !important;
  background: rgba(10, 15, 30, 0.95) !important;
  box-shadow: 0 0 16px rgba(0, 210, 255, 0.25) !important;
  outline: none !important;
}

html[data-theme="light"] .wm-contact-form-wrap form input[type="text"],
html[data-theme="light"] .wm-contact-form-wrap form input[type="email"],
html[data-theme="light"] .wm-contact-form-wrap form input[type="number"],
html[data-theme="light"] .wm-contact-form-wrap form textarea,
html[data-theme="light"] .wm-contact-form-wrap .form-control {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

html[data-theme="light"] .wm-contact-form-wrap form input:focus,
html[data-theme="light"] .wm-contact-form-wrap form textarea:focus,
html[data-theme="light"] .wm-contact-form-wrap .form-control:focus {
  border-color: #0057FF !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 12px rgba(0, 87, 255, 0.18) !important;
}

/* Contact Form Submit Button */
.wm-contact-form-wrap form button[type="submit"],
.wm-contact-form-wrap form input[type="submit"],
.wm-contact-form-wrap .btn-danger,
.wm-contact-form-wrap .btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  height: 48px !important;
  padding: 0 36px !important;
  background: linear-gradient(135deg, #0057FF 0%, #00C6FF 100%) !important;
  border: none !important;
  color: #FFFFFF !important;
  font-family: 'Figtree', var(--font-heading), sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 8px 24px rgba(0, 87, 255, 0.35) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  line-height: 1 !important;
  margin-top: 0.5rem !important;
}

.wm-contact-form-wrap form button[type="submit"] i,
.wm-contact-form-wrap form input[type="submit"] i,
.wm-contact-form-wrap .btn-danger i,
.wm-contact-form-wrap .btn-primary i {
  font-size: 0.9375rem !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.wm-contact-form-wrap form button[type="submit"]:hover,
.wm-contact-form-wrap form input[type="submit"]:hover,
.wm-contact-form-wrap .btn-danger:hover,
.wm-contact-form-wrap .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px rgba(0, 87, 255, 0.50) !important;
  background: linear-gradient(135deg, #0046CC 0%, #00B4F0 100%) !important;
}

/* ----------------------------------------------
   23. DEDICATED CONTRACT PRICING BOX (Dark & Light Theme)
   ---------------------------------------------- */
.wm-contract-box {
  border-radius: 12px !important;
  padding: 1.25rem !important;
  text-align: center !important;
  margin-bottom: 1.25rem !important;
  transition: all 0.25s ease !important;
}

.wm-contract-box .wm-cb-label {
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  display: block !important;
  color: rgba(255, 255, 255, 0.70) !important;
}

.wm-contract-box .wm-cb-price {
  font-family: 'Figtree', var(--font-heading), sans-serif !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  display: block !important;
  margin: 4px 0 !important;
}

.wm-contract-box .wm-cb-unit {
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.70) !important;
}

.wm-contract-box .wm-cb-subtext {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  display: block !important;
  margin-top: 4px !important;
}

/* Color Themes for Contract Box */
.wm-contract-box.blue {
  background: rgba(0, 87, 255, 0.12) !important;
  border: 1px solid rgba(0, 210, 255, 0.30) !important;
}
.wm-contract-box.blue .wm-cb-subtext { color: #00D2FF !important; }

.wm-contract-box.green {
  background: rgba(23, 178, 106, 0.12) !important;
  border: 1px solid rgba(23, 178, 106, 0.35) !important;
}
.wm-contract-box.green .wm-cb-subtext { color: #17B26A !important; }

.wm-contract-box.purple {
  background: rgba(124, 58, 237, 0.12) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
}
.wm-contract-box.purple .wm-cb-subtext { color: #A855F7 !important; }

.wm-contract-box.orange {
  background: rgba(244, 125, 32, 0.12) !important;
  border: 1px solid rgba(244, 125, 32, 0.35) !important;
}
.wm-contract-box.orange .wm-cb-subtext { color: #F47D20 !important; }

/* Light Mode Overrides for Contract Box */
html[data-theme="light"] .wm-contract-box .wm-cb-label {
  color: #475569 !important;
  font-weight: 600 !important;
}

html[data-theme="light"] .wm-contract-box .wm-cb-price {
  color: #0F172A !important;
}

html[data-theme="light"] .wm-contract-box .wm-cb-unit {
  color: #475569 !important;
  font-weight: 600 !important;
}

html[data-theme="light"] .wm-contract-box.blue {
  background: #EBF2FF !important;
  border-color: #B2DDFF !important;
}
html[data-theme="light"] .wm-contract-box.blue .wm-cb-subtext { color: #0057FF !important; }

html[data-theme="light"] .wm-contract-box.green {
  background: #ECFDF3 !important;
  border-color: #A6F4C5 !important;
}
html[data-theme="light"] .wm-contract-box.green .wm-cb-subtext { color: #109B53 !important; }

html[data-theme="light"] .wm-contract-box.purple {
  background: #F5F3FF !important;
  border-color: #DDD6FE !important;
}
html[data-theme="light"] .wm-contract-box.purple .wm-cb-subtext { color: #7C3AED !important; }

html[data-theme="light"] .wm-contract-box.orange {
  background: #FFF7ED !important;
  border-color: #FFEDD5 !important;
}
html[data-theme="light"] .wm-contract-box.orange .wm-cb-subtext { color: #EA580C !important; }

/* ----------------------------------------------
   24. SECTION BACKGROUNDS & PILL TAGS (.wm-tag) - High Contrast Dark & Light
   ---------------------------------------------- */
.wm-section {
  background: #060913 !important;
  color: #FFFFFF !important;
}

.wm-section-alt {
  background: #090D1A !important;
  color: #FFFFFF !important;
}

.wm-section-title {
  color: #FFFFFF !important;
}

.wm-section-desc,
.wm-section p {
  color: rgba(255, 255, 255, 0.75) !important;
}

.wm-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 16px !important;
  background: rgba(0, 87, 255, 0.15) !important;
  border: 1px solid rgba(0, 210, 255, 0.35) !important;
  border-radius: 50px !important;
  color: #00D2FF !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 8px rgba(0, 87, 255, 0.20) !important;
  transition: all 0.25s ease !important;
}

.wm-tag:hover {
  background: rgba(0, 87, 255, 0.25) !important;
  border-color: #00D2FF !important;
  color: #FFFFFF !important;
}

/* Light Theme Overrides */
html[data-theme="light"] .wm-section {
  background: #FFFFFF !important;
  color: #0F172A !important;
}

html[data-theme="light"] .wm-section-alt {
  background: #F8FAFC !important;
  color: #0F172A !important;
}

html[data-theme="light"] .wm-section-title {
  color: #0F172A !important;
}

html[data-theme="light"] .wm-section-desc,
html[data-theme="light"] .wm-section p {
  color: #475569 !important;
}

html[data-theme="light"] .wm-tag {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .wm-tag:hover {
  background: #E2E8F0 !important;
  border-color: #0057FF !important;
  color: #0057FF !important;
}

/* ----------------------------------------------
   22. INNER PAGE HERO BANNER SYSTEM (WHMCS.com Style)
   ---------------------------------------------- */
.wm-page-banner {
  position: relative !important;
  padding: 5.5rem 0 4.5rem !important;
  background: linear-gradient(135deg, #060913 0%, #0B1630 50%, #060913 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  overflow: hidden !important;
  text-align: center !important;
}

.wm-page-banner::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: radial-gradient(circle, rgba(0, 87, 255, 0.12) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
  pointer-events: none !important;
}

.wm-page-banner::after {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 600px !important;
  height: 350px !important;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.20) 0%, rgba(0, 87, 255, 0.10) 40%, transparent 70%) !important;
  filter: blur(50px) !important;
  pointer-events: none !important;
}

.wm-page-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 18px !important;
  background: rgba(0, 87, 255, 0.15) !important;
  border: 1px solid rgba(0, 210, 255, 0.35) !important;
  border-radius: 999px !important;
  font-family: 'Figtree', var(--font-heading), sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: #00D2FF !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  margin-bottom: 1.25rem !important;
  box-shadow: 0 4px 20px rgba(0, 210, 255, 0.15) !important;
}

.wm-page-banner h1 {
  font-family: 'Figtree', var(--font-heading), sans-serif !important;
  font-size: clamp(2.5rem, 4vw + 1rem, 3.5rem) !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  line-height: 1.15 !important;
  letter-spacing: -0.5px !important;
  margin-bottom: 1.25rem !important;
  position: relative !important;
  z-index: 1 !important;
}

.wm-page-banner p {
  font-size: clamp(1.125rem, 1.5vw, 1.25rem) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  line-height: 1.7 !important;
  max-width: 720px !important;
  margin: 0 auto 1.5rem !important;
  position: relative !important;
  z-index: 1 !important;
}

.wm-breadcrumb {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 16px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 999px !important;
  font-size: 0.9375rem !important;
  color: rgba(255, 255, 255, 0.60) !important;
  position: relative !important;
  z-index: 1 !important;
}

.wm-breadcrumb a {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.wm-breadcrumb a:hover {
  color: #00D2FF !important;
}

.wm-breadcrumb span.active {
  color: #00D2FF !important;
  font-weight: 600 !important;
}

/* Light Mode Inner Page Banner System */
html[data-theme="light"] .wm-page-banner {
  background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 40%, #F0F9FF 100%) !important;
  border-bottom: 1px solid #CBD5E1 !important;
  position: relative !important;
  overflow: hidden !important;
}

html[data-theme="light"] .wm-page-banner::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: radial-gradient(circle, rgba(79, 70, 229, 0.08) 1.5px, transparent 1.5px) !important;
  background-size: 32px 32px !important;
  opacity: 0.8 !important;
}

html[data-theme="light"] .wm-page-banner::after {
  content: '' !important;
  position: absolute !important;
  top: -40% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 700px !important;
  height: 400px !important;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.22) 0%, rgba(56, 189, 248, 0.15) 50%, transparent 80%) !important;
  filter: blur(60px) !important;
  pointer-events: none !important;
}

html[data-theme="light"] .wm-hero-eyebrow,
html[data-theme="light"] .wm-page-badge {
  background: #FFFFFF !important;
  border: 1px solid #C7D2FE !important;
  color: #4338CA !important;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.12) !important;
}

html[data-theme="light"] .wm-page-badge img,
html[data-theme="light"] .wm-badge-img {
  filter: brightness(0.2) !important;
}

html[data-theme="light"] .wm-page-banner h1 {
  color: #0F172A !important;
  text-shadow: none !important;
}

html[data-theme="light"] .wm-gradient-text {
  background: linear-gradient(135deg, #0057FF 0%, #0284C7 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html[data-theme="light"] .wm-page-banner p {
  color: #334155 !important;
  font-weight: 500 !important;
}

html[data-theme="light"] .wm-breadcrumb {
  background: #FFFFFF !important;
  border-color: rgba(0, 87, 255, 0.15) !important;
  color: #475569 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .wm-breadcrumb a {
  color: #0F172A !important;
  font-weight: 600 !important;
}

html[data-theme="light"] .wm-catalog-search-input {
  background: #FFFFFF !important;
  border: 2px solid #A5B4FC !important;
  color: #0F172A !important;
  box-shadow: 0 12px 35px rgba(79, 70, 229, 0.12) !important;
}
html[data-theme="light"] .wm-catalog-search-input::placeholder {
  color: #64748B !important;
}
html[data-theme="light"] .wm-search-icon {
  color: #4F46E5 !important;
}

html[data-theme="light"] .wm-breadcrumb a:hover,
html[data-theme="light"] .wm-breadcrumb span.active {
  color: #0057FF !important;
}

/* ==========================================
   PRODUCT PAGE & ACCORDION DESIGN SYSTEM
========================================== */
.wm-meta-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 20px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.90) !important;
  backdrop-filter: blur(8px) !important;
}

html[data-theme="light"] .wm-meta-pill {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.wm-product-card {
  padding: 2.25rem !important;
}

.wm-product-card h3 {
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.6rem !important;
  color: #FFFFFF !important;
}

html[data-theme="light"] .wm-product-card h3 {
  color: #0F172A !important;
}

.wm-product-card p {
  margin-bottom: 1.5rem !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.78) !important;
}

html[data-theme="light"] .wm-product-card p {
  color: #475569 !important;
}

.wm-contract-box {
  margin-bottom: 1.5rem !important;
  padding: 1.25rem !important;
  border-radius: 12px !important;
  background: rgba(0, 87, 255, 0.08) !important;
  border: 1px solid rgba(0, 87, 255, 0.25) !important;
}

html[data-theme="light"] .wm-contract-box {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
}

.wm-cb-label {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  color: #00D2FF !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 4px !important;
}

html[data-theme="light"] .wm-cb-label {
  color: #0057FF !important;
}

.wm-cb-price {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
}

.wm-cb-subtext {
  font-size: 0.9375rem !important;
  color: rgba(255, 255, 255, 0.75) !important;
  display: block !important;
}

html[data-theme="light"] .wm-cb-subtext {
  color: #475569 !important;
}

.wm-checklist {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 1.5rem !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
}

html[data-theme="light"] .wm-checklist {
  border-top-color: #E2E8F0 !important;
}

.wm-checklist-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
}

html[data-theme="light"] .wm-checklist-item {
  color: #0F172A !important;
}

/* Feature card paragraph body copy (High Contrast & Clear Readability) */
.wm-feature-card p {
  font-size: 1.0625rem !important;
  color: #CBD5E1 !important;
  line-height: 1.75 !important;
  margin-bottom: 0 !important;
}

html[data-theme="light"] .wm-feature-card p {
  color: #334155 !important;
}

/* Tag icon spacing & styling */
.wm-tag i {
  margin-right: 6px !important;
  font-size: 1.05rem !important;
}

/* Unclipped Full-Height Accordion */
.wm-accordion {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.wm-acc-item {
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(10, 15, 29, 0.95) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.wm-acc-item:hover, .wm-acc-item.open {
  border-color: rgba(0, 210, 255, 0.40) !important;
  box-shadow: 0 4px 20px rgba(0, 87, 255, 0.15) !important;
}

.wm-acc-trigger {
  width: 100 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 1.25rem 1.5rem !important;
  background: transparent !important;
  border: none !important;
  color: #FFFFFF !important;
  font-family: var(--font-heading) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-align: left !important;
  outline: none !important;
}

.wm-acc-trigger:hover {
  color: #00D2FF !important;
}

.wm-acc-icon {
  transition: transform 0.3s ease !important;
  flex-shrink: 0 !important;
  font-size: 0.9rem !important;
  opacity: 0.7 !important;
}

.wm-acc-item.open .wm-acc-icon {
  transform: rotate(180deg) !important;
  color: #00D2FF !important;
  opacity: 1 !important;
}

.wm-acc-body,
.wm-acc-body p {
  display: none;
  padding: 0 1.5rem 1.75rem !important;
  color: #E2E8F0 !important;
  font-size: 1.0625rem !important;
  line-height: 1.8 !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

.wm-acc-item.open .wm-acc-body {
  display: block !important;
}

.wm-acc-body p {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}

.wm-acc-body ul li {
  color: #E2E8F0 !important;
  margin-bottom: 8px !important;
  font-size: 1.0625rem !important;
  line-height: 1.8 !important;
}

html[data-theme="light"] .wm-acc-item {
  border-color: #E2E8F0 !important;
  background: #FFFFFF !important;
}

html[data-theme="light"] .wm-acc-item:hover,
html[data-theme="light"] .wm-acc-item.open {
  border-color: rgba(0, 87, 255, 0.35) !important;
  box-shadow: 0 4px 16px rgba(0, 87, 255, 0.08) !important;
}

html[data-theme="light"] .wm-acc-trigger {
  color: #0F172A !important;
}

html[data-theme="light"] .wm-acc-trigger:hover {
  color: #0057FF !important;
}

html[data-theme="light"] .wm-acc-body,
html[data-theme="light"] .wm-acc-body p {
  color: #334155 !important;
}

html[data-theme="light"] .wm-acc-body ul li {
  color: #334155 !important;
}

/* yellow / pink feature icons */
.wm-feature-icon.yellow { background: rgba(234, 179, 8, 0.15) !important; color: #EAB308 !important; }
.wm-feature-icon.pink   { background: rgba(236, 72, 153, 0.15) !important; color: #EC4899 !important; }

html[data-theme="light"] .wm-feature-icon.yellow { background: rgba(234, 179, 8, 0.12) !important; }
html[data-theme="light"] .wm-feature-icon.pink   { background: rgba(236, 72, 153, 0.12) !important; }

/* accent-yellow / accent-pink cards */
.wm-feature-card.accent-yellow { border-top-color: #EAB308 !important; }
.wm-feature-card.accent-pink   { border-top-color: #EC4899 !important; }

/* ==========================================
   GATEWAY FEES & PRODUCT PAGE SPECIFIC CSS
========================================== */
.wm-page-badge-wrap { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 1rem; }
.wm-badge-img, .wm-page-badge img { 
  height: 16px !important; 
  max-height: 16px !important; 
  width: auto !important; 
  max-width: 90px !important; 
  vertical-align: middle !important; 
  margin-right: 6px !important; 
  object-fit: contain !important; 
}

.wm-hero-title {
  font-size: clamp(2.5rem, 4.5vw, 3.75rem) !important;
  line-height: 1.15 !important;
  margin-bottom: 1.25rem !important;
}

.wm-hero-desc {
  font-size: clamp(1.125rem, 1.6vw, 1.35rem) !important;
  max-width: 760px !important;
  margin: 0 auto 1.75rem !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.80) !important;
}

html[data-theme="light"] .wm-hero-desc {
  color: #334155 !important;
}

.wm-meta-pill-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-bottom: 2rem !important;
}

.wm-tag-wrap {
  margin-bottom: 1.25rem !important;
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.wm-tag-addon {
  background: rgba(23, 178, 106, 0.15) !important;
  border-color: rgba(23, 178, 106, 0.40) !important;
  color: #17B26A !important;
}

.wm-icon-large {
  width: 56px !important;
  height: 56px !important;
  font-size: 1.35rem !important;
  margin-bottom: 1.25rem !important;
}

.wm-icon-medium {
  width: 52px !important;
  height: 52px !important;
  font-size: 1.25rem !important;
}

.wm-buy-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  text-align: center !important;
  padding: 14px 22px !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #0057FF 0%, #00D2FF 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 8px 25px rgba(0, 87, 255, 0.35) !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

.wm-cta-buy-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: auto !important;
  min-width: 200px !important;
  text-align: center !important;
  padding: 14px 26px !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #0057FF 0%, #00D2FF 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 8px 25px rgba(0, 87, 255, 0.35) !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

.wm-buy-btn:hover,
.wm-cta-buy-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 35px rgba(0, 210, 255, 0.45) !important;
  color: #FFFFFF !important;
}

.wm-marketplace-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  padding: 12px 20px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

.wm-marketplace-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: #00D2FF !important;
  color: #00D2FF !important;
}

/* Lightbox & Slider */
.wm-lightbox-overlay {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999999 !important;
  background: rgba(0, 0, 0, 0.94) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  align-items: center !important;
  justify-content: center !important;
}

.wm-lightbox-overlay.active,
#pgfees-lb.active {
  display: flex !important;
}

.wm-lightbox-overlay.active .wm-lb-img,
#pgfees-lb.active #pgfees-lb-img {
  transform: scale(1) !important;
  opacity: 1 !important;
}

.wm-lb-close {
  position: absolute !important;
  top: 20px !important;
  right: 24px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  color: #FFFFFF !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  font-size: 1.25rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s ease !important;
  z-index: 2 !important;
}

.wm-lb-close:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}

.wm-lb-prev, .wm-lb-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  color: #FFFFFF !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s ease !important;
  z-index: 2 !important;
}

.wm-lb-prev { left: 20px !important; }
.wm-lb-next { right: 20px !important; }

.wm-lb-prev:hover, .wm-lb-next:hover {
  background: rgba(0, 210, 255, 0.30) !important;
}

.wm-lb-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
  width: 100% !important;
  height: 100% !important;
  padding: 40px 80px !important;
  box-sizing: border-box !important;
}

.wm-lb-img {
  width: auto !important;
  height: auto !important;
  max-width: 85vw !important;
  max-height: 78vh !important;
  border-radius: 12px !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.90), 0 0 20px rgba(0, 210, 255, 0.20) !important;
  object-fit: contain !important;
  aspect-ratio: auto !important;
  display: block !important;
  margin: 0 auto !important;
  opacity: 1 !important;
  transition: transform 0.3s ease, opacity 0.3s ease !important;
}

.wm-lb-caption-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.wm-lb-cap {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}

.wm-lb-count {
  color: rgba(255, 255, 255, 0.50) !important;
  font-size: 0.9rem !important;
}

.wm-slider-box {
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55) !important;
}

html[data-theme="light"] .wm-slider-box {
  border-color: #CBD5E1 !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.10) !important;
}

.wm-slide-track {
  position: relative !important;
  cursor: zoom-in !important;
  height: 440px !important;
  background: #060913 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}

html[data-theme="light"] .wm-slide-track {
  background: #F1F5F9 !important;
  border-bottom-color: #E2E8F0 !important;
}

.wm-main-img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  transition: opacity 0.25s ease !important;
}

.wm-expand-hint {
  position: absolute !important;
  bottom: 14px !important;
  right: 14px !important;
  background: rgba(0, 0, 0, 0.70) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

.wm-thumb-strip {
  display: flex !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  background: rgba(6, 10, 20, 0.95) !important;
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(0, 210, 255, 0.4) transparent !important;
}

html[data-theme="light"] .wm-thumb-strip {
  background: #F8FAFC !important;
}

.wm-slide-thumb {
  height: 60px !important;
  width: 96px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  border: 2px solid transparent !important;
  opacity: 0.65 !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.wm-slide-thumb.active, .wm-slide-thumb:hover {
  border-color: #00D2FF !important;
  opacity: 1 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 210, 255, 0.30) !important;
}

@media (max-width: 768px) {
  .wm-slide-track {
    height: 280px !important;
  }
  .wm-slide-thumb {
    height: 48px !important;
    width: 76px !important;
  }
}

.wm-tag-container {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.wm-tag-lg {
  padding: 8px 18px !important;
  font-size: 0.875rem !important;
}

.wm-card-padded {
  padding: 2rem !important;
}

/* Accordion Color Accent Icons */
.acc-icon-blue   { color: #00D2FF !important; margin-right: 12px !important; }
.acc-icon-green  { color: #17B26A !important; margin-right: 12px !important; }
.acc-icon-purple { color: #A855F7 !important; margin-right: 12px !important; }
.acc-icon-orange { color: #F47D20 !important; margin-right: 12px !important; }
.acc-icon-yellow { color: #EAB308 !important; margin-right: 12px !important; }
.acc-icon-pink   { color: #EC4899 !important; margin-right: 12px !important; }

/* Stripe warning note card */
.wm-stripe-note {
  margin-top: 1.5rem !important;
  padding: 1.25rem 1.5rem !important;
  border-radius: 12px !important;
  background: rgba(244, 125, 32, 0.10) !important;
  border: 1px solid rgba(244, 125, 32, 0.30) !important;
}

.wm-stripe-note p {
  margin: 0 !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: #FFFFFF !important;
}

html[data-theme="light"] .wm-stripe-note p {
  color: #0F172A !important;
}

.wm-stripe-note .note-icon {
  color: #F47D20 !important;
  margin-right: 8px !important;
  font-size: 1.1rem !important;
}

/* CTA Banner Group */
.wm-cta-btn-group {
  display: flex !important;
  justify-content: center !important;
  gap: 1.25rem !important;
  flex-wrap: wrap !important;
}

.wm-cta-buy-btn {
  padding: 14px 28px !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

.wm-cta-ask-btn {
  padding: 14px 28px !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
}

/* Documentation Link Box & Buttons */
.wm-doc-box {
  margin-top: 1.25rem !important;
  padding-top: 1.25rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

html[data-theme="light"] .wm-doc-box {
  border-top-color: #E2E8F0 !important;
}

.wm-doc-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  background: rgba(0, 210, 255, 0.08) !important;
  border: 1px solid rgba(0, 210, 255, 0.30) !important;
  border-radius: 10px !important;
  color: #00D2FF !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  text-align: center !important;
}

.wm-doc-btn-alt {
  background: rgba(168, 85, 247, 0.08) !important;
  border-color: rgba(168, 85, 247, 0.30) !important;
  color: #A855F7 !important;
}

.wm-doc-btn:hover {
  background: rgba(0, 210, 255, 0.20) !important;
  border-color: #00D2FF !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(0, 210, 255, 0.25) !important;
}

.wm-doc-btn-alt:hover {
  background: rgba(168, 85, 247, 0.20) !important;
  border-color: #A855F7 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.25) !important;
}

html[data-theme="light"] .wm-doc-btn {
  background: #F0F9FF !important;
  border-color: #BAE6FD !important;
  color: #0284C7 !important;
}

html[data-theme="light"] .wm-doc-btn-alt {
  background: #FDF4FF !important;
  border-color: #F5D0FE !important;
  color: #9333EA !important;
}

html[data-theme="light"] .wm-doc-btn:hover {
  background: #E0F2FE !important;
  color: #0369A1 !important;
}

html[data-theme="light"] .wm-doc-btn-alt:hover {
  background: #FAE8FF !important;
  color: #7E22CE !important;
}

/* ==========================================
   HERO BANNER SIDE FLOATING FEATURE CARDS
========================================== */
.wm-hero-float-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 1.15rem 1.25rem !important;
  background: rgba(10, 15, 29, 0.70) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.40) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.wm-hero-float-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(0, 210, 255, 0.45) !important;
  box-shadow: 0 14px 40px rgba(0, 87, 255, 0.25) !important;
}

html[data-theme="light"] .wm-hero-float-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

.wm-hero-float-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  flex-shrink: 0 !important;
}

.wm-hero-float-icon.blue   { background: rgba(0, 210, 255, 0.15) !important; color: #00D2FF !important; }
.wm-hero-float-icon.green  { background: rgba(23, 178, 106, 0.15) !important; color: #17B26A !important; }
.wm-hero-float-icon.purple { background: rgba(168, 85, 247, 0.15) !important; color: #A855F7 !important; }
.wm-hero-float-icon.orange { background: rgba(244, 125, 32, 0.15) !important; color: #F47D20 !important; }

html[data-theme="light"] .wm-hero-float-icon.blue   { background: rgba(0, 210, 255, 0.12) !important; color: #0284C7 !important; }
html[data-theme="light"] .wm-hero-float-icon.green  { background: rgba(23, 178, 106, 0.12) !important; color: #15803D !important; }
html[data-theme="light"] .wm-hero-float-icon.purple { background: rgba(168, 85, 247, 0.12) !important; color: #7E22CE !important; }
html[data-theme="light"] .wm-hero-float-icon.orange { background: rgba(244, 125, 32, 0.12) !important; color: #C2410C !important; }

.wm-hero-float-title {
  display: block !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin-bottom: 3px !important;
  line-height: 1.3 !important;
}

html[data-theme="light"] .wm-hero-float-title {
  color: #0F172A !important;
}

.wm-hero-float-desc {
  display: block !important;
  font-size: 0.8125rem !important;
  line-height: 1.4 !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

html[data-theme="light"] .wm-hero-float-desc {
  color: #64748B !important;
}

/* ==========================================
   STICKY SECTION SUB-NAV BAR
========================================== */
html {
  scroll-behavior: smooth !important;
}

#overview,
#roi-calculator,
#supported-gateways,
#features,
#comparison-matrix,
#requirements,
#accordion-sec,
#faq-section {
  scroll-margin-top: 130px !important;
}

.wm-sticky-subnav {
  position: sticky !important;
  top: 68px !important;
  z-index: 990 !important;
  background: rgba(6, 10, 20, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.3s ease !important;
}

html[data-theme="light"] .wm-sticky-subnav {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom-color: #E2E8F0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}

.wm-subnav-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.5rem !important;
  padding: 10px 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.wm-subnav-inner::-webkit-scrollbar { display: none !important; }

.wm-subnav-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-heading) !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

.wm-subnav-link:hover,
.wm-subnav-link.active {
  color: #00D2FF !important;
  background: rgba(0, 210, 255, 0.12) !important;
}

html[data-theme="light"] .wm-subnav-link {
  color: #475569 !important;
}

html[data-theme="light"] .wm-subnav-link:hover,
html[data-theme="light"] .wm-subnav-link.active {
  color: #0057FF !important;
  background: rgba(0, 87, 255, 0.08) !important;
}

/* ==========================================
   TECHNICAL REQUIREMENTS & SPECS GRID
========================================== */
.wm-req-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.25rem !important;
}

@media (max-width: 991px) {
  .wm-req-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 576px) {
  .wm-req-grid {
    grid-template-columns: 1fr !important;
  }
  .wm-nav-brand img {
    height: 38px !important;
    max-height: 38px !important;
    max-width: 140px !important;
  }
  .wm-nav-actions {
    gap: 6px !important;
  }
  .wm-qs-trigger-btn .wm-qs-kbd {
    display: none !important;
  }
  .wm-qs-trigger-btn {
    padding: 6px 10px !important;
  }
  .currency-dropdown {
    padding: 4px 6px !important;
    font-size: 0.7rem !important;
  }
}

.wm-req-card {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 1.25rem 1.5rem !important;
  background: rgba(10, 15, 29, 0.90) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 14px !important;
  transition: all 0.25s ease !important;
}

.wm-req-card:hover {
  border-color: rgba(0, 210, 255, 0.35) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 87, 255, 0.15) !important;
}

html[data-theme="light"] .wm-req-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .wm-req-card:hover {
  border-color: rgba(0, 87, 255, 0.30) !important;
  box-shadow: 0 8px 24px rgba(0, 87, 255, 0.10) !important;
}

.wm-req-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  flex-shrink: 0 !important;
}

.wm-req-icon.blue   { background: rgba(0, 210, 255, 0.15) !important; color: #00D2FF !important; }
.wm-req-icon.green  { background: rgba(23, 178, 106, 0.15) !important; color: #17B26A !important; }
.wm-req-icon.purple { background: rgba(168, 85, 247, 0.15) !important; color: #A855F7 !important; }
.wm-req-icon.orange { background: rgba(244, 125, 32, 0.15) !important; color: #F47D20 !important; }
.wm-req-icon.yellow { background: rgba(234, 179, 8, 0.15) !important; color: #EAB308 !important; }
.wm-req-icon.pink   { background: rgba(236, 72, 153, 0.15) !important; color: #EC4899 !important; }

.wm-req-info {
  display: flex !important;
  flex-direction: column !important;
}

.wm-req-label {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 2px !important;
}

html[data-theme="light"] .wm-req-label {
  color: #64748B !important;
}

.wm-req-val {
  font-family: var(--font-heading) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
}

html[data-theme="light"] .wm-req-val {
  color: #0F172A !important;
}

/* ==========================================
   STICKY BOTTOM PURCHASE BAR (ON-SCROLL)
========================================== */
.wm-sticky-buy-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  background: rgba(6, 10, 20, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-top: 1px solid rgba(0, 210, 255, 0.30) !important;
  padding: 12px 0 !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.60) !important;
  transform: translateY(100%) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.wm-sticky-buy-bar.visible {
  transform: translateY(0) !important;
}

html[data-theme="light"] .wm-sticky-buy-bar {
  background: rgba(255, 255, 255, 0.96) !important;
  border-top-color: rgba(0, 87, 255, 0.25) !important;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.10) !important;
}

.wm-sbb-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
}

.wm-sbb-product {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.wm-sbb-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
  background: rgba(0, 210, 255, 0.15) !important;
  color: #00D2FF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  flex-shrink: 0 !important;
}

.wm-sbb-title {
  display: block !important;
  font-family: var(--font-heading) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
}

html[data-theme="light"] .wm-sbb-title {
  color: #0F172A !important;
}

.wm-sbb-ver {
  display: block !important;
  font-size: 0.8125rem !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

html[data-theme="light"] .wm-sbb-ver {
  color: #64748B !important;
}

.wm-sbb-action {
  display: flex !important;
  align-items: center !important;
  gap: 1.25rem !important;
}

.wm-sbb-price {
  font-family: var(--font-heading) !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #00D2FF !important;
}

html[data-theme="light"] .wm-sbb-price {
  color: #0057FF !important;
}

.wm-sbb-price small {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

html[data-theme="light"] .wm-sbb-price small {
  color: #64748B !important;
}

.wm-sbb-btn {
  padding: 10px 24px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
}

/* ==========================================
   INTEGRATED PRODUCT CARD HEADER
========================================== */
.wm-card-header-main {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.wm-card-icon-box {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #0057FF 0%, #00D2FF 100%) !important;
  color: #FFFFFF !important;
  font-size: 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 24px rgba(0, 87, 255, 0.40) !important;
  flex-shrink: 0 !important;
}

.wm-card-badge-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
}

.wm-pill-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 12px !important;
  border-radius: 50px !important;
  font-family: var(--font-heading) !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  transition: all 0.25s ease !important;
}

.wm-pill-tag.blue {
  background: rgba(0, 87, 255, 0.15) !important;
  border: 1px solid rgba(0, 210, 255, 0.35) !important;
  color: #00D2FF !important;
}

.wm-pill-tag.green {
  background: rgba(23, 178, 106, 0.15) !important;
  border: 1px solid rgba(23, 178, 106, 0.40) !important;
  color: #17B26A !important;
}

.wm-pill-tag.cyan {
  background: rgba(0, 210, 255, 0.12) !important;
  border: 1px solid rgba(0, 210, 255, 0.40) !important;
  color: #00D2FF !important;
}

html[data-theme="light"] .wm-card-icon-box {
  background: linear-gradient(135deg, #0057FF 0%, #0284C7 100%) !important;
  box-shadow: 0 8px 24px rgba(0, 87, 255, 0.20) !important;
}

html[data-theme="light"] .wm-pill-tag.blue {
  background: #EBF2FF !important;
  border-color: rgba(0, 87, 255, 0.25) !important;
  color: #0057FF !important;
}

html[data-theme="light"] .wm-pill-tag.green {
  background: #ECFDF5 !important;
  border-color: rgba(23, 178, 106, 0.30) !important;
  color: #059669 !important;
}

html[data-theme="light"] .wm-pill-tag.cyan {
  background: #F0F9FF !important;
  border-color: rgba(0, 210, 255, 0.35) !important;
  color: #0284C7 !important;
}

/* ==========================================
   1. INTERACTIVE ROI SAVINGS CALCULATOR
========================================== */
.wm-roi-card {
  background: rgba(10, 15, 29, 0.95) !important;
  border: 1px solid rgba(0, 210, 255, 0.25) !important;
  border-radius: 20px !important;
  padding: 2.5rem !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.50), 0 0 30px rgba(0, 87, 255, 0.15) !important;
}

html[data-theme="light"] .wm-roi-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
}

.wm-roi-label {
  font-family: var(--font-heading) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}

html[data-theme="light"] .wm-roi-label {
  color: #0F172A !important;
}

.wm-roi-badge {
  font-family: var(--font-heading) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #00D2FF !important;
  background: rgba(0, 210, 255, 0.12) !important;
  border: 1px solid rgba(0, 210, 255, 0.30) !important;
  padding: 4px 14px !important;
  border-radius: 50px !important;
}

html[data-theme="light"] .wm-roi-badge {
  color: #0057FF !important;
  background: #EBF2FF !important;
  border-color: rgba(0, 87, 255, 0.25) !important;
}

.wm-slider-input {
  width: 100% !important;
  height: 8px !important;
  border-radius: 5px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  outline: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
}

html[data-theme="light"] .wm-slider-input {
  background: #E2E8F0 !important;
}

.wm-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #0057FF 0%, #00D2FF 100%) !important;
  cursor: pointer !important;
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.80) !important;
  border: 2px solid #FFFFFF !important;
}

.wm-slider-minmax {
  font-size: 0.8125rem !important;
  color: rgba(255, 255, 255, 0.50) !important;
}

html[data-theme="light"] .wm-slider-minmax {
  color: #64748B !important;
}

.wm-roi-result-box {
  background: linear-gradient(135deg, rgba(0, 87, 255, 0.15) 0%, rgba(0, 210, 255, 0.08) 100%) !important;
  border: 1px solid rgba(0, 210, 255, 0.30) !important;
  border-radius: 16px !important;
  padding: 2rem 1.5rem !important;
}

html[data-theme="light"] .wm-roi-result-box {
  background: linear-gradient(135deg, #EFF6FF 0%, #F0F9FF 100%) !important;
  border-color: #BAE6FD !important;
}

.wm-roi-result-label {
  font-family: var(--font-heading) !important;
  font-size: 0.8125rem !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  color: rgba(255, 255, 255, 0.70) !important;
  text-transform: uppercase !important;
}

html[data-theme="light"] .wm-roi-result-label {
  color: #475569 !important;
}

.wm-roi-amount {
  font-family: var(--font-heading) !important;
  font-size: 2.75rem !important;
  font-weight: 900 !important;
  color: #00D2FF !important;
  line-height: 1 !important;
}

html[data-theme="light"] .wm-roi-amount {
  color: #0057FF !important;
}

.wm-roi-unit {
  font-size: 1.125rem !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

html[data-theme="light"] .wm-roi-unit {
  color: #64748B !important;
}

.wm-roi-annual {
  font-size: 1.05rem !important;
  color: rgba(255, 255, 255, 0.80) !important;
}

html[data-theme="light"] .wm-roi-annual {
  color: #334155 !important;
}

html[data-theme="light"] .wm-roi-annual strong {
  color: #0F172A !important;
}

.wm-roi-payback-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(23, 178, 106, 0.15) !important;
  border: 1px solid rgba(23, 178, 106, 0.35) !important;
  color: #17B26A !important;
  padding: 6px 16px !important;
  border-radius: 50px !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .wm-roi-payback-pill {
  background: #ECFDF5 !important;
  border-color: #A7F3D0 !important;
  color: #059669 !important;
}

/* ==========================================
   2. SUPPORTED PAYMENT GATEWAYS GRID
========================================== */
.wm-gateway-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 1.25rem !important;
}

@media (max-width: 991px) {
  .wm-gateway-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 576px) {
  .wm-gateway-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

.wm-gw-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 1.5rem 1rem !important;
  background: rgba(10, 15, 29, 0.90) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  transition: all 0.25s ease !important;
}

.wm-gw-card:hover {
  background: rgba(0, 87, 255, 0.15) !important;
  border-color: rgba(0, 210, 255, 0.40) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 30px rgba(0, 87, 255, 0.20) !important;
}

html[data-theme="light"] .wm-gw-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .wm-gw-card:hover {
  border-color: #0057FF !important;
  box-shadow: 0 10px 30px rgba(0, 87, 255, 0.12) !important;
}

.wm-gw-icon {
  font-size: 2.25rem !important;
  margin-bottom: 0.75rem !important;
  line-height: 1 !important;
}

.wm-gw-name {
  font-family: var(--font-heading) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin-bottom: 4px !important;
}

html[data-theme="light"] .wm-gw-name {
  color: #0F172A !important;
}

.wm-gw-tag {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

html[data-theme="light"] .wm-gw-tag {
  color: #64748B !important;
}

/* ==========================================
   3. COMPARISON MATRIX TABLE
========================================== */
.wm-matrix-table-wrap {
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.40) !important;
  background: #0A0F1D !important;
}

html[data-theme="light"] .wm-matrix-table-wrap {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
}

.wm-matrix-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 !important;
}

#comparison-matrix table,
#comparison-matrix table.wm-matrix-table,
#comparison-matrix .wm-matrix-table tbody tr,
#comparison-matrix .wm-matrix-table tbody td {
  background-color: #0A0F1D !important;
  background: #0A0F1D !important;
  color: #FFFFFF !important;
}

#comparison-matrix .wm-matrix-table thead th {
  background-color: #0D1426 !important;
  background: #0D1426 !important;
  padding: 1.25rem 1.5rem !important;
  font-family: var(--font-heading) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.12) !important;
}

#comparison-matrix .wm-matrix-table tbody td:nth-child(2),
#comparison-matrix .wm-matrix-table thead th:nth-child(2) {
  background-color: rgba(255, 255, 255, 0.02) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

#comparison-matrix .wm-matrix-table tbody td:nth-child(3),
#comparison-matrix .wm-matrix-table thead th:nth-child(3) {
  background-color: rgba(0, 87, 255, 0.15) !important;
  background: rgba(0, 87, 255, 0.15) !important;
  color: #00D2FF !important;
}

html[data-theme="light"] #comparison-matrix table,
html[data-theme="light"] #comparison-matrix table.wm-matrix-table,
html[data-theme="light"] #comparison-matrix .wm-matrix-table tbody tr,
html[data-theme="light"] #comparison-matrix .wm-matrix-table tbody td {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  color: #0F172A !important;
}

html[data-theme="light"] #comparison-matrix .wm-matrix-table thead th {
  background-color: #F8FAFC !important;
  background: #F8FAFC !important;
  border-bottom-color: #E2E8F0 !important;
  color: #0F172A !important;
}

html[data-theme="light"] #comparison-matrix .wm-matrix-table tbody td:nth-child(2),
html[data-theme="light"] #comparison-matrix .wm-matrix-table thead th:nth-child(2) {
  background-color: #F8FAFC !important;
  background: #F8FAFC !important;
}

html[data-theme="light"] #comparison-matrix .wm-matrix-table tbody td:nth-child(3),
html[data-theme="light"] #comparison-matrix .wm-matrix-table thead th:nth-child(3) {
  background-color: #EBF2FF !important;
  background: #EBF2FF !important;
  color: #0057FF !important;
}

#comparison-matrix table.wm-matrix-table th.wm-matrix-feature-col {
  width: 50% !important;
  color: #FFFFFF !important;
  text-align: left !important;
  background-color: #0D1426 !important;
  background: #0D1426 !important;
}

#comparison-matrix table.wm-matrix-table th.wm-matrix-whmcs-col,
#comparison-matrix table.wm-matrix-table td:nth-child(2) {
  width: 25% !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-align: center !important;
  background-color: #111827 !important;
  background: #111827 !important;
}

#comparison-matrix table.wm-matrix-table th.wm-matrix-addon-col,
#comparison-matrix table.wm-matrix-table td:nth-child(3) {
  width: 25% !important;
  color: #00D2FF !important;
  text-align: center !important;
  background-color: rgba(0, 87, 255, 0.22) !important;
  background: rgba(0, 87, 255, 0.22) !important;
}

/* Light Mode Overrides */
html[data-theme="light"] #comparison-matrix table.wm-matrix-table th.wm-matrix-feature-col {
  color: #0F172A !important;
  background-color: #F8FAFC !important;
  background: #F8FAFC !important;
}

html[data-theme="light"] #comparison-matrix table.wm-matrix-table th.wm-matrix-whmcs-col,
html[data-theme="light"] #comparison-matrix table.wm-matrix-table td:nth-child(2) {
  color: #475569 !important;
  background-color: #F1F5F9 !important;
  background: #F1F5F9 !important;
}

html[data-theme="light"] #comparison-matrix table.wm-matrix-table th.wm-matrix-addon-col,
html[data-theme="light"] #comparison-matrix table.wm-matrix-table td:nth-child(3) {
  color: #0057FF !important;
  background-color: #EBF2FF !important;
  background: #EBF2FF !important;
}

.wm-matrix-table td {
  padding: 1.25rem 1.5rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  vertical-align: middle !important;
}

html[data-theme="light"] .wm-matrix-table td {
  border-bottom-color: #F1F5F9 !important;
}

.wm-matrix-feature-name strong {
  display: block !important;
  font-family: var(--font-heading) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin-bottom: 3px !important;
}

html[data-theme="light"] .wm-matrix-feature-name strong {
  color: #0F172A !important;
}

.wm-matrix-feature-name small {
  font-size: 0.875rem !important;
  color: rgba(255, 255, 255, 0.60) !important;
}

html[data-theme="light"] .wm-matrix-feature-name small {
  color: #64748B !important;
}

.wm-matrix-status {
  font-family: var(--font-heading) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-align: center !important;
}

.wm-matrix-status.pass {
  color: #17B26A !important;
}

html[data-theme="light"] .wm-matrix-status.pass {
  color: #059669 !important;
}

.wm-matrix-status.fail {
  color: #EF4444 !important;
}

/* ========== LIGHT MODE BRAND BADGE LOGO CONTRAST FIX ========== */
html[data-theme="light"] .wm-page-badge img,
html[data-theme="light"] .wm-badge-img,
html[data-theme="light"] span.wm-page-badge img,
html[data-theme="light"] .wm-page-badge-wrap img {
  filter: invert(0.85) hue-rotate(180deg) !important;
}

html[data-theme="light"] .wm-matrix-status.fail {
  color: #DC2626 !important;
}

.wm-matrix-status.neutral {
  color: #F59E0B !important;
}

html[data-theme="light"] .wm-matrix-status.neutral {
  color: #D97706 !important;
}

/* accent-red cards & red icons */
.wm-feature-card.accent-red { border-top-color: #EF4444 !important; }
.wm-feature-icon.red { background: rgba(239, 68, 68, 0.15) !important; color: #EF4444 !important; }
html[data-theme="light"] .wm-feature-icon.red { background: #FEE2E2 !important; color: #DC2626 !important; }

/* ------------------------------------------
   PLEASE READ BEFORE PURCHASE SIDE-BY-SIDE CARDS
------------------------------------------ */
.wm-notice-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 12px !important;
}

.wm-notice-header h4 {
  margin: 0 !important;
  font-family: var(--font-heading) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1.3 !important;
}

html[data-theme="light"] .wm-notice-header h4 {
  color: #0F172A !important;
}

/* ------------------------------------------
   FEATURE CARD SIDE-BY-SIDE HEADER ALIGNMENT
------------------------------------------ */
.wm-feature-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 12px !important;
}

.wm-feature-header .wm-feature-icon {
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
}

.wm-feature-header h4 {
  margin: 0 !important;
  font-family: var(--font-heading) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1.3 !important;
}

html[data-theme="light"] .wm-feature-header h4 {
  color: #0F172A !important;
}




/* ----------------------------------------------
   DOCS PARTIALS (.wm-doc-post-card & .wm-docs-sidebar-card)
   ---------------------------------------------- */
.wm-sidebar-title {
  color: #FFFFFF !important;
}
.wm-sidebar-icon {
  color: #00D2FF !important;
}

.wm-docs-search-wrap {
  position: relative !important;
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.wm-docs-search-input {
  width: 100% !important;
  height: 46px !important;
  line-height: 46px !important;
  padding-left: 16px !important;
  padding-right: 48px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
  border-radius: 12px !important;
  font-size: 0.95rem !important;
  transition: all 0.2s ease !important;
}
.wm-docs-search-input::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
  text-transform: none !important;
}
.wm-docs-search-input:focus {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #00D2FF !important;
  box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.2) !important;
}

.wm-docs-search-submit-btn {
  position: absolute !important;
  top: 7px !important;
  right: 7px !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #0057FF !important;
  border: none !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  z-index: 5 !important;
  transform: none !important;
}
.wm-docs-search-submit-btn:hover {
  background: #00D2FF !important;
  transform: scale(1.05) !important;
}

.wm-doc-category-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  background: rgba(0, 210, 255, 0.12) !important;
  border: 1px solid rgba(0, 210, 255, 0.25) !important;
  color: #00D2FF !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
.wm-doc-category-badge:hover {
  background: #0057FF !important;
  color: #FFFFFF !important;
  border-color: #0057FF !important;
}

.wm-doc-card-title a {
  color: #FFFFFF !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.wm-doc-card-title a:hover {
  color: #00D2FF !important;
}

/* Light Mode Overrides for Docs Partials */
html[data-theme="light"] .wm-sidebar-title {
  color: #0F172A !important;
}
html[data-theme="light"] .wm-sidebar-icon {
  color: #0057FF !important;
}
html[data-theme="light"] .wm-docs-sidebar-card {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
}
html[data-theme="light"] .wm-docs-search-input {
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
  font-weight: 500 !important;
}
html[data-theme="light"] .wm-docs-search-input::placeholder {
  color: #64748B !important;
  font-weight: 400 !important;
  text-transform: none !important;
}
html[data-theme="light"] .wm-docs-search-input:focus {
  background: #FFFFFF !important;
  border-color: #0057FF !important;
  box-shadow: 0 0 0 3px rgba(0, 87, 255, 0.15) !important;
}
html[data-theme="light"] .wm-docs-search-submit-btn {
  background: #0057FF !important;
  color: #FFFFFF !important;
}
html[data-theme="light"] .wm-docs-search-submit-btn:hover {
  background: #0284C7 !important;
}
html[data-theme="light"] .wm-doc-post-card {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
}
html[data-theme="light"] .wm-doc-card-title a {
  color: #0F172A !important;
  font-weight: 700 !important;
}
html[data-theme="light"] .wm-doc-card-title a:hover {
  color: #0057FF !important;
}
html[data-theme="light"] .wm-doc-card-text {
  color: #475569 !important;
}
html[data-theme="light"] .wm-doc-category-badge {
  background: #EFF6FF !important;
  border-color: #BAE6FD !important;
  color: #0284C7 !important;
}
html[data-theme="light"] .wm-doc-category-badge:hover {
  background: #0057FF !important;
  color: #FFFFFF !important;
}
html[data-theme="light"] .wm-doc-card-meta {
  border-top-color: #E2E8F0 !important;
}
html[data-theme="light"] .wm-doc-meta-info {
  color: #64748B !important;
}
html[data-theme="light"] .wm-doc-read-more {
  color: #0057FF !important;
  font-weight: 700 !important;
}

/* ----------------------------------------------
   INTERACTIVE BILLING TOGGLE SWITCH (-10% OFF)
   ---------------------------------------------- */
.wm-billing-toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50px;
  margin-bottom: 2rem;
}
.wm-billing-toggle-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: color 0.2s ease;
}
.wm-billing-toggle-label.active {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}
.wm-billing-switch {
  position: relative;
  width: 44px;
  height: 24px;
  background: #0057FF;
  border-radius: 50px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.wm-billing-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #FFFFFF;
  border-radius: 50%;
  transition: transform 0.3s ease;
}
.wm-billing-switch.annual::after {
  transform: translateX(20px);
}
.wm-discount-badge {
  background: #10B981;
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

html[data-theme="light"] .wm-billing-toggle-wrap {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.06) !important;
}
html[data-theme="light"] .wm-billing-toggle-label {
  color: #64748B !important;
}
html[data-theme="light"] .wm-billing-toggle-label.active {
  color: #0F172A !important;
}

/* ----------------------------------------------
   FLOATING QUICK-NAV ANCHOR BAR FOR PRODUCT PAGES
   ---------------------------------------------- */
.wm-sticky-subnav {
  position: sticky;
  top: 68px;
  z-index: 99;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 12px 0;
  transition: all 0.3s ease;
}
.wm-sticky-subnav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.wm-sticky-subnav-link {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: color 0.2s ease;
}
.wm-sticky-subnav-link:hover,
.wm-sticky-subnav-link.active {
  color: #00D2FF !important;
}

html[data-theme="light"] .wm-sticky-subnav {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom-color: #CBD5E1 !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
}
html[data-theme="light"] .wm-sticky-subnav-link {
  color: #475569 !important;
}
html[data-theme="light"] .wm-sticky-subnav-link:hover,
html[data-theme="light"] .wm-sticky-subnav-link.active {
  color: #0057FF !important;
}

/* ----------------------------------------------
   INTERACTIVE FEATURE CARDS ENHANCEMENT
   ---------------------------------------------- */
.wm-feature-card {
  position: relative;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.wm-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 45px rgba(0, 87, 255, 0.25);
  border-color: rgba(0, 210, 255, 0.4);
}
.wm-feature-card.accent-blue:hover { border-color: #00D2FF !important; box-shadow: 0 15px 35px rgba(0, 210, 255, 0.25) !important; }
.wm-feature-card.accent-green:hover { border-color: #10B981 !important; box-shadow: 0 15px 35px rgba(16, 185, 129, 0.25) !important; }
.wm-feature-card.accent-purple:hover { border-color: #A855F7 !important; box-shadow: 0 15px 35px rgba(168, 85, 247, 0.25) !important; }
.wm-feature-card.accent-orange:hover { border-color: #F97316 !important; box-shadow: 0 15px 35px rgba(249, 115, 22, 0.25) !important; }
.wm-feature-card.accent-pink:hover { border-color: #EC4899 !important; box-shadow: 0 15px 35px rgba(236, 72, 153, 0.25) !important; }

html[data-theme="light"] .wm-feature-card {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
}
html[data-theme="light"] .wm-feature-card h4 {
  color: #0F172A !important;
}
html[data-theme="light"] .wm-feature-card p {
  color: #475569 !important;
}
html[data-theme="light"] .wm-doc-card-title a:hover {
  color: #0284C7 !important;
}

.wm-doc-card-text {
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.75) !important;
}
html[data-theme="light"] .wm-doc-card-text {
  color: #475569 !important;
}

.wm-doc-meta-info {
  color: rgba(255, 255, 255, 0.6) !important;
}
html[data-theme="light"] .wm-doc-meta-info {
  color: #64748B !important;
}

.wm-doc-read-more {
  color: #00c6ff !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
  transition: transform 0.2s ease !important;
}
.wm-doc-read-more:hover {
  color: #38bdf8 !important;
  transform: translateX(3px) !important;
}
html[data-theme="light"] .wm-doc-read-more {
  color: #0284C7 !important;
}

/* Docs Sidebar Styling */
.wm-docs-search-input {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 0.9rem !important;
  transition: all 0.2s ease !important;
}
.wm-docs-search-input:focus {
  border-color: #00c6ff !important;
  box-shadow: 0 0 0 3px rgba(0, 198, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="light"] .wm-docs-search-input {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}
html[data-theme="light"] .wm-docs-search-input:focus {
  border-color: #0284C7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
  background: #FFFFFF !important;
}

.wm-docs-category-link {
  display: flex !important;
  align-items: center !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: none !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  background: rgba(255, 255, 255, 0.02) !important;
}
.wm-docs-category-link:hover {
  background: rgba(0, 198, 255, 0.1) !important;
  color: #00c6ff !important;
  transform: translateX(4px) !important;
}

html[data-theme="light"] .wm-docs-category-link {
  color: #334155 !important;
  background: #F8FAFC !important;
}
html[data-theme="light"] .wm-docs-category-link:hover {
  background: #F0F9FF !important;
  color: #0284C7 !important;
}

/* ----------------------------------------------
   GLOBAL CTRL + K QUICK SEARCH MODAL SYSTEM
   ---------------------------------------------- */
.wm-qs-trigger-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.wm-qs-trigger-btn:hover {
  background: rgba(0, 87, 255, 0.2);
  border-color: #00D2FF;
  color: #00D2FF;
}
.wm-qs-kbd kbd {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  font-size: 0.7rem;
  padding: 1px 5px;
  font-family: var(--font-mono);
  color: #FFFFFF;
}

/* Modal Overlay Backdrop */
.wm-qs-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(6, 9, 19, 0.82);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}

/* Modal Card Dialog */
.wm-qs-dialog {
  background: #0F172A;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-top: 3px solid #00D2FF;
  border-radius: 16px;
  width: 90%;
  max-width: 650px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.wm-qs-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}
.wm-qs-search-icon {
  font-size: 1.2rem;
  color: #00D2FF;
  margin-right: 12px;
}
.wm-qs-input {
  width: 100%;
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-size: 1.05rem;
  outline: none;
}
.wm-qs-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.wm-qs-esc kbd {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  padding: 2px 7px;
  border-radius: 4px;
}

.wm-qs-body {
  max-height: 420px;
  overflow-y: auto;
  padding: 8px 12px;
}

.wm-qs-item {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none !important;
  transition: all 0.2s ease;
  margin-bottom: 4px;
}
.wm-qs-item:hover,
.wm-qs-item.active {
  background: rgba(0, 87, 255, 0.18);
  border-left: 3px solid #00D2FF;
}

.wm-qs-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(0, 210, 255, 0.12);
  color: #00D2FF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.wm-qs-item-title {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
}
.wm-qs-item-cat {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.78rem;
  font-family: var(--font-mono);
}

.wm-qs-footer {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
}
.wm-qs-footer kbd {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.7rem;
}

.wm-qs-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

/* Light Theme Overrides */
html[data-theme="light"] .wm-qs-trigger-btn {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #334155 !important;
}
html[data-theme="light"] .wm-qs-kbd kbd {
  background: #E2E8F0 !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}
html[data-theme="light"] .wm-qs-backdrop {
  background: rgba(15, 23, 42, 0.45) !important;
}
html[data-theme="light"] .wm-qs-dialog {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.15) !important;
}
html[data-theme="light"] .wm-qs-header {
  border-bottom-color: #E2E8F0 !important;
}
html[data-theme="light"] .wm-qs-input {
  color: #0F172A !important;
}
html[data-theme="light"] .wm-qs-input::placeholder {
  color: #94A3B8 !important;
}
html[data-theme="light"] .wm-qs-item:hover,
html[data-theme="light"] .wm-qs-item.active {
  background: #EFF6FF !important;
}
html[data-theme="light"] .wm-qs-item-title {
  color: #0F172A !important;
}
html[data-theme="light"] .wm-qs-item-cat {
  color: #64748B !important;
}
html[data-theme="light"] .wm-qs-footer {
  background: #F8FAFC !important;
  border-top-color: #E2E8F0 !important;
  color: #64748B !important;
}
html[data-theme="light"] .wm-qs-footer kbd {
  background: #E2E8F0 !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

/* ----------------------------------------------
   MOBILE & TABLET RESPONSIVE POLISH
   ---------------------------------------------- */
@media (max-width: 576px) {
  .wm-qs-kbd {
    display: none !important;
  }
  .wm-filter-buttons {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    width: 100% !important;
    padding-bottom: 8px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .wm-filter-btn {
    flex-shrink: 0 !important;
  }
  .wm-prod-card-header {
    padding: 20px 16px 14px !important;
  }
  .wm-prod-banner-title {
    font-size: 0.9rem !important;
  }
  .wm-prod-card-body {
    padding: 16px !important;
  }
  .wm-prod-actions {
    flex-direction: row !important;
    gap: 8px !important;
  }
  .wm-sticky-subnav-links {
    gap: 1rem !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    justify-content: flex-start !important;
    padding: 0 16px !important;
  }
}

/* ----------------------------------------------
   DOCUMENT ARTICLE TYPOGRAPHY & CHANGELOG BADGES
   ---------------------------------------------- */
.wm-badge-fix { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; background: rgba(249, 115, 22, 0.15); border: 1px solid rgba(249, 115, 22, 0.3); color: #F97316; font-size: 0.78rem; font-weight: 700; }
.wm-badge-req { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; background: rgba(6, 182, 212, 0.15); border: 1px solid rgba(6, 182, 212, 0.3); color: #06B6D4; font-size: 0.78rem; font-weight: 700; }
.wm-badge-add { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); color: #10B981; font-size: 0.78rem; font-weight: 700; }
.wm-badge-del { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); color: #EF4444; font-size: 0.78rem; font-weight: 700; }
.wm-badge-upd { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; background: rgba(168, 85, 247, 0.15); border: 1px solid rgba(168, 85, 247, 0.3); color: #A855F7; font-size: 0.78rem; font-weight: 700; }

.wm-post-content {
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
}
.wm-post-content h1, .wm-post-content h2, .wm-post-content h3, .wm-post-content h4 {
  color: #FFFFFF !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  margin-top: 2rem !important;
  margin-bottom: 1rem !important;
}
.wm-post-content pre {
  background: #060913 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
  color: #00D2FF !important;
  font-family: var(--font-mono) !important;
}
.wm-post-content code {
  background: rgba(0, 210, 255, 0.1) !important;
  color: #00D2FF !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-family: var(--font-mono) !important;
}

html[data-theme="light"] .wm-post-content {
  color: #334155 !important;
}
html[data-theme="light"] .wm-post-content h1,
html[data-theme="light"] .wm-post-content h2,
html[data-theme="light"] .wm-post-content h3,
html[data-theme="light"] .wm-post-content h4 {
  color: #0F172A !important;
}
html[data-theme="light"] .wm-post-banner-meta {
  color: #475569 !important;
}
html[data-theme="light"] .wm-post-footer-bar {
  border-top-color: #E2E8F0 !important;
}