/* =========================================================
   AIM DEV — Theme System v2 (Phase 42.1)
   Production-grade Dark / Light / System
   Comprehensive B2B aesthetic — modern · readable · ล้ำสมัย
   Load AFTER style.css to override
   ========================================================= */

/* ---------------------------------------------------------
   Smooth theme transition
--------------------------------------------------------- */
html{
  color-scheme: dark;
  transition:
    background-color var(--t-base, 280ms) ease,
    color var(--t-base, 280ms) ease;
}
html[data-theme="light"]{ color-scheme: light; }

body, section, .card, .stat-card, .chat-panel, .chat-body, .chat-head,
.prod-card, .pri-card, .faq-q, .faq-a, .cmp-table, .cmp-row, .cmp-cell,
.ab-value, .ct-method, .ct-office, .footer, .footer-col,
.pain-card, .hiw-card, .trust-item, .tests-card, .tests-item,
input, textarea, select, button,
[class*="bg-"], [class*="border-"], [class*="surface"] {
  transition:
    background-color var(--t-base, 280ms) ease,
    background-image var(--t-base, 280ms) ease,
    border-color var(--t-base, 280ms) ease,
    color var(--t-base, 280ms) ease,
    box-shadow var(--t-base, 280ms) ease;
}

html.no-theme-transition *,
html.no-theme-transition *::before,
html.no-theme-transition *::after{
  transition: none !important;
}

/* =========================================================
   LIGHT THEME · Modern B2B Palette
   Warm off-white · deep navy · softened accents · soft shadows
   All passes WCAG AA
   ========================================================= */
html[data-theme="light"]{
  /* Surfaces */
  --bg:        #f5f8fc;
  --bg-2:      #ffffff;
  --bg-3:      #eef2fa;
  --surface:   #ffffff;
  --surface-2: #f8fafd;

  /* Borders */
  --border:    rgba(15, 23, 42, 0.08);
  --border-2:  rgba(15, 23, 42, 0.14);

  /* Text · deep navy · high contrast */
  --text:       #0a0e27;
  --text-dim:   #3a4863;
  --text-muted: #64748b;

  /* Brand · darkened for contrast on light bg */
  --primary:   #0082b4;   /* cyan · AA 4.9:1 */
  --secondary: #5b3bd6;   /* violet · AA 5.2:1 */
  --accent:    #c82a9f;   /* pink · AA 4.6:1 */
  --success:   #0a8f5a;
  --warn:      #b26300;

  /* Gradients · slightly toned for light bg */
  --grad-1: linear-gradient(135deg, #00a4cc 0%, #6347e0 50%, #d738a8 100%);
  --grad-2: linear-gradient(135deg, #0a8f5a 0%, #0082b4 100%);
  --grad-3: linear-gradient(135deg, #d738a8 0%, #e08a00 100%);
  --grad-glow: radial-gradient(circle at 50% 0%, rgba(91, 59, 214, .10), transparent 60%);

  /* Shadows · soft, blue-tinted, modern SaaS feel */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .04), 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .06), 0 2px 6px rgba(15, 23, 42, .04);
  --shadow-lg: 0 20px 40px rgba(15, 23, 42, .08), 0 8px 16px rgba(15, 23, 42, .06);
  --glow-primary:   0 0 30px rgba(0, 130, 180, .15);
  --glow-secondary: 0 0 40px rgba(91, 59, 214, .15);
}

/* ---------------------------------------------------------
   Body · soft gradient glow
--------------------------------------------------------- */
html[data-theme="light"] body{
  background-color: var(--bg);
  background-image:
    radial-gradient(at 20% 0%, rgba(91, 59, 214, .04) 0, transparent 45%),
    radial-gradient(at 80% 10%, rgba(0, 130, 180, .04) 0, transparent 45%),
    radial-gradient(at 50% 60%, rgba(215, 56, 168, .025) 0, transparent 50%);
}

/* ---------------------------------------------------------
   Navigation · crisp white frosted glass
--------------------------------------------------------- */
html[data-theme="light"] .nav,
html[data-theme="light"] .navbar,
html[data-theme="light"] .uni-header{
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .02) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}
html[data-theme="light"] .nav-link{ color: var(--text-dim) !important; }
html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-link.active{ color: var(--primary) !important; }

/* =========================================================
   UNIVERSAL HEADER (subpages) · Light mode
   (injected by universal-widgets.js on non-home pages)
   Default CSS uses hardcoded white text — fix for light bg
   ========================================================= */
html[data-theme="light"] .uni-logo-icon{
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
html[data-theme="light"] .uni-logo-accent{
  color: #0a0e27 !important;
  -webkit-text-fill-color: #0a0e27 !important;
}
html[data-theme="light"] .uni-logo-sub{
  color: var(--text-muted) !important;
}
html[data-theme="light"] .uni-nav-links a{
  color: var(--text-dim) !important;
  font-weight: 600 !important;
}
html[data-theme="light"] .uni-nav-links a:hover{
  color: var(--primary) !important;
}
html[data-theme="light"] .uni-nav-links a[style*="color:#00d4ff"],
html[data-theme="light"] .uni-nav-links a[style*="color: #00d4ff"]{
  color: var(--primary) !important;
  font-weight: 700 !important;
}
/* Mobile toggle (hamburger) in universal header */
html[data-theme="light"] .uni-mobile-toggle{
  color: var(--text) !important;
}
/* CTA button (นัดปรึกษาฟรี) — keep gradient · already visible */
html[data-theme="light"] .uni-nav-cta{
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(91, 59, 214, .25) !important;
}

/* Theme toggle slot inside universal header · ensure visible */
html[data-theme="light"] .uni-theme-slot .theme-toggle-btn,
.uni-theme-slot .theme-toggle-btn{
  background: #ffffff !important;
  border: 1px solid var(--border, rgba(15, 23, 42, .12)) !important;
  color: var(--text, #0a0e27) !important;
}
html[data-theme="dark"] .uni-theme-slot .theme-toggle-btn{
  background: rgba(255, 255, 255, .05) !important;
  border-color: rgba(255, 255, 255, .15) !important;
  color: #e9ecff !important;
}

/* =========================================================
   CARDS · all solid white with subtle shadow (B2B clean)
   Override the rgba(255,255,255,.04) gradient overlays
   ========================================================= */

/* Stat cards (hero trust + stats bar) */
html[data-theme="light"] .stat-card{
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-md);
  backdrop-filter: none;
}
html[data-theme="light"] .stat-card:hover{
  border-color: var(--border-2) !important;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 130, 180, .08);
}
html[data-theme="light"] .stat-num,
html[data-theme="light"] .stat-value,
html[data-theme="light"] .stat-label,
html[data-theme="light"] .trust-meta strong{
  color: var(--text) !important;
}
html[data-theme="light"] .stat-sub,
html[data-theme="light"] .trust-meta span{ color: var(--text-muted) !important; }

/* Trust items in hero */
html[data-theme="light"] .trust-item{
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: var(--shadow-sm);
}

/* Pain / Problem cards */
html[data-theme="light"] .pain-card{
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-md);
  backdrop-filter: none;
}
html[data-theme="light"] .pain-card:hover{
  border-color: rgba(91, 59, 214, .30) !important;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(91, 59, 214, .08);
}
html[data-theme="light"] .pain-num{
  background: none !important;
  background-image: linear-gradient(135deg, #5b3bd6 0%, #c82a9f 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  opacity: 1 !important;
}
html[data-theme="light"] .pain-title{ color: var(--text) !important; }
html[data-theme="light"] .pain-desc{ color: var(--text-dim) !important; }

/* =========================================================
   PRODUCT SHOWCASE · big carousel card (AIM SaaS ERP etc)
   ========================================================= */
html[data-theme="light"] .prod-slider{
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
  backdrop-filter: none !important;
}
html[data-theme="light"] .prod-ctrl-current{
  background: none !important;
  background-image: var(--grad-1) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
html[data-theme="light"] .prod-ctrl-sep,
html[data-theme="light"] .prod-ctrl-total{ color: var(--text-muted) !important; }
html[data-theme="light"] .prod-ctrl-progress{
  background: var(--bg-3) !important;
}
html[data-theme="light"] .prod-ctrl-bar{
  background-image: var(--grad-1) !important;
}
html[data-theme="light"] .prod-btn{
  background: #ffffff !important;
  border: 1px solid var(--border-2) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-sm) !important;
}
html[data-theme="light"] .prod-btn:hover:not(:disabled){
  background: #f8fafd !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* Product slide content */
html[data-theme="light"] .prod-slide .prod-name,
html[data-theme="light"] .prod-slide h3{ color: var(--text) !important; }
html[data-theme="light"] .prod-tagline{ color: var(--text) !important; font-weight: 600; }
html[data-theme="light"] .prod-desc{ color: var(--text-dim) !important; }
html[data-theme="light"] .prod-features li{ color: var(--text-dim) !important; }
/* Product slide watermark number (01 / 02 / 03 / 04 / 05 / 06) */
html[data-theme="light"] .prod-num{
  background: none !important;
  background-image: linear-gradient(135deg,
    rgba(91, 59, 214, .22) 0%,
    rgba(200, 42, 159, .14) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Product mockup container · add a subtle frame that blends with dashboard */
html[data-theme="light"] .prod-mockup{
  border-radius: 16px;
  overflow: visible;
}
html[data-theme="light"] .prod-mockup-glow{
  background: radial-gradient(
    circle,
    rgba(91, 59, 214, .35) 0%,
    rgba(0, 130, 180, .20) 40%,
    transparent 70%) !important;
  opacity: .5 !important;
}

/* Product badge (● AI-First · Production Ready / Flagship Product) */
html[data-theme="light"] .prod-badge,
html[data-theme="light"] [class*="prod-badge-"]{
  background: linear-gradient(90deg, rgba(200, 42, 159, .08), rgba(91, 59, 214, .05)) !important;
  border: 1px solid rgba(200, 42, 159, .22) !important;
  color: var(--accent) !important;
}

/* CTAs inside product slide */
html[data-theme="light"] .prod-slide .btn-primary,
html[data-theme="light"] .prod-cta-primary{
  background: var(--grad-1) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(91, 59, 214, .25) !important;
}
html[data-theme="light"] .prod-slide .btn-ghost,
html[data-theme="light"] .prod-cta-ghost{
  background: #f1f5fa !important;
  border: 1px solid var(--border) !important;
  color: var(--text-dim) !important;
}
html[data-theme="light"] .prod-slide .btn-ghost:hover,
html[data-theme="light"] .prod-cta-ghost:hover{
  background: #e3eaf5 !important;
  color: var(--text) !important;
}

/* Product tabs row · AIM SaaS ERP / AI Chatbot / Web Studio / Analytics / Commerce / Automation */
html[data-theme="light"] .prod-dots{ background: transparent !important; }
html[data-theme="light"] .prod-dot{
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--text-dim) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all .2s;
}
html[data-theme="light"] .prod-dot:hover{
  border-color: var(--border-2) !important;
  color: var(--text) !important;
  transform: translateY(-1px);
}
html[data-theme="light"] .prod-dot.prod-dot-active{
  background-image: var(--grad-1) !important;
  background-color: transparent !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(91, 59, 214, .3) !important;
}
html[data-theme="light"] .prod-dot.prod-dot-active .dot-label{ color: #fff !important; }

/* =========================================================
   HERO VISUAL · dashboard laptop mockup (right side)
   Light mode · Premium product mockup · same size as dark mode
   BOLD borders + strong shadows for visible definition on light bg
   ========================================================= */
html[data-theme="light"] .hv-dashboard{
  background: linear-gradient(135deg, #ffffff 0%, #fafbfd 50%, #f5f8fc 100%) !important;
  border: 1.5px solid rgba(15, 23, 42, .14) !important;
  box-shadow:
    0 40px 90px rgba(91, 59, 214, .20),
    0 20px 45px rgba(0, 130, 180, .12),
    0 8px 20px rgba(15, 23, 42, .10),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
html[data-theme="light"] .hv-glow{
  background: var(--grad-1) !important;
  opacity: .30 !important;
  filter: blur(90px) !important;
}

/* Browser chrome bar · more defined */
html[data-theme="light"] .hv-top{
  background: linear-gradient(180deg, #f1f5fa, #e8eef6) !important;
  border-bottom: 1px solid rgba(15, 23, 42, .10) !important;
}
html[data-theme="light"] .hv-url{
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  color: var(--text-dim) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

/* Sidebar · slightly tinted so it stands apart */
html[data-theme="light"] .hv-side{
  background: linear-gradient(180deg, #f5f8fc, #eef2fa) !important;
  border-right: 1px solid rgba(15, 23, 42, .08) !important;
}
html[data-theme="light"] .hv-logo{
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, .06);
}
html[data-theme="light"] .hv-menu-item{
  background: rgba(15, 23, 42, .10) !important;
}

/* Main content area · transparent so it fills full dashboard width (no box-in-box) */
html[data-theme="light"] .hv-main-area{
  background: transparent !important;
}

/* KPI cards (Revenue / Users / AI Score) · strong definition on gradient bg */
html[data-theme="light"] .hv-kpi{
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  box-shadow:
    0 4px 12px rgba(15, 23, 42, .06),
    0 1px 3px rgba(15, 23, 42, .04) !important;
}
html[data-theme="light"] .hv-kpi-label{ color: var(--text-muted) !important; font-weight: 600; }
html[data-theme="light"] .hv-kpi-value{ color: var(--text) !important; }

/* Chart backdrop · full-width subtle gradient */
html[data-theme="light"] .hv-chart{
  background: linear-gradient(180deg, #ffffff, #f5f8fc) !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 12px;
}

/* Floating AI chat card (top-left) · premium white with strong shadow */
html[data-theme="light"] .hv-card{
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  box-shadow:
    0 24px 50px rgba(91, 59, 214, .18),
    0 8px 20px rgba(15, 23, 42, .10),
    0 2px 6px rgba(15, 23, 42, .06),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  backdrop-filter: none !important;
}
html[data-theme="light"] .hv-card-title{ color: var(--text) !important; }
html[data-theme="light"] .hv-card-sub{ color: var(--text-muted) !important; }
html[data-theme="light"] .hv-card-body{
  background: linear-gradient(135deg, #f1f5fa, #e8eef8) !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
}

/* Code card · keep dark (industry standard for code editor)
   but with stronger shadow to integrate with light page */
html[data-theme="light"] .hv-card-code{
  box-shadow:
    0 24px 50px rgba(15, 23, 42, .22),
    0 8px 20px rgba(15, 23, 42, .14),
    0 2px 6px rgba(15, 23, 42, .08),
    inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

/* =========================================================
   CODE EDITOR CARD · Premium Theme · Applies to BOTH modes
   Inspired by Tokyo Night Storm + Gold accents · luxurious
   ========================================================= */
.hv-card-code{
  background: linear-gradient(135deg, #1a1b2e 0%, #24243e 50%, #1a1b2e 100%) !important;
  border: 1px solid rgba(187, 154, 247, .18) !important;
  box-shadow:
    0 24px 50px rgba(15, 23, 42, .35),
    0 8px 20px rgba(91, 59, 214, .15),
    0 0 0 1px rgba(255, 255, 255, .02),
    inset 0 1px 0 rgba(255, 255, 255, .06),
    inset 0 0 40px rgba(187, 154, 247, .04) !important;
}
.hv-card-code::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(224, 175, 104, .4) 30%,
    rgba(187, 154, 247, .5) 50%,
    rgba(125, 207, 255, .4) 70%,
    transparent
  );
  z-index: 5;
  pointer-events: none;
}

/* Title bar · subtle darker with gold highlight */
.hv-card-code .hv-code-head{
  background: linear-gradient(180deg, #15161e, #1a1b2e) !important;
  border-bottom: 1px solid rgba(187, 154, 247, .12) !important;
  padding: 10px 14px !important;
}
.hv-card-code .hv-code-file{
  color: #e0af68 !important;          /* premium gold filename */
  font-weight: 600;
  letter-spacing: .3px;
  text-shadow: 0 0 10px rgba(224, 175, 104, .25);
}

/* Body · soft lavender-gray base text */
.hv-card-code .hv-code-body{
  color: #c0caf5 !important;
  background: transparent !important;
  font-feature-settings: "calt" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Syntax Token Colors · Tokyo Night Refined ---------- */
/* Comments · muted violet italic */
.c-c{
  color: #565a6e !important;
  font-style: italic !important;
}

/* Keywords (const, new) · soft lavender · luxurious */
.c-k{
  color: #bb9af7 !important;
  font-weight: 600 !important;
  text-shadow: 0 0 8px rgba(187, 154, 247, .18);
}

/* Variables (ai) · icy cyan */
.c-v{
  color: #7dcfff !important;
}

/* Functions/Classes (AimAI, deploy) · warm rose */
.c-f{
  color: #f7768e !important;
  text-shadow: 0 0 6px rgba(247, 118, 142, .15);
}

/* Properties (model:, ethics:) · mint teal */
.c-p{
  color: #73daca !important;
}

/* Strings ('aim-v3') + booleans (true) · premium gold */
.c-s{
  color: #e0af68 !important;
  text-shadow: 0 0 6px rgba(224, 175, 104, .18);
}

/* Performance bottom card */
html[data-theme="light"] .hv-card-perf{
  background: #ffffff !important;
}
html[data-theme="light"] .hv-card-perf span,
html[data-theme="light"] .hv-perf-label{ color: var(--text-dim) !important; }
html[data-theme="light"] .hv-card-perf strong,
html[data-theme="light"] .hv-perf-value{ color: var(--text) !important; }

/* =========================================================
   FLOATING CHIPS · Machine Learning / Web Apps / AI Chatbot /
   Automation / Clean Code (floating around hero)
   Light mode · white pills with colored icon · premium
   ========================================================= */
html[data-theme="light"] .float-chip{
  background: #ffffff !important;
  backdrop-filter: none !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  color: var(--text) !important;
  box-shadow:
    0 8px 24px rgba(91, 59, 214, .14),
    0 2px 8px rgba(15, 23, 42, .08),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
html[data-theme="light"] .float-chip:hover{
  box-shadow:
    0 12px 32px rgba(91, 59, 214, .22),
    0 4px 12px rgba(15, 23, 42, .10),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* Per-chip accent border tint to match its icon color */
html[data-theme="light"] .float-chip-1{ border-color: rgba(0, 130, 180, .28) !important; } /* cyan · ML */
html[data-theme="light"] .float-chip-2{ border-color: rgba(200, 42, 159, .28) !important; } /* pink · Web Apps */
html[data-theme="light"] .float-chip-3{ border-color: rgba(91, 59, 214, .28) !important; } /* violet · AI Chatbot */
html[data-theme="light"] .float-chip-4{ border-color: rgba(10, 143, 90, .28) !important; }  /* green · Automation */
html[data-theme="light"] .float-chip-5{ border-color: rgba(178, 99, 0, .28) !important; }   /* amber · Clean Code */

/* Hero trust pill · 🏆 อันดับ 1 ผู้พัฒนา AI & Web ... */
html[data-theme="light"] .hero-pill{
  background: rgba(0, 130, 180, .08) !important;
  border: 1px solid rgba(0, 130, 180, .28) !important;
  color: var(--primary) !important;
  backdrop-filter: none !important;
  box-shadow: 0 4px 14px rgba(0, 130, 180, .12);
}

/* Eyebrow section labels (● ผลิตภัณฑ์ของเรา / ● ปัญหาที่พบบ่อย / ● ขั้นตอนการทำงาน) */
html[data-theme="light"] .section-eyebrow{
  background: rgba(0, 130, 180, .08) !important;
  border: 1px solid rgba(0, 130, 180, .25) !important;
  color: var(--primary) !important;
}
html[data-theme="light"] .eyebrow-dot{
  background: var(--success) !important;
  box-shadow: 0 0 0 0 rgba(10, 143, 90, .5);
}

/* "ต้องการคำปรึกษา?" floating chat FAB label (bottom-left) */
html[data-theme="light"] .chat-fab-label,
html[data-theme="light"] .chat-fab span{
  /* keep gradient background — it's a CTA */
}

/* Any generic pill / badge using .pill or [class*="-pill"] */
html[data-theme="light"] .pill,
html[data-theme="light"] [class*="badge-pill"]{
  background: #ffffff !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: none !important;
}

/* =========================================================
   SPLASH / LOADING SCREEN · Light mode luxurious edition
   ========================================================= */
html[data-theme="light"] .splash{
  background:
    radial-gradient(ellipse at 50% 35%, rgba(91, 59, 214, .14) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 65%, rgba(0, 130, 180, .10) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(200, 42, 159, .08) 0%, transparent 50%),
    linear-gradient(180deg, #f7faff 0%, #eef2fa 50%, #e8eef8 100%) !important;
}

/* Logo · multi-layer drop shadow for premium glow */
html[data-theme="light"] .splash svg{
  filter:
    drop-shadow(0 0 30px rgba(91, 59, 214, .35))
    drop-shadow(0 0 60px rgba(200, 42, 159, .18))
    drop-shadow(0 8px 20px rgba(0, 130, 180, .22))
    drop-shadow(0 2px 4px rgba(15, 23, 42, .08)) !important;
}

/* "AIM" stays gradient · "DEV" → deep navy for contrast */
html[data-theme="light"] .splash-name span{
  color: #0a0e27 !important;
  -webkit-text-fill-color: #0a0e27 !important;
}

/* Loading bar · visible track + glowing progress */
html[data-theme="light"] .splash-bar{
  background: rgba(15, 23, 42, .08) !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
}
html[data-theme="light"] .splash-bar span{
  box-shadow:
    0 0 10px rgba(91, 59, 214, .5),
    0 0 20px rgba(200, 42, 159, .3) !important;
}

/* Optional subtle pattern · gives "premium production" texture */
html[data-theme="light"] .splash::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(91, 59, 214, .08) 1px, transparent 0);
  background-size: 32px 32px;
  opacity: .4;
  pointer-events: none;
  animation: splashGridFade 3s ease-in-out infinite;
}
@keyframes splashGridFade{
  0%,100%{ opacity: .3; }
  50%{ opacity: .5; }
}

/* =========================================================
   SPLASH · FOUC-proof (applies as soon as data-theme is set)
   The inline script in <head> sets data-theme BEFORE CSS loads,
   so light splash shows from the very first paint.
   ========================================================= */

/* =========================================================
   RESPONSIVE NAV · FIX · production grade
   · Single-line menu items (no Thai wrap)
   · Proper breakpoints for tablet/mobile
   · Working mobile menu overlay
   · iPad portrait/landscape + phone all supported
   ========================================================= */

/* Never wrap nav links · single line always */
.nav-link{
  white-space: nowrap !important;
}
.nav-menu{
  min-width: 0; /* prevent flex overflow */
}
.nav-list{
  flex-wrap: nowrap !important;
}
.nav-container{
  flex-wrap: nowrap !important;
}

/* Large desktop (default >1250px): comfortable sizing already handled by style.css */

/* === Mid desktop · 1100-1250px · tighten slightly */
@media (max-width: 1250px){
  .nav-container{ gap: 14px !important; padding: 12px 20px !important; }
  .nav-list{ gap: 2px !important; }
  .nav-link{ padding: 8px 12px !important; font-size: 14px !important; }
  .btn-cta{ padding: 9px 16px !important; font-size: 13.5px !important; }
  .btn-cta span:not(.btn-cta-icon){ font-size: 13.5px; }
  .logo-sub{ font-size: 10px; }
}

/* === Small desktop/tablet landscape · 980-1100px · further compact */
@media (max-width: 1100px){
  .nav-container{ gap: 10px !important; padding: 11px 18px !important; }
  .nav-list{ gap: 0 !important; }
  .nav-link{ padding: 7px 10px !important; font-size: 13.5px !important; }
  .lang-current{ padding: 7px 10px !important; font-size: 13px !important; }
  .theme-toggle-btn{ padding: .45rem .7rem !important; }
  .theme-toggle-btn .tt-label{ display: none !important; }
  .btn-cta{ padding: 8px 14px !important; }
  .logo-main{ font-size: 20px !important; }
  .logo-sub{ display: none !important; }
  .logo-icon{ width: 38px !important; height: 38px !important; }
}

/* === Tablet portrait + small laptop · hide nav menu, show hamburger at 980px
   (was 900 · too late — Thai text needs more room) */
@media (max-width: 980px){
  .nav-menu{
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 100dvh !important; height: 100vh !important;
    background: rgba(6, 8, 26, .98) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1) !important;
    z-index: 1050 !important;
    padding: 90px 24px 40px !important;
    overflow-y: auto !important;
    display: flex !important;
    justify-content: flex-start !important;
  }
  html[data-theme="light"] .nav-menu{
    background: rgba(246, 248, 253, .98) !important;
  }
  .nav-menu.open{ transform: translateX(0) !important; }

  .nav-list{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }
  .nav-link{
    display: block;
    width: 100%;
    padding: 16px 22px !important;
    font-size: 17px !important;
    text-align: center;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    white-space: normal !important;
  }
  html[data-theme="light"] .nav-link{
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
  }
  .nav-link:hover,
  .nav-link.active{
    background: linear-gradient(135deg, rgba(0, 212, 255, .12), rgba(123, 92, 255, .08)) !important;
    border-color: rgba(0, 212, 255, .4) !important;
    color: var(--text) !important;
  }
  html[data-theme="light"] .nav-link:hover,
  html[data-theme="light"] .nav-link.active{
    background: linear-gradient(135deg, rgba(0, 130, 180, .08), rgba(91, 59, 214, .05)) !important;
    border-color: var(--primary) !important;
  }

  .hamburger{ display: flex !important; order: 99; }
  body.nav-open{ overflow: hidden; }
}

/* === Phone · <640px · compact right cluster */
@media (max-width: 640px){
  .nav-container{
    padding: 10px 14px !important;
    gap: 8px !important;
  }
  .nav-logo{ gap: 8px; }
  .logo-icon{ width: 34px !important; height: 34px !important; }
  .logo-main{ font-size: 18px !important; }
  .lang-current{
    padding: 7px 9px !important;
    font-size: 12.5px !important;
    gap: 5px !important;
  }
  .lang-code{ display: none !important; }
  .lang-arrow{ display: none; }
  .theme-toggle-btn{
    padding: .4rem .55rem !important;
    min-height: 34px !important;
  }
  .btn-cta{
    padding: 7px 12px !important;
    font-size: 12.5px !important;
  }
  .btn-cta span:not(.btn-cta-icon){ display: none !important; }
  .hamburger{
    width: 38px !important;
    height: 38px !important;
  }
  .nav-right{ gap: 6px !important; }
}

/* === Tiny phone · <360px */
@media (max-width: 360px){
  .nav-container{ padding: 8px 10px !important; gap: 6px !important; }
  .logo-icon{ width: 30px !important; height: 30px !important; }
  .logo-main{ font-size: 16px !important; }
  .lang-flag{ font-size: 14px !important; }
  .btn-cta{ padding: 6px 10px !important; }
}

/* === Landscape phone · narrow viewport + short height */
@media (max-height: 500px) and (orientation: landscape){
  .nav-menu{
    padding-top: 70px !important;
    padding-bottom: 20px !important;
  }
  .nav-list{ max-width: 600px; gap: 6px !important; }
  .nav-link{ padding: 11px 18px !important; font-size: 15px !important; }
}

/* === iPad portrait (768px) + landscape (1024px) specific */
@media (min-width: 768px) and (max-width: 1024px){
  .nav-container{ max-width: 100% !important; }
}

/* =========================================================
   PRICING CALCULATOR · Luxurious B2B light-mode redesign
   Replace dark panels → premium white with brand accents
   ========================================================= */

/* Left panel · inputs */
html[data-theme="light"] .calc-inputs{
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  box-shadow:
    0 20px 50px rgba(91, 59, 214, .12),
    0 4px 14px rgba(15, 23, 42, .06),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  backdrop-filter: none !important;
}
html[data-theme="light"] .calc-inputs-section{
  border-bottom-color: rgba(15, 23, 42, .08) !important;
}
html[data-theme="light"] .calc-input-title{ color: var(--text) !important; letter-spacing: 1.2px; }
html[data-theme="light"] .calc-input-sub{ color: var(--text-dim) !important; }

/* Product picker cards */
html[data-theme="light"] .calc-product{
  background: #f8fafd !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  transition: all .2s;
}
html[data-theme="light"] .calc-product:hover{
  background: #ffffff !important;
  border-color: var(--primary) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 130, 180, .10);
}
html[data-theme="light"] .calc-product-icon{
  background: linear-gradient(135deg, rgba(0, 130, 180, .12), rgba(91, 59, 214, .08)) !important;
  border: 1px solid rgba(0, 130, 180, .20);
}
html[data-theme="light"] .calc-product-info h4{ color: var(--text) !important; }
html[data-theme="light"] .calc-product-info p{ color: var(--text-dim) !important; }
html[data-theme="light"] .calc-product-check{
  background: #ffffff !important;
  border: 2px solid rgba(15, 23, 42, .18) !important;
}
html[data-theme="light"] .calc-product.selected{
  background: linear-gradient(135deg, rgba(0, 130, 180, .08), rgba(91, 59, 214, .05)) !important;
  border-color: var(--primary) !important;
  box-shadow:
    0 0 0 3px rgba(0, 130, 180, .12),
    0 6px 18px rgba(91, 59, 214, .14) !important;
}

/* Tier selector (Starter / Professional / Enterprise) */
html[data-theme="light"] .calc-tiers .calc-tier,
html[data-theme="light"] .calc-tier{
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-sm);
}
html[data-theme="light"] .calc-tier.selected,
html[data-theme="light"] .calc-tier.active{
  background: var(--grad-1) !important;
  background-image: var(--grad-1) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(91, 59, 214, .28) !important;
}

/* Sliders */
html[data-theme="light"] .calc-slider{
  background: rgba(15, 23, 42, .08) !important;
}
html[data-theme="light"] .calc-slider-label{ color: var(--text-dim) !important; }
html[data-theme="light"] .calc-slider-value{
  background: linear-gradient(135deg, rgba(0, 130, 180, .10), rgba(91, 59, 214, .08)) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(0, 130, 180, .22);
}
html[data-theme="light"] .calc-slider-ticks{ color: var(--text-muted) !important; }

/* Chips (language selector / industry template) */
html[data-theme="light"] .calc-chip{
  background: #f8fafd !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  color: var(--text-dim) !important;
}
html[data-theme="light"] .calc-chip:hover{
  background: #eef2fa !important;
  color: var(--text) !important;
  border-color: var(--primary) !important;
}
html[data-theme="light"] .calc-chip.active{
  background: linear-gradient(135deg, rgba(0, 130, 180, .14), rgba(91, 59, 214, .08)) !important;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  font-weight: 700;
}

/* Radios (billing options) */
html[data-theme="light"] .calc-radio{
  background: #f8fafd !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;
}
html[data-theme="light"] .calc-radio:hover{
  background: #ffffff !important;
  border-color: var(--primary) !important;
}
html[data-theme="light"] .calc-radio.selected{
  background: linear-gradient(135deg, rgba(0, 130, 180, .08), rgba(91, 59, 214, .05)) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 130, 180, .10);
}
html[data-theme="light"] .calc-radio-dot{
  background: #ffffff !important;
  border: 2px solid rgba(15, 23, 42, .20) !important;
}
html[data-theme="light"] .calc-radio.selected .calc-radio-dot{
  background: var(--grad-1) !important;
  border-color: transparent !important;
}
html[data-theme="light"] .calc-radio-label{ color: var(--text) !important; }
html[data-theme="light"] .calc-radio-badge{
  background: linear-gradient(135deg, var(--success), var(--primary)) !important;
  color: #fff !important;
}

/* =========================================================
   RIGHT PANEL · YOUR ESTIMATE
   Premium gradient card with strong depth · hero moment
   ========================================================= */
html[data-theme="light"] .calc-output{
  background:
    linear-gradient(135deg,
      rgba(0, 130, 180, .04) 0%,
      rgba(91, 59, 214, .06) 50%,
      rgba(200, 42, 159, .04) 100%),
    #ffffff !important;
  border: 1.5px solid rgba(91, 59, 214, .20) !important;
  box-shadow:
    0 30px 70px rgba(91, 59, 214, .18),
    0 10px 30px rgba(0, 130, 180, .12),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 0 0 1px rgba(255, 255, 255, .6) !important;
  backdrop-filter: none !important;
}
html[data-theme="light"] .calc-output-label{
  color: var(--secondary) !important;
  letter-spacing: 1.5px;
  font-weight: 800;
}
/* Price stays gradient (fix background-clip) */
html[data-theme="light"] .calc-output-price{
  background: none !important;
  background-image: var(--grad-1) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
html[data-theme="light"] .calc-output-period{ color: var(--text-dim) !important; }
html[data-theme="light"] .calc-output-savings{
  background: rgba(10, 143, 90, .10) !important;
  border: 1px solid rgba(10, 143, 90, .30) !important;
  color: var(--success) !important;
}

/* Breakdown box (รายละเอียดราคา) */
html[data-theme="light"] .calc-breakdown{
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 2px 6px rgba(15, 23, 42, .04);
}
html[data-theme="light"] .calc-breakdown-title{ color: var(--text) !important; }
html[data-theme="light"] .calc-breakdown-item{
  border-bottom-color: rgba(15, 23, 42, .06) !important;
}
html[data-theme="light"] .calc-breakdown-label{ color: var(--text-dim) !important; }
html[data-theme="light"] .calc-breakdown-value{ color: var(--text) !important; font-weight: 600; }
html[data-theme="light"] .calc-breakdown-value.neg{ color: var(--success) !important; }
html[data-theme="light"] .calc-breakdown-total{
  border-top: 2px solid rgba(91, 59, 214, .25) !important;
  color: var(--text) !important;
}

/* Features list (✓ 30-day money-back / ISO 27001 / ...) */
html[data-theme="light"] .calc-features-title{ color: var(--text) !important; }
html[data-theme="light"] .calc-features-list{ color: var(--text-dim) !important; }

/* CTA buttons */
html[data-theme="light"] .calc-btn-primary{
  background: var(--grad-1) !important;
  background-image: var(--grad-1) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(91, 59, 214, .28) !important;
}
html[data-theme="light"] .calc-btn-primary:hover{
  box-shadow: 0 12px 32px rgba(91, 59, 214, .38) !important;
  transform: translateY(-2px);
}
html[data-theme="light"] .calc-btn-ghost{
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .12) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-sm);
}
html[data-theme="light"] .calc-btn-ghost:hover{
  background: #f1f5fa !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
html[data-theme="light"] .calc-btn.calc-btn-ghost:has(+ .calc-btn-ghost),
html[data-theme="light"] .calc-actions-row .calc-btn{
  background: #ffffff !important;
}

/* Calc hero banner (top gradient badge + heading) */
html[data-theme="light"] .calc-hero{
  background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 50%, #fdf0f8 100%) !important;
}
html[data-theme="light"] .calc-hero-badge{
  background: linear-gradient(135deg, rgba(251, 191, 36, .14), rgba(245, 158, 11, .08)) !important;
  border: 1px solid rgba(251, 191, 36, .35) !important;
  color: var(--warn) !important;
}
html[data-theme="light"] .calc-hero-title{ color: var(--text) !important; }
html[data-theme="light"] .calc-hero-sub{ color: var(--text-dim) !important; }

/* ROI section if present */
html[data-theme="light"] .calc-roi,
html[data-theme="light"] .calc-recommend{
  background: linear-gradient(135deg, rgba(10, 143, 90, .06), rgba(0, 130, 180, .04)) !important;
  border: 1px solid rgba(10, 143, 90, .25) !important;
  color: var(--text) !important;
}

/* Addon toggles */
html[data-theme="light"] .calc-addon,
html[data-theme="light"] [class*="addon-item"]{
  background: #f8fafd !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
}
html[data-theme="light"] .calc-addon strong,
html[data-theme="light"] [class*="addon-item"] strong{ color: var(--text) !important; }

/* Modal */
html[data-theme="light"] .calc-modal{
  background: rgba(15, 23, 42, .45) !important;
}
html[data-theme="light"] .calc-modal-inner{
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .12) !important;
  box-shadow: var(--shadow-lg);
}
html[data-theme="light"] .calc-modal-field label{ color: var(--text) !important; }
html[data-theme="light"] .calc-modal-close{
  background: #f1f5fa !important;
  color: var(--text) !important;
}

/* Mobile menu backdrop overlay (optional click-outside-to-close) */
.nav-menu-backdrop{
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(4px);
  z-index: 1040;
  opacity: 0;
  transition: opacity .3s;
}
@media (max-width: 980px){
  .nav-menu-backdrop.open{
    display: block;
    opacity: 1;
  }
}

/* =========================================================
   AI ORB · LLM model chips (GPT-4o / Claude / Gemini / Llama / Mistral / AIM-v3)
   ========================================================= */
html[data-theme="light"] .ai-visual{ background: transparent !important; }

/* =========================================================
   Center AI orb · beautiful gradient sphere for light mode
   (was: nearly-black navy that looked like a hole on light bg)
   ========================================================= */
html[data-theme="light"] .ai-core-inner{
  background: radial-gradient(
    circle at 35% 30%,
    #00d4ff 0%,
    #7b5cff 45%,
    #ff4ecd 85%,
    #c82a9f 100%
  ) !important;
  border: 2px solid rgba(255, 255, 255, .9) !important;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, .7),
    0 0 30px rgba(0, 212, 255, .45),
    0 0 60px rgba(123, 92, 255, .35),
    0 0 90px rgba(255, 78, 205, .25),
    inset 0 0 40px rgba(255, 255, 255, .25),
    inset 0 -20px 40px rgba(200, 42, 159, .3) !important;
  animation: coreBreatheLight 4s ease-in-out infinite !important;
}
@keyframes coreBreatheLight{
  0%,100%{
    box-shadow:
      0 0 0 4px rgba(255, 255, 255, .7),
      0 0 30px rgba(0, 212, 255, .45),
      0 0 60px rgba(123, 92, 255, .35),
      0 0 90px rgba(255, 78, 205, .25),
      inset 0 0 40px rgba(255, 255, 255, .25),
      inset 0 -20px 40px rgba(200, 42, 159, .3);
  }
  50%{
    box-shadow:
      0 0 0 5px rgba(255, 255, 255, .8),
      0 0 50px rgba(0, 212, 255, .6),
      0 0 90px rgba(123, 92, 255, .5),
      0 0 130px rgba(255, 78, 205, .4),
      inset 0 0 50px rgba(255, 255, 255, .35),
      inset 0 -25px 50px rgba(200, 42, 159, .4);
  }
}

/* Highlight / specular reflection on top — makes it feel like a crystal orb */
html[data-theme="light"] .ai-core-inner::before{
  content: '';
  position: absolute;
  top: 10%;
  left: 20%;
  width: 40%;
  height: 30%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, .55) 0%,
    rgba(255, 255, 255, .2) 40%,
    transparent 70%
  );
  border-radius: 50%;
  filter: blur(6px);
  pointer-events: none;
  z-index: 2;
}

/* Outer pulsing rings · match the new palette */
html[data-theme="light"] .ai-core-ring{
  border-color: rgba(91, 59, 214, .35) !important;
}

/* Soft ambient glow around the orb */
html[data-theme="light"] .ai-core-glow{
  background: radial-gradient(
    circle,
    rgba(91, 59, 214, .35),
    rgba(0, 130, 180, .18) 40%,
    transparent 70%
  ) !important;
}

/* Neural SVG inside · bump contrast so white nodes pop on gradient */
html[data-theme="light"] .ai-core-inner svg{
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
  position: relative;
  z-index: 3;
}

/* Label below orb */
html[data-theme="light"] .ai-core-label{ color: var(--text) !important; }
html[data-theme="light"] .ai-core-title{
  background: none !important;
  background-image: var(--grad-1) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
html[data-theme="light"] .ai-core-sub{ color: var(--text-muted) !important; }

/* LLM chips · white with colored border (keep brand dot color) */
html[data-theme="light"] .ai-chip{
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-md) !important;
  backdrop-filter: none !important;
}
html[data-theme="light"] .ai-chip-gpt{     border-color: rgba(16, 163, 127, .40) !important; }
html[data-theme="light"] .ai-chip-claude{  border-color: rgba(221, 107, 68, .40) !important; }
html[data-theme="light"] .ai-chip-gemini{  border-color: rgba(66, 133, 244, .40) !important; }
html[data-theme="light"] .ai-chip-llama{   border-color: rgba(0, 82, 217, .40) !important; }
html[data-theme="light"] .ai-chip-mistral{ border-color: rgba(255, 114, 0, .40) !important; }
html[data-theme="light"] .ai-chip-aim{
  background: linear-gradient(135deg, #f0f7ff, #ffffff) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 4px 16px rgba(0, 130, 180, .18) !important;
}
html[data-theme="light"] .ai-chip-aim span:last-child{
  background: none !important;
  background-image: var(--grad-1) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}

/* AI stats strip (10M+ Queries/day · 98.7% Accuracy · <200ms) */
html[data-theme="light"] .ai-stats-strip{
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-md) !important;
  backdrop-filter: none !important;
}
html[data-theme="light"] .ai-stats-strip strong{ color: var(--text) !important; }
html[data-theme="light"] .ai-stats-strip span{ color: var(--text-muted) !important; }

/* AI feature cards · Natural Conversation / Predictive / Document AI / Multi-Agent */
html[data-theme="light"] .ai-cap{
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  box-shadow:
    0 4px 12px rgba(15, 23, 42, .06),
    0 1px 3px rgba(15, 23, 42, .04) !important;
  backdrop-filter: none !important;
}
html[data-theme="light"] .ai-cap:hover{
  border-color: rgba(91, 59, 214, .25) !important;
  box-shadow:
    0 16px 40px rgba(91, 59, 214, .14),
    0 4px 12px rgba(15, 23, 42, .08) !important;
  transform: translateY(-3px);
}
html[data-theme="light"] .ai-cap h4{ color: var(--text) !important; }
html[data-theme="light"] .ai-cap p,
html[data-theme="light"] .ai-cap-body{ color: var(--text-dim) !important; }

/* Icon boxes inside AI caps — colored bg with more vibrant tint for light */
html[data-theme="light"] .ai-cap-icon{
  background: linear-gradient(135deg,
    rgba(0, 130, 180, .12),
    rgba(91, 59, 214, .08)) !important;
  border: 1px solid rgba(0, 130, 180, .22) !important;
  color: var(--primary) !important;
}
html[data-theme="light"] .ai-cap-ic-2{
  background: linear-gradient(135deg,
    rgba(91, 59, 214, .14),
    rgba(200, 42, 159, .08)) !important;
  border-color: rgba(91, 59, 214, .25) !important;
  color: var(--secondary) !important;
}
html[data-theme="light"] .ai-cap-ic-3{
  background: linear-gradient(135deg,
    rgba(200, 42, 159, .14),
    rgba(178, 99, 0, .08)) !important;
  border-color: rgba(200, 42, 159, .25) !important;
  color: var(--accent) !important;
}
html[data-theme="light"] .ai-cap-ic-4{
  background: linear-gradient(135deg,
    rgba(10, 143, 90, .14),
    rgba(0, 130, 180, .08)) !important;
  border-color: rgba(10, 143, 90, .25) !important;
  color: var(--success) !important;
}

/* AI Ethics Pledge bottom card */
html[data-theme="light"] .ai-ethics{
  background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 50%, #fdf0f8 100%) !important;
  background-image: linear-gradient(135deg, #f0f7ff 0%, #ffffff 50%, #fdf0f8 100%) !important;
  border: 1px solid rgba(10, 143, 90, .22) !important;
  box-shadow:
    0 8px 24px rgba(10, 143, 90, .08),
    0 2px 6px rgba(15, 23, 42, .04) !important;
}
html[data-theme="light"] .ai-ethics h4{ color: var(--text) !important; }
html[data-theme="light"] .ai-ethics p{ color: var(--text-dim) !important; }
html[data-theme="light"] .ethics-icon{
  background: linear-gradient(135deg, rgba(10, 143, 90, .18), rgba(0, 130, 180, .10)) !important;
  border: 1px solid rgba(10, 143, 90, .30) !important;
  color: var(--success) !important;
}

/* =========================================================
   HOW-IT-WORKS SUMMARY BAR · bottom trust bar
   (2-8 สัปดาห์ · ฿9,900 · 98% On-time · Money-back 30 วัน)
   ========================================================= */
html[data-theme="light"] .hiw-summary{
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  box-shadow:
    0 8px 24px rgba(91, 59, 214, .10),
    0 2px 6px rgba(15, 23, 42, .06) !important;
  backdrop-filter: none !important;
}
html[data-theme="light"] .hiw-sum-item{
  background: transparent !important;
}
html[data-theme="light"] .hiw-sum-num{ color: var(--text) !important; font-weight: 700; }
html[data-theme="light"] .hiw-sum-label{ color: var(--text-muted) !important; }

/* Icon bubbles (⏱ 💎 🎯 🛡) · colored gradient tint per item */
html[data-theme="light"] .hiw-sum-item:nth-child(1) .hiw-sum-icon{
  background: linear-gradient(135deg, rgba(0, 130, 180, .14), rgba(0, 130, 180, .06)) !important;
  border: 1px solid rgba(0, 130, 180, .25) !important;
}
html[data-theme="light"] .hiw-sum-item:nth-child(2) .hiw-sum-icon{
  background: linear-gradient(135deg, rgba(91, 59, 214, .14), rgba(200, 42, 159, .06)) !important;
  border: 1px solid rgba(91, 59, 214, .25) !important;
}
html[data-theme="light"] .hiw-sum-item:nth-child(3) .hiw-sum-icon{
  background: linear-gradient(135deg, rgba(200, 42, 159, .14), rgba(178, 99, 0, .06)) !important;
  border: 1px solid rgba(200, 42, 159, .25) !important;
}
html[data-theme="light"] .hiw-sum-item:nth-child(4) .hiw-sum-icon{
  background: linear-gradient(135deg, rgba(10, 143, 90, .14), rgba(0, 130, 180, .06)) !important;
  border: 1px solid rgba(10, 143, 90, .25) !important;
}

/* =========================================================
   Comparison table · AIM column · change green → brand gradient
   ========================================================= */
html[data-theme="light"] .cmp-aim .mk-yes{
  background: linear-gradient(135deg, #0082b4 0%, #5b3bd6 50%, #c82a9f 100%) !important;
  background-image: linear-gradient(135deg, #0082b4 0%, #5b3bd6 50%, #c82a9f 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow:
    0 4px 14px rgba(91, 59, 214, .35),
    0 0 20px rgba(200, 42, 159, .20) !important;
}
html[data-theme="light"] .cmp-aim em{
  background: none !important;
  background-image: linear-gradient(135deg, #0082b4 0%, #5b3bd6 60%, #c82a9f 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 700;
}
html[data-theme="light"] .cmp-aim{
  background: linear-gradient(180deg, rgba(91, 59, 214, .05), rgba(200, 42, 159, .03)) !important;
  border-left-color: rgba(91, 59, 214, .18) !important;
  border-right-color: rgba(91, 59, 214, .18) !important;
}

/* Non-AIM column check marks · subtle teal (not green) */
html[data-theme="light"] .mk-yes{
  background: linear-gradient(135deg, rgba(0, 130, 180, .12), rgba(91, 59, 214, .08)) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(0, 130, 180, .25) !important;
  box-shadow: none !important;
}

/* Partial · keep amber */
html[data-theme="light"] .mk-partial{
  background: rgba(178, 99, 0, .10) !important;
  color: #b26300 !important;
  border: 1px solid rgba(178, 99, 0, .28) !important;
}

/* No · keep soft red */
html[data-theme="light"] .mk-no{
  background: rgba(220, 38, 38, .08) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(220, 38, 38, .22) !important;
}

/* =========================================================
   PRICING CARDS · correct selectors (.pr-card)
   ========================================================= */
html[data-theme="light"] .pr-card{
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-md) !important;
  backdrop-filter: none !important;
}
html[data-theme="light"] .pr-card:hover{
  border-color: var(--border-2) !important;
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-4px);
}
html[data-theme="light"] .pr-card-popular{
  background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%) !important;
  border: 2px solid var(--primary) !important;
  box-shadow: var(--shadow-lg), 0 0 0 4px rgba(0, 130, 180, .08) !important;
}
html[data-theme="light"] .pr-card-popular:hover{
  box-shadow: var(--shadow-lg), 0 0 0 4px rgba(0, 130, 180, .14) !important;
}
html[data-theme="light"] .pr-glow-border{ display: none; }
html[data-theme="light"] .pr-tier{ color: var(--text) !important; }
html[data-theme="light"] .pr-tier-sub{ color: var(--text-dim) !important; }
html[data-theme="light"] .pr-currency,
html[data-theme="light"] .pr-amount{ color: var(--text) !important; }
html[data-theme="light"] .pr-card-popular .pr-amount{
  background: none !important;
  background-image: var(--grad-1) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
html[data-theme="light"] .pr-period{ color: var(--text-muted) !important; }
html[data-theme="light"] .pr-save{ color: var(--success) !important; }
html[data-theme="light"] .pr-custom-label{
  background: none !important;
  background-image: var(--grad-1) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
html[data-theme="light"] .pr-custom-note{ color: var(--text-muted) !important; }
html[data-theme="light"] .pr-feat-title{ color: var(--text-dim) !important; }
html[data-theme="light"] .pr-feat-title-hl{ color: var(--primary) !important; font-weight: 700; }
html[data-theme="light"] .pr-features li{ color: var(--text-dim) !important; }
html[data-theme="light"] .pr-feat-muted{ color: var(--text-muted) !important; opacity: .7; }
html[data-theme="light"] .pr-check{
  color: var(--success) !important;
  background: rgba(10, 143, 90, .1) !important;
}
html[data-theme="light"] .pr-x{
  color: var(--text-muted) !important;
  background: rgba(15, 23, 42, .06) !important;
}
html[data-theme="light"] .pr-divider{ background: var(--border) !important; }

/* Pricing tier icons */
html[data-theme="light"] .pr-ic-starter{
  background: rgba(0, 130, 180, .1) !important;
  color: var(--primary) !important;
  border-color: rgba(0, 130, 180, .25) !important;
}
html[data-theme="light"] .pr-ic-pro{
  background: var(--grad-1) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(91, 59, 214, .25) !important;
}
html[data-theme="light"] .pr-ic-ent{
  background: rgba(91, 59, 214, .1) !important;
  color: var(--secondary) !important;
  border-color: rgba(91, 59, 214, .25) !important;
}

/* Pricing CTA buttons */
html[data-theme="light"] .pr-cta-ghost{
  background: #ffffff !important;
  border: 1.5px solid var(--border-2) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-sm);
}
html[data-theme="light"] .pr-cta-ghost:hover{
  background: var(--bg-3) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
html[data-theme="light"] .pr-cta-primary{
  background: var(--grad-1) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(91, 59, 214, .25) !important;
}
html[data-theme="light"] .pr-cta-primary:hover{
  box-shadow: 0 10px 28px rgba(91, 59, 214, .35) !important;
}

/* Popular badge (★ ยอดนิยม) */
html[data-theme="light"] .pr-popular-badge{
  background: var(--grad-1) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(91, 59, 214, .3) !important;
}

/* Pricing toggle (รายเดือน/รายปี) */
html[data-theme="light"] .pr-toggle{
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm);
}
html[data-theme="light"] .pr-toggle-btn{ color: var(--text-dim) !important; }
html[data-theme="light"] .pr-toggle-btn.pr-toggle-active{ color: #fff !important; }
html[data-theme="light"] .pr-toggle-slider{
  background: var(--grad-1) !important;
  box-shadow: 0 4px 12px rgba(91, 59, 214, .25) !important;
}
html[data-theme="light"] .pr-toggle-badge{
  background: var(--success) !important;
  color: #fff !important;
}

/* Bottom trust bar (Money-back/Cancel/Invoice/Consult) */
html[data-theme="light"] .pr-trust{
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-md);
}
html[data-theme="light"] .pr-trust-item{ color: var(--text-dim) !important; }
html[data-theme="light"] .pr-trust-item strong{ color: var(--text) !important; }
html[data-theme="light"] .pr-trust-item svg{ color: var(--primary) !important; }

/* FAQ cards */
html[data-theme="light"] .faq-q,
html[data-theme="light"] .faq-item,
html[data-theme="light"] details.faq-q{
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm);
}
html[data-theme="light"] .faq-q[open],
html[data-theme="light"] .faq-item.open{
  border-color: var(--border-2) !important;
  box-shadow: var(--shadow-md);
}
html[data-theme="light"] .faq-q summary,
html[data-theme="light"] .faq-a,
html[data-theme="light"] .faq-q-body{ color: var(--text-dim) !important; }
html[data-theme="light"] .faq-q summary{ color: var(--text) !important; font-weight: 700; }

/* About values (Integrity/Ethics/Excellence/Partnership) */
html[data-theme="light"] .ab-value{
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-md);
}
html[data-theme="light"] .ab-value:hover{
  border-color: rgba(0, 130, 180, .25) !important;
  box-shadow: var(--shadow-lg);
}
html[data-theme="light"] .ab-value strong{ color: var(--text) !important; }
html[data-theme="light"] .ab-value span{ color: var(--text-dim) !important; }

/* About story container */
html[data-theme="light"] .about-left,
html[data-theme="light"] .about-story,
html[data-theme="light"] .about-values-wrap{
  background: transparent !important;
}

/* Contact method cards (LINE/Phone/WhatsApp/Telegram/Email) */
html[data-theme="light"] .ct-method{
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-md);
}
html[data-theme="light"] .ct-method:hover{
  border-color: var(--border-2) !important;
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
html[data-theme="light"] .ct-m-label{ color: var(--text-muted) !important; font-weight: 600; letter-spacing: .5px; }
html[data-theme="light"] .ct-m-value{ color: var(--text) !important; font-weight: 700; }
html[data-theme="light"] .ct-m-sub{ color: var(--text-muted) !important; }

/* Contact office info (hours/address/PDPA) */
html[data-theme="light"] .ct-office,
html[data-theme="light"] .ct-office-row{
  background: #f8fafd !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  color: var(--text-dim) !important;
}
html[data-theme="light"] .ct-office-row strong{ color: var(--text) !important; }

/* Contact form container · critical fix (was dark purple) */
html[data-theme="light"] .ct-form-wrap{
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
  backdrop-filter: none !important;
}
html[data-theme="light"] .ct-form-head h3{ color: var(--text) !important; }
html[data-theme="light"] .ct-form-head p{ color: var(--text-dim) !important; }
html[data-theme="light"] .ct-field label{ color: var(--text) !important; }

/* Input wrappers inside contact form */
html[data-theme="light"] .ct-input-wrap{
  background: #f8fafd !important;
  border: 1px solid var(--border) !important;
}
html[data-theme="light"] .ct-input-wrap:focus-within{
  background: #ffffff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 130, 180, .12) !important;
}
html[data-theme="light"] .ct-input-wrap input,
html[data-theme="light"] .ct-input-wrap textarea{
  color: var(--text) !important;
}
html[data-theme="light"] .ct-input-icon{ color: var(--text-muted) !important; }
html[data-theme="light"] .ct-input-wrap:focus-within .ct-input-icon{ color: var(--primary) !important; }
html[data-theme="light"] .ct-input-wrap input::placeholder,
html[data-theme="light"] .ct-input-wrap textarea::placeholder{ color: var(--text-muted) !important; }

/* Service interest chips (เว็บไซต์/AI/SaaS/Mobile App/SEO/Automation) */
html[data-theme="light"] .ct-chip span{
  background: #f8fafd !important;
  border: 1px solid var(--border) !important;
  color: var(--text-dim) !important;
  transition: all .2s;
}
html[data-theme="light"] .ct-chip span:hover{
  background: #eef2fa !important;
  border-color: var(--border-2) !important;
}
html[data-theme="light"] .ct-chip input:checked + span{
  background: linear-gradient(135deg, rgba(0, 130, 180, .1), rgba(91, 59, 214, .08)) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* Budget pills in contact form */
html[data-theme="light"] .ct-budgets label,
html[data-theme="light"] .ct-budget span{
  background: #f8fafd !important;
  border: 1px solid var(--border) !important;
  color: var(--text-dim) !important;
}
html[data-theme="light"] .ct-budget input:checked + span{
  background: var(--grad-1) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Consent checkbox line */
html[data-theme="light"] .ct-consent,
html[data-theme="light"] .ct-form .ct-consent{
  background: rgba(10, 143, 90, .06) !important;
  border: 1px solid rgba(10, 143, 90, .25) !important;
  color: var(--text-dim) !important;
}

/* How it works cards */
html[data-theme="light"] .hiw-card,
html[data-theme="light"] .hiw-card-final{
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-md);
  backdrop-filter: none;
}
html[data-theme="light"] .hiw-card:hover{
  border-color: var(--border-2) !important;
  box-shadow: var(--shadow-lg);
}
html[data-theme="light"] .hiw-card h3,
html[data-theme="light"] .hiw-card h4{ color: var(--text) !important; }
html[data-theme="light"] .hiw-card p,
html[data-theme="light"] .hiw-card li{ color: var(--text-dim) !important; }
html[data-theme="light"] .hiw-dot{
  background: #ffffff !important;
  border: 2px solid var(--primary) !important;
  color: var(--primary) !important;
  box-shadow: var(--shadow-sm);
}
html[data-theme="light"] .hiw-line{ background: rgba(15, 23, 42, .08) !important; }

/* AI Solutions / feature cards */
html[data-theme="light"] .feat-card,
html[data-theme="light"] .bento-card,
html[data-theme="light"] .ai-feat-card{
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-md);
}
html[data-theme="light"] .feat-card:hover,
html[data-theme="light"] .bento-card:hover,
html[data-theme="light"] .ai-feat-card:hover{
  box-shadow: var(--shadow-lg);
}

/* =========================================================
   COMPARISON TABLE · critical fix · make rows white
   ========================================================= */
html[data-theme="light"] .cmp-wrap{
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-lg) !important;
  backdrop-filter: none !important;
  overflow: hidden;
}
html[data-theme="light"] .cmp-table{
  background: #ffffff !important;
  border: none !important;
}
html[data-theme="light"] .cmp-th-feature{
  background: #f8fafd !important;
  color: var(--text) !important;
}
html[data-theme="light"] .th-name{ color: var(--text) !important; }
html[data-theme="light"] .th-sub{ color: var(--text-muted) !important; }
html[data-theme="light"] .cmp-th{
  background: #f8fafd !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
}
html[data-theme="light"] .cmp-th-aim{
  background: linear-gradient(135deg, rgba(0, 130, 180, .08), rgba(91, 59, 214, .05)) !important;
  border-bottom: 2px solid var(--primary) !important;
}
html[data-theme="light"] .cmp-category td{
  background: #f1f5fa !important;
  color: var(--text) !important;
  font-weight: 700;
}
html[data-theme="light"] .cmp-row td,
html[data-theme="light"] .cmp-cell{
  background: #ffffff !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-dim) !important;
}
html[data-theme="light"] .cmp-row:hover td{ background: #fafbfd !important; }
html[data-theme="light"] .cmp-row:hover{ background: transparent !important; }
html[data-theme="light"] .cmp-feat strong{ color: var(--text) !important; }
html[data-theme="light"] .cmp-feat span{ color: var(--text-muted) !important; }
html[data-theme="light"] .cmp-cell em{ color: var(--text-dim) !important; }
html[data-theme="light"] .cmp-aim{
  background: linear-gradient(90deg, rgba(0, 130, 180, .03), transparent) !important;
}
html[data-theme="light"] .cmp-aim em{ color: var(--primary) !important; }

/* Comparison score tiles (20/20, 10/20, 6/20, 3/20) · .summary-card */
html[data-theme="light"] .cmp-summary{
  background: transparent !important;
}
html[data-theme="light"] .summary-card{
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-md) !important;
  backdrop-filter: none !important;
}
html[data-theme="light"] .summary-card:hover{
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--border-2) !important;
}
/* The winning card (AIM DEV 20/20) — keep gradient accent */
html[data-theme="light"] .summary-card.summary-win{
  background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 50%, #fdf0f8 100%) !important;
  border: 2px solid var(--primary) !important;
  box-shadow: var(--shadow-lg), 0 0 0 4px rgba(0, 130, 180, .08) !important;
}
html[data-theme="light"] .summary-card.summary-win::before{ opacity: .08 !important; }

/* Summary number · gradient text fix */
html[data-theme="light"] .summary-num{
  background: none !important;
  background-image: var(--grad-1) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
html[data-theme="light"] .summary-num-alt{
  background: none !important;
  background-image: linear-gradient(135deg, #b26300, #c82a9f) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
html[data-theme="light"] .summary-num-warn{
  background: none !important;
  background-image: linear-gradient(135deg, #ef4444, #b26300) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
html[data-theme="light"] .summary-num-danger{
  background: none !important;
  background-image: linear-gradient(135deg, #dc2626, #c82a9f) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
html[data-theme="light"] .summary-label{ color: var(--text-dim) !important; font-weight: 600; }

/* Summary icons */
html[data-theme="light"] .summary-icon{
  background: rgba(0, 130, 180, .1) !important;
  border-color: rgba(0, 130, 180, .25) !important;
  color: var(--primary) !important;
}
html[data-theme="light"] .summary-win .summary-icon{
  background: var(--grad-1) !important;
  color: #fff !important;
}

/* =========================================================
   TESTIMONIALS · correct selectors (.ts-*)
   ========================================================= */
html[data-theme="light"] .ts-card{
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-md) !important;
  backdrop-filter: none !important;
}
html[data-theme="light"] .ts-card:hover{
  border-color: var(--border-2) !important;
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-3px);
}
html[data-theme="light"] .ts-card::before{ opacity: 0 !important; }

html[data-theme="light"] .ts-card-featured{
  background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 55%, #fdf0f8 100%) !important;
  border: 1px solid rgba(0, 130, 180, .18) !important;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 130, 180, .06) !important;
}

html[data-theme="light"] .ts-text{ color: var(--text) !important; }
html[data-theme="light"] .ts-card-featured .ts-text{ color: var(--text) !important; }

html[data-theme="light"] .ts-quote-mark{
  color: var(--primary) !important;
  opacity: .25 !important;
}
html[data-theme="light"] .ts-card-featured .ts-quote-mark{
  color: var(--secondary) !important;
  opacity: .35 !important;
}

/* Result pills (+342% / +28% / 5x / Rank #1 / +156% / 100%) */
html[data-theme="light"] .ts-result{
  background: #f8fafd !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm);
}
html[data-theme="light"] .ts-r-num{
  /* fallback for gradient-text — if supported stays gradient; otherwise dark */
  color: var(--primary) !important;
}
/* Gradient color numerics — re-apply with darker colors for light bg */
html[data-theme="light"] .ts-r-green{
  background: none !important;
  background-image: linear-gradient(135deg, #0a8f5a, #0082b4) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
html[data-theme="light"] .ts-r-purple{
  background: none !important;
  background-image: linear-gradient(135deg, #5b3bd6, #c82a9f) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
html[data-theme="light"] .ts-r-blue{
  background: none !important;
  background-image: linear-gradient(135deg, #0082b4, #5b3bd6) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
html[data-theme="light"] .ts-r-orange{
  background: none !important;
  background-image: linear-gradient(135deg, #b26300, #c82a9f) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
html[data-theme="light"] .ts-r-pink{
  background: none !important;
  background-image: linear-gradient(135deg, #c82a9f, #b26300) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
html[data-theme="light"] .ts-r-label{ color: var(--text-dim) !important; }

/* Person / avatar */
html[data-theme="light"] .ts-person{
  border-top-color: var(--border) !important;
}
html[data-theme="light"] .ts-meta strong,
html[data-theme="light"] .ts-meta > *:first-child{ color: var(--text) !important; }
html[data-theme="light"] .ts-meta small,
html[data-theme="light"] .ts-meta span{ color: var(--text-muted) !important; }

/* Star ratings */
html[data-theme="light"] .ts-stars,
html[data-theme="light"] .ts-rs-stars{ color: #f59e0b !important; }

/* Top rating summary (4.9/5.0) */
html[data-theme="light"] .ts-rating-summary{
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm);
}
html[data-theme="light"] .ts-rs-num{ color: var(--text) !important; }
html[data-theme="light"] .ts-rs-sub{ color: var(--text-muted) !important; }

/* Client logos container · ts-trusted wrapping ts-logos */
html[data-theme="light"] .ts-trusted{
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-md) !important;
  backdrop-filter: none !important;
}
html[data-theme="light"] .ts-trusted-label{
  color: var(--text-muted) !important;
  font-weight: 700;
  letter-spacing: 2px;
}
html[data-theme="light"] .ts-logos{
  background: transparent !important;
  opacity: 1 !important;
}
html[data-theme="light"] .ts-logo{
  color: var(--text-muted) !important;
  opacity: .65;
  transition: all .2s;
}
html[data-theme="light"] .ts-logo:hover{
  opacity: 1;
  color: var(--primary) !important;
}

/* =========================================================
   SECTION BACKGROUNDS · soft light alternating
   ========================================================= */
html[data-theme="light"] section.section-alt,
html[data-theme="light"] section[class*="-alt"]{
  background: #eef2fa;
}
html[data-theme="light"] .products,
html[data-theme="light"] .pricing,
html[data-theme="light"] .testimonials,
html[data-theme="light"] .compare,
html[data-theme="light"] .hiw,
html[data-theme="light"] .ai-solutions,
html[data-theme="light"] .contact,
html[data-theme="light"] .about{
  background: transparent;
}
html[data-theme="light"] .section-title,
html[data-theme="light"] section h1,
html[data-theme="light"] section h2,
html[data-theme="light"] section h3{ color: var(--text); }
html[data-theme="light"] .section-desc,
html[data-theme="light"] .section-sub{ color: var(--text-dim) !important; }
html[data-theme="light"] .section-tag,
html[data-theme="light"] .section-badge{
  background: rgba(0, 130, 180, .08) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(0, 130, 180, .18) !important;
}

/* =========================================================
   FORMS · inputs/textareas/selects in light mode
   ========================================================= */
html[data-theme="light"] input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]),
html[data-theme="light"] textarea,
html[data-theme="light"] select{
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{ color: var(--text-muted) !important; }
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus{
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 130, 180, .12) !important;
  outline: none;
}
html[data-theme="light"] label,
html[data-theme="light"] .form-label{ color: var(--text) !important; }
html[data-theme="light"] .form-hint{ color: var(--text-muted) !important; }

/* Service tag chips (เว็บไซต์/AI Chatbot/SaaS/Mobile App etc) */
html[data-theme="light"] .tag-chip,
html[data-theme="light"] .svc-chip,
html[data-theme="light"] .chip{
  background: #f8fafd !important;
  border: 1px solid var(--border) !important;
  color: var(--text-dim) !important;
}
html[data-theme="light"] .tag-chip.active,
html[data-theme="light"] .svc-chip.active,
html[data-theme="light"] .chip.active{
  background: linear-gradient(135deg, rgba(0, 130, 180, .12), rgba(91, 59, 214, .08)) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* Budget pills */
html[data-theme="light"] .budget-pill,
html[data-theme="light"] .pill-btn{
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--text-dim) !important;
}
html[data-theme="light"] .budget-pill.active,
html[data-theme="light"] .pill-btn.active{
  background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* =========================================================
   CHAT WIDGET · clean white panel on light
   ========================================================= */
html[data-theme="light"] .chat-panel,
html[data-theme="light"] .uni-chat-panel{
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg);
}
html[data-theme="light"] .chat-body,
html[data-theme="light"] .uni-chat-body{ background: #f8fafd !important; }
html[data-theme="light"] .chat-msg-ai .chat-bubble,
html[data-theme="light"] .uni-chat-msg.bot .uni-chat-bubble{
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .chat-input-wrap,
html[data-theme="light"] .uni-chat-input-wrap{
  background: #ffffff !important;
  border-top-color: var(--border) !important;
}
html[data-theme="light"] .chat-input,
html[data-theme="light"] .uni-chat-input{
  background: #f8fafd !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .chat-welcome{
  color: var(--text-dim) !important;
}
html[data-theme="light"] .chat-quick-btn,
html[data-theme="light"] .uni-quick-btn{
  background: rgba(0, 130, 180, .06) !important;
  border: 1px solid rgba(0, 130, 180, .20) !important;
  color: var(--primary) !important;
}
html[data-theme="light"] .chat-quick-btn:hover,
html[data-theme="light"] .uni-quick-btn:hover{
  background: rgba(0, 130, 180, .12) !important;
}

/* =========================================================
   FOOTER
   ========================================================= */
html[data-theme="light"] .footer,
html[data-theme="light"] .demo-footer{
  background: #0a0e27 !important;
  border-top: none !important;
  color: #cbd5e1 !important;
}
html[data-theme="light"] .footer a{ color: #94a3b8 !important; }
html[data-theme="light"] .footer a:hover{ color: #00d4ff !important; }
/* keep footer dark even in light mode for contrast/polish — industry standard */

/* =========================================================
   BUTTONS · primary CTA stays vivid
   ========================================================= */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .btn-cta{
  background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(0, 130, 180, .25);
}
html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] .btn-cta:hover{
  box-shadow: 0 8px 20px rgba(0, 130, 180, .35);
  transform: translateY(-2px);
}
html[data-theme="light"] .btn-outline{
  background: #ffffff !important;
  border: 1px solid var(--border-2) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .btn-outline:hover{
  background: #f8fafd !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
html[data-theme="light"] .btn-ghost{
  background: transparent !important;
  color: var(--text-dim) !important;
}
html[data-theme="light"] .btn-ghost:hover{
  background: #f1f5fa !important;
  color: var(--text) !important;
}

/* =========================================================
   CODE BLOCKS · stay dark (developer convention)
   ========================================================= */
html[data-theme="light"] .codeblock,
html[data-theme="light"] pre.codeblock,
html[data-theme="light"] code.block,
html[data-theme="light"] .api-endpoint,
html[data-theme="light"] .api-json,
html[data-theme="light"] .hero-code{
  background: #0a0e27 !important;
  color: #e9ecff !important;
  border-color: rgba(0, 212, 255, .15) !important;
}
/* inline code in body stays light */
html[data-theme="light"] p code,
html[data-theme="light"] li code,
html[data-theme="light"] td code{
  background: #f1f5fa !important;
  color: var(--primary) !important;
  border: 1px solid var(--border) !important;
}

/* =========================================================
   COOKIE CONSENT · back-to-top · minor UI
   ========================================================= */
html[data-theme="light"] .cookie,
html[data-theme="light"] .cookie-inner{
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg);
  color: var(--text) !important;
}
html[data-theme="light"] .cookie-text h4{ color: var(--text) !important; }
html[data-theme="light"] .cookie-text p{ color: var(--text-dim) !important; }
html[data-theme="light"] .cookie-btn{
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .cookie-accept{
  background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
  color: #fff !important;
  border: none !important;
}

html[data-theme="light"] .to-top{
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--primary) !important;
  box-shadow: var(--shadow-md);
}
html[data-theme="light"] .to-top:hover{ box-shadow: var(--shadow-lg); }

/* =========================================================
   GRADIENT TEXT (headlines) · keep vivid
   ========================================================= */
html[data-theme="light"] .grad-text,
html[data-theme="light"] .gradient-text{
  background: var(--grad-1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* =========================================================
   DEMO SUBPAGES · shared --aim-* vars
   ========================================================= */
html[data-theme="light"]{
  --aim-p:      #5b3bd6;
  --aim-s:      #c82a9f;
  --aim-gold:   #b26300;
  --aim-green:  #0a8f5a;
  --aim-red:    #c02525;
  --aim-blue:   #0066cc;
  --aim-teal:   #007a8a;
  --aim-purple: #7b3bd6;
  --aim-bg:     #f5f8fc;
  --aim-bg2:    #eef2fa;
  --aim-card:   #ffffff;
  --aim-card2:  #f8fafd;
  --aim-txt:    #0a0e27;
  --aim-muted:  #3a4863;
  --aim-dim:    #64748b;
  --aim-border:  rgba(15, 23, 42, 0.08);
  --aim-border2: rgba(15, 23, 42, 0.14);
  --aim-shadow:    0 4px 12px rgba(15, 23, 42, .06);
  --aim-shadow-lg: 0 20px 40px rgba(15, 23, 42, .08);
}

html[data-theme="light"] .demo-banner{
  background: linear-gradient(90deg, #f59e0b, #ea580c) !important;
  color: #fff !important;
}
html[data-theme="light"] .demo-nav{
  background: rgba(255, 255, 255, .9) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm);
}

/* Contact widget buttons (right-side) keep vivid */
html[data-theme="light"] .uni-contact-btn{
  box-shadow: 0 4px 14px rgba(15, 23, 42, .15);
}

/* =========================================================
   THEME TOGGLE BUTTON · B2B professional
   ========================================================= */
.theme-toggle-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.theme-toggle-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .5rem .85rem;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  transition: all 280ms ease;
  min-height: 38px;
}
.theme-toggle-btn:hover{
  border-color: var(--border-2);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
html[data-theme="light"] .theme-toggle-btn{
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
html[data-theme="light"] .theme-toggle-btn:hover{
  background: #f8fafd;
  border-color: var(--primary);
}
.theme-toggle-btn:focus-visible{
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.theme-toggle-btn .tt-icon{
  width: 18px; height: 18px; flex-shrink: 0;
  transition: transform 280ms ease;
}
.theme-toggle-btn:hover .tt-icon{ transform: rotate(-15deg) scale(1.08); }
.theme-toggle-btn .tt-label{ font-size: .82rem; letter-spacing: .2px; }
.theme-toggle-btn .tt-chev{
  width: 12px; height: 12px;
  opacity: .6;
  transition: transform 150ms ease;
}
.theme-toggle-btn[aria-expanded="true"] .tt-chev{ transform: rotate(180deg); }
@media (max-width: 640px){
  .theme-toggle-btn .tt-label{ display: none; }
}

/* Dropdown */
.theme-menu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: .45rem;
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 150ms ease;
}
html[data-theme="light"] .theme-menu{
  background: #ffffff;
  border-color: var(--border);
}
.theme-menu.open{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.theme-menu-item{
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  padding: .65rem .85rem;
  border-radius: 8px;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 150ms ease;
}
.theme-menu-item:hover{ background: var(--surface-2); }
html[data-theme="light"] .theme-menu-item:hover{ background: #f1f5fa; }
.theme-menu-item .mi-icon{ width: 18px; height: 18px; flex-shrink: 0; color: var(--text-dim); }
.theme-menu-item .mi-label{ flex: 1; }
.theme-menu-item .mi-check{
  width: 16px; height: 16px;
  color: var(--primary);
  opacity: 0;
  transition: opacity 150ms ease;
}
.theme-menu-item[aria-selected="true"] .mi-check{ opacity: 1; }
.theme-menu-item[aria-selected="true"]{
  background: linear-gradient(90deg, rgba(0, 212, 255, .08), transparent);
}
html[data-theme="light"] .theme-menu-item[aria-selected="true"]{
  background: linear-gradient(90deg, rgba(0, 130, 180, .08), transparent);
}
.theme-menu-sep{
  height: 1px;
  background: var(--border);
  margin: .35rem .5rem;
}
.theme-menu-hint{
  padding: .55rem .85rem .45rem;
  font-size: .72rem;
  color: var(--text-muted);
  letter-spacing: .3px;
}

@keyframes theme-icon-bounce{
  0%{ transform: scale(.6) rotate(-90deg); opacity: 0; }
  60%{ transform: scale(1.1) rotate(5deg); opacity: 1; }
  100%{ transform: scale(1) rotate(0); opacity: 1; }
}
.theme-toggle-btn .tt-icon.animate{
  animation: theme-icon-bounce 400ms ease-out;
}

/* =========================================================
   SAFETY NET · prevent double-header on pages that already
   have a native <header class="navbar"> (home page uses this).
   If a .uni-header ever slips through the JS guard, hide it.
   ========================================================= */
body:has(> header.navbar) > .uni-header,
body:has(> header.navbar#navbar) > .uni-header{
  display: none !important;
}

/* =========================================================
   /book/ page · light mode refinements
   Fix grey "เลือกประเภทการนัด" card + meeting type cards
   ========================================================= */
html[data-theme="light"] .book-card{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow:
    0 24px 60px rgba(15,23,42,.10),
    0 4px 12px rgba(99,102,241,.06),
    inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: none;
}
html[data-theme="light"] .book-card-title{
  color: #0f172a !important;
  font-weight: 900;
}
html[data-theme="light"] .book-card-sub{
  color: #475569 !important;
}
html[data-theme="light"] .book-type{
  background: #ffffff !important;
  border: 2px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 6px 18px rgba(15,23,42,.06);
}
html[data-theme="light"] .book-type:hover{
  box-shadow: 0 14px 34px rgba(99,102,241,.18);
  border-color: var(--bt-color, #6366f1) !important;
}
html[data-theme="light"] .book-type.selected{
  background: #fafbff !important;
  border-color: var(--bt-color, #6366f1) !important;
  box-shadow: 0 0 0 4px rgba(99,102,241,.10), 0 14px 32px rgba(99,102,241,.15);
}
html[data-theme="light"] .book-type-title{
  color: #0f172a !important;
  font-weight: 800;
}
html[data-theme="light"] .book-type-desc{
  color: #475569 !important;
}
html[data-theme="light"] .book-type-features{
  color: #334155 !important;
  border-top-color: rgba(15,23,42,.08) !important;
}
/* Duration badges — stronger contrast in light mode */
html[data-theme="light"] .bt-quick .book-type-duration{
  background: rgba(16,185,129,.10);
  color: #047857;
  border-color: rgba(16,185,129,.28);
}
html[data-theme="light"] .bt-demo .book-type-duration{
  background: rgba(59,130,246,.10);
  color: #1d4ed8;
  border-color: rgba(59,130,246,.28);
}
html[data-theme="light"] .bt-deep .book-type-duration{
  background: rgba(168,85,247,.10);
  color: #6d28d9;
  border-color: rgba(168,85,247,.28);
}
/* Calendar + slot containers */
html[data-theme="light"] .book-cal,
html[data-theme="light"] .book-slots{
  background: #fafbff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="light"] .book-cal-title,
html[data-theme="light"] .book-slots-header{
  color: #0f172a !important;
}
html[data-theme="light"] .book-cal-day{
  color: #0f172a;
}
html[data-theme="light"] .book-cal-day.other-month{color: #94a3b8}
html[data-theme="light"] .book-cal-day.disabled{color: #cbd5e1}
html[data-theme="light"] .book-cal-day.available{
  background: rgba(16,185,129,.08);
  border-color: rgba(16,185,129,.25);
}
html[data-theme="light"] .book-cal-day.available:hover:not(.disabled){
  background: rgba(16,185,129,.20);
  border-color: #10b981;
}
html[data-theme="light"] .book-cal-btn{
  background: #fff;
  border-color: rgba(15,23,42,.10);
  color: #0f172a;
}
html[data-theme="light"] .book-tz{
  color: #475569 !important;
}
/* Buttons */
html[data-theme="light"] .book-btn-primary{
  background: linear-gradient(135deg,#00d4ff,#7b5cff 50%,#ff4ecd);
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(99,102,241,.35);
  border: none;
}
html[data-theme="light"] .book-btn-primary:hover:not(:disabled){
  box-shadow: 0 14px 36px rgba(99,102,241,.45);
  transform: translateY(-2px);
}
html[data-theme="light"] .book-btn-primary:disabled{
  background: #e2e8f0;
  color: #94a3b8 !important;
  box-shadow: none;
  cursor: not-allowed;
}
html[data-theme="light"] .book-btn-ghost{
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid rgba(15,23,42,.12) !important;
  box-shadow: 0 4px 12px rgba(15,23,42,.06);
}
html[data-theme="light"] .book-btn-ghost:hover{
  background: #f8fafc !important;
  border-color: rgba(99,102,241,.35) !important;
}
/* Book hero — softer light-mode background */
html[data-theme="light"] .book-hero{
  background: linear-gradient(180deg, #eef2ff 0%, #f4f6fb 100%) !important;
}
html[data-theme="light"] .book-hero::before{
  opacity: 0.35;
}
html[data-theme="light"] .book-hero-title{
  color: #0f172a !important;
}
html[data-theme="light"] .book-hero-sub{
  color: #475569 !important;
}
html[data-theme="light"] .book-hero-sub strong{
  color: #0f172a !important;
}
html[data-theme="light"] .book-hero-badge{
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(15,23,42,.10) !important;
  box-shadow: 0 6px 18px rgba(15,23,42,.08);
}
/* Progress steps */
html[data-theme="light"] .book-step-dot{
  background: #ffffff !important;
  border: 2px solid rgba(15,23,42,.12) !important;
  color: #64748b !important;
  box-shadow: 0 4px 12px rgba(15,23,42,.06);
}
html[data-theme="light"] .book-step.active .book-step-dot{
  background: linear-gradient(135deg, #10b981, #00d4ff) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(16,185,129,.35);
}
html[data-theme="light"] .book-step-label{
  color: #475569 !important;
}
html[data-theme="light"] .book-step.active .book-step-label{
  color: #0f172a !important;
  font-weight: 700;
}
html[data-theme="light"] .book-steps-progress{
  background: rgba(15,23,42,.10) !important;
}

/* =========================================================
   /products/{sub}/ pages · light mode (automation, chatbot,
   analytics, commerce, saas-erp, web-studio, ai-chatbot)
   Fixes dark navy .prd-stat / .prd-feature / .prd-usecase
   cards that don't adapt to light theme.
   ========================================================= */

/* Hero section */
html[data-theme="light"] .prd-hero{
  background: linear-gradient(180deg, #eef2ff 0%, #f4f6fb 100%);
}
html[data-theme="light"] .prd-hero::before,
html[data-theme="light"] .prd-hero::after{ opacity: .45; }

html[data-theme="light"] .prd-title{ color: #0f172a; }
html[data-theme="light"] .prd-title span{
  /* keep gradient effect */
  background-image: linear-gradient(135deg, var(--prd-color, #6366f1), var(--primary, #7b5cff), var(--secondary, #ff4ecd));
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
html[data-theme="light"] .prd-tagline{ color: #475569; }
html[data-theme="light"] .prd-tagline strong{ color: #0f172a; }

html[data-theme="light"] .prd-breadcrumb a{ color: #475569; }
html[data-theme="light"] .prd-breadcrumb a:hover{ color: var(--primary); }

html[data-theme="light"] .prd-badge{
  background: rgba(99,102,241,.08);
  border-color: rgba(99,102,241,.30);
  color: #4338ca;
  box-shadow: 0 4px 12px rgba(99,102,241,.10);
}

html[data-theme="light"] .prd-cta-primary{
  background: linear-gradient(135deg, #00d4ff, #7b5cff 50%, #ff4ecd);
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(99,102,241,.32);
}
html[data-theme="light"] .prd-cta-primary:hover{
  box-shadow: 0 14px 32px rgba(99,102,241,.42);
  transform: translateY(-2px);
}
html[data-theme="light"] .prd-cta-ghost{
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid rgba(15,23,42,.12) !important;
  box-shadow: 0 4px 12px rgba(15,23,42,.06);
}
html[data-theme="light"] .prd-cta-ghost:hover{
  background: #f8fafc !important;
  border-color: rgba(99,102,241,.35) !important;
}

html[data-theme="light"] .prd-trust-mini{ color: #475569; }
html[data-theme="light"] .prd-trust-mini span{ color: #334155; }
html[data-theme="light"] .prd-trust-mini strong{ color: #0f172a; }

/* Stats row (500+ · 80% · 0 · ∞) */
html[data-theme="light"] .prd-stat{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow:
    0 10px 28px rgba(15,23,42,.08),
    0 2px 6px rgba(99,102,241,.06),
    inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: none;
}
html[data-theme="light"] .prd-stat:hover{
  box-shadow:
    0 16px 40px rgba(99,102,241,.18),
    0 4px 12px rgba(15,23,42,.06);
  border-color: var(--prd-color, #6366f1) !important;
  transform: translateY(-4px);
}
html[data-theme="light"] .prd-stat-num{
  background-image: var(--prd-grad, linear-gradient(135deg, #00d4ff, #7b5cff 50%, #ff4ecd));
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
html[data-theme="light"] .prd-stat-label{ color: #0f172a; font-weight: 700; }
html[data-theme="light"] .prd-stat-sub{ color: #64748b; }

/* Section meta */
html[data-theme="light"] .prd-sec-eyebrow{
  background: rgba(99,102,241,.08);
  border-color: rgba(99,102,241,.28);
  color: #4338ca;
}
html[data-theme="light"] .prd-sec-title{ color: #0f172a; }
html[data-theme="light"] .prd-sec-title span{
  background-image: var(--prd-grad, linear-gradient(135deg, #00d4ff, #7b5cff 50%, #ff4ecd));
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
html[data-theme="light"] .prd-sec-desc{ color: #475569; }

/* 9 feature cards (Drag-Drop Builder, Integrations, AI Agents, etc) */
html[data-theme="light"] .prd-feature{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow:
    0 8px 24px rgba(15,23,42,.06),
    0 1px 3px rgba(15,23,42,.04);
  backdrop-filter: none;
}
html[data-theme="light"] .prd-feature:hover{
  border-color: var(--prd-color, #6366f1) !important;
  box-shadow:
    0 20px 48px rgba(99,102,241,.15),
    0 4px 12px rgba(15,23,42,.06);
  transform: translateY(-6px);
}
html[data-theme="light"] .prd-feature-icon{
  background: linear-gradient(135deg, rgba(99,102,241,.10), rgba(236,72,153,.06));
  border-color: rgba(99,102,241,.25);
  box-shadow: 0 6px 16px rgba(99,102,241,.15);
}
html[data-theme="light"] .prd-feature h3{ color: #0f172a; font-weight: 800; }
html[data-theme="light"] .prd-feature p{ color: #475569; }

/* Use-case cards (Lead Processing · Invoice · Social · Data Pipeline) */
html[data-theme="light"] .prd-usecase{
  background: linear-gradient(135deg, #ffffff, #fafbff) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow:
    0 10px 30px rgba(15,23,42,.08),
    0 2px 6px rgba(99,102,241,.06);
}
html[data-theme="light"] .prd-usecase::before{
  opacity: .10;
}
html[data-theme="light"] .prd-usecase h4{ color: #0f172a; font-weight: 800; }
html[data-theme="light"] .prd-usecase h4::before{
  box-shadow: 0 6px 14px rgba(99,102,241,.35);
}
html[data-theme="light"] .prd-usecase p{ color: #475569; }
html[data-theme="light"] .prd-usecase-result{
  background: rgba(16,185,129,.10);
  border-color: rgba(16,185,129,.30);
  color: #047857;
  font-weight: 700;
}

/* Use Cases section background strip */
html[data-theme="light"] .prd-sec[style*="linear-gradient"]{
  background: linear-gradient(180deg, transparent, #eef2ff 40%, transparent) !important;
}

/* Integration logo chips (Slack · LINE · Gmail · etc) */
html[data-theme="light"] .prd-integrations{ }
html[data-theme="light"] .prd-int-logo{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  color: #0f172a !important;
  box-shadow: 0 4px 12px rgba(15,23,42,.05);
}
html[data-theme="light"] .prd-int-logo:hover{
  border-color: var(--prd-color, #6366f1) !important;
  box-shadow: 0 10px 24px rgba(99,102,241,.15);
  transform: translateY(-2px);
}

/* Product mock visual in hero (dashboard SVG) — soften shadows only */
html[data-theme="light"] .prd-mock{
  box-shadow:
    0 30px 70px rgba(15,23,42,.15),
    0 10px 24px rgba(99,102,241,.10),
    inset 0 1px 0 rgba(255,255,255,.5);
}
html[data-theme="light"] .prd-mock-glow{ opacity: .45; }

/* Reading-progress bar */
html[data-theme="light"] .read-progress{
  background: rgba(15,23,42,.10);
}

/* Mobile stats becomes 2-col grid · keep shadow premium */
@media (max-width: 640px){
  html[data-theme="light"] .prd-stat{
    padding: 22px 16px;
  }
}

/* =========================================================
   /blog/ page · light mode · optimized for long-form reading
   Goal: high contrast, calm visuals, comfortable typography
   ========================================================= */

/* ====== AIM DEV SKY/CYAN · soft blue tone ====== */
/* Brand anchors:
   • #00d4ff (cyan · signature)
   • #0ea5e9 (sky)
   • #3b82f6 (blue)
   • #7b5cff (violet · accent only, small doses)
   Pastels: #e0f7ff · #e0f2fe · #f0f9ff · #ecfeff
*/

/* Hero */
html[data-theme="light"] .blog-hero{
  background:
    radial-gradient(ellipse at 20% -10%, rgba(0,212,255,.14), transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(59,130,246,.10), transparent 60%),
    linear-gradient(180deg, #e6f5ff 0%, #f0f9ff 50%, #f6fbff 100%);
}
html[data-theme="light"] .blog-hero::before{ opacity: .35; }
html[data-theme="light"] .blog-hero-eyebrow{
  background: rgba(0,212,255,.10);
  color: #0369a1;
  border-color: rgba(0,212,255,.40);
  box-shadow: 0 4px 14px rgba(0,212,255,.15);
}
html[data-theme="light"] .blog-hero-title{ color: #0c2547; }
html[data-theme="light"] .blog-hero-title span{
  background-image: linear-gradient(135deg, #00d4ff 0%, #0ea5e9 50%, #3b82f6 100%);
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
html[data-theme="light"] .blog-hero-sub{ color: #3f5878; }
html[data-theme="light"] .blog-hero-sub strong{ color: #0c2547; font-weight: 700; }

/* Search bar */
html[data-theme="light"] .blog-search input{
  background: #ffffff !important;
  border: 1px solid rgba(14,165,233,.18) !important;
  color: #0c2547;
  box-shadow: 0 6px 18px rgba(14,165,233,.08);
}
html[data-theme="light"] .blog-search input::placeholder{ color: #94a3b8; }
html[data-theme="light"] .blog-search input:focus{
  border-color: #00d4ff !important;
  box-shadow: 0 0 0 4px rgba(0,212,255,.16), 0 8px 22px rgba(0,212,255,.18);
}
html[data-theme="light"] .blog-search svg{ color: #0ea5e9; }

/* Category filter buttons */
html[data-theme="light"] .blog-cat{
  background: #ffffff !important;
  color: #1e3a5f !important;
  border: 1px solid rgba(14,165,233,.18) !important;
  box-shadow: 0 2px 8px rgba(14,165,233,.06);
  font-weight: 600;
}
html[data-theme="light"] .blog-cat:hover{
  border-color: rgba(0,212,255,.55) !important;
  color: #0369a1 !important;
  background: #f0f9ff !important;
}
html[data-theme="light"] .blog-cat.active{
  background: linear-gradient(135deg, #00d4ff 0%, #0ea5e9 50%, #3b82f6 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 24px rgba(0,212,255,.35);
}

/* Featured article card */
html[data-theme="light"] .blog-feat-card{
  background: #ffffff !important;
  border: 1px solid rgba(14,165,233,.14) !important;
  box-shadow:
    0 20px 50px rgba(12,37,71,.08),
    0 4px 14px rgba(0,212,255,.10);
  backdrop-filter: none;
  overflow: hidden;
}
html[data-theme="light"] .blog-feat-card:hover{
  box-shadow:
    0 28px 64px rgba(0,212,255,.20),
    0 8px 20px rgba(14,165,233,.12);
  border-color: rgba(0,212,255,.45) !important;
}
html[data-theme="light"] .blog-feat-visual{
  background:
    radial-gradient(ellipse at 30% 30%, rgba(0,212,255,.28), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(59,130,246,.22), transparent 60%),
    linear-gradient(135deg, #e0f7ff 0%, #dbeafe 100%) !important;
}
html[data-theme="light"] .blog-feat-visual::before{
  opacity: .55;
  filter: blur(24px);
}
html[data-theme="light"] .blog-feat-visual-icon{
  filter: drop-shadow(0 14px 28px rgba(0,212,255,.35));
}
html[data-theme="light"] .blog-feat-badge{
  background: rgba(251,191,36,.14);
  color: #b45309;
  border-color: rgba(251,191,36,.40);
}
html[data-theme="light"] .blog-feat-title{
  color: #0c2547 !important;
  font-weight: 800;
  letter-spacing: -.02em;
}
html[data-theme="light"] .blog-feat-excerpt{
  color: #3f5878 !important;
  font-size: 15.5px;
  line-height: 1.75;
}
html[data-theme="light"] .blog-feat-excerpt strong{ color: #0c2547; font-weight: 700; }
html[data-theme="light"] .blog-feat-meta{ color: #64748b; }
html[data-theme="light"] .blog-feat-meta strong{ color: #0c2547; }

/* Grid head */
html[data-theme="light"] .blog-grid-head h2{ color: #0c2547; }
html[data-theme="light"] .blog-grid-head .count{
  color: #0369a1;
  background: #ffffff;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid rgba(14,165,233,.20);
  box-shadow: 0 2px 8px rgba(14,165,233,.08);
  font-weight: 700;
}

/* =========================================================
   Blog Card · sky-blue tone · reading-optimized
   Signature: cyan hover glow · tinted pastel thumbnails
   ========================================================= */
html[data-theme="light"] .blog-card{
  background: #ffffff !important;
  border: 1px solid rgba(14,165,233,.14) !important;
  box-shadow:
    0 8px 22px rgba(12,37,71,.06),
    0 1px 3px rgba(14,165,233,.05);
  backdrop-filter: none;
}
html[data-theme="light"] .blog-card:hover{
  transform: translateY(-4px);
  border-color: rgba(0,212,255,.55) !important;
  box-shadow:
    0 20px 44px rgba(0,212,255,.18),
    0 4px 12px rgba(14,165,233,.10);
}

/* Refined thumbnail — sky-blue pastel, calm */
html[data-theme="light"] .blog-card-visual{
  background: linear-gradient(135deg, #e0f7ff 0%, #dbeafe 100%) !important;
}
html[data-theme="light"] .blog-card-visual::before{
  opacity: .45;
  filter: blur(16px);
}
html[data-theme="light"] .blog-card-icon{
  filter: drop-shadow(0 10px 20px rgba(0,212,255,.28));
}

/* Per-variant thumbnails — all in sky/cyan/blue family (AIM brand tone) */
html[data-theme="light"] .bc-1 .blog-card-visual{
  background:
    radial-gradient(ellipse at 25% 25%, rgba(0,212,255,.28), transparent 55%),
    radial-gradient(ellipse at 75% 75%, rgba(59,130,246,.22), transparent 55%),
    linear-gradient(135deg, #e0f7ff 0%, #dbeafe 100%) !important;
}
html[data-theme="light"] .bc-2 .blog-card-visual{
  background:
    radial-gradient(ellipse at 25% 25%, rgba(14,165,233,.30), transparent 55%),
    radial-gradient(ellipse at 75% 75%, rgba(6,182,212,.24), transparent 55%),
    linear-gradient(135deg, #ecfeff 0%, #dbeafe 100%) !important;
}
html[data-theme="light"] .bc-3 .blog-card-visual{
  background:
    radial-gradient(ellipse at 25% 25%, rgba(59,130,246,.26), transparent 55%),
    radial-gradient(ellipse at 75% 75%, rgba(0,212,255,.22), transparent 55%),
    linear-gradient(135deg, #dbeafe 0%, #e0f7ff 100%) !important;
}
html[data-theme="light"] .bc-4 .blog-card-visual{
  background:
    radial-gradient(ellipse at 25% 25%, rgba(6,182,212,.26), transparent 55%),
    radial-gradient(ellipse at 75% 75%, rgba(37,99,235,.22), transparent 55%),
    linear-gradient(135deg, #cffafe 0%, #dbeafe 100%) !important;
}
html[data-theme="light"] .bc-5 .blog-card-visual{
  background:
    radial-gradient(ellipse at 25% 25%, rgba(0,212,255,.28), transparent 55%),
    radial-gradient(ellipse at 75% 75%, rgba(14,165,233,.22), transparent 55%),
    linear-gradient(135deg, #e0f7ff 0%, #f0f9ff 100%) !important;
}
html[data-theme="light"] .bc-6 .blog-card-visual{
  background:
    radial-gradient(ellipse at 25% 25%, rgba(59,130,246,.26), transparent 55%),
    radial-gradient(ellipse at 75% 75%, rgba(6,182,212,.22), transparent 55%),
    linear-gradient(135deg, #dbeafe 0%, #cffafe 100%) !important;
}

/* Title — dark navy, strong, comfortable */
html[data-theme="light"] .blog-card-title{
  color: #0c2547 !important;
  font-weight: 800;
  font-size: 17.5px;
  line-height: 1.4;
  letter-spacing: -.01em;
}
html[data-theme="light"] .blog-card:hover .blog-card-title{ color: #0369a1 !important; }

/* Excerpt — reading-optimized · slate blue */
html[data-theme="light"] .blog-card-excerpt{
  color: #3f5878 !important;
  font-size: 14.5px;
  line-height: 1.7;
}

/* Meta row */
html[data-theme="light"] .blog-card-meta{
  color: #64748b;
  border-top-color: rgba(14,165,233,.14) !important;
}
html[data-theme="light"] .blog-card-meta strong{ color: #0369a1; }

/* Category pills — semantic color coding, muted for light-mode */
html[data-theme="light"] .blog-card-cat.cat-ai,
html[data-theme="light"] .article-cat-pill.cat-ai{
  background: rgba(123,92,255,.10);
  color: #5b21b6;
  border-color: rgba(123,92,255,.32);
}
html[data-theme="light"] .blog-card-cat.cat-seo,
html[data-theme="light"] .article-cat-pill.cat-seo{
  background: rgba(0,212,255,.10);
  color: #0369a1;
  border-color: rgba(0,212,255,.35);
}
html[data-theme="light"] .blog-card-cat.cat-biz,
html[data-theme="light"] .article-cat-pill.cat-biz{
  background: rgba(59,130,246,.10);
  color: #1e40af;
  border-color: rgba(59,130,246,.32);
}
html[data-theme="light"] .blog-card-cat.cat-prod,
html[data-theme="light"] .article-cat-pill.cat-prod{
  background: rgba(6,182,212,.10);
  color: #0e7490;
  border-color: rgba(6,182,212,.32);
}

/* Newsletter card — sky/cyan pastel · AIM signature */
html[data-theme="light"] .newsletter-card{
  background:
    radial-gradient(ellipse at 20% 0%, rgba(0,212,255,.14), transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(59,130,246,.12), transparent 60%),
    linear-gradient(135deg, #e6f5ff 0%, #f0f9ff 50%, #ecfeff 100%) !important;
  border: 1px solid rgba(0,212,255,.25) !important;
  box-shadow:
    0 24px 56px rgba(0,212,255,.14),
    0 4px 12px rgba(14,165,233,.10);
  backdrop-filter: none;
}
html[data-theme="light"] .newsletter-card::before{
  background:
    radial-gradient(circle at 80% 20%, rgba(0,212,255,.18), transparent 60%),
    radial-gradient(circle at 20% 80%, rgba(59,130,246,.12), transparent 60%) !important;
}
html[data-theme="light"] .newsletter-title{ color: #0c2547; }
html[data-theme="light"] .newsletter-title span{
  background-image: linear-gradient(135deg, #00d4ff 0%, #0ea5e9 50%, #3b82f6 100%);
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
html[data-theme="light"] .newsletter-sub{ color: #3f5878; }
html[data-theme="light"] .newsletter-form input{
  background: #ffffff !important;
  border: 1px solid rgba(14,165,233,.22) !important;
  color: #0c2547;
  box-shadow: 0 4px 14px rgba(14,165,233,.08);
}
html[data-theme="light"] .newsletter-form input::placeholder{ color: #94a3b8; }
html[data-theme="light"] .newsletter-form input:focus{
  border-color: #00d4ff !important;
  box-shadow: 0 0 0 4px rgba(0,212,255,.16), 0 6px 18px rgba(0,212,255,.15);
}

/* Reading progress bar at top · cyan gradient in light mode */
html[data-theme="light"] .read-progress{
  background: rgba(14,165,233,.12);
}
html[data-theme="light"] .read-progress::before,
html[data-theme="light"] #readProgress::before{
  background: linear-gradient(90deg, #00d4ff, #0ea5e9, #3b82f6) !important;
}

/* Improve max-width for comfortable reading line length */
@media (min-width: 900px){
  html[data-theme="light"] .blog-card-title{ letter-spacing: -.015em; }
}

/* =========================================================
   Individual Blog Article pages · light mode sky/cyan tone
   (ai-chatbot-thailand-2026, seo-vs-aeo, rank-1-google)
   ========================================================= */

/* Article Hero */
html[data-theme="light"] .article-hero{
  background:
    radial-gradient(ellipse at 20% -10%, rgba(0,212,255,.14), transparent 60%),
    radial-gradient(ellipse at 80% 40%, rgba(59,130,246,.10), transparent 60%),
    linear-gradient(180deg, #e6f5ff 0%, #f0f9ff 60%, #f6fbff 100%);
}
html[data-theme="light"] .article-breadcrumb{ color: #64748b; }
html[data-theme="light"] .article-breadcrumb a{ color: #0369a1; font-weight: 600; }
html[data-theme="light"] .article-breadcrumb a:hover{ color: #00d4ff; }
html[data-theme="light"] .article-breadcrumb span{ color: #94a3b8; }

html[data-theme="light"] .article-cat-pill{
  background: rgba(0,212,255,.10);
  color: #0369a1;
  border-color: rgba(0,212,255,.35);
  box-shadow: 0 4px 12px rgba(0,212,255,.12);
  font-weight: 700;
}

html[data-theme="light"] .article-title{
  color: #0c2547;
  font-weight: 800;
  letter-spacing: -.02em;
}
html[data-theme="light"] .article-title span{
  background-image: linear-gradient(135deg, #00d4ff 0%, #0ea5e9 50%, #3b82f6 100%);
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
html[data-theme="light"] .article-deck{
  color: #3f5878;
  font-size: 18px;
  line-height: 1.7;
}
html[data-theme="light"] .article-deck strong{ color: #0c2547; }

/* Meta row (author + date + read-time + views) */
html[data-theme="light"] .article-meta-row{
  border-top: 1px solid rgba(14,165,233,.14);
  padding-top: 24px;
}
html[data-theme="light"] .article-author-info strong{ color: #0c2547; }
html[data-theme="light"] .article-author-info span{ color: #64748b; }
html[data-theme="light"] .article-avatar{
  background: linear-gradient(135deg, #00d4ff, #0ea5e9, #3b82f6);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(0,212,255,.30);
}
html[data-theme="light"] .article-meta-item{
  color: #64748b;
  font-weight: 600;
}

/* Table of Contents sidebar */
html[data-theme="light"] .article-toc{
  background: #ffffff;
  border: 1px solid rgba(14,165,233,.14);
  box-shadow: 0 8px 22px rgba(12,37,71,.06), 0 1px 3px rgba(14,165,233,.05);
  border-radius: 14px;
}
html[data-theme="light"] .article-toc-title{
  color: #0c2547;
  border-bottom-color: rgba(14,165,233,.14);
}
html[data-theme="light"] .article-toc a{
  color: #475569;
  border-left-color: transparent;
}
html[data-theme="light"] .article-toc a:hover{
  color: #0c2547;
  background: rgba(0,212,255,.06);
  border-left-color: #00d4ff;
}
html[data-theme="light"] .article-toc a.active{
  color: #0369a1;
  background: rgba(0,212,255,.10);
  border-left-color: #00d4ff;
  font-weight: 700;
}

/* Share buttons sidebar */
html[data-theme="light"] .article-share-label{ color: #64748b; font-weight: 700; }
html[data-theme="light"] .share-btn{
  background: #ffffff;
  border: 1px solid rgba(14,165,233,.20);
  color: #0369a1;
  box-shadow: 0 2px 6px rgba(14,165,233,.08);
}
html[data-theme="light"] .share-btn:hover{
  box-shadow: 0 8px 18px rgba(0,212,255,.22);
}
html[data-theme="light"] .share-btn.copy:hover{
  background: linear-gradient(135deg, #00d4ff, #0ea5e9, #3b82f6);
  color: #ffffff;
}

/* ============== ARTICLE BODY TYPOGRAPHY ============== */
html[data-theme="light"] .article-body{
  color: #3f5878;
  font-size: 16.5px;
  line-height: 1.85;
}
html[data-theme="light"] .article-body h2{
  color: #0c2547;
  font-weight: 800;
  letter-spacing: -.02em;
}
html[data-theme="light"] .article-body h2::before{
  background: linear-gradient(180deg, #00d4ff, #3b82f6);
  border-radius: 4px;
}
html[data-theme="light"] .article-body h3{
  color: #0c2547;
  font-weight: 700;
}
html[data-theme="light"] .article-body h4{
  color: #0c2547;
  font-weight: 700;
}
html[data-theme="light"] .article-body p strong{
  color: #0c2547;
  font-weight: 700;
}
html[data-theme="light"] .article-body a{
  color: #0369a1;
  text-decoration-color: rgba(0,212,255,.40);
  text-underline-offset: 3px;
}
html[data-theme="light"] .article-body a:hover{
  color: #00d4ff;
  text-decoration-color: #00d4ff;
}
html[data-theme="light"] .article-body ul li::marker,
html[data-theme="light"] .article-body ol li::marker{
  color: #00d4ff;
  font-weight: 700;
}
html[data-theme="light"] .article-body li{ color: #3f5878; }

/* Pull quote */
html[data-theme="light"] .pull-quote{
  background: linear-gradient(135deg, rgba(0,212,255,.08), rgba(59,130,246,.04));
  border-left-color: #00d4ff;
  color: #0c2547;
  box-shadow: 0 8px 22px rgba(0,212,255,.10);
}
html[data-theme="light"] .pull-quote::before{
  color: #00d4ff;
  opacity: .25;
}
html[data-theme="light"] .pull-quote-cite{ color: #64748b; }

/* Callout boxes (info, warn, tip, danger) */
html[data-theme="light"] .callout{
  backdrop-filter: none;
}
html[data-theme="light"] .callout-body{ color: #334155; }
html[data-theme="light"] .callout-body strong{ color: #0c2547; }
html[data-theme="light"] .callout.info{
  background: linear-gradient(135deg, rgba(0,212,255,.10), rgba(14,165,233,.06));
  border-color: rgba(0,212,255,.30);
  box-shadow: 0 6px 16px rgba(0,212,255,.10);
}
html[data-theme="light"] .callout.warn{
  background: rgba(245,158,11,.08);
  border-color: rgba(245,158,11,.32);
  box-shadow: 0 6px 16px rgba(245,158,11,.10);
}
html[data-theme="light"] .callout.tip{
  background: rgba(16,185,129,.08);
  border-color: rgba(16,185,129,.30);
  box-shadow: 0 6px 16px rgba(16,185,129,.10);
}
html[data-theme="light"] .callout.danger{
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.30);
  box-shadow: 0 6px 16px rgba(239,68,68,.10);
}

/* Stat callout */
html[data-theme="light"] .stat-callout{
  background: linear-gradient(135deg, #e6f5ff 0%, #dbeafe 100%);
  border: 1px solid rgba(0,212,255,.25);
  box-shadow: 0 12px 30px rgba(0,212,255,.14);
}
html[data-theme="light"] .stat-callout-num{
  background-image: linear-gradient(135deg, #00d4ff, #0ea5e9, #3b82f6);
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
html[data-theme="light"] .stat-callout-text{ color: #3f5878; }

/* Tables */
html[data-theme="light"] .article-body table{
  background: #ffffff !important;
  border: 1px solid rgba(14,165,233,.16) !important;
  box-shadow: 0 6px 18px rgba(12,37,71,.06);
  overflow: hidden;
}
html[data-theme="light"] .article-body th{
  background: linear-gradient(180deg, #f0f9ff, #e0f2fe) !important;
  color: #0c2547;
  border-bottom-color: rgba(14,165,233,.20) !important;
  letter-spacing: .5px;
}
html[data-theme="light"] .article-body td{
  color: #3f5878;
  border-bottom-color: rgba(14,165,233,.10) !important;
}
html[data-theme="light"] .article-body tr:hover td{
  background: rgba(0,212,255,.04);
  color: #0c2547;
}

/* Code blocks (stay dark for readability even in light mode) */
html[data-theme="light"] .article-body pre{
  background: #0c1e3a;
  border: 1px solid rgba(14,165,233,.20);
  box-shadow: 0 8px 22px rgba(12,37,71,.12);
  color: #e0f2fe;
}
html[data-theme="light"] .article-body code{
  background: rgba(0,212,255,.10);
  color: #0369a1;
  border: 1px solid rgba(0,212,255,.18);
}
html[data-theme="light"] .article-body pre code{
  background: none;
  color: inherit;
  border: none;
}

/* FAQ items */
html[data-theme="light"] .faq-section{
  border-top-color: rgba(14,165,233,.14);
}
html[data-theme="light"] .faq-item{
  background: #ffffff;
  border: 1px solid rgba(14,165,233,.14);
  box-shadow: 0 4px 12px rgba(12,37,71,.04);
}
html[data-theme="light"] .faq-item[open]{
  border-color: rgba(0,212,255,.45);
  box-shadow: 0 10px 24px rgba(0,212,255,.14);
}
html[data-theme="light"] .faq-item summary{ color: #0c2547; }
html[data-theme="light"] .faq-item summary:hover{ color: #0369a1; }
html[data-theme="light"] .faq-item summary::after{ color: #00d4ff; }
html[data-theme="light"] .faq-item-body{ color: #3f5878; }

/* Article CTA box (in-article — "ปรึกษาฟรี") */
html[data-theme="light"] .article-cta{
  background:
    radial-gradient(ellipse at 20% 0%, rgba(0,212,255,.14), transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(59,130,246,.10), transparent 60%),
    linear-gradient(135deg, #e6f5ff 0%, #f0f9ff 50%, #ecfeff 100%);
  border: 1px solid rgba(0,212,255,.25);
  box-shadow: 0 20px 44px rgba(0,212,255,.14);
}
html[data-theme="light"] .article-cta::before{
  opacity: .12;
}
html[data-theme="light"] .article-cta h3{ color: #0c2547; font-weight: 800; }
html[data-theme="light"] .article-cta p{ color: #3f5878; }

/* Tags */
html[data-theme="light"] .article-tags{
  border-top-color: rgba(14,165,233,.14);
  border-bottom-color: rgba(14,165,233,.14);
}
html[data-theme="light"] .article-tag{
  background: #ffffff;
  color: #475569;
  border: 1px solid rgba(14,165,233,.18);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(14,165,233,.06);
}
html[data-theme="light"] .article-tag:hover{
  color: #0369a1;
  border-color: #00d4ff;
  background: #f0f9ff;
  box-shadow: 0 6px 14px rgba(0,212,255,.18);
}

/* Author card */
html[data-theme="light"] .article-author-card{
  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
  border: 1px solid rgba(14,165,233,.16);
  box-shadow: 0 10px 26px rgba(12,37,71,.06), 0 2px 6px rgba(14,165,233,.06);
  backdrop-filter: none;
}
html[data-theme="light"] .article-author-card h4{ color: #0c2547; }
html[data-theme="light"] .article-author-card p{ color: #3f5878; }

/* Related articles section */
html[data-theme="light"] .related-section{
  border-top-color: rgba(14,165,233,.14);
}
html[data-theme="light"] .related-section h3{ color: #0c2547; font-weight: 800; }

/* Reading progress — inherit from blog/ override above */

/* Mobile polish */
@media (max-width: 700px){
  html[data-theme="light"] .article-body{ font-size: 16px; }
  html[data-theme="light"] .article-body h2{ font-size: 24px; }
}