/* Modern Dark Mode Styles - Enhanced for Accessibility */

/* Smooth transitions — scoped to theme-toggle only.
   Applying these to every element at all times forces the browser to
   compute transitions on every hover/scroll/repaint, which hurts INP.
   dark-mode-modern.js adds body.theme-transitioning for ~500 ms around
   each toggle, so the visual effect is fully preserved. */
body.theme-transitioning *:not(.no-transition) {
  transition: background-color 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease !important;
}

/* Theme transitioning effect */
body.theme-transitioning {
  position: relative;
  overflow-x: hidden;
}

body.theme-transitioning::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(102, 126, 234, 0.15) 0%, transparent 70%);
  pointer-events: none;
  z-index: 99999;
  animation: themeTransition 0.5s ease;
}

@keyframes themeTransition {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/* Dark Mode Toggle Button - Positioned in Social Icons */
.top_header .social_icon ul li.dark-mode-toggle-li {
  display: inline-block !important;
  margin: 0 5px !important;
  vertical-align: middle !important;
}

/* Dark Mode Button Enhancement */
.dark-mode-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
  padding: 0 !important;
  margin: 0 !important;
}

.dark-mode-btn:hover {
  transform: scale(1.1) rotate(10deg);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.dark-mode-btn:active {
  transform: scale(0.95);
}

.dark-mode-btn.ripple-effect {
  animation: buttonRipple 0.6s ease;
}

@keyframes buttonRipple {
  0% {
    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(102, 126, 234, 0);
  }
}

.dark-mode-btn i {
  color: #ffffff !important;
  font-size: 22px !important;
  transition: all 0.3s ease;
  display: inline-block !important;
  line-height: 1 !important;
}

.dark-mode-btn:hover i {
  transform: rotate(20deg);
}

/* Dark Mode Styles - Enhanced Contrast & Readability */
body.dark-mode {
  background-color: #0f0f1e !important;
  color: #e8e8e8 !important;
}

/* Header in Dark Mode - Enhanced Visibility */
body.dark-mode header,
body.dark-mode .top_header,
body.dark-mode #header {
  background-color: #1a1a2e !important;
  border-bottom: 1px solid #2d2d44;
}

body.dark-mode .top_menu li,
body.dark-mode .top_menu li i {
  color: #e5e7eb !important;
  font-weight: 500;
}

body.dark-mode .top_menu li:hover,
body.dark-mode .top_menu li:hover i {
  color: #ffffff !important;
}

body.dark-mode .top_link a,
body.dark-mode .social_icon a {
  color: #c0c0c0 !important;
}

body.dark-mode .top_link a:hover,
body.dark-mode .social_icon a:hover {
  color: #667eea !important;
}

body.dark-mode .navbar {
  background-color: #1a1a2e !important;
  border-bottom: 1px solid #2d2d44 !important;
}

body.dark-mode .navbar-nav > li > a {
  color: #f0f0f0 !important;
  font-weight: 500;
}

body.dark-mode .navbar-nav > li > a:hover,
body.dark-mode .navbar-nav > li > a:focus {
  color: #ffffff !important;
  background-color: rgba(102, 126, 234, 0.15) !important;
}

body.dark-mode .navbar-nav > li.active > a {
  color: #667eea !important;
  background-color: rgba(102, 126, 234, 0.1) !important;
}

body.dark-mode .navbar-nav > li > ul {
  background-color: #1a1a2e !important;
  border: 1px solid #2d2d44 !important;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.7) !important;
}

body.dark-mode .navbar-nav > li > ul > li > a {
  color: #c0c0c0 !important;
  background-color: transparent !important;
}

body.dark-mode .navbar-nav > li > ul > li > a:hover {
  background-color: #2d2d44 !important;
  color: #ffffff !important;
}

body.dark-mode .navbar-toggle .icon-bar {
  background-color: #ffffff !important;
}

/* Parallax sections in dark mode - Enhanced Readability */
body.dark-mode .parallax-overlay {
  background: linear-gradient(135deg, rgba(10, 10, 20, 0.88) 0%, rgba(15, 15, 30, 0.85) 100%) !important;
}

body.dark-mode .parallax-title,
body.dark-mode .parallax-subtitle,
body.dark-mode .parallax-description {
  color: #ffffff !important;
  text-shadow: 3px 3px 25px rgba(0, 0, 0, 0.9), 1px 1px 5px rgba(0, 0, 0, 0.8);
}

body.dark-mode .color-white {
  color: #ffffff !important;
}

/* Sections in dark mode - Better Backgrounds */
body.dark-mode section {
  background-color: #16213e;
}

body.dark-mode .background-grey {
  background-color: #1a1a2e !important;
}

/* Typography in dark mode - High Contrast */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: #ffffff !important;
}

body.dark-mode .color-black {
  color: #ffffff !important;
}

body.dark-mode p,
body.dark-mode .color-grey {
  color: #c5c5c5 !important;
}

body.dark-mode .font-14,
body.dark-mode .font-22 {
  color: #d0d0d0 !important;
}

/* Pricing boxes in dark mode - Enhanced Visibility */
body.dark-mode .pricing_box {
  background-color: #1f2937 !important;
  border: 1px solid #374151 !important;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode .pricing_box:hover {
  box-shadow: 0 10px 40px rgba(102, 126, 234, 0.4) !important;
  border-color: #667eea !important;
}

body.dark-mode .pricing_box.active {
  border-color: #667eea !important;
  box-shadow: 0 10px 40px rgba(102, 126, 234, 0.5) !important;
}

body.dark-mode .pricing_box .title {
  background: linear-gradient(135deg, #4b67e6 0%, #764ba2 100%) !important;
  color: #ffffff !important;
}

body.dark-mode .pricing_box .pricing {
  color: #ffffff !important;
}

body.dark-mode .pricing_box .pricing small {
  color: #d1d5db !important;
}

body.dark-mode .pricing_box .cut_price {
  color: #9ca3af !important;
}

body.dark-mode .pricing_box .cut_price small {
  color: #9ca3af !important;
}

body.dark-mode .pricing_box ul li {
  color: #d1d5db !important;
  border-bottom-color: #374151 !important;
}

body.dark-mode .pricing_box ul li strong,
body.dark-mode .pricing_box ul li span {
  color: #e5e7eb !important;
}

body.dark-mode .pricing_box .icon i {
  color: #06b6d4 !important;
}

/* Additional pricing text visibility */
body.dark-mode .price_sec_title,
body.dark-mode .price_sec_subtitle {
  color: #ffffff !important;
}

body.dark-mode .price_sec_subtitle {
  color: #cbd5e1 !important;
}

/* Cards and boxes in dark mode - Better Contrast */
body.dark-mode .right_icon_box,
body.dark-mode .s_box,
body.dark-mode .services_boxs {
  background-color: #1f2937 !important;
  border: 1px solid #374151 !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode .right_icon_box:hover,
body.dark-mode .s_box:hover,
body.dark-mode .services_boxs:hover {
  box-shadow: 0 10px 35px rgba(102, 126, 234, 0.35) !important;
  border-color: #4b5563 !important;
  transform: translateY(-5px);
}

body.dark-mode .right_icon_box h3, body.dark-mode .right_icon_box h5,
body.dark-mode .s_box h4,
body.dark-mode .services_boxs h5 {
  color: #ffffff !important;
}

body.dark-mode .right_icon_box p,
body.dark-mode .s_box p,
body.dark-mode .services_boxs p {
  color: #d1d5db !important;
}

body.dark-mode .icon_right {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

body.dark-mode .sboxs_f {
  background-color: #374151 !important;
}

body.dark-mode .sboxs_f h5 {
  color: #ffffff !important;
}

body.dark-mode .sboxs_b {
  background-color: #1f2937 !important;
}

body.dark-mode .sboxs_b h5 {
  color: #ffffff !important;
}

body.dark-mode .sboxs_b p {
  color: #d1d5db !important;
}

/* FAQ Section in dark mode - Enhanced Readability */
body.dark-mode .faq-section {
  background: linear-gradient(135deg, #16213e 0%, #1a1a2e 100%) !important;
}

body.dark-mode .faq-section h2 {
  color: #ffffff !important;
}

body.dark-mode .faq-section p {
  color: #d1d5db !important;
}

body.dark-mode .faq-tab {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
  color: #e5e7eb !important;
}

body.dark-mode .faq-tab.active,
body.dark-mode .faq-tab:hover {
  color: #ffffff !important;
  border-color: #667eea !important;
}

body.dark-mode .faq-item {
  background-color: #1f2937 !important;
  border: 1px solid #374151 !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .faq-item:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
  border-color: #4b5563 !important;
}

body.dark-mode .faq-question {
  background-color: transparent;
}

body.dark-mode .faq-question:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%) !important;
}

body.dark-mode .faq-item.active .faq-question {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 100%) !important;
}

body.dark-mode .faq-question h4 {
  color: #f3f4f6 !important;
}

body.dark-mode .faq-item.active .faq-question h4 {
  color: #8b9dff !important;
}

body.dark-mode .faq-answer p,
body.dark-mode .faq-answer li {
  color: #d1d5db !important;
}

body.dark-mode .faq-answer li::before {
  color: #667eea !important;
}

body.dark-mode .faq-search-input {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
  color: #f3f4f6 !important;
}

body.dark-mode .faq-search-input::placeholder {
  color: #9ca3af !important;
}

body.dark-mode .faq-search-input:focus {
  border-color: #667eea !important;
  box-shadow: 0 5px 30px rgba(102, 126, 234, 0.4) !important;
  background-color: #1f2937 !important;
}

body.dark-mode .faq-cta {
  background-color: #1f2937 !important;
  border: 1px solid #374151 !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .faq-cta h3 {
  color: #ffffff !important;
}

body.dark-mode .faq-cta p {
  color: #d1d5db !important;
}

/* Forms and inputs in dark mode - Better Visibility */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .form-control {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
  color: #f3f4f6 !important;
}

body.dark-mode input[type="text"]::placeholder,
body.dark-mode input[type="email"]::placeholder,
body.dark-mode textarea::placeholder {
  color: #9ca3af !important;
}

body.dark-mode input[type="text"]:focus,
body.dark-mode input[type="email"]:focus,
body.dark-mode textarea:focus,
body.dark-mode .form-control:focus {
  border-color: #667eea !important;
  box-shadow: 0 0 15px rgba(102, 126, 234, 0.4) !important;
  background-color: #1f2937 !important;
}

body.dark-mode .banner_search {
  background-color: rgba(31, 41, 55, 0.8) !important;
  border: 1px solid #374151 !important;
  backdrop-filter: blur(10px);
}

body.dark-mode .domainsearchdomainname {
  background-color: #1f2937 !important;
  color: #f3f4f6 !important;
  border-color: #374151 !important;
}

body.dark-mode .domainsearchprefix,
body.dark-mode .domainsearchsubmit {
  background-color: #374151 !important;
  color: #f3f4f6 !important;
  border-color: #4b5563 !important;
}

body.dark-mode .domainsearchsubmit:hover {
  background-color: #667eea !important;
  border-color: #667eea !important;
}

/* Buttons in dark mode - High Visibility */
body.dark-mode .btn_primary,
body.dark-mode .btn_secondry,
body.dark-mode .parallax-btn,
body.dark-mode .faq-cta-btn {
  box-shadow: 0 5px 25px rgba(102, 126, 234, 0.5) !important;
  color: #ffffff !important;
}

body.dark-mode .btn_primary:hover,
body.dark-mode .btn_secondry:hover,
body.dark-mode .parallax-btn:hover,
body.dark-mode .faq-cta-btn:hover {
  box-shadow: 0 8px 35px rgba(102, 126, 234, 0.7) !important;
  color: #ffffff !important;
  transform: translateY(-3px);
}

body.dark-mode .btn-default {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
  color: #f3f4f6 !important;
}

body.dark-mode .btn-default:hover {
  background-color: #4b5563 !important;
  color: #ffffff !important;
}

/* Newsletter section in dark mode */
body.dark-mode .newsletter {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

body.dark-mode .newsletter h4,
body.dark-mode .newsletter p {
  color: #ffffff !important;
}

body.dark-mode .newsletter_text {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
}

body.dark-mode .newsletter_text::placeholder {
  color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-mode .newsletter_text:focus {
  background-color: rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}

body.dark-mode .subscribe {
  background-color: #ffffff !important;
  color: #667eea !important;
}

body.dark-mode .subscribe:hover {
  background-color: #f0f0f0 !important;
  transform: translateY(-2px);
}

/* Footer in dark mode - Enhanced Readability */
body.dark-mode .footer {
  background-color: #0f0f1e !important;
  border-top: 1px solid #374151;
}

body.dark-mode .footer-bottom {
  background-color: #0a0a15 !important;
  border-top: 1px solid #1f2937;
}

body.dark-mode .footer p,
body.dark-mode .footer a,
body.dark-mode .footer_menu li a,
body.dark-mode .footerp p,
body.dark-mode .footerp a {
  color: #d1d5db !important;
}

body.dark-mode .footer a:hover,
body.dark-mode .footer_menu li a:hover,
body.dark-mode .footerp a:hover {
  color: #8b9dff !important;
}

body.dark-mode .footer strong {
  color: #f3f4f6 !important;
}

/* Promo list in dark mode */
body.dark-mode .promo_list li strong {
  background-color: #1f2937 !important;
  border: 2px solid #374151 !important;
  color: #f3f4f6 !important;
}

body.dark-mode .promo_list li:hover strong {
  border-color: #667eea !important;
  box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4) !important;
  background-color: #374151 !important;
  transform: translateY(-5px);
}

body.dark-mode .promo_list li strong span {
  color: #ffffff !important;
}

/* Location map in dark mode */
body.dark-mode #dedicatedintro {
  background-color: #16213e !important;
}

body.dark-mode #dedicatedintro h2 {
  color: #ffffff !important;
}

body.dark-mode .location-map {
  filter: invert(0.95) hue-rotate(180deg) brightness(0.9);
  opacity: 0.85;
}

body.dark-mode .location-name span {
  color: #0f0f1e !important;
  text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.5);
}

/* Scroll indicator in dark mode */
body.dark-mode .scroll-indicator span {
  border-color: #ffffff !important;
}

body.dark-mode .scroll-indicator span::before {
  background: #ffffff !important;
}

/* Images in dark mode - Better visibility */
body.dark-mode img:not(.logo):not([id="logo"]):not([alt*="Footer"]) {
  opacity: 0.92;
  filter: brightness(0.95);
}

body.dark-mode img:hover {
  opacity: 1;
  filter: brightness(1);
}

/* Gradient text stays vibrant in dark mode */
body.dark-mode .gradient-text {
  background: linear-gradient(135deg, #8b9dff 0%, #9b7ec6 50%, #ff9ddd 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 700 !important;
}

/* Best services parallax section in dark mode */
body.dark-mode .best_services {
  background-color: #16213e;
}

body.dark-mode .best_services .parallax-overlay {
  background: linear-gradient(135deg, rgba(15, 15, 30, 0.92) 0%, rgba(26, 26, 46, 0.88) 100%) !important;
}

body.dark-mode .best_services .parallax-title {
  color: #ffffff !important;
  text-shadow: 3px 3px 25px rgba(0, 0, 0, 0.9);
}

body.dark-mode .best_services .parallax-subtitle {
  color: #f3f4f6 !important;
  text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.8);
}

/* Heading styles in dark mode */
body.dark-mode .heading h2 {
  color: #ffffff !important;
}

body.dark-mode .heading p {
  color: #d1d5db !important;
}

body.dark-mode .no_margin {
  color: #ffffff !important;
}

body.dark-mode .text-uppercase {
  color: #ffffff !important;
}

/* Mobile menu in dark mode - Enhanced */
@media (max-width: 991px) {
  body.dark-mode .navbar-collapse {
    background-color: #1a1a2e !important;
    border-top: 1px solid #2d2d44 !important;
    border-top-color: #2d2d44 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
  }
  
  body.dark-mode .navbar-nav > li {
    border-bottom-color: #2d2d44 !important;
  }
  
  body.dark-mode .navbar-nav > li > a {
    color: #f0f0f0 !important;
    background-color: transparent !important;
    padding: 15px !important;
  }
  
  body.dark-mode .navbar-nav > li > a:hover,
  body.dark-mode .navbar-nav > li > a:focus {
    background-color: rgba(102, 126, 234, 0.2) !important;
    color: #ffffff !important;
  }
  
  body.dark-mode .navbar-nav > li > ul {
    background-color: #2d2d44 !important;
    border-color: #374151 !important;
  }
  
  body.dark-mode .navbar-nav > li > ul > li > a {
    color: #d1d5db !important;
    background-color: #2d2d44 !important;
    padding: 12px 30px !important;
  }
  
  body.dark-mode .navbar-nav > li > ul > li > a:hover {
    background-color: #374151 !important;
    color: #ffffff !important;
  }
  
  body.dark-mode .navbar-toggle {
    background-color: #2d2d44 !important;
    border-color: #667eea !important;
  }
  
  body.dark-mode .navbar-toggle:hover,
  body.dark-mode .navbar-toggle:focus {
    background-color: #374151 !important;
    border-color: #667eea !important;
  }
  
  body.dark-mode .navbar-toggle .icon-bar {
    background-color: #ffffff !important;
  }
}

/* Tablet & Mobile - Additional Enhancements */
@media (max-width: 768px) {
  body.dark-mode .top_header {
    background-color: #1a1a2e !important;
  }
  
  body.dark-mode .parallax-title {
    font-size: 2rem !important;
    color: #ffffff !important;
  }
  
  body.dark-mode .parallax-subtitle {
    font-size: 1rem !important;
    color: #f3f4f6 !important;
  }
  
  body.dark-mode .pricing_box {
    margin-bottom: 20px;
  }
  
  body.dark-mode .faq-tab {
    padding: 10px 20px;
    font-size: 14px;
  }
  
  body.dark-mode .faq-question h4 {
    font-size: 15px;
  }
  
  body.dark-mode .right_icon_box,
  body.dark-mode .s_box {
    margin-bottom: 20px;
  }
}

/* Small Mobile Devices */
@media (max-width: 480px) {
  body.dark-mode .banner_search {
    padding: 15px;
  }
  
  body.dark-mode .promo_list li {
    margin-bottom: 10px;
  }
  
  body.dark-mode .heading h2 {
    font-size: 1.8rem !important;
  }
  
  body.dark-mode .faq-search-input {
    font-size: 14px;
    padding: 15px 55px 15px 20px;
  }
}

/* Loading animation for theme switch */
@keyframes darkModeTransition {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

/* Theme transition stays scoped so long pages do not animate every descendant. */
body.dark-mode,
body.dark-mode :where(header, nav, main, section, article, footer, button, input, textarea, select) {
  transition:
    background-color 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease;
}

@media (prefers-reduced-motion: reduce) {
  body.dark-mode,
  body.dark-mode :where(header, nav, main, section, article, footer, button, input, textarea, select) {
    transition: none;
  }
}

/* Prevent flash of unstyled content */
html {
  background-color: #ffffff;
}

html.dark-mode,
body.dark-mode {
  background-color: #0f0f1e !important;
}

/* Link colors in dark mode */
/* Lifted from #8b9dff, which measured 4.1:1 against the footer surface.
   Links that are styled as buttons are excluded: this rule used to repaint
   their labels too, which is how an indigo label ended up on a cyan pill at
   1.2:1 across the product pages. They carry their own label colour. */
body.dark-mode a:not(:where([class*="btn"],[class*="Btn"],[class*="button"],[class*="Button"],[class*="cta"],[class*="Cta"])) {
  color: #a9b8ff;
}

body.dark-mode a:not(:where([class*="btn"],[class*="Btn"],[class*="button"],[class*="Button"],[class*="cta"],[class*="Cta"])):hover {
  color: #c3cdff;
}

/* Table styles in dark mode */
body.dark-mode table {
  background-color: #1f2937 !important;
}

body.dark-mode table td {
  color: #d1d5db !important;
}

/* List styles in dark mode */
body.dark-mode ul li,
body.dark-mode ol li {
  color: #d1d5db !important;
}

/* Strong and emphasis in dark mode */
body.dark-mode strong {
  color: #f3f4f6 !important;
}

body.dark-mode em {
  color: #e5e7eb !important;
}

/* Specific service box text colors */
body.dark-mode .service_box h2,
body.dark-mode .service_box h4 {
  color: #ffffff !important;
}

body.dark-mode .service_box p {
  color: #d1d5db !important;
}

/* Domain search button in dark mode */
body.dark-mode .custom-search-forvm .btn {
  background-color: #374151 !important;
  color: #f3f4f6 !important;
  border-color: #4b5563 !important;
}

body.dark-mode .custom-search-forvm .btn:hover {
  background-color: #667eea !important;
  border-color: #667eea !important;
  color: #ffffff !important;
}

/* Accessibility - High contrast mode support */
@media (prefers-contrast: high) {
  body.dark-mode {
    background-color: #000000 !important;
  }
  
  body.dark-mode h1,
  body.dark-mode h2,
  body.dark-mode h3,
  body.dark-mode h4,
  body.dark-mode h5,
  body.dark-mode h6 {
    color: #ffffff !important;
  }
  
  body.dark-mode p,
  body.dark-mode li,
  body.dark-mode a {
    color: #e0e0e0 !important;
  }
}

/* Print styles - Revert to light for printing */
@media print {
  body.dark-mode {
    background-color: #ffffff !important;
    color: #000000 !important;
  }
  
  body.dark-mode * {
    background-color: transparent !important;
    color: #000000 !important;
  }
}

/* Dark mode for modern pricing section */
body.dark-mode .pricing-modern-section {
	background: linear-gradient(135deg, #0f172a 0%, #1a3a52 50%, #164e63 100%);
}

body.dark-mode .pricing-main-title {
	color: #ffffff !important;
}

body.dark-mode .pricing-subtitle {
	color: #9ca3af !important;
}

body.dark-mode .pricing-card {
	background: #1f2937 !important;
	border-color: #374151 !important;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .pricing-card:hover {
	border-color: #3b82f6 !important;
	box-shadow: 0 20px 60px rgba(59, 130, 246, 0.25) !important;
}

body.dark-mode .card-title {
	color: #ffffff !important;
}

body.dark-mode .card-subtitle {
	color: #9ca3af !important;
}

body.dark-mode .price-main {
	color: #ffffff !important;
}

body.dark-mode .price-currency,
body.dark-mode .price-period {
	color: #cbd5e1 !important;
}

body.dark-mode .price-original {
	color: #6b7280 !important;
}

body.dark-mode .pricing-card.featured {
	background: linear-gradient(135deg, #1f2937 0%, rgba(59, 130, 246, 0.08) 100%) !important;
	border-color: #3b82f6 !important;
}

body.dark-mode .card-features {
	color: #cbd5e1 !important;
}

body.dark-mode .card-features li {
	color: #cbd5e1 !important;
	border-bottom-color: #374151 !important;
}

body.dark-mode .card-link {
	color: #9ca3af !important;
}

body.dark-mode .card-link:hover {
	color: #3b82f6 !important;
}

body.dark-mode .pricing-bottom-message {
	background: rgba(59, 130, 246, 0.1) !important;
	border-left-color: #3b82f6 !important;
}

body.dark-mode .pricing-bottom-message p {
	color: #cbd5e1 !important;
}

/* Dark mode for datacenters section */
body.dark-mode #dedicatedintro {
	background: linear-gradient(135deg, #0f172a 0%, #1a3a52 50%, #164e63 100%) !important;
}

body.dark-mode #dedicatedintro .text-center h2 {
	color: #ffffff !important;
}

body.dark-mode #dedicatedintro .text-center p {
	color: #9ca3af !important;
}

body.dark-mode #dedicatedintro .location-map {
	background: #1f2937 !important;
	border-color: #374151 !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode #dedicatedintro .location-map:hover {
	border-color: #3b82f6 !important;
	box-shadow: 0 30px 80px rgba(59, 130, 246, 0.2) !important;
}

body.dark-mode #dedicatedintro .location-name span {
	background: linear-gradient(135deg, #166bf4 0%, #047d91 100%) !important;
	color: #ffffff !important;
	box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4) !important;
}

body.dark-mode #dedicatedintro .location-pin {
	background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%) !important;
	box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3) !important;
}

/* ========== PRICING TABLE PROTECTION - PREVENT OVERRIDE ========== */

/* Light mode pricing table - Force original styles */
.pricing_table2 {
  background: #f5f5f5 !important;
}

/* ========== FONT AWESOME ICON PROTECTION ========== */

/* Ensure Font Awesome icons load and display properly */
.fa, .fa-*, [class^="fa-"], [class*=" fa-"] {
  font-family: 'FontAwesome' !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  display: inline-block !important;
}

/* Force icon display in all contexts */
i.fa {
  font-family: 'FontAwesome' !important;
  speak: none !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Header icons */
.top_header .fa,
.social_icon .fa,
.top_menu .fa {
  font-family: 'FontAwesome' !important;
  display: inline-block !important;
  margin-right: 8px !important;
}

/* Service box icons */
.services_icon .fa,
.left_icon .fa,
.right_icon .fa,
.icon_right .fa {
  font-family: 'FontAwesome' !important;
  display: inline-block !important;
}

/* Footer icons */
.footer-modern .fa,
.footer .fa {
  font-family: 'FontAwesome' !important;
  display: inline-block !important;
}

/* Payment icons */
.payment-icons .fa {
  font-family: 'FontAwesome' !important;
  display: inline-block !important;
  font-size: 28px !important;
}

/* Dark mode icon visibility */
body.dark-mode .fa {
  font-family: 'FontAwesome' !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Specific icon colors - Light mode */
.services_icon span i.fa {
  color: #d71c67 !important;
  font-size: 48px !important;
  font-family: 'FontAwesome' !important;
}

.left_icon i.fa {
  color: #d71c67 !important;
  font-size: 26px !important;
  font-family: 'FontAwesome' !important;
}

.icon_right i.fa {
  color: #ffffff !important;
  font-size: 32px !important;
  font-family: 'FontAwesome' !important;
}

/* Dark mode icon colors */
body.dark-mode .services_icon span i.fa {
  color: #d71c67 !important;
  font-family: 'FontAwesome' !important;
}

body.dark-mode .left_icon i.fa {
  color: #d71c67 !important;
  font-family: 'FontAwesome' !important;
}

body.dark-mode .icon_right i.fa {
  color: #ffffff !important;
  font-family: 'FontAwesome' !important;
}

.pricing_table2 .pricing_box {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08) !important;
  transition: all 0.3s ease !important;
}

.pricing_table2 .pricing_box:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 15px 40px rgba(0,0,0,0.15) !important;
}

.pricing_table2 .pricing_box.active {
  background: #ffffff !important;
  border: 2px solid #d71c67 !important;
  box-shadow: 0 20px 50px rgba(215, 28, 103, 0.25) !important;
  transform: scale(1.05) translateY(-10px) !important;
}

.pricing_table2 .pricing_box h1 {
  color: #333333 !important;
  font-weight: 700 !important;
}

.pricing_table2 .pricing_box h5 {
  color: #666666 !important;
  font-weight: 600 !important;
}

.pricing_table2 .pricing_box ul {
  list-style: none !important;
  padding: 0 !important;
}

.pricing_table2 .pricing_box ul li {
  color: #555555 !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

.pricing_table2 .pricing_box .btn_primary {
  background: linear-gradient(135deg, #d71c67 0%, #e0005d 100%) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 12px 30px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

.pricing_table2 .pricing_box .btn_primary:hover {
  background: linear-gradient(135deg, #ff006a 0%, #d71c67 100%) !important;
  transform: scale(1.05) !important;
  box-shadow: 0 10px 25px rgba(215, 28, 103, 0.4) !important;
}

/* ========== FOOTER PROTECTION - PREVENT OVERRIDE ========== */

/* Light mode footer - Force original styles */
.footer-modern {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
  color: #ffffff !important;
  padding: 60px 0 0 !important;
}

.footer-modern .footer-main {
  padding-bottom: 40px !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.footer-modern .footer-widget {
  margin-bottom: 30px !important;
}

.footer-modern .footer-title {
  color: #ffffff !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  margin-bottom: 25px !important;
  position: relative !important;
  padding-bottom: 15px !important;
}

.footer-modern .footer-title::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 50px !important;
  height: 3px !important;
  background: linear-gradient(90deg, #d71c67 0%, #ff006a 100%) !important;
  border-radius: 2px !important;
}

.footer-modern .footer-description {
  color: rgba(255,255,255,0.8) !important;
  line-height: 1.8 !important;
  margin-bottom: 25px !important;
}

.footer-modern .footer-social .social-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 45px !important;
  height: 45px !important;
  background: rgba(255,255,255,0.1) !important;
  border-radius: 50% !important;
  margin-right: 10px !important;
  transition: all 0.3s ease !important;
  color: #ffffff !important;
  font-size: 18px !important;
}

.footer-modern .footer-social .social-link:hover {
  background: linear-gradient(135deg, #d71c67 0%, #ff006a 100%) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 20px rgba(215, 28, 103, 0.4) !important;
}

.footer-modern .footer-menu {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-modern .footer-menu li {
  margin-bottom: 12px !important;
}

.footer-modern .footer-menu li a {
  color: rgba(255,255,255,0.8) !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  display: inline-block !important;
}

.footer-modern .footer-menu li a:hover {
  color: #d71c67 !important;
  transform: translateX(5px) !important;
}

.footer-modern .contact-item {
  display: flex !important;
  align-items: flex-start !important;
  margin-bottom: 20px !important;
  color: rgba(255,255,255,0.8) !important;
}

.footer-modern .contact-item i {
  color: #d71c67 !important;
  font-size: 18px !important;
  margin-right: 15px !important;
  margin-top: 3px !important;
}

.footer-modern .contact-item a {
  color: rgba(255,255,255,0.8) !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

.footer-modern .contact-item a:hover {
  color: #d71c67 !important;
}

.footer-modern .footer-bottom-modern {
  background: rgba(0,0,0,0.2) !important;
  padding: 25px 0 !important;
}

.footer-modern .footer-copyright {
  color: rgba(255,255,255,0.7) !important;
  font-size: 0.95rem !important;
}

.footer-modern .footer-copyright strong {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.footer-modern .footer-tagline {
  color: rgba(255,255,255,0.6) !important;
  font-size: 0.9rem !important;
  margin-top: 5px !important;
}

.footer-modern .payment-text {
  color: rgba(255,255,255,0.7) !important;
  font-size: 0.95rem !important;
  margin-bottom: 10px !important;
}

.footer-modern .payment-icons i {
  color: rgba(255,255,255,0.8) !important;
  font-size: 28px !important;
  margin: 0 8px !important;
  transition: all 0.3s ease !important;
}

.footer-modern .payment-icons i:hover {
  color: #d71c67 !important;
  transform: translateY(-3px) !important;
}

.footer-modern .scroll-to-top {
  position: fixed !important;
  bottom: 30px !important;
  right: 30px !important;
  width: 50px !important;
  height: 50px !important;
  background: linear-gradient(135deg, #d71c67 0%, #e0005d 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50% !important;
  font-size: 20px !important;
  cursor: pointer !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.3s ease !important;
  z-index: 999 !important;
  box-shadow: 0 5px 20px rgba(215, 28, 103, 0.4) !important;
}

.footer-modern .scroll-to-top.show {
  opacity: 1 !important;
  visibility: visible !important;
}

.footer-modern .scroll-to-top:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 30px rgba(215, 28, 103, 0.6) !important;
}

/* Dark mode pricing table - Specific overrides */
body.dark-mode .pricing_table2 {
  background: #1a1a1a !important;
}

body.dark-mode .pricing_table2 .pricing_box {
  background: #2a2a2a !important;
  border: 1px solid #3a3a3a !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
}

body.dark-mode .pricing_table2 .pricing_box:hover {
  border-color: #d71c67 !important;
  box-shadow: 0 15px 50px rgba(215, 28, 103, 0.3) !important;
}

body.dark-mode .pricing_table2 .pricing_box.active {
  background: #2a2a2a !important;
  border: 2px solid #d71c67 !important;
  box-shadow: 0 20px 60px rgba(215, 28, 103, 0.4) !important;
}

body.dark-mode .pricing_table2 .pricing_box h1 {
  color: #ffffff !important;
}

body.dark-mode .pricing_table2 .pricing_box h5 {
  color: #cccccc !important;
}

body.dark-mode .pricing_table2 .pricing_box ul li {
  color: #b0b0b0 !important;
  border-bottom: 1px solid #3a3a3a !important;
}

body.dark-mode .pricing_table2 .pricing_box .btn_primary {
  background: linear-gradient(135deg, #d71c67 0%, #e0005d 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 5px 20px rgba(215, 28, 103, 0.4) !important;
}

body.dark-mode .pricing_table2 .pricing_box .btn_primary:hover {
  box-shadow: 0 10px 30px rgba(215, 28, 103, 0.6) !important;
}

/* ========== DARK MODE FOOTER PROTECTION ========== */

body.dark-mode .footer-modern {
  background: linear-gradient(135deg, #0a0a0f 0%, #0d1117 50%, #0f1419 100%) !important;
  color: #ffffff !important;
}

body.dark-mode .footer-modern .footer-main {
  border-bottom-color: rgba(255,255,255,0.05) !important;
}

body.dark-mode .footer-modern .footer-title {
  color: #ffffff !important;
}

body.dark-mode .footer-modern .footer-title::after {
  background: linear-gradient(90deg, #d71c67 0%, #ff006a 100%) !important;
}

body.dark-mode .footer-modern .footer-description {
  color: rgba(255,255,255,0.7) !important;
}

body.dark-mode .footer-modern .footer-social .social-link {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.8) !important;
}

body.dark-mode .footer-modern .footer-social .social-link:hover {
  background: linear-gradient(135deg, #d71c67 0%, #e0005d 100%) !important;
  color: #ffffff !important;
}

body.dark-mode .footer-modern .footer-menu li a {
  color: rgba(255,255,255,0.7) !important;
}

body.dark-mode .footer-modern .footer-menu li a:hover {
  color: #d71c67 !important;
}

body.dark-mode .footer-modern .contact-item {
  color: rgba(255,255,255,0.7) !important;
}

body.dark-mode .footer-modern .contact-item i {
  color: #d71c67 !important;
}

body.dark-mode .footer-modern .contact-item a {
  color: rgba(255,255,255,0.7) !important;
}

body.dark-mode .footer-modern .contact-item a:hover {
  color: #d71c67 !important;
}

body.dark-mode .footer-modern .footer-bottom-modern {
  background: rgba(0,0,0,0.3) !important;
}

body.dark-mode .footer-modern .footer-copyright,
body.dark-mode .footer-modern .footer-copyright strong {
  color: rgba(255,255,255,0.8) !important;
}

body.dark-mode .footer-modern .footer-tagline {
  color: rgba(255,255,255,0.5) !important;
}

body.dark-mode .footer-modern .payment-text {
  color: rgba(255,255,255,0.7) !important;
}

body.dark-mode .footer-modern .payment-icons i {
  color: rgba(255,255,255,0.7) !important;
}

body.dark-mode .footer-modern .payment-icons i:hover {
  color: #d71c67 !important;
}

body.dark-mode .footer-modern .scroll-to-top {
  background: linear-gradient(135deg, #d71c67 0%, #e0005d 100%) !important;
  color: #ffffff !important;
}

/* Focus styles for accessibility */
body.dark-mode *:focus {
  outline: 2px solid #8b9dff !important;
  outline-offset: 2px;
}

body.dark-mode button:focus,
body.dark-mode a:focus {
  box-shadow: 0 0 0 3px rgba(139, 157, 255, 0.4) !important;
}

/* Selection highlight in dark mode */
body.dark-mode ::selection {
  background-color: #667eea;
  color: #ffffff;
}

body.dark-mode ::-moz-selection {
  background-color: #667eea;
  color: #ffffff;
}

/* ============================================================
   FINAL UNIFIED THEME OVERRIDES (Brand: Cyan/Teal + Deep Navy)
   Keeps light mode clean, dark mode consistent across pages.
   ============================================================ */

/* Toggle button in light mode */
.dark-mode-btn {
  background: linear-gradient(135deg, #16b8e8 0%, #22d3c5 100%) !important;
  border: 1px solid rgba(103, 232, 249, 0.45) !important;
  box-shadow: 0 6px 18px rgba(22, 184, 232, 0.34) !important;
}

.dark-mode-btn:hover {
  box-shadow: 0 10px 24px rgba(22, 184, 232, 0.45) !important;
}

/* Core dark canvas */
body.dark-mode {
  background: #060f1d !important;
  color: #d8e7f6 !important;
}

body.dark-mode section,
body.dark-mode .background-grey {
  background-color: #0b1728 !important;
}

/* Header + top utility area */
body.dark-mode header {
  background: #07192f !important;
}

body.dark-mode .top_header {
  background: linear-gradient(90deg, #07192f 0%, #0a2948 45%, #0a3d5b 100%) !important;
  border-bottom: 1px solid rgba(71, 85, 105, 0.52) !important;
}

body.dark-mode #header {
  background: transparent !important;
}

body.dark-mode #header .col-md-12 {
  background: linear-gradient(140deg, rgba(8, 24, 47, 0.94), rgba(6, 31, 51, 0.9)) !important;
  box-shadow: 0 14px 36px rgba(2, 8, 23, 0.55) !important;
}

body.dark-mode .top_header .social_icon ul li a {
  background: rgba(22, 184, 232, 0.2) !important;
  border: 1px solid rgba(103, 232, 249, 0.3) !important;
  color: #e0f2fe !important;
}

body.dark-mode .top_header .social_icon ul li a:hover {
  background: linear-gradient(135deg, #16b8e8, #22d3c5) !important;
  border-color: transparent !important;
  color: #04243d !important;
}

body.dark-mode .top_header .top_link ul li.login a {
  background: linear-gradient(135deg, #16b8e8, #22d3c5) !important;
  border: 1px solid rgba(103, 232, 249, 0.5) !important;
  color: #04243d !important;
}

body.dark-mode .top_header .top_link ul li.register a {
  background: rgba(15, 23, 42, 0.7) !important;
  border: 1px solid rgba(148, 163, 184, 0.48) !important;
  color: #dbeafe !important;
}

/* Navigation in dark mode */
body.dark-mode #header .navbar-nav > li > a {
  color: #dbeafe !important;
}

body.dark-mode #header .navbar-nav > li > a:hover,
body.dark-mode #header .navbar-nav > li > a:focus {
  color: #67e8f9 !important;
  background: rgba(34, 211, 197, 0.16) !important;
}

body.dark-mode #header .navbar-nav > li.open > a,
body.dark-mode #header .navbar-nav > li.open > a:hover,
body.dark-mode #header .navbar-nav > li.open > a:focus {
  color: #67e8f9 !important;
  background: rgba(34, 211, 197, 0.16) !important;
}

body.dark-mode #header .navbar-nav > li.active > a {
  color: #04243d !important;
  background: linear-gradient(135deg, #16b8e8, #22d3c5) !important;
}

body.dark-mode #header .navbar-nav > li > ul {
  background: rgba(8, 24, 47, 0.97) !important;
  border: 1px solid rgba(71, 85, 105, 0.55) !important;
}

body.dark-mode #header .navbar-nav > li > ul li a {
  color: #dbeafe !important;
}

body.dark-mode #header .navbar-nav > li > ul li a:hover {
  color: #67e8f9 !important;
  background: rgba(34, 211, 197, 0.15) !important;
}

/* Action buttons + CTA consistency */
body.dark-mode .btn_primary,
body.dark-mode .faq-cta-btn,
body.dark-mode .domainsearchsubmit,
body.dark-mode .newsletter-subscribe-btn {
  background: linear-gradient(135deg, #16b8e8, #22d3c5) !important;
  border: none !important;
  color: #04243d !important;
  box-shadow: 0 10px 28px rgba(22, 184, 232, 0.34) !important;
}

body.dark-mode .btn_primary:hover,
body.dark-mode .faq-cta-btn:hover,
body.dark-mode .domainsearchsubmit:hover,
body.dark-mode .newsletter-subscribe-btn:hover {
  background: linear-gradient(135deg, #0ea5d2, #1cc9b7) !important;
}

/* Footer consistency */
body.dark-mode .footer-modern .footer-title::after,
body.dark-mode .footer-modern .scroll-to-top,
body.dark-mode .footer-modern .footer-social .social-link:hover {
  background: linear-gradient(135deg, #16b8e8, #22d3c5) !important;
}

body.dark-mode .footer-modern .footer-menu li a:hover,
body.dark-mode .footer-modern .contact-item a:hover,
body.dark-mode .footer-modern .contact-item i,
body.dark-mode .footer-modern .payment-icons i:hover {
  color: #22d3c5 !important;
}

/* ============================================================
   DARK MODE VISIBILITY HOTFIX (Homepage + Shared Components)
   Fixes low-contrast text/buttons/cards in dark mode.
   ============================================================ */

/* Hero support cards */
body.dark-mode .hero-stat-card {
  background: rgba(15, 23, 42, 0.72) !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  box-shadow: 0 18px 40px rgba(2, 8, 23, 0.45) !important;
}

body.dark-mode .hero-stat-card h3,
body.dark-mode .hero-stat-card strong {
  color: #f8fafc !important;
}

body.dark-mode .hero-stat-card p {
  color: #d7e4f3 !important;
}

/* Domain search panel */
body.dark-mode .domain-search-panel,
body.dark-mode .banner_search.domain-search-panel {
  background: linear-gradient(140deg, rgba(15, 23, 42, 0.78), rgba(30, 41, 59, 0.68)) !important;
  border: 1px solid rgba(103, 232, 249, 0.34) !important;
  box-shadow: 0 24px 70px rgba(2, 8, 23, 0.52) !important;
}

body.dark-mode .domain-search-panel h2 {
  color: #f8fafc !important;
}

body.dark-mode .domain-search-panel p {
  color: #dbeafe !important;
}

body.dark-mode .domain-search-panel .custom-search-forvm {
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(148, 163, 184, 0.34) !important;
}

body.dark-mode .domain-search-panel .domainsearchprefix {
  background: rgba(30, 41, 59, 0.86) !important;
  color: #e2e8f0 !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
}

body.dark-mode .domain-search-panel .domainsearchdomainname {
  background: rgba(248, 250, 252, 0.97) !important;
  color: #0f172a !important;
}

body.dark-mode .domain-search-panel .domainsearchdomainname::placeholder {
  color: #64748b !important;
}

body.dark-mode .domain-search-panel .domainsearchsubmit {
  background: linear-gradient(135deg, #16b8e8, #22d3c5) !important;
  color: #04243d !important;
  border: 1px solid rgba(103, 232, 249, 0.45) !important;
}

/* Pricing cards */
body.dark-mode .pricing-modern-section {
  background: linear-gradient(135deg, #0b1728 0%, #0f2238 55%, #113149 100%) !important;
}

body.dark-mode .pricing-modern-section .pricing-subtitle,
body.dark-mode .pricing-modern-section .price-original,
body.dark-mode .pricing-modern-section .card-subtitle,
body.dark-mode .pricing-modern-section .card-link {
  color: #c9d9ea !important;
  opacity: 1 !important;
}

body.dark-mode .pricing-modern-section .card-badge {
  background: rgba(34, 211, 197, 0.22) !important;
  color: #99f6e4 !important;
  border: 1px solid rgba(103, 232, 249, 0.35) !important;
}

body.dark-mode .pricing-modern-section .featured-badge {
  background: linear-gradient(135deg, #16b8e8, #22d3c5) !important;
  color: #04243d !important;
  border-color: rgba(103, 232, 249, 0.5) !important;
}

body.dark-mode .pricing-modern-section .card-features li {
  color: #dbeafe !important;
}

body.dark-mode .pricing-modern-section .card-button,
body.dark-mode .pricing-modern-section .featured-button {
  background: linear-gradient(135deg, #16b8e8, #22d3c5) !important;
  color: #04243d !important;
  border: none !important;
}

body.dark-mode .pricing-modern-section .card-link:hover {
  color: #67e8f9 !important;
}

/* Datacenter section */
body.dark-mode .datacenter-panel {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.7)) !important;
  border: 1px solid rgba(71, 85, 105, 0.45) !important;
  box-shadow: 0 20px 60px rgba(2, 8, 23, 0.5) !important;
}

body.dark-mode .datacenter-top p {
  color: #c9d9ea !important;
}

body.dark-mode .datacenter-benefit {
  background: rgba(34, 211, 197, 0.16) !important;
  border: 1px solid rgba(103, 232, 249, 0.28) !important;
  color: #c7fff4 !important;
}

/* Why choose + solution + service cards */
body.dark-mode .why-feature-card,
body.dark-mode .solution-card,
body.dark-mode .service-flip-shell {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(17, 34, 57, 0.78)) !important;
  border: 1px solid rgba(71, 85, 105, 0.45) !important;
  box-shadow: 0 20px 50px rgba(2, 8, 23, 0.48) !important;
}

body.dark-mode .why-feature-card h5,
body.dark-mode .solution-card h3, body.dark-mode .solution-card h4,
body.dark-mode .service-flip-shell h5,
body.dark-mode .service-stack-card h3, body.dark-mode .service-stack-card h5 {
  color: #f8fafc !important;
}

body.dark-mode .why-feature-card p,
body.dark-mode .solution-card p,
body.dark-mode .service-flip-shell p,
body.dark-mode .service-stack-card p {
  color: #d2deec !important;
}

body.dark-mode .service-stack-card {
  background: transparent !important;
}

body.dark-mode .service-stack-icon {
  background: rgba(34, 211, 197, 0.18) !important;
  color: #99f6e4 !important;
  box-shadow: inset 0 0 0 1px rgba(103, 232, 249, 0.22) !important;
}

body.dark-mode .service-stack-link {
  color: #67e8f9 !important;
}

/* FAQ visibility */
body.dark-mode .faq-section {
  background: #0b1728 !important;
}

body.dark-mode .faq-tab {
  background: rgba(30, 41, 59, 0.78) !important;
  border: 1px solid rgba(71, 85, 105, 0.5) !important;
  color: #dbeafe !important;
}

body.dark-mode .faq-tab.active,
body.dark-mode .faq-tab:hover {
  background: linear-gradient(135deg, #16b8e8, #22d3c5) !important;
  border-color: transparent !important;
  color: #04243d !important;
}

body.dark-mode .faq-item {
  background: rgba(15, 23, 42, 0.76) !important;
  border: 1px solid rgba(71, 85, 105, 0.42) !important;
}

body.dark-mode .faq-question h4,
body.dark-mode .faq-answer p {
  color: #e2ecf7 !important;
}

/* Trust ribbon section readability */
body.dark-mode .trust-ribbon-shell {
  background: linear-gradient(140deg, rgba(15, 23, 42, 0.88), rgba(17, 34, 57, 0.8)) !important;
  border: 1px solid rgba(71, 85, 105, 0.46) !important;
  box-shadow: 0 22px 60px rgba(2, 8, 23, 0.52) !important;
}

body.dark-mode .trust-ribbon-label {
  color: #5eead4 !important;
}

body.dark-mode .trust-ribbon-copy h3 {
  color: #f8fafc !important;
}

body.dark-mode .trust-ribbon-copy p {
  color: #cfe0f1 !important;
}

body.dark-mode .trust-mini-stat {
  background: rgba(30, 41, 59, 0.74) !important;
  border: 1px solid rgba(71, 85, 105, 0.4) !important;
}

body.dark-mode .trust-mini-stat strong {
  color: #f8fafc !important;
}

body.dark-mode .trust-mini-stat span {
  color: #93c5fd !important;
}

body.dark-mode .trust-chip {
  background: rgba(15, 23, 42, 0.74) !important;
  border: 1px solid rgba(71, 85, 105, 0.42) !important;
  color: #e2ecf7 !important;
}

body.dark-mode .trust-chip i {
  color: #22d3c5 !important;
}

/* SEO content section readability */
body.dark-mode .seo-content-section {
  background: #081729 !important;
}

body.dark-mode .seo-content-intro h2 {
  color: #f8fafc !important;
}

body.dark-mode .seo-content-intro p {
  color: #cbdcf0 !important;
}

body.dark-mode .seo-feature-card {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(17, 34, 57, 0.82)) !important;
  border: 1px solid rgba(71, 85, 105, 0.44) !important;
  box-shadow: 0 20px 48px rgba(2, 8, 23, 0.46) !important;
}

body.dark-mode .seo-feature-card h3 {
  color: #f8fafc !important;
}

body.dark-mode .seo-feature-card p {
  color: #cfe0f1 !important;
}

body.dark-mode .seo-feature-card i {
  color: #22d3c5 !important;
}

body.dark-mode .seo-highlight-panel {
  background: linear-gradient(140deg, #0b2342, #0d3152) !important;
  border: 1px solid rgba(103, 232, 249, 0.35) !important;
}

body.dark-mode .seo-highlight-panel h3 {
  color: #67e8f9 !important;
}

body.dark-mode .seo-highlight-panel p {
  color: #dbeafe !important;
}

body.dark-mode .seo-highlight-panel strong {
  color: #ffffff !important;
}

/* Dark mode datacenter map polish (softer, less boxy) */
body.dark-mode #dedicatedintro .datacenter-panel {
  background: linear-gradient(180deg, rgba(11, 23, 40, 0.72), rgba(11, 23, 40, 0.58)) !important;
  border: 1px solid rgba(103, 232, 249, 0.14) !important;
  box-shadow: 0 18px 48px rgba(2, 8, 23, 0.42) !important;
}

body.dark-mode #dedicatedintro .location-map {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.dark-mode #dedicatedintro .location-map .map,
body.dark-mode #dedicatedintro .location-map .map.map-grey {
  border-radius: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Hero + Best-services CTA/Text clarity boost */
body.dark-mode .hero-primary-btn,
body.dark-mode .hero-primary-btn:link,
body.dark-mode .hero-primary-btn:visited {
  background: linear-gradient(135deg, #16b8e8 0%, #22d3c5 100%) !important;
  color: #04243d !important;
  border: 1px solid rgba(103, 232, 249, 0.5) !important;
  box-shadow: 0 14px 36px rgba(22, 184, 232, 0.4) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25) !important;
}

body.dark-mode .hero-secondary-btn,
body.dark-mode .hero-secondary-btn:link,
body.dark-mode .hero-secondary-btn:visited {
  background: rgba(15, 23, 42, 0.78) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(103, 232, 249, 0.42) !important;
  box-shadow: 0 12px 30px rgba(2, 8, 23, 0.45) !important;
}

body.dark-mode .hero-primary-btn i,
body.dark-mode .hero-secondary-btn i {
  color: #ffffff !important;
}

body.dark-mode .hero-primary-btn:hover,
body.dark-mode .hero-secondary-btn:hover {
  color: #ffffff !important;
  filter: brightness(1.05);
}

body.dark-mode .hero-copy .parallax-title {
  color: #ffffff !important;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.45) !important;
}

body.dark-mode .hero-copy .parallax-subtitle {
  color: #e2ecf7 !important;
}

body.dark-mode .hero-highlight {
  background: linear-gradient(135deg, #67e8f9 0%, #22d3c5 55%, #86efac 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: none !important;
}

body.dark-mode .best-service-point {
  background: rgba(15, 23, 42, 0.74) !important;
  border: 1px solid rgba(103, 232, 249, 0.35) !important;
  box-shadow: 0 16px 36px rgba(2, 8, 23, 0.38) !important;
}

body.dark-mode .best-service-point strong {
  color: #ffffff !important;
}

body.dark-mode .best-service-point span {
  color: #dbeafe !important;
}

/* Dark Mode Brand Contrast Polish */
body.dark-mode {
  --ha-dark-bg: #071325;
  --ha-dark-surface: #0b1c35;
  --ha-dark-surface-2: #0f2746;
  --ha-dark-border: rgba(125, 211, 252, 0.2);
  --ha-dark-text: #e2ecf8;
  --ha-dark-muted: #a9bbd3;
  --ha-dark-accent: #22d3c5;
  --ha-dark-accent-2: #38bdf8;
}

body.dark-mode,
body.dark-mode section {
  background-color: var(--ha-dark-bg) !important;
  color: var(--ha-dark-text) !important;
}

body.dark-mode p,
body.dark-mode li,
body.dark-mode .color-grey {
  color: var(--ha-dark-muted) !important;
}

body.dark-mode .faq-item,
body.dark-mode .faq-cta,
body.dark-mode .services_boxs,
body.dark-mode .right_icon_box,
body.dark-mode .pricing-modern-section .pricing-card {
  background: linear-gradient(180deg, rgba(15, 39, 70, 0.92), rgba(10, 29, 53, 0.95)) !important;
  border: 1px solid var(--ha-dark-border) !important;
}

body.dark-mode .faq-question h4,
body.dark-mode .pricing-modern-section .pricing-title,
body.dark-mode .service_title {
  color: #f4f8ff !important;
}

body.dark-mode .btn_primary,
body.dark-mode .btn-primary,
body.dark-mode .newsletter-subscribe-btn,
body.dark-mode .faq-cta-btn {
  background: linear-gradient(135deg, var(--ha-dark-accent-2), var(--ha-dark-accent)) !important;
  color: #ffffff !important;
}

/* Final brand accent override (replace legacy purple/pink tones) */
body.dark-mode .dark-mode-btn,
body.dark-mode .pricing_box .title,
body.dark-mode .faq-tab.active,
body.dark-mode .faq-tab:hover,
body.dark-mode .faq-search-btn,
body.dark-mode .faq-icon,
body.dark-mode .faq-cta-btn,
body.dark-mode .btn_primary,
body.dark-mode .btn-primary {
  background: linear-gradient(135deg, #16b8e8 0%, #22d3c5 100%) !important;
}

body.dark-mode .dark-mode-btn {
  box-shadow: 0 4px 15px rgba(22, 184, 232, 0.35) !important;
}

body.dark-mode .dark-mode-btn:hover {
  box-shadow: 0 6px 20px rgba(22, 184, 232, 0.5) !important;
}

body.dark-mode .top_link a:hover,
body.dark-mode .social_icon a:hover,
body.dark-mode .navbar-nav > li.active > a,
body.dark-mode .pricing_box:hover,
body.dark-mode .pricing_box.active,
body.dark-mode .faq-item.active .faq-question h4,
body.dark-mode .faq-answer li::before {
  color: #22d3c5 !important;
  border-color: #16b8e8 !important;
}

body.dark-mode .navbar-nav > li > a:hover,
body.dark-mode .navbar-nav > li > a:focus,
body.dark-mode .faq-question:hover,
body.dark-mode .faq-item.active .faq-question {
  background-color: rgba(22, 184, 232, 0.16) !important;
}

/* =========================================================
   Top-notch visibility polish for both Light + Dark modes
   ========================================================= */

/* Shared focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.navbar-toggle:focus-visible,
.dark-mode-btn:focus-visible {
  outline: 2px solid #22d3c5 !important;
  outline-offset: 2px !important;
}

/* Light mode readability upgrades */
body:not(.dark-mode) {
  color: #0f172a !important;
}

body:not(.dark-mode) .top_header .top_menu li,
body:not(.dark-mode) .top_header .top_menu li i {
  color: #e6eef9 !important;
}

body:not(.dark-mode) #header .navbar-nav > li > a {
  color: #eaf2ff !important;
  font-weight: 600 !important;
}

body:not(.dark-mode) #header .navbar-nav > li > a:hover,
body:not(.dark-mode) #header .navbar-nav > li > a:focus {
  color: #ffffff !important;
  background: rgba(34, 211, 197, 0.16) !important;
}

body:not(.dark-mode) #header .navbar-nav > li > ul {
  background: rgba(7, 25, 47, 0.98) !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
}

body:not(.dark-mode) #header .navbar-nav > li > ul li a {
  color: #e2e8f0 !important;
}

body:not(.dark-mode) #header .navbar-nav > li > ul li a:hover {
  color: #ffffff !important;
  background: rgba(34, 211, 197, 0.16) !important;
}

body:not(.dark-mode) .footer-modern,
body:not(.dark-mode) .footer-main {
  background: linear-gradient(180deg, #0a1d35 0%, #0b243f 100%) !important;
}

body:not(.dark-mode) .footer-modern .footer-title,
body:not(.dark-mode) .footer-modern .footer-description,
body:not(.dark-mode) .footer-modern .footer-menu li a,
body:not(.dark-mode) .footer-modern .contact-item,
body:not(.dark-mode) .footer-modern .footer-tagline,
body:not(.dark-mode) .footer-modern .payment-text,
body:not(.dark-mode) .footer-modern p {
  color: #dbe7f7 !important;
}

body:not(.dark-mode) .footer-modern .footer-menu li a:hover,
body:not(.dark-mode) .footer-modern .contact-item a:hover {
  color: #67e8f9 !important;
}

/* Dark mode readability upgrades */
body.dark-mode .top_header,
body.dark-mode #header .col-md-12 {
  background: linear-gradient(140deg, rgba(7, 20, 38, 0.98), rgba(9, 33, 57, 0.95)) !important;
}

body.dark-mode #header .navbar-nav > li > a {
  color: #f2f7ff !important;
}

body.dark-mode #header .navbar-nav > li > a:hover,
body.dark-mode #header .navbar-nav > li > a:focus {
  color: #ffffff !important;
  background: rgba(34, 211, 197, 0.18) !important;
}

body.dark-mode #header .navbar-nav > li > ul {
  background: rgba(5, 15, 28, 0.98) !important;
  border: 1px solid rgba(125, 211, 252, 0.28) !important;
}

body.dark-mode #header .navbar-nav > li > ul li a {
  color: #d7e7ff !important;
}

body.dark-mode #header .navbar-nav > li > ul li a:hover {
  color: #ffffff !important;
  background: rgba(34, 211, 197, 0.2) !important;
}

body.dark-mode .footer-modern,
body.dark-mode .footer-main {
  background: linear-gradient(180deg, #071727 0%, #0a1f33 100%) !important;
}

body.dark-mode .footer-modern .footer-title,
body.dark-mode .footer-modern .footer-description,
body.dark-mode .footer-modern .footer-menu li a,
body.dark-mode .footer-modern .contact-item,
body.dark-mode .footer-modern .footer-tagline,
body.dark-mode .footer-modern .payment-text,
body.dark-mode .footer-modern p {
  color: #dbe7f7 !important;
}

body.dark-mode .footer-modern .footer-menu li a:hover,
body.dark-mode .footer-modern .contact-item a:hover {
  color: #67e8f9 !important;
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .form-control {
  border-color: rgba(125, 211, 252, 0.35) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #9fb2cb !important;
}

/* Inline-color fallback patch for legacy/generated pages in dark mode */
body.dark-mode [style*="color:#0d1f3c"],
body.dark-mode [style*="color: #0d1f3c"],
body.dark-mode [style*="color:#0f172a"],
body.dark-mode [style*="color: #0f172a"],
body.dark-mode [style*="color:#111827"],
body.dark-mode [style*="color: #111827"],
body.dark-mode [style*="color:#1f2937"],
body.dark-mode [style*="color: #1f2937"],
body.dark-mode [style*="color:#334155"],
body.dark-mode [style*="color: #334155"],
body.dark-mode [style*="color:#475569"],
body.dark-mode [style*="color: #475569"] {
  color: #dbe7f7 !important;
}

body.dark-mode [style*="background:#fff"],
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background:#ffffff"],
body.dark-mode [style*="background: #ffffff"],
body.dark-mode [style*="background-color:#fff"],
body.dark-mode [style*="background-color: #fff"],
body.dark-mode [style*="background-color:#ffffff"],
body.dark-mode [style*="background-color: #ffffff"] {
  background: linear-gradient(180deg, rgba(13, 33, 58, 0.94), rgba(10, 28, 50, 0.96)) !important;
  border-color: rgba(125, 211, 252, 0.24) !important;
}

body.dark-mode [style*="color:#22d3c5"],
body.dark-mode [style*="color: #22d3c5"],
body.dark-mode [style*="color:#16b8e8"],
body.dark-mode [style*="color: #16b8e8"] {
  color: #67e8f9 !important;
}

/* Legacy/generated "light sections" converted for dark mode */
body.dark-mode .ha-specs-section,
body.dark-mode .ha-features-section,
body.dark-mode .ha-team-section,
body.dark-mode .ha-benefits-section,
body.dark-mode .ha-section-light {
  background: linear-gradient(180deg, #0b1f35 0%, #0a1a2d 100%) !important;
}

body.dark-mode .ha-spec-card,
body.dark-mode .ha-feature-card,
body.dark-mode .ha-benefit-card,
body.dark-mode .ha-team-card,
body.dark-mode .ha-light-card {
  background: linear-gradient(180deg, rgba(16, 37, 61, 0.95), rgba(12, 31, 51, 0.96)) !important;
  border: 1px solid rgba(125, 211, 252, 0.24) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36) !important;
}

body.dark-mode .ha-spec-card:hover,
body.dark-mode .ha-feature-card:hover,
body.dark-mode .ha-benefit-card:hover,
body.dark-mode .ha-team-card:hover,
body.dark-mode .ha-light-card:hover {
  border-color: rgba(103, 232, 249, 0.45) !important;
  box-shadow: 0 14px 34px rgba(8, 145, 178, 0.26) !important;
}

body.dark-mode .ha-section-title-light,
body.dark-mode .ha-spec-body h3,
body.dark-mode .ha-spec-body h5,
body.dark-mode .ha-feature-card h3,
body.dark-mode .ha-feature-card h5,
body.dark-mode .ha-benefit-card h3,
body.dark-mode .ha-benefit-card h5,
body.dark-mode .ha-team-card h3,
body.dark-mode .ha-team-card h5,
body.dark-mode .ha-why-card h3,
body.dark-mode .ha-ds-step-card h3 {
  color: #f4f8ff !important;
}

body.dark-mode .ha-section-sub-light,
body.dark-mode .ha-spec-body p,
body.dark-mode .ha-feature-card p,
body.dark-mode .ha-benefit-card p,
body.dark-mode .ha-team-card p {
  color: #c7d9ee !important;
}


/* ================================================================
   LINUX-SHARED-HOSTING — Light Mode Overrides
   Hero (#ha-hero) intentionally stays dark always.
   All other sections switch to premium light in light mode.
   Dark mode → unchanged (everything dark as before).
   ================================================================ */

/* ── Pricing Section ────────────────────────────────────────────── */
body:not(.dark-mode) .ha-pricing-section {
  background: linear-gradient(160deg, #f0f7ff 0%, #f8fafc 40%, #f0fbf7 100%) !important;
}
body:not(.dark-mode) .ha-pricing-section::before,
body:not(.dark-mode) .ha-pricing-section::after {
  opacity: 0.35 !important;
}
body:not(.dark-mode) .ha-pricing-title {
  color: #0f172a !important;
}
body:not(.dark-mode) .ha-pricing-subtitle {
  color: #5d6b81 !important;
}
body:not(.dark-mode) .ha-pricing-eyebrow {
  background: linear-gradient(135deg,#0891b2,#6366f1) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Plan cards */
body:not(.dark-mode) .ha-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.09) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.07) !important;
}
body:not(.dark-mode) .ha-card:hover {
  border-color: rgba(8,145,178,.3) !important;
  box-shadow: 0 10px 32px rgba(8,145,178,.13) !important;
}
body:not(.dark-mode) .ha-card-popular {
  border-color: rgba(8,145,178,.45) !important;
  background: #ffffff !important;
  box-shadow: 0 8px 32px rgba(8,145,178,.15) !important;
}
body:not(.dark-mode) .ha-plan-label {
  color: #5d6b81 !important;
}
body:not(.dark-mode) .ha-price {
  color: #0f172a !important;
}
body:not(.dark-mode) .ha-price-period,
body:not(.dark-mode) .ha-price-note {
  color: #596c86 !important;
}
body:not(.dark-mode) .ha-features li {
  color: #475569 !important;
  border-color: rgba(0,0,0,.05) !important;
}
body:not(.dark-mode) .ha-plan-icon {
  background: rgba(8,145,178,.1) !important;
  border-color: rgba(8,145,178,.2) !important;
}
body:not(.dark-mode) .ha-plan-icon i {
  color: #0891b2 !important;
}
body:not(.dark-mode) .ha-icon-purple {
  background: rgba(124,58,237,.1) !important;
  border-color: rgba(124,58,237,.2) !important;
}
body:not(.dark-mode) .ha-icon-purple i {
  color: #7c3aed !important;
}
body:not(.dark-mode) .ha-btn-outline {
  border-color: rgba(8,145,178,.4) !important;
  color: #06748e !important;
  background: transparent !important;
}
body:not(.dark-mode) .ha-btn-outline:hover {
  background: rgba(8,145,178,.08) !important;
  color: #06748e !important;
}
body:not(.dark-mode) .ha-btn-outline-purple {
  border-color: rgba(124,58,237,.4) !important;
  color: #7c3aed !important;
}
body:not(.dark-mode) .ha-btn-outline-purple:hover {
  background: rgba(124,58,237,.06) !important;
}

/* Trust bar */
body:not(.dark-mode) .ha-trust-bar {
  background: rgba(8,145,178,.05) !important;
  border-color: rgba(8,145,178,.15) !important;
}
body:not(.dark-mode) .ha-trust-item {
  color: #475569 !important;
}
body:not(.dark-mode) .ha-trust-item i {
  color: #0891b2 !important;
}

/* ── VPS Pricing Rows — Light Mode ───────────────────────────────────── */
body:not(.dark-mode) .ha-vps-row {
  background: linear-gradient(135deg, #ffffff 0%, #f4f9ff 60%, #f8fffe 100%) !important;
  border-color: rgba(8,145,178,.22) !important;
  border-left-color: rgba(8,145,178,.55) !important;
  box-shadow: 0 2px 8px rgba(8,145,178,.06), 0 8px 28px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
body:not(.dark-mode) .ha-vps-row:hover {
  border-color: rgba(8,145,178,.45) !important;
  border-left-color: #0891b2 !important;
  box-shadow: 0 4px 16px rgba(8,145,178,.14), 0 16px 40px rgba(0,0,0,.1), 0 0 0 1px rgba(8,145,178,.12), inset 0 1px 0 rgba(255,255,255,.98) !important;
}
body:not(.dark-mode) .ha-vps-row.featured {
  background: linear-gradient(135deg, #e0f4ff 0%, #e8f9f4 50%, #edfcf7 100%) !important;
  border-color: rgba(8,145,178,.5) !important;
  border-left-color: #0891b2 !important;
  box-shadow: 0 4px 20px rgba(8,145,178,.14), 0 16px 48px rgba(8,145,178,.12), 0 0 0 1.5px rgba(8,145,178,.22) !important;
}
body:not(.dark-mode) .ha-row-num {
  color: rgba(15,23,42,.25) !important;
}
body:not(.dark-mode) .ha-vps-row.featured .ha-row-num {
  color: rgba(8,145,178,.6) !important;
}
body:not(.dark-mode) .ha-plan-chip {
  background: linear-gradient(135deg, rgba(8,145,178,.09) 0%, rgba(8,145,178,.04) 100%) !important;
  border-color: rgba(8,145,178,.22) !important;
  color: #0c2340 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 3px rgba(8,145,178,.08) !important;
}
body:not(.dark-mode) .ha-plan-chip i {
  color: #0891b2 !important;
}
body:not(.dark-mode) .ha-vps-row.featured .ha-plan-chip {
  background: linear-gradient(135deg, rgba(8,145,178,.18) 0%, rgba(5,150,105,.1) 100%) !important;
  border-color: rgba(8,145,178,.38) !important;
  color: #0c2340 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 6px rgba(8,145,178,.12) !important;
}
body:not(.dark-mode) .ha-vps-spec {
  background: rgba(8,145,178,.06) !important;
  border-color: rgba(148,176,214,.3) !important;
  color: #334155 !important;
}
body:not(.dark-mode) .ha-spec-cpu i { color: #0891b2 !important; }
body:not(.dark-mode) .ha-spec-ram i { color: #7c3aed !important; }
body:not(.dark-mode) .ha-spec-ssd i { color: #059669 !important; }
body:not(.dark-mode) .ha-spec-bw  i { color: #d97706 !important; }
body:not(.dark-mode) .ha-spec-feat i { color: #db2777 !important; }
body:not(.dark-mode) .ha-vps-price strong {
  background: linear-gradient(135deg, #0f2746, #0891b2) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
body:not(.dark-mode) .ha-vps-row.featured .ha-vps-price strong {
  background: linear-gradient(135deg, #0891b2, #059669) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
body:not(.dark-mode) .ha-vps-price span {
  color: #5d6b81 !important;
}
body:not(.dark-mode) .ha-btn-vps-outline {
  border-color: rgba(8,145,178,.4) !important;
  color: #06748e !important;
}
body:not(.dark-mode) .ha-btn-vps-outline:hover {
  background: rgba(8,145,178,.08) !important;
  color: #06748e !important;
}
body:not(.dark-mode) .ha-btn-vps-outline-green {
  border-color: rgba(5,150,105,.4) !important;
  color: #047a55 !important;
}
body:not(.dark-mode) .ha-btn-vps-outline-green:hover {
  background: rgba(5,150,105,.08) !important;
  color: #047a55 !important;
}
body:not(.dark-mode) .ha-pricing-note {
  color: #475569 !important;
}
body:not(.dark-mode) .ha-trust-bar {
  background: rgba(8,145,178,.05) !important;
  border-color: rgba(8,145,178,.15) !important;
}
body:not(.dark-mode) .ha-trust-item {
  color: #475569 !important;
}
body:not(.dark-mode) .ha-trust-item i {
  color: #0891b2 !important;
}

/* ── VPS Pricing — Dark Mode explicit fixes ──────────────────────────── */
body.dark-mode .ha-vps-spec {
  background: rgba(15,23,42,.55) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.85) !important;
}
body.dark-mode .ha-vps-price span {
  color: rgba(255,255,255,.5) !important;
}
body.dark-mode .ha-plan-chip {
  color: #e2e8f0 !important;
}
body.dark-mode .ha-pricing-note {
  color: rgba(255,255,255,.55) !important;
}

/* ── VPS Spec badge tints — light mode overrides ─────────────────────── */
body:not(.dark-mode) .ha-spec-cpu { background: rgba(8,145,178,.08) !important; border-color: rgba(8,145,178,.2) !important; }
body:not(.dark-mode) .ha-spec-ram { background: rgba(124,58,237,.07) !important; border-color: rgba(124,58,237,.18) !important; }
body:not(.dark-mode) .ha-spec-ssd { background: rgba(5,150,105,.07) !important; border-color: rgba(5,150,105,.18) !important; }
body:not(.dark-mode) .ha-spec-bw  { background: rgba(217,119,6,.07) !important;  border-color: rgba(217,119,6,.18) !important; }
body:not(.dark-mode) .ha-spec-feat { background: rgba(219,39,119,.07) !important; border-color: rgba(219,39,119,.18) !important; }

/* ── VPS Popular Badge — light mode stays same (gradient looks fine) ── */
body:not(.dark-mode) .ha-vps-popular-badge {
  box-shadow: 0 6px 20px rgba(8,145,178,.42), 0 2px 6px rgba(8,145,178,.25) !important;
}
body:not(.dark-mode) .ha-vps-row.featured:hover {
  box-shadow: 0 6px 28px rgba(8,145,178,.2), 0 20px 56px rgba(8,145,178,.14), 0 0 0 2px rgba(8,145,178,.3) !important;
}

/* ── VPS nth-child left border — light mode ──────────────────────────── */
body:not(.dark-mode) .ha-vps-row:nth-child(1) { border-left-color: rgba(8,145,178,.55) !important; }
body:not(.dark-mode) .ha-vps-row:nth-child(2) { border-left-color: #0891b2 !important; }
body:not(.dark-mode) .ha-vps-row:nth-child(3) { border-left-color: rgba(99,102,241,.6) !important; }
body:not(.dark-mode) .ha-vps-row:nth-child(4) { border-left-color: rgba(5,150,105,.6) !important; }
body:not(.dark-mode) .ha-vps-row:nth-child(5) { border-left-color: rgba(217,119,6,.6) !important; }

/* ── How It Works — Dark Mode ────────────────────────────────────────── */
body.dark-mode .ha-hiw-section {
  background: linear-gradient(135deg, #0b1f35 0%, #0a1a2d 50%, #0d1528 100%) !important;
}
body.dark-mode .ha-hiw-step h4 {
  color: #f1f5f9 !important;
}
body.dark-mode .ha-hiw-step p {
  color: rgba(255,255,255,.55) !important;
}
body.dark-mode .ha-hiw-connector {
  background: linear-gradient(90deg, rgba(34,211,238,.4), rgba(16,185,129,.4)) !important;
}

/* ── VPS Testimonials — Light Mode ───────────────────────────────────── */
body:not(.dark-mode) .ha-vps-testi-section {
  background: linear-gradient(135deg, #0f2746 0%, #0a1f38 50%, #0f2746 100%) !important;
}

/* ── VPS Why Section — Light Mode ───────────────────────────────────── */
body:not(.dark-mode) .ha-why-section {
  background: linear-gradient(135deg, #0f2746 0%, #0c1d35 100%) !important;
}
body:not(.dark-mode) .ha-why-card {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.1) !important;
}
body:not(.dark-mode) .ha-stat-num {
  background: linear-gradient(135deg, #22d3ee, #10b981) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ── VPS CTA section — Dark Mode ─────────────────────────────────────── */
body.dark-mode .ha-cta-section-vps {
  background: linear-gradient(135deg, #065f79 0%, #064e3b 100%) !important;
}

/* Who is this for cards */
body:not(.dark-mode) .ha-who-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.08) !important;
}
body:not(.dark-mode) .ha-who-card:hover {
  border-color: rgba(8,145,178,.25) !important;
  background: #ffffff !important;
}
body:not(.dark-mode) .ha-who-card-popular {
  border-color: rgba(8,145,178,.3) !important;
  background: rgba(8,145,178,.03) !important;
}
body:not(.dark-mode) .ha-who-plan {
  color: #596c86 !important;
}
body:not(.dark-mode) .ha-who-title {
  color: #0f172a !important;
}
body:not(.dark-mode) .ha-who-desc {
  color: #5d6b81 !important;
}

/* ── Plan Comparison Table ──────────────────────────────────────── */
body:not(.dark-mode) .ha-compare-section {
  background: #f1f5f9 !important;
}
body:not(.dark-mode) .ha-compare-section-title {
  color: #0f172a !important;
}
body:not(.dark-mode) .ha-compare-section-sub {
  color: #5d6b81 !important;
}
body:not(.dark-mode) .ha-compare-wrap {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.09) !important;
}
body:not(.dark-mode) .ha-compare-header {
  background: rgba(241,245,249,.98) !important;
  border-bottom-color: rgba(0,0,0,.08) !important;
  backdrop-filter: blur(10px) !important;
}
body:not(.dark-mode) .ha-compare-head-cell {
  color: #5d6b81 !important;
}
body:not(.dark-mode) .ha-compare-head-cell.label {
  color: #596c86 !important;
}
body:not(.dark-mode) .ha-compare-head-cell.popular {
  background: rgba(8,145,178,.06) !important;
  border-color: rgba(8,145,178,.2) !important;
}
body:not(.dark-mode) .ha-compare-head-name {
  color: #0f172a !important;
}
body:not(.dark-mode) .ha-compare-head-name.cyan {
  color: #06748e !important;
}
body:not(.dark-mode) .ha-compare-head-name.purple {
  color: #7c3aed !important;
}
body:not(.dark-mode) .ha-compare-head-price {
  color: #596c86 !important;
}
body:not(.dark-mode) .ha-compare-row {
  border-bottom-color: rgba(0,0,0,.05) !important;
}
body:not(.dark-mode) .ha-compare-row:hover {
  background: rgba(8,145,178,.03) !important;
}
body:not(.dark-mode) .ha-compare-cell {
  color: #334155 !important;
  border-left-color: rgba(0,0,0,.04) !important;
}
body:not(.dark-mode) .ha-compare-cell.label {
  color: #475569 !important;
}
body:not(.dark-mode) .ha-compare-cell.label i {
  color: rgba(8,145,178,.6) !important;
}
body:not(.dark-mode) .ha-compare-cell.popular {
  background: rgba(8,145,178,.04) !important;
  border-left-color: rgba(8,145,178,.15) !important;
  border-right-color: rgba(8,145,178,.15) !important;
  color: #0f172a !important;
}
body:not(.dark-mode) .ha-compare-check {
  color: #059669 !important;
}
body:not(.dark-mode) .ha-compare-cross {
  color: #cbd5e1 !important;
}
body:not(.dark-mode) .ha-compare-badge.cyan {
  background: rgba(8,145,178,.08) !important;
  color: #06748e !important;
  border-color: rgba(8,145,178,.2) !important;
}
body:not(.dark-mode) .ha-compare-badge.green {
  background: rgba(5,150,105,.08) !important;
  color: #047a55 !important;
  border-color: rgba(5,150,105,.2) !important;
}
body:not(.dark-mode) .ha-compare-badge.purple {
  background: rgba(124,58,237,.08) !important;
  color: #7c3aed !important;
  border-color: rgba(124,58,237,.2) !important;
}

/* ── Competitor VS Section ──────────────────────────────────────── */
body:not(.dark-mode) .ha-vs-section {
  background: #f8fafc !important;
}
body:not(.dark-mode) .ha-vs-section::before {
  opacity: 0.2 !important;
}
body:not(.dark-mode) .ha-vs-section h3 {
  color: #0f172a !important;
}
body:not(.dark-mode) .ha-vs-section p {
  color: #5d6b81 !important;
}
body:not(.dark-mode) .ha-vs-wrap {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.09) !important;
}
body:not(.dark-mode) .ha-vs-header {
  background: #dde3ec !important;
  border-bottom: 3px solid #b6c2d4 !important;
  backdrop-filter: blur(10px) !important;
}
body:not(.dark-mode) .ha-vs-head {
  color: #374151 !important;
  border-bottom: 3px solid #b6c2d4 !important;
}
body:not(.dark-mode) .ha-vs-head.ours {
  background: rgba(8,145,178,.1) !important;
  border-left-color: rgba(8,145,178,.35) !important;
  border-right-color: rgba(8,145,178,.35) !important;
  border-bottom: 3px solid #0891b2 !important;
}
body:not(.dark-mode) .ha-vs-head-name {
  color: #0f172a !important;
}
body:not(.dark-mode) .ha-vs-head-name.cyan {
  color: #06748e !important;
}
body:not(.dark-mode) .ha-vs-head-sub {
  color: #596c86 !important;
}
body:not(.dark-mode) .ha-vs-row {
  border-bottom-color: rgba(0,0,0,.05) !important;
}
body:not(.dark-mode) .ha-vs-row:hover {
  background: rgba(8,145,178,.02) !important;
}
body:not(.dark-mode) .ha-vs-cell {
  color: #5d6b81 !important;
  border-left-color: rgba(0,0,0,.04) !important;
}
body:not(.dark-mode) .ha-vs-cell:first-child {
  color: #475569 !important;
}
body:not(.dark-mode) .ha-vs-cell i {
  color: rgba(8,145,178,.55) !important;
}
body:not(.dark-mode) .ha-vs-cell.ours {
  background: rgba(8,145,178,.04) !important;
  border-color: rgba(8,145,178,.15) !important;
  color: #0f172a !important;
}
body:not(.dark-mode) .ha-vs-val.grey {
  color: #596c86 !important;
}
body:not(.dark-mode) .ha-vs-check {
  color: #059669 !important;
}
body:not(.dark-mode) .ha-vs-cross {
  color: #cbd5e1 !important;
}
body:not(.dark-mode) .ha-vs-badge {
  background: rgba(8,145,178,.08) !important;
  color: #06748e !important;
  border-color: rgba(8,145,178,.2) !important;
}
body:not(.dark-mode) .ha-vs-winner {
  background: rgba(5,150,105,.08) !important;
  border-color: rgba(5,150,105,.25) !important;
  color: #047a55 !important;
}

/* ── Technical Specs Section ────────────────────────────────────── */
body:not(.dark-mode) .ha-specs-section {
  background: #f1f5f9 !important;
}
body:not(.dark-mode) .ha-section-eyebrow,
body:not(.dark-mode) .ha-eyebrow-cyan {
  background: linear-gradient(135deg,#0891b2,#6366f1) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
body:not(.dark-mode) .ha-section-title-light {
  color: #0f172a !important;
}
body:not(.dark-mode) .ha-section-sub-light {
  color: #5d6b81 !important;
}
body:not(.dark-mode) .ha-spec-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}
body:not(.dark-mode) .ha-spec-card:hover {
  border-color: rgba(8,145,178,.28) !important;
  box-shadow: 0 8px 28px rgba(8,145,178,.12) !important;
}
body:not(.dark-mode) .ha-spec-icon {
  background: rgba(8,145,178,.08) !important;
  border-color: rgba(8,145,178,.18) !important;
}
body:not(.dark-mode) .ha-spec-icon i {
  color: #0891b2 !important;
}
body:not(.dark-mode) .ha-spec-body h3,
body:not(.dark-mode) .ha-spec-body h5 {
  color: #0f172a !important;
}
body:not(.dark-mode) .ha-spec-body p {
  color: #5d6b81 !important;
}

/* ── CTA Section ────────────────────────────────────────────────── */
body:not(.dark-mode) .ha-cta-section {
  background: linear-gradient(135deg,#0f172a 0%,#1e3a5f 60%,#0e7490 100%) !important;
}

/* ================================================================
   LIGHT MODE — Premium Polish & Micro-interactions
   ================================================================ */

/* ── Pricing cards — hover lift ─────────────────────────────────── */
body:not(.dark-mode) .ha-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
  position: relative !important;
  overflow: visible !important;
}
body:not(.dark-mode) .ha-card::before {
  content: none;
}
body:not(.dark-mode) .ha-card:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 20px 48px rgba(8,145,178,.16), 0 4px 16px rgba(0,0,0,.07) !important;
  border-color: rgba(8,145,178,.4) !important;
}

/* Popular card — no pseudo bar, just glow ring */
body:not(.dark-mode) .ha-card-popular::before {
  content: none !important;
}
body:not(.dark-mode) .ha-card-popular {
  box-shadow: 0 8px 32px rgba(8,145,178,.18), 0 0 0 1px rgba(8,145,178,.2) !important;
}
body:not(.dark-mode) .ha-card-popular:hover {
  box-shadow: 0 20px 52px rgba(8,145,178,.22), 0 0 0 2px rgba(8,145,178,.3) !important;
}

/* Popular badge */
body:not(.dark-mode) .ha-badge-popular {
  background: linear-gradient(135deg,#077f9c,#5c5ff0) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  padding: 4px 14px !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 12px rgba(8,145,178,.3) !important;
}

/* ── Compare table — row left-bar on hover ──────────────────────── */
body:not(.dark-mode) .ha-compare-row {
  transition: background .18s ease !important;
  position: relative !important;
}
body:not(.dark-mode) .ha-compare-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(180deg,#0891b2,#6366f1);
  transition: width .2s ease;
  border-radius: 0 2px 2px 0;
}
body:not(.dark-mode) .ha-compare-row:hover::before {
  width: 3px;
}
body:not(.dark-mode) .ha-compare-row:hover {
  background: rgba(8,145,178,.04) !important;
  padding-left: 2px;
}

/* ── VS table — same row effect ─────────────────────────────────── */
body:not(.dark-mode) .ha-vs-row {
  transition: background .18s ease !important;
  position: relative !important;
}
body:not(.dark-mode) .ha-vs-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: #0891b2;
  transition: width .2s ease;
}
body:not(.dark-mode) .ha-vs-row:hover::before {
  width: 3px;
}

/* ── Spec cards — icon scale + card lift ────────────────────────── */
body:not(.dark-mode) .ha-spec-card {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
body:not(.dark-mode) .ha-spec-card:hover {
  transform: translateY(-5px) !important;
}
body:not(.dark-mode) .ha-spec-icon {
  transition: transform .22s ease, background .22s ease !important;
}
body:not(.dark-mode) .ha-spec-card:hover .ha-spec-icon {
  transform: scale(1.12) rotate(-4deg) !important;
  background: rgba(8,145,178,.15) !important;
}

/* ── Who-for cards — hover lift ─────────────────────────────────── */
body:not(.dark-mode) .ha-who-card {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
body:not(.dark-mode) .ha-who-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(8,145,178,.12) !important;
}
body:not(.dark-mode) .ha-who-icon {
  transition: transform .22s ease !important;
}
body:not(.dark-mode) .ha-who-card:hover .ha-who-icon {
  transform: scale(1.1) !important;
}

/* ── CTA button pulse ────────────────────────────────────────────── */
body:not(.dark-mode) .ha-cta-btn,
body:not(.dark-mode) .ha-btn-solid {
  position: relative !important;
  overflow: hidden !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
body:not(.dark-mode) .ha-cta-btn:hover,
body:not(.dark-mode) .ha-btn-solid:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(6,182,212,.4) !important;
}
body:not(.dark-mode) .ha-cta-btn::after,
body:not(.dark-mode) .ha-btn-solid::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.15);
  opacity: 0;
  transition: opacity .2s ease;
}
body:not(.dark-mode) .ha-cta-btn:hover::after,
body:not(.dark-mode) .ha-btn-solid:hover::after {
  opacity: 1;
}

/* ── Sticky compare header shadow on scroll ─────────────────────── */
body:not(.dark-mode) .ha-compare-header,
body:not(.dark-mode) .ha-vs-header {
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}

/* ── Section transition — subtle top gradient divider ───────────── */
body:not(.dark-mode) .ha-compare-section::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg,transparent,rgba(8,145,178,.25),transparent);
}
body:not(.dark-mode) .ha-vs-section::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg,transparent,rgba(8,145,178,.2),transparent);
  position: static !important;
  width: 100% !important;
  opacity: 1 !important;
}

/* ── Badge popular cut fix ──────────────────────────────────────── */
body:not(.dark-mode) .ha-pricing-section {
  overflow: visible !important;
}
/* But keep the decorative orbs clipped — use clip on the pseudo-elements container */
body:not(.dark-mode) .ha-pricing-section > .container {
  overflow: visible !important;
}
/* Card column needs padding-top to show the badge that bleeds above */
body:not(.dark-mode) .ha-card-popular {
  margin-top: 14px !important;
}

/* ── Mobile: pricing cards padding fix ──────────────────────────── */
@media(max-width:575px) {
  body:not(.dark-mode) .ha-card {
    padding: 32px 20px 24px !important;
  }
  body:not(.dark-mode) .ha-card-popular {
    margin-top: 20px !important;
  }
  .ha-pricing-title { font-size: 1.7rem !important; }
  .ha-pricing-section { padding: 60px 0 !important; }
}

/* ================================================================
   LIGHT MODE — Premium Pricing Card Upgrade
   ================================================================ */

/* ── Card base — subtle gradient + depth ────────────────────────── */
body:not(.dark-mode) .ha-card {
  background: linear-gradient(145deg,#ffffff 0%,#f6faff 100%) !important;
  border: 1px solid rgba(8,145,178,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 4px 20px rgba(0,0,0,.06),
    0 1px 4px rgba(0,0,0,.04) !important;
}
body:not(.dark-mode) .ha-card:hover {
  background: linear-gradient(145deg,#ffffff 0%,#eef6ff 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 20px 48px rgba(8,145,178,.14),
    0 4px 12px rgba(0,0,0,.06) !important;
}

/* ── Popular card — premium distinction ─────────────────────────── */
body:not(.dark-mode) .ha-card-popular {
  background: linear-gradient(145deg,#ffffff 0%,#e8f4ff 60%,#edf0ff 100%) !important;
  border: 1.5px solid rgba(8,145,178,.35) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 8px 32px rgba(8,145,178,.18),
    0 2px 8px rgba(0,0,0,.06),
    0 0 0 4px rgba(8,145,178,.06) !important;
}
body:not(.dark-mode) .ha-card-popular:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 24px 56px rgba(8,145,178,.22),
    0 4px 12px rgba(0,0,0,.07),
    0 0 0 4px rgba(8,145,178,.10) !important;
}

/* ── Plan icon ──────────────────────────────────────────────────── */
body:not(.dark-mode) .ha-icon-cyan {
  background: linear-gradient(135deg,rgba(8,145,178,.12),rgba(8,145,178,.06)) !important;
  border: 1px solid rgba(8,145,178,.2) !important;
  color: #0891b2 !important;
  box-shadow: 0 4px 12px rgba(8,145,178,.1) !important;
}
body:not(.dark-mode) .ha-icon-cyan-solid {
  background: linear-gradient(135deg,#077f9c,#0e7490) !important;
  box-shadow: 0 8px 20px rgba(8,145,178,.35) !important;
  color: #ffffff !important;
}
body:not(.dark-mode) .ha-icon-cyan-solid i {
  color: #ffffff !important;
}
body:not(.dark-mode) .ha-icon-purple {
  background: linear-gradient(135deg,rgba(124,58,237,.12),rgba(124,58,237,.06)) !important;
  border: 1px solid rgba(124,58,237,.2) !important;
  color: #7c3aed !important;
  box-shadow: 0 4px 12px rgba(124,58,237,.1) !important;
}

/* ── Plan label — pill style ────────────────────────────────────── */
body:not(.dark-mode) .ha-plan-label {
  display: inline-block !important;
  background: rgba(8,145,178,.07) !important;
  border: 1px solid rgba(8,145,178,.14) !important;
  border-radius: 20px !important;
  padding: 3px 12px !important;
  color: #06748e !important;
  font-size: 10.5px !important;
  letter-spacing: 2px !important;
  margin-bottom: 12px !important;
}
body:not(.dark-mode) .ha-icon-purple ~ div .ha-plan-label,
body:not(.dark-mode) .ha-card:has(.ha-icon-purple) .ha-plan-label {
  background: rgba(124,58,237,.07) !important;
  border-color: rgba(124,58,237,.14) !important;
  color: #7c3aed !important;
}

/* ── Price ──────────────────────────────────────────────────────── */
body:not(.dark-mode) .ha-price {
  color: #0f172a !important;
  font-size: 3rem !important;
  letter-spacing: -1.5px !important;
}
body:not(.dark-mode) .ha-card-popular .ha-price {
  background: linear-gradient(135deg,#0891b2,#6366f1) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
body:not(.dark-mode) .ha-price-period {
  color: #596c86 !important;
  font-size: .85rem !important;
}
body:not(.dark-mode) .ha-price-note {
  color: #596c86 !important;
  font-size: 12px !important;
}

/* ── Feature list ───────────────────────────────────────────────── */
body:not(.dark-mode) .ha-features {
  border-top-color: rgba(0,0,0,.07) !important;
}
body:not(.dark-mode) .ha-features li {
  color: #374151 !important;
  border-bottom-color: rgba(0,0,0,.05) !important;
  font-size: 13px !important;
}
body:not(.dark-mode) .ha-features li i.fa-check {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  background: rgba(8,145,178,.1) !important;
  border-radius: 50% !important;
  color: #0891b2 !important;
  font-size: 9px !important;
  flex-shrink: 0 !important;
}
body:not(.dark-mode) .ha-icon-purple ~ ul li i.fa-check,
body:not(.dark-mode) .ha-card:has(.ha-icon-purple) .ha-features li i.fa-check {
  background: rgba(124,58,237,.1) !important;
  color: #7c3aed !important;
}
body:not(.dark-mode) .ha-features-popular li i.fa-check {
  background: rgba(8,145,178,.15) !important;
}

/* ── Buttons ────────────────────────────────────────────────────── */
body:not(.dark-mode) .ha-btn-outline {
  background: rgba(8,145,178,.04) !important;
  border: 1.5px solid rgba(8,145,178,.25) !important;
  color: #06748e !important;
  border-radius: 12px !important;
  padding: 13px !important;
  font-weight: 600 !important;
  transition: all .2s ease !important;
}
body:not(.dark-mode) .ha-btn-outline:hover {
  background: rgba(8,145,178,.1) !important;
  border-color: rgba(8,145,178,.5) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(8,145,178,.15) !important;
  color: #06748e !important;
}
body:not(.dark-mode) .ha-btn-outline-purple {
  background: rgba(124,58,237,.04) !important;
  border-color: rgba(124,58,237,.25) !important;
  color: #7c3aed !important;
}
body:not(.dark-mode) .ha-btn-outline-purple:hover {
  background: rgba(124,58,237,.1) !important;
  border-color: rgba(124,58,237,.5) !important;
  box-shadow: 0 6px 16px rgba(124,58,237,.15) !important;
  color: #7c3aed !important;
}
body:not(.dark-mode) .ha-btn-solid {
  background: linear-gradient(135deg,#0891b2,#0e7490) !important;
  box-shadow: 0 6px 20px rgba(8,145,178,.35) !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}
body:not(.dark-mode) .ha-btn-solid:hover {
  background: linear-gradient(135deg,#0e7490,#077f9c) !important;
  box-shadow: 0 10px 28px rgba(8,145,178,.45) !important;
  transform: translateY(-2px) !important;
  color: #fff !important;
}

/* ── Plan Comparison Table: Ultimate Column ─────────────────────────── */

/* Purple badges in data rows — visible on white */
body:not(.dark-mode) .ha-compare-badge.purple {
  background: rgba(109,40,217,.12) !important;
  color: #5b21b6 !important;
  border-color: rgba(109,40,217,.3) !important;
  font-weight: 700 !important;
}

/* "Ultimate" head name — display:block so VIP tag stays above it (like POPULAR→Standard) */
body:not(.dark-mode) .ha-compare-head-cell.ultimate .ha-compare-head-name,
body:not(.dark-mode) .ha-compare-head-name.purple {
  display: block !important;
  color: #6d28d9 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  margin-bottom: 3px !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

/* "$552/mo" price text — was white (invisible on light bg) */
body:not(.dark-mode) .ha-compare-head-cell.ultimate .ha-compare-head-price,
body:not(.dark-mode) .ha-compare-head-price {
  color: #5d6b81 !important;
  display: block !important;
}

/* Ultimate data cells: faint purple tint + deep text */
body:not(.dark-mode) .ha-compare-cell.ultimate,
body:not(.dark-mode) .ha-compare-row .ha-compare-cell:last-child {
  background: rgba(109,40,217,.025) !important;
  border-left-color: rgba(109,40,217,.1) !important;
  color: #1e1b4b !important;
}

/* Configuration label column icons */
body:not(.dark-mode) .ha-compare-cell.label i {
  color: #0891b2 !important;
  opacity: 1 !important;
}

/* ── VS Competitor Table: header names have inline white color ───────── */
/* Override inline style="color:rgba(255,255,255,.6)" on competitor heads */
body:not(.dark-mode) .ha-vs-section .ha-vs-head .ha-vs-head-name {
  color: #0f172a !important;
}
body:not(.dark-mode) .ha-vs-section .ha-vs-head.ours .ha-vs-head-name {
  color: #06748e !important;
}
body:not(.dark-mode) .ha-vs-section .ha-vs-head .ha-vs-head-sub {
  color: #5d6b81 !important;
}

/* VS table header — shadow below header for extra depth */
body:not(.dark-mode) .ha-vs-header {
  box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
}

/* FEATURE label header cell — darker bg so it's clearly the header */
body:not(.dark-mode) .ha-vs-head.label {
  background: #e2e8f0 !important;
  color: #475569 !important;
  font-weight: 700 !important;
  border-right: 2px solid rgba(0,0,0,.1) !important;
}

/* FEATURE data cells — white bg (same as other cells, no merge with header) */
body:not(.dark-mode) .ha-vs-cell:first-child {
  background: #ffffff !important;
  color: #374151 !important;
  border-right: 1px solid rgba(0,0,0,.07) !important;
  font-family: inherit !important;
}
body:not(.dark-mode) .ha-vs-cell:first-child i {
  color: #0891b2 !important;
  opacity: 1 !important;
}

/* ── VS Table: gap between header and first data row (dark + light both) ── */
.ha-vs-header + .ha-vs-row {
  margin-top: 8px !important;
}
.ha-vs-row .ha-vs-cell {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* ── Compare Table: gap between header and first data row (dark + light) ── */
.ha-compare-header + .ha-compare-row {
  margin-top: 8px !important;
}
.ha-compare-row .ha-compare-cell {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* ── Configuration Table: Ultimate VIP Column ──────────────────────── */



/* Light mode: VIP header cell — soft purple gradient, thin side borders */
body:not(.dark-mode) .ha-compare-head-cell.ultimate {
  background: linear-gradient(160deg,rgba(124,58,237,.07) 0%,rgba(167,139,250,.04) 100%) !important;
  border-left: 1px solid rgba(124,58,237,.2) !important;
  border-right: 1px solid rgba(124,58,237,.2) !important;
  border-top: 3px solid #7c3aed !important;
  box-shadow: none !important;
}

/* Light mode: Ultimate data cells — matching subtle purple wash */
body:not(.dark-mode) .ha-compare-row .ha-compare-cell:last-child {
  background: rgba(124,58,237,.025) !important;
  border-left-color: rgba(124,58,237,.1) !important;
}

/* ── Dark mode: Ultimate column — force remove any background/border box ── */
body.dark-mode .ha-compare-head-cell.ultimate {
  background: transparent !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  box-shadow: none !important;
}
body.dark-mode .ha-compare-head-cell.ultimate .ha-compare-head-name {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: #a78bfa !important;
}

/* ── Specification section heading — light mode ── */
body:not(.dark-mode) .ha-compare-section {
  background: linear-gradient(135deg,#f0f4ff 0%,#f8f5ff 50%,#f0f4ff 100%) !important;
}
body:not(.dark-mode) .ha-compare-eyebrow {
  background: linear-gradient(135deg,rgba(8,145,178,.1),rgba(124,58,237,.1)) !important;
  border-color: rgba(8,145,178,.3) !important;
  color: #06748e !important;
}
body:not(.dark-mode) .ha-compare-section-title {
  background: linear-gradient(135deg,#0f172a 20%,#7c3aed 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
body:not(.dark-mode) .ha-compare-section-sub {
  color: #5d6b81 !important;
}
body:not(.dark-mode) .ha-compare-title-line {
  background: linear-gradient(90deg,#0891b2,#7c3aed) !important;
}

/* ── SEO Content Block — light mode override ── */
body:not(.dark-mode) .ha-seo-block {
  background: linear-gradient(135deg,#f0f4ff 0%,#f5f0ff 60%,#f0f4ff 100%) !important;
}
body:not(.dark-mode) .ha-seo-block::before {
  background: radial-gradient(circle,rgba(8,145,178,.07) 0%,transparent 70%) !important;
}
body:not(.dark-mode) .ha-seo-block::after {
  background: radial-gradient(circle,rgba(124,58,237,.06) 0%,transparent 70%) !important;
}
body:not(.dark-mode) .ha-seo-block-title {
  background: linear-gradient(135deg,#0f172a 20%,#7c3aed 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
body:not(.dark-mode) .ha-seo-block-eyebrow {
  background: linear-gradient(135deg,rgba(8,145,178,.1),rgba(124,58,237,.1)) !important;
  border-color: rgba(8,145,178,.3) !important;
  color: #06748e !important;
}
body:not(.dark-mode) .ha-seo-block-lead {
  color: #5d6b81 !important;
}
body:not(.dark-mode) .ha-seo-col-card {
  background: rgba(255,255,255,.85) !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
body:not(.dark-mode) .ha-seo-col-card:hover {
  background: #fff !important;
  border-color: rgba(8,145,178,.25) !important;
}
body:not(.dark-mode) .ha-seo-col-h3 {
  color: #0f172a !important;
}
body:not(.dark-mode) .ha-seo-col-p {
  color: #475569 !important;
}
body:not(.dark-mode) .ha-seo-col-list li {
  color: #374151 !important;
  border-bottom-color: rgba(0,0,0,.06) !important;
}
body:not(.dark-mode) .ha-seo-col-list li i {
  color: #0891b2 !important;
}
body:not(.dark-mode) .ha-seo-col-card.purple-card .ha-seo-col-list li i { color: #7c3aed !important; }
body:not(.dark-mode) .ha-seo-col-card.green-card .ha-seo-col-list li i { color: #059669 !important; }
body:not(.dark-mode) .ha-seo-col-card.purple-card .ha-seo-col-icon { color: #7c3aed !important; }
body:not(.dark-mode) .ha-seo-col-card.green-card .ha-seo-col-icon { color: #059669 !important; }
body:not(.dark-mode) .ha-seo-related {
  border-top-color: rgba(0,0,0,.1) !important;
}
body:not(.dark-mode) .ha-seo-related-label {
  color: #596c86 !important;
}
body:not(.dark-mode) .ha-seo-related-link {
  background: rgba(255,255,255,.9) !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #374151 !important;
}
body:not(.dark-mode) .ha-seo-related-link:hover {
  background: #fff !important;
  border-color: rgba(8,145,178,.35) !important;
  color: #06748e !important;
}

/* ── SEO Compare Block — dark mode (premium) ── */
body.dark-mode .ha-seo-cb {
  background: linear-gradient(160deg,#070e1a 0%,#0b1525 50%,#07101e 100%) !important;
  border-top-color: rgba(255,255,255,.06) !important;
}
body.dark-mode .ha-seo-cb::before {
  background: radial-gradient(circle,rgba(6,182,212,.07) 0%,transparent 65%) !important;
}
body.dark-mode .ha-seo-cb::after {
  background: radial-gradient(circle,rgba(139,92,246,.06) 0%,transparent 65%) !important;
}
body.dark-mode .ha-seo-cb-eyebrow {
  background: linear-gradient(135deg,rgba(6,182,212,.14),rgba(139,92,246,.1)) !important;
  border-color: rgba(6,182,212,.3) !important;
  color: #06b6d4 !important;
}
body.dark-mode .ha-seo-cb-title {
  color: #f1f5f9 !important;
}
body.dark-mode .ha-seo-cb-lead {
  color: rgba(255,255,255,.48) !important;
}
body.dark-mode .ha-seo-compare-col {
  background: rgba(255,255,255,.028) !important;
  border-color: rgba(255,255,255,.08) !important;
  border-top-color: rgba(255,255,255,.08) !important;
}
body.dark-mode .ha-seo-compare-col:hover {
  box-shadow: 0 8px 36px rgba(0,0,0,.4) !important;
}
body.dark-mode .ha-seo-compare-col.winner {
  background: rgba(6,182,212,.07) !important;
  border-color: rgba(6,182,212,.28) !important;
  border-top: 3px solid #06b6d4 !important;
  box-shadow: 0 6px 32px rgba(6,182,212,.12) !important;
}
body.dark-mode .ha-seo-compare-col.winner:hover {
  box-shadow: 0 12px 44px rgba(6,182,212,.2) !important;
}
body.dark-mode .ha-seo-compare-head {
  border-bottom-color: rgba(255,255,255,.07) !important;
}
body.dark-mode .ha-seo-compare-head-name {
  color: #e2e8f0 !important;
}
body.dark-mode .ha-seo-win-tag {
  box-shadow: 0 2px 12px rgba(6,182,212,.4) !important;
}
body.dark-mode .ha-seo-compare-list li {
  border-bottom-color: rgba(255,255,255,.05) !important;
}
body.dark-mode .ha-seo-compare-list li.yes {
  color: #a7f3d0 !important;
  font-weight: 500 !important;
}
body.dark-mode .ha-seo-compare-list li.yes i {
  color: #34d399 !important;
}
body.dark-mode .ha-seo-compare-list li.no {
  color: rgba(255,255,255,.33) !important;
}
body.dark-mode .ha-seo-compare-list li.no i {
  color: rgba(255,255,255,.2) !important;
}
body.dark-mode .ha-seo-compare-fit.linux-fit {
  background: rgba(52,211,153,.09) !important;
  border-color: rgba(52,211,153,.22) !important;
  color: #6ee7b7 !important;
}
body.dark-mode .ha-seo-compare-fit.win-fit {
  background: rgba(255,255,255,.035) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.35) !important;
}
body.dark-mode .ha-seo-cb-takeaway {
  background: rgba(6,182,212,.07) !important;
  border-color: rgba(6,182,212,.22) !important;
  border-left-color: #06b6d4 !important;
  color: rgba(255,255,255,.72) !important;
}
body.dark-mode .ha-seo-cb-takeaway strong {
  color: #06b6d4 !important;
}
body.dark-mode .ha-seo-wp-wrap {
  border-top-color: rgba(255,255,255,.07) !important;
}
body.dark-mode .ha-seo-wp-h3 {
  color: #f1f5f9 !important;
}
body.dark-mode .ha-seo-wp-p {
  color: rgba(255,255,255,.55) !important;
}
body.dark-mode .ha-seo-wp-p strong {
  color: #e2e8f0 !important;
}
body.dark-mode .ha-seo-wp-kw {
  background: rgba(6,182,212,.1) !important;
  border-color: rgba(6,182,212,.25) !important;
  color: #06b6d4 !important;
}
body.dark-mode .ha-seo-wp-kw:hover {
  background: rgba(6,182,212,.18) !important;
}
/* Knowledge base card top border in dark mode */
body.dark-mode .ha-seo-col-card { border-top: 3px solid rgba(6,182,212,.45) !important; }
body.dark-mode .ha-seo-col-card.purple-card { border-top-color: rgba(139,92,246,.55) !important; }
body.dark-mode .ha-seo-col-card.green-card { border-top-color: rgba(52,211,153,.5) !important; }

/* ── WordPress + Multi-site Cards — dark mode ── */
body.dark-mode .ha-seo-wp-card {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.08) !important;
}
body.dark-mode .ha-seo-wp-card:hover {
  box-shadow: 0 20px 52px rgba(0,0,0,.5) !important;
}
body.dark-mode .ha-seo-wp-card-head {
  border-bottom-color: rgba(255,255,255,.06) !important;
}
body.dark-mode .ha-seo-wp-card-head.wp-cyan {
  background: rgba(8,145,178,.09) !important;
  border-top-color: #06b6d4 !important;
}
body.dark-mode .ha-seo-wp-card-head.wp-purple {
  background: rgba(124,58,237,.09) !important;
  border-top-color: #a78bfa !important;
}
body.dark-mode .ha-seo-wp-card-icon.cyan {
  background: rgba(6,182,212,.15) !important;
  border-color: rgba(6,182,212,.3) !important;
  color: #06b6d4 !important;
}
body.dark-mode .ha-seo-wp-card-icon.purple {
  background: rgba(139,92,246,.15) !important;
  border-color: rgba(139,92,246,.3) !important;
  color: #a78bfa !important;
}
body.dark-mode .ha-seo-wp-card-title {
  color: #f1f5f9 !important;
}
body.dark-mode .ha-seo-wp-p {
  color: rgba(255,255,255,.55) !important;
}
body.dark-mode .ha-seo-wp-p strong {
  color: #e2e8f0 !important;
}
body.dark-mode .ha-seo-wp-tags {
  border-top-color: rgba(255,255,255,.06) !important;
}
body.dark-mode .ha-seo-wp-tag.t-cyan {
  background: rgba(6,182,212,.1) !important;
  border-color: rgba(6,182,212,.25) !important;
  color: #06b6d4 !important;
}
body.dark-mode .ha-seo-wp-tag.t-cyan:hover {
  background: rgba(6,182,212,.18) !important;
}
body.dark-mode .ha-seo-wp-tag.t-purple {
  background: rgba(139,92,246,.1) !important;
  border-color: rgba(139,92,246,.25) !important;
  color: #a78bfa !important;
}
body.dark-mode .ha-seo-wp-tag.t-purple:hover {
  background: rgba(139,92,246,.18) !important;
}

/* ══════════════════════════════════════════════
   NEW SECTIONS — Light mode overrides
   ══════════════════════════════════════════════ */

/* How It Works — light mode (already white bg, fine by default) */
body:not(.dark-mode) .ha-how-step h3,
body:not(.dark-mode) .ha-how-step h4 { color: #1e293b !important; }
body:not(.dark-mode) .ha-how-step p  { color: #5d6b81 !important; }
body:not(.dark-mode) .ha-how-num     { background: linear-gradient(135deg,#06b6d4,#8b5cf6) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; }

/* Spec cards — colored left accent border in light mode */
body:not(.dark-mode) .ha-spec-card:nth-child(1) { border-left: 3px solid #06b6d4 !important; }
body:not(.dark-mode) .ha-spec-card:nth-child(2) { border-left: 3px solid #818cf8 !important; }
body:not(.dark-mode) .ha-spec-card:nth-child(3) { border-left: 3px solid #10b981 !important; }
body:not(.dark-mode) .ha-spec-card:nth-child(4) { border-left: 3px solid #f59e0b !important; }
body:not(.dark-mode) .ha-spec-card:nth-child(5) { border-left: 3px solid #ef4444 !important; }
body:not(.dark-mode) .ha-spec-card:nth-child(6) { border-left: 3px solid #a78bfa !important; }
body:not(.dark-mode) .ha-spec-card:nth-child(7) { border-left: 3px solid #34d399 !important; }
body:not(.dark-mode) .ha-spec-card:nth-child(8) { border-left: 3px solid #fb923c !important; }

/* ══════════════════════════════════════════════
   NEW SECTIONS — Dark mode overrides
   ══════════════════════════════════════════════ */

/* Urgency Strip — dark mode */
body.dark-mode .ha-urgency-strip {
  background: linear-gradient(135deg,#022c22,#064e3b) !important;
  border-bottom-color: rgba(16,185,129,.2) !important;
}

/* How It Works — dark mode */
body.dark-mode .ha-how-section {
  background: #0f172a !important;
}
body.dark-mode .ha-how-step h3,
body.dark-mode .ha-how-step h4 { color: #f1f5f9 !important; }
body.dark-mode .ha-how-step p  { color: rgba(255,255,255,.55) !important; }
body.dark-mode .ha-how-connector { color: rgba(6,182,212,.35) !important; }

/* Money-back badge — dark mode (already dark-friendly, but reinforce) */
/* Money-Back — light mode: card is white so text must be dark */
body:not(.dark-mode) .ha-money-back { color: #475569 !important; background: rgba(52,211,153,.08) !important; border-color: rgba(52,211,153,.25) !important; }
body:not(.dark-mode) .ha-money-back i { color: #059669 !important; }
/* Money-Back — dark mode */
body.dark-mode .ha-money-back { color: rgba(255,255,255,.85) !important; }
body.dark-mode .ha-money-back i { color: #34d399 !important; }

/* Testimonials — dark mode */
body.dark-mode .ha-testimonials-section {
  background: linear-gradient(160deg,#0a0f1e 0%,#0d1b2a 50%,#0a0f1e 100%) !important;
}
body.dark-mode .ha-testi-card {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.3) !important;
}
body.dark-mode .ha-testi-card:hover {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(6,182,212,.3) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.4) !important;
}
body.dark-mode .ha-testi-text { color: rgba(255,255,255,.65) !important; }
body.dark-mode .ha-testi-info strong { color: #f1f5f9 !important; }
body.dark-mode .ha-testi-info span   { color: rgba(255,255,255,.38) !important; }
body.dark-mode .ha-support-bar {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}
body.dark-mode .ha-support-icon {
  background: rgba(6,182,212,.1) !important;
  border-color: rgba(6,182,212,.2) !important;
}
body.dark-mode .ha-support-text strong { color: #f1f5f9 !important; }
body.dark-mode .ha-support-text span   { color: rgba(255,255,255,.5) !important; }
body.dark-mode .ha-support-divider { background: rgba(255,255,255,.07) !important; }

/* Spec cards — dark mode colored left borders */
body.dark-mode .ha-spec-card { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; }
body.dark-mode .ha-spec-card:nth-child(1) { border-left: 3px solid rgba(6,182,212,.6) !important; }
body.dark-mode .ha-spec-card:nth-child(2) { border-left: 3px solid rgba(129,140,248,.6) !important; }
body.dark-mode .ha-spec-card:nth-child(3) { border-left: 3px solid rgba(16,185,129,.6) !important; }
body.dark-mode .ha-spec-card:nth-child(4) { border-left: 3px solid rgba(245,158,11,.6) !important; }
body.dark-mode .ha-spec-card:nth-child(5) { border-left: 3px solid rgba(239,68,68,.6) !important; }
body.dark-mode .ha-spec-card:nth-child(6) { border-left: 3px solid rgba(167,139,250,.6) !important; }
body.dark-mode .ha-spec-card:nth-child(7) { border-left: 3px solid rgba(52,211,153,.6) !important; }
body.dark-mode .ha-spec-card:nth-child(8) { border-left: 3px solid rgba(251,146,60,.6) !important; }
body.dark-mode .ha-spec-body h3,
body.dark-mode .ha-spec-body h5 { color: #f1f5f9 !important; }
body.dark-mode .ha-spec-body p  { color: rgba(255,255,255,.55) !important; }
body.dark-mode .ha-specs-section { background: #0f172a !important; }

/* Why Choose — dark mode (already dark, reinforce) */
body.dark-mode .ha-why-card { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; }
body.dark-mode .ha-why-card:hover { background: rgba(255,255,255,.07) !important; border-color: rgba(6,182,212,.3) !important; }

/* ================================================================
   LIGHT MODE — New SEO Sections (domain-search, windows-shared-hosting)
   All ha-ds-*, ha-wsh-* sections need light backgrounds + dark text
   ================================================================ */

/* ── Shared light-mode section backgrounds ─────────────────────── */
body:not(.dark-mode) .ha-ds-how,
body:not(.dark-mode) .ha-ds-ext-section,
body:not(.dark-mode) .ha-ds-content-section,
body:not(.dark-mode) .ha-ds-faq-section,
body:not(.dark-mode) .ha-ds-related,
body:not(.dark-mode) .ha-wsh-how,
body:not(.dark-mode) .ha-wsh-tech,
body:not(.dark-mode) .ha-wsh-content,
body:not(.dark-mode) .ha-wsh-faq,
body:not(.dark-mode) .ha-wsh-related {
  background: #f8fafc !important;
}
body:not(.dark-mode) .ha-ds-ext-section,
body:not(.dark-mode) .ha-wsh-tech {
  background: #f1f5f9 !important;
}
body:not(.dark-mode) .ha-ds-content-section,
body:not(.dark-mode) .ha-wsh-faq {
  background: #ffffff !important;
}

/* ── Eyebrow badge (indigo) in light mode ──────────────────────── */
body:not(.dark-mode) .ha-eyebrow-indigo {
  background: linear-gradient(135deg,#6366f1,#8b5cf6) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ── Section headings ──────────────────────────────────────────── */
body:not(.dark-mode) .ha-section-title-dark {
  color: #0f172a !important;
}
body:not(.dark-mode) .ha-section-sub-dark {
  color: #5d6b81 !important;
}

/* ================================================================
   LIGHT MODE — domain-search sections (ha-ds-*)
   ================================================================ */

/* Step cards */
body:not(.dark-mode) .ha-ds-step-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}
body:not(.dark-mode) .ha-ds-step-card:hover {
  border-color: rgba(99,102,241,.3) !important;
  box-shadow: 0 8px 28px rgba(99,102,241,.12) !important;
}
body:not(.dark-mode) .ha-ds-step-num {
  color: #6366f1 !important;
  background: rgba(99,102,241,.08) !important;
  border-color: rgba(99,102,241,.2) !important;
}
body:not(.dark-mode) .ha-ds-step-card h3 {
  color: #0f172a !important;
}
body:not(.dark-mode) .ha-ds-step-card p {
  color: #5d6b81 !important;
}
body:not(.dark-mode) .ha-ds-step-badge {
  background: rgba(99,102,241,.08) !important;
  border-color: rgba(99,102,241,.2) !important;
  color: #6366f1 !important;
}

/* TLD extension cards */
body:not(.dark-mode) .ha-ds-ext-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
}
body:not(.dark-mode) .ha-ds-ext-card:hover {
  border-color: rgba(99,102,241,.3) !important;
  box-shadow: 0 8px 24px rgba(99,102,241,.1) !important;
}
body:not(.dark-mode) .ha-ds-ext-tld {
  color: #6366f1 !important;
}
body:not(.dark-mode) .ha-ds-ext-price {
  color: #0f172a !important;
}
body:not(.dark-mode) .ha-ds-ext-desc {
  color: #5d6b81 !important;
}

/* The card turns white in light mode, but these two kept their dark-card
   values: "Best for:" was white-on-white at 1.0:1 and its accent span 1.8:1. */
body:not(.dark-mode) .ha-ds-ext-best {
  color: #5d6b81 !important;
}
body:not(.dark-mode) .ha-ds-ext-best span {
  color: #06748e !important;
}

/* Prose links in the domain article: #0891b2 is 3.68:1 on white. */
body:not(.dark-mode) .ha-ds-content-inner a {
  color: #06748e !important;
}
body:not(.dark-mode) .ha-ds-ext-badge {
  background: rgba(99,102,241,.08) !important;
  border-color: rgba(99,102,241,.15) !important;
  color: #6366f1 !important;
}

/* E-E-A-T trust strip */
body:not(.dark-mode) .ha-ds-eeeat {
  background: rgba(99,102,241,.04) !important;
  border-color: rgba(99,102,241,.15) !important;
}
body:not(.dark-mode) .ha-ds-eeeat-stat .num {
  background: linear-gradient(135deg,#6366f1,#8b5cf6) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
body:not(.dark-mode) .ha-ds-eeeat-stat .lbl {
  color: #596c86 !important;
}
body:not(.dark-mode) .ha-ds-eeeat-divider {
  background: rgba(99,102,241,.15) !important;
}

/* Content articles */
body:not(.dark-mode) .ha-ds-article {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.07) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
}
body:not(.dark-mode) .ha-ds-article:hover {
  border-color: rgba(99,102,241,.25) !important;
}
body:not(.dark-mode) .ha-ds-article-tag {
  background: rgba(99,102,241,.07) !important;
  border-color: rgba(99,102,241,.15) !important;
  color: #6366f1 !important;
}
body:not(.dark-mode) .ha-ds-article h3 {
  color: #0f172a !important;
}
body:not(.dark-mode) .ha-ds-article p {
  color: #5d6b81 !important;
}

/* FAQ accordion */
body:not(.dark-mode) .ha-ds-faq-item {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.04) !important;
}
body:not(.dark-mode) .ha-ds-faq-item.is-open {
  border-color: rgba(99,102,241,.3) !important;
  box-shadow: 0 4px 16px rgba(99,102,241,.08) !important;
}
body:not(.dark-mode) .ha-ds-faq-q h4 {
  color: #0f172a !important;
}
body:not(.dark-mode) .ha-ds-faq-a p {
  color: #5d6b81 !important;
}
body:not(.dark-mode) .ha-ds-faq-icon {
  background: rgba(99,102,241,.07) !important;
  border-color: rgba(99,102,241,.18) !important;
}
body:not(.dark-mode) .ha-ds-faq-icon i {
  color: #6366f1 !important;
}
body:not(.dark-mode) .ha-ds-faq-item.is-open .ha-ds-faq-icon {
  background: rgba(99,102,241,.15) !important;
  border-color: #6366f1 !important;
}

/* Related service cards */
body:not(.dark-mode) .ha-ds-related-card {
  background: #ffffff !important;
  border-color: rgba(15,23,42,.1) !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.08) !important;
}
body:not(.dark-mode) .ha-ds-related-card:hover {
  background: #f8fcff !important;
  border-color: rgba(6,182,212,.42) !important;
  box-shadow: 0 16px 36px rgba(6,182,212,.14) !important;
}
body:not(.dark-mode) .ha-ds-related-card i {
  background: none !important;
  color: #0891b2 !important;
  opacity: 1 !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
}
body:not(.dark-mode) .ha-ds-related-card span {
  color: #0f172a !important;
}
body:not(.dark-mode) .ha-ds-related-card small {
  color: #5d6b81 !important;
}
body:not(.dark-mode) .ha-ds-rel-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
}
body:not(.dark-mode) .ha-ds-rel-card:hover {
  border-color: rgba(99,102,241,.3) !important;
  box-shadow: 0 8px 28px rgba(99,102,241,.1) !important;
}
body:not(.dark-mode) .ha-ds-rel-icon {
  background: rgba(99,102,241,.07) !important;
  border-color: rgba(99,102,241,.15) !important;
}
body:not(.dark-mode) .ha-ds-rel-icon i {
  color: #6366f1 !important;
}
body:not(.dark-mode) .ha-ds-rel-card h4 {
  color: #0f172a !important;
}
body:not(.dark-mode) .ha-ds-rel-card p {
  color: #5d6b81 !important;
}
body:not(.dark-mode) .ha-ds-rel-link {
  color: #6366f1 !important;
}

/* ================================================================
   LIGHT MODE — windows-shared-hosting sections (ha-wsh-*)
   ================================================================ */

/* How It Works — steps */
body:not(.dark-mode) .ha-wsh-step-wrap::before {
  background: linear-gradient(180deg,rgba(99,102,241,.3),rgba(139,92,246,.2),rgba(99,102,241,.05)) !important;
}
body:not(.dark-mode) .ha-wsh-step-num {
  background: rgba(99,102,241,.06) !important;
  border-color: rgba(99,102,241,.25) !important;
  color: #6366f1 !important;
}
body:not(.dark-mode) .ha-wsh-step:hover .ha-wsh-step-num {
  background: rgba(99,102,241,.12) !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 16px rgba(99,102,241,.15) !important;
}
body:not(.dark-mode) .ha-wsh-step-body h3 {
  color: #0f172a !important;
}
body:not(.dark-mode) .ha-wsh-step-body p {
  color: #5d6b81 !important;
}
body:not(.dark-mode) .ha-wsh-step-badge {
  background: rgba(99,102,241,.07) !important;
  border-color: rgba(99,102,241,.18) !important;
  color: #6366f1 !important;
}
body:not(.dark-mode) .ha-wsh-side-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.08) !important;
}
body:not(.dark-mode) .ha-wsh-side-card h4 {
  color: #0f172a !important;
}
body:not(.dark-mode) .ha-wsh-side-list li {
  color: #475569 !important;
  border-bottom-color: rgba(0,0,0,.06) !important;
}
body:not(.dark-mode) .ha-wsh-side-list li i {
  color: #6366f1 !important;
}

/* Tech stack cards */
body:not(.dark-mode) .ha-wsh-tech-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.05) !important;
}
body:not(.dark-mode) .ha-wsh-tech-card:hover {
  border-color: rgba(99,102,241,.3) !important;
  box-shadow: 0 8px 28px rgba(99,102,241,.1) !important;
}
body:not(.dark-mode) .ha-wsh-tech-icon {
  background: rgba(99,102,241,.07) !important;
  border-color: rgba(99,102,241,.18) !important;
}
body:not(.dark-mode) .ha-wsh-tech-icon i {
  color: #6366f1 !important;
}
body:not(.dark-mode) .ha-wsh-tech-card h3 {
  color: #0f172a !important;
}
body:not(.dark-mode) .ha-wsh-tech-card p {
  color: #5d6b81 !important;
}
body:not(.dark-mode) .ha-wsh-tech-tag {
  background: rgba(99,102,241,.07) !important;
  border-color: rgba(99,102,241,.15) !important;
  color: #6366f1 !important;
}

/* Comparison table */
body:not(.dark-mode) .ha-wsh-vs {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}
body:not(.dark-mode) .ha-wsh-vs-header {
  background: rgba(99,102,241,.05) !important;
  border-bottom-color: rgba(0,0,0,.06) !important;
}
body:not(.dark-mode) .ha-wsh-vs-header div {
  color: #6366f1 !important;
}
body:not(.dark-mode) .ha-wsh-vs-row {
  border-bottom-color: rgba(0,0,0,.04) !important;
}
body:not(.dark-mode) .ha-wsh-vs-row div {
  color: #5d6b81 !important;
}
body:not(.dark-mode) .ha-wsh-vs-row div:first-child {
  color: #1e293b !important;
}

/* E-E-A-T strip */
body:not(.dark-mode) .ha-wsh-eeeat {
  background: rgba(99,102,241,.04) !important;
  border-color: rgba(99,102,241,.15) !important;
}
body:not(.dark-mode) .ha-wsh-eeeat-stat .num {
  background: linear-gradient(135deg,#6366f1,#8b5cf6) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
body:not(.dark-mode) .ha-wsh-eeeat-stat .lbl {
  color: #596c86 !important;
}
body:not(.dark-mode) .ha-wsh-eeeat-divider {
  background: rgba(99,102,241,.15) !important;
}

/* Content articles */
body:not(.dark-mode) .ha-wsh-article {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.07) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
}
body:not(.dark-mode) .ha-wsh-article:hover {
  border-color: rgba(99,102,241,.25) !important;
}
body:not(.dark-mode) .ha-wsh-article-tag {
  background: rgba(99,102,241,.07) !important;
  border-color: rgba(99,102,241,.15) !important;
  color: #6366f1 !important;
}
body:not(.dark-mode) .ha-wsh-article h3 {
  color: #0f172a !important;
}
body:not(.dark-mode) .ha-wsh-article p {
  color: #5d6b81 !important;
}

/* FAQ accordion */
body:not(.dark-mode) .ha-wsh-faq-item {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.04) !important;
}
body:not(.dark-mode) .ha-wsh-faq-item.is-open {
  border-color: rgba(99,102,241,.3) !important;
  box-shadow: 0 4px 16px rgba(99,102,241,.08) !important;
}
body:not(.dark-mode) .ha-wsh-faq-q h4 {
  color: #0f172a !important;
}
body:not(.dark-mode) .ha-wsh-faq-a p {
  color: #5d6b81 !important;
}
body:not(.dark-mode) .ha-wsh-faq-icon {
  background: rgba(99,102,241,.07) !important;
  border-color: rgba(99,102,241,.18) !important;
}
body:not(.dark-mode) .ha-wsh-faq-icon i {
  color: #6366f1 !important;
}
body:not(.dark-mode) .ha-wsh-faq-item.is-open .ha-wsh-faq-icon {
  background: rgba(99,102,241,.15) !important;
  border-color: #6366f1 !important;
}

/* Related cards */
body:not(.dark-mode) .ha-wsh-rel-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
}
body:not(.dark-mode) .ha-wsh-rel-card:hover {
  border-color: rgba(99,102,241,.3) !important;
  box-shadow: 0 8px 28px rgba(99,102,241,.1) !important;
}
body:not(.dark-mode) .ha-wsh-rel-icon {
  background: rgba(99,102,241,.07) !important;
  border-color: rgba(99,102,241,.15) !important;
}
body:not(.dark-mode) .ha-wsh-rel-icon i {
  color: #6366f1 !important;
}
body:not(.dark-mode) .ha-wsh-rel-card h4 {
  color: #0f172a !important;
}
body:not(.dark-mode) .ha-wsh-rel-card p {
  color: #5d6b81 !important;
}
body:not(.dark-mode) .ha-wsh-rel-link {
  color: #6366f1 !important;
}

/* ================================================================
   LIGHT MODE — linux-reseller-hosting sections (ha-rh-*)
   ================================================================ */
body:not(.dark-mode) .ha-rh-faq-item {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.08) !important;
}
body:not(.dark-mode) .ha-rh-faq-item.is-open {
  border-color: rgba(6,182,212,.3) !important;
}
body:not(.dark-mode) .ha-rh-faq-q h4 {
  color: #0f172a !important;
}
body:not(.dark-mode) .ha-rh-faq-a p {
  color: #5d6b81 !important;
}
body:not(.dark-mode) .ha-rh-faq-icon {
  background: rgba(6,182,212,.07) !important;
  border-color: rgba(6,182,212,.18) !important;
}
body:not(.dark-mode) .ha-rh-faq-icon i {
  color: #0891b2 !important;
}

/* ── Section ::before orb/gradient overrides (light mode) ─────── */
body:not(.dark-mode) .ha-ds-how::before,
body:not(.dark-mode) .ha-ds-ext-section::before,
body:not(.dark-mode) .ha-ds-content-section::before,
body:not(.dark-mode) .ha-wsh-how::before,
body:not(.dark-mode) .ha-wsh-tech::before,
body:not(.dark-mode) .ha-wsh-content::before,
body:not(.dark-mode) .ha-wsh-faq::before,
body:not(.dark-mode) .ha-wsh-related::before {
  display: none !important;
}

/* ── Hover background on FAQ question rows ─────────────────────── */
body:not(.dark-mode) .ha-ds-faq-q:hover,
body:not(.dark-mode) .ha-wsh-faq-q:hover {
  background: rgba(99,102,241,.03) !important;
}

/* ── Step connector line (light mode) ──────────────────────────── */
body:not(.dark-mode) .ha-ds-step-wrap::before,
body:not(.dark-mode) .ha-wsh-step-wrap::before {
  background: linear-gradient(180deg,rgba(99,102,241,.2),rgba(139,92,246,.15),rgba(99,102,241,.03)) !important;
}

/* ── Footer: undo the blanket section repaint ──────────────────────
   The `body.dark-mode section` rules above are meant for top-level page
   bands, but they match every nested <section> too. The footer builds its
   brand block, CTA band and contact card as sections, so the blanket colour
   stamped an opaque rectangle over the footer's own gradient — most visibly
   as a hard dark box behind the logo. Those three carry their own designed
   surfaces (or are meant to be transparent), so hand the background back.
   Their gradients are declared as background-image and still paint. */
body.dark-mode footer section {
  background-color: transparent !important;
}

/* ── Plan Comparison + Competitor VS tables in dark mode ──────────
   Some pages ship the light variant of this markup. Only the
   light-mode overrides existed, so in dark mode the panel stayed
   white while the site-wide rules lightened the text on top of it.
   These mirror the dark palette the other pages already use. */
body.dark-mode .ha-compare-section {
  background: linear-gradient(135deg, #0a0f1e 0%, #0d1b2a 50%, #0a0f1e 100%) !important;
}
body.dark-mode .ha-compare-section-title { color: #f1f5f9 !important; }
body.dark-mode .ha-compare-section-sub { color: rgba(255,255,255,.55) !important; }
body.dark-mode .ha-compare-wrap {
  border-color: rgba(6,182,212,.18) !important;
  background: rgba(255,255,255,.025) !important;
}
body.dark-mode .ha-compare-header {
  border-bottom-color: rgba(6,182,212,.2) !important;
  background: rgba(10,15,30,.96) !important;
}
body.dark-mode .ha-compare-head-cell { color: rgba(255,255,255,.5) !important; }
body.dark-mode .ha-compare-head-cell.label { color: rgba(255,255,255,.35) !important; }
body.dark-mode .ha-compare-head-cell.popular {
  border-color: rgba(6,182,212,.2) !important;
  background: rgba(6,182,212,.08) !important;
}
body.dark-mode .ha-compare-head-name { color: #ffffff !important; }
body.dark-mode .ha-compare-head-name.cyan { color: #22d3ee !important; }
body.dark-mode .ha-compare-head-name.purple { color: #a78bfa !important; }
body.dark-mode .ha-compare-head-price { color: rgba(255,255,255,.45) !important; }
body.dark-mode .ha-compare-row { border-bottom-color: rgba(255,255,255,.05) !important; }
body.dark-mode .ha-compare-row:hover { background: rgba(255,255,255,.03) !important; }
body.dark-mode .ha-compare-cell {
  color: rgba(255,255,255,.75) !important;
  border-left-color: rgba(255,255,255,.04) !important;
}
body.dark-mode .ha-compare-cell.label { color: rgba(255,255,255,.55) !important; }
body.dark-mode .ha-compare-cell.label i { color: rgba(34,211,238,.6) !important; }
body.dark-mode .ha-compare-cell.popular {
  border-left-color: rgba(6,182,212,.15) !important;
  border-right-color: rgba(6,182,212,.15) !important;
  color: #ffffff !important;
  background: rgba(6,182,212,.05) !important;
}
body.dark-mode .ha-compare-check { color: #34d399 !important; }
body.dark-mode .ha-compare-cross { color: rgba(255,255,255,.25) !important; }
body.dark-mode .ha-compare-badge.cyan {
  border-color: rgba(34,211,238,.25) !important;
  color: #22d3ee !important;
  background: rgba(34,211,238,.1) !important;
}
body.dark-mode .ha-compare-badge.green {
  border-color: rgba(52,211,153,.25) !important;
  color: #34d399 !important;
  background: rgba(52,211,153,.1) !important;
}
body.dark-mode .ha-compare-badge.purple {
  border-color: rgba(167,139,250,.25) !important;
  color: #a78bfa !important;
  background: rgba(167,139,250,.1) !important;
}

body.dark-mode .ha-vs-section { background: #070d1c !important; }
body.dark-mode .ha-vs-section h3 { color: #f1f5f9 !important; }
body.dark-mode .ha-vs-section p { color: rgba(255,255,255,.55) !important; }
body.dark-mode .ha-vs-wrap { border-color: rgba(255,255,255,.08) !important; }
body.dark-mode .ha-vs-header {
  border-bottom-color: rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.03) !important;
}
body.dark-mode .ha-vs-head.label { color: rgba(255,255,255,.35) !important; }
body.dark-mode .ha-vs-head.ours {
  border-color: rgba(6,182,212,.2) !important;
  background: rgba(6,182,212,.08) !important;
}
body.dark-mode .ha-vs-head-name { color: #ffffff !important; }
body.dark-mode .ha-vs-head-name.cyan { color: #22d3ee !important; }
body.dark-mode .ha-vs-head-sub { color: rgba(255,255,255,.4) !important; }
body.dark-mode .ha-vs-row { border-bottom-color: rgba(255,255,255,.05) !important; }
body.dark-mode .ha-vs-row:hover { background: rgba(255,255,255,.02) !important; }
body.dark-mode .ha-vs-cell {
  color: rgba(255,255,255,.6) !important;
  border-left-color: rgba(255,255,255,.04) !important;
}
body.dark-mode .ha-vs-cell:first-child { color: rgba(255,255,255,.6) !important; }
body.dark-mode .ha-vs-cell i { color: rgba(34,211,238,.55) !important; }
body.dark-mode .ha-vs-cell.ours {
  border-left-color: rgba(6,182,212,.12) !important;
  border-right-color: rgba(6,182,212,.12) !important;
  color: #ffffff !important;
  background: rgba(6,182,212,.04) !important;
}
body.dark-mode .ha-vs-val { color: #22d3ee !important; }
body.dark-mode .ha-vs-val.grey { color: rgba(255,255,255,.4) !important; }
body.dark-mode .ha-vs-check { color: #34d399 !important; }
body.dark-mode .ha-vs-cross { color: rgba(255,255,255,.25) !important; }
body.dark-mode .ha-vs-badge,
body.dark-mode .ha-vs-winner {
  border-color: rgba(52,211,153,.25) !important;
  color: #34d399 !important;
  background: rgba(52,211,153,.1) !important;
}

/* ── /about-us trust section: dark-mode counterparts ──────────────────────
   These classes had no dark-mode rule at all, so the light-mode colours were
   showing on the dark surfaces too. The light values were darkened for AA
   contrast on white, which made that worse — hence this block. Measured
   8.5-13.8:1 against the section's dark card background. */

body.dark-mode .ha-eeat-cert-badge {
  color: #5fe0a8 !important;
}

body.dark-mode .ha-eeat-card-label.cyan { color: #67d8ee !important; }
body.dark-mode .ha-eeat-card-label.green { color: #5fe0a8 !important; }
body.dark-mode .ha-eeat-card-label.purple { color: #c4a6ff !important; }

body.dark-mode .ha-eeat-stat-lbl,
body.dark-mode .ha-eeat-cert-role,
body.dark-mode .ha-ticker-item,
body.dark-mode .ha-partners-label {
  color: #a9bed8 !important;
}

body.dark-mode .ha-eeat-info-val,
body.dark-mode .ha-eeat-cert-name {
  color: #dbe6f7 !important;
}

/* The badges carry their colour inline, so this needs !important to win. */
body.dark-mode .ha-section-badge {
  color: #7ddced !important;
}