/* =====================================================
   OffshoreKaka — LIGHT THEME v7 (Attractive Multi-Color)
   - Multi-color palette (cyan/purple/teal/amber)
   - Section-specific colored backgrounds
   - Gradient hero + text on key headings
   - Modern SaaS-inspired (Stripe/Linear style)
   ===================================================== */

/* ----- Smooth transitions ----- */
html, body, header, footer, section, main, .feature-card-v2, .stat-card,
.compliance-card, .pricing-card, .reveal-card, .ok-table, .btn, input, textarea {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* ----- Theme Toggle Button ----- */
#theme-toggle.theme-toggle-btn {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #f0f4f8 !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  margin-right: 10px !important;
  padding: 0 !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}
#theme-toggle.theme-toggle-btn i { font-size: 18px !important; display: block !important; }

/* =====================================================
   LIGHT THEME — VARIABLES (Multi-color brand palette)
   ===================================================== */

html[data-theme="light"] {
  --bg-color: #fafbff;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f5f9;

  /* Section accent backgrounds (subtle colored) */
  --bg-cyan: #eef2f9;
  --bg-purple: #faf5ff;
  --bg-mint: #f7f9fc;
  --bg-amber: #f2f6fd;
  --bg-rose: #fff1f2;

  /* Text - dark slate with slight blue tint */
  --text-main: #0f172a;
  --text-secondary: #1e293b;
  --text-muted: #475569;
  --text-subtle: #64748b;

  /* Brand colors */
  --primary: #1d63d8;
  --primary-hover: #174ea8;
  --primary-light: #3b82f6;
  --primary-glow: rgba(29, 99, 216,0.15);

  --secondary: #1d63d8;
  --secondary-light: #3b82f6;
  --secondary-glow: rgba(29, 99, 216,0.12);

  --accent: #ec4899;
  --accent-light: #f472b6;
  --teal: #14b8a6;
  --emerald: #10b981;
  --amber: #f59e0b;
  --rose: #f43f5e;

  /* Status */
  --success: #059669;
  --danger: #dc2626;
  --warning: #d97706;

  /* Borders */
  --glass-bg: rgba(15,23,42,0.025);
  --glass-border: #e2e8f0;
  --glass-shadow: 0 1px 3px rgba(15,23,42,0.06);
}

/* =====================================================
   BODY — Attractive ambient background
   ===================================================== */

html[data-theme="light"],
html[data-theme="light"] body {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(29, 99, 216,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(29, 99, 216,0.05) 0%, transparent 50%),
    linear-gradient(180deg, #fafbff 0%, #ffffff 100%) !important;
  background-color: #fafbff !important;
  color: #1e293b !important;
}

/* Hide ambient blobs */
html[data-theme="light"] body::before,
html[data-theme="light"] body::after {
  display: none !important;
}

/* =====================================================
   HERO SECTIONS — Beautiful 3-color gradient
   ===================================================== */

html[data-theme="light"] .hero,
html[data-theme="light"] .hero-centered,
html[data-theme="light"] section.hero,
html[data-theme="light"] section.hero-centered,
html[data-theme="light"] #dedicated-hero,
html[data-theme="light"] #vps-hero,
html[data-theme="light"] #web-hosting-hero,
html[data-theme="light"] #reseller-hero,
html[data-theme="light"] .hero-slider-container,
html[data-theme="light"] .interactive-bg-3d {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(29, 99, 216,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(29, 99, 216,0.10) 0%, transparent 50%),
    linear-gradient(135deg, #eef2f9 0%, #f5f3ff 50%, #fdf2f8 100%) !important;
  background-image: none, none, linear-gradient(135deg, #eef2f9 0%, #f5f3ff 50%, #fdf2f8 100%) !important;
}

/* Hero canvas - subtle */
html[data-theme="light"] canvas#hero-canvas,
html[data-theme="light"] canvas#hero-network-canvas,
html[data-theme="light"] #interactive-bg canvas,
html[data-theme="light"] .network-particles {
  opacity: 0.25 !important;
}

/* Hero text */
html[data-theme="light"] .hero h1,
html[data-theme="light"] .hero-content-v2 h1,
html[data-theme="light"] .slide-content h1,
html[data-theme="light"] .hero-text h1 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
html[data-theme="light"] .hero p,
html[data-theme="light"] .hero-content-v2 p,
html[data-theme="light"] .slide-content p {
  color: #1e293b !important;
}

/* Gradient text in hero - keep colorful */
html[data-theme="light"] .hero .gradient-text,
html[data-theme="light"] .hero-content-v2 .gradient-text,
html[data-theme="light"] .gradient-text,
html[data-theme="light"] .slide-content h1 span,
html[data-theme="light"] .slide-content .h1-style span {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #1d63d8 !important;
  color: #1d63d8 !important;
}

/* =====================================================
   ALTERNATING SECTION COLORS — Multi-color attractive
   ===================================================== */

html[data-theme="light"] section,
html[data-theme="light"] main,
html[data-theme="light"] .product-page section:nth-of-type(odd):not(.hero):not(.hero-slider-container),
html[data-theme="light"] .product-page section:nth-of-type(even) {
  background: transparent !important;
  background-image: none !important;
}

/* Section-specific colored backgrounds */
html[data-theme="light"] #pricing,
html[data-theme="light"] .pricing-section,
html[data-theme="light"] .ok-pricing-section {
  background: #f1f5fa !important;
}

html[data-theme="light"] .features-section-v2 {
  background: #ffffff !important;
}

html[data-theme="light"] #who-we-are,
html[data-theme="light"] .who-we-are-section {
  background: #f1f5fa !important;
}

html[data-theme="light"] #compliance-legal,
html[data-theme="light"] .compliance-section {
  background: #ffffff !important;
}

html[data-theme="light"] .migration-section {
  background: #ffffff !important;
}

html[data-theme="light"] #network {
  background: #f1f5fa !important;
}

html[data-theme="light"] .payments-banner {
  background: #ffffff !important;
}

html[data-theme="light"] #faq,
html[data-theme="light"] .faq-section {
  background: #f1f5fa !important;
}

html[data-theme="light"] #dedicated-details,
html[data-theme="light"] #vps-details,
html[data-theme="light"] #seo-deep-dive {
  background: #ffffff !important;
}

html[data-theme="light"] .team-section {
  background: #ffffff !important;
}

html[data-theme="light"] .comparison-section {
  background: #ffffff !important;
}

/* =====================================================
   TEXT HIERARCHY
   ===================================================== */

html[data-theme="light"] body,
html[data-theme="light"] p,
html[data-theme="light"] li,
html[data-theme="light"] td,
html[data-theme="light"] th,
html[data-theme="light"] label {
  -webkit-text-fill-color: currentColor !important;
}

html[data-theme="light"] h1, html[data-theme="light"] h2,
html[data-theme="light"] h3, html[data-theme="light"] h4,
html[data-theme="light"] h5, html[data-theme="light"] h6 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

/* Muted */
html[data-theme="light"] .stat-desc,
html[data-theme="light"] .section-subtitle,
html[data-theme="light"] .wwa-subheading,
html[data-theme="light"] .pricing-disclaimer,
html[data-theme="light"] .feature-card-v2 p,
html[data-theme="light"] .compliance-card p,
html[data-theme="light"] .footer-col p,
html[data-theme="light"] .legal-content p,
html[data-theme="light"] .legal-content li,
html[data-theme="light"] .content-area p,
html[data-theme="light"] .faq-answer,
html[data-theme="light"] small {
  color: #475569 !important;
}

/* SECTION TITLES — gradient (cyan-purple) for attractive look */
html[data-theme="light"] .section-title,
html[data-theme="light"] h2.section-title {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #101828 !important;
  color: #101828 !important;
}

/* WWA heading - colorful gradient */
html[data-theme="light"] .wwa-heading {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #101828 !important;
  color: #101828 !important;
}

/* Stat values - bright cyan-purple gradient */
html[data-theme="light"] .stat-value {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #1d63d8 !important;
  color: #1d63d8 !important;
}

/* Payments banner heading - amber gradient */
html[data-theme="light"] .payments-banner h3 {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #101828 !important;
  color: #101828 !important;
}

/* Login card - gradient */
html[data-theme="light"] .login-card h2 {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #101828 !important;
  color: #101828 !important;
}

/* Logo (text) - solid dark */
html[data-theme="light"] .logo,
html[data-theme="light"] .drawer-header .logo {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #0f172a !important;
  color: #0f172a !important;
}

/* Breadcrumb pill — light glass in light mode */
html[data-theme="light"] .ok-breadcrumb {
  background:rgba(255,255,255,0.92)!important;border:1px solid #e3e8f0!important;box-shadow:0 1px 3px rgba(16,24,40,0.06)!important;
}
html[data-theme="light"] .ok-breadcrumb a {
  color: #334155 !important;
}
html[data-theme="light"] .ok-breadcrumb a:hover {
  color: #1d63d8 !important;
}
html[data-theme="light"] .ok-breadcrumb .sep {
  color: #1d63d8 !important;
  opacity: 0.7;
}
html[data-theme="light"] .ok-breadcrumb i {
  color: #475569 !important;
}

/* Breadcrumb current - cyan */
html[data-theme="light"] .ok-breadcrumb .current {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #1d63d8 !important;
  color: #1d63d8 !important;
}

/* About title */
html[data-theme="light"] .about-hero-title {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #101828 !important;
  color: #101828 !important;
}

/* =====================================================
   INLINE STYLE OVERRIDES
   ===================================================== */

html[data-theme="light"] [style*="color: #94a3b8"],
html[data-theme="light"] [style*="color:#94a3b8"],
html[data-theme="light"] [style*="color: #9aa4b2"],
html[data-theme="light"] [style*="color:#9aa4b2"],
html[data-theme="light"] [style*="color: #a0aec0"],
html[data-theme="light"] [style*="color:#a0aec0"] {
  color: #475569 !important;
}

html[data-theme="light"] [style*="color: white"],
html[data-theme="light"] [style*="color:white"],
html[data-theme="light"] [style*="color: #fff"],
html[data-theme="light"] [style*="color:#fff"],
html[data-theme="light"] [style*="color: #ffffff"],
html[data-theme="light"] [style*="color:#ffffff"],
html[data-theme="light"] [style*="color: #f0f4f8"],
html[data-theme="light"] [style*="color:#f0f4f8"] {
  color: #1e293b !important;
}

html[data-theme="light"] [style*="color: #22c55e"],
html[data-theme="light"] [style*="color:#22c55e"] { color: #059669 !important; }
html[data-theme="light"] [style*="color: #ef4444"],
html[data-theme="light"] [style*="color:#ef4444"] { color: #dc2626 !important; }

/* Tailwind classes */
html[data-theme="light"] [class*="text-white"],
html[data-theme="light"] [class*="text-[#9aa4b2]"],
html[data-theme="light"] [class*="text-[#8c9bb3]"],
html[data-theme="light"] [class*="text-[#f0f4f8]"] {
  color: #1e293b !important;
}
html[data-theme="light"] [class*="text-[#5aa2ff]"],
html[data-theme="light"] [class*="text-cyan-400"] {
  color: #1d63d8 !important;
}

/* =====================================================
   LOGO IMAGE — Tinted dark
   ===================================================== */

html[data-theme="light"] .logo img.logo-img,
html[data-theme="light"] .logo-img,
html[data-theme="light"] header .logo img,
html[data-theme="light"] footer .logo img,
html[data-theme="light"] .mobile-drawer .logo img {
  /* Light-mode logo: only the white "Offshore" wordmark is darkened (shield + "Kaka"
     keep their cyan brand colors). Served as a dedicated variant image. */
  content: url('../img/logo-light.png') !important;
}

/* =====================================================
   HEADER — Glass effect
   ===================================================== */

html[data-theme="light"] header {
  background: rgba(255,255,255,0.8) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(15,23,42,0.06) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important;
}
html[data-theme="light"] .nav-links a { color: #1e293b !important; }
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a.active { color: #1d63d8 !important; }

html[data-theme="light"] #theme-toggle.theme-toggle-btn {
  background: #ffffff !important;
  color: #55637a !important;
  border: 1px solid #e3e8f0 !important;
}
html[data-theme="light"] #theme-toggle.theme-toggle-btn:hover {
  background: #f0f3f9 !important;
  color: #101828 !important;
}

/* Currency */
html[data-theme="light"] #currency-dropdown-btn {
  background:#ffffff!important;color:#101828!important;border:1px solid #dbe3ee!important;
}
html[data-theme="light"] #currency-dropdown-btn i { color: #475569 !important; }
html[data-theme="light"] .currency-menu {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(15,23,42,0.1) !important;
}
html[data-theme="light"] .currency-item { color: #1e293b !important; }
html[data-theme="light"] .currency-item:hover,
html[data-theme="light"] .currency-item.active {
  background:#eef2f9!important;color:#1d63d8!important;
}

/* Mobile drawer */
html[data-theme="light"] .mobile-drawer {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  box-shadow: -10px 0 30px rgba(15,23,42,0.1) !important;
}
html[data-theme="light"] .mobile-drawer a,
html[data-theme="light"] .mobile-drawer .drawer-menu a {
  color: #1e293b !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .mobile-drawer a i { color: #94a3b8 !important; }
html[data-theme="light"] .drawer-close i { color: #1e293b !important; }
html[data-theme="light"] .mobile-toggle span { background: #1e293b !important; }

/* =====================================================
   CARDS — White with colorful icons + hover lift
   ===================================================== */

html[data-theme="light"] .feature-card-v2,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .compliance-card,
html[data-theme="light"] .pricing-card,
html[data-theme="light"] .reveal-card,
html[data-theme="light"] .testimonial-card,
html[data-theme="light"] .info-card,
html[data-theme="light"] .glass-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04) !important;
}

html[data-theme="light"] .feature-card-v2:hover,
html[data-theme="light"] .stat-card:hover,
html[data-theme="light"] .compliance-card:hover,
html[data-theme="light"] .reveal-card:hover,
html[data-theme="light"] .glass-card:hover {
  border-color: #1d63d8 !important;
  box-shadow: 0 10px 30px rgba(29, 99, 216,0.15), 0 4px 8px rgba(15,23,42,0.05) !important;
  transform: translateY(-3px);
}

/* Icons - cyan gradient bg */
html[data-theme="light"] .feature-icon-v2,
html[data-theme="light"] .compliance-card-icon {
  background:rgba(29,99,216,0.07)!important;color:#1d63d8!important;border:1px solid rgba(29,99,216,0.18)!important;box-shadow:none!important;
}
html[data-theme="light"] .feature-card-v2 i,
html[data-theme="light"] .stat-card i,
html[data-theme="light"] .compliance-card i,
html[data-theme="light"] .feature-icon-v2 i,
html[data-theme="light"] .compliance-card-icon i { color: #1d63d8 !important; }

/* =====================================================
   PRICING TABLE — Premium with gradient highlights
   ===================================================== */

html[data-theme="light"] .ok-table-wrapper {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(29, 99, 216,0.08) !important;
}
html[data-theme="light"] .ok-table {
  background: #ffffff !important;
  color: #1e293b !important;
}
html[data-theme="light"] .ok-table th,
html[data-theme="light"] .comparison-table thead th {
  background:#f2f5fa!important;color:#101828!important;border-bottom:1px solid #dbe3ee!important;
}
html[data-theme="light"] .ok-table td,
html[data-theme="light"] .comparison-table td {
  color: #1e293b !important;
  background: transparent !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
html[data-theme="light"] .ok-table tr:hover td,
html[data-theme="light"] .comparison-table tbody tr:hover td {
  background:#f4f7fb!important;
}
html[data-theme="light"] .ok-price,
html[data-theme="light"] .price {
  background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;-webkit-text-fill-color:#101828!important;color:#101828!important;font-weight:700!important;
}

/* =====================================================
   BUTTONS — Vibrant gradients with glow
   ===================================================== */

html[data-theme="light"] .btn-primary,
html[data-theme="light"] .ok-btn-order {
  background: #101828 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 1px 2px rgba(16,24,40,0.12) !important;
}
html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] .ok-btn-order:hover {
  background: #1f2b40 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 1px 2px rgba(16,24,40,0.12) !important;
}
html[data-theme="light"] .btn-primary i,
html[data-theme="light"] .ok-btn-order i { color: #ffffff !important; }

html[data-theme="light"] .btn:not(.btn-primary):not(.ok-btn-order) {
  background: #ffffff !important;
  color: #1d63d8 !important;
  border: 2px solid #1d63d8 !important;
}
html[data-theme="light"] .btn:not(.btn-primary):not(.ok-btn-order):hover {
  background: linear-gradient(135deg, #eef2f9, #e7edf7) !important;
  border-color: #1d63d8 !important;
  color: #1d63d8 !important;
}

/* Badges - colorful */
html[data-theme="light"] .popular-tag,
html[data-theme="light"] .popular-badge {
  background: #1d63d8 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
html[data-theme="light"] .discount-badge {
  background: linear-gradient(135deg, #f43f5e 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(244,63,94,0.3) !important;
}
html[data-theme="light"] .section-badge {
  background:rgba(29,99,216,0.08)!important;color:#1d63d8!important;border:1px solid rgba(29,99,216,0.2)!important;
}

/* =====================================================
   LINKS — Cyan accent with hover glow
   ===================================================== */

html[data-theme="light"] a:not(.btn):not(.btn-primary):not(.ok-btn-order):not(.widget-btn):not(.logo) {
  color: #1d63d8 !important;
}
html[data-theme="light"] a:not(.btn):hover { color: #1d63d8 !important; }

/* =====================================================
   FORMS — Clean with cyan focus glow
   ===================================================== */

html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .form-control,
html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group textarea {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] .form-control:focus {
  outline: none !important;
  border-color: #1d63d8 !important;
  box-shadow: 0 0 0 3px rgba(29, 99, 216,0.15) !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #94a3b8 !important; }

/* =====================================================
   FOOTER — Slate gradient with attractive look
   ===================================================== */

html[data-theme="light"] footer {
  background:#ffffff!important;border-top:1px solid #e3e8f0!important;
}

html[data-theme="light"] footer,
html[data-theme="light"] footer p,
html[data-theme="light"] footer li,
html[data-theme="light"] footer span,
html[data-theme="light"] .footer-bottom *,
html[data-theme="light"] .footer-bottom p,
html[data-theme="light"] .footer-grid * {
  color: #475569 !important;
}
html[data-theme="light"] footer h1, html[data-theme="light"] footer h2,
html[data-theme="light"] footer h3, html[data-theme="light"] footer h4,
html[data-theme="light"] .footer-col h3, html[data-theme="light"] .footer-col h4,
html[data-theme="light"] footer strong, html[data-theme="light"] footer b {
  color: #0f172a !important;
}
html[data-theme="light"] footer a:not(:hover):not(.btn-primary) {
  color: #475569 !important;
}
html[data-theme="light"] footer a:hover {
  color: #1d63d8 !important;
}
html[data-theme="light"] [style*="color: #94a3b8"],
html[data-theme="light"] footer p[style*="color"] {
  color: #475569 !important;
}

/* =====================================================
   FAQ
   ===================================================== */

html[data-theme="light"] .faq-item,
html[data-theme="light"] details.faq-item {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.05) !important;
}
html[data-theme="light"] .faq-item:hover {
  border-color: #1d63d8 !important;
  box-shadow: 0 4px 12px rgba(29, 99, 216,0.1) !important;
}
html[data-theme="light"] .faq-question,
html[data-theme="light"] .faq-item summary { color: #0f172a !important; }
html[data-theme="light"] .faq-answer,
html[data-theme="light"] .faq-item p { color: #475569 !important; }

/* =====================================================
   FLOATING WIDGETS — Brand colors with glow
   ===================================================== */

html[data-theme="light"] .floating-widgets .widget-btn.whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(37,211,102,0.4) !important;
}
html[data-theme="light"] .floating-widgets .widget-btn.telegram {
  background: linear-gradient(135deg, #0088cc 0%, #006699 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(0,136,204,0.4) !important;
}
html[data-theme="light"] .floating-widgets .widget-btn,
html[data-theme="light"] .floating-widgets .widget-btn i { color: #ffffff !important; }
html[data-theme="light"] .widget-btn::before {
  background: rgba(255,255,255,0.95) !important;
  color: #1a1a1a !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
}

/* =====================================================
   IMAGES & DECORATIVE
   ===================================================== */

html[data-theme="light"] img[src*="world_map"] {
  filter: invert(1) brightness(0.6) hue-rotate(180deg);
}

html[data-theme="light"] .feature-card::before,
html[data-theme="light"] .map-container::before,
html[data-theme="light"] .testimonial-card::after,
html[data-theme="light"] .cta-box::before {
  opacity: 0 !important;
}

/* =====================================================
   STATUS COLORS
   ===================================================== */

html[data-theme="light"] .status-success { color: #059669 !important; }
html[data-theme="light"] .status-error { color: #dc2626 !important; }
html[data-theme="light"] .status-warning,
html[data-theme="light"] .status-degraded { color: #55637a !important; }

/* =====================================================
   SCROLLBAR — Cyan themed
   ===================================================== */

html[data-theme="light"] ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
html[data-theme="light"] ::-webkit-scrollbar-track {
  background: #f1f5f9;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #cbd5e1, #94a3b8);
  border-radius: 10px;
  border: 3px solid #f1f5f9;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background:#94a3b8;
}
html[data-theme="light"] {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

/* =====================================================
   MOBILE BACKDROP
   ===================================================== */

html[data-theme="light"] .mobile-backdrop { background: rgba(15,23,42,0.4) !important; }

/* End attractive theme */

/* ============================================
   DATACENTER / NETWORK MAP SECTION
   ============================================ */

/* Network map container - light bg */
html[data-theme="light"] .network-map-interactive {
  background: linear-gradient(180deg, #eef2f9 0%, #f7f9fc 100%) !important;
  border: 1px solid #cbd5e1 !important;
}

/* World map container - light overlay + show map */
html[data-theme="light"] .map-container {
  background:
    linear-gradient(rgba(248,250,252,0.85), rgba(248,250,252,0.95)),
    url("../img/world_map.webp") center / cover no-repeat !important;
  background-size: cover !important;
  border: 1px solid #cbd5e1 !important;
}

/* Map container hover */
html[data-theme="light"] .map-container:hover {
  border-color: rgba(29, 99, 216,0.4) !important;
  box-shadow: 0 25px 60px rgba(29, 99, 216,0.15), 0 0 30px rgba(29, 99, 216,0.1) !important;
}

/* World map image inside map - keep dark on light bg */
html[data-theme="light"] .map-container img[src*="world_map"],
html[data-theme="light"] img[src*="world_map"] {
  filter: invert(1) brightness(0.5) hue-rotate(180deg) !important;
  opacity: 0.7;
}

/* PIN LABELS - white bg + dark text + cyan border */
html[data-theme="light"] .pin-label {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #0f172a !important;
  border: 1px solid rgba(29, 99, 216,0.4) !important;
  box-shadow: 0 4px 12px rgba(29, 99, 216,0.1) !important;
}

/* Pin label on hover - more prominent */
html[data-theme="light"] .location-pin:hover .pin-label {
  background: #ffffff !important;
  color: #1d63d8 !important;
  border-color: #1d63d8 !important;
  box-shadow: 0 8px 25px rgba(29, 99, 216,0.25) !important;
  font-weight: 700 !important;
}

/* Pin dot - cyan */
html[data-theme="light"] .pin-dot,
html[data-theme="light"] .location-pin .pin-dot {
  background: #1d63d8 !important;
  box-shadow: 0 0 12px rgba(29, 99, 216,0.6), 0 0 0 4px rgba(29, 99, 216,0.2) !important;
}

/* Pulse rings on pins */
html[data-theme="light"] .pin-pulse,
html[data-theme="light"] .location-pin .pin-pulse {
  background: rgba(29, 99, 216,0.3) !important;
  border: 2px solid #1d63d8 !important;
}

/* Location pin label always visible */
html[data-theme="light"] .pin-label {
  opacity: 1 !important;
}

/* End map fixes */

/* ============================================
   MAP — Proper invert with counter-filter on pins
   ============================================ */

/* Override map container with NO heavy overlay + invert filter */
html[data-theme="light"] .map-container {
  background:
    linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.1)),
    url("../img/world_map.webp") center / cover no-repeat !important;
  background-size: cover !important;
  filter: invert(0.92) hue-rotate(180deg) saturate(0.6) !important;
  border: 1px solid #cbd5e1 !important;
}

/* Counter-filter on all interactive elements inside map (pins, labels, etc.) */
html[data-theme="light"] .map-container .location-pin,
html[data-theme="light"] .map-container .pin-dot,
html[data-theme="light"] .map-container .pin-pulse,
html[data-theme="light"] .map-container .pin-label,
html[data-theme="light"] .map-container .pin-line,
html[data-theme="light"] .map-container::before,
html[data-theme="light"] .map-container::after {
  filter: invert(0.92) hue-rotate(180deg) saturate(0.6) !important;
}

/* Pin label - solid white bg with cyan border (already good, but reinforce) */
html[data-theme="light"] .pin-label {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #1d63d8 !important;
  box-shadow: 0 4px 12px rgba(29, 99, 216,0.15) !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .location-pin:hover .pin-label {
  background: #1d63d8 !important;
  color: #ffffff !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 8px 25px rgba(29, 99, 216,0.4) !important;
}

/* Pin dot - solid bright cyan */
html[data-theme="light"] .pin-dot,
html[data-theme="light"] .location-pin .pin-dot {
  background: #1d63d8 !important;
  box-shadow: 0 0 0 4px rgba(29, 99, 216,0.25), 0 0 12px rgba(29, 99, 216,0.5) !important;
}

/* End map proper fix */

/* ============================================
   FINAL FIXES — Visibility audit
   ============================================ */

/* PRICING — High specificity solid cyan */
html[data-theme="light"] td.ok-price,
html[data-theme="light"] .ok-table td.ok-price,
html[data-theme="light"] .ok-table tr td.ok-price,
html[data-theme="light"] .ok-table tbody tr td.ok-price {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #1d63d8 !important;
  color: #1d63d8 !important;
  font-weight: 800 !important;
  font-size: 1.4rem !important;
}

/* All price-related elements */
html[data-theme="light"] .price,
html[data-theme="light"] .price-val,
html[data-theme="light"] .plan-price,
html[data-theme="light"] .pricing-price,
html[data-theme="light"] [class*="-price"]:not([class*="popular"]):not([class*="discount"]):not([class*="disclaimer"]) {
  color: #1d63d8 !important;
  -webkit-text-fill-color: #1d63d8 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
}

/* ok-table td default text (non-price cells) */
html[data-theme="light"] .ok-table td:not(.ok-price) {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
}

/* Pricing card prices */
html[data-theme="light"] .pricing-card .price,
html[data-theme="light"] .pricing-card .plan-price,
html[data-theme="light"] .pricing-card-v2 .price,
html[data-theme="light"] .pricing-card-v2 .plan-price-v2 {
  color: #1d63d8 !important;
  -webkit-text-fill-color: #1d63d8 !important;
  font-weight: 800;
}

/* Plan period (small text after price) */
html[data-theme="light"] .plan-price span,
html[data-theme="light"] .plan-price-v2 .period {
  color: #475569 !important;
}

/* Plan name/title */
html[data-theme="light"] .plan-name,
html[data-theme="light"] .pricing-card h3,
html[data-theme="light"] .pricing-card h4 {
  color: #0f172a !important;
}

/* Plan features list */
html[data-theme="light"] .plan-features li,
html[data-theme="light"] .plan-features-v2 li {
  color: #1e293b !important;
}
html[data-theme="light"] .plan-features li i,
html[data-theme="light"] .plan-features-v2 li i {
  color: #1d63d8 !important;
}

/* Plan description */
html[data-theme="light"] .plan-desc {
  color: #475569 !important;
}

/* Comparison table content */
html[data-theme="light"] .comparison-table td {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
}
html[data-theme="light"] .comparison-table td:first-child {
  color: #0f172a !important;
  font-weight: 700;
}
html[data-theme="light"] .comparison-table thead th {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
html[data-theme="light"] .comparison-table i.success {
  color: #059669 !important;
}
html[data-theme="light"] .comparison-table i.error {
  color: #dc2626 !important;
}

/* Mobile price view */
html[data-theme="light"] .ok-table td::before {
  color: #475569 !important;
  font-weight: 700;
}

/* FAQ visibility */
html[data-theme="light"] .faq-item,
html[data-theme="light"] details.faq-item {
  background: #ffffff !important;
}
html[data-theme="light"] .faq-question,
html[data-theme="light"] .faq-item summary,
html[data-theme="light"] .faq-item h3,
html[data-theme="light"] .faq-item h4 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
html[data-theme="light"] .faq-answer,
html[data-theme="light"] .faq-item p,
html[data-theme="light"] details[open] .faq-answer {
  color: #475569 !important;
}

/* Testimonials */
html[data-theme="light"] .testimonial-card,
html[data-theme="light"] .testimonial,
html[data-theme="light"] .review-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 12px rgba(15,23,42,0.06) !important;
}
html[data-theme="light"] .testimonial-card *,
html[data-theme="light"] .testimonial * {
  color: #1e293b !important;
}
html[data-theme="light"] .testimonial-card h3,
html[data-theme="light"] .testimonial-card h4,
html[data-theme="light"] .client-details h3,
html[data-theme="light"] .client-details h4 {
  color: #0f172a !important;
}
html[data-theme="light"] .client-details span,
html[data-theme="light"] .client-role {
  color: #475569 !important;
}

/* Feature card content */
html[data-theme="light"] .feature-card-v2 h3,
html[data-theme="light"] .feature-card h3,
html[data-theme="light"] .privacy-card h3 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
html[data-theme="light"] .feature-card-v2 p,
html[data-theme="light"] .feature-card p,
html[data-theme="light"] .privacy-card p {
  color: #475569 !important;
}

/* Compliance card */
html[data-theme="light"] .compliance-card h3 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
html[data-theme="light"] .compliance-card p {
  color: #475569 !important;
}

/* Stat card numbers and labels */
html[data-theme="light"] .stat-card .stat-label,
html[data-theme="light"] .stat-label {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-weight: 700;
}
html[data-theme="light"] .stat-card .stat-desc,
html[data-theme="light"] .stat-desc {
  color: #475569 !important;
}

/* Migration text */
html[data-theme="light"] .migration-text h2,
html[data-theme="light"] .migration-container h2 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
html[data-theme="light"] .migration-text p,
html[data-theme="light"] .migration-container p {
  color: #475569 !important;
}

/* Server box (network section) */
html[data-theme="light"] .server-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
}
html[data-theme="light"] .server-box * {
  color: inherit !important;
}

/* Network status */
html[data-theme="light"] .uptime-footer,
html[data-theme="light"] .incident-date,
html[data-theme="light"] .no-incidents,
html[data-theme="light"] .update-time {
  color: #475569 !important;
}

/* Founder card (about-us) */
html[data-theme="light"] .founder-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .founder-info h3 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
html[data-theme="light"] .founder-role {
  color: #1d63d8 !important;
}
html[data-theme="light"] .founder-bio {
  color: #475569 !important;
}
html[data-theme="light"] .founder-social a {
  color: #1d63d8 !important;
}

/* Legal/content pages */
html[data-theme="light"] .legal-content,
html[data-theme="light"] .content-area {
  color: #1e293b !important;
}
html[data-theme="light"] .legal-content p,
html[data-theme="light"] .legal-content li,
html[data-theme="light"] .content-area p {
  color: #475569 !important;
}
html[data-theme="light"] .legal-content h2,
html[data-theme="light"] .content-area h2 {
  color: #1d63d8 !important;
}
html[data-theme="light"] .legal-content h3,
html[data-theme="light"] .legal-content h4 {
  color: #0f172a !important;
}

/* Status banner */
html[data-theme="light"] .status-banner {
  background: #ffffff !important;
  color: #0f172a !important;
}
html[data-theme="light"] .status-banner.maintenance {
  border: 1px solid #f59e0b !important;
  background: #f2f6fd !important;
  color: #55637a !important;
}

/* Component cards (network status) */
html[data-theme="light"] .component-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] .component-card *:not(.gradient-text) {
  -webkit-text-fill-color: currentColor !important;
}

/* Hero description (about etc) */
html[data-theme="light"] .hero-description {
  color: #475569 !important;
}

/* Section badges */
html[data-theme="light"] .section-badge {
  background:rgba(29,99,216,0.08)!important;color:#1d63d8!important;border:1px solid rgba(29,99,216,0.2)!important;
}

/* Toggle label (currency etc) */
html[data-theme="light"] .toggle-label {
  color: #475569 !important;
}

/* End comprehensive visibility fix */

/* ============================================
   HERO SECTION — UNIFIED gradient for product pages
   ============================================ */

/* INDEX + ALL PRODUCT PAGES — Same attractive hero */
html[data-theme="light"] .hero,
html[data-theme="light"] .hero-centered,
html[data-theme="light"] section.hero,
html[data-theme="light"] section.hero-centered,
html[data-theme="light"] #dedicated-hero,
html[data-theme="light"] #vps-hero,
html[data-theme="light"] #web-hosting-hero,
html[data-theme="light"] #reseller-hero,
html[data-theme="light"] .hero-slider-container,
html[data-theme="light"] .interactive-bg-3d {
  background-image:
    radial-gradient(ellipse at 25% 15%, rgba(29, 99, 216,0.18) 0%, transparent 45%),
    radial-gradient(ellipse at 75% 85%, rgba(29, 99, 216,0.15) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(236,72,153,0.06) 0%, transparent 60%),
    linear-gradient(135deg, #eef2f9 0%, #f5f3ff 50%, #fdf2f8 100%) !important;
  background-color: #fafbff !important;
  background-size: auto !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Light mode: restore each hero's background image (light overlay so the image is
   clearly visible AND dark hero text stays legible). Placed AFTER the generic hero
   rule above so it wins the cascade. Overlay ~0.5-0.6 = visible but light-friendly. */
html[data-theme="light"] #vps-hero {
  background-image: radial-gradient(ellipse 78% 95% at 50% 46%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.62) 46%, rgba(255,255,255,0.14) 100%), url('../img/hero-vps.webp') !important;
  background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;
}
html[data-theme="light"] #dedicated-hero {
  background-image: radial-gradient(ellipse 78% 95% at 50% 46%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.62) 46%, rgba(255,255,255,0.14) 100%), url('../img/hero-dedicated.webp') !important;
  background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;
}
html[data-theme="light"] #web-hosting-hero {
  background-image: radial-gradient(ellipse 78% 95% at 50% 46%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.62) 46%, rgba(255,255,255,0.14) 100%), url('../img/hero-web-hosting-v2.webp') !important;
  background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;
}
html[data-theme="light"] #reseller-hero {
  background-image: radial-gradient(ellipse 78% 95% at 50% 46%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.62) 46%, rgba(255,255,255,0.14) 100%), url('../img/hero-reseller-v2.webp') !important;
  background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;
}
/* Home page hero — image lives on .interactive-bg-3d (the 3D canvas layer's backdrop). */
html[data-theme="light"] .interactive-bg-3d {
  background-image: radial-gradient(ellipse 78% 95% at 50% 46%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.62) 46%, rgba(255,255,255,0.14) 100%), url('../img/hero-index.webp') !important;
  background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;
}

/* LEGAL/COMPANY PAGES — Simple clean hero */
html[data-theme="light"] body:has(.legal-content) .hero,
html[data-theme="light"] body:has(.content-area) .hero,
html[data-theme="light"] .page-header,
html[data-theme="light"] .legal-page-hero,
html[data-theme="light"] .simple-hero,
html[data-theme="light"] .breadcrumbs,
html[data-theme="light"] .legal-content,
html[data-theme="light"] .content-area {
  background-image: none !important;
  background:
    linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
  background-color: #f8fafc !important;
}

/* About-us page hero - subtle */
html[data-theme="light"] .about-hero,
html[data-theme="light"] .team-section {
  background: #ffffff !important;
}

/* Contact page hero */
html[data-theme="light"] .contact-hero,
html[data-theme="light"] .contact-form-section {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(29, 99, 216,0.10) 0%, transparent 50%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
}

/* Network status page */
html[data-theme="light"] .status-banner,
html[data-theme="light"] .network-status-page {
  background: #ffffff !important;
}

/* Hero canvas (animated) - keep subtle */
html[data-theme="light"] canvas#hero-canvas,
html[data-theme="light"] canvas#hero-network-canvas,
html[data-theme="light"] #interactive-bg canvas,
html[data-theme="light"] .network-particles {
  opacity: 0.25 !important;
}

/* Hero text - dark for visibility */
html[data-theme="light"] .hero h1,
html[data-theme="light"] .hero-content-v2 h1,
html[data-theme="light"] .slide-content h1 {
  color: #0f172a !important;
}
html[data-theme="light"] .hero p,
html[data-theme="light"] .hero-content-v2 p,
html[data-theme="light"] .slide-content p {
  color: #475569 !important;
}

/* Hero gradient text spans (Offshore Dedicated Server etc) */
html[data-theme="light"] .hero .gradient-text,
html[data-theme="light"] .hero-content-v2 .gradient-text,
html[data-theme="light"] .slide-content h1 span,
html[data-theme="light"] .slide-content .h1-style span {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #1d63d8 !important;
  color: #1d63d8 !important;
}

/* End */

/* ============================================
   COMPARISON TABLE — Stronger overrides
   ============================================ */

/* THEAD with high specificity to beat #0a0b12 !important */
html[data-theme="light"] .comparison-table thead,
html[data-theme="light"] .comparison-table thead tr,
html[data-theme="light"] .comparison-table thead th,
html[data-theme="light"] table.comparison-table thead th {
  background:#f2f5fa!important;background-color:#f2f5fa!important;color:#101828!important;border:none!important;border-bottom:1px solid #dbe3ee!important;
}

/* Table itself */
html[data-theme="light"] table.comparison-table,
html[data-theme="light"] .comparison-table,
html[data-theme="light"] .comparison-section table,
html[data-theme="light"] .comparison-container table {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Section wrappers */
html[data-theme="light"] .comparison-section {
  background: #ffffff !important;
}
html[data-theme="light"] .comparison-container {
  background: transparent !important;
}

/* Table body cells */
html[data-theme="light"] .comparison-table tbody,
html[data-theme="light"] .comparison-table tbody tr,
html[data-theme="light"] .comparison-table tbody td,
html[data-theme="light"] .comparison-table tr,
html[data-theme="light"] .comparison-table td {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

/* First column (server names) */
html[data-theme="light"] .comparison-table td:first-child,
html[data-theme="light"] .comparison-table tbody td:first-child {
  background:#f7f9fc!important;color:#101828!important;-webkit-text-fill-color:#101828!important;font-weight:700!important;
}

/* Hover row */
html[data-theme="light"] .comparison-table tbody tr:hover td,
html[data-theme="light"] .comparison-table tr:hover td {
  background:#f4f7fb!important;
}

/* Recommended row */
html[data-theme="light"] .comparison-table .recommended,
html[data-theme="light"] .comparison-table td.recommended {
  background: rgba(29, 99, 216,0.05) !important;
}

/* Icons - success/error */
html[data-theme="light"] .comparison-table i.success,
html[data-theme="light"] .comparison-table i.fa-check {
  color: #059669 !important;
  -webkit-text-fill-color: #059669 !important;
}
html[data-theme="light"] .comparison-table i.error,
html[data-theme="light"] .comparison-table i.fa-times,
html[data-theme="light"] .comparison-table i.fa-xmark {
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
}

/* Mobile data-plan label */
html[data-theme="light"] .comparison-table td:not(:first-child)::before {
  color: #475569 !important;
}

/* End */

/* === Mobile drawer Sign In button — clean shadow override (must come last) === */
html[data-theme="light"] .mobile-drawer .drawer-footer .btn-primary {
  background: #101828 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 1px 2px rgba(16,24,40,0.12) !important;
}
html[data-theme="light"] .mobile-drawer .drawer-footer .btn-primary:hover {
  background: #1f2b40 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 1px 2px rgba(16,24,40,0.12) !important;
}
html[data-theme="light"] .mobile-drawer .drawer-footer {
  background: rgba(0,0,0,0.03) !important;
  border-top: 1px solid rgba(0,0,0,0.06) !important;
}
html[data-theme="light"] .mobile-drawer {
  background: linear-gradient(160deg, #ffffff 0%, #f8fafc 100%) !important;
  border-left: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: -20px 0 60px rgba(0,0,0,0.15) !important;
}
html[data-theme="light"] .mobile-drawer .drawer-menu a {
  color: #334155 !important;
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}
html[data-theme="light"] .drawer-header {
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
html[data-theme="light"] .drawer-close {
  background: rgba(0,0,0,0.04) !important;
  color: #475569 !important;
}


/* === Feature Comparison Table v2 — light mode === */
html[data-theme="light"] .comparison-section .comparison-subtitle{color:#475569!important;}
html[data-theme="light"] .feature-comparison-v2{background:#ffffff!important;border:1px solid rgba(0,0,0,0.08)!important;box-shadow:0 4px 24px rgba(15,23,42,0.04)!important;}
html[data-theme="light"] .feature-comparison-v2 thead th{
  background:#f2f5fa!important;color:#101828!important;border-bottom:1px solid #dbe3ee!important;
}
html[data-theme="light"] .feature-comparison-v2 thead th:first-child{background:transparent!important;}
html[data-theme="light"] .feature-comparison-v2 tbody td{color:#334155!important;border-bottom:1px solid rgba(0,0,0,0.06)!important;}
html[data-theme="light"] .feature-comparison-v2 tbody td:first-child{color:#0f172a!important;background:rgba(0,0,0,0.025)!important;font-weight:500!important;}
html[data-theme="light"] .feature-comparison-v2 tbody tr:hover td{background:rgba(29, 99, 216,0.04)!important;}
html[data-theme="light"] .feature-comparison-v2 .success{color:#0d9488!important;}
html[data-theme="light"] .feature-comparison-v2 td.recommended{background:rgba(233, 180, 76,0.07)!important;border-left:1px solid rgba(233, 180, 76,0.3)!important;border-right:1px solid rgba(233, 180, 76,0.3)!important;}

html[data-theme="light"] .feature-comparison-v2 .product-header-row td{background:linear-gradient(180deg,#f8fafc,#ffffff)!important;border-bottom:2px solid rgba(0,0,0,0.08)!important;}
html[data-theme="light"] .feature-comparison-v2 .product-header-row .plan-cell-title{
  background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;-webkit-text-fill-color:#101828!important;color:#101828!important;
}
html[data-theme="light"] .feature-comparison-v2 .product-header-row .plan-cell-desc{color:#64748b!important;}
html[data-theme="light"] .feature-comparison-v2 .product-header-row .plan-cell-price{color:#0f172a!important;}
html[data-theme="light"] .feature-comparison-v2 .product-header-row .plan-cell-price .term{color:#64748b!important;}

html[data-theme="light"] .feature-comparison-v2 .product-order-row td{background:linear-gradient(0deg,#f8fafc,#ffffff)!important;border-top:2px solid rgba(0,0,0,0.08)!important;}
html[data-theme="light"] .feature-comparison-v2 .btn-compare-order{
  background:#101828!important;color:#ffffff!important;box-shadow:0 1px 2px rgba(16,24,40,0.12)!important;
}
html[data-theme="light"] .feature-comparison-v2 .btn-compare-order:hover{box-shadow:0 8px 20px rgba(29, 99, 216,0.35)!important;}

@media (max-width:768px){
  html[data-theme="light"] .feature-comparison-v2 tbody tr{background:#ffffff!important;border:1px solid rgba(0,0,0,0.08)!important;box-shadow:0 2px 8px rgba(15,23,42,0.04)!important;}
  html[data-theme="light"] .feature-comparison-v2 tbody td[data-plan]::before{color:#0f172a!important;}
  html[data-theme="light"] .feature-comparison-v2 .product-header-row{
  background:#f7f9fc!important;
}
}

/* === Feature group section header — light mode === */
html[data-theme="light"] .feature-comparison-v2 .feature-group-row td{
  background:#f2f5fa!important;color:#101828!important;border-top:1px solid #dbe3ee!important;border-bottom:1px solid #dbe3ee!important;
}
@media (max-width:768px){
  html[data-theme="light"] .feature-comparison-v2 .feature-group-row td{
  background:#f2f5fa!important;color:#101828!important;border-top:1px solid #dbe3ee!important;border-bottom:1px solid #dbe3ee!important;
}
}

/* === Feature sub-label row — light mode === */
html[data-theme="light"] .feature-comparison-v2 .feature-sub-label-row td{background:rgba(29, 99, 216,0.05)!important;color:#1d63d8!important;border-top:1px solid rgba(0,0,0,0.04)!important;}
html[data-theme="light"] .feature-comparison-v2 .feature-sub-label-row:hover td{background:rgba(29, 99, 216,0.08)!important;}
@media (max-width:768px){
  html[data-theme="light"] .feature-comparison-v2 .feature-sub-label-row td{background:rgba(29, 99, 216,0.06)!important;border:1px solid rgba(29, 99, 216,0.18)!important;color:#1d63d8!important;}
}

/* === Feature label cell — light mode === */
html[data-theme="light"] .feature-comparison-v2 tbody tr:not(.product-header-row):not(.product-order-row):not(.feature-group-row) td:first-child{
  background:#f7f9fc!important;border-bottom:1px solid #e3e8f0!important;color:#101828!important;
}
@media (max-width:768px){
  html[data-theme="light"] .feature-comparison-v2 tbody tr:not(.product-header-row):not(.product-order-row):not(.feature-group-row) td:first-child{
  background:#f7f9fc!important;border-bottom:1px solid #e3e8f0!important;color:#101828!important;
}
}

/* =====================================================
   TRUST / PROOF STRIP (below hero, all product pages)
   ===================================================== */
.trust-strip-wrap{background:rgba(255,255,255,0.025);border-top:1px solid rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.06);}
.trust-strip{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0.9rem 2.2rem;max-width:1100px;margin:0 auto;padding:1.05rem 1.25rem;}
.trust-strip .ts-item{display:flex;align-items:center;gap:0.55rem;color:var(--text-muted);font-size:0.9rem;font-weight:600;white-space:nowrap;}
.trust-strip .ts-item i{color:var(--primary);font-size:1.02rem;}
@media (max-width:600px){
  .trust-strip{gap:0.7rem 1.4rem;padding:0.9rem 1rem;}
  .trust-strip .ts-item{font-size:0.82rem;}
}
/* Light mode */
html[data-theme="light"] .trust-strip-wrap{background:rgba(29, 99, 216,0.05);border-top:1px solid rgba(0,0,0,0.06);border-bottom:1px solid rgba(0,0,0,0.06);}
html[data-theme="light"] .trust-strip .ts-item{color:#475569;}
html[data-theme="light"] .trust-strip .ts-item i{color:#1d63d8;}

/* ============================================================
   LIGHT-THEME MAP — dedicated light asset (2026-06-12).
   Kills ALL earlier invert/overlay hacks above: the map now uses
   world_map_light.webp (generated from the original), and the pins
   keep their normal light-mode styling — no filters anywhere.
   ============================================================ */
html[data-theme="light"] .map-container,
html[data-theme="light"] .map-container .location-pin,
html[data-theme="light"] .map-container .pin-dot,
html[data-theme="light"] .map-container .pin-pulse,
html[data-theme="light"] .map-container .pin-label,
html[data-theme="light"] .map-container .pin-line,
html[data-theme="light"] .map-container::before,
html[data-theme="light"] .map-container::after {
  filter: none !important;
}
/* Light theme: Gemini-generated dotted teal world map (2026-06-12) */
html[data-theme="light"] .map-container {
  background:
    linear-gradient(rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.0)),
    url("../img/world_map_light.webp?v=3") center / cover no-repeat !important;
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.1) !important;
}

/* Light-theme map (Gemini dotted map) — Europe sits higher on this projection,
   so the pins need their own coordinates here. Dark theme keeps the originals. */
html[data-theme="light"] .netherlands-pin { top: 23.5%; left: 48.6%; }
html[data-theme="light"] .germany-pin { top: 28%; left: 50.3%; }
/* perf: drop hero bg image on mobile (all themes) */@media (max-width:767px){#dedicated-hero,html[data-theme="light"] #dedicated-hero,html[data-theme="dark"] #dedicated-hero,#vps-hero,html[data-theme="light"] #vps-hero,html[data-theme="dark"] #vps-hero,#web-hosting-hero,html[data-theme="light"] #web-hosting-hero,html[data-theme="dark"] #web-hosting-hero,#reseller-hero,html[data-theme="light"] #reseller-hero,html[data-theme="dark"] #reseller-hero,.interactive-bg-3d,html[data-theme="light"] .interactive-bg-3d,html[data-theme="dark"] .interactive-bg-3d{background-image:none!important}}

/* VDS page hero - light theme + mobile perf, mirrors #dedicated-hero */
html[data-theme="light"] #vds-hero{background-image:radial-gradient(ellipse 78% 95% at 50% 46%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.62) 46%, rgba(255,255,255,0.14) 100%),url("../img/hero-vds-v2.webp")!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;}
@media (max-width:767px){#vds-hero,html[data-theme="light"] #vds-hero,html[data-theme="dark"] #vds-hero{background-image:none!important}}