/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-deep:        #0a0a14;
  --purple:         #7c3aed;
  --purple-light:   #a855f7;
  --blue:           #2563eb;
  --blue-light:     #3b82f6;
  --blue-mid:       #60a5fa;
  --orange:         #f97316;
  --orange-light:   #fb923c;

  /* Glass surface – bright (sections, nav) */
  --glass-bg:           rgba(255,255,255,.045);
  --glass-bg-hover:     rgba(255,255,255,.08);
  --glass-border:       rgba(255,255,255,.08);
  --glass-border-hover: rgba(255,255,255,.22);

  /* Console interior – darker so text pops over aurora */
  --console-bg:         rgba(13,14,24,.96);
  --console-bg-hover:   rgba(16,17,28,.98);
  --console-inner:      rgba(255,255,255,.035);
  --console-inner-b:    rgba(255,255,255,.07);

  --text-primary:    #f0f1f8;
  --text-secondary:  rgba(240,241,248,.65);
  --text-muted:      rgba(240,241,248,.40);
  --text-dim:        rgba(240,241,248,.28);

  --radius-card:  20px;
  --radius-sm:    12px;
  --radius-pill:  100px;

  --shadow-card:       0 8px 32px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.05) inset;
  --shadow-card-hover: 0 24px 60px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.08) inset;

  --font: 'Inter', 'Noto Sans SC', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background-color: var(--bg-deep);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ============================================================
   AURORA BACKGROUND  (C-aurora-glass style)
   ============================================================ */
.aurora-stage {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .30;
  will-change: transform;
}
.blob-1 { width:700px; height:700px; background:radial-gradient(circle,#7c3aed 0%,transparent 70%); top:-200px; left:-150px; animation:drift1 10.8s ease-in-out infinite alternate, breathe 6.0s ease-in-out infinite; }
.blob-2 { width:600px; height:600px; background:radial-gradient(circle,#2563eb 0%,transparent 70%); top:200px; right:-180px; animation:drift2 13.2s ease-in-out infinite alternate, breathe 7.2s ease-in-out infinite; }
.blob-3 { width:500px; height:500px; background:radial-gradient(circle,#3b82f6 0%,transparent 70%); top:55vh; left:20%; animation:drift3 9.6s ease-in-out infinite alternate, breathe 5.4s ease-in-out infinite; opacity:.32; }
.blob-4 { width:550px; height:550px; background:radial-gradient(circle,#f97316 0%,transparent 70%); top:80vh; right:10%; animation:drift4 12.0s ease-in-out infinite alternate, breathe 8.0s ease-in-out infinite; opacity:.28; }
.blob-5 { width:400px; height:400px; background:radial-gradient(circle,#f97316 0%,transparent 70%); top:140vh; left:-100px; animation:drift5 15.0s ease-in-out infinite alternate, breathe 6.6s ease-in-out infinite; opacity:.28; }
.blob-6 { width:450px; height:450px; background:radial-gradient(circle,#7c3aed 0%,transparent 70%); top:160vh; right:-50px; animation:drift1 11.4s ease-in-out infinite alternate-reverse, breathe 7.6s ease-in-out infinite; opacity:.35; }
.blob-7 { width:380px; height:380px; background:radial-gradient(circle,#3b82f6 0%,transparent 70%); top:220vh; left:40%; animation:drift2 12.6s ease-in-out infinite alternate, breathe 5.0s ease-in-out infinite; opacity:.22; }
.blob-8 { width:500px; height:500px; background:radial-gradient(circle,#a855f7 0%,transparent 70%); top:280vh; right:5%; animation:drift3 10.2s ease-in-out infinite alternate-reverse, breathe 6.9s ease-in-out infinite; opacity:.30; }

@keyframes drift1 { from{transform:translate(0,0) scale(1)} to{transform:translate(120px,180px) scale(1.15)} }
@keyframes drift2 { from{transform:translate(0,0) scale(1)} to{transform:translate(-135px,105px) scale(1.1)} }
@keyframes drift3 { from{transform:translate(0,0) scale(1)} to{transform:translate(150px,-120px) scale(1.2)} }
@keyframes drift4 { from{transform:translate(0,0) scale(1)} to{transform:translate(-105px,-150px) scale(1.08)} }
@keyframes drift5 { from{transform:translate(0,0) scale(1)} to{transform:translate(90px,135px) scale(1.12)} }
@keyframes breathe { 0%,100%{filter:blur(100px) brightness(.55)} 50%{filter:blur(100px) brightness(.92)} }
.blob-3 { display: none; }  /* first screen shows 3 aurora blobs: purple / blue / orange */

/* ============================================================
   LAYOUT
   ============================================================ */
.page-wrap {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ============================================================
   NAV
   ============================================================ */
nav {
  position: sticky;
  top: 0;
  z-index: 200;
  padding: 14px 0;
  background: rgba(10,10,20,.5);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.nav-logo-mark {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg,#7c3aed,#3b82f6);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(124,58,237,.45);
}
.nav-logo-words { display: flex; flex-direction: column; justify-content: center; }
.nav-logo-text {
  font-size: 16px; font-weight: 800; letter-spacing: -.3px; line-height: 1.15;
  background: linear-gradient(90deg,#a855f7,#3b82f6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.nav-logo-sub {
  font-size: 11px; font-weight: 400; line-height: 1.2; white-space: nowrap;
  -webkit-text-fill-color: rgba(240,241,248,.55);
  color: rgba(240,241,248,.55);
}
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; transition: color .2s; }
.nav-links a:hover { color: var(--text-primary); }
.nav-links > li > a.active { color: var(--text-primary); background: linear-gradient(90deg, #3b82f6, #a855f7) 0 100% / 100% 2px no-repeat; padding-bottom: 3px; }

/* ── nav dropdown / mega menu ── */
.nav-drop { position: relative; }
.nav-drop-trigger { display: inline-flex; align-items: center; gap: 5px; }
.nav-drop-trigger::after {
  content: ''; width: 6px; height: 6px; margin-top: -2px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); opacity: .55; transition: transform .25s, opacity .2s;
}
.nav-drop:hover .nav-drop-trigger::after,
.nav-drop:focus-within .nav-drop-trigger::after { transform: rotate(225deg); margin-top: 2px; opacity: .9; }
.nav-menu {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 296px; padding: 10px;
  background: rgba(14,14,26,.94); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--glass-border); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 300;
}
.nav-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-drop:hover .nav-menu,
.nav-drop:focus-within .nav-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-menu-item { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: 11px; text-decoration: none; transition: background .15s; }
.nav-menu-item:hover { background: rgba(255,255,255,.05); }
.nav-menu-ic { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #fff; }
.nav-menu-ic svg { width: 16px; height: 16px; }
.ic-purple   { background: linear-gradient(135deg,#a855f7,#7c3aed); }
.ic-blue     { background: linear-gradient(135deg,#60a5fa,#3b82f6); }
.ic-orange   { background: linear-gradient(135deg,#fdba74,#fb923c); }
.ic-ecom     { background: linear-gradient(135deg,#60a5fa,#3b82f6); }
.ic-edu      { background: linear-gradient(135deg,#c084fc,#a855f7); }
.ic-ent      { background: linear-gradient(135deg,#fdba74,#fb923c); }
.ic-overseas { background: linear-gradient(135deg,#5eead4,#22d3ee); }
.nav-menu-tx { display: flex; flex-direction: column; gap: 2px; }
.nav-menu-name { font-size: 14px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.nav-menu-desc { font-size: 12px; color: var(--text-muted); line-height: 1.3; }
.nav-menu-all { display: block; text-align: center; padding: 9px; margin-top: 4px; border-top: 1px solid var(--glass-border); font-size: 13px; font-weight: 600; color: var(--blue-mid); text-decoration: none; transition: color .15s; }
.nav-menu-all:hover { color: #fff; }
.nav-cta {
  padding: 9px 22px;
  background: linear-gradient(135deg,#7c3aed,#2563eb);
  border: none; border-radius: var(--radius-pill);
  color: #fff; font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 0 20px rgba(124,58,237,.4);
  transition: all .2s;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 0 30px rgba(124,58,237,.6); }

/* ============================================================
   GLASS UTILITY
   ============================================================ */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: background .3s, border-color .3s, box-shadow .35s, transform .35s;
}
.glass:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--shadow-card-hover);
}

/* ============================================================
   SCROLL REVEAL  (richer: fade + translateY + scale)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px) scale(.97);
  transition:
    opacity   .75s cubic-bezier(.16,1,.3,1),
    transform .75s cubic-bezier(.16,1,.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0) scale(1); }

/* Direction variants */
.reveal-left  { opacity: 0; transform: translateX(-40px) scale(.97); transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1); }
.reveal-right { opacity: 0; transform: translateX(40px)  scale(.97); transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1); }
.reveal-left.visible,
.reveal-right.visible { opacity: 1; transform: translate(0) scale(1); }

.rd1 { transition-delay: .10s; }
.rd2 { transition-delay: .20s; }
.rd3 { transition-delay: .30s; }
.rd4 { transition-delay: .40s; }

/* ============================================================
   SECTION SHARED
   ============================================================ */
section { padding: 96px 0; }
.section-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--purple-light);
  background: rgba(168,85,247,.12);
  padding: 5px 14px; border-radius: var(--radius-pill);
  border: 1px solid rgba(168,85,247,.25);
  margin-bottom: 14px;
}
.section-title {
  font-size: clamp(28px,4vw,44px);
  font-weight: 800; line-height: 1.2; letter-spacing: -.5px;
  margin-bottom: 14px;
}
.section-sub {
  font-size: 17px; color: var(--text-secondary);
  max-width: 560px; line-height: 1.7;
}
.text-center { text-align: center; }
.text-center .section-sub { margin: 0 auto; }

/* ============================================================
   HERO  (full-viewport, asymmetric 2-col grid)
   ============================================================ */
.hero {
  padding: 0;
  position: relative;
}

.hero-inner {
  width: 100%;
  min-height: calc(100vh - 62px);
  min-height: calc(100dvh - 62px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 0 56px;
  gap: 0;
}

/* 2-column asymmetric grid: text left, visual right */
.hero-main {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
  width: 100%;
}

/* LEFT: text column */
.hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* RIGHT: visual column */
.hero-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 460px;
}

/* ── 3D STACKED CONSOLE STAGE ── */
.console-stack {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 460px;
  perspective: 1600px;
}

.stack-item {
  position: absolute;
  top: 0;
  left: 50%;
  width: 380px;
  margin-left: -190px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition:
    transform  .52s cubic-bezier(.16,1,.3,1),
    opacity    .52s cubic-bezier(.16,1,.3,1),
    z-index    0s;
  cursor: pointer;
  outline: none;
}

/* FRONT item (active) */
.stack-item.is-front {
  transform: translateX(0px) translateY(0px) translateZ(0px) rotateY(0deg) scale(1);
  opacity: 1;
  z-index: 3;
}

/* BACK-LEFT item (index offset -1) */
.stack-item.is-back-left {
  transform: translateX(-92px) translateY(22px) translateZ(-70px) rotateY(20deg) scale(0.9);
  opacity: 0.82;
  z-index: 2;
}

/* BACK-RIGHT item (index offset +1) */
.stack-item.is-back-right {
  transform: translateX(92px) translateY(22px) translateZ(-70px) rotateY(-20deg) scale(0.9);
  opacity: 0.82;
  z-index: 1;
}

/* Suppress the card-level hover lift/tilt when items are inside the stack;
   the stack interaction handles visual changes instead */
.console-stack .console-lili:hover,
.console-stack .console-miao:hover,
.console-stack .console-vivi:hover {
  transform: none;
}

/* Brighten whichever back card the user hovers */
.stack-item.is-back-left:hover,
.stack-item.is-back-right:hover {
  opacity: 0.95;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  background: rgba(124,58,237,.15);
  border: 1px solid rgba(124,58,237,.4);
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: var(--purple-light);
  margin-bottom: 28px;
  width: fit-content;
  animation: badgePulse 3s ease-in-out infinite;
}
.hero-badge::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--purple-light);
  box-shadow: 0 0 8px var(--purple-light);
  animation: dotBlink 2s ease-in-out infinite;
}
@keyframes badgePulse { 0%,100%{box-shadow:0 0 0 0 rgba(124,58,237,0)} 50%{box-shadow:0 0 16px 2px rgba(124,58,237,.25)} }
@keyframes dotBlink { 0%,100%{opacity:1} 50%{opacity:.35} }

.hero h1 {
  font-size: clamp(38px,5.2vw,72px);
  font-weight: 900; line-height: 1.1; letter-spacing: -1.5px;
  margin-bottom: 24px;
  text-align: left;
}

.hero-sub {
  font-size: clamp(15px,1.6vw,18px);
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 480px;
  margin: 0 0 36px;
  text-align: left;
}

.hero-buttons { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-start; margin-bottom: 36px; }

/* subtle inline product metrics (replaces the boxy stat chips) */
.hero-metrics { display:flex; align-items:center; gap:24px; margin-top:38px; flex-wrap:wrap; }
.hm { display:flex; flex-direction:column; line-height:1.12; }
.hm-n { font-size:25px; font-weight:800; letter-spacing:-.02em; }
.hm-l { font-size:12.5px; color:var(--text-muted); margin-top:4px; font-weight:500; white-space:nowrap; }
.hm-sep { width:1px; height:30px; background:rgba(255,255,255,.13); flex:0 0 auto; }

/* TRUST BAR full-width row below the grid */
.hero-trust-row {
  width: 100%;
  margin-top: 52px;
  padding-top: 28px;
}

.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 34px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg,#3b82f6 0%,#7c3aed 100%);
  border: none; color: #fff;
  font-size: 15px; font-weight: 700;
  cursor: pointer; text-decoration: none;
  position: relative; overflow: hidden;
  transition: box-shadow .3s, opacity .3s;
  box-shadow: 0 0 28px rgba(124,58,237,.5), 0 4px 18px rgba(0,0,0,.3);
  font-family: var(--font);
}
.btn-primary::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg,rgba(255,255,255,.15),transparent);
  opacity: 0; transition: opacity .3s;
}
.btn-primary:hover { box-shadow:0 0 48px rgba(124,58,237,.7),0 8px 28px rgba(0,0,0,.4); }
.btn-primary:hover::before { opacity: 1; }

.btn-glass {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 30px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--text-primary);
  font-size: 15px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: all .3s;
  font-family: var(--font);
}
.btn-glass:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); transform:translateY(-2px); }

/* ============================================================
   STAT CHIPS  (inside hero, centered row)
   ============================================================ */
.stat-chips {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 0;
}
.stat-chip {
  padding: 14px 24px; border-radius: 16px;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: transform .3s, box-shadow .3s;
  cursor: default;
  text-align: center;
}
/* card 1 = blue, card 2 = purple, card 3 = orange, card 4 = blue */
.stat-chip:nth-child(1) { border-color:rgba(59,130,246,.35); }
.stat-chip:nth-child(2) { border-color:rgba(168,85,247,.35); }
.stat-chip:nth-child(3) { border-color:rgba(251,146,60,.35); }
.stat-chip:nth-child(4) { border-color:rgba(59,130,246,.35); }
.stat-chip:hover { transform:translateY(-6px) !important; box-shadow:0 18px 40px rgba(0,0,0,.45); }
.stat-num  { font-size:26px; font-weight:800; display:block; margin-bottom:2px; line-height:1.15; }
.stat-chip:nth-child(1) .stat-num { color:#3b82f6; }
.stat-chip:nth-child(2) .stat-num { color:#a855f7; }
.stat-chip:nth-child(3) .stat-num { color:#fb923c; }
.stat-chip:nth-child(4) .stat-num { color:#3b82f6; }
.stat-label { font-size:12px; color:var(--text-secondary); font-weight:500; }

/* ============================================================
   TRUST BAR  (glass industry pills at hero bottom)
   ============================================================ */
.hero-trust {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin-top: 0;
}
.trust-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(240,241,248,.5);
}
.trust-label::before, .trust-label::after {
  content: '';
  height: 1px;
  width: 64px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28));
}
.trust-label::after { background: linear-gradient(90deg, rgba(255,255,255,.28), transparent); }
.trust-pills {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.trust-pill {
  padding: 12px 32px;
  min-width: 120px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: rgba(240,241,248,.72);
  background: rgba(255,255,255,.05);
  border: none;
  border-radius: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: color .25s, background .25s;
  cursor: default;
  white-space: nowrap;
}
.trust-pill:hover {
  color: rgba(240,241,248,.95);
  background: rgba(255,255,255,.10);
}

/* ============================================================
   SCROLL CUE (pinned bottom-center of hero)
   ============================================================ */
.scroll-cue {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: .06em;
  animation: scrollBob 2.2s ease-in-out infinite;
  transition: color .2s;
}
.scroll-cue:hover { color: var(--text-muted); }
.scroll-cue svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@keyframes scrollBob { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(6px)} }

/* ============================================================
   EFFECT 5 – ANIMATED GRADIENT TEXT (.ai-grad)
   ============================================================ */
.ai-grad {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 40%, #fb923c 70%, #3b82f6 100%);
  background-size: 250% 250%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 22px rgba(168,85,247,.55));
  animation: gradShift 6s linear infinite;
}
@keyframes gradShift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* ============================================================
   EFFECT 3 – CURSOR SPOTLIGHT in hero
   ============================================================ */
/* Cursor spotlight — full-viewport FIXED layer so it is never clipped by the 1200px content width */
.cursor-spotlight {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity .5s ease;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(59,130,246,.06) 0%,
    rgba(168,85,247,.035) 35%,
    transparent 70%
  );
}
.cursor-spotlight.on { opacity: .6; }
/* keep hero content above the overlay */
.hero-inner, .hero-main, .hero-text, .hero-visual, .scroll-cue { position: relative; z-index: 1; }

/* ============================================================
   EFFECT 6b – ANIMATED GRADIENT BORDER on .console-shell
   ============================================================ */
.console-shell {
  isolation: isolate;
}
.console-shell::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--shell-angle, 0deg),
    rgba(59,130,246,.5)  0%,
    rgba(168,85,247,.5) 33%,
    rgba(251,146,60,.5)  66%,
    rgba(59,130,246,.5)  100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: shellBorderSpin 8s linear infinite;
  opacity: 0;
  transition: opacity .4s;
  z-index: -1;
  pointer-events: none;
}
.console-shell:hover::after { opacity: 1; }
@property --shell-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes shellBorderSpin {
  to { --shell-angle: 360deg; }
}

/* ============================================================
   EFFECT 4 – 3D TILT: perspective wrapper injected by JS
   ============================================================ */
.tilt-host {
  perspective: 900px;
}
.tilt-el {
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.23,1,.32,1);
  position: relative;
}
.tilt-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--gx,50%) var(--gy,50%),
    rgba(255,255,255,.12) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity .3s;
  z-index: 10;
}
.tilt-el:hover .tilt-glare { opacity: 1; }

/* ============================================================
   EFFECT 7 – MAGNETIC BUTTON (positioning handled by JS)
   ============================================================ */
.btn-primary {
  /* JS will set --bx/--by via inline translate */
  will-change: transform;
}

/* ============================================================
   EFFECT 8 – LIFECYCLE TRAVELLER DOT
   ============================================================ */
.lifecycle-traveller {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 34px;            /* comet streak: faint tail (left) → bright head (right) */
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(96,165,250,.35) 55%, rgba(191,219,254,.9) 88%, #fff 100%);
  box-shadow:
    0 0 6px 1px rgba(96,165,250,.7),
    0 0 12px 3px rgba(168,85,247,.35);
  pointer-events: none;
  animation: travelDot 2.6s linear infinite;
  z-index: 2;
}
@keyframes travelDot {
  0%   { left: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* ============================================================
   REDUCED MOTION – disable all continuous loops
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ai-grad              { animation: none; }
  .console-shell::after { animation: none; }
  .lifecycle-traveller  { animation: none; opacity: 0; }
  .aurora-blob          { animation: none !important; }
  @keyframes gradShift  {}
  @keyframes shellBorderSpin {}
  @keyframes travelDot  {}
}

/* ============================================================
   CONSOLE GLASS SHELL  (the star of the show)
   ============================================================ */
.console-shell {
  background: var(--console-bg);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-card);
  overflow: visible; /* allow ::after border-glow to extend */
  transition: transform .35s, box-shadow .35s, border-color .3s;
  /* Unified height: all three panels match the tallest console */
  min-height: 398px;
  display: flex;
  flex-direction: column;
}
/* clip interior content without clipping the ::after border glow */
.console-shell > .console-titlebar,
.console-shell > .console-body {
  overflow: hidden;
}
.console-titlebar {
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.console-body {
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}
/* Per-product accent glows */
.console-lili  { box-shadow: 0 0 0 1px rgba(59,130,246,.18), 0 24px 60px rgba(0,0,0,.55), 0 0 80px rgba(59,130,246,.14); border-color: rgba(59,130,246,.22); }
.console-miao  { box-shadow: 0 0 0 1px rgba(168,85,247,.18), 0 24px 60px rgba(0,0,0,.55), 0 0 80px rgba(168,85,247,.14); border-color: rgba(168,85,247,.22); }
.console-vivi  { box-shadow: 0 0 0 1px rgba(251,146,60,.18), 0 24px 60px rgba(0,0,0,.55), 0 0 80px rgba(251,146,60,.14); border-color: rgba(251,146,60,.22); }
.console-lili:hover { transform:translateY(-6px); box-shadow:0 0 0 1px rgba(59,130,246,.28),0 32px 72px rgba(0,0,0,.65),0 0 120px rgba(59,130,246,.22); border-color:rgba(59,130,246,.38); }
.console-miao:hover { transform:translateY(-6px); box-shadow:0 0 0 1px rgba(168,85,247,.28),0 32px 72px rgba(0,0,0,.65),0 0 120px rgba(168,85,247,.22); border-color:rgba(168,85,247,.38); }
.console-vivi:hover { transform:translateY(-6px); box-shadow:0 0 0 1px rgba(251,146,60,.28),0 32px 72px rgba(0,0,0,.65),0 0 120px rgba(251,146,60,.22); border-color:rgba(251,146,60,.38); }

/* Titlebar */
.console-titlebar {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 15px;
  background: rgba(255,255,255,.025);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.dot-r { background:#ff5f57; } .dot-y { background:#febc2e; } .dot-g { background:#28c840; }
.console-title { margin-left:7px; font-size:12px; color:var(--text-muted); font-weight:500; }
.console-badge {
  margin-left: auto;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 9px; border-radius: var(--radius-pill);
}
.badge-blue   { background:rgba(59,130,246,.16);  border:1px solid rgba(59,130,246,.28);  color:#3b82f6; }
.badge-purple { background:rgba(168,85,247,.16); border:1px solid rgba(168,85,247,.28); color:#a855f7; }
.badge-orange { background:rgba(251,146,60,.16);  border:1px solid rgba(251,146,60,.28);  color:#fb923c; }

/* Body */
.console-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; flex: 1; }

/* Metric tiles */
.c-metrics { display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; }
.c-metric {
  background: var(--console-inner);
  border: 1px solid var(--console-inner-b);
  border-radius: 10px; padding: 11px 9px; text-align: center;
}
.c-metric-val { font-size:19px; font-weight:800; line-height:1; display:block; }
.blue-val   { color:#3b82f6; }
.purple-val { color:#a855f7; }
.orange-val { color:#fb923c; }
.green-val  { color:#86efac; }
.c-metric-label { font-size:10px; color:var(--text-muted); margin-top:4px; }

/* Bar chart */
.c-chart {
  background: var(--console-inner);
  border: 1px solid var(--console-inner-b);
  border-radius: 10px; padding: 13px;
}
.c-chart-head {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom: 11px;
}
.c-chart-title { font-size:11px; font-weight:600; color:var(--text-primary); }
.c-chart-tag {
  font-size:10px; padding:2px 7px; border-radius:var(--radius-pill);
  background:rgba(134,239,172,.12); border:1px solid rgba(134,239,172,.2); color:#86efac;
}
.c-bars { display:flex; align-items:flex-end; gap:5px; height:52px; }
.c-bar { flex:1; border-radius:4px 4px 0 0; background:rgba(59,130,246,.22); }
.c-bar.hi { background:linear-gradient(180deg,#3b82f6,#2563eb); }

/* Chat bubbles */
.c-chat { display:flex; flex-direction:column; gap:8px; }
.bubble {
  max-width:82%; padding:9px 13px; border-radius:12px;
  font-size:12px; line-height:1.5;
}
.bubble.user {
  align-self:flex-end;
  background:rgba(99,102,241,.2); border:1px solid rgba(99,102,241,.3);
  color:#c7d2fe; border-bottom-right-radius:4px;
}
.bubble.ai {
  align-self:flex-start;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  color:var(--text-primary); border-bottom-left-radius:4px;
}
.bubble.ai::before { content:'✦ '; color:#3b82f6; font-size:10px; }
.c-input {
  display:flex; gap:8px; padding:8px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
}
.c-input-field { flex:1; background:transparent; border:none; font-size:11px; color:var(--text-muted); }
.c-send {
  width:26px; height:26px;
  background:linear-gradient(135deg,#7c3aed,#3b82f6);
  border-radius:6px; display:flex; align-items:center; justify-content:center;
  font-size:12px; color:#fff; cursor:pointer; flex-shrink:0;
}

/* Sub-label inside console */
.c-sublabel {
  font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:6px;
}

/* Miaomiao comment rows */
.miao-rows { display:flex; flex-direction:column; gap:0; }
.miao-row {
  display:flex; align-items:center; gap:7px;
  padding:7px 0; border-bottom:1px solid rgba(255,255,255,.06);
}
.miao-row:last-child { border-bottom:none; }
.miao-platform {
  flex-shrink:0; font-size:9px; font-weight:700;
  padding:2px 6px; border-radius:4px; letter-spacing:.02em;
}
.plat-dy  { background:rgba(255,255,255,.08); color:#e8eaf2; }
.plat-xhs { background:rgba(239,68,68,.14);  color:#fca5a5; }
.plat-sph { background:rgba(34,197,94,.12);  color:#86efac; }   /* B站 */
.plat-ks  { background:rgba(251,146,60,.14); color:#fdba74; }   /* 微博 */
.miao-comment-text { flex:1; font-size:11px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.miao-intent { flex-shrink:0; font-size:9px; font-weight:700; padding:2px 7px; border-radius:var(--radius-pill); }
.intent-hi  { background:rgba(34,197,94,.14); color:#86efac; border:1px solid rgba(34,197,94,.22); }
.intent-mid { background:rgba(251,191,36,.14); color:#fde68a; border:1px solid rgba(251,191,36,.22); }
.miao-outreach {
  background:rgba(168,85,247,.10); border:1px solid rgba(168,85,247,.25);
  border-radius:10px; padding:10px 12px;
  font-size:11px; color:#d8b4fe; line-height:1.55;
}
.miao-outreach-label {
  font-size:9px; font-weight:700; color:#a855f7;
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:5px;
}

/* Vivi video thumbnail */
.vivi-video {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:10px; overflow:hidden; position:relative;
  height:82px; display:flex; align-items:center; justify-content:center;
}
.vivi-video-bg {
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(251,146,60,.10) 0%,rgba(99,102,241,.12) 100%);
}
.vivi-avatar-hint { position:absolute; bottom:0; left:18px; font-size:32px; line-height:1; opacity:.7; }
.vivi-play {
  width:32px; height:32px;
  background:rgba(251,146,60,.85); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:#fff; position:relative; z-index:1;
  box-shadow:0 0 18px rgba(251,146,60,.55);
}
.vivi-video-tag {
  position:absolute; top:7px; right:8px;
  background:rgba(251,146,60,.85); color:#fff;
  font-size:9px; font-weight:700; padding:2px 7px;
  border-radius:var(--radius-pill); z-index:1;
}
/* Vivi scorecard */
.vivi-scorecard { display:flex; flex-direction:column; gap:7px; }
.vivi-score-row { display:flex; align-items:center; gap:8px; }
.vivi-score-label { font-size:10px; color:var(--text-muted); width:34px; flex-shrink:0; }
.vivi-bar-wrap { flex:1; height:5px; background:rgba(255,255,255,.07); border-radius:3px; overflow:hidden; }
.vivi-bar-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,#fb923c,#f97316); }
.vivi-score-val { font-size:10px; font-weight:700; color:#fb923c; width:24px; text-align:right; flex-shrink:0; }
/* Vivi chapters */
.vivi-chapters { display:flex; flex-direction:column; }
.vivi-chapter {
  display:flex; align-items:center; gap:8px;
  padding:7px 0; border-bottom:1px solid rgba(255,255,255,.06);
  font-size:11px;
}
.vivi-chapter:last-child { border-bottom:none; }
.ch-mark { flex-shrink:0; width:16px; text-align:center; font-size:11px; }
.ch-done   { color:#86efac; }
.ch-active { color:#fb923c; }
.ch-text { flex:1; color:var(--text-secondary); }
.ch-text.active { color:var(--text-primary); font-weight:600; }

/* ============================================================
   LIFECYCLE "如何运作"
   ============================================================ */
.lifecycle {
  position: relative;
  margin-top: 60px;
}
.lifecycle-line {
  position: absolute;
  top: 32px;
  left: calc(16.66% - 16px);
  right: calc(16.66% - 16px);
  height: 2px;
  background: linear-gradient(90deg,#a855f7,#3b82f6,#fb923c);
  z-index: 0;
  pointer-events: none;
}
.lifecycle-line-glow {
  position: absolute;
  top: 29px;
  left: calc(16.66% - 16px);
  right: calc(16.66% - 16px);
  height: 8px;
  background: linear-gradient(90deg,rgba(168,85,247,.35),rgba(59,130,246,.35),rgba(251,146,60,.35));
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
}
.lifecycle-nodes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  position: relative;
  z-index: 1;
}
.lifecycle-node { display:flex; flex-direction:column; align-items:center; text-align:center; }
.node-circle {
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:900;
  margin-bottom:18px; position:relative;
  transition: transform .3s;
}
.node-circle:hover { transform:scale(1.1); }
.nc-purple { background:rgba(168,85,247,.15); box-shadow:0 0 28px rgba(168,85,247,.45),0 0 0 1px rgba(168,85,247,.4); color:#d8b4fe; }
.nc-blue   { background:rgba(59,130,246,.12);   box-shadow:0 0 28px rgba(59,130,246,.4),0 0 0 1px rgba(59,130,246,.4);   color:#bfdbfe; }
.nc-orange { background:rgba(251,146,60,.12);  box-shadow:0 0 28px rgba(251,146,60,.35),0 0 0 1px rgba(251,146,60,.4);  color:#fdba74; }
.node-num {
  position:absolute; top:-5px; right:-5px;
  width:20px; height:20px; border-radius:50%;
  font-size:10px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.nn-purple { background:#a855f7; color:#fff; }
.nn-blue   { background:#3b82f6; color:#fff; }
.nn-orange { background:#fb923c; color:#fff; }
.node-step {
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:6px;
}
.node-step.purple { color:#a855f7; }
.node-step.blue   { color:#3b82f6; }
.node-step.orange { color:#fb923c; }
.node-name  { font-size:20px; font-weight:800; margin-bottom:8px; }
.node-desc  { font-size:14px; color:var(--text-secondary); line-height:1.65; max-width:230px; }
.node-product {
  display:inline-flex; align-items:center; gap:5px;
  margin-top:12px; font-size:11px; font-weight:700;
  padding:4px 11px; border-radius:var(--radius-pill);
}
.np-purple { background:rgba(168,85,247,.12); color:#a855f7; border:1px solid rgba(168,85,247,.25); }
.np-blue   { background:rgba(59,130,246,.10);   color:#3b82f6; border:1px solid rgba(59,130,246,.25); }
.np-orange { background:rgba(251,146,60,.10);  color:#fb923c; border:1px solid rgba(251,146,60,.25); }

/* ============================================================
   CONSOLE SHOWCASE  (centerpiece section)
   ============================================================ */
.showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin-top: 56px;
  align-items: start;
}

/* Per-product header block above each console */
.console-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.console-head {
  padding: 0 4px;
}
.console-head-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 6px 0 4px;
  line-height: 1.15;
}
.console-head-tagline {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 6px;
}
.console-head-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: gap .2s;
}
.console-head-link:hover { gap: 9px; }

/* ============================================================
   PRODUCTS BENTO GRID
   ============================================================ */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
  margin-top: 56px;
}
.bento-tile {
  background: var(--glass-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px;
  position: relative; overflow: hidden;
  transition: transform .3s, box-shadow .3s, border-color .3s, background .3s;
  cursor: default;
}
/* tile-lili is now an equal-width product tile */
.tile-role { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.08em; padding:4px 11px; border-radius:var(--radius-pill); margin-bottom:16px; }
.role-purple { color:#c084fc; background:rgba(168,85,247,.14); border:1px solid rgba(168,85,247,.32); }
.role-blue   { color:#60a5fa; background:rgba(59,130,246,.14); border:1px solid rgba(59,130,246,.32); }
.role-orange { color:#fdba74; background:rgba(251,146,60,.14); border:1px solid rgba(251,146,60,.32); }
.tile-lili:hover  { transform:translateY(-5px); box-shadow:var(--shadow-card-hover),0 0 80px rgba(59,130,246,.18); border-color:rgba(59,130,246,.38); background:rgba(59,130,246,.04); }
.tile-miao:hover  { transform:translateY(-5px); box-shadow:var(--shadow-card-hover),0 0 60px rgba(168,85,247,.18); border-color:rgba(168,85,247,.38); background:rgba(168,85,247,.04); }
.tile-zhi:hover   { transform:translateY(-5px); box-shadow:var(--shadow-card-hover),0 0 60px rgba(251,146,60,.18); border-color:rgba(251,146,60,.38); background:rgba(251,146,60,.04); }
.tile-stat { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:24px; }
/* Accent corner glows on hover */
.tile-lili::after  { content:''; position:absolute; top:-80px; right:-80px; width:240px; height:240px; background:radial-gradient(circle,rgba(59,130,246,.18) 0%,transparent 70%); pointer-events:none; }
.tile-miao::after  { content:''; position:absolute; bottom:-60px; right:-60px; width:180px; height:180px; background:radial-gradient(circle,rgba(168,85,247,.18) 0%,transparent 70%); pointer-events:none; }
.tile-zhi::after   { content:''; position:absolute; bottom:-60px; left:-60px; width:180px; height:180px; background:radial-gradient(circle,rgba(251,146,60,.18) 0%,transparent 70%); pointer-events:none; }

.tile-icon {
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:900; margin-bottom:16px;
}
.ti-blue   { background:rgba(59,130,246,.14);  color:#3b82f6; }
.ti-purple { background:rgba(168,85,247,.14); color:#a855f7; }
.ti-orange { background:rgba(251,146,60,.14); color:#fb923c; }
.ti-indigo { background:rgba(99,102,241,.14); color:#a5b4fc; }

.tile-name  { font-size:22px; font-weight:800; margin-bottom:8px; letter-spacing:-.01em; }
.tile-desc  { font-size:14px; color:var(--text-secondary); line-height:1.65; }
.tile-tags  { display:flex; gap:6px; flex-wrap:wrap; margin-top:16px; }
.tile-tag   { font-size:10px; font-weight:600; padding:3px 9px; border-radius:var(--radius-pill); letter-spacing:.02em; }
.tag-blue   { background:rgba(59,130,246,.10);  color:#3b82f6; border:1px solid rgba(59,130,246,.22); }
.tag-purple { background:rgba(168,85,247,.10); color:#a855f7; border:1px solid rgba(168,85,247,.22); }
.tag-orange { background:rgba(251,146,60,.10); color:#fb923c; border:1px solid rgba(251,146,60,.22); }
.tag-indigo { background:rgba(99,102,241,.10); color:#a5b4fc; border:1px solid rgba(99,102,241,.22); }
.tile-link {
  display:inline-flex; align-items:center; gap:5px;
  font-size:13px; font-weight:600; text-decoration:none; margin-top:20px;
  transition: gap .2s;
}
.tile-link:hover { gap:10px; }
.lk-blue   { color:#3b82f6; }
.lk-purple { color:#a855f7; }
.lk-orange { color:#fb923c; }
.tile-stat-num   { font-size:36px; font-weight:900; letter-spacing:-.04em; line-height:1; }
.tile-stat-label { font-size:13px; color:var(--text-secondary); margin-top:6px; font-weight:500; }

/* Lili mini mock inside bento tile */
.lili-mini-mock {
  margin-top: 22px;
  background: rgba(59,130,246,.05);
  border: 1px solid rgba(59,130,246,.14);
  border-radius: 12px; padding: 13px;
}
.lili-mini-head {
  display:flex; gap:6px; align-items:center;
  margin-bottom:10px; font-size:11px; color:var(--text-muted);
}
.lili-live-dot { width:7px; height:7px; background:#3b82f6; border-radius:50%; animation:dotBlink 1.5s infinite; }
.lili-channels { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:9px; }
.lili-ch {
  background:rgba(59,130,246,.08); border:1px solid rgba(59,130,246,.2);
  border-radius:6px; padding:3px 8px; font-size:10px; font-weight:600; color:#3b82f6;
}
.lili-stats-2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.lili-stat-box { background:rgba(255,255,255,.04); border-radius:8px; padding:10px; text-align:center; }
.lili-stat-v   { font-size:17px; font-weight:800; color:#3b82f6; line-height:1; }
.lili-stat-l   { font-size:10px; color:var(--text-muted); margin-top:3px; }

/* ============================================================
   CTA PANEL
   ============================================================ */
.cta-section { padding: 96px 0 108px; }
.cta-panel {
  padding: 72px 60px;
  text-align: center;
  position: relative; overflow: hidden;
  border-color: rgba(168,85,247,.2);
  box-shadow: var(--shadow-card), 0 0 80px rgba(124,58,237,.1);
}
.cta-panel::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(124,58,237,.14) 0%, transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(59,130,246,.09) 0%, transparent 50%);
  pointer-events: none;
}
.cta-panel h2 { font-size:clamp(30px,4.5vw,52px); font-weight:900; line-height:1.15; letter-spacing:-.5px; margin-bottom:20px; }
.cta-grad { background:linear-gradient(135deg,#3b82f6,#8b5cf6); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.cta-panel p { font-size:18px; color:var(--text-secondary); margin-bottom:40px; max-width:none; margin-left:auto; margin-right:auto; line-height:1.7; white-space:nowrap; }
.cta-buttons { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   FOOTER — rich multi-column
   ============================================================ */
footer {
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(10,10,20,.55);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  padding: 64px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}
/* main grid: brand (1.6fr) + 4 link columns (1fr each) */
.footer-cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 52px;
}
/* Brand column */
.footer-brand { display: flex; flex-direction: column; gap: 0; }
.footer-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; margin-bottom: 14px;
}
.footer-logo-words { display: flex; flex-direction: column; gap: 2px; }
.footer-logo-company { font-size: 11.5px; color: var(--text-dim); font-weight: 500; line-height: 1.25; }
.footer-logo-mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg,#7c3aed,#3b82f6);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff; flex-shrink: 0;
  box-shadow: 0 0 14px rgba(124,58,237,.4);
}
.footer-logo-text {
  font-size: 15px; font-weight: 800; letter-spacing: -.2px;
  background: linear-gradient(90deg,#a855f7,#3b82f6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.footer-company {
  font-size: 12px; color: var(--text-dim);
  margin-bottom: 12px; font-weight: 500;
}
.footer-blurb {
  font-size: 13px; color: var(--text-muted);
  line-height: 1.7; margin-bottom: 20px;
  max-width: 240px;
}
.footer-social-label {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dim);
  margin-bottom: 10px;
}
.footer-social-icons {
  display: flex; gap: 10px; align-items: center;
}
.footer-social-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s, transform .2s;
  cursor: pointer;
  flex-shrink: 0;
}
.footer-social-icon:hover {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.24);
  transform: translateY(-2px);
}
.footer-social-icon svg { width: 15px; height: 15px; fill: var(--text-muted); }

/* Link columns */
.footer-col { display: flex; flex-direction: column; gap: 0; }
.footer-col-head {
  font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  font-size: 13px; font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px 0;
  transition: color .2s;
}
.footer-col a:hover { color: var(--text-secondary); }

/* Bottom bar */
.footer-bar {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--text-dim);
}
.footer-bar-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-bar-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-bar a {
  color: var(--text-dim); text-decoration: none; transition: color .2s;
}
.footer-bar a:hover { color: var(--text-muted); }
.footer-bar-sep { opacity: .35; }
.footer-status {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 11px; font-weight: 600;
  color: var(--text-dim);
}
.footer-status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #86efac;
  box-shadow: 0 0 6px rgba(134,239,172,.6);
  flex-shrink: 0;
}

/* ============================================================
   SECTION EYEBROW variants (product accent colours)
   ============================================================ */
.eyebrow-blue   { color:#3b82f6; }
.eyebrow-orange { color:#fb923c; }

/* ============================================================
   STACK INTERACTION ZONE  (wraps console-stack + tabs row so
   hover-pause fires once for the whole area)
   ============================================================ */
.stack-interaction-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* ============================================================
   CONSOLE STACK TABS  (pill row below the 3D stack)
   ============================================================ */
.stack-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
}

.stack-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background .22s, border-color .22s, color .22s, box-shadow .22s;
  white-space: nowrap;
}
.stack-tab:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  color: var(--text-primary);
}

/* Colored dot inside each tab */
.stack-tab-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: box-shadow .22s;
}

/* Blue tab (Lili) */
.stack-tab[data-tab-color="blue"] .stack-tab-dot { background: #3b82f6; }
.stack-tab[data-tab-color="blue"]:hover { border-color: rgba(59,130,246,.4); }
.stack-tab[data-tab-color="blue"].active {
  background: rgba(59,130,246,.18);
  border-color: rgba(59,130,246,.5);
  color: #93c5fd;
  box-shadow: 0 0 14px rgba(59,130,246,.25);
}
.stack-tab[data-tab-color="blue"].active .stack-tab-dot {
  box-shadow: 0 0 6px #3b82f6;
}

/* Purple tab (瞄瞄) */
.stack-tab[data-tab-color="purple"] .stack-tab-dot { background: #a855f7; }
.stack-tab[data-tab-color="purple"]:hover { border-color: rgba(168,85,247,.4); }
.stack-tab[data-tab-color="purple"].active {
  background: rgba(168,85,247,.18);
  border-color: rgba(168,85,247,.5);
  color: #d8b4fe;
  box-shadow: 0 0 14px rgba(168,85,247,.25);
}
.stack-tab[data-tab-color="purple"].active .stack-tab-dot {
  box-shadow: 0 0 6px #a855f7;
}

/* Orange tab (知训云) */
.stack-tab[data-tab-color="orange"] .stack-tab-dot { background: #fb923c; }
.stack-tab[data-tab-color="orange"]:hover { border-color: rgba(251,146,60,.4); }
.stack-tab[data-tab-color="orange"].active {
  background: rgba(251,146,60,.18);
  border-color: rgba(251,146,60,.5);
  color: #fdba74;
  box-shadow: 0 0 14px rgba(251,146,60,.25);
}
.stack-tab[data-tab-color="orange"].active .stack-tab-dot {
  box-shadow: 0 0 6px #fb923c;
}

/* ============================================================
   SOLUTIONS SECTION
   ============================================================ */
.solutions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 52px;
}
.solution-card {
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  text-decoration: none;
}
.solution-card h3 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
.solution-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 20px;
}
.solution-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: gap .2s;
  color: var(--purple-light);
}
.solution-link:hover { gap: 10px; }
/* Accent colour per card by its LEAD product (not position) */
.solution-card.s-purple h3, .solution-card.s-purple .solution-link { color: #a855f7; }
.solution-card.s-blue   h3, .solution-card.s-blue   .solution-link { color: #3b82f6; }
.solution-card.s-orange h3, .solution-card.s-orange .solution-link { color: #fb923c; }
.solution-card .sol-stack { justify-content:flex-start; margin:2px 0 20px; }

/* ============================================================
   ADVANTAGES SECTION  (light icon grid, not heavy cards)
   ============================================================ */
.adv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 52px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.adv-item {
  padding: 28px 24px;
  background: rgba(10,10,20,.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background .3s;
  border-right: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.adv-item:hover { background: rgba(255,255,255,.05); }
/* Remove right border from last in each row */
.adv-item:nth-child(3n) { border-right: none; }
/* Remove bottom border from last row */
.adv-item:nth-child(n+4) { border-bottom: none; }
.adv-icon {
  font-size: 22px;
  display: block;
  margin-bottom: 10px;
  line-height: 1;
}
/* Rotating icon tints: purple / blue / orange */
.adv-item:nth-child(3n+1) .adv-icon { filter: drop-shadow(0 0 6px rgba(168,85,247,.6)); }
.adv-item:nth-child(3n+2) .adv-icon { filter: drop-shadow(0 0 6px rgba(59,130,246,.6)); }
.adv-item:nth-child(3n+3) .adv-icon { filter: drop-shadow(0 0 6px rgba(251,146,60,.6)); }
.adv-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 5px;
}
.adv-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ============================================================
   RESULTS / 客户成效 SECTION  (metric-led cards — redesigned)
   ============================================================ */
.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 52px;
  align-items: stretch;
}
.result-card {
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}
/* Per-card top glow stripe — card order: 瞄瞄 (purple) · Lili (blue) · 知训云 (orange) */
.result-card:nth-child(1)::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #a855f7, rgba(168,85,247,0));
}
.result-card:nth-child(2)::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #3b82f6, rgba(59,130,246,0));
}
.result-card:nth-child(3)::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #fb923c, rgba(251,146,60,0));
}
/* Role pill — small product + role tag */
.result-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
}
.result-pill-purple { color: #c084fc; background: rgba(168,85,247,.14); border: 1px solid rgba(168,85,247,.32); }
.result-pill-blue   { color: #60a5fa; background: rgba(59,130,246,.14);  border: 1px solid rgba(59,130,246,.32); }
.result-pill-orange { color: #fdba74; background: rgba(251,146,60,.14);  border: 1px solid rgba(251,146,60,.32); }
/* Metric row: big number + small unit label side-by-side */
.result-metric-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 16px;
}
.result-metric-num {
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
}
.metric-num-purple { color: #a855f7; }
.metric-num-blue   { color: #3b82f6; }
.metric-num-orange { color: #fb923c; }
.result-metric-unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}
.result-outcome {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.45;
}
.result-context {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 20px;
}
.result-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: gap .2s, opacity .2s;
  opacity: .85;
}
.result-link:hover { gap: 9px; opacity: 1; }
.result-link-purple { color: #a855f7; }
.result-link-blue   { color: #3b82f6; }
.result-link-orange { color: #fb923c; }

/* ── secondary-page base (page-hero / section-block) — defined BEFORE the
   responsive media queries below so the mobile overrides actually win ── */
.page-hero { text-align: center; max-width: 780px; margin: 0 auto; padding: 96px 0 36px; }
.page-hero h1 { font-size: clamp(32px, 5vw, 54px); font-weight: 900; letter-spacing: -1px; line-height: 1.14; margin-bottom: 18px; }
.page-hero .page-sub { font-size: clamp(16px, 2vw, 19px); color: var(--text-secondary); line-height: 1.95; }
.page-eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--purple-light); margin-bottom: 16px; }
.section-block { padding: 56px 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .adv-grid      { grid-template-columns:1fr 1fr; }
  .adv-item:nth-child(3n)  { border-right: 1px solid rgba(255,255,255,.06); }
  .adv-item:nth-child(n+4) { border-bottom: 1px solid rgba(255,255,255,.06); }
  .adv-item:nth-child(2n)  { border-right: none; }
  .adv-item:nth-child(n+5) { border-bottom: none; }
  .results-grid  { grid-template-columns:1fr 1fr; }
  .footer-cols   { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
  .footer-brand  { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
  .footer-blurb  { max-width: 300px; }
}
@media (max-width: 900px) {
  .hero-main {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .hero-text {
    align-items: center;
    text-align: center;
  }
  .hero h1 { text-align: center; }
  .hero-sub { text-align: center; margin-left: auto; margin-right: auto; }
  .hero-buttons { justify-content: center; }
  .hero-metrics { justify-content: center; }
  /* On small screens show only front console; reduce stack height */
  .hero-visual { min-height: 340px; }
  .console-stack { height: 360px; max-width: 360px; margin: 0 auto; }
  .stack-item { width: 320px; margin-left: -160px; }
  /* Hide back cards on small screens to avoid overflow */
  .stack-item.is-back-left,
  .stack-item.is-back-right { opacity: 0; pointer-events: none; }
}
@media (max-width: 860px) {
  /* nav: fix to top of viewport (was sticky — the body's overflow-x:hidden + sticky +
     backdrop-filter could cause a small "shift" on scroll). Since the build injects
     the <nav> directly in place of #nav-root (no wrapper div), give the body a top
     padding so the fixed nav doesn't overlap page content. */
  nav { position: fixed; top: 0; left: 0; right: 0; width: 100%; transform: translateZ(0); -webkit-transform: translateZ(0); }
  body { padding-top: 62px; }
  /* prevent any element from creating a horizontal scrollbar on small screens */
  html, body { max-width: 100%; overflow-x: hidden; }
  .aurora-stage, .cursor-spotlight { top: 0; left: 0; width: 100vw; height: 100vh; }
  .page-wrap, .hero-main, .hero-text, .hero-visual { max-width: 100%; min-width: 0; }
  .hero-inner { min-height:unset; padding-top:40px; padding-bottom:40px; }
  .lifecycle-line, .lifecycle-line-glow { display:none; }
  .lifecycle-nodes { grid-template-columns:1fr; gap:40px; }
  nav .nav-links { display:none; }
  .solutions-grid { grid-template-columns:1fr; }
  .adv-grid   { grid-template-columns:1fr; }
  .adv-item   { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; }
  .adv-item:last-child { border-bottom: none !important; }
  .results-grid { grid-template-columns:1fr; }
  .footer-cols  { grid-template-columns:1fr 1fr; gap:28px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .hero h1 { font-size:30px; line-height: 1.18; letter-spacing: -.6px; }
  html[lang="en"] .hero h1 { font-size: 28px; }
  .hero-sub { font-size: 14px; line-height: 1.65; }
  .hero-badge { font-size: 11.5px; padding: 5px 14px; margin-bottom: 20px; }
  .hm-n { font-size: 20px; }
  .hm-l { font-size: 11px; }
  .hm-sep { height: 24px; }
  .hero-metrics { gap:14px; }
  .hero-buttons { gap: 12px; margin-bottom: 28px; }
  .btn-primary, .btn-glass { padding: 12px 26px; font-size: 14px; }
  .stat-chip  { padding:12px 18px; }
  .cta-panel  { padding:40px 22px; }
  .cta-panel h2 { font-size: 24px; line-height: 1.25; }
  .cta-panel p { white-space:normal; font-size:14px; }
  .cta-buttons { flex-wrap: nowrap; gap: 10px; }
  .cta-buttons .btn-primary,
  .cta-buttons .btn-glass { padding: 12px 18px; font-size: 13.5px; white-space: nowrap; }
  .console-stack { height: 340px; }
  .footer-cols  { grid-template-columns:1fr 1fr; gap:24px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bar   { flex-direction:column; align-items:flex-start; gap:10px; }
  .footer-bar-right { width:100%; }

  /* Page hero / page sub (used by about / products / solutions / etc.) */
  section { padding: 8px 0; }
  .page-hero { padding: 14px 0 4px; }
  .page-hero h1 { font-size: 23px; line-height: 1.2; margin-bottom: 5px; letter-spacing: -.4px; }
  html[lang="en"] .page-hero h1 { font-size: 21px; }
  .page-hero .page-sub { font-size: 12.5px; line-height: 1.55; }
  .page-eyebrow { font-size: 11px; margin-bottom: 6px; letter-spacing: .12em; }
  .section-title { font-size: 20px; line-height: 1.25; }
  .section-eyebrow { font-size: 11px; }
  .section-block { padding: 8px 0 12px; }
  .cta-section { padding: 12px 0 28px; }

  /* Tighten the gap between the card (.pb-visual) and the "Best for…" / action
     block on product detail + overview pages. */
  .pb-visual { margin-bottom: 14px; }

  /* Footer: tighten the gaps inside the brand block + between column heads & links */
  .footer-logo { margin-bottom: 8px; }
  .footer-blurb { margin-top: -2px; margin-bottom: 12px; line-height: 1.55; }
  .footer-col-head { margin-bottom: 10px; letter-spacing: .1em; }
  .footer-col a { padding: 3px 0; }

  /* Hero console stack — on mobile the 3D absolute-positioned stack overlaps
     the tabs row below. Drop the absolute positioning, give all 3 cards the
     same fixed height so they don't "jump" when the auto-cycle swaps between
     Lili / Miaomiao / Vivi (they have different content heights). */
  .stack-tabs { margin-top: 14px; position: relative; z-index: 2; }
  .stack-tab { padding: 5px 12px; font-size: 11.5px; }
  .console-stack { height: 430px; max-width: 360px; margin: 0 auto; perspective: none; }
  .stack-item {
    position: relative;
    top: auto; left: auto;
    margin-left: auto; margin-right: auto;
    width: 100%; max-width: 360px; height: 100%;
    transform: none !important;
    opacity: 1 !important;
  }
  .stack-item .console-shell { height: 100%; }
  .stack-item.is-back-left,
  .stack-item.is-back-right { display: none; }

  /* Results cards (3× / 90% / 30min) — equalize heights, tighten type */
  .results-grid { grid-template-columns:1fr; gap: 14px; margin-top: 32px; }
  .result-card  { padding: 18px 20px 16px; align-self: stretch; height: 100%; }
  .result-pill  { font-size: 10px; padding: 3px 10px; margin-bottom: 10px; }
  .result-metric-num { font-size: 30px; }
  .result-metric-unit { font-size: 11.5px; }
  .result-metric-row { margin-bottom: 8px; gap: 6px; }
  .result-outcome { font-size: 12.5px; margin-bottom: 5px; line-height: 1.4; }
  .result-context { font-size: 11.5px; margin-bottom: 10px; line-height: 1.45; }
  .result-link  { font-size: 11.5px; }

  /* Products overview (bento tiles) */
  .pc-name { font-size: 17px; }
  .pc-desc { font-size: 12.5px; line-height: 1.6; margin-bottom: 14px; }
  .pc-feat { font-size: 12px; gap: 8px; }
  .pc-feats { gap: 9px; margin-bottom: 18px; }
  .pc-link { font-size: 12.5px; }
  .pc-icon { width: 32px; height: 32px; font-size: 16px; border-radius: 9px; }
  .pc-head { gap: 10px; margin-bottom: 12px; }
  .pc-role { font-size: 9.5px; letter-spacing: .12em; }
  .bento-grid { gap: 14px; margin-top: 32px; }
  .bento-tile { padding: 22px; }
  .product-roles { gap: 8px; margin-top: 22px; }
  .product-role { padding: 6px 12px; font-size: 12px; }
  .product-role .pr-emoji { font-size: 13px; }

  /* Product bands (deep-dive) */
  .product-band { padding: 36px 0; gap: 26px; }
  .product-band h2 { font-size: 21px; line-height: 1.28; margin-bottom: 12px; letter-spacing: -.3px; }
  html[lang="zh"] .product-band h2 { font-size: 20px; }
  .pb-role { font-size: 11px; padding: 4px 11px; margin-bottom: 12px; }
  .pb-lead { font-size: 13.5px; line-height: 1.7; margin-bottom: 18px; }
  .pb-points { gap: 10px; margin-bottom: 18px; }
  .pb-point { font-size: 12.5px; gap: 10px; line-height: 1.55; }
  .pb-dot { width: 17px; height: 17px; font-size: 9px; }
  .pb-best { font-size: 12px; padding: 11px 14px; margin-bottom: 18px; }
  .pb-link { font-size: 13px; }

  /* About — title tight to top, sub tight to product grid, product grid
     pushed further from "Our mission" so the two sections breathe */
  .ab-grid { grid-template-columns: 1fr; gap: 36px; align-items: start; }
  .ab-mission { margin: 18px auto 0; }
  .ab-lead { font-size: 20px; line-height: 1.42; margin-bottom: 16px; }
  html[lang="en"] .ab-lead { font-size: 19px; }
  .ab-mission-body { font-size: .92rem; line-height: 1.72; }
  .ab-mission-body p { margin-bottom: 12px; }
  .ab-grid-right h2 { font-size: 23px; line-height: 1.22; margin-bottom: 12px; }
  .ab-grid-right p  { font-size: .9rem; line-height: 1.7; margin-bottom: 10px; }
  .ab-cells { grid-template-columns: 1fr 1fr; }
  .ab-cell  { padding: 20px 10px; }
  .ab-cell-name { font-size: 1.05rem; margin-bottom: 5px; }
  .ab-cell-role { font-size: 11px; }

  /* Contact / Customers: tighten page-hero (sub) → first card */
  .contact-section { padding-top: 4px; }
  .contact-layout { gap: 12px; }
  .contact-mail { padding: 16px 18px; }
  .cm-name { font-size: 1rem; }
  .cm-role { font-size: 11px; }
  .cm-mail { font-size: 12px; }

  .case-study { padding: 22px 20px; }
  .cs-quote   { font-size: 15px; line-height: 1.42; }
  .cs-attr    { font-size: 12px; }
  .cs-stat-n  { font-size: 24px; }

  /* Lili hero — tighten the desktop-tuned gaps on small screens */
  .lili-firstscreen { min-height: calc(100vh - 62px); min-height: calc(100dvh - 62px); }
  .lili-hero .page-eyebrow { margin-bottom: 14px; }
  .lili-hero h1 { margin-bottom: 14px; }
  .lili-hero .page-sub { margin-bottom: 6px; }
  .lili-hero .spec-row { margin-top: 18px; gap: 8px; }
  .lili-hero .spec { font-size: 12px; padding: 7px 14px; }
  .lili-hero .hero-buttons { margin-top: 22px; gap: 10px; }
  .lili-hero .hero-buttons .btn-primary,
  .lili-hero .hero-buttons .btn-glass { padding: 12px 22px; font-size: 13.5px; white-space: nowrap; }

  /* Solutions: pain cards, combo chips, case studies */
  .sol-cols { gap: 12px; }
  .sol-col  { padding: 20px 16px 18px; }
  .sol-col h3 { font-size: 14.5px; }
  .sol-pains li { font-size: 12px; }
  .sol-stack { gap: 8px; margin-top: 22px; }
  .sol-chip  { padding: 6px 12px; font-size: 12px; }
  .pain-grid { gap: 14px; margin-top: 28px; }
  .pain-card { padding: 20px 18px; }
  .pain-card h3 { font-size: 14.5px; }
  .pain-card p  { font-size: 12.5px; }
  .pain-ic { width: 38px; height: 38px; font-size: 18px; margin-bottom: 12px; }
  .solve-row { padding: 16px 18px; gap: 12px; }
  .solve-prod { font-size: 13px; padding: 7px 12px; }
  .solve-txt  { font-size: 13px; line-height: 1.55; }

  /* Feature / info / case grids (used on about/customers) */
  .feature-grid, .info-grid, .case-grid { gap: 14px; margin-top: 28px; }
  .feature { padding: 22px; }
  .feature h3 { font-size: 1.05rem; }
  .feature p  { font-size: .88rem; line-height: 1.62; }
  .info-card { padding: 24px; }
  .info-card h3 { font-size: 1.05rem; }
  .info-card p  { font-size: .88rem; }
  .case-card  { padding: 24px; }
  .case-metric { font-size: 1.7rem; margin-bottom: 10px; }
  .case-card .case-outcome { font-size: .95rem; }
  .case-card .case-context { font-size: .82rem; }
  .stat-band { gap: 16px 32px; margin: 28px auto 0; }
  .stat-num  { font-size: 24px; letter-spacing: -.8px; }
  .stat-label { font-size: 11px; }

  /* Customers page */
  .case-study { padding: 22px 20px; }
  .cs-quote   { font-size: 16px; line-height: 1.45; }
  .cs-attr    { font-size: 12.5px; }
  .cs-csr-h   { font-size: 10.5px; margin-bottom: 7px; }
  .cs-csr p   { font-size: .85rem; line-height: 1.65; }
  .cs-stat-n  { font-size: 26px; }
  .combo-case { padding: 24px 20px; }
  .combo-quote { font-size: 18px; line-height: 1.4; }
  .combo-step { padding: 18px 16px; }
  .combo-prod { font-size: 1.05rem; }
  .combo-step p { font-size: .86rem; line-height: 1.65; }
  .cm-n { font-size: 22px; }
  .cm-l { font-size: 11.5px; }

  /* Contact page */
  .contact-layout { gap: 14px; }
  .contact-mail { padding: 18px 20px; }
  .cm-name { font-size: 1.05rem; }
  .cm-role { font-size: 11.5px; }
  .cm-mail { font-size: 12.5px; }

  /* Channel grid (lili page) */
  .ch-grid { gap: 12px; margin-top: 28px; }
  .ch-card { padding: 18px 18px 16px; }
  .ch-card h3 { font-size: 14px; }
  .ch-list li { font-size: 11.5px; }
  .ch-head { gap: 10px; padding-bottom: 10px; margin-bottom: 10px; }
  .ch-icon { width: 30px; height: 30px; font-size: 11px; }

  /* Flow steps (miaomiao / vivi) */
  .flow4, .flow5 { gap: 18px; margin-top: 32px; }
  .flow4-num { width: 36px; height: 36px; font-size: 15px; margin-bottom: 12px; }
  .flow4-name { font-size: 14.5px; margin-bottom: 6px; }
  .flow4-desc { font-size: 12px; }
}

/* ====== Language switcher + mobile nav (added for bilingual site) ====== */
.nav-right { display: flex; align-items: center; gap: 14px; }
.lang { position: relative; font-size: 12.5px; font-weight: 600; }
.lang-trigger { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: rgba(240,241,248,.62); padding: 6px 12px; cursor: pointer; font-family: inherit; font-size: inherit; font-weight: inherit; transition: .2s; }
.lang-trigger:hover { color: rgba(240,241,248,.92); border-color: rgba(255,255,255,.32); }
.lang-cur { min-width: 16px; text-align: center; }
.lang-caret { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -3px; transition: transform .2s; opacity: .8; }
.lang.open .lang-caret { transform: rotate(225deg); margin-top: 2px; }
.lang-menu {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 84px; padding: 6px;
  background: rgba(14,14,26,.94); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--glass-border); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 300;
}
.lang.open .lang-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.lang-menu button { background: none; border: none; color: rgba(240,241,248,.6); padding: 8px 12px; text-align: left; border-radius: 9px; cursor: pointer; font-family: inherit; font-size: inherit; font-weight: inherit; transition: background .15s, color .15s; white-space: nowrap; }
.lang-menu button:hover { background: rgba(255,255,255,.05); color: #fff; }
.lang-menu button.active { background: linear-gradient(135deg,#3b82f6,#7c3aed); color: #fff; }
.nav-toggle { display: none; background: none; border: 0; color: var(--text-primary); font-size: 22px; cursor: pointer; line-height: 1; }
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-links { display: none; position: fixed; top: 62px; left: 0; right: 0; flex-direction: column; gap: 16px; background: rgba(10,10,20,.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 20px 24px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav-links.open { display: flex; max-height: calc(100vh - 62px); overflow-y: auto; }
  .nav-right { display: none; }
  /* mobile: dropdowns expand inline under each trigger */
  .nav-menu {
    position: static; display: flex !important; opacity: 1; visibility: visible; pointer-events: auto;
    transform: none; min-width: 0; width: 100%; margin: 4px 0 2px; padding: 2px 0 4px 12px;
    background: none; border: none; border-left: 1px solid rgba(255,255,255,.12); border-radius: 0;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; gap: 0;
  }
  .nav-menu::before { display: none; }
  .nav-menu-item { padding: 8px 8px; gap: 10px; }
  .nav-menu-ic { width: 26px; height: 26px; border-radius: 7px; font-size: 12px; }
  .nav-menu-ic svg { width: 13px; height: 13px; }
  .nav-menu-desc { display: none; }
  .nav-menu-name { font-weight: 500; color: var(--text-secondary); }
  .nav-menu-all { text-align: left; border-top: none; padding: 8px 8px; }
  .nav-drop-trigger::after { display: none; }
}

/* English hero headline is smaller so it stays on two lines (EN words are longer than CJK) */
html[lang="en"] .hero h1 { font-size: clamp(34px, 4.6vw, 54px); }

/* ============================================================
   GENERIC SECONDARY-PAGE COMPONENTS (products / solutions / company pages)
   ============================================================ */
/* (page-hero / section-block base rules relocated above the RESPONSIVE section) */
.prose { max-width: 760px; margin: 0 auto; color: var(--text-secondary); font-size: 1.02rem; line-height: 1.85; }
.prose h2 { color: var(--text-primary); font-size: 1.5rem; font-weight: 800; margin: 36px 0 14px; }
.prose p { margin-bottom: 14px; }
.prose a { color: var(--blue-mid); text-decoration: none; }
.prose a:hover { text-decoration: underline; }
/* legal docs (privacy): tighter top, tight title→content gap + numbered sections */
.legal-hero { padding: 60px 0 16px; }
.legal-section { padding-top: 4px; }
.prose.legal { counter-reset: sec; }
.prose.legal > :first-child { margin-top: 0; }
.prose.legal h2 { counter-increment: sec; font-size: 1.3rem; margin-top: 34px; }
.prose.legal h2::before { content: counter(sec) ". "; color: var(--blue-mid); font-weight: 800; }

.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 44px; }
.feature { padding: 30px; }
.feature h3 { font-size: 1.22rem; font-weight: 800; margin-bottom: 10px; }
.feature p { color: var(--text-secondary); font-size: .97rem; line-height: 1.7; }

.spec-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }
.spec { padding: 11px 22px; border: 1px solid var(--glass-border); border-radius: 999px; background: var(--glass-bg); color: var(--text-secondary); font-size: 14px; font-weight: 500; }

.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.info-card { padding: 32px; }
.info-card h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 12px; }
.info-card p { color: var(--text-secondary); font-size: .97rem; line-height: 1.7; margin-bottom: 14px; }

.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.case-card { padding: 32px; display: flex; flex-direction: column; align-items: flex-start; }
.case-metric { font-size: 2.2rem; font-weight: 900; letter-spacing: -.03em; margin-bottom: 12px; }
.case-card .case-outcome { font-weight: 700; font-size: 1.05rem; margin-bottom: 8px; color: var(--text-primary); }
.case-card .case-context { color: var(--text-muted); font-size: .9rem; }

.job-list { max-width: 760px; margin: 36px auto 0; }
.job { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 26px; margin-bottom: 12px; }
.job-title { font-weight: 700; font-size: 1.05rem; }
.job-meta { color: var(--text-muted); font-size: .9rem; margin-top: 4px; }

.visit-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 600; color: var(--blue-mid); text-decoration: none; transition: gap .2s; }
.visit-link:hover { gap: 12px; }

.lead-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.lead-form input { flex: 1; min-width: 200px; background: rgba(255,255,255,.05); border: 1px solid var(--glass-border); border-radius: 999px; padding: 12px 18px; color: var(--text-primary); font-size: 15px; font-family: inherit; }
.lead-form input:focus { outline: none; border-color: var(--blue-light); }
.toast { position: fixed; bottom: 96px; right: 26px; z-index: 90; background: var(--console-bg); border: 1px solid var(--glass-border); color: var(--text-primary); padding: 14px 20px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5); opacity: 0; transform: translateY(10px); transition: .4s var(--ease, cubic-bezier(.16,1,.3,1)); pointer-events: none; }
.toast.show { opacity: 1; transform: none; }

@media (max-width: 820px) {
  .bento-grid, .feature-grid, .info-grid, .case-grid { grid-template-columns: 1fr; }
  .job { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   PRODUCTS PAGE — hero role pills + alternating showcase bands
   ============================================================ */
.product-roles { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px; }
.product-role {
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px; border-radius:var(--radius-pill);
  font-size:13.5px; font-weight:600;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--text-secondary);
}
.product-role .pr-emoji { font-size:15px; line-height:1; }
.product-role.pr-purple { border-color:rgba(168,85,247,.4); }
.product-role.pr-blue   { border-color:rgba(59,130,246,.4); }
.product-role.pr-orange { border-color:rgba(251,146,60,.4); }

/* Product overview cards — clickable, compact header, rich feature list */
a.bento-tile { text-decoration:none; color:inherit; display:flex; flex-direction:column; cursor:pointer; }

.pc-head { display:flex; align-items:center; gap:13px; margin-bottom:16px; }
.pc-icon { width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; }
.pc-head-text { display:flex; flex-direction:column; gap:4px; min-width:0; }
.pc-role { font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; line-height:1; }
.pc-role.r-purple { color:#c084fc; }
.pc-role.r-blue   { color:#60a5fa; }
.pc-role.r-orange { color:#fdba74; }
.pc-name { font-size:21px; font-weight:800; letter-spacing:-.01em; line-height:1.1; color:var(--text-primary); }
.pc-desc { font-size:13.5px; color:var(--text-secondary); line-height:1.7; margin-bottom:18px; }
.pc-feats { display:flex; flex-direction:column; gap:11px; margin-bottom:22px; }
.pc-feat { display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--text-secondary); line-height:1.5; }
.pc-check { flex-shrink:0; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; margin-top:1px; }
.pc-check-purple { background:rgba(168,85,247,.16); color:#c084fc; }
.pc-check-blue   { background:rgba(59,130,246,.16); color:#60a5fa; }
.pc-check-orange { background:rgba(251,146,60,.16); color:#fdba74; }
.pc-link { display:inline-flex; align-items:center; gap:5px; font-size:13.5px; font-weight:700; margin-top:auto; transition:gap .2s; }
.pc-link:hover { gap:10px; }

/* Overseas social-platform chips (Miaomiao console) */
.plat-yt { background:rgba(239,68,68,.16);  color:#fca5a5; }   /* YouTube */
.plat-fb { background:rgba(59,130,246,.16); color:#93c5fd; }   /* Facebook */
.plat-x  { background:rgba(255,255,255,.10); color:#e8eaf2; }  /* X */
.plat-tt { background:rgba(251,146,60,.16); color:#fdba74; }   /* TikTok */

/* Products first screen = hero + cards together, balanced (centered) within ~100vh */
.products-top {
  min-height: calc(100vh - 62px);
  min-height: calc(100dvh - 62px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 0;
}
.products-top .page-hero { padding: 0 0 56px; }
.products-top .bento-grid { margin-top: 0; }

/* ============================================================
   LILI PRODUCT PAGE — hero spacing, channels grid, copilot panel
   ============================================================ */
/* Hero: more air between stacked blocks (was too crowded) */
.lili-hero .page-eyebrow { margin-bottom: 31px; background: none; border: none; padding: 0; }
.lili-hero h1 { margin-bottom: 38px; }
.lili-hero .page-sub { margin-bottom: 8px; }
.lili-hero .spec-row { margin-top: 62px; }
.lili-hero .hero-buttons { margin-top: 55px; margin-bottom: 0; }

/* Channels grid (全渠道 — 5 category cards + summary) */
.ch-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px; }
.ch-card { padding:24px 24px 22px; position:relative; overflow:hidden; display:flex; flex-direction:column; }
.ch-card::before { content:''; position:absolute; left:0; right:0; top:0; height:3px; }
.ch-card.cc-blue::before   { background:linear-gradient(90deg,#3b82f6,rgba(59,130,246,0)); }
.ch-card.cc-purple::before { background:linear-gradient(90deg,#a855f7,rgba(168,85,247,0)); }
.ch-card.cc-orange::before { background:linear-gradient(90deg,#fb923c,rgba(251,146,60,0)); }
.ch-head { display:flex; align-items:center; gap:12px; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--glass-border); }
.ch-icon { width:38px; height:38px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; letter-spacing:.02em; color:#fff; }
.ch-icon.cc-blue   { background:linear-gradient(135deg,#3b82f6,#2563eb); }
.ch-icon.cc-purple { background:linear-gradient(135deg,#a855f7,#7c3aed); }
.ch-icon.cc-orange { background:linear-gradient(135deg,#fb923c,#f97316); }
.ch-tag { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:3px; }
.ch-card h3 { font-size:15.5px; font-weight:700; letter-spacing:-.01em; }
.ch-list { list-style:none; display:flex; flex-direction:column; gap:8px; }
.ch-list li { font-size:13px; color:var(--text-secondary); padding-left:15px; position:relative; line-height:1.4; }
.ch-list li::before { content:''; position:absolute; left:0; top:7px; width:5px; height:5px; border-radius:50%; background:var(--blue-light); }
.ch-card.summary { background:rgba(59,130,246,.06); border-color:rgba(59,130,246,.22); justify-content:flex-start; align-items:flex-start; }
.ch-sum-num { font-size:48px; font-weight:900; line-height:.9; color:#3b82f6; letter-spacing:-.04em; }
.ch-sum-num small { font-size:24px; color:#60a5fa; }
.ch-sum-l { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#60a5fa; font-weight:700; margin:6px 0 16px; }
.ch-sum-pt { font-size:13px; color:var(--text-secondary); line-height:1.55; margin-bottom:9px; }
.ch-sum-pt b { color:var(--text-primary); font-weight:700; }

/* Copilot panel (坐席工作台 visual) */
.cp-handoff { background:rgba(251,146,60,.08); border:1px solid rgba(251,146,60,.22); border-left:3px solid #fb923c; border-radius:10px; padding:12px 14px; }
.cp-handoff-lab { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fdba74; margin-bottom:7px; }
.cp-handoff-row { font-size:12px; color:var(--text-secondary); line-height:1.7; }
.cp-handoff-row b { color:var(--text-primary); font-weight:700; }
.cp-sugg { background:rgba(255,255,255,.04); border:1px solid var(--glass-border); border-radius:10px; padding:11px 13px; }
.cp-sugg-text { font-size:12px; color:var(--text-primary); line-height:1.5; margin-bottom:8px; }
.cp-sugg-text::before { content:'✦ '; color:#a855f7; }
.cp-sugg-foot { display:flex; justify-content:space-between; align-items:center; }
.cp-conf { font-size:10.5px; color:var(--text-muted); }
.cp-conf b { color:#60a5fa; font-weight:700; }
.cp-adopt { font-size:10px; font-weight:700; color:#86efac; background:rgba(134,239,172,.12); border:1px solid rgba(134,239,172,.24); padding:3px 10px; border-radius:99px; }

@media (max-width: 820px) {
  .ch-grid { grid-template-columns:1fr; }
}

/* Lili hero = its own first screen (~100vh) */
.lili-firstscreen { min-height: calc(100vh - 62px); min-height: calc(100dvh - 62px); display:flex; flex-direction:column; justify-content:center; }
.lili-firstscreen .page-hero { padding:0; }

/* Phone mockup (WeCom cloud-phone) */
.phone { position:relative; width:300px; max-width:100%; margin:0 auto; }
.phone-body { background:#0b0f1a; border-radius:40px; padding:9px; box-shadow:0 32px 70px -22px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.07); position:relative; }
.phone-notch { position:absolute; top:9px; left:50%; transform:translateX(-50%); width:120px; height:22px; background:#0b0f1a; border-radius:0 0 14px 14px; z-index:4; }
.phone-screen { background:#ededed; border-radius:32px; overflow:hidden; min-height:510px; display:flex; flex-direction:column; }
.ph-status { display:flex; justify-content:space-between; padding:11px 20px 5px; font-size:11px; font-weight:700; color:#0b0f1a; }
.ph-bar { background:#f7f7f7; border-bottom:1px solid #e5e5e5; padding:11px 12px; text-align:center; position:relative; font-size:14px; font-weight:700; color:#0b0f1a; }
.ph-bar small { color:#8a91a2; font-weight:500; font-size:10.5px; margin-left:5px; }
.ph-bar::before { content:'‹'; position:absolute; left:15px; top:5px; font-size:22px; color:#5a6173; font-weight:400; }
.ph-msgs { flex:1; padding:15px 12px; display:flex; flex-direction:column; gap:13px; background:#ededed; }
.ph-msg { display:flex; gap:8px; align-items:flex-start; }
.ph-msg.out { flex-direction:row-reverse; }
.ph-av { width:30px; height:30px; border-radius:5px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:700; }
.ph-msg.in .ph-av { background:#5a6173; }
.ph-msg.out .ph-av { background:#07c160; }
.ph-bubble { max-width:172px; padding:9px 12px; border-radius:6px; font-size:13px; line-height:1.5; color:#0b0f1a; background:#fff; }
.ph-msg.out .ph-bubble { background:#95ec69; }
.ph-col { display:flex; flex-direction:column; gap:3px; }
.ph-name { font-size:10px; color:#8a91a2; font-weight:600; margin-left:2px; }
.ph-quote { margin-top:6px; padding:5px 8px; background:rgba(0,0,0,.06); border-radius:4px; font-size:10.5px; color:rgba(11,15,26,.5); line-height:1.45; }
/* phone input bar with auto-typing animation */
.ph-input { display:flex; align-items:center; gap:8px; padding:9px 12px; background:#f7f7f7; border-top:1px solid #e5e5e5; }
.ph-input-box { flex:1; background:#fff; border-radius:7px; padding:8px 11px; min-height:32px; display:flex; align-items:center; overflow:hidden; }
.ph-typing { display:inline-block; overflow:hidden; white-space:nowrap; max-width:0; border-right:1.5px solid #07c160; font-size:13px; color:#0b0f1a; line-height:1.3; animation: phType 5.5s steps(24) infinite, phCaret .7s step-end infinite; }
.ph-send-btn { width:30px; height:30px; border-radius:50%; background:#07c160; color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.ph-send-btn.go { animation: phSendBtn 5.5s ease-in-out infinite; }
/* the AI-typed reply that gets "sent" into the chat */
.ph-msg-send { animation: phSend 5.5s ease-in-out infinite; }
@keyframes phType { 0%{max-width:0} 45%{max-width:210px} 52%{max-width:210px} 55%{max-width:0} 100%{max-width:0} }
@keyframes phCaret { 50%{border-color:transparent} }
@keyframes phSend { 0%,52%{opacity:0; transform:translateY(12px) scale(.95)} 58%{opacity:1; transform:translateY(0) scale(1)} 93%{opacity:1; transform:translateY(0) scale(1)} 100%{opacity:0; transform:translateY(12px) scale(.95)} }
@keyframes phSendBtn { 0%,53%{transform:scale(1)} 56%{transform:scale(1.28)} 60%,100%{transform:scale(1)} }
@media (prefers-reduced-motion: reduce) { .ph-typing { animation:none; max-width:none; border-right:none; } .ph-msg-send { animation:none; opacity:1; transform:none; } }
.ph-badge { position:absolute; top:72px; right:-12px; background:linear-gradient(135deg,#3b82f6,#2563eb); color:#fff; padding:6px 13px; border-radius:99px; font-size:11px; font-weight:700; box-shadow:0 10px 24px -6px rgba(59,130,246,.7); display:flex; align-items:center; gap:6px; z-index:5; }
.ph-badge::before { content:''; width:6px; height:6px; border-radius:50%; background:#fff; animation:dotBlink 1.4s ease-in-out infinite; }

/* Copilot panel (agent workspace) — product-UI style */
.cp-panel { width:100%; max-width:420px; background:var(--console-bg); border:1px solid rgba(168,85,247,.22); border-radius:18px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 80px rgba(168,85,247,.12); }
.cp-tabs { display:flex; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); }
.cp-tab { flex:1; text-align:center; font-size:10px; font-weight:600; color:var(--text-muted); padding:11px 2px; position:relative; white-space:nowrap; }
.cp-tab.active { color:#c084fc; }
.cp-tab.active::after { content:''; position:absolute; bottom:-1px; left:24%; right:24%; height:2px; background:#a855f7; border-radius:1px; }
.cp-bar { display:flex; align-items:center; gap:9px; padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.07); }
.cp-bar-ic { width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,#a855f7,#6366f1); display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; box-shadow:0 4px 10px -2px rgba(168,85,247,.5); flex-shrink:0; }
.cp-bar-t { font-size:13px; font-weight:700; color:var(--text-primary); flex:1; }
.cp-bar-tg { font-size:10.5px; color:var(--text-muted); display:flex; align-items:center; gap:7px; }
.cp-bar-tg::after { content:''; width:26px; height:14px; border-radius:99px; background:#a855f7; box-shadow:inset 0 0 0 2px rgba(255,255,255,.18); }
.cp-body { padding:14px 16px; display:flex; flex-direction:column; gap:11px; }
.cp-btns { display:flex; gap:7px; }
.cp-btn-ok { font-size:10px; font-weight:700; color:#fff; background:#10b981; padding:4px 12px; border-radius:7px; }
.cp-btn-no { font-size:10px; font-weight:700; color:#fca5a5; background:transparent; border:1px solid rgba(244,63,94,.3); padding:4px 11px; border-radius:7px; }
/* richer copilot panel: live dot, recommended-highlight, confidence bar */
.cp-bar-t { flex:0 1 auto; }
.cp-bar-tg { margin-left:auto; }
.cp-bar-live { width:7px; height:7px; border-radius:50%; background:#86efac; box-shadow:0 0 8px #86efac; animation:dotBlink 1.4s ease-in-out infinite; flex-shrink:0; }
.cp-sugg-top { border-color:rgba(168,85,247,.42); background:rgba(168,85,247,.07); box-shadow:0 0 26px rgba(168,85,247,.13); }
.cp-conf-row { display:flex; align-items:center; gap:8px; margin:10px 0; }
.cp-conf-l { font-size:10px; color:var(--text-muted); white-space:nowrap; }
.cp-conf-bar { flex:1; height:5px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden; }
.cp-conf-bar > span { display:block; height:100%; background:linear-gradient(90deg,#a855f7,#6366f1); border-radius:3px; }
.cp-conf-v { font-size:11px; font-weight:800; color:#c084fc; }
/* match real product: generate action, AI-generated chip, copy + adopt/ignore row */
.cp-bar-gen { font-size:10.5px; color:var(--text-muted); font-weight:600; white-space:nowrap; }
.cp-chip { align-self:flex-start; font-size:10px; font-weight:700; letter-spacing:.04em; color:#c084fc; background:rgba(168,85,247,.14); border:1px solid rgba(168,85,247,.28); padding:3px 9px; border-radius:6px; margin-bottom:1px; }
.cp-sugg-foot { margin-top:11px; }
.cp-acts { display:flex; align-items:center; gap:6px; }
.cp-copy { width:22px; height:22px; border-radius:5px; border:1px solid var(--glass-border); display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--text-muted); }
.cp-btn-ok { color:var(--text-secondary); background:transparent; border:1px solid rgba(255,255,255,.2); }

/* ============================================================
   MIAOMIAO PAGE — connected 4-step, comment-intent radar, funnel
   ============================================================ */
/* connected stepper (number nodes on a line, not boxed cards) */
.flow4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:58px; position:relative; }
.flow4::before { content:''; position:absolute; top:21px; left:12.5%; right:12.5%; height:2px; background:linear-gradient(90deg, rgba(168,85,247,.18), rgba(168,85,247,.55)); z-index:0; }
.flow4-step { display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; z-index:1; }
.flow4-num { width:44px; height:44px; border-radius:50%; background:rgba(13,14,24,.96); border:1px solid rgba(168,85,247,.45); box-shadow:0 0 22px rgba(168,85,247,.3); color:#c084fc; font-weight:800; font-size:18px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.flow4-name { font-size:17px; font-weight:800; letter-spacing:-.01em; margin-bottom:9px; }
.flow4-desc { font-size:13px; color:var(--text-secondary); line-height:1.6; max-width:210px; }

/* comment-intent radar (band-1 visual — distinct from the homepage console) */
.mlead-head { font-size:11.5px; color:var(--text-muted); padding-bottom:2px; }
.mlead-list { display:flex; flex-direction:column; gap:9px; }
.mlead-row { display:flex; gap:10px; align-items:flex-start; background:var(--console-inner); border:1px solid var(--console-inner-b); border-radius:10px; padding:10px 11px; }
.mlead-av { width:26px; height:26px; border-radius:7px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:700; }
.mlead-main { flex:1; min-width:0; }
.mlead-user { font-size:11px; font-weight:700; color:var(--text-primary); margin-bottom:3px; }
.mlead-meta { font-weight:400; color:var(--text-dim); font-size:10px; margin-left:5px; }
.mlead-text { font-size:12px; color:var(--text-secondary); line-height:1.45; margin-bottom:6px; }
.mlead-tag { display:inline-block; font-size:9.5px; font-weight:600; color:#c084fc; background:rgba(168,85,247,.12); border:1px solid rgba(168,85,247,.25); padding:1px 8px; border-radius:99px; }
.mlead-intent { flex-shrink:0; font-size:9.5px; font-weight:700; padding:2px 8px; border-radius:99px; align-self:center; }
.mlead-intent.hi { background:rgba(34,197,94,.14); color:#86efac; border:1px solid rgba(34,197,94,.22); }
.mlead-intent.mid { background:rgba(251,191,36,.14); color:#fde68a; border:1px solid rgba(251,191,36,.22); }
.mlead-reply { margin-top:14px; background:rgba(168,85,247,.08); border:1px solid rgba(168,85,247,.25); border-radius:11px; padding:11px 12px; }
.mlead-reply-h { display:flex; align-items:center; gap:7px; margin-bottom:7px; }
.mlead-reply-ic { color:#c084fc; font-size:12px; }
.mlead-reply-tt { font-size:11px; color:var(--text-secondary); flex:1; }
.mlead-reply-tt b { color:#d8b4fe; }
.mlead-reply-badge { font-size:9px; font-weight:700; color:#fdba74; background:rgba(251,146,60,.14); border:1px solid rgba(251,146,60,.28); padding:2px 7px; border-radius:99px; }
.mlead-reply-msg { font-size:11.5px; color:#d8b4fe; line-height:1.55; margin-bottom:9px; }
.mlead-reply-foot { display:flex; justify-content:space-between; align-items:center; }
.mlead-reply-note { font-size:9.5px; color:var(--text-dim); }
.mlead-send { font-size:10px; font-weight:700; color:#fff; background:linear-gradient(135deg,#a855f7,#7c3aed); padding:3px 13px; border-radius:7px; }

/* acquisition funnel — a distinct colour per stage (purple → violet → blue → green) */
.funnel { display:flex; flex-direction:column; gap:11px; width:100%; max-width:400px; }
.funnel-stage { width:0; overflow:hidden; height:62px; border-radius:12px; padding:0 20px; display:flex; flex-direction:column; justify-content:center; border:1px solid; box-shadow:0 8px 24px rgba(0,0,0,.3); transition:width 1s cubic-bezier(.16,1,.3,1); }
.funnel-num { font-size:23px; font-weight:800; line-height:1; white-space:nowrap; }
.funnel-label { font-size:11.5px; color:var(--text-muted); margin-top:4px; white-space:nowrap; }
/* one-time staggered grow when the funnel band scrolls into view */
.pb-visual.visible .funnel-stage { width:var(--fw); }
.pb-visual.visible .funnel-stage.fc2 { transition-delay:.12s; }
.pb-visual.visible .funnel-stage.fc3 { transition-delay:.24s; }
.pb-visual.visible .funnel-stage.fc4 { transition-delay:.36s; }
@media (prefers-reduced-motion: reduce) { .funnel-stage { transition:none; width:var(--fw); } }
.funnel-stage.fc1 { background:linear-gradient(135deg, rgba(168,85,247,.32), rgba(168,85,247,.08)); border-color:rgba(168,85,247,.42); }
.funnel-stage.fc1 .funnel-num { color:#d8b4fe; }
.funnel-stage.fc2 { background:linear-gradient(135deg, rgba(139,92,246,.3), rgba(99,102,241,.08)); border-color:rgba(139,92,246,.42); }
.funnel-stage.fc2 .funnel-num { color:#c4b5fd; }
.funnel-stage.fc3 { background:linear-gradient(135deg, rgba(59,130,246,.3), rgba(59,130,246,.08)); border-color:rgba(59,130,246,.42); }
.funnel-stage.fc3 .funnel-num { color:#93c5fd; }
.funnel-stage.fc4 { background:linear-gradient(135deg, rgba(34,197,94,.3), rgba(34,197,94,.08)); border-color:rgba(34,197,94,.42); }
.funnel-stage.fc4 .funnel-num { color:#86efac; }

@media (max-width: 820px) {
  .flow4 { grid-template-columns:1fr 1fr; }
  .flow4::before { display:none; }
}

/* Alternating product showcase bands */
.product-band {
  display:grid; grid-template-columns:1.02fr .98fr; gap:0 60px;
  /* Rows 2-7 hold the text items (row-gap 0 — vertical rhythm comes from the
     items' own margins); the 1fr rows at both ends split the extra height
     when the visual is taller than the text column, so the text column stays
     compact AND vertically centered against the visual. */
  grid-template-rows:1fr repeat(6,auto) 1fr;
  align-items:start; padding:72px 0;
  border-top:1px solid rgba(255,255,255,.07);
}
.product-band:first-of-type { border-top:none; }
/* Desktop: .pb-text collapses (its children become direct grid items) so
   .pb-visual, although nested inside .pb-text, still occupies column 2 and
   spans all rows. */
.product-band .pb-text { display:contents; }
.product-band .pb-text > .pb-role,
.product-band .pb-text > h2,
.product-band .pb-text > .pb-lead,
.product-band .pb-text > .pb-points,
.product-band .pb-text > .pb-best,
.product-band .pb-text > .pb-actions { display:block; grid-column:1; }
/* Explicit rows (2-7, between the two 1fr absorbers) — inert on mobile where
   .pb-text is a normal block. */
.product-band .pb-text > .pb-role    { grid-row:2; justify-self:start; }
.product-band .pb-text > h2          { grid-row:3; }
.product-band .pb-text > .pb-lead    { grid-row:4; }
.product-band .pb-text > .pb-points  { grid-row:5; }
.product-band .pb-text > .pb-best    { grid-row:6; }
.product-band .pb-text > .pb-actions { grid-row:7; }
.product-band .pb-text > .pb-visual,
.product-band > .pb-visual { display:block; grid-column:2; grid-row:1 / -1; align-self:center; max-width:408px; justify-self:center; width:100%; }
/* .reverse alternates the band: text in column 2, visual in column 1.
   (Covers both DOM variants: .pb-visual nested in .pb-text, or its sibling.) */
.product-band.reverse .pb-text > .pb-role,
.product-band.reverse .pb-text > h2,
.product-band.reverse .pb-text > .pb-lead,
.product-band.reverse .pb-text > .pb-points,
.product-band.reverse .pb-text > .pb-best,
.product-band.reverse .pb-text > .pb-actions { grid-column:2; }
.product-band.reverse .pb-text > .pb-visual,
.product-band.reverse > .pb-visual { grid-column:1; }

.pb-role {
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 14px; border-radius:var(--radius-pill); margin-bottom:18px;
}
.pb-role .pb-step { opacity:.55; font-weight:800; }
.pb-role.role-purple { color:#c084fc; background:rgba(168,85,247,.12); border:1px solid rgba(168,85,247,.3); }
.pb-role.role-blue   { color:#60a5fa; background:rgba(59,130,246,.12);  border:1px solid rgba(59,130,246,.3); }
.pb-role.role-orange { color:#fdba74; background:rgba(251,146,60,.12);  border:1px solid rgba(251,146,60,.3); }

.product-band h2 {
  font-size:clamp(25px,3vw,34px); font-weight:800;
  line-height:1.2; letter-spacing:-.4px; margin-bottom:18px;
}
/* CJK band titles are denser — slightly smaller so they hold one line */
html[lang="zh"] .product-band h2 { font-size:clamp(23px,2.6vw,31px); }
.pb-lead { font-size:15.5px; color:var(--text-secondary); line-height:1.85; margin-bottom:24px; }

.pb-points { display:flex; flex-direction:column; gap:13px; margin-bottom:24px; }
.pb-point { display:flex; align-items:flex-start; gap:12px; font-size:14.5px; color:var(--text-secondary); line-height:1.6; text-wrap:balance; }
.pb-dot {
  flex-shrink:0; width:19px; height:19px; border-radius:50%; margin-top:1px;
  display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800;
}
.pb-dot.d-purple { background:rgba(168,85,247,.16); color:#c084fc; border:1px solid rgba(168,85,247,.34); }
.pb-dot.d-blue   { background:rgba(59,130,246,.16);  color:#60a5fa; border:1px solid rgba(59,130,246,.34); }
.pb-dot.d-orange { background:rgba(251,146,60,.16);  color:#fdba74; border:1px solid rgba(251,146,60,.34); }

.pb-best {
  font-size:13.5px; color:var(--text-muted); line-height:1.7;
  padding:14px 18px; border-radius:12px;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08);
  margin-bottom:24px;
}

.pb-actions { display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.pb-link { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700; text-decoration:none; transition:gap .2s; }
.pb-link:hover { gap:11px; }
.pb-link.l-purple { color:#a855f7; }
.pb-link.l-blue   { color:#3b82f6; }
.pb-link.l-orange { color:#fb923c; }

.pb-visual { display:flex; align-items:center; justify-content:center; }
.pb-visual .console-shell { width:100%; max-width:408px; }

@media (max-width: 900px) {
  .product-band { grid-template-columns:1fr; grid-template-rows:none; gap:24px; padding:48px 0; }
  /* On mobile .pb-text is restored to a normal block so its children stack
     naturally: role → h2 → lead → points → visual → best → actions. */
  .product-band .pb-text { display:block; }
  .product-band .pb-text > .pb-role,
  .product-band .pb-text > h2,
  .product-band .pb-text > .pb-lead,
  .product-band .pb-text > .pb-points,
  .product-band .pb-text > .pb-best,
  .product-band .pb-text > .pb-actions { grid-column:auto; }
  .product-band .pb-text > .pb-visual,
  .product-band > .pb-visual { grid-column:auto; grid-row:auto; justify-self:stretch; max-width:380px; }
  .pb-visual .console-shell { max-width:380px; }
}

/* ============================================================
   VIVI PAGE — 5-step loop, AI lecture player, AI coaching, 9-dim radar
   ============================================================ */
/* orange 5-step variant of the connected stepper (reuses .flow4-*) */
.flow5 { grid-template-columns:repeat(5,1fr); }
.flow5::before { left:10%; right:10%; }
.flow-orange::before { background:linear-gradient(90deg, rgba(251,146,60,.18), rgba(251,146,60,.6)); }
.flow-orange .flow4-num { border-color:rgba(251,146,60,.45); box-shadow:0 0 22px rgba(251,146,60,.3); color:#fdba74; }
@media (max-width: 820px) { .flow5 { grid-template-columns:1fr 1fr; } }

/* AI digital-human lecture player */
.vlec { border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.09); background:#0c0d16; }
.vlec-screen { position:relative; height:162px; padding:13px; display:flex; gap:11px;
  background: radial-gradient(135% 95% at 14% 100%, rgba(251,146,60,.16), transparent 55%),
              linear-gradient(135deg, rgba(99,102,241,.16) 0%, rgba(12,13,22,.55) 100%); }
.vlec-presenter { width:58px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
.vlec-face { width:50px; height:50px; border-radius:50%; background:linear-gradient(160deg,#fcc486,#f97316); display:flex; align-items:center; justify-content:center; font-size:27px; box-shadow:0 6px 20px rgba(251,146,60,.5); }
.vlec-live { margin-top:8px; font-size:8px; font-weight:800; letter-spacing:.05em; color:#fff; background:#ef4444; padding:1px 7px; border-radius:99px; display:flex; align-items:center; gap:4px; }
.vlec-live::before { content:''; width:4px; height:4px; border-radius:50%; background:#fff; animation:dotBlink 1.4s ease-in-out infinite; }
.vlec-slide { flex:1; min-width:0; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
.vlec-slide-t { font-size:11.5px; font-weight:700; color:var(--text-primary); }
.vlec-bullet { display:flex; align-items:center; gap:8px; font-size:9.5px; color:var(--text-secondary); line-height:1.3; }
.vlec-bullet::before { content:''; width:5px; height:5px; border-radius:50%; background:#fb923c; flex-shrink:0; }
.vlec-line { height:5px; border-radius:3px; background:rgba(255,255,255,.09); }
.vlec-line.s { width:62%; }
.vlec-tag { position:absolute; top:10px; right:11px; background:rgba(251,146,60,.92); color:#fff; font-size:9px; font-weight:700; padding:2px 9px; border-radius:99px; box-shadow:0 4px 12px rgba(251,146,60,.4); }
.vlec-cap { position:absolute; left:13px; right:13px; bottom:11px; background:rgba(8,9,16,.85); border:1px solid rgba(255,255,255,.09); border-radius:7px; padding:6px 11px; font-size:9.5px; color:#fde7cf; line-height:1.5; }
.vlec-cap b { color:#fb923c; font-weight:700; }
/* in-lecture pop quiz */
.vlec-quiz { background:var(--console-inner); border:1px solid var(--console-inner-b); border-radius:10px; padding:11px 12px; }
.vlec-quiz-h { display:flex; align-items:center; gap:7px; margin-bottom:8px; }
.vlec-quiz-ic { font-size:12px; }
.vlec-quiz-tt { font-size:11px; font-weight:700; color:var(--text-primary); flex:1; }
.vlec-quiz-badge { font-size:8.5px; font-weight:700; color:#fdba74; background:rgba(251,146,60,.14); border:1px solid rgba(251,146,60,.28); padding:1px 8px; border-radius:99px; }
.vlec-q { font-size:11px; color:var(--text-secondary); line-height:1.5; margin-bottom:9px; }
.vlec-opts { display:flex; flex-direction:column; gap:6px; }
.vlec-opt { display:flex; align-items:center; gap:8px; font-size:10.5px; color:var(--text-secondary); padding:6px 9px; border-radius:7px; border:1px solid var(--console-inner-b); background:rgba(255,255,255,.02); }
.vlec-key { width:16px; height:16px; border-radius:4px; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:var(--text-muted); flex-shrink:0; }
.vlec-opt.correct { border-color:rgba(34,197,94,.4); background:rgba(34,197,94,.1); color:#bbf7d0; }
.vlec-opt.correct .vlec-key { background:#22c55e; color:#fff; }
.vlec-opt.correct::after { content:'✓'; margin-left:auto; color:#86efac; font-weight:800; font-size:11px; }

/* AI coaching role-play panel */
.coach-head { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.coach-role { font-size:10px; font-weight:700; color:#fdba74; background:rgba(251,146,60,.14); border:1px solid rgba(251,146,60,.3); padding:3px 10px; border-radius:99px; }
.coach-lv { font-size:9.5px; font-weight:700; color:var(--text-muted); }
.coach-ms { margin-left:auto; font-size:9px; font-weight:700; color:#86efac; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.25); padding:2px 8px; border-radius:99px; }
.coach-chat { display:flex; flex-direction:column; gap:8px; }
.coach-msg { max-width:90%; font-size:11px; line-height:1.5; padding:8px 11px; border-radius:11px; }
.coach-msg.ai { align-self:flex-start; background:rgba(255,255,255,.05); border:1px solid var(--console-inner-b); color:var(--text-secondary); border-bottom-left-radius:3px; }
.coach-msg.me { align-self:flex-end; background:rgba(251,146,60,.14); border:1px solid rgba(251,146,60,.28); color:#fde7cf; border-bottom-right-radius:3px; }
.coach-spk { display:block; font-size:8px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; opacity:.6; margin-bottom:3px; }
.coach-foot { display:flex; align-items:center; gap:12px; margin-top:2px; padding-top:12px; border-top:1px solid rgba(255,255,255,.07); }
.coach-overall { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.coach-overall b { font-size:23px; font-weight:800; color:#fb923c; line-height:1; }
.coach-overall span { font-size:8.5px; color:var(--text-muted); margin-top:3px; }
.coach-tip { flex:1; font-size:10px; color:var(--text-secondary); line-height:1.5; }
.coach-tip b { color:#fdba74; font-weight:700; }
.coach-replay { font-size:10px; font-weight:700; color:#fdba74; background:rgba(251,146,60,.12); border:1px solid rgba(251,146,60,.28); padding:5px 12px; border-radius:7px; flex-shrink:0; white-space:nowrap; }

/* 9-dimension ability radar (SVG) */
.radar9 { width:100%; max-width:380px; }
.radar9 svg { width:100%; height:auto; overflow:visible; display:block; }
.r9-ring { fill:none; stroke:rgba(255,255,255,.08); stroke-width:1; }
.r9-spoke { stroke:rgba(255,255,255,.07); stroke-width:1; }
.r9-bench { fill:rgba(148,163,184,.08); stroke:rgba(148,163,184,.55); stroke-width:1.3; stroke-dasharray:4 3; }
.r9-you { fill:rgba(251,146,60,.2); stroke:#fb923c; stroke-width:2; stroke-linejoin:round; }
.r9-dot { fill:#fb923c; }
.r9-label { fill:var(--text-secondary); font-size:9px; font-weight:600; }
.radar9-legend { display:flex; gap:20px; justify-content:center; margin-top:14px; }
.r9-leg { display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--text-secondary); }
.r9-sw { width:15px; height:9px; border-radius:2px; flex-shrink:0; }
.r9-sw.you { background:#fb923c; }
.r9-sw.bench { background:transparent; border:1.3px dashed rgba(148,163,184,.75); }

/* ============================================================
   SOLUTIONS — industry pages: combo chips, pain grid, pain→fix map
   ============================================================ */
/* product-combo chips (hero + overview cards) — lead = filled, support = ghost */
.sol-stack { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:32px; }
.sol-chip { display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:99px; font-size:13px; font-weight:700; border:1px solid; line-height:1; }
.sol-chip .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.sol-chip.lead-purple { color:#d8b4fe; background:rgba(168,85,247,.15); border-color:rgba(168,85,247,.4); }
.sol-chip.lead-blue   { color:#93c5fd; background:rgba(59,130,246,.15); border-color:rgba(59,130,246,.4); }
.sol-chip.lead-orange { color:#fdba74; background:rgba(251,146,60,.15); border-color:rgba(251,146,60,.4); }
.sol-chip.lead-purple .dot { background:#a855f7; } .sol-chip.lead-blue .dot { background:#3b82f6; } .sol-chip.lead-orange .dot { background:#fb923c; }
.sol-chip.ghost { color:var(--text-muted); background:transparent; border-color:rgba(255,255,255,.13); }
.sol-chip.ghost .dot { background:var(--text-dim); }
.sol-chip.sm { padding:5px 11px; font-size:11.5px; }

/* "What you're up against" — pain cards (no products, pure problem) */
.pain-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
.pain-card { padding:26px 24px; border-radius:16px; background:rgba(255,255,255,.025); border:1px solid var(--glass-border); }
.pain-ic { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; background:rgba(244,63,94,.09); border:1px solid rgba(244,63,94,.2); margin-bottom:16px; }
.pain-card h3 { font-size:16.5px; font-weight:800; letter-spacing:-.01em; margin-bottom:9px; }
.pain-card p { font-size:13.5px; color:var(--text-secondary); line-height:1.65; }

/* "How Trainlytic solves it" — product → fix rows (the combo, mapped) */
.solve-list { display:flex; flex-direction:column; gap:14px; margin-top:48px; }
.solve-row { display:grid; grid-template-columns:128px 1fr; align-items:center; gap:22px; padding:20px 24px; border-radius:16px; background:rgba(255,255,255,.025); border:1px solid var(--glass-border); transition:border-color .25s, background .25s; }
.solve-row:hover { background:rgba(255,255,255,.04); }
.solve-prod { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:10px; font-size:14px; font-weight:800; border:1px solid; white-space:nowrap; justify-self:start; }
.solve-prod .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.solve-prod.prod-purple { color:#d8b4fe; background:rgba(168,85,247,.12); border-color:rgba(168,85,247,.34); } .solve-prod.prod-purple .dot { background:#a855f7; }
.solve-prod.prod-blue   { color:#93c5fd; background:rgba(59,130,246,.12);  border-color:rgba(59,130,246,.34); }  .solve-prod.prod-blue .dot { background:#3b82f6; }
.solve-prod.prod-orange { color:#fdba74; background:rgba(251,146,60,.12);  border-color:rgba(251,146,60,.34); }  .solve-prod.prod-orange .dot { background:#fb923c; }
.solve-row.r-purple { border-left:3px solid rgba(168,85,247,.5); } .solve-row.r-blue { border-left:3px solid rgba(59,130,246,.5); } .solve-row.r-orange { border-left:3px solid rgba(251,146,60,.5); }
.solve-txt { font-size:14.5px; color:var(--text-secondary); line-height:1.6; }
.solve-txt b { color:var(--text-primary); font-weight:700; }

@media (max-width:820px) {
  .pain-grid { grid-template-columns:1fr; }
  .solve-row { grid-template-columns:1fr; gap:13px; }
}

/* ============================================================
   SOLUTIONS OVERVIEW — 4 staggered, gently-floating pain columns
   (pains only — products/solutions live on the detail pages)
   ============================================================ */
.sol-cols { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:22px; align-items:start; }
.sol-col {
  display:flex; flex-direction:column; padding:26px 22px 22px;
  border-radius:18px; text-decoration:none; will-change:transform;
  transition:transform .3s, border-color .3s, box-shadow .3s;
  animation:solFloat 6s ease-in-out infinite;
}
.sol-col:nth-child(1){ margin-top:0;    animation-delay:0s;    }
.sol-col:nth-child(2){ margin-top:34px; animation-delay:-1.6s; }
.sol-col:nth-child(3){ margin-top:14px; animation-delay:-3.2s; }
.sol-col:nth-child(4){ margin-top:46px; animation-delay:-4.6s; }
@keyframes solFloat { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.sol-col:hover { animation-play-state:paused; transform:translateY(-7px); }
@media (prefers-reduced-motion: reduce){ .sol-col{ animation:none; } }

.sol-col-h { display:flex; align-items:baseline; gap:9px; margin-bottom:18px; }
.sol-col-n { font-size:12px; font-weight:800; letter-spacing:.04em; opacity:.45; }
.sol-col h3 { font-size:16px; font-weight:800; letter-spacing:-.01em; line-height:1.25; }
.sol-pains { list-style:none; display:flex; flex-direction:column; gap:11px; flex:1; margin:0 0 22px; padding:0; }
.sol-pains li { position:relative; padding-left:17px; font-size:13px; color:var(--text-secondary); line-height:1.45; }
.sol-pains li::before { content:''; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; }
.sol-col-link { font-size:13px; font-weight:700; display:inline-flex; align-items:center; gap:5px; margin-top:auto; transition:gap .2s; }
.sol-col:hover .sol-col-link { gap:10px; }
.sol-col.c-blue   { border-color:rgba(59,130,246,.22); }
.sol-col.c-purple { border-color:rgba(168,85,247,.22); }
.sol-col.c-orange { border-color:rgba(251,146,60,.22); }
.sol-col.c-blue   h3, .sol-col.c-blue   .sol-col-link, .sol-col.c-blue   .sol-col-n { color:#3b82f6; }
.sol-col.c-purple h3, .sol-col.c-purple .sol-col-link, .sol-col.c-purple .sol-col-n { color:#a855f7; }
.sol-col.c-orange h3, .sol-col.c-orange .sol-col-link, .sol-col.c-orange .sol-col-n { color:#fb923c; }
.sol-col.c-blue   .sol-pains li::before { background:#3b82f6; }
.sol-col.c-purple .sol-pains li::before { background:#a855f7; }
.sol-col.c-orange .sol-pains li::before { background:#fb923c; }
@media (max-width:860px){ .sol-cols{ grid-template-columns:1fr 1fr; gap:16px; } .sol-col{ margin-top:0 !important; } }
@media (max-width:520px){ .sol-cols{ grid-template-columns:1fr; } }

/* ============================================================
   SOLUTION DETAIL — lighter, less card-heavy treatment
   (pain list instead of a wall of boxes; centered solve rows)
   ============================================================ */
.pain-flow { max-width:880px; margin:42px auto 0; display:flex; flex-direction:column; }
.pain-flow-item { display:flex; gap:18px; align-items:flex-start; padding:22px 6px; border-bottom:1px solid rgba(255,255,255,.07); }
.pain-flow-item:first-child { padding-top:4px; }
.pain-flow-item:last-child { border-bottom:none; padding-bottom:0; }
.pain-flow-ic { width:42px; height:42px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:20px; background:rgba(244,63,94,.08); border:1px solid rgba(244,63,94,.2); }
.pain-flow-tx { flex:1; min-width:0; }
.pain-flow-tx h3 { font-size:16px; font-weight:800; letter-spacing:-.01em; margin-bottom:5px; }
.pain-flow-tx p { font-size:13.5px; color:var(--text-secondary); line-height:1.6; max-width:700px; }
/* constrain the solve rows so they don't stretch full-width and read sparse */
.solve-list { max-width:860px; margin-left:auto; margin-right:auto; }
.solve-prod { font-size:14.5px; padding:9px 15px; }
@media (max-width:560px){ .pain-flow-item{ padding:18px 2px; gap:13px; } }

/* ============================================================
   PAIN → SOLUTION MAP — pains (left) connected by lines to the
   product that solves them (right); many pains can map to one.
   ============================================================ */
.map { max-width:1000px; margin:46px auto 0; display:flex; flex-direction:column; gap:20px; }
.map-row { display:grid; grid-template-columns:minmax(0,1fr) 80px minmax(250px,350px); align-items:center; }
.map-pains { display:flex; flex-direction:column; gap:10px; }
.map-pain { padding:15px 17px; border-radius:12px; background:rgba(255,255,255,.025); border:1px solid var(--glass-border); border-left-width:3px; }
.map-pain-t { font-size:14.5px; font-weight:700; letter-spacing:-.01em; color:var(--text-primary); line-height:1.35; margin-bottom:5px; }
.map-pain-d { font-size:12.5px; color:var(--text-muted); line-height:1.55; }
.map-row.m-blue   .map-pain { border-left-color:rgba(59,130,246,.55); }
.map-row.m-purple .map-pain { border-left-color:rgba(168,85,247,.55); }
.map-row.m-orange .map-pain { border-left-color:rgba(251,146,60,.55); }
/* connector: vertical line spans the pain group, horizontal points to the product, dot at the end */
.map-conn { align-self:stretch; position:relative; min-height:56px; }
.map-conn::before { content:''; position:absolute; left:14px; top:16px; bottom:16px; width:2px; border-radius:2px; opacity:.6; }
.map-conn::after { content:''; position:absolute; left:14px; right:10px; top:50%; transform:translateY(-50%); height:2px; opacity:.6; }
.map-dot { position:absolute; right:6px; top:50%; transform:translate(50%,-50%); width:10px; height:10px; border-radius:50%; }
.map-row.single .map-conn::before { display:none; }
.map-sol { border-radius:15px; padding:18px 20px; border:1px solid; }
.map-sol-h { display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:800; margin-bottom:9px; }
.map-sol-h .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.map-sol p { font-size:13px; color:var(--text-secondary); line-height:1.55; }
.map-sol p b { color:var(--text-primary); font-weight:700; }
.map-row.m-blue   .map-conn::before, .map-row.m-blue   .map-conn::after { background:#3b82f6; }
.map-row.m-purple .map-conn::before, .map-row.m-purple .map-conn::after { background:#a855f7; }
.map-row.m-orange .map-conn::before, .map-row.m-orange .map-conn::after { background:#fb923c; }
.map-row.m-blue   .map-dot { background:#3b82f6; box-shadow:0 0 10px rgba(59,130,246,.7); }
.map-row.m-purple .map-dot { background:#a855f7; box-shadow:0 0 10px rgba(168,85,247,.7); }
.map-row.m-orange .map-dot { background:#fb923c; box-shadow:0 0 10px rgba(251,146,60,.7); }
.map-row.m-blue   .map-sol { border-color:rgba(59,130,246,.3);  background:rgba(59,130,246,.06); }
.map-row.m-purple .map-sol { border-color:rgba(168,85,247,.3);  background:rgba(168,85,247,.06); }
.map-row.m-orange .map-sol { border-color:rgba(251,146,60,.3);  background:rgba(251,146,60,.06); }
.map-row.m-blue   .map-sol-h { color:#93c5fd; } .map-row.m-blue   .map-sol-h .dot { background:#3b82f6; }
.map-row.m-purple .map-sol-h { color:#d8b4fe; } .map-row.m-purple .map-sol-h .dot { background:#a855f7; }
.map-row.m-orange .map-sol-h { color:#fdba74; } .map-row.m-orange .map-sol-h .dot { background:#fb923c; }
@media (max-width:820px){
  .map-row { grid-template-columns:1fr; gap:11px; }
  .map-conn { display:none; }
  /* On mobile, separate each product (Lili / Miaomiao / Vivi) with a thin
     divider so the user can tell which product solves which pain block. */
  .map-row + .map-row { border-top: 1px solid rgba(255,255,255,.10); padding-top: 18px; margin-top: 4px; }
}

/* hero titles/subs: balance line lengths so nothing orphans (esp. CJK) */
.page-hero h1, .page-hero .page-sub { text-wrap: balance; }

/* ============================================================
   ABOUT — stats band + asymmetric mission split (less wall-of-text)
   ============================================================ */
.stat-band { display:flex; flex-wrap:wrap; justify-content:center; gap:22px 58px; max-width:920px; margin:40px auto 0; }
.stat { text-align:center; min-width:88px; }
.stat-num { font-size:clamp(34px,4.6vw,52px); font-weight:900; letter-spacing:-1.5px; line-height:1; background:linear-gradient(120deg,#a855f7,#3b82f6 55%,#fb923c); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat-label { font-size:13px; color:var(--text-muted); margin-top:9px; letter-spacing:.02em; }
.about-split { display:grid; grid-template-columns:minmax(0,0.8fr) minmax(0,1.25fr); gap:clamp(32px,5vw,72px); align-items:start; max-width:1040px; margin:0 auto; }
.about-split .as-head .page-eyebrow { display:block; margin-bottom:16px; }
.about-split .as-head h2 { font-size:clamp(26px,3.2vw,38px); font-weight:800; line-height:1.18; letter-spacing:-.5px; }
.about-split .as-body { color:var(--text-secondary); font-size:1.02rem; line-height:1.85; }
.about-split .as-body p { margin-bottom:16px; }
.about-split .as-body p:last-child { margin-bottom:0; }
@media (max-width:860px){ .about-split { grid-template-columns:1fr; gap:18px; } }

/* About — color-coded mission lead + product triptych (replaces stats/asym) */
.ab-mission { max-width:840px; margin:28px auto 0; }
.ab-lead { font-size:clamp(25px,3.3vw,40px); font-weight:800; line-height:1.4; letter-spacing:-.5px; text-align:center; margin-bottom:30px; }
.ab-lead .cm { color:#c084fc; } .ab-lead .cl { color:#60a5fa; } .ab-lead .cv { color:#fdba74; }
.ab-mission-body { max-width:680px; margin:0 auto; color:var(--text-secondary); font-size:1.03rem; line-height:1.85; }
.ab-mission-body p { margin-bottom:16px; }
.ab-mission-body p:last-child { margin-bottom:0; }
.ab-pcard { display:flex; flex-direction:column; text-decoration:none; transition:transform .25s ease; }
.ab-pcard:hover { transform:translateY(-5px); }
.ab-pcard.ap-purple { border-top:3px solid rgba(168,85,247,.5); }
.ab-pcard.ap-blue   { border-top:3px solid rgba(59,130,246,.5); }
.ab-pcard.ap-orange { border-top:3px solid rgba(251,146,60,.5); }
.ab-pcard h3 { font-size:1.28rem; margin-bottom:4px; }
.ab-prole { font-size:13px; color:var(--text-muted); margin-bottom:13px; letter-spacing:.02em; }
.ab-pcard .visit-link { margin-top:auto; }

/* About — left product-positioning grid × right mission description */
.ab-grid { display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.2fr); gap:clamp(36px,5vw,72px); align-items:center; max-width:1080px; margin:0 auto; }
.ab-cells { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--glass-border); border-radius:16px; overflow:hidden; background:rgba(255,255,255,.02); }
.ab-cell { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:34px 18px; text-align:center; text-decoration:none; transition:background .22s; border-right:1px solid var(--glass-border); border-bottom:1px solid var(--glass-border); }
.ab-cell:nth-child(2n) { border-right:none; }
.ab-cell:nth-child(n+3) { border-bottom:none; }
.ab-cell:hover { background:rgba(255,255,255,.04); }
.ab-cell-name { display:block; font-size:1.4rem; font-weight:800; letter-spacing:-.01em; margin-bottom:7px; }
.ab-cell-role { display:block; font-size:13px; color:var(--text-muted); }
.ab-cell.ac-purple .ab-cell-name { color:#c084fc; }
.ab-cell.ac-blue   .ab-cell-name { color:#60a5fa; }
.ab-cell.ac-orange .ab-cell-name { color:#fdba74; }
.ab-cell.ac-grad .ab-cell-name { background:linear-gradient(120deg,#a855f7,#3b82f6 55%,#fb923c); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* product-name color utilities (reused on contact cards) */
.pn-purple { color:#c084fc; }
.pn-blue   { color:#60a5fa; }
.pn-orange { color:#fdba74; }

/* ── contact page: emails (left) × chat + company (right) ── */
.contact-section { padding-top:0; }
.contact-layout { display:grid; grid-template-columns:1.05fr .95fr; gap:18px; align-items:stretch; }
.contact-col { display:flex; flex-direction:column; gap:18px; }
.contact-mail { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  flex:1 1 0; padding:22px 28px; text-decoration:none; transition:border-color .2s, background .2s, transform .2s; }
.contact-mail:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.04); }
.cm-id { display:flex; flex-direction:column; gap:4px; }
.cm-name { font-size:1.25rem; font-weight:800; letter-spacing:-.01em; line-height:1.1; }
.cm-role { font-size:13px; color:var(--text-muted); }
.cm-mail { font-size:14px; color:var(--text-secondary); font-weight:500; white-space:nowrap; }
.contact-mail:hover .cm-mail { color:#fff; }
.contact-chat { flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; }
.contact-chat .btn-primary { margin-top:6px; align-self:flex-start; }
.contact-company { flex:0 0 auto; display:flex; flex-direction:column; justify-content:center; }
.contact-company p { margin-bottom:4px; }
@media (max-width:860px){ .contact-layout { grid-template-columns:1fr; } .contact-mail, .contact-chat { flex:0 0 auto; } }

/* ── customers: case studies (customer-led) + featured combo ── */
.cs-purple { --cs:#c084fc; }
.cs-blue   { --cs:#60a5fa; }
.cs-orange { --cs:#fdba74; }
.case-list { display:flex; flex-direction:column; gap:22px; }
.case-study { padding:36px 42px; border-left:3px solid var(--cs); }
/* identity + product credit */
.cs-id-row { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.cs-identity { font-size:14px; color:var(--text-muted); font-weight:500; }
.cs-credit { display:inline-flex; align-items:center; font-size:12.5px; font-weight:700;
  padding:5px 14px; border-radius:999px; border:1px solid currentColor; white-space:nowrap; }
.cs-credit-by { opacity:.65; font-weight:600; }
/* quote + hero stat */
.cs-body { display:grid; grid-template-columns:1fr auto; gap:48px; align-items:center; }
.cs-quote { position:relative; font-size:clamp(19px,2.2vw,25px); font-weight:700; line-height:1.46;
  letter-spacing:-.3px; color:#fff; }
.cs-quote::before { content:"“"; color:var(--cs); }
.cs-quote::after  { content:"”"; color:var(--cs); }
.cs-attr { margin-top:15px; font-size:14px; color:var(--text-secondary); }
.cs-attr::before { content:"— "; color:var(--text-muted); }
.cs-stat { text-align:right; flex-shrink:0; }
.cs-stat-n { font-size:clamp(32px,4vw,44px); font-weight:800; letter-spacing:-1px; line-height:1; color:var(--cs); white-space:nowrap; }
.cs-stat-l { font-size:13px; color:var(--text-muted); margin-top:9px; }
/* challenge / solution / result */
.cs-csr { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:30px; padding-top:28px; border-top:1px solid var(--glass-border); }
.cs-csr-h { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--cs); margin-bottom:10px; }
.cs-csr p { color:var(--text-secondary); font-size:.93rem; line-height:1.72; margin:0; }

/* featured combo case */
.cases-section { padding-top:8px; }
.combo-case { padding:44px 46px; margin-top:22px; }
.combo-head { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.combo-feature-tag { display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; color:var(--text-secondary); }
.combo-feature-tag::before { content:""; width:7px; height:7px; border-radius:50%;
  background:linear-gradient(120deg,#a855f7,#3b82f6,#fb923c); }
.combo-id { font-size:14px; color:var(--text-muted); }
.combo-quote { position:relative; font-size:clamp(21px,2.5vw,28px); font-weight:700; line-height:1.42;
  letter-spacing:-.4px; color:#fff; max-width:900px; }
.combo-quote::before { content:"“"; } .combo-quote::after { content:"”"; }
.combo-attr { margin-top:14px; }
.combo-chal { margin:28px 0 30px; }
.combo-chal .cs-csr-h { color:var(--text-secondary); }
.combo-chal p { color:var(--text-secondary); font-size:1rem; line-height:1.75; margin:0; max-width:920px; }
.combo-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; }
.combo-step { display:flex; flex-direction:column; gap:9px; padding:24px 22px; border-radius:16px;
  border:1px solid var(--glass-border); border-top:3px solid var(--cs); background:rgba(255,255,255,.02); }
.combo-role { font-size:11.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--text-muted); }
.combo-prod { font-size:1.15rem; font-weight:800; letter-spacing:-.01em; }
.combo-step p { color:var(--text-secondary); font-size:.94rem; line-height:1.72; margin:0; }
.combo-arrow { display:flex; align-items:center; justify-content:center; padding:0 16px; color:var(--text-dim); font-size:22px; }
.combo-metrics { display:flex; flex-wrap:wrap; gap:18px 48px; margin-top:30px; padding-top:28px; border-top:1px solid var(--glass-border); }
.combo-metric { display:flex; flex-direction:column; gap:7px; }
.cm-n { font-size:clamp(26px,3vw,34px); font-weight:800; letter-spacing:-.5px; line-height:1; }
.cm-l { font-size:13px; color:var(--text-muted); }
@media (max-width:820px){
  .case-study { padding:20px 18px; }
  .case-list { gap: 12px; }
  .cs-body { grid-template-columns:1fr; gap:14px; }
  .cs-stat { text-align:left; }
  .cs-csr { grid-template-columns:1fr; gap:16px; margin-top:20px; padding-top:20px; }
  .combo-case { padding:24px 18px; }
  .combo-flow { grid-template-columns:1fr; gap:8px; }
  .combo-arrow { transform:rotate(90deg); padding:8px 0; }
}
@media (max-width:480px){ .ab-cell { padding: 18px 8px; } .ab-cell-name { font-size: 1rem; } .ab-cell-role { font-size: 10.5px; } }
.ab-grid-right .page-eyebrow { display:block; margin-bottom:16px; }
.ab-grid-right h2 { font-size:clamp(28px,3.6vw,42px); font-weight:800; line-height:1.18; letter-spacing:-.5px; margin-bottom:22px; }
.ab-grid-right .grad { background:linear-gradient(120deg,#a855f7,#3b82f6 55%,#fb923c); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ab-grid-right p { color:var(--text-secondary); font-size:1.02rem; line-height:1.85; margin-bottom:16px; }
.ab-grid-right p:last-child { margin-bottom:0; }
@media (max-width:860px){ .ab-grid { grid-template-columns:1fr; gap:18px; align-items: start; } }

/* ── mobile (≤600px) card + CTA sizing — placed LAST so it wins over the
   secondary-page base components that are defined later in this file ── */
@media (max-width: 600px) {
  /* outcome / feature cards */
  .feature { padding: 18px; }
  .feature h3 { font-size: 1rem; margin-bottom: 6px; }
  .feature p { font-size: .84rem; line-height: 1.55; }
  .feature-grid { gap: 12px; margin-top: 22px; }
  /* info / case cards */
  .info-card { padding: 20px; }
  .info-card h3 { font-size: 1rem; margin-bottom: 7px; }
  .info-card p { font-size: .85rem; line-height: 1.6; }
  .case-card { padding: 20px; }
  /* CTA panel — smaller text + tighter padding (less "土") */
  .cta-panel { padding: 30px 20px; }
  .cta-panel h2 { font-size: 20px; line-height: 1.32; margin-bottom: 12px; }
  .cta-panel p { font-size: 13px; line-height: 1.6; margin-bottom: 18px; }
}

/* ═══════ EXPERIENCE PAGE — agent selector cards ═══════ */
.exp-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  max-width: 1040px; margin: 0 auto; padding-bottom: 48px;
}
.exp-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 34px 30px; border-radius: var(--radius-card);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  text-decoration: none;
  transition: transform .2s, border-color .2s, background .2s, box-shadow .2s;
}
.exp-card:hover {
  transform: translateY(-4px); background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover); box-shadow: 0 18px 48px rgba(0,0,0,.34);
}
.exp-card-ic { width: 52px; height: 52px; border-radius: 14px; font-size: 22px; margin-bottom: 20px; }
.exp-card-name { font-size: 26px; font-weight: 800; line-height: 1.1; margin-bottom: 6px; }
.exp-card-role { font-size: 14px; color: var(--text-secondary); margin-bottom: 26px; }
.exp-card-enter { margin-top: auto; font-size: 14px; font-weight: 700; color: var(--text-primary); transition: color .15s; }
.exp-card:hover .exp-card-enter { color: var(--blue-mid); }
@media (max-width: 860px) {
  .exp-grid { grid-template-columns: 1fr; max-width: 460px; gap: 16px; }
  .exp-card { padding: 26px 24px; }
  .exp-card-ic { width: 44px; height: 44px; font-size: 18px; margin-bottom: 16px; }
  .exp-card-name { font-size: 22px; }
  .exp-card-role { margin-bottom: 18px; }
}

/* ═══════ CHAT PAGES — full-page agent iframe ═══════ */
.chat-shell { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--bg-deep); }
.chat-bar {
  flex: 0 0 56px; height: 56px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 18px; border-bottom: 1px solid var(--glass-border);
  background: rgba(13,14,24,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.chat-bar-back { color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; transition: color .15s; }
.chat-bar-back:hover { color: var(--text-primary); }
.chat-bar-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap; }
.chat-frame { flex: 1 1 auto; width: 100%; border: 0; display: block; }
@media (max-width: 560px) {
  .chat-bar { padding: 0 12px; gap: 8px; }
  .chat-bar-logo .nav-logo-text { display: none; }
  .chat-bar-back { font-size: 13px; }
}

/* ============================================================
   LIGHT THEME ("day mode") — opt-in via <html data-theme="light">.
   Dark ("night") = the default :root values at the top, untouched.
   Brand accents (purple/blue/orange) are shared by both themes;
   only surfaces, text, borders, panels, shadows and the aurora flip.
   ============================================================ */
:root[data-theme="light"] {
  --bg-deep: #f6f7fb;

  --glass-bg:           rgba(255,255,255,.66);
  --glass-bg-hover:     rgba(255,255,255,.9);
  --glass-border:       rgba(20,28,64,.10);
  --glass-border-hover: rgba(20,28,64,.20);

  --console-bg:         rgba(255,255,255,.92);
  --console-bg-hover:   rgba(255,255,255,.98);
  --console-inner:      rgba(20,28,64,.035);
  --console-inner-b:    rgba(20,28,64,.09);

  --text-primary:    #14162e;
  --text-secondary:  rgba(20,22,46,.70);
  --text-muted:      rgba(20,22,46,.52);
  --text-dim:        rgba(20,22,46,.40);

  --shadow-card:       0 6px 24px rgba(20,30,70,.08), 0 1px 0 rgba(255,255,255,.7) inset;
  --shadow-card-hover: 0 20px 50px rgba(20,30,70,.14), 0 1px 0 rgba(255,255,255,.85) inset;

  /* helpers reused by the hardcoded-surface overrides below */
  --lt-surface:   rgba(20,28,64,.03);
  --lt-surface-2: rgba(20,28,64,.06);
  --lt-hairline:  rgba(20,28,64,.10);
  --lt-panel:     rgba(255,255,255,.95);
}

/* ---- nav / mega-menu / footer panels ---- */
[data-theme="light"] nav { background: rgba(255,255,255,.62); border-bottom-color: var(--lt-hairline); }
[data-theme="light"] .nav-links a:hover,
[data-theme="light"] .nav-menu-all:hover { color: var(--text-primary); }
[data-theme="light"] .nav-menu { background: var(--lt-panel); box-shadow: 0 24px 60px rgba(20,30,70,.16); }
[data-theme="light"] .nav-menu-item:hover { background: var(--lt-surface-2); }
[data-theme="light"] footer { background: rgba(255,255,255,.6); border-top-color: var(--lt-hairline); }
[data-theme="light"] .footer-bar { border-top-color: var(--lt-hairline); }
[data-theme="light"] .footer-social-icon { background: var(--lt-surface-2); border-color: var(--lt-hairline); }
[data-theme="light"] .footer-social-icon:hover { background: rgba(20,28,64,.12); border-color: rgba(20,28,64,.2); }
[data-theme="light"] .footer-status { background: var(--lt-surface-2); border-color: var(--lt-hairline); }

/* ---- language switcher + theme toggle ---- */
[data-theme="light"] .lang-trigger,
[data-theme="light"] .theme-toggle { color: rgba(20,22,46,.66); border-color: rgba(20,28,64,.18); }
[data-theme="light"] .lang-trigger:hover,
[data-theme="light"] .theme-toggle:hover { color: var(--text-primary); border-color: rgba(20,28,64,.32); }
[data-theme="light"] .lang-menu { background: var(--lt-panel); box-shadow: 0 24px 60px rgba(20,30,70,.16); }
[data-theme="light"] .lang-menu button { color: rgba(20,22,46,.7); }
[data-theme="light"] .lang-menu button:hover { background: var(--lt-surface-2); color: var(--text-primary); }

/* ---- console shells + titlebar ---- */
[data-theme="light"] .console-shell { border-color: rgba(20,28,64,.1); }
[data-theme="light"] .console-titlebar { background: rgba(20,28,64,.025); border-bottom-color: var(--lt-hairline); }
[data-theme="light"] .console-lili { box-shadow: 0 0 0 1px rgba(59,130,246,.22), 0 16px 44px rgba(20,30,70,.1), 0 0 60px rgba(59,130,246,.08); }
[data-theme="light"] .console-miao { box-shadow: 0 0 0 1px rgba(168,85,247,.22), 0 16px 44px rgba(20,30,70,.1), 0 0 60px rgba(168,85,247,.08); }
[data-theme="light"] .console-vivi { box-shadow: 0 0 0 1px rgba(251,146,60,.22), 0 16px 44px rgba(20,30,70,.1), 0 0 60px rgba(251,146,60,.08); }
[data-theme="light"] .console-lili:hover,
[data-theme="light"] .console-miao:hover,
[data-theme="light"] .console-vivi:hover { box-shadow: 0 22px 60px rgba(20,30,70,.16); }
[data-theme="light"] .cp-panel { box-shadow: 0 16px 44px rgba(20,30,70,.12), 0 0 60px rgba(168,85,247,.08); }

/* ---- buttons / chips / surfaces ---- */
[data-theme="light"] .btn-glass { background: var(--lt-surface-2); border-color: rgba(20,28,64,.16); }
[data-theme="light"] .btn-glass:hover { background: rgba(20,28,64,.1); border-color: rgba(20,28,64,.28); }
[data-theme="light"] .stat-chip { background: rgba(255,255,255,.72); border-color: var(--lt-hairline); box-shadow: 0 8px 24px rgba(20,30,70,.08); }
[data-theme="light"] .stat-chip:hover { box-shadow: 0 18px 40px rgba(20,30,70,.14) !important; }
[data-theme="light"] .trust-pill { color: rgba(20,22,46,.72); background: var(--lt-surface-2); }
[data-theme="light"] .trust-pill:hover { color: var(--text-primary); background: rgba(20,28,64,.1); }
[data-theme="light"] .trust-label { color: rgba(20,22,46,.5); }
[data-theme="light"] .trust-label::before { background: linear-gradient(90deg, transparent, rgba(20,28,64,.28)); }
[data-theme="light"] .trust-label::after { background: linear-gradient(90deg, rgba(20,28,64,.28), transparent); }
[data-theme="light"] .hm-sep { background: rgba(20,28,64,.16); }

/* ---- console internals not behind vars ---- */
[data-theme="light"] .bubble.ai { background: var(--lt-surface-2); border-color: var(--lt-hairline); }
[data-theme="light"] .c-input { background: var(--lt-surface); border-color: rgba(20,28,64,.12); }
[data-theme="light"] .stack-tab { background: var(--lt-surface-2); border-color: var(--lt-hairline); }
[data-theme="light"] .stack-tab:hover { background: rgba(20,28,64,.1); border-color: rgba(20,28,64,.22); }
[data-theme="light"] .plat-dy,
[data-theme="light"] .plat-x { background: rgba(20,28,64,.08); color: var(--text-secondary); }

/* ---- advantages grid ---- */
[data-theme="light"] .adv-grid { background: var(--lt-hairline); border-color: var(--lt-hairline); }
[data-theme="light"] .adv-item { background: rgba(255,255,255,.72); border-right-color: var(--lt-hairline); border-bottom-color: var(--lt-hairline); }
[data-theme="light"] .adv-item:hover { background: rgba(20,28,64,.04); }

/* ---- faint panel surfaces (cards/rows that used a white-alpha bg) ---- */
[data-theme="light"] .pain-card,
[data-theme="light"] .solve-row,
[data-theme="light"] .map-pain,
[data-theme="light"] .ab-cells,
[data-theme="light"] .combo-step,
[data-theme="light"] .vivi-video,
[data-theme="light"] .lili-stat-box,
[data-theme="light"] .cp-sugg,
[data-theme="light"] .coach-msg.ai,
[data-theme="light"] .lead-form input,
[data-theme="light"] .pb-best { background: var(--lt-surface); }
[data-theme="light"] .product-role,
[data-theme="light"] .solve-row:hover,
[data-theme="light"] .ab-cell:hover { background: var(--lt-surface-2); }

/* ---- white-alpha hairline borders ---- */
[data-theme="light"] .pb-best,
[data-theme="light"] .miao-row,
[data-theme="light"] .vivi-chapter,
[data-theme="light"] .vivi-video,
[data-theme="light"] .product-role,
[data-theme="light"] .pain-flow-item,
[data-theme="light"] .cp-bar,
[data-theme="light"] .coach-foot { border-color: var(--lt-hairline); }
[data-theme="light"] .product-band { border-top-color: var(--lt-hairline); }
[data-theme="light"] .vivi-bar-wrap,
[data-theme="light"] .cp-conf-bar { background: rgba(20,28,64,.08); }
[data-theme="light"] .cp-tabs { background: var(--lt-surface); border-bottom-color: var(--lt-hairline); }
[data-theme="light"] .cp-btn-ok { border-color: rgba(20,28,64,.2); }

/* ---- #fff text / hovers that land on a light surface ---- */
[data-theme="light"] .cs-quote,
[data-theme="light"] .combo-quote { color: var(--text-primary); }
[data-theme="light"] .contact-mail:hover { background: var(--lt-surface); border-color: rgba(20,28,64,.18); }
[data-theme="light"] .contact-mail:hover .cm-mail { color: var(--text-primary); }

/* ---- shadow / toast ---- */
[data-theme="light"] .toast { box-shadow: 0 10px 30px rgba(20,30,70,.18); }

/* ---- aurora: soften so it doesn't muddy the light canvas ---- */
[data-theme="light"] .aurora-blob { opacity: .13; }

/* ---- theme toggle button (sun = light shown, moon = dark shown) ---- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 32px; padding: 0; flex-shrink: 0;
  background: none; border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  color: rgba(240,241,248,.62); cursor: pointer; transition: .2s;
}
.theme-toggle:hover { color: rgba(240,241,248,.92); border-color: rgba(255,255,255,.32); }
.theme-toggle svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-ic-sun { display: none; }
[data-theme="light"] .theme-ic-sun { display: block; }
[data-theme="light"] .theme-ic-moon { display: none; }

/* ---- responsive light overrides (match the dark-mode media queries) ---- */
@media (max-width: 1000px) {
  [data-theme="light"] .adv-item:nth-child(3n),
  [data-theme="light"] .adv-item:nth-child(n+4) { border-right-color: var(--lt-hairline); border-bottom-color: var(--lt-hairline); }
}
@media (max-width: 860px) {
  [data-theme="light"] .nav-links { background: rgba(255,255,255,.97); border-bottom-color: var(--lt-hairline); }
  [data-theme="light"] .nav-menu { border-left-color: var(--lt-hairline); }
  [data-theme="light"] .adv-item { border-bottom-color: var(--lt-hairline) !important; }
}
@media (max-width: 820px) {
  [data-theme="light"] .map-row + .map-row { border-top-color: var(--lt-hairline); }
}

/* ---- Vivi AI-lecture "video screen" → light. It was a dark player; in light mode
   its inner text uses the dark ink, so the screen itself must go light to stay legible. ---- */
[data-theme="light"] .vlec { background: var(--lt-panel); border-color: var(--lt-hairline); }
[data-theme="light"] .vlec-screen {
  background:
    radial-gradient(135% 95% at 14% 100%, rgba(251,146,60,.14), transparent 55%),
    linear-gradient(135deg, rgba(99,102,241,.12) 0%, rgba(255,255,255,.72) 100%);
}
[data-theme="light"] .vlec-slide { background: rgba(255,255,255,.72); border-color: var(--lt-hairline); }
[data-theme="light"] .vlec-line { background: rgba(20,28,64,.10); }
[data-theme="light"] .vlec-cap { background: rgba(255,255,255,.9); border-color: var(--lt-hairline); color: var(--text-secondary); }
[data-theme="light"] .vlec-opt { background: var(--lt-surface); }
[data-theme="light"] .vlec-key { background: rgba(20,28,64,.08); }

/* ---- dark step-number circles (Mimi/Vivi connected steppers): light circle +
   deepened accent number so it reads on white ---- */
[data-theme="light"] .flow4-num { background: var(--lt-panel); color: var(--purple); }
[data-theme="light"] .flow-orange .flow4-num { color: var(--orange); }

/* ---- 9-dimension radar grid: white-alpha strokes were invisible on light ---- */
[data-theme="light"] .r9-ring { stroke: rgba(20,28,64,.12); }
[data-theme="light"] .r9-spoke { stroke: rgba(20,28,64,.10); }

/* ---- chat-page top bar → light (chat-shell body already themed via --bg-deep) ---- */
[data-theme="light"] .chat-bar { background: rgba(255,255,255,.85); }

/* ============================================================
   LIGHT THEME — round 2: home-page contrast & depth tuning.
   The site's accent TEXT colours were tuned for dark backgrounds (light pastels);
   on light tints they read too faint, so deepen them by colour family. Plus a few
   surface fixes: whiter button/tab pills, solid advantage tiles, softer glows.
   ============================================================ */

/* --- deepen light-PURPLE text on pale purple tints --- */
[data-theme="light"] .miao-outreach,
[data-theme="light"] .nc-purple,
[data-theme="light"] .role-purple,
[data-theme="light"] .result-pill-purple,
[data-theme="light"] .pc-role.r-purple,
[data-theme="light"] .pc-check-purple,
[data-theme="light"] .cp-tab.active,
[data-theme="light"] .cp-conf-v,
[data-theme="light"] .cp-chip,
[data-theme="light"] .mlead-tag,
[data-theme="light"] .mlead-reply-ic,
[data-theme="light"] .mlead-reply-tt b,
[data-theme="light"] .mlead-reply-msg,
[data-theme="light"] .pb-role.role-purple,
[data-theme="light"] .pb-dot.d-purple,
[data-theme="light"] .funnel-stage.fc1 .funnel-num,
[data-theme="light"] .funnel-stage.fc2 .funnel-num,
[data-theme="light"] .stack-tab[data-tab-color="purple"].active { color: #7c3aed; }

/* --- deepen light-INDIGO text --- */
[data-theme="light"] .bubble.user,
[data-theme="light"] .ti-indigo,
[data-theme="light"] .tag-indigo { color: #4f46e5; }

/* --- deepen light-BLUE text --- */
[data-theme="light"] .nc-blue,
[data-theme="light"] .plat-fb,
[data-theme="light"] .funnel-stage.fc3 .funnel-num,
[data-theme="light"] .stack-tab[data-tab-color="blue"].active { color: #2563eb; }

/* --- deepen light-ORANGE text --- */
[data-theme="light"] .role-orange,
[data-theme="light"] .nc-orange,
[data-theme="light"] .result-pill-orange,
[data-theme="light"] .pc-role.r-orange,
[data-theme="light"] .pc-check-orange,
[data-theme="light"] .plat-ks,
[data-theme="light"] .plat-tt,
[data-theme="light"] .cp-handoff-lab,
[data-theme="light"] .mlead-reply-badge,
[data-theme="light"] .pb-role.role-orange,
[data-theme="light"] .pb-dot.d-orange,
[data-theme="light"] .vlec-quiz-badge,
[data-theme="light"] .coach-role,
[data-theme="light"] .coach-tip b,
[data-theme="light"] .coach-replay,
[data-theme="light"] .coach-msg.me,
[data-theme="light"] .stack-tab[data-tab-color="orange"].active { color: #ea580c; }

/* --- deepen light-GREEN text --- */
[data-theme="light"] .green-val,
[data-theme="light"] .c-chart-tag,
[data-theme="light"] .plat-sph,
[data-theme="light"] .intent-hi,
[data-theme="light"] .mlead-intent.hi,
[data-theme="light"] .ch-done,
[data-theme="light"] .cp-adopt,
[data-theme="light"] .coach-ms,
[data-theme="light"] .vlec-opt.correct::after,
[data-theme="light"] .funnel-stage.fc4 .funnel-num { color: #15803d; }

/* --- deepen light-RED / light-AMBER text --- */
[data-theme="light"] .plat-xhs,
[data-theme="light"] .plat-yt,
[data-theme="light"] .cp-btn-no { color: #dc2626; }
[data-theme="light"] .intent-mid,
[data-theme="light"] .mlead-intent.mid { color: #b45309; }

/* --- whiter surfaces: secondary "glass" button + console selector pills --- */
[data-theme="light"] .btn-glass { background: #fff; border-color: rgba(20,28,64,.14); box-shadow: 0 1px 2px rgba(20,30,70,.06); }
[data-theme="light"] .btn-glass:hover { background: #fff; border-color: rgba(20,28,64,.3); box-shadow: 0 6px 16px rgba(20,30,70,.1); }
[data-theme="light"] .stack-tab { background: #fff; border-color: rgba(20,28,64,.12); box-shadow: 0 1px 2px rgba(20,30,70,.05); }
[data-theme="light"] .stack-tab:hover { background: #fff; border-color: rgba(20,28,64,.24); }

/* --- advantages grid: solid white tiles + container shadow. The translucent
   tiles let the divider colour bleed through (muddy grey, ugly hover) and the
   block read flat — make tiles opaque, give the grid depth, clean hover tint. --- */
[data-theme="light"] .adv-grid { background: var(--lt-hairline); box-shadow: var(--shadow-card); }
[data-theme="light"] .adv-item { background: #fff; }
[data-theme="light"] .adv-item:hover { background: #f1f2f5; }

/* --- lifecycle timeline: soften the spread-out accent glows for the light canvas --- */
[data-theme="light"] .nc-purple { background: rgba(168,85,247,.10); box-shadow: 0 0 16px rgba(168,85,247,.20), 0 0 0 1px rgba(168,85,247,.32); }
[data-theme="light"] .nc-blue   { background: rgba(59,130,246,.10); box-shadow: 0 0 16px rgba(59,130,246,.18), 0 0 0 1px rgba(59,130,246,.30); }
[data-theme="light"] .nc-orange { background: rgba(251,146,60,.10); box-shadow: 0 0 16px rgba(251,146,60,.18), 0 0 0 1px rgba(251,146,60,.30); }
[data-theme="light"] .lifecycle-line-glow { opacity: .4; }

/* ============================================================
   LIGHT THEME — round 3: more light-accent text deepened on
   solution / customers / about pages (missed earlier), plus the
   contact-us link colour and quiz correct-answer text.
   ============================================================ */
/* PURPLE text on pale purple */
[data-theme="light"] .sol-chip.lead-purple,
[data-theme="light"] .solve-prod.prod-purple,
[data-theme="light"] .map-row.m-purple .map-sol-h,
[data-theme="light"] .ab-cell.ac-purple .ab-cell-name,
[data-theme="light"] .pn-purple,
[data-theme="light"] .ab-lead .cm { color: #7c3aed; }

/* BLUE text on pale blue (also fixes washed-out #60a5fa names) */
[data-theme="light"] .sol-chip.lead-blue,
[data-theme="light"] .solve-prod.prod-blue,
[data-theme="light"] .map-row.m-blue .map-sol-h,
[data-theme="light"] .ab-cell.ac-blue .ab-cell-name,
[data-theme="light"] .pn-blue,
[data-theme="light"] .ab-lead .cl,
[data-theme="light"] .visit-link { color: #2563eb; }

/* ORANGE text on pale orange */
[data-theme="light"] .sol-chip.lead-orange,
[data-theme="light"] .solve-prod.prod-orange,
[data-theme="light"] .map-row.m-orange .map-sol-h,
[data-theme="light"] .ab-cell.ac-orange .ab-cell-name,
[data-theme="light"] .pn-orange,
[data-theme="light"] .ab-lead .cv { color: #ea580c; }

/* GREEN: quiz correct-answer text (was #bbf7d0, invisible on light) */
[data-theme="light"] .vlec-opt.correct { color: #15803d; }

/* customers case-study accent (--cs drives credit pill, stat number, quote
   marks, left border, C/S/R headers) — deepen so the pale pills read */
[data-theme="light"] .cs-purple { --cs: #7c3aed; }
[data-theme="light"] .cs-blue   { --cs: #2563eb; }
[data-theme="light"] .cs-orange { --cs: #ea580c; }