/* ============================================================
   JAVIR — THEME SYSTEM
   Dark (default) ↔ Light, toggled via html[data-theme="light"]
   Light = cool paper, navy ink, deep-blue accents.
   Product mockups (brand panel / chat) intentionally stay dark
   — they read as "product screenshots" on a light canvas.
============================================================ */

/* ============================================================
   0. THEME TOGGLE BUTTON (both themes)
============================================================ */
#themeToggle {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 12px;
  border: 1px solid rgba(117,239,255,.18);
  background: rgba(10,22,41,.6);
  color: #dff5ff;
  cursor: pointer;
  transition: transform .3s var(--ease-spring), border-color .3s, background .3s, box-shadow .3s;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
#themeToggle:hover {
  transform: translateY(-1px);
  border-color: rgba(117,239,255,.4);
  box-shadow: 0 8px 22px rgba(0,0,0,.3), 0 0 20px rgba(55,183,255,.18);
}
#themeToggle:active { transform: scale(.94); }
#themeToggle svg { width: 18px; height: 18px; display: block; }
#themeToggle .icon-sun { display: block; }
#themeToggle .icon-moon { display: none; }
html[data-theme="light"] #themeToggle .icon-sun { display: none; }
html[data-theme="light"] #themeToggle .icon-moon { display: block; }

/* Smooth cross-fade when switching */
html.theme-switching body,
html.theme-switching .navbar,
html.theme-switching .card,
html.theme-switching .value-card,
html.theme-switching .usecase-card,
html.theme-switching .int-card,
html.theme-switching .faq-item,
html.theme-switching .sim-card,
html.theme-switching .javira-shell,
html.theme-switching .cta-shell,
html.theme-switching .contact-card,
html.theme-switching .footer-card,
html.theme-switching .stats-strip {
  transition: background .45s ease, background-color .45s ease,
              border-color .45s ease, color .45s ease, box-shadow .45s ease !important;
}

/* Navbar slotting for the toggle */
@media (max-width: 900px) {
  .navbar { flex-wrap: wrap; }
  .navbar .logo { order: 1; }
  #themeToggle { order: 2; margin-left: auto; }
  .navbar .mobile-menu { order: 3; }
  .navbar .nav-links { order: 10; }
  .navbar .btn-group.nav-actions { order: 4; }
}

/* ============================================================
   1. LIGHT — DESIGN TOKENS
============================================================ */
html[data-theme="light"] {
  color-scheme: light;
}
html[data-theme="light"] body { background: #F4F6FB; }

html[data-theme="light"] {
  --bg-deepest: #F4F6FB;
  --bg-deep:    #F7F9FC;
  --bg:         #FAFBFE;
  --bg-2:       #FFFFFF;
  --panel:        rgba(255, 255, 255, 0.82);
  --panel-strong: rgba(255, 255, 255, 0.96);
  --panel-light:  rgba(11, 20, 40, 0.035);

  --white: #0B1428;          /* "strong text" token */
  --text:  #2B384E;
  --muted: #5C6B82;
  --muted-2: #8794A8;
  --line:    rgba(11, 20, 40, 0.10);
  --line-hi: rgba(11, 20, 40, 0.18);

  --cyan-50:  #0B3A5C;
  --cyan-200: #0E5E8E;
  --cyan-300: #2F46CE;       /* accent on light */
  --cyan-400: #0B6BD0;
  --cyan-500: #2F46CE;
  --blue-400: #1D6AE5;
  --blue-500: #2F46CE;
  --blue-600: #2639B2;

  --red:    #C42045;
  --red-soft: rgba(217, 45, 76, 0.08);
  --green:  #0B9E63;
  --gold:   #B26A09;

  --shadow-sm: 0 4px 14px rgba(15, 30, 60, .06);
  --shadow:    0 16px 44px rgba(15, 30, 60, .09);
  --shadow-lg: 0 28px 72px rgba(15, 30, 60, .13);
  --glow-cyan: 0 0 40px rgba(47, 70, 206, .12);
  --glow-cyan-strong: 0 0 60px rgba(47, 70, 206, .18);
}

/* ============================================================
   2. LIGHT — AMBIENT BACKGROUND
============================================================ */
html[data-theme="light"] .bg-grad {
  background:
    radial-gradient(1100px 720px at 12% -8%, rgba(47,70,206,.10), transparent 60%),
    radial-gradient(900px 650px at 88% 6%, rgba(124,92,245,.07), transparent 55%),
    radial-gradient(820px 560px at 50% 116%, rgba(47,70,206,.05), transparent 60%),
    linear-gradient(180deg, #FCFDFF 0%, #F6F8FC 48%, #EFF2F9 100%);
}
html[data-theme="light"] .bg-grad::after {
  opacity: .25;
  filter: blur(60px) saturate(110%);
}
html[data-theme="light"] .bg-grid {
  background-image:
    linear-gradient(rgba(15,40,80,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,40,80,.05) 1px, transparent 1px);
  opacity: .5;
}
html[data-theme="light"] .bg-orb { opacity: .26; filter: blur(140px); }
html[data-theme="light"] .bg-orb.o1 { background: radial-gradient(circle, rgba(47,70,206,.45), transparent 70%); }
html[data-theme="light"] .bg-orb.o2 { background: radial-gradient(circle, rgba(124,92,245,.34), transparent 70%); }
html[data-theme="light"] .bg-orb.o3 { background: radial-gradient(circle, rgba(99,102,241,.30), transparent 70%); }
html[data-theme="light"] .bg-noise { opacity: .025; mix-blend-mode: multiply; }
html[data-theme="light"] .bg-fixed::after {
  background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(180,200,225,.25) 100%);
}

html[data-theme="light"] .scroll-progress {
  background: linear-gradient(90deg, #2F46CE, #7C5CF5, #2F46CE);
  background-size: 200% 100%;
  box-shadow: 0 0 14px rgba(47,70,206,.4);
}

/* ============================================================
   3. LIGHT — NAVBAR
============================================================ */
html[data-theme="light"] .navbar {
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.78));
  border-color: rgba(11,20,40,.08);
  box-shadow: 0 10px 30px rgba(15,30,60,.07), inset 0 1px 0 rgba(255,255,255,.8);
}
html[data-theme="light"] .navbar.scrolled {
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(252,253,255,.92));
  border-color: rgba(11,20,40,.1);
  box-shadow: 0 16px 40px rgba(15,30,60,.1), inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="light"] .logo-image {
  filter: drop-shadow(0 5px 12px rgba(124,60,200,.28)) drop-shadow(0 0 14px rgba(47,70,206,.25));
}
html[data-theme="light"] .nav-links a { color: #5C6B82; }
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a.active { color: #0B1428; }
html[data-theme="light"] .nav-links a::after {
  background: linear-gradient(90deg, transparent, #2F46CE, transparent);
}
html[data-theme="light"] .mobile-menu {
  background: rgba(255,255,255,.7);
  border-color: rgba(11,20,40,.12);
  color: #0B1428;
}
html[data-theme="light"] #themeToggle {
  background: rgba(255,255,255,.75);
  border-color: rgba(11,20,40,.12);
  color: #0B1428;
}
html[data-theme="light"] #themeToggle:hover {
  border-color: rgba(47,70,206,.4);
  box-shadow: 0 8px 22px rgba(15,30,60,.1), 0 0 20px rgba(47,70,206,.12);
}
html[data-theme="light"] .nav-links.open {
  background: rgba(255,255,255,.92);
  border-color: rgba(11,20,40,.08);
}
html[data-theme="light"] .nav-links.open a { border-bottom-color: rgba(11,20,40,.06); }

/* ============================================================
   4. LIGHT — BUTTONS
============================================================ */
html[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, #0B1428 0%, #1E3050 100%);
  background-size: 200% 100%;
  color: #FFFFFF;
  box-shadow: 0 12px 30px rgba(11,20,40,.22), inset 0 1px 0 rgba(255,255,255,.12);
}
html[data-theme="light"] .btn-primary:hover {
  background: linear-gradient(135deg, #2F46CE 0%, #7C5CF5 100%);
  box-shadow: 0 18px 40px rgba(47,70,206,.35);
}
html[data-theme="light"] .hero-actions .btn-primary::after,
html[data-theme="light"] .cta-shell .btn-primary::after {
  border-color: rgba(47,70,206,.45);
}
html[data-theme="light"] .btn-secondary {
  background: rgba(255,255,255,.8);
  border-color: rgba(11,20,40,.14);
  color: #0B1428;
}
html[data-theme="light"] .btn-secondary:hover {
  background: #ffffff;
  border-color: rgba(11,20,40,.24);
  box-shadow: 0 12px 28px rgba(15,30,60,.1);
}
html[data-theme="light"] .btn-video .play-orb {
  background: linear-gradient(135deg, #2F46CE, #7C5CF5);
  color: #fff;
  box-shadow: 0 8px 20px rgba(47,70,206,.38), 0 0 0 4px rgba(47,70,206,.1), inset 0 1px 0 rgba(255,255,255,.35);
}
html[data-theme="light"] .btn-video::after { border-color: rgba(47,70,206,.45); }

/* ============================================================
   5. LIGHT — EYEBROW & GRADIENT TEXT
============================================================ */
html[data-theme="light"] .eyebrow {
  background: rgba(255,255,255,.85);
  border-color: rgba(11,20,40,.1);
  color: #44536B;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 4px 14px rgba(15,30,60,.05);
}
html[data-theme="light"] .eyebrow:hover {
  border-color: rgba(47,70,206,.35);
  box-shadow: 0 0 22px rgba(47,70,206,.1);
}
html[data-theme="light"] .eyebrow .dot {
  background: #0B9E63;
  box-shadow: 0 0 0 3px rgba(11,158,99,.16);
}

html[data-theme="light"] .gradient-text {
  background: linear-gradient(120deg, #2540C4 0%, #4F3BD0 52%, #7C3AED 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   6. LIGHT — HERO
============================================================ */
html[data-theme="light"] .hero-title { color: #0B1428; }
html[data-theme="light"] .hero-title .line[style*="#cfe6ff"] { color: #44536B !important; }
html[data-theme="light"] .hero-sub { color: #2F46CE; }
html[data-theme="light"] .hero-lead { color: #5C6B82; }
html[data-theme="light"] .hero-lead strong { color: #0B1428; }

/* status dots (inline #5cffb3) */
html[data-theme="light"] .hero-text [style*="#5cffb3"] {
  background: #0B9E63 !important;
  box-shadow: 0 0 0 3px rgba(11,158,99,.15) !important;
}

html[data-theme="light"] .hero-pill {
  background: rgba(255,255,255,.85);
  border-color: rgba(11,20,40,.1);
  color: #2B384E;
  box-shadow: 0 3px 10px rgba(15,30,60,.05);
}
html[data-theme="light"] .hero-pill::before {
  background: #2F46CE;
  box-shadow: 0 0 0 3px rgba(47,70,206,.14);
}

/* Chat burst */
html[data-theme="light"] .cb-glow {
  background:
    radial-gradient(circle at 30% 25%, rgba(47,70,206,.20), transparent 60%),
    radial-gradient(circle at 70% 75%, rgba(124,92,245,.15), transparent 60%);
  opacity: .55;
  filter: blur(56px);
}
html[data-theme="light"] .cb-user {
  background: #FFFFFF;
  border: 1px solid rgba(11,20,40,.1);
  color: #0B1428;
  box-shadow: 0 10px 26px rgba(15,30,60,.1), inset 0 1px 0 rgba(255,255,255,.7);
}
html[data-theme="light"] .cb-agent {
  background: linear-gradient(135deg, #2F46CE 0%, #7C5CF5 100%);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 16px 36px rgba(47,70,206,.32), 0 0 50px rgba(124,92,245,.16), inset 0 1px 0 rgba(255,255,255,.25);
}
html[data-theme="light"] .cb-typing {
  background: linear-gradient(135deg, #2F46CE, #7C5CF5);
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(47,70,206,.3);
}
html[data-theme="light"] .cb-typing span { background: rgba(255,255,255,.95); }
html[data-theme="light"] .cb-chip {
  background: rgba(255,255,255,.92);
  border-color: rgba(11,20,40,.1);
  color: #2B384E;
  box-shadow: 0 8px 22px rgba(15,30,60,.1);
}
html[data-theme="light"] .cb-chip .dot { background: #0B9E63; box-shadow: 0 0 0 2px rgba(11,158,99,.16); }
html[data-theme="light"] .cb-chip-2 .dot { background: #2F46CE; box-shadow: 0 0 0 2px rgba(47,70,206,.16); }
html[data-theme="light"] .cb-avatar {
  background: linear-gradient(135deg, #FFFFFF, #F2F6FC);
  border-color: rgba(47,70,206,.22);
  box-shadow: 0 14px 30px rgba(15,30,60,.12), 0 0 28px rgba(47,70,206,.12);
}

/* ============================================================
   7. LIGHT — STATS & TRUST MARQUEE
============================================================ */
html[data-theme="light"] .stats-strip {
  background: linear-gradient(180deg, #FFFFFF, #FBFCFE);
  border-color: rgba(11,20,40,.08);
  box-shadow: 0 18px 46px rgba(15,30,60,.08), inset 0 1px 0 rgba(255,255,255,.8);
}
html[data-theme="light"] .stats-strip::before {
  background: radial-gradient(800px 80px at 50% 0%, rgba(47,70,206,.08), transparent 70%);
}
html[data-theme="light"] .stats-item { border-right-color: rgba(11,20,40,.07); }
html[data-theme="light"] .stats-item:hover { background: rgba(47,70,206,.04); }
html[data-theme="light"] .stats-value {
  background: linear-gradient(180deg, #0B1428 20%, #2F46CE 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-theme="light"] .stats-label { color: #5C6B82; }

html[data-theme="light"] .trust-marquee {
  border-top: 1px solid rgba(11,20,40,.07);
  border-bottom: 1px solid rgba(11,20,40,.07);
}
html[data-theme="light"] .trust-item { color: #5C6B82; }
html[data-theme="light"] .trust-item .ti-dot {
  background: #2F46CE;
  box-shadow: 0 0 0 2px rgba(47,70,206,.14);
}

/* ============================================================
   8. LIGHT — GENERIC SURFACES
============================================================ */
html[data-theme="light"] .card,
html[data-theme="light"] .content-card,
html[data-theme="light"] .train-panel,
html[data-theme="light"] .step-card,
html[data-theme="light"] .contact-card,
html[data-theme="light"] .footer-card,
html[data-theme="light"] .javira-shell {
  background: #FFFFFF;
  border-color: rgba(20,28,55,.12);
  box-shadow: 0 1px 2px rgba(20,28,55,.04), 0 14px 40px rgba(20,28,55,.09), inset 0 1px 0 rgba(255,255,255,.9);
}
/* CTA shell + footer + sim-card: boxless, content merges with page background */
html[data-theme="light"] .cta-shell,
html[data-theme="light"] .sim-card {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
html[data-theme="light"] .footer-card {
  background: none !important;
  border: none !important;
  border-top: 1px solid rgba(20,28,55,.12) !important;
  box-shadow: none !important;
}
html[data-theme="light"] .card::before { background: none; }

html[data-theme="light"] .section-title { color: #0B1428; }
html[data-theme="light"] .section-subtitle { color: #5C6B82; }
html[data-theme="light"] .section-subtitle strong { color: #0B1428; }

html[data-theme="light"] .value-card {
  background: #FFFFFF;
  border-color: rgba(20,28,55,.11);
  box-shadow: 0 1px 2px rgba(20,28,55,.04), 0 10px 28px rgba(20,28,55,.07);
}
html[data-theme="light"] .value-card:hover,
html[data-theme="light"] .usecase-card:hover {
  border-color: rgba(47,70,206,.3);
  box-shadow: 0 2px 4px rgba(20,28,55,.05), 0 22px 50px rgba(20,28,55,.13), 0 0 36px rgba(47,70,206,.07);
}
html[data-theme="light"] .value-card .num {
  background: linear-gradient(135deg, #E8F1FD, #F5F9FF);
  border-color: rgba(47,70,206,.2);
  color: #2F46CE;
  box-shadow: 0 4px 12px rgba(47,70,206,.1);
}
html[data-theme="light"] .value-card h3 { color: #0B1428; }
html[data-theme="light"] .value-card p { color: #5C6B82; }

/* Spotlight hover (premium) — soften for light */
html[data-theme="light"] .value-card::after,
html[data-theme="light"] .usecase-card::after,
html[data-theme="light"] .int-card::after,
html[data-theme="light"] .workflow-step::after,
html[data-theme="light"] .contact-card::after {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(47,70,206,.07), transparent 65%);
}

/* ============================================================
   9. LIGHT — PAIN SECTION (inline red overrides)
============================================================ */
html[data-theme="light"] #masalah .value-card[style*="rgba(255,93,115"] {
  background: #FFFFFF !important;
  border-color: rgba(217,45,76,.16) !important;
}
html[data-theme="light"] #masalah .value-card .num[style*="rgba(255,93,115"] {
  background: #FDE7EB !important;
  border-color: rgba(217,45,76,.22) !important;
  color: #B01E3C !important;
  box-shadow: 0 3px 10px rgba(217,45,76,.12) !important;
}
html[data-theme="light"] #masalah .reveal[style*="rgba(255,93,115"] {
  background: linear-gradient(135deg, #FDF1F3, #FFFFFF) !important;
  border-color: rgba(217,45,76,.2) !important;
}
html[data-theme="light"] section#masalah .eyebrow .dot[style*="--red"] {
  background: #D92D4C !important;
  box-shadow: 0 0 0 3px rgba(217,45,76,.15) !important;
}

/* ============================================================
   10. LIGHT — MEET JAVIRA
============================================================ */
html[data-theme="light"] .javira-shell {
  background:
    radial-gradient(circle at 18% 18%, rgba(47,70,206,.06), transparent 45%),
    radial-gradient(circle at 82% 82%, rgba(124,92,245,.05), transparent 45%),
    #FFFFFF;
}
html[data-theme="light"] .javira-shell::before {
  background-image:
    linear-gradient(rgba(15,40,80,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,40,80,.04) 1px, transparent 1px);
  opacity: .5;
}
html[data-theme="light"] .javira-role { color: #2F46CE; }
html[data-theme="light"] .javira-lead { color: #44536B; }
html[data-theme="light"] .javira-lead strong { color: #0B1428; }
html[data-theme="light"] .javira-trait {
  background: #FFFFFF;
  border-color: rgba(11,20,40,.08);
  box-shadow: 0 3px 10px rgba(15,30,60,.04);
}
html[data-theme="light"] .javira-trait:hover {
  background: #FFFFFF;
  border-color: rgba(47,70,206,.3);
  box-shadow: 0 10px 26px rgba(47,70,206,.1);
}
html[data-theme="light"] .javira-trait-icon {
  background: linear-gradient(135deg, #E8F1FD, #F3F8FF);
  border-color: rgba(47,70,206,.2);
  color: #2F46CE;
  box-shadow: 0 3px 10px rgba(47,70,206,.1);
}
html[data-theme="light"] .javira-trait-text { color: #2B384E; }
html[data-theme="light"] .javira-trait-text strong { color: #0B1428; }
html[data-theme="light"] .javira-trait-text span { color: #5C6B82; }

/* Orb visual inside javira section */
html[data-theme="light"] .orb-core {
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.8), transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(124,92,245,.25), transparent 60%),
    radial-gradient(circle at 50% 50%, #EAF1FB, #DCE7F5 75%);
  border-color: rgba(47,70,206,.3);
  box-shadow: 0 0 90px rgba(47,70,206,.25), 0 0 60px rgba(124,92,245,.2),
    inset 0 4px 30px rgba(255,255,255,.6), inset 0 -10px 30px rgba(15,30,60,.1);
}
html[data-theme="light"] .orb-ring { border-color: rgba(47,70,206,.2); }
html[data-theme="light"] .orb-chip {
  background: rgba(255,255,255,.9);
  border-color: rgba(11,20,40,.1);
  color: #2B384E;
  box-shadow: 0 10px 24px rgba(15,30,60,.1);
}
html[data-theme="light"] .orb-chip .dot { background: #2F46CE; box-shadow: 0 0 8px rgba(47,70,206,.4); }
html[data-theme="light"] .orb-chip.green .dot { background: #0B9E63; box-shadow: 0 0 8px rgba(11,158,99,.4); }

/* ============================================================
   11. LIGHT — PRO/CONS
============================================================ */
html[data-theme="light"] .procons-seamless::before {
  background: linear-gradient(180deg, transparent, rgba(11,20,40,.14) 12%, rgba(11,20,40,.14) 88%, transparent) !important;
}
html[data-theme="light"] .ps-title { color: #0B1428 !important; }
html[data-theme="light"] .ps-title span { color: #5A6B85 !important; }
html[data-theme="light"] .ps-kicker.cs { color: #C42045 !important; }
html[data-theme="light"] .ps-kicker.javira { color: #2F46CE !important; }
html[data-theme="light"] .ps-rec {
  background: linear-gradient(135deg, #2F46CE, #7C5CF5) !important;
  color: #FFFFFF !important;
}
html[data-theme="light"] .ps-label.cs { color: #C42045 !important; }
html[data-theme="light"] .ps-label.javira { color: #0A7C4E !important; }

html[data-theme="light"] .ps-list li {
  color: #2B384E !important;
  border-bottom-color: rgba(11,20,40,.1) !important;
}
html[data-theme="light"] .ps-list li strong { color: #0B1428 !important; }
html[data-theme="light"] .ps-mark.cs { color: #D92D4C !important; }
html[data-theme="light"] .ps-mark.javira { color: #0A9E63 !important; }

html[data-theme="light"] .ps-conclude {
  color: #5A6B85 !important;
  border-top-color: rgba(11,20,40,.12) !important;
}
html[data-theme="light"] .ps-conclude.cs strong { color: #C42045 !important; }
html[data-theme="light"] .ps-conclude.javira strong { color: #0A7C4E !important; }

/* quick metrics — seamless */
html[data-theme="light"] .ps-metrics { border-top-color: rgba(11,20,40,.12) !important; }
html[data-theme="light"] .ps-metric { border-right-color: rgba(11,20,40,.1) !important; }
html[data-theme="light"] .ps-metric-label { color: #5A6B85 !important; }
html[data-theme="light"] .ps-metric-before {
  color: #C42045 !important;
  text-decoration-color: rgba(196,32,69,.4) !important;
}
html[data-theme="light"] .ps-metric-after { color: #0B1428 !important; }

/* CTA hairline */
html[data-theme="light"] .ps-cta { border-top-color: rgba(11,20,40,.12) !important; }
html[data-theme="light"] .ps-cta p[style*="#bcf7ff"] { color: #2F46CE !important; }

/* ============================================================
   12. LIGHT — CARA KERJA
============================================================ */
html[data-theme="light"] .sim-card::before {
  background:
    radial-gradient(600px 200px at 15% 20%, rgba(47,70,206,.06), transparent 60%),
    radial-gradient(500px 240px at 85% 80%, rgba(124,92,245,.05), transparent 60%);
}
html[data-theme="light"] .workflow-step {
  background: #FFFFFF;
  border-color: rgba(11,20,40,.09);
  box-shadow: 0 6px 18px rgba(15,30,60,.05);
}
html[data-theme="light"] .workflow-step:hover {
  background: linear-gradient(180deg, #F3F8FF, #FFFFFF);
}
html[data-theme="light"] .workflow-step.active-step {
  background: linear-gradient(180deg, #E8F1FD, #FFFFFF);
  border-color: rgba(47,70,206,.3);
  box-shadow: 0 14px 32px rgba(47,70,206,.13);
}
html[data-theme="light"] .workflow-step h4 { color: #0B1428; }
html[data-theme="light"] .workflow-step p { color: #5C6B82; }
html[data-theme="light"] .workflow-icon {
  background: linear-gradient(135deg, #2F46CE, #7C5CF5);
  color: #FFFFFF;
  border: 0;
  box-shadow: 0 8px 22px rgba(47,70,206,.3);
}
html[data-theme="light"] .workflow-step:hover .workflow-icon {
  box-shadow: 0 0 30px rgba(47,70,206,.35);
}
html[data-theme="light"] .impact-box {
  background: #F9FBFE;
  border: 1px solid rgba(11,20,40,.07);
}
html[data-theme="light"] .impact-box strong { color: #0B1428; }
html[data-theme="light"] .impact-box span { color: #5C6B82; }

/* ============================================================
   13. LIGHT — TRAINING BRAND (mockups stay dark = screenshots)
============================================================ */
html[data-theme="light"] .content-card h3 { color: #0B1428; }
html[data-theme="light"] .content-card p { color: #5C6B82; }
html[data-theme="light"] .content-card p strong { color: #0B1428; }
html[data-theme="light"] .feature-points li { color: #2B384E; }
html[data-theme="light"] .feature-points li strong { color: #0B1428; }
html[data-theme="light"] .badge-icon {
  background: linear-gradient(135deg, #E8F1FD, #F5F9FF);
  border-color: rgba(47,70,206,.2);
  color: #2F46CE;
  box-shadow: 0 4px 12px rgba(47,70,206,.1);
}
/* mockup-card / bp-mock stay dark intentionally — a "product
   screenshot" on the light canvas. The dark look depends on the
   dark design tokens, so RE-PIN them inside this scope (they
   were flipped by the light theme above). */
html[data-theme="light"] .mockup-card {
  /* dark token re-pin */
  --white: #f7fbff;
  --text:  #d8e6fb;
  --muted: #8ea7c9;
  --muted-2: #6c84a6;
  --panel: rgba(10, 22, 41, 0.55);
  --panel-strong: rgba(10, 22, 41, 0.82);
  --panel-light: rgba(255, 255, 255, 0.04);
  --line: rgba(139, 197, 255, 0.16);
  --line-hi: rgba(139, 197, 255, 0.28);
  --cyan-300: #75efff;
  --cyan-400: #67e8f9;
  --cyan-500: #38bdf8;
  --blue-500: #37b7ff;
  --blue-600: #29a6ff;
  --green: #59ffa3;
  --gold:  #f0bf5e;
  --red:   #ff5d73;

  /* solid dark base — no translucency bleeding the light canvas */
  background:
    radial-gradient(circle at 20% 0%, rgba(41,166,255,.14), transparent 50%),
    linear-gradient(180deg, #0E1B33 0%, #0A1426 100%);
  border: 1px solid rgba(11,20,40,.22);
  box-shadow: 0 30px 70px rgba(15,30,60,.24);
  color-scheme: dark;
}

/* ============================================================
   14. LIGHT — USE CASES
============================================================ */
html[data-theme="light"] .usecase-card {
  background: #FFFFFF;
  border-color: rgba(11,20,40,.09);
  box-shadow: 0 10px 28px rgba(15,30,60,.05);
}
html[data-theme="light"] .usecase-card::after {
  background: radial-gradient(circle, rgba(47,70,206,.1), transparent 68%);
}
html[data-theme="light"] .usecase-icon {
  background: linear-gradient(135deg, #E8F1FD, #F5F9FF);
  border-color: rgba(47,70,206,.2);
  color: #2F46CE;
  box-shadow: 0 4px 14px rgba(47,70,206,.12);
}
html[data-theme="light"] .usecase-card h4 { color: #0B1428; }
html[data-theme="light"] .usecase-card p { color: #5C6B82; }
html[data-theme="light"] .usecase-tag {
  background: #EFF5FC;
  border-color: rgba(47,70,206,.16);
  color: #2F46CE;
}

/* ============================================================
   15. LIGHT — INTEGRATION
============================================================ */
html[data-theme="light"] .int-map {
  background:
    radial-gradient(circle at 50% 50%, rgba(47,70,206,.05), transparent 60%),
    #FFFFFF;
  border-color: rgba(11,20,40,.09);
  box-shadow: 0 26px 60px rgba(15,30,60,.09);
}
html[data-theme="light"] .int-map::before {
  background-image:
    linear-gradient(rgba(15,40,80,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,40,80,.04) 1px, transparent 1px);
  opacity: .5;
}
html[data-theme="light"] .int-legend {
  background: rgba(255,255,255,.9);
  border-color: rgba(11,20,40,.09);
  box-shadow: 0 4px 14px rgba(15,30,60,.05);
}
html[data-theme="light"] .int-legend-item { color: #2B384E; }
html[data-theme="light"] .int-dot-active { background: #0B9E63; box-shadow: 0 0 0 3px rgba(11,158,99,.15); }
html[data-theme="light"] .int-dot-soon { background: #B26A09; box-shadow: 0 0 0 3px rgba(178,106,9,.14); }
html[data-theme="light"] .int-dot-future { background: rgba(11,20,40,.32); box-shadow: none; }
html[data-theme="light"] .int-row-label { color: #5C6B82; }
html[data-theme="light"] .int-row-sub { color: #8F5507; }

html[data-theme="light"] .int-card {
  background: #FFFFFF;
  border-color: rgba(11,20,40,.09);
  box-shadow: 0 6px 18px rgba(15,30,60,.05);
}
html[data-theme="light"] .int-card:hover {
  border-color: rgba(47,70,206,.3);
  box-shadow: 0 16px 36px rgba(47,70,206,.12);
}
html[data-theme="light"] .int-card.int-card-active {
  background: linear-gradient(180deg, #EDFAF3, #FFFFFF);
  border-color: rgba(11,158,99,.26);
}
html[data-theme="light"] .int-card.int-card-soon {
  background: linear-gradient(180deg, #FDF7EA, #FFFFFF);
  border-color: rgba(178,106,9,.2);
}
html[data-theme="light"] .int-card.int-card-working {
  background: linear-gradient(180deg, #F7F4FE, #FFFFFF);
  border-color: rgba(124,92,245,.24);
}
html[data-theme="light"] .int-card.int-card-idle {
  background: #FAFBFD;
  border-color: rgba(11,20,40,.07);
  opacity: 1;
}
html[data-theme="light"] .int-card h4 { color: #0B1428; }
html[data-theme="light"] .int-card p { color: #5C6B82; }

html[data-theme="light"] .int-card.int-card-active::before {
  background: linear-gradient(90deg, transparent, #0B9E63, transparent);
  box-shadow: 0 0 10px rgba(11,158,99,.35);
}
html[data-theme="light"] .int-card.int-card-soon::before {
  background: linear-gradient(90deg, transparent, #B26A09, transparent);
}
html[data-theme="light"] .int-card.int-card-working::before {
  background: linear-gradient(90deg, transparent, #7C5CF5, transparent);
  box-shadow: 0 0 10px rgba(124,92,245,.35);
}

html[data-theme="light"] .int-status-active {
  background: #D8F5E7; color: #0A7C4E; border-color: rgba(11,158,99,.28);
}
html[data-theme="light"] .int-status-soon {
  background: #FBEED3; color: #8F5507; border-color: rgba(178,106,9,.26);
}
html[data-theme="light"] .int-status-working {
  background: #EDE8FD; color: #5B3FC4; border-color: rgba(124,92,245,.3);
}

html[data-theme="light"] .int-hub {
  background:
    radial-gradient(circle at 50% 30%, rgba(124,92,245,.12), transparent 60%),
    radial-gradient(circle at 50% 80%, rgba(47,70,206,.1), transparent 60%),
    linear-gradient(180deg, #FFFFFF, #F8FAFD);
  border: 1.5px solid rgba(47,70,206,.3);
  box-shadow:
    0 24px 56px rgba(47,70,206,.14),
    0 12px 28px rgba(15,30,60,.08),
    inset 0 1px 0 rgba(255,255,255,.85);
}
html[data-theme="light"] .int-hub-pulse,
html[data-theme="light"] .int-hub-pulse-2 { border-color: rgba(47,70,206,.4); }
html[data-theme="light"] .int-hub-inner img {
  filter: drop-shadow(0 6px 14px rgba(124,60,200,.28)) drop-shadow(0 0 18px rgba(47,70,206,.28));
}
html[data-theme="light"] .int-hub-label {
  background: linear-gradient(135deg, #2F46CE, #7C5CF5);
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(47,70,206,.32);
}
html[data-theme="light"] .int-hub-desc { color: #2B384E; }
html[data-theme="light"] .int-hub-desc strong { color: #2F46CE; }
html[data-theme="light"] .int-hub-desc span { color: #5C6B82; }

html[data-theme="light"] .int-connectors .line-soon { stroke: rgba(178,106,9,.4); }
html[data-theme="light"] .int-connectors .line-idle { stroke: rgba(11,20,40,.1); }

html[data-theme="light"] #integration > .container > div[style*="margin-top: 50px"] p { color: #5C6B82; }
html[data-theme="light"] #integration > .container > div[style*="margin-top: 50px"] p strong { color: #0B1428; }

/* ============================================================
   16. LIGHT — GARANSI
============================================================ */
html[data-theme="light"] section#garansi .value-card[style*="rgba(117,239,255,.32)"] {
  background: linear-gradient(135deg, #E8F1FD, #FFFFFF) !important;
  border-color: rgba(47,70,206,.28) !important;
  box-shadow: 0 18px 40px rgba(47,70,206,.13) !important;
}
html[data-theme="light"] section#garansi .value-card[style*="rgba(117,239,255,.32)"] .num {
  background: linear-gradient(135deg, #2F46CE, #7C5CF5) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px rgba(47,70,206,.3) !important;
}

/* ============================================================
   17. LIGHT — FAQ
============================================================ */
html[data-theme="light"] .faq-section h2 { color: #0B1428; }
html[data-theme="light"] .faq-subtitle { color: #5C6B82; }
html[data-theme="light"] .faq-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(11,20,40,.12);
  box-shadow: none;
  border-radius: 0;
}
html[data-theme="light"] .faq-item:first-child { border-top: 1px solid rgba(11,20,40,.12); }
html[data-theme="light"] .faq-item:hover {
  border-color: rgba(11,20,40,.12);
  border-bottom-color: rgba(47,70,206,.4);
  background: transparent;
  box-shadow: none;
}
html[data-theme="light"] .faq-item.active {
  border-color: rgba(11,20,40,.12);
  border-bottom-color: rgba(47,70,206,.5);
  background: transparent;
  box-shadow: none;
}
html[data-theme="light"] .faq-question h3 { color: #0B1428; }
html[data-theme="light"] .faq-answer p { color: #5C6B82; }
html[data-theme="light"] .faq-answer p strong { color: #0B1428; }
html[data-theme="light"] .faq-icon {
  background: #EFF5FC;
  color: #2F46CE;
  border: 1px solid rgba(47,70,206,.18);
}
html[data-theme="light"] .faq-item.active .faq-icon {
  background: linear-gradient(135deg, #2F46CE, #7C5CF5);
  color: #FFFFFF;
  border-color: transparent;
}
html[data-theme="light"] .faq-cta-box {
  background: linear-gradient(135deg, #E8F1FD, #FFFFFF);
  border-color: rgba(47,70,206,.24);
  box-shadow: 0 18px 40px rgba(47,70,206,.1);
}
html[data-theme="light"] .faq-cta-box p { color: #2B384E; }
html[data-theme="light"] .faq-cta-box p strong { color: #0B1428; }

/* ============================================================
   18. LIGHT — FINAL CTA & FOOTER
============================================================ */
html[data-theme="light"] .cta-shell {
  background: none !important;
}
html[data-theme="light"] .contact-card {
  background: #FFFFFF;
  border-color: rgba(11,20,40,.09);
  box-shadow: 0 12px 32px rgba(15,30,60,.06);
}
html[data-theme="light"] .contact-card:hover {
  border-color: rgba(47,70,206,.3);
  box-shadow: 0 22px 48px rgba(47,70,206,.12);
}
html[data-theme="light"] .contact-label { color: #5C6B82; }
html[data-theme="light"] .contact-value {
  background: linear-gradient(120deg, #0B1428, #2F46CE);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-theme="light"] .contact-card p { color: #5C6B82; }
html[data-theme="light"] .contact-card p strong { color: #0B1428; }

html[data-theme="light"] .footer-card strong { color: #0B1428; }
html[data-theme="light"] .footer-card .small-note { color: #5C6B82; }

/* ============================================================
   19. LIGHT — BACK TO TOP & MODAL
============================================================ */
html[data-theme="light"] #backToTop {
  background: rgba(255,255,255,.92);
  border-color: rgba(11,20,40,.12);
  color: #0B1428;
  box-shadow: 0 12px 30px rgba(15,30,60,.14);
}
html[data-theme="light"] #backToTop:hover {
  border-color: rgba(47,70,206,.4);
  box-shadow: 0 16px 36px rgba(15,30,60,.16), 0 0 26px rgba(47,70,206,.16);
}
html[data-theme="light"] .video-modal-backdrop { background: rgba(15,25,45,.55); }
html[data-theme="light"] .video-modal-close {
  background: rgba(255,255,255,.95);
  border-color: rgba(11,20,40,.12);
  color: #0B1428;
}

/* ============================================================
   20. LIGHT — INLINE COLOR REMAPS (hardcoded in HTML)
============================================================ */
html[data-theme="light"] [style*="color:#cfe6ff"],
html[data-theme="light"] [style*="color: #cfe6ff"] { color: #44536B !important; }
html[data-theme="light"] [style*="color:#bcf7ff"]:not(.gradient-text),
html[data-theme="light"] [style*="color: #bcf7ff"]:not(.gradient-text) { color: #2F46CE !important; }
html[data-theme="light"] [style*="color:#cbffe2"],
html[data-theme="light"] [style*="color: #cbffe2"] { color: #0A7C4E !important; }
html[data-theme="light"] [style*="color:#dffce8"],
html[data-theme="light"] [style*="color: #dffce8"] { color: #0A5C3C !important; }
html[data-theme="light"] [style*="color:#ffb7c1"],
html[data-theme="light"] [style*="color: #ffb7c1"],
html[data-theme="light"] [style*="color:#ffd8dd"],
html[data-theme="light"] [style*="color: #ffd8dd"] { color: #B01E3C !important; }
html[data-theme="light"] [style*="color:#e8d4d8"],
html[data-theme="light"] [style*="color: #e8d4d8"],
html[data-theme="light"] [style*="color:#dfeefe"],
html[data-theme="light"] [style*="color: #dfeefe"],
html[data-theme="light"] [style*="color:#dff5ff"],
html[data-theme="light"] [style*="color: #dff5ff"] { color: #2B384E !important; }

/* sections with inline cyan-bordered boxes (eg. garansi card already handled) */
html[data-theme="light"] .section [style*="background: rgba(255,255,255,.03)"] {
  background: #FFFFFF !important;
}

/* ============================================================
   21. LIGHT — CONTRAST GUARANTEES (AA enforcement)
   Base rules using var()/translucent values out-specify some
   theme overrides; pin the critical text/surfaces with !important.
============================================================ */

/* Navbar links — readable muted (AA on light canvas) */
html[data-theme="light"] .nav-links a { color: #44536B !important; }
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a.active { color: #0B1428 !important; }

/* FAQ question headings (base set rgba(255,255,255,.92) = invisible on light) */
html[data-theme="light"] .faq-question h3 { color: #0B1428 !important; }
html[data-theme="light"] .faq-question:hover h3 { color: #2F46CE !important; }
html[data-theme="light"] .faq-icon { color: #2F46CE !important; }

/* Secondary buttons — opaque white so dark ink passes AA */
html[data-theme="light"] .btn-secondary {
  background: #FFFFFF !important;
  border-color: rgba(11,20,40,.16) !important;
  color: #0B1428 !important;
}
html[data-theme="light"] .btn-secondary:hover {
  background: #F4F7FC !important;
  border-color: rgba(47,70,206,.4) !important;
}
html[data-theme="light"] .btn-video {
  background: #FFFFFF !important;
  border-color: rgba(11,20,40,.16) !important;
  color: #0B1428 !important;
}

/* Footer "back to top" secondary button + note */
html[data-theme="light"] .footer-card .btn-secondary { color: #0B1428 !important; }

/* Muted body text floor — keep generic muted readable (AA) */
html[data-theme="light"] { --muted: #51607A; }
html[data-theme="light"] .section-subtitle,
html[data-theme="light"] .value-card p,
html[data-theme="light"] .usecase-card p,
html[data-theme="light"] .int-card p,
html[data-theme="light"] .workflow-step p,
html[data-theme="light"] .javira-lead,
html[data-theme="light"] .content-card p,
html[data-theme="light"] .contact-card p,
html[data-theme="light"] .faq-answer p,
html[data-theme="light"] .footer-card .small-note { color: #51607A !important; }
html[data-theme="light"] .section-subtitle strong,
html[data-theme="light"] .value-card p strong,
html[data-theme="light"] .javira-lead strong,
html[data-theme="light"] .content-card p strong,
html[data-theme="light"] .faq-answer p strong { color: #0B1428 !important; }

/* Hero supporting line + lead */
html[data-theme="light"] .hero-lead { color: #44536B !important; }
html[data-theme="light"] .hero-lead strong { color: #0B1428 !important; }
html[data-theme="light"] .hero-title .line[style*="#cfe6ff"] { color: #44536B !important; }

/* Eyebrow text — readable mono label */
html[data-theme="light"] .eyebrow { color: #44536B !important; }
html[data-theme="light"] section#masalah .eyebrow { color: #B01E3C !important; }

/* Stats label + trust marquee */
html[data-theme="light"] .stats-label { color: #51607A !important; }
html[data-theme="light"] .trust-item { color: #51607A !important; }

/* Integration row labels & legend */
html[data-theme="light"] .int-row-label { color: #51607A !important; }
html[data-theme="light"] .int-legend-item { color: #2B384E !important; }
html[data-theme="light"] .int-card h4,
html[data-theme="light"] .usecase-card h4,
html[data-theme="light"] .value-card h3,
html[data-theme="light"] .workflow-step h4,
html[data-theme="light"] .javira-trait-text strong { color: #0B1428 !important; }
html[data-theme="light"] .javira-trait-text span { color: #51607A !important; }

/* Contact label mono */
html[data-theme="light"] .contact-label { color: #51607A !important; }

/* ============================================================
   22. LIGHT — TRAINING BRAND content-card → dark panel
   (pairs with the dark product mockup beside it; white text)
============================================================ */
html[data-theme="light"] #training-brand .content-card {
  background:
    radial-gradient(circle at 18% 0%, rgba(47,70,206,.16), transparent 50%),
    linear-gradient(180deg, #111C33 0%, #0A1426 100%) !important;
  border: 1px solid rgba(20,28,55,.22) !important;
  box-shadow: 0 28px 64px rgba(15,30,60,.22) !important;
}
html[data-theme="light"] #training-brand .content-card h3 { color: #FFFFFF !important; }
html[data-theme="light"] #training-brand .content-card p { color: #C6D2E5 !important; }
html[data-theme="light"] #training-brand .content-card p strong { color: #FFFFFF !important; }
html[data-theme="light"] #training-brand .content-card .feature-points li { color: #C6D2E5 !important; }
html[data-theme="light"] #training-brand .content-card .feature-points li strong { color: #FFFFFF !important; }
html[data-theme="light"] #training-brand .content-card .badge-icon {
  background: linear-gradient(135deg, rgba(47,70,206,.34), rgba(124,92,245,.18)) !important;
  border-color: rgba(124,160,255,.3) !important;
  color: #DDE6FF !important;
  box-shadow: 0 0 18px rgba(47,70,206,.22) !important;
}

/* ============================================================
   23. LIGHT — INTEGRATION map → dark panel (signature spread)
============================================================ */
html[data-theme="light"] .int-map {
  background:
    radial-gradient(circle at 50% 50%, rgba(47,70,206,.18), transparent 55%),
    linear-gradient(180deg, #111C33 0%, #0A1426 100%) !important;
  border: 1px solid rgba(20,28,55,.24) !important;
  box-shadow: 0 30px 70px rgba(15,30,60,.24) !important;
}
html[data-theme="light"] .int-map::before {
  background-image:
    linear-gradient(rgba(124,160,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,160,255,.06) 1px, transparent 1px) !important;
  opacity: .6 !important;
}
html[data-theme="light"] .int-legend {
  background: linear-gradient(180deg, #16213D, #0E1A30) !important;
  border: 1px solid rgba(124,160,255,.24) !important;
  box-shadow: 0 10px 28px rgba(11,20,40,.18), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
html[data-theme="light"] .int-legend-item { color: #E4EBF8 !important; }
html[data-theme="light"] .int-row-label { color: #8C9CB3 !important; }
html[data-theme="light"] .int-row-sub { color: #F4B86A !important; }

html[data-theme="light"] .int-card {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 20px rgba(0,0,0,.25) !important;
}
html[data-theme="light"] .int-card:hover {
  border-color: rgba(124,160,255,.34) !important;
  box-shadow: 0 18px 40px rgba(47,70,206,.22) !important;
}
html[data-theme="light"] .int-card.int-card-active {
  background: linear-gradient(180deg, rgba(91,228,155,.12), rgba(91,228,155,.03)) !important;
  border-color: rgba(91,228,155,.3) !important;
}
html[data-theme="light"] .int-card.int-card-soon {
  background: linear-gradient(180deg, rgba(244,184,106,.1), rgba(244,184,106,.03)) !important;
  border-color: rgba(244,184,106,.28) !important;
}
html[data-theme="light"] .int-card.int-card-working {
  background: linear-gradient(180deg, rgba(167,139,250,.12), rgba(167,139,250,.04)) !important;
  border-color: rgba(167,139,250,.32) !important;
}
html[data-theme="light"] .int-card.int-card-idle {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.08) !important;
  opacity: .92 !important;
}
html[data-theme="light"] .int-card h4 { color: #FFFFFF !important; }
html[data-theme="light"] .int-card p { color: #9CA8BD !important; }

html[data-theme="light"] .int-card.int-card-active::before {
  background: linear-gradient(90deg, transparent, #5BE49B, transparent) !important;
  box-shadow: 0 0 12px rgba(91,228,155,.4) !important;
}
html[data-theme="light"] .int-card.int-card-soon::before {
  background: linear-gradient(90deg, transparent, #F4B86A, transparent) !important;
}
html[data-theme="light"] .int-card.int-card-working::before {
  background: linear-gradient(90deg, transparent, #A78BFA, transparent) !important;
  box-shadow: 0 0 12px rgba(167,139,250,.4) !important;
}

html[data-theme="light"] .int-status-active {
  background: rgba(91,228,155,.14) !important; color: #6FEAA6 !important; border-color: rgba(91,228,155,.32) !important;
}
html[data-theme="light"] .int-status-soon {
  background: rgba(244,184,106,.14) !important; color: #F4B86A !important; border-color: rgba(244,184,106,.3) !important;
}
html[data-theme="light"] .int-status-working {
  background: rgba(167,139,250,.16) !important; color: #C4B5FD !important; border-color: rgba(167,139,250,.34) !important;
}
html[data-theme="light"] .int-dot-active { background: #5BE49B !important; box-shadow: 0 0 12px rgba(91,228,155,.6) !important; }
html[data-theme="light"] .int-dot-soon { background: #F4B86A !important; box-shadow: 0 0 10px rgba(244,184,106,.45) !important; }
html[data-theme="light"] .int-dot-future { background: rgba(255,255,255,.4) !important; box-shadow: none !important; }

html[data-theme="light"] .int-hub {
  background:
    radial-gradient(circle at 50% 30%, rgba(124,92,245,.25), transparent 60%),
    radial-gradient(circle at 50% 80%, rgba(47,70,206,.22), transparent 60%),
    linear-gradient(180deg, #16234044, #0A142688), #0E1A33 !important;
  border: 1.5px solid rgba(124,160,255,.4) !important;
  box-shadow: 0 30px 70px rgba(0,0,0,.45), 0 0 70px rgba(47,70,206,.3), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
html[data-theme="light"] .int-hub-pulse,
html[data-theme="light"] .int-hub-pulse-2 { border-color: rgba(124,160,255,.5) !important; }
html[data-theme="light"] .int-hub-label {
  background: linear-gradient(135deg, #2F46CE, #7C5CF5) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 24px rgba(47,70,206,.45) !important;
}
html[data-theme="light"] .int-hub-desc { color: #DFE6F5 !important; }
html[data-theme="light"] .int-hub-desc strong { color: #9DB4FF !important; }
html[data-theme="light"] .int-hub-desc span { color: #8C9CB3 !important; }

html[data-theme="light"] .int-connectors .line-soon { stroke: rgba(244,184,106,.5) !important; }
html[data-theme="light"] .int-connectors .line-idle { stroke: rgba(255,255,255,.12) !important; }

/* side cards (CS Human / Customer) read on dark too */
html[data-theme="light"] .int-card.int-card-side { background: rgba(255,255,255,.04) !important; }
html[data-theme="light"] .int-side-icon {
  background: radial-gradient(circle at 50% 35%, rgba(47,70,206,.22), rgba(11,24,48,.6)) !important;
  border-color: rgba(124,160,255,.3) !important;
}