/* ==========================================================================
   METALLIC & LUXURY BACKGROUND THEMES & LIVE THEME SWITCHER
   Scriptor House
   ========================================================================== */

/* --------------------------------------------------------------------------
   THEME 1: DARK TITANIUM & BRUSHED GUNMETAL (Industrial Luxury)
   -------------------------------------------------------------------------- */
body.theme-titanium {
  background-color: #0a0c0f;
  background-image: 
    repeating-linear-gradient(
      105deg,
      rgba(255, 255, 255, 0.012) 0px,
      rgba(255, 255, 255, 0.012) 1px,
      transparent 1px,
      transparent 3px
    ),
    repeating-linear-gradient(
      15deg,
      rgba(255, 255, 255, 0.008) 0px,
      rgba(255, 255, 255, 0.008) 1px,
      transparent 1px,
      transparent 4px
    ),
    radial-gradient(ellipse 90% 60% at 20% -10%, rgba(70, 85, 110, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at 85% 110%, rgba(55, 68, 88, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(35, 45, 60, 0.12) 0%, transparent 70%),
    linear-gradient(145deg, #07080a 0%, #101318 28%, #0b0d10 52%, #141820 78%, #08090b 100%);
  background-attachment: fixed;
  background-size: auto, auto, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}
body.theme-titanium .glow-1 { background: #6b82a6; opacity: 0.12; }
body.theme-titanium .glow-2 { background: #a4b7d4; opacity: 0.09; }
body.theme-titanium .glow-3 { background: var(--primary); opacity: 0.08; }

/* --------------------------------------------------------------------------
   THEME 2: POLISHED OBSIDIAN & PLATINUM SHEEN (Cinematic Studio Luxury)
   -------------------------------------------------------------------------- */
body.theme-obsidian {
  background-color: #050608;
  background-image:
    linear-gradient(
      125deg,
      transparent 0%,
      rgba(255, 255, 255, 0.015) 30%,
      rgba(220, 230, 245, 0.04) 42%,
      rgba(255, 255, 255, 0.01) 54%,
      transparent 70%
    ),
    radial-gradient(circle at 75% 15%, rgba(180, 195, 220, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(140, 160, 190, 0.12) 0%, transparent 45%),
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(45, 55, 75, 0.22) 0%, transparent 70%),
    linear-gradient(175deg, #040507 0%, #0c0e12 35%, #07080a 65%, #0f1217 100%);
  background-attachment: fixed;
  background-size: 200% 200%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}
body.theme-obsidian .glow-1 { background: #d8e2f0; opacity: 0.10; }
body.theme-obsidian .glow-2 { background: #889bb5; opacity: 0.12; }
body.theme-obsidian .glow-3 { background: var(--primary); opacity: 0.07; }

/* --------------------------------------------------------------------------
   THEME 3: BLACK CHROME & LIQUID METAL GLOW (High-Tech Dynamic Metal)
   -------------------------------------------------------------------------- */
body.theme-chrome {
  background-color: #040609;
  background-image:
    repeating-linear-gradient(
      -45deg,
      rgba(160, 190, 230, 0.018) 0px,
      rgba(160, 190, 230, 0.018) 2px,
      transparent 2px,
      transparent 12px
    ),
    linear-gradient(
      70deg,
      rgba(255, 255, 255, 0.02) 0%,
      rgba(120, 160, 210, 0.08) 25%,
      rgba(20, 25, 35, 0.2) 45%,
      rgba(140, 180, 240, 0.09) 65%,
      transparent 90%
    ),
    radial-gradient(ellipse 80% 60% at 80% 20%, rgba(90, 130, 180, 0.2) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 20% 70%, rgba(60, 95, 140, 0.18) 0%, transparent 60%),
    linear-gradient(135deg, #030406 0%, #0e1219 30%, #06080b 60%, #131922 85%, #050608 100%);
  background-attachment: fixed;
  background-size: auto, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}
body.theme-chrome .glow-1 { background: #7099cc; opacity: 0.14; }
body.theme-chrome .glow-2 { background: #a9c6ea; opacity: 0.11; }
body.theme-chrome .glow-3 { background: var(--primary); opacity: 0.09; }

/* --------------------------------------------------------------------------
   THEME 4: CARBON STEEL & MICRO-ETCHED MESH (Tactical Architectural Metal)
   -------------------------------------------------------------------------- */
body.theme-carbon {
  background-color: #08090b;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.016) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.016) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.016) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.016) 75%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.008) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.008) 1px, transparent 1px),
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(50, 60, 75, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(40, 50, 65, 0.2) 0%, transparent 60%),
    linear-gradient(180deg, #07080a 0%, #11141a 40%, #0a0c0f 70%, #0e1116 100%);
  background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px, 24px 24px, 24px 24px, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
}
body.theme-carbon .glow-1 { background: #5a6e87; opacity: 0.12; }
body.theme-carbon .glow-2 { background: #91a4bc; opacity: 0.09; }
body.theme-carbon .glow-3 { background: var(--primary); opacity: 0.08; }

/* --------------------------------------------------------------------------
   THEME 5: ANTIQUE BRONZE & SMOKED GOLD ORE (Rich Metallurgy)
   -------------------------------------------------------------------------- */
body.theme-bronze {
  background-color: #0b0906;
  background-image:
    /* Fine brushed bronze micro-streaks */
    repeating-linear-gradient(
      115deg,
      rgba(255, 215, 120, 0.014) 0px,
      rgba(255, 215, 120, 0.014) 1px,
      transparent 1px,
      transparent 4px
    ),
    /* Warm antique bronze specular halos */
    radial-gradient(circle at 80% 10%, rgba(200, 150, 60, 0.18) 0%, transparent 55%),
    radial-gradient(circle at 15% 75%, rgba(160, 110, 40, 0.15) 0%, transparent 55%),
    radial-gradient(ellipse 80% 50% at 50% 40%, rgba(110, 80, 25, 0.12) 0%, transparent 70%),
    /* Deep smoked obsidian-bronze gradient */
    linear-gradient(155deg, #060503 0%, #130f08 30%, #090704 60%, #1a140b 85%, #050403 100%);
  background-attachment: fixed;
  background-size: auto, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}
body.theme-bronze .glow-1 { background: #d4a038; opacity: 0.14; }
body.theme-bronze .glow-2 { background: #F0922A; opacity: 0.10; }
body.theme-bronze .glow-3 { background: var(--primary); opacity: 0.12; }

/* --------------------------------------------------------------------------
   THEME 6: ROYAL FILIGREE & EMBOSSED STEEL (Luxury Bookcover / Literary)
   -------------------------------------------------------------------------- */
body.theme-damask {
  background-color: #08090d;
  background-image:
    /* Micro-embossed luxury filigree diamond watermark */
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.02) 2px, transparent 3px),
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.015) 2px, transparent 3px),
    radial-gradient(circle at 100% 100%, rgba(255, 255, 255, 0.015) 2px, transparent 3px),
    linear-gradient(45deg, rgba(255, 255, 255, 0.008) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.008) 25%, transparent 25%),
    /* Velvet depth illumination */
    radial-gradient(ellipse 90% 70% at 30% 10%, rgba(75, 90, 120, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 70% 90%, rgba(55, 70, 95, 0.14) 0%, transparent 60%),
    /* Deep midnight steel base */
    linear-gradient(180deg, #050609 0%, #0f1219 40%, #08090d 75%, #121622 100%);
  background-size: 32px 32px, 32px 32px, 32px 32px, 16px 16px, 16px 16px, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
}
body.theme-damask .glow-1 { background: #7c92b8; opacity: 0.13; }
body.theme-damask .glow-2 { background: #b0c4de; opacity: 0.09; }
body.theme-damask .glow-3 { background: var(--primary); opacity: 0.08; }

/* --------------------------------------------------------------------------
   THEME 7: CYBERNETIC HEX-GRID & TITANIUM MATRIX (Modern Tech Metal)
   -------------------------------------------------------------------------- */
body.theme-hexgrid {
  background-color: #06080c;
  background-image:
    /* Fine hexagonal matrix lattice */
    radial-gradient(circle, rgba(120, 160, 220, 0.04) 1px, transparent 1px),
    linear-gradient(60deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(120deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    /* Matrix specular plate lighting */
    radial-gradient(circle at 50% 20%, rgba(60, 100, 160, 0.18) 0%, transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(40, 75, 120, 0.15) 0%, transparent 55%),
    /* Titanium matrix base */
    linear-gradient(145deg, #040508 0%, #0d121c 30%, #07090e 60%, #111824 85%, #05060a 100%);
  background-size: 20px 34px, 20px 34px, 20px 34px, 20px 34px, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
}
body.theme-hexgrid .glow-1 { background: #5080c0; opacity: 0.15; }
body.theme-hexgrid .glow-2 { background: #88b0e8; opacity: 0.10; }
body.theme-hexgrid .glow-3 { background: var(--primary); opacity: 0.09; }

/* --------------------------------------------------------------------------
   THEME 8: COSMIC INDIGO & STARLIGHT AURORA (Cinematic Dreamscape)
   -------------------------------------------------------------------------- */
body.theme-nebula {
  background-color: #04050a;
  background-image:
    /* Pinpoint stardust sparkle pattern */
    radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    radial-gradient(circle, rgba(180, 200, 255, 0.04) 1px, transparent 1px),
    /* Aurora chromatic atmospheric glows */
    radial-gradient(ellipse 85% 60% at 20% 10%, rgba(90, 60, 160, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 80% 55% at 80% 80%, rgba(40, 100, 180, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 50%, rgba(20, 50, 90, 0.15) 0%, transparent 70%),
    /* Velvet cosmic midnight base */
    linear-gradient(165deg, #030306 0%, #0b0c18 35%, #05060c 70%, #101222 100%);
  background-size: 40px 40px, 60px 60px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 0 0, 20px 20px, 0 0, 0 0, 0 0, 0 0;
  background-attachment: fixed;
}
body.theme-nebula .glow-1 { background: #7c5cbf; opacity: 0.16; }
body.theme-nebula .glow-2 { background: #4a8cd4; opacity: 0.14; }
body.theme-nebula .glow-3 { background: var(--primary); opacity: 0.09; }

/* --------------------------------------------------------------------------
   ORIGINAL THEME (Fallback / Comparison)
   -------------------------------------------------------------------------- */
body.theme-original {
  background: linear-gradient(135deg, #050505, #0c0a04, #040508, #080808) !important;
  background-size: 300% 300% !important;
  animation: gradient-shift 22s ease infinite !important;
}

/* --------------------------------------------------------------------------
   FLOATING METALLIC THEME SWITCHER WIDGET
   -------------------------------------------------------------------------- */
#sh-theme-switcher {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999999;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  user-select: none;
  max-width: calc(100vw - 40px);
}

.sh-switcher-panel {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(10, 13, 18, 0.92);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 
    0 20px 48px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(240, 146, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  padding: 6px 8px;
  border-radius: 40px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  flex-wrap: wrap;
  max-width: 900px;
  justify-content: flex-end;
}

.sh-switcher-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--primary, #F0922A);
  padding: 0 6px 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.sh-switcher-title i {
  font-size: 11px;
}

.sh-theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #cfd6e0;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s ease;
  white-space: nowrap;
}

.sh-theme-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
  transform: translateY(-1px);
}

.sh-theme-btn.active {
  background: linear-gradient(135deg, rgba(240, 146, 42, 0.24), rgba(240, 146, 42, 0.08));
  border-color: rgba(240, 146, 42, 0.7);
  color: var(--primary, #F0922A);
  box-shadow: 0 0 14px rgba(240, 146, 42, 0.28);
}

.sh-theme-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #708090;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}

.sh-theme-btn.active .sh-theme-indicator {
  background: var(--primary, #F0922A);
  box-shadow: 0 0 8px #F0922A;
}

.sh-switcher-toggle-btn {
  background: rgba(12, 15, 22, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #a4b3c7;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 10px rgba(240, 146, 42, 0.15);
  transition: all 0.25s ease;
}

.sh-switcher-toggle-btn:hover {
  color: var(--primary, #F0922A);
  border-color: rgba(240, 146, 42, 0.5);
  transform: scale(1.1);
}

#sh-theme-switcher.collapsed .sh-switcher-panel {
  display: none;
}

/* Mobile responsive switcher */
@media (max-width: 900px) {
  #sh-theme-switcher {
    bottom: 12px;
    right: 12px;
    left: 12px;
    max-width: none;
  }
  .sh-switcher-panel {
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 20px;
    padding: 8px;
    width: 100%;
    max-height: 260px;
    overflow-y: auto;
  }
  .sh-theme-btn {
    padding: 5px 9px;
    font-size: 10.5px;
  }
}

/* ==========================================================================
   COLOR PALETTE THEMES (Curated from Reference Images)
   Applies accents, gradients, card backgrounds, borders, glows & buttons
   ========================================================================== */

/* Shared Card & Component Transitions */
.why-card, .service-card, .comparison-card, .process-card, 
.transparency-card, .trust-card, .output-warning-card, .laurel-card, 
.security-card, .hero-visual-card, .award-pillar, .faq-item,
.review-card, .video-testimonial-card, .video-card {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* --------------------------------------------------------------------------
   PALETTE 1: CLASSIC LUXURY GOLD (Original Scriptor House)
   #F0922A / #A05510 / #050505
   -------------------------------------------------------------------------- */
body.palette-classic-gold {
  --primary: #F0922A;
  --primary-dark: #A05510;
}

/* --------------------------------------------------------------------------
   PALETTE 2: MIDNIGHT & AMBER (Image 1: #F0922A & #14213D)
   Vibrant Amber Glow with Deep Midnight Blue Shadows
   -------------------------------------------------------------------------- */
body.palette-midnight-gold {
  --primary: #F0922A;
  --primary-dark: #A05510;
}
body.palette-midnight-gold .glow-1 { background: #14213D !important; opacity: 0.22 !important; }
body.palette-midnight-gold .glow-2 { background: #F0922A !important; opacity: 0.12 !important; }
body.palette-midnight-gold .glow-3 { background: #E5E5E5 !important; opacity: 0.08 !important; }

body.palette-midnight-gold .section-tag {
  background: rgba(20, 33, 61, 0.65) !important;
  border-color: rgba(252, 163, 17, 0.45) !important;
  color: #F0922A !important;
  box-shadow: 0 4px 16px rgba(20, 33, 61, 0.5) !important;
}
body.palette-midnight-gold .btn {
  background: linear-gradient(135deg, #F0922A, #A05510) !important;
  color: #050505 !important;
  box-shadow: 0 10px 25px rgba(252, 163, 17, 0.28) !important;
}
body.palette-midnight-gold .btn:hover {
  box-shadow: 0 14px 30px rgba(252, 163, 17, 0.45) !important;
}
body.palette-midnight-gold .btn-outline {
  background: transparent !important;
  border-color: rgba(252, 163, 17, 0.45) !important;
  color: #F0922A !important;
}
body.palette-midnight-gold .btn-outline:hover {
  background: #F0922A !important;
  color: #050505 !important;
  box-shadow: 0 8px 24px rgba(252, 163, 17, 0.3) !important;
}

/* Midnight & Amber Cards */
body.palette-midnight-gold .why-card,
body.palette-midnight-gold .service-card,
body.palette-midnight-gold .comparison-card,
body.palette-midnight-gold .process-card,
body.palette-midnight-gold .transparency-card,
body.palette-midnight-gold .trust-card,
body.palette-midnight-gold .output-warning-card,
body.palette-midnight-gold .laurel-card,
body.palette-midnight-gold .security-card,
body.palette-midnight-gold .hero-visual-card,
body.palette-midnight-gold .award-pillar,
body.palette-midnight-gold .faq-item,
body.palette-midnight-gold .review-card,
body.palette-midnight-gold .video-testimonial-card {
  background: linear-gradient(145deg, rgba(20, 33, 61, 0.38) 0%, rgba(8, 12, 20, 0.72) 100%) !important;
  border-color: rgba(252, 163, 17, 0.16) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(20, 33, 61, 0.3) !important;
}
body.palette-midnight-gold .why-card:hover,
body.palette-midnight-gold .service-card:hover,
body.palette-midnight-gold .comparison-card:hover,
body.palette-midnight-gold .process-card:hover,
body.palette-midnight-gold .transparency-card:hover,
body.palette-midnight-gold .trust-card:hover,
body.palette-midnight-gold .output-warning-card:hover,
body.palette-midnight-gold .laurel-card:hover,
body.palette-midnight-gold .security-card:hover,
body.palette-midnight-gold .hero-visual-card:hover,
body.palette-midnight-gold .award-pillar:hover,
body.palette-midnight-gold .faq-item:hover,
body.palette-midnight-gold .review-card:hover,
body.palette-midnight-gold .video-testimonial-card:hover {
  border-color: rgba(252, 163, 17, 0.55) !important;
  background: linear-gradient(145deg, rgba(20, 33, 61, 0.55) 0%, rgba(12, 18, 30, 0.85) 100%) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.65), 0 0 26px rgba(252, 163, 17, 0.22), 0 0 35px rgba(20, 33, 61, 0.5) !important;
}
body.palette-midnight-gold .award-infographic-frame {
  border-color: rgba(252, 163, 17, 0.3) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 45px rgba(20, 33, 61, 0.6) !important;
}
body.palette-midnight-gold .sh-switcher-title { color: #F0922A; }

/* --------------------------------------------------------------------------
   PALETTE 3: SPRUCE & SAGE (Image 2: #8EB69B, #235347, #0B2B26)
   Forest Emerald, Deep Spruce Pine & Sage Leaf
   -------------------------------------------------------------------------- */
body.palette-spruce-sage {
  --primary: #8EB69B;
  --primary-dark: #235347;
}
body.palette-spruce-sage .glow-1 { background: #235347 !important; opacity: 0.25 !important; }
body.palette-spruce-sage .glow-2 { background: #8EB69B !important; opacity: 0.14 !important; }
body.palette-spruce-sage .glow-3 { background: #163832 !important; opacity: 0.2 !important; }

body.palette-spruce-sage .section-tag {
  background: rgba(11, 43, 38, 0.65) !important;
  border-color: rgba(142, 182, 155, 0.45) !important;
  color: #8EB69B !important;
  box-shadow: 0 4px 16px rgba(11, 43, 38, 0.5) !important;
}
body.palette-spruce-sage .btn {
  background: linear-gradient(135deg, #8EB69B, #235347) !important;
  color: #04120e !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 25px rgba(142, 182, 155, 0.25) !important;
}
body.palette-spruce-sage .btn:hover {
  box-shadow: 0 14px 30px rgba(142, 182, 155, 0.4) !important;
}
body.palette-spruce-sage .btn-outline {
  background: transparent !important;
  border-color: rgba(142, 182, 155, 0.45) !important;
  color: #8EB69B !important;
}
body.palette-spruce-sage .btn-outline:hover {
  background: #8EB69B !important;
  color: #04120e !important;
  box-shadow: 0 8px 24px rgba(142, 182, 155, 0.3) !important;
}

/* Spruce & Sage Cards */
body.palette-spruce-sage .why-card,
body.palette-spruce-sage .service-card,
body.palette-spruce-sage .comparison-card,
body.palette-spruce-sage .process-card,
body.palette-spruce-sage .transparency-card,
body.palette-spruce-sage .trust-card,
body.palette-spruce-sage .output-warning-card,
body.palette-spruce-sage .laurel-card,
body.palette-spruce-sage .security-card,
body.palette-spruce-sage .hero-visual-card,
body.palette-spruce-sage .award-pillar,
body.palette-spruce-sage .faq-item,
body.palette-spruce-sage .review-card,
body.palette-spruce-sage .video-testimonial-card {
  background: linear-gradient(145deg, rgba(22, 56, 50, 0.35) 0%, rgba(8, 22, 19, 0.75) 100%) !important;
  border-color: rgba(142, 182, 155, 0.16) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(22, 56, 50, 0.25) !important;
}
body.palette-spruce-sage .why-card:hover,
body.palette-spruce-sage .service-card:hover,
body.palette-spruce-sage .comparison-card:hover,
body.palette-spruce-sage .process-card:hover,
body.palette-spruce-sage .transparency-card:hover,
body.palette-spruce-sage .trust-card:hover,
body.palette-spruce-sage .output-warning-card:hover,
body.palette-spruce-sage .laurel-card:hover,
body.palette-spruce-sage .security-card:hover,
body.palette-spruce-sage .hero-visual-card:hover,
body.palette-spruce-sage .award-pillar:hover,
body.palette-spruce-sage .faq-item:hover,
body.palette-spruce-sage .review-card:hover,
body.palette-spruce-sage .video-testimonial-card:hover {
  border-color: rgba(142, 182, 155, 0.6) !important;
  background: linear-gradient(145deg, rgba(35, 83, 71, 0.5) 0%, rgba(11, 43, 38, 0.85) 100%) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.65), 0 0 28px rgba(142, 182, 155, 0.22), 0 0 35px rgba(35, 83, 71, 0.4) !important;
}
body.palette-spruce-sage .award-infographic-frame {
  border-color: rgba(142, 182, 155, 0.32) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 45px rgba(22, 56, 50, 0.5) !important;
}
body.palette-spruce-sage .sh-switcher-title { color: #8EB69B; }

/* --------------------------------------------------------------------------
   PALETTE 4: TERRACOTTA & SLATE (Image 3: #FFB162, #A35139, #2C3B4D)
   Warm Ochre, Terracotta Clay & Architectural Slate
   -------------------------------------------------------------------------- */
body.palette-terracotta-slate {
  --primary: #F0922A;
  --primary-dark: #A35139;
}
body.palette-terracotta-slate .glow-1 { background: #2C3B4D !important; opacity: 0.25 !important; }
body.palette-terracotta-slate .glow-2 { background: #F0922A !important; opacity: 0.13 !important; }
body.palette-terracotta-slate .glow-3 { background: #A35139 !important; opacity: 0.16 !important; }

body.palette-terracotta-slate .section-tag {
  background: rgba(44, 59, 77, 0.65) !important;
  border-color: rgba(255, 177, 98, 0.45) !important;
  color: #F0922A !important;
  box-shadow: 0 4px 16px rgba(44, 59, 77, 0.5) !important;
}
body.palette-terracotta-slate .btn {
  background: linear-gradient(135deg, #F0922A, #A05510) !important;
  color: #120c08 !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 25px rgba(255, 177, 98, 0.28) !important;
}
body.palette-terracotta-slate .btn:hover {
  box-shadow: 0 14px 30px rgba(255, 177, 98, 0.45) !important;
}
body.palette-terracotta-slate .btn-outline {
  background: transparent !important;
  border-color: rgba(255, 177, 98, 0.45) !important;
  color: #F0922A !important;
}
body.palette-terracotta-slate .btn-outline:hover {
  background: #F0922A !important;
  color: #120c08 !important;
  box-shadow: 0 8px 24px rgba(255, 177, 98, 0.3) !important;
}

/* Terracotta & Slate Cards */
body.palette-terracotta-slate .why-card,
body.palette-terracotta-slate .service-card,
body.palette-terracotta-slate .comparison-card,
body.palette-terracotta-slate .process-card,
body.palette-terracotta-slate .transparency-card,
body.palette-terracotta-slate .trust-card,
body.palette-terracotta-slate .output-warning-card,
body.palette-terracotta-slate .laurel-card,
body.palette-terracotta-slate .security-card,
body.palette-terracotta-slate .hero-visual-card,
body.palette-terracotta-slate .award-pillar,
body.palette-terracotta-slate .faq-item,
body.palette-terracotta-slate .review-card,
body.palette-terracotta-slate .video-testimonial-card {
  background: linear-gradient(145deg, rgba(44, 59, 77, 0.35) 0%, rgba(27, 38, 50, 0.7) 100%) !important;
  border-color: rgba(255, 177, 98, 0.16) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(44, 59, 77, 0.25) !important;
}
body.palette-terracotta-slate .why-card:hover,
body.palette-terracotta-slate .service-card:hover,
body.palette-terracotta-slate .comparison-card:hover,
body.palette-terracotta-slate .process-card:hover,
body.palette-terracotta-slate .transparency-card:hover,
body.palette-terracotta-slate .trust-card:hover,
body.palette-terracotta-slate .output-warning-card:hover,
body.palette-terracotta-slate .laurel-card:hover,
body.palette-terracotta-slate .security-card:hover,
body.palette-terracotta-slate .hero-visual-card:hover,
body.palette-terracotta-slate .award-pillar:hover,
body.palette-terracotta-slate .faq-item:hover,
body.palette-terracotta-slate .review-card:hover,
body.palette-terracotta-slate .video-testimonial-card:hover {
  border-color: rgba(255, 177, 98, 0.58) !important;
  background: linear-gradient(145deg, rgba(56, 74, 96, 0.52) 0%, rgba(35, 48, 64, 0.85) 100%) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.65), 0 0 28px rgba(255, 177, 98, 0.22), 0 0 35px rgba(44, 59, 77, 0.45) !important;
}
body.palette-terracotta-slate .award-infographic-frame {
  border-color: rgba(255, 177, 98, 0.3) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 45px rgba(44, 59, 77, 0.5) !important;
}
body.palette-terracotta-slate .sh-switcher-title { color: #F0922A; }

/* --------------------------------------------------------------------------
   PALETTE 5: CYBER FLAME & CARBON (Image 4: #E85002, #C10801, #333333)
   High-Octane Cinematic Orange & Flame Gradient
   -------------------------------------------------------------------------- */
body.palette-cyber-orange {
  --primary: #E85002;
  --primary-dark: #C10801;
}
body.palette-cyber-orange .glow-1 { background: #C10801 !important; opacity: 0.22 !important; }
body.palette-cyber-orange .glow-2 { background: #E85002 !important; opacity: 0.14 !important; }
body.palette-cyber-orange .glow-3 { background: #646464 !important; opacity: 0.1 !important; }

body.palette-cyber-orange .section-tag {
  background: rgba(51, 51, 51, 0.65) !important;
  border-color: rgba(232, 80, 2, 0.5) !important;
  color: #E85002 !important;
  box-shadow: 0 4px 16px rgba(193, 8, 1, 0.35) !important;
}
body.palette-cyber-orange .btn {
  background: linear-gradient(135deg, #F16001, #C10801) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 25px rgba(232, 80, 2, 0.35) !important;
}
body.palette-cyber-orange .btn:hover {
  box-shadow: 0 14px 32px rgba(232, 80, 2, 0.55) !important;
}
body.palette-cyber-orange .btn-outline {
  background: transparent !important;
  border-color: rgba(232, 80, 2, 0.5) !important;
  color: #E85002 !important;
}
body.palette-cyber-orange .btn-outline:hover {
  background: linear-gradient(135deg, #F16001, #C10801) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(232, 80, 2, 0.35) !important;
}

/* Cyber Flame Cards */
body.palette-cyber-orange .why-card,
body.palette-cyber-orange .service-card,
body.palette-cyber-orange .comparison-card,
body.palette-cyber-orange .process-card,
body.palette-cyber-orange .transparency-card,
body.palette-cyber-orange .trust-card,
body.palette-cyber-orange .output-warning-card,
body.palette-cyber-orange .laurel-card,
body.palette-cyber-orange .security-card,
body.palette-cyber-orange .hero-visual-card,
body.palette-cyber-orange .award-pillar,
body.palette-cyber-orange .faq-item,
body.palette-cyber-orange .review-card,
body.palette-cyber-orange .video-testimonial-card {
  background: linear-gradient(145deg, rgba(51, 51, 51, 0.35) 0%, rgba(15, 15, 15, 0.8) 100%) !important;
  border-color: rgba(232, 80, 2, 0.16) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(51, 51, 51, 0.3) !important;
}
body.palette-cyber-orange .why-card:hover,
body.palette-cyber-orange .service-card:hover,
body.palette-cyber-orange .comparison-card:hover,
body.palette-cyber-orange .process-card:hover,
body.palette-cyber-orange .transparency-card:hover,
body.palette-cyber-orange .trust-card:hover,
body.palette-cyber-orange .output-warning-card:hover,
body.palette-cyber-orange .laurel-card:hover,
body.palette-cyber-orange .security-card:hover,
body.palette-cyber-orange .hero-visual-card:hover,
body.palette-cyber-orange .award-pillar:hover,
body.palette-cyber-orange .faq-item:hover,
body.palette-cyber-orange .review-card:hover,
body.palette-cyber-orange .video-testimonial-card:hover {
  border-color: rgba(232, 80, 2, 0.6) !important;
  background: linear-gradient(145deg, rgba(65, 65, 65, 0.5) 0%, rgba(20, 20, 20, 0.9) 100%) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7), 0 0 30px rgba(232, 80, 2, 0.25), 0 0 35px rgba(193, 8, 1, 0.3) !important;
}
body.palette-cyber-orange .award-infographic-frame {
  border-color: rgba(232, 80, 2, 0.35) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 45px rgba(232, 80, 2, 0.3) !important;
}
body.palette-cyber-orange .sh-switcher-title { color: #E85002; }

/* --------------------------------------------------------------------------
   PALETTE 6: TANGERINE & ESPRESSO (Image 5: #FF6D29, #453027, #161316)
   Warm Espresso Chocolate & Modern Tangerine
   -------------------------------------------------------------------------- */
body.palette-tangerine-espresso {
  --primary: #FF6D29;
  --primary-dark: #A83C08;
}
body.palette-tangerine-espresso .glow-1 { background: #453027 !important; opacity: 0.28 !important; }
body.palette-tangerine-espresso .glow-2 { background: #FF6D29 !important; opacity: 0.14 !important; }
body.palette-tangerine-espresso .glow-3 { background: #161316 !important; opacity: 0.2 !important; }

body.palette-tangerine-espresso .section-tag {
  background: rgba(69, 48, 39, 0.65) !important;
  border-color: rgba(255, 109, 41, 0.45) !important;
  color: #FF6D29 !important;
  box-shadow: 0 4px 16px rgba(69, 48, 39, 0.5) !important;
}
body.palette-tangerine-espresso .btn {
  background: linear-gradient(135deg, #FF6D29, #A83C08) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 25px rgba(255, 109, 41, 0.3) !important;
}
body.palette-tangerine-espresso .btn:hover {
  box-shadow: 0 14px 30px rgba(255, 109, 41, 0.48) !important;
}
body.palette-tangerine-espresso .btn-outline {
  background: transparent !important;
  border-color: rgba(255, 109, 41, 0.45) !important;
  color: #FF6D29 !important;
}
body.palette-tangerine-espresso .btn-outline:hover {
  background: #FF6D29 !important;
  color: #161316 !important;
  box-shadow: 0 8px 24px rgba(255, 109, 41, 0.3) !important;
}

/* Tangerine & Espresso Cards */
body.palette-tangerine-espresso .why-card,
body.palette-tangerine-espresso .service-card,
body.palette-tangerine-espresso .comparison-card,
body.palette-tangerine-espresso .process-card,
body.palette-tangerine-espresso .transparency-card,
body.palette-tangerine-espresso .trust-card,
body.palette-tangerine-espresso .output-warning-card,
body.palette-tangerine-espresso .laurel-card,
body.palette-tangerine-espresso .security-card,
body.palette-tangerine-espresso .hero-visual-card,
body.palette-tangerine-espresso .award-pillar,
body.palette-tangerine-espresso .faq-item,
body.palette-tangerine-espresso .review-card,
body.palette-tangerine-espresso .video-testimonial-card {
  background: linear-gradient(145deg, rgba(69, 48, 39, 0.4) 0%, rgba(22, 19, 22, 0.75) 100%) !important;
  border-color: rgba(255, 109, 41, 0.16) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(69, 48, 39, 0.25) !important;
}
body.palette-tangerine-espresso .why-card:hover,
body.palette-tangerine-espresso .service-card:hover,
body.palette-tangerine-espresso .comparison-card:hover,
body.palette-tangerine-espresso .process-card:hover,
body.palette-tangerine-espresso .transparency-card:hover,
body.palette-tangerine-espresso .trust-card:hover,
body.palette-tangerine-espresso .output-warning-card:hover,
body.palette-tangerine-espresso .laurel-card:hover,
body.palette-tangerine-espresso .security-card:hover,
body.palette-tangerine-espresso .hero-visual-card:hover,
body.palette-tangerine-espresso .award-pillar:hover,
body.palette-tangerine-espresso .faq-item:hover,
body.palette-tangerine-espresso .review-card:hover,
body.palette-tangerine-espresso .video-testimonial-card:hover {
  border-color: rgba(255, 109, 41, 0.58) !important;
  background: linear-gradient(145deg, rgba(85, 59, 48, 0.55) 0%, rgba(30, 24, 30, 0.88) 100%) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.65), 0 0 28px rgba(255, 109, 41, 0.22), 0 0 35px rgba(69, 48, 39, 0.45) !important;
}
body.palette-tangerine-espresso .award-infographic-frame {
  border-color: rgba(255, 109, 41, 0.3) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 45px rgba(69, 48, 39, 0.5) !important;
}
body.palette-tangerine-espresso .sh-switcher-title { color: #FF6D29; }


/* ==========================================================================
   SWITCHER TABS + PALETTE BUTTON STYLES
   ========================================================================== */

/* Tab row */
.sh-tabs {
  display: flex;
  gap: 4px;
  padding: 0 4px;
  border-right: 1px solid rgba(255,255,255,0.1);
  margin-right: 4px;
  flex-shrink: 0;
}

.sh-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: #8a9bb0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-transform: uppercase;
}

.sh-tab:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}

.sh-tab.active {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
  color: var(--primary, #F0922A);
}

/* Tab content wrapper */
.sh-tab-content {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.sh-hidden { display: none !important; }

/* Palette swatch buttons */
.sh-palette-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: #cfd6e0;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s ease;
  white-space: nowrap;
}

.sh-palette-btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
  color: #fff;
  transform: translateY(-1px);
}

.sh-palette-btn.active {
  border-color: color-mix(in srgb, var(--swatch) 75%, transparent);
  background: color-mix(in srgb, var(--swatch) 20%, transparent);
  color: var(--swatch);
  box-shadow: 0 0 14px color-mix(in srgb, var(--swatch) 40%, transparent);
}

.sh-swatch-split {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.25);
}