/*
 * ═══════════════════════════════════════════════════════════════════════════
 *  SWEDBANG — ENTERPRISE DARK THEME (PRODUCTION LOCK)
 *  Version: 1.0 | Date: 2026-06-21
 *
 *  LOADED LAST — Highest specificity. Single source of truth.
 *
 *  DO NOT TOUCH:
 *    ✘ Logo (size, color, position, shape)
 *    ✘ Animation files (sbhp-premium.js, three.js, GSAP)
 *    ✘ Content / text / headlines
 *    ✘ Section order / layout structure
 *    ✘ Typography family (Satoshi)
 *    ✘ WhatsApp button
 *    ✘ Hero animation canvas
 *
 *  COLOR SYSTEM:
 *    Page:     #070C1A
 *    Alt:      #0D1428
 *    Card:     #111E38
 *    Accent:   #00C6FF
 *    Header:   #0C162D
 *    Footer:   #0C162D
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────────────────────────────
   1. GLOBAL CSS TOKEN OVERRIDE
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --color-bg:             #070C1A !important;
  --color-surface:        #0D1428 !important;
  --color-surface-2:      #0D1428 !important;
  --color-surface-alt:    #111E38 !important;
  --color-card:           #111E38 !important;
  --bg-primary:           #070C1A !important;
  --bg-secondary:         #0D1428 !important;
  --bg-footer:            #0C162D !important;
  --bg-card:              #111E38 !important;
  --bg-card-hover:        #162645 !important;

  /* Borders */
  --color-border:         rgba(0, 198, 255, 0.10) !important;
  --color-border-light:   rgba(0, 198, 255, 0.08) !important;
  --border-color:         rgba(0, 198, 255, 0.10) !important;
  --color-divider:        rgba(0, 198, 255, 0.08) !important;
  --color-border-hover:   rgba(0, 198, 255, 0.28) !important;

  /* Brand primary */
  --color-primary:        #00C6FF !important;
  --color-primary-hover:  #0099CC !important;
  --color-primary-surface: rgba(0, 198, 255, 0.08) !important;
  --color-primary-glow:   rgba(0, 198, 255, 0.15) !important;

  /* Brand secondary */
  --color-secondary:      #7B5CFF !important;
  --color-secondary-surface: rgba(123, 92, 255, 0.10) !important;

  /* Status */
  --color-success:        #00E599 !important;
  --color-success-surface: rgba(0, 229, 153, 0.09) !important;
  --color-warning:        #FFB340 !important;
  --color-danger:         #FF5370 !important;

  /* Buttons */
  --color-btn-primary:    #00C6FF !important;
  --color-btn-hover:      #0099CC !important;
  --color-btn-text:       #000F1F !important;
  --btn-gradient:         #00C6FF !important;

  /* Accents */
  --color-gold:           #FFB340 !important;
  --color-blue-accent:    #00C6FF !important;
  --color-blue-glow:      rgba(0, 198, 255, 0.15) !important;
  --accent-blue:          #00C6FF !important;

  /* Text */
  --color-text:           #EBF2FF !important;
  --color-text-muted:     #89A8C7 !important;
  --color-text-dim:       #4A6A8A !important;
  --text-primary:         #EBF2FF !important;
  --text-secondary:       #89A8C7 !important;
  --text-muted:           #89A8C7 !important;
  --heading-color:        #EBF2FF !important;
  --body-color:           #89A8C7 !important;

  /* Shadows */
  --shadow-card:          0 2px 12px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3) !important;
  --shadow-hover:         0 8px 32px rgba(0,198,255,0.10), 0 2px 8px rgba(0,0,0,0.5) !important;
  --focus-ring:           0 0 0 3px rgba(0,198,255,0.12) !important;

  /* Legacy mappings */
  --black:                #070C1A !important;
  --off-black:            #0D1428 !important;
  --surface-1:            #111E38 !important;
  --surface-2:            #0D1428 !important;
  --surface-3:            #111E38 !important;
  --bg:                   #070C1A !important;
  --surface:              #070C1A !important;
  --input-bg:             #0F1A30 !important;
  --input-border:         rgba(0, 198, 255, 0.14) !important;
  --footer-bg:            #0C162D !important;

  /* Card glass */
  --lux-card-bg: linear-gradient(
    135deg,
    rgba(17, 30, 56, 0.95) 0%,
    rgba(12, 22, 45, 0.98) 100%
  ) !important;
  --lux-card-border:       rgba(0, 198, 255, 0.10) !important;
  --lux-card-border-hover: rgba(0, 198, 255, 0.28) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. PAGE BODY — Enterprise dark base
   ───────────────────────────────────────────────────────────────────────────── */
html:not(.light-theme),
html:not(.light-theme) body {
  background-color: #070C1A !important;
  background-image: none !important;
  color: #89A8C7 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. HEADER — Enterprise dark blue
      ✘ Does NOT change: logo, layout, nav structure, spacing
   ───────────────────────────────────────────────────────────────────────────── */
html:not(.light-theme) header,
html:not(.light-theme) #sb-header,
html:not(.light-theme) .sb-header {
  background: #0C162D !important;
  border-bottom: 1px solid rgba(0, 198, 255, 0.10) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.40) !important;
}

/* Header scrolled state */
html:not(.light-theme) header.is-scrolled,
html:not(.light-theme) header.scrolled,
html:not(.light-theme) header[data-scrolled="true"],
html:not(.light-theme) #sb-header.is-scrolled,
html:not(.light-theme) #sb-header.scrolled,
html:not(.light-theme) .sb-header.is-scrolled,
html:not(.light-theme) .sb-header.scrolled {
  background: rgba(12, 22, 45, 0.97) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(0, 198, 255, 0.10) !important;
  box-shadow: 0 2px 32px rgba(0, 0, 0, 0.55) !important;
}

/* Nav links */
html:not(.light-theme) .sb-nav > a,
html:not(.light-theme) .sb-nav > div,
html:not(.light-theme) header .desktop-nav a,
html:not(.light-theme) header nav a {
  color: #A8C0E0 !important;
  font-weight: 500 !important;
}

html:not(.light-theme) .sb-nav > a:hover,
html:not(.light-theme) .sb-nav > div:hover,
html:not(.light-theme) header .desktop-nav a:hover,
html:not(.light-theme) header nav a:hover {
  color: #00C6FF !important;
  border-bottom-color: rgba(0, 198, 255, 0.40) !important;
}

html:not(.light-theme) .sb-nav > a.active,
html:not(.light-theme) header nav a.active {
  color: #00C6FF !important;
  border-bottom-color: #00C6FF !important;
}

/* Prevent any other file from overriding header text to dark */
html:not(.light-theme) header a,
html:not(.light-theme) header span:not([class*="logo"]):not(img),
html:not(.light-theme) header button:not(.luxury-button-primary):not(.theme-toggle-btn):not(#sb-sound-btn) {
  color: #A8C0E0 !important;
}
html:not(.light-theme) header a:hover {
  color: #00C6FF !important;
}

/* Dropdown panel */
html:not(.light-theme) .sb-dropdown-inner {
  background: rgba(7, 12, 26, 0.98) !important;
  border: 1px solid rgba(0, 198, 255, 0.12) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55) !important;
}
html:not(.light-theme) .sb-dropdown-paths a {
  color: rgba(168, 192, 224, 0.85) !important;
}
html:not(.light-theme) .sb-dropdown-paths a:hover {
  color: #00C6FF !important;
}
html:not(.light-theme) .sb-dropdown-footer-link {
  color: #00C6FF !important;
}
html:not(.light-theme) .sb-dropdown-footer-link:hover {
  color: #5DDEFF !important;
}

/* Mobile drawer */
html:not(.light-theme) .sb-mobile-menu,
html:not(.light-theme) .mobile-menu,
html:not(.light-theme) [class*="mobile-drawer"],
html:not(.light-theme) [class*="mobile-menu"] {
  background: #0C162D !important;
  border-left: 1px solid rgba(0, 198, 255, 0.12) !important;
}
html:not(.light-theme) .sb-mob-top-link {
  color: #A8C0E0 !important;
  border-bottom-color: rgba(0, 198, 255, 0.08) !important;
}
html:not(.light-theme) .sb-mob-top-link:hover,
html:not(.light-theme) .sb-mob-top-link.active {
  color: #00C6FF !important;
}
html:not(.light-theme) .sb-mob-section-label {
  color: #00C6FF !important;
}
html:not(.light-theme) .sb-mob-sub-link {
  color: #7A9BBF !important;
  border-left-color: rgba(0, 198, 255, 0.20) !important;
}
html:not(.light-theme) .sb-mob-sub-link:hover,
html:not(.light-theme) .sb-mob-sub-link.active {
  color: #00C6FF !important;
  border-left-color: #00C6FF !important;
}
html:not(.light-theme) .sb-mob-accordion-icon {
  color: #00C6FF !important;
}
html:not(.light-theme) .sb-mob-primary-btn {
  background: #00C6FF !important;
  color: #000F1F !important;
}
html:not(.light-theme) .sb-ham-line {
  background: #A8C0E0 !important;
}

/* Sound / equalizer button — enterprise blue */
html:not(.light-theme) #sb-sound-btn {
  border-color: rgba(0, 198, 255, 0.30) !important;
  color: #00C6FF !important;
}
html:not(.light-theme) #sb-sound-btn:hover {
  background: rgba(0, 198, 255, 0.08) !important;
  border-color: rgba(0, 198, 255, 0.60) !important;
  box-shadow: 0 0 16px rgba(0, 198, 255, 0.20) !important;
}
html:not(.light-theme) #sb-sound-mob-btn {
  background: rgba(0, 198, 255, 0.08) !important;
  border-color: rgba(0, 198, 255, 0.25) !important;
  color: #00C6FF !important;
}

/* Theme toggle button */
html:not(.light-theme) .theme-toggle-btn {
  border-color: rgba(0, 198, 255, 0.25) !important;
  color: #A8C0E0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. FOOTER — Enterprise dark blue
      ✘ Does NOT change: layout, logo, sections, spacing
   ───────────────────────────────────────────────────────────────────────────── */
html:not(.light-theme) footer,
html:not(.light-theme) .footer,
html:not(.light-theme) [class*="footer"],
html:not(.light-theme) [class*="Footer"],
html:not(.light-theme) footer#main-footer,
html:not(.light-theme) .ent-footer {
  background: #0C162D !important;
  background-image: none !important;
  border-top: 1px solid rgba(0, 198, 255, 0.10) !important;
}

/* Footer headings */
html:not(.light-theme) footer h1,
html:not(.light-theme) footer h2,
html:not(.light-theme) footer h3,
html:not(.light-theme) footer h4,
html:not(.light-theme) footer h5,
html:not(.light-theme) footer h6,
html:not(.light-theme) footer strong,
html:not(.light-theme) footer [class*="heading"],
html:not(.light-theme) footer [class*="title"] {
  color: #A8C0E0 !important;
  font-weight: 600 !important;
}

/* Footer body text */
html:not(.light-theme) footer p,
html:not(.light-theme) footer span,
html:not(.light-theme) footer li {
  color: #7A9BBF !important;
  background-color: transparent !important;
}

/* Footer links */
html:not(.light-theme) footer a {
  color: #7A9BBF !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
  background-color: transparent !important;
}
html:not(.light-theme) footer a:hover {
  color: #00C6FF !important;
}

/* Footer copyright bar */
html:not(.light-theme) footer [class*="copyright"],
html:not(.light-theme) footer [class*="bottom-bar"],
html:not(.light-theme) footer [class*="bottomBar"],
html:not(.light-theme) footer [class*="footer-bottom"],
html:not(.light-theme) .footer-bottom,
html:not(.light-theme) .copyright-bar {
  background: rgba(0, 0, 0, 0.20) !important;
  color: #4A6A8A !important;
  border-top: 1px solid rgba(0, 198, 255, 0.06) !important;
}
html:not(.light-theme) footer [class*="copyright"] a {
  color: #7A9BBF !important;
}
html:not(.light-theme) footer [class*="copyright"] a:hover {
  color: #00C6FF !important;
}

/* Footer social icons */
html:not(.light-theme) footer [class*="social"] svg,
html:not(.light-theme) footer [class*="icon"] svg,
html:not(.light-theme) footer svg {
  color: #7A9BBF !important;
  fill: currentColor;
  transition: color 0.15s ease !important;
}
html:not(.light-theme) footer [class*="social"]:hover svg,
html:not(.light-theme) footer [class*="icon"]:hover svg {
  color: #00C6FF !important;
}

/* Footer gradient bridge */
#sb-footer-bridge {
  background: linear-gradient(to bottom, #070C1A 0%, #0C162D 100%) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. PAGE SECTIONS — Alternating enterprise backgrounds
      ✘ Does NOT change hero (#sbhp-hero, #hero-story)
   ───────────────────────────────────────────────────────────────────────────── */
html:not(.light-theme) section:not(#hero-story):not(#sbhp-hero):not(.sbhp-hero),
html:not(.light-theme) .section:not(#hero-story),
html:not(.light-theme) .ip-section,
html:not(.light-theme) .ip-page,
html:not(.light-theme) main > div:not([class*="hero"]) {
  background-color: #070C1A;
}

html:not(.light-theme) section:nth-child(even):not(#hero-story):not(#sbhp-hero),
html:not(.light-theme) .sb-section:nth-child(even),
html:not(.light-theme) .section-alt,
html:not(.light-theme) .alt-bg {
  background-color: #0D1428;
}

/* Inner page hero areas */
html:not(.light-theme) .page-hero-gradient,
html:not(.light-theme) .ip-hero,
html:not(.light-theme) [class*="inner-hero"],
html:not(.light-theme) [class*="page-hero"] {
  background: linear-gradient(135deg, #0A1428 0%, #111E38 100%) !important;
}

/* Inner page CTA strips */
html:not(.light-theme) .page-cta-gradient,
html:not(.light-theme) .ip-cta,
html:not(.light-theme) [class*="inner-cta"] {
  background: linear-gradient(135deg, #0D1428 0%, #111E38 100%) !important;
  border: 1px solid rgba(0, 198, 255, 0.10) !important;
}

/* Stats sections */
html:not(.light-theme) .sb-stats-section,
html:not(.light-theme) [class*="stats-section"] {
  background-color: #0D1428 !important;
}

/* Trust bar / logo strip */
html:not(.light-theme) .trust-strip,
html:not(.light-theme) .sb-trust-strip,
html:not(.light-theme) [class*="trust-strip"],
html:not(.light-theme) [class*="trust-bar"] {
  background-color: rgba(13, 20, 40, 0.95) !important;
  border-bottom: 1px solid rgba(0, 198, 255, 0.08) !important;
}

html:not(.light-theme) .logo-strip,
html:not(.light-theme) [class*="logo-strip"],
html:not(.light-theme) [class*="partner-logos"] {
  background-color: rgba(7, 12, 26, 0.90) !important;
  border-top: 1px solid rgba(0, 198, 255, 0.07) !important;
  border-bottom: 1px solid rgba(0, 198, 255, 0.07) !important;
}

/* CTA advisory sections */
html:not(.light-theme) .advisory,
html:not(.light-theme) .cta-strip,
html:not(.light-theme) [class*="advisory"],
html:not(.light-theme) [class*="cta-section"] {
  background: linear-gradient(135deg,
    rgba(0, 198, 255, 0.05) 0%,
    rgba(123, 92, 255, 0.05) 100%
  ) !important;
  border: 1px solid rgba(0, 198, 255, 0.10) !important;
}

/* Software section */
html:not(.light-theme) #swedbang-software {
  background-color: #0D1428 !important;
}

/* Pre-footer strip */
html:not(.light-theme) .sb-prefooter {
  background: rgba(7, 12, 26, 0.95) !important;
  border-top-color: rgba(0, 198, 255, 0.08) !important;
  border-bottom-color: rgba(0, 198, 255, 0.08) !important;
}

/* Tailwind compiled dark backgrounds → enterprise dark */
html:not(.light-theme) .bg-\[\#111827\],
html:not(.light-theme) .bg-\[\#0B0C10\],
html:not(.light-theme) .bg-\[\#050505\],
html:not(.light-theme) .bg-\[\#0B1120\],
html:not(.light-theme) .bg-\[\#111111\],
html:not(.light-theme) .bg-\[\#0A0F1E\],
html:not(.light-theme) .bg-\[\#060C14\],
html:not(.light-theme) .bg-\[\#05080F\],
html:not(.light-theme) .bg-\[\#050812\],
html:not(.light-theme) .bg-\[\#1C2E40\],
html:not(.light-theme) .bg-\[\#0D0D14\],
html:not(.light-theme) .bg-\[\#020408\] {
  background-color: #111E38 !important;
}

html:not(.light-theme) .bg-white\/5,
html:not(.light-theme) .bg-white\/10,
html:not(.light-theme) .bg-white\/\[0\.05\],
html:not(.light-theme) .bg-white\/\[0\.08\] {
  background-color: rgba(0, 198, 255, 0.05) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. TYPOGRAPHY — Enterprise readable text system
      ✘ Does NOT change font family or scale
   ───────────────────────────────────────────────────────────────────────────── */
html:not(.light-theme) h1,
html:not(.light-theme) h2 {
  color: #EBF2FF !important;
  -webkit-text-fill-color: initial;
}

html:not(.light-theme) h3,
html:not(.light-theme) h4 {
  color: #D8E6FA !important;
}

html:not(.light-theme) h5,
html:not(.light-theme) h6 {
  color: #A8C0E0 !important;
}

html:not(.light-theme) p:not(#sbhp-hero p):not(.sbhp-section p):not(#hero-story p) {
  color: #89A8C7 !important;
}

html:not(.light-theme) .text-muted,
html:not(.light-theme) [class*="text-muted"] {
  color: #89A8C7 !important;
}

html:not(.light-theme) .text-white {
  color: #EBF2FF !important;
}

/* Links outside nav and footer */
html:not(.light-theme) a:not([class]):not(.btn):not(header a):not(footer a):not(.sb-nav a) {
  color: #00C6FF !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}
html:not(.light-theme) a:not([class]):hover {
  color: #5DDEFF !important;
}

/* Eyebrows / labels */
html:not(.light-theme) .ip-category,
html:not(.light-theme) .ip-section-eyebrow,
html:not(.light-theme) .sbhp-eyebrow:not(#sbhp-hero .sbhp-eyebrow),
html:not(.light-theme) .label-text,
html:not(.light-theme) .section-label {
  color: #00C6FF !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. HERO SECTION TEXT — Only text/badge/CTA colors
      ✘ ABSOLUTELY NO changes to canvas, animation, timing, layers
   ───────────────────────────────────────────────────────────────────────────── */

/* Hero headline lines */
html:not(.light-theme) .hero-headline span:nth-child(1),
html:not(.light-theme) .hero-headline span:nth-child(2) {
  color: #EBF2FF !important;
  -webkit-text-fill-color: #EBF2FF !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

html:not(.light-theme) .hero-headline span:nth-child(3) {
  background: linear-gradient(135deg, #00C6FF 0%, #7B5CFF 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Hero subtext */
html:not(.light-theme) .hero-sub,
html:not(.light-theme) .hero-subheadline,
html:not(.light-theme) .sbhp-subheadline {
  color: #89A8C7 !important;
}

/* Hero eyebrow */
html:not(.light-theme) .hero-eyebrow {
  color: #00C6FF !important;
  background: none !important;
  -webkit-text-fill-color: #00C6FF !important;
}

/* Hero badge */
html:not(.light-theme) [class*="hero"] [class*="badge"],
html:not(.light-theme) [class*="hero"] .badge {
  background: rgba(0, 198, 255, 0.08) !important;
  color: #00C6FF !important;
  border-color: rgba(0, 198, 255, 0.20) !important;
}

/* Live status dot */
html:not(.light-theme) [class*="live-dot"],
html:not(.light-theme) [class*="status-dot"] {
  background: #00E599 !important;
  box-shadow: 0 0 6px rgba(0, 229, 153, 0.50) !important;
}
html:not(.light-theme) .sb-status-dot {
  background: #00E599 !important;
  box-shadow: 0 0 8px rgba(0, 229, 153, 0.50) !important;
}

/* Hero stat numbers */
html:not(.light-theme) [class*="hero"] [class*="stat"] strong,
html:not(.light-theme) [class*="hero"] [class*="number"],
html:not(.light-theme) [class*="hero"] [class*="count"] {
  color: #EBF2FF !important;
}

/* Hero stat labels */
html:not(.light-theme) [class*="hero"] [class*="stat"] span,
html:not(.light-theme) [class*="hero"] [class*="stat"] p {
  color: #4A6A8A !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. CARDS — Enterprise glass dark
   ───────────────────────────────────────────────────────────────────────────── */
html:not(.light-theme) .ip-card,
html:not(.light-theme) [class*="card"]:not([class*="card-fore"]):not([class*="card-back"]):not(.sbhp-logo-chip),
html:not(.light-theme) [class*="Card"]:not([class*="card-fore"]):not([class*="card-back"]) {
  background: #111E38 !important;
  border: 1px solid rgba(0, 198, 255, 0.10) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.40), 0 1px 3px rgba(0,0,0,0.30) !important;
  transition: transform 0.20s ease, box-shadow 0.20s ease, border-color 0.20s ease !important;
}

html:not(.light-theme) .ip-card:hover,
html:not(.light-theme) [class*="card"]:hover:not(.sbhp-logo-chip),
html:not(.light-theme) [class*="Card"]:hover {
  background: #162645 !important;
  border-color: rgba(0, 198, 255, 0.28) !important;
  box-shadow: 0 8px 32px rgba(0,198,255,0.10), 0 2px 8px rgba(0,0,0,0.50) !important;
  transform: translateY(-3px) !important;
}

html:not(.light-theme) [class*="card"] h2,
html:not(.light-theme) [class*="card"] h3,
html:not(.light-theme) [class*="card"] h4,
html:not(.light-theme) [class*="Card"] h2,
html:not(.light-theme) [class*="Card"] h3 {
  color: #A8C0E0 !important;
}

html:not(.light-theme) [class*="card"] p,
html:not(.light-theme) [class*="Card"] p {
  color: #89A8C7 !important;
}

/* Software cards */
html:not(.light-theme) .sw-soft-card {
  background: #111E38 !important;
  border: 1px solid rgba(0, 198, 255, 0.10) !important;
}

/* SBHP supply/feature cards — keep their dark glassmorphism intact */
html:not(.light-theme) .sbhp-supply-card,
html:not(.light-theme) .sbhp-feature-card {
  /* Intentionally not overriding — handled by sbhp-premium.css */
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. BADGES / CHIPS / TAGS
   ───────────────────────────────────────────────────────────────────────────── */
html:not(.light-theme) [class*="chip"],
html:not(.light-theme) [class*="badge"]:not(#sbhp-hero [class*="badge"]),
html:not(.light-theme) [class*="tag"]:not(.sbhp-tag) {
  background: rgba(0, 198, 255, 0.08) !important;
  color: #00C6FF !important;
  border: 1px solid rgba(0, 198, 255, 0.18) !important;
  border-radius: 6px !important;
}

/* Popular badge */
html:not(.light-theme) [class*="popular"] {
  background: rgba(0, 198, 255, 0.08) !important;
  color: #00C6FF !important;
}

/* New badge */
html:not(.light-theme) [class*="badge-new"],
html:not(.light-theme) .badge-new {
  background: rgba(123, 92, 255, 0.10) !important;
  color: #7B5CFF !important;
}

/* Best value / success badge */
html:not(.light-theme) [class*="best-value"],
html:not(.light-theme) .badge-success {
  background: rgba(0, 229, 153, 0.09) !important;
  color: #00E599 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. ICON CONTAINERS
   ───────────────────────────────────────────────────────────────────────────── */
html:not(.light-theme) [class*="icon-wrap"],
html:not(.light-theme) [class*="icon-container"],
html:not(.light-theme) [class*="feature-icon"] {
  background: rgba(0, 198, 255, 0.08) !important;
  border: 1px solid rgba(0, 198, 255, 0.15) !important;
  color: #00C6FF !important;
  border-radius: 10px !important;
}

/* Accent containers */
html:not(.light-theme) .sb-card-icon-accent.accent-cyan,
html:not(.light-theme) [class*="icon-blue"] {
  background: rgba(0, 198, 255, 0.08) !important;
  border-color: rgba(0, 198, 255, 0.20) !important;
  color: #00C6FF !important;
}

html:not(.light-theme) .sb-card-icon-accent.accent-violet,
html:not(.light-theme) [class*="icon-purple"] {
  background: rgba(123, 92, 255, 0.10) !important;
  border-color: rgba(123, 92, 255, 0.22) !important;
  color: #7B5CFF !important;
}

html:not(.light-theme) [class*="icon-green"] {
  background: rgba(0, 229, 153, 0.09) !important;
  color: #00E599 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   11. BUTTONS — Enterprise clean system
       ✘ Does NOT touch: hero story buttons, WhatsApp button, luxury-CTA hold button
   ───────────────────────────────────────────────────────────────────────────── */

/* Primary */
html:not(.light-theme) .btn-primary:not(.btn-story-primary):not(.sb-luxury-hero-cta):not(.sbhp-btn-primary),
html:not(.light-theme) .button-primary,
html:not(.light-theme) [class*="btn-primary"]:not(.btn-story-primary):not(.sb-luxury-hero-cta),
html:not(.light-theme) .luxury-button-primary,
html:not(.light-theme) .sb-btn-primary,
html:not(.light-theme) .ip-btn-primary {
  background: #00C6FF !important;
  color: #000F1F !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(0, 198, 255, 0.25) !important;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

html:not(.light-theme) .btn-primary:not(.btn-story-primary):hover,
html:not(.light-theme) .luxury-button-primary:hover,
html:not(.light-theme) .sb-btn-primary:hover,
html:not(.light-theme) .ip-btn-primary:hover {
  background: #0099CC !important;
  box-shadow: 0 8px 28px rgba(0, 198, 255, 0.40) !important;
  transform: translateY(-1px) !important;
}

/* Outline */
html:not(.light-theme) .btn-outline,
html:not(.light-theme) [class*="btn-outline"] {
  background: transparent !important;
  border: 1px solid #00C6FF !important;
  color: #00C6FF !important;
  transition: background 0.15s ease !important;
}
html:not(.light-theme) .btn-outline:hover {
  background: rgba(0, 198, 255, 0.08) !important;
}

/* Secondary / Ghost */
html:not(.light-theme) .btn-secondary:not(.btn-story-secondary),
html:not(.light-theme) .button-secondary,
html:not(.light-theme) [class*="btn-secondary"]:not(.btn-story-secondary),
html:not(.light-theme) .sb-btn-secondary,
html:not(.light-theme) .ip-btn-ghost {
  background: transparent !important;
  color: #A8C0E0 !important;
  border: 1px solid rgba(0, 198, 255, 0.14) !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}
html:not(.light-theme) .btn-secondary:not(.btn-story-secondary):hover,
html:not(.light-theme) .sb-btn-secondary:hover,
html:not(.light-theme) .ip-btn-ghost:hover {
  background: #111E38 !important;
  border-color: rgba(0, 198, 255, 0.28) !important;
  color: #EBF2FF !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   12. FORM INPUTS
   ───────────────────────────────────────────────────────────────────────────── */
html:not(.light-theme) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not(header input),
html:not(.light-theme) textarea,
html:not(.light-theme) select {
  background-color: #0F1A30 !important;
  border: 1px solid rgba(0, 198, 255, 0.14) !important;
  color: #EBF2FF !important;
  border-radius: 8px !important;
}

html:not(.light-theme) input::placeholder,
html:not(.light-theme) textarea::placeholder {
  color: #4A6A8A !important;
}

html:not(.light-theme) input:focus,
html:not(.light-theme) textarea:focus,
html:not(.light-theme) select:focus {
  border-color: #00C6FF !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 198, 255, 0.12) !important;
}

/* Footer inputs */
html:not(.light-theme) footer input,
html:not(.light-theme) footer textarea {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(0, 198, 255, 0.14) !important;
  color: #EBF2FF !important;
}

/* Labels */
html:not(.light-theme) label,
html:not(.light-theme) [class*="form-label"],
html:not(.light-theme) [class*="field-label"] {
  color: #A8C0E0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   13. BORDERS AND DIVIDERS
   ───────────────────────────────────────────────────────────────────────────── */
html:not(.light-theme) hr,
html:not(.light-theme) .divider,
html:not(.light-theme) [class*="divider"],
html:not(.light-theme) [class*="separator"] {
  border-color: rgba(0, 198, 255, 0.08) !important;
  background-color: rgba(0, 198, 255, 0.08) !important;
}

html:not(.light-theme) .border-white\/10,
html:not(.light-theme) .border-white\/5,
html:not(.light-theme) .border-white\/20 {
  border-color: rgba(0, 198, 255, 0.10) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   14. SCROLLBAR
   ───────────────────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #070C1A; }
::-webkit-scrollbar-thumb { background: rgba(0, 198, 255, 0.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 198, 255, 0.50); }

/* ─────────────────────────────────────────────────────────────────────────────
   15. LOADER
   ───────────────────────────────────────────────────────────────────────────── */
html:not(.light-theme) #sw-loader {
  background: #070C1A !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   16. GLOW DIVIDERS — Allowed one per section on stats/features
   ───────────────────────────────────────────────────────────────────────────── */
html:not(.light-theme) .sb-glow-divider {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 198, 255, 0.18) 20%,
    rgba(123, 92, 255, 0.15) 50%,
    rgba(0, 198, 255, 0.18) 80%,
    transparent 100%
  ) !important;
  height: 1px !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   17. SBHP PREMIUM HOMEPAGE — Align non-hero section backgrounds
   ───────────────────────────────────────────────────────────────────────────── */
html:not(.light-theme) #sbhp-trust   { background-color: #0D1428 !important; }
html:not(.light-theme) #sbhp-supply  { background-color: #0A1228 !important; }
html:not(.light-theme) #sbhp-global  { background-color: #0D1428 !important; }
html:not(.light-theme) #sbhp-why     { background-color: #070C1A !important; }
html:not(.light-theme) #sbhp-process { background-color: #0D1428 !important; }
html:not(.light-theme) #sbhp-contact { background-color: #070C1A !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   18. LIGHT THEME GUARD — Disable all dark rules in light mode
      All overrides above are scoped to html:not(.light-theme)
      Below are explicit light-mode confirmations to prevent leakage
   ───────────────────────────────────────────────────────────────────────────── */
html.light-theme body,
html.light-theme main,
html.light-theme .ip-page {
  background-color: var(--bg-primary, #F4F6FA) !important;
  color: var(--body-color, #2C3E6A) !important;
  background-image: none !important;
}

html.light-theme footer,
html.light-theme footer#main-footer {
  background: var(--footer-bg, #E2E6F0) !important;
}

html.light-theme section:not(#hero-story) {
  background-color: transparent !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   19. SUBPAGE ALIGNMENT AUDIT FIXES — 2026-07-20
   Canonical centering, eyebrow display guard, equal-height cards
   ───────────────────────────────────────────────────────────────────────────── */

/* Ensure eyebrow renders as block so text-align works on all subpages */
html:not(.light-theme) .sb-eyebrow,
html:not(.light-theme) .sbhp-eyebrow {
  display: block;
}

/* Canonical section header block — centers all header stacks site-wide */
html:not(.light-theme) .sb-section-hdr,
html:not(.light-theme) .sbhp-section-hdr {
  text-align: center;
  margin-bottom: 52px;
}

html:not(.light-theme) .sb-section-hdr .sb-eyebrow,
html:not(.light-theme) .sb-section-hdr .sbhp-eyebrow {
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

html:not(.light-theme) .sb-section-hdr h2,
html:not(.light-theme) .sb-section-hdr .sb-section-title,
html:not(.light-theme) .sb-section-hdr .sbhp-section-title,
html:not(.light-theme) .sb-section-hdr .sbhp-headline {
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

html:not(.light-theme) .sb-section-hdr p,
html:not(.light-theme) .sb-section-hdr .sb-section-text,
html:not(.light-theme) .sb-section-hdr .sbhp-section-text,
html:not(.light-theme) .sb-section-hdr .sbhp-subheadline {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Equal-height cards in grid rows — prevents ragged bottom edges */
html:not(.light-theme) .sb-card-grid,
html:not(.light-theme) .sbhp-card-grid {
  align-items: stretch;
}

html:not(.light-theme) .sb-card,
html:not(.light-theme) .sbhp-supply-card,
html:not(.light-theme) .sbhp-feature-card {
  height: 100%;
}