/* =====================================================
   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: #ecfeff;
  --bg-purple: #faf5ff;
  --bg-mint: #f0fdfa;
  --bg-amber: #fffbeb;
  --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: #0891b2;
  --primary-hover: #0e7490;
  --primary-light: #06b6d4;
  --primary-glow: rgba(8,145,178,0.15);

  --secondary: #7c3aed;
  --secondary-light: #8b5cf6;
  --secondary-glow: rgba(124,58,237,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(8,145,178,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(124,58,237,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(8,145,178,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(124,58,237,0.10) 0%, transparent 50%),
    linear-gradient(135deg, #ecfeff 0%, #f5f3ff 50%, #fdf2f8 100%) !important;
  background-image: none, none, linear-gradient(135deg, #ecfeff 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: #475569 !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: linear-gradient(135deg, #0891b2 0%, #7c3aed 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !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: linear-gradient(180deg, #ffffff 0%, #ecfeff 100%) !important;
}

html[data-theme="light"] .features-section-v2 {
  background: linear-gradient(180deg, #ecfeff 0%, #ffffff 100%) !important;
}

html[data-theme="light"] #who-we-are,
html[data-theme="light"] .who-we-are-section {
  background: linear-gradient(180deg, #ffffff 0%, #faf5ff 100%) !important;
}

html[data-theme="light"] #compliance-legal,
html[data-theme="light"] .compliance-section {
  background: linear-gradient(180deg, #faf5ff 0%, #ecfeff 100%) !important;
}

html[data-theme="light"] .migration-section {
  background: linear-gradient(180deg, #ffffff 0%, #f0fdfa 100%) !important;
}

html[data-theme="light"] #network {
  background: linear-gradient(180deg, #f0fdfa 0%, #ecfeff 100%) !important;
}

html[data-theme="light"] .payments-banner {
  background: linear-gradient(180deg, #ffffff 0%, #fffbeb 50%, #ffffff 100%) !important;
}

html[data-theme="light"] #faq,
html[data-theme="light"] .faq-section {
  background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%) !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: linear-gradient(180deg, #ecfeff 0%, #faf5ff 100%) !important;
}

html[data-theme="light"] .comparison-section {
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important;
}

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

html[data-theme="light"] body,
html[data-theme="light"] p,
html[data-theme="light"] span:not(.gradient-text):not([class*="badge"]),
html[data-theme="light"] li, html[data-theme="light"] td, html[data-theme="light"] th,
html[data-theme="light"] label, html[data-theme="light"] dd, html[data-theme="light"] dt,
html[data-theme="light"] strong, html[data-theme="light"] em, html[data-theme="light"] b,
html[data-theme="light"] div:not([class*="gradient"]) {
  color: #1e293b !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: linear-gradient(135deg, #0891b2 0%, #7c3aed 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* WWA heading - colorful gradient */
html[data-theme="light"] .wwa-heading {
  background: linear-gradient(135deg, #0891b2, #06b6d4, #7c3aed) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Stat values - bright cyan-purple gradient */
html[data-theme="light"] .stat-value {
  background: linear-gradient(135deg, #0891b2 0%, #7c3aed 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 800;
}

/* Payments banner heading - amber gradient */
html[data-theme="light"] .payments-banner h3 {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Login card - gradient */
html[data-theme="light"] .login-card h2 {
  background: linear-gradient(135deg, #0891b2, #7c3aed) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !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 current - cyan */
html[data-theme="light"] .ok-breadcrumb .current {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #0891b2 !important;
  color: #0891b2 !important;
}

/* About title */
html[data-theme="light"] .about-hero-title {
  background: linear-gradient(135deg, #0891b2, #7c3aed) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !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-[#00e5ff]"],
html[data-theme="light"] [class*="text-cyan-400"] {
  color: #0891b2 !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 {
  filter: brightness(0) saturate(100%) invert(15%) sepia(30%) saturate(2500%) hue-rotate(170deg) !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: #0891b2 !important; }

html[data-theme="light"] #theme-toggle.theme-toggle-btn {
  background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
  color: #d97706 !important;
  border: 1px solid #fcd34d !important;
}
html[data-theme="light"] #theme-toggle.theme-toggle-btn:hover {
  background: linear-gradient(135deg, #fde68a, #fcd34d) !important;
  color: #b45309 !important;
}

/* Currency */
html[data-theme="light"] #currency-dropdown-btn {
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0) !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !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: linear-gradient(135deg, #ecfeff, #cffafe) !important;
  color: #0891b2 !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: #0891b2 !important;
  box-shadow: 0 10px 30px rgba(8,145,178,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: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%) !important;
  color: #0891b2 !important;
  border: 1px solid rgba(8,145,178,0.2) !important;
  box-shadow: 0 4px 12px rgba(8,145,178,0.1) !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: #0891b2 !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(8,145,178,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: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%) !important;
  color: #0f172a !important;
  border-bottom: 2px solid #0891b2 !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: linear-gradient(90deg, #ecfeff, transparent) !important;
}
html[data-theme="light"] .ok-price,
html[data-theme="light"] .price {
  background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 800;
}

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

html[data-theme="light"] .btn-primary,
html[data-theme="light"] .ok-btn-order {
  background: linear-gradient(135deg, #0891b2 0%, #06b6d4 50%, #0891b2 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(8,145,178,0.4), 0 0 0 1px rgba(8,145,178,0.1) inset !important;
}
html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] .ok-btn-order:hover {
  background: linear-gradient(135deg, #0e7490 0%, #0891b2 50%, #0e7490 100%) !important;
  box-shadow: 0 6px 24px rgba(8,145,178,0.5), 0 0 30px rgba(124,58,237,0.2) !important;
  transform: translateY(-2px);
}
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: #0891b2 !important;
  border: 2px solid #0891b2 !important;
}
html[data-theme="light"] .btn:not(.btn-primary):not(.ok-btn-order):hover {
  background: linear-gradient(135deg, #ecfeff, #cffafe) !important;
  border-color: #0e7490 !important;
  color: #0e7490 !important;
}

/* Badges - colorful */
html[data-theme="light"] .popular-tag,
html[data-theme="light"] .popular-badge {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(245,158,11,0.3) !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: linear-gradient(135deg, rgba(8,145,178,0.1), rgba(124,58,237,0.1)) !important;
  color: #0891b2 !important;
  border: 1px solid rgba(8,145,178,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: #0891b2 !important;
}
html[data-theme="light"] a:not(.btn):hover { color: #0e7490 !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: #0891b2 !important;
  box-shadow: 0 0 0 3px rgba(8,145,178,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: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%) !important;
  border-top: 1px solid #cbd5e1 !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: #0891b2 !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: #0891b2 !important;
  box-shadow: 0 4px 12px rgba(8,145,178,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: #d97706 !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: linear-gradient(180deg, #0891b2, #06b6d4);
}
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 */