:root {
  /* ========================================================
     1. RAW PALETTE  (ramps — use semantic tokens below in UI)
     ======================================================== */

  /* Blue — brand primary ramp (#2881F4 as the soul of 智汇) */
  --teal-50:  #EFF6FF;
  --teal-100: #DBEAFE;
  --teal-200: #BFDBFE;
  --teal-300: #93C5FD;
  --teal-400: #60A5FA;
  --teal-500: #3B82F6;
  --teal-600: #2563EB;
  --teal-700: #2881F4;   /* PRIMARY */
  --teal-800: #1D6FDB;
  --teal-900: #1659C7;

  /* Slate — neutral / text / surfaces */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* Amber — single accent, used sparingly (≤10% of any view) */
  --amber-50:  #FFFBEB;
  --amber-100: #FEF3C7;
  --amber-300: #FCD34D;
  --amber-500: #F59E0B;   /* ACCENT */
  --amber-600: #D97706;
  --amber-700: #B45309;

  /* Status hues */
  --emerald-500: #10B981;
  --emerald-600: #059669;
  --emerald-50:  #ECFDF5;
  --red-500:     #EF4444;
  --red-600:     #DC2626;
  --red-50:      #FEF2F2;
  --sky-500:     #0EA5E9;
  --sky-600:     #0284C7;
  --sky-50:      #F0F9FF;

  /* ========================================================
     2. SEMANTIC TOKENS  (reach for THESE in UI)
     ======================================================== */
  --primary:        var(--teal-700);
  --primary-hover:  #1D6FDB;        /* hand-tuned, between 700/800 */
  --primary-press:  var(--teal-800);
  --primary-light:  var(--teal-100);
  --primary-subtle: var(--teal-50);
  --on-primary:     #FFFFFF;

  --accent:         var(--amber-500);
  --accent-hover:   var(--amber-600);
  --accent-light:   var(--amber-100);

  --bg:             var(--slate-50);    /* app/page background */
  --surface:        #FFFFFF;            /* cards, panels, sheets */
  --surface-2:      var(--slate-50);    /* recessed wells inside surfaces */
  --surface-hover:  var(--slate-100);

  --text:           var(--slate-900);   /* primary text */
  --text-2:         var(--slate-600);   /* secondary text */
  --muted:          var(--slate-500);   /* tertiary / captions / placeholder */
  --text-on-dark:   #FFFFFF;

  --border:         var(--slate-200);   /* hairlines, dividers */
  --border-strong:  var(--slate-300);   /* input borders, stronger separation */
  --ring:           color-mix(in srgb, var(--primary) 35%, transparent); /* focus ring */

  --success:        var(--emerald-600);
  --success-bg:     var(--emerald-50);
  --warning:        var(--amber-600);
  --warning-bg:     var(--amber-50);
  --danger:         var(--red-600);
  --danger-bg:      var(--red-50);
  --info:           var(--sky-600);
  --info-bg:        var(--sky-50);

  /* ========================================================
     3. TYPOGRAPHY
     Latin: Plus Jakarta Sans · CJK: Noto Sans SC · Mono: JetBrains Mono
     The CJK font is listed AFTER the Latin one so Latin glyphs use
     Jakarta and Han glyphs fall through to Noto Sans SC.
     ======================================================== */
  --font-sans: 'Plus Jakarta Sans', 'Noto Sans SC', -apple-system,
               'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Noto Sans SC', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, monospace;

  /* Type scale (1.250 major-third-ish, tuned for product UI + CJK) */
  --text-display: 56px;   --lh-display: 1.08;  --tr-display: -0.02em;
  --text-h1: 40px;        --lh-h1: 1.15;       --tr-h1: -0.02em;
  --text-h2: 30px;        --lh-h2: 1.2;        --tr-h2: -0.015em;
  --text-h3: 24px;        --lh-h3: 1.3;        --tr-h3: -0.01em;
  --text-h4: 19px;        --lh-h4: 1.35;       --tr-h4: -0.005em;
  --text-lg: 18px;        --lh-lg: 1.6;
  --text-base: 16px;      --lh-base: 1.65;     /* generous for CJK readability */
  --text-sm: 14px;        --lh-sm: 1.55;
  --text-xs: 13px;        --lh-xs: 1.45;
  --text-2xs: 11px;       --lh-2xs: 1.3;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;     /* display only */

  /* ========================================================
     4. SPACING  (4px base grid)
     ======================================================== */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ========================================================
     5. RADII
     ======================================================== */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;    /* default control radius */
  --radius-lg: 14px;    /* cards */
  --radius-xl: 20px;    /* large panels / feature cards */
  --radius-2xl: 28px;   /* hero surfaces */
  --radius-full: 999px;

  /* ========================================================
     6. SHADOWS  (soft, cool-tinted — never pure-black)
     ======================================================== */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.14), 0 8px 16px rgba(15, 23, 42, 0.06);
  --shadow-primary: 0 8px 20px rgba(40, 129, 244, 0.28);  /* blue-glow on primary CTAs */

  /* ========================================================
     7. MOTION
     ======================================================== */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);     /* default — confident settle */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* tiny overshoot for delight */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  --container: 1200px;   /* marketing max width */
  --container-narrow: 760px;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   Lightweight resets so raw HTML inherits the system.
   ============================================================ */
.zh-root, body.zh {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Type helpers --------------------------------------------- */
.zh-display { font-family: var(--font-display); font-size: var(--text-display);
  line-height: var(--lh-display); letter-spacing: var(--tr-display);
  font-weight: var(--weight-black); color: var(--text); }
.zh-h1 { font-size: var(--text-h1); line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1); font-weight: var(--weight-bold); }
.zh-h2 { font-size: var(--text-h2); line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2); font-weight: var(--weight-bold); }
.zh-h3 { font-size: var(--text-h3); line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3); font-weight: var(--weight-semibold); }
.zh-h4 { font-size: var(--text-h4); line-height: var(--lh-h4);
  letter-spacing: var(--tr-h4); font-weight: var(--weight-semibold); }
.zh-lead { font-size: var(--text-lg); line-height: var(--lh-lg); color: var(--text-2); }
.zh-body { font-size: var(--text-base); line-height: var(--lh-base); }
.zh-sm { font-size: var(--text-sm); line-height: var(--lh-sm); }
.zh-caption { font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--muted); }
.zh-eyebrow { font-size: var(--text-sm); font-weight: var(--weight-semibold);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); }
.zh-mono { font-family: var(--font-mono); font-size: 0.92em;
  background: var(--surface-2); padding: 0.1em 0.4em; border-radius: var(--radius-xs);
  border: 1px solid var(--border); }

* { box-sizing: border-box; }
  html, body { margin: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    line-height: 1.7;
    letter-spacing: .03em;
  }
  ::selection { background: var(--primary-light); }
  a { text-decoration: none; color: inherit; }

  /* ============ NAV ============ */
  .nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
  }
  .nav.scrolled { border-color: var(--border); box-shadow: var(--shadow-xs); }
  .nav-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 36px; height: 72px;
    display: flex; align-items: center; gap: 40px;
  }
  .brand { display: flex; align-items: center; gap: 10px; flex: none; }
  .brand img { width: 32px; height: 32px; }
  .brand-name { font-size: 20px; font-weight: 800; letter-spacing: .01em; color: var(--text); white-space: nowrap; }
  .brand-name b { color: var(--primary); font-weight: 800; }
  .nav-links { display: flex; align-items: center; gap: 2px; }
  .nav-link {
    padding: 8px 14px; border-radius: var(--radius-md);
    font-size: 15px; font-weight: 500; color: var(--text-2);
    transition: color .18s, background .18s;
  }
  .nav-link:hover { color: var(--text); background: var(--surface-hover); }
  .nav-link.active { color: var(--primary); font-weight: 600; }
  .nav-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-sans); font-weight: 600; cursor: pointer;
    border-radius: var(--radius-md); border: 1px solid transparent;
    line-height: 1; white-space: nowrap;
    transition: transform .12s var(--ease-out), background .2s var(--ease-out),
                box-shadow .2s, border-color .2s, color .2s;
  }
  .btn:active { transform: scale(.97); }
  .btn-sm { font-size: 14px; padding: 10px 16px; }
  .btn-lg { font-size: 16px; padding: 15px 26px; }
  .btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-primary); }
  .btn-primary:hover { background: var(--primary-hover); }
  .btn-outline { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
  .btn-outline:hover { border-color: var(--slate-400); background: var(--surface-hover); }
  .btn-ghost { background: transparent; color: var(--text-2); }
  .btn-ghost:hover { color: var(--text); background: var(--surface-hover); }
  .btn .ico { width: 18px; height: 18px; }

  /* ============ HERO ============ */
  .hero { position: relative; background: var(--bg); border-bottom: 1px solid var(--border); }
  .hero-content {
    position: relative; z-index: 2;
    max-width: 860px; margin: 0 auto; padding: 184px 28px 188px;
    text-align: center;
  }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-full); padding: 7px 16px 7px 8px;
    font-size: 13.5px; color: var(--text-2); box-shadow: var(--shadow-xs);
    margin-bottom: 44px; max-width: 100%; letter-spacing: .04em;
  }
  .eyebrow .tag {
    background: var(--primary-light); color: var(--primary); white-space: nowrap;
    font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-full);
  }
  .hero h1 {
    font-size: 52px; line-height: 1.34; font-weight: 800;
    letter-spacing: .04em; color: var(--text); margin: 0 0 36px;
  }
  .hero h1 .accent { color: var(--primary); }
  .hero-sub {
    font-size: 19px; line-height: 2; color: var(--text-2);
    max-width: 680px; margin: 0 auto 48px; letter-spacing: .05em;
  }
  .hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
  .hero-note { margin: 30px 0 0; font-size: 13.5px; color: var(--muted); letter-spacing: .05em; }

  /* ============ SECTION SCAFFOLD ============ */
  .section { max-width: 1200px; margin: 0 auto; padding: 136px 36px; }
  .section-head { text-align: center; max-width: 720px; margin: 0 auto 76px; }
  .kicker {
    font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: var(--primary); margin: 0 0 18px;
  }
  .section-head h2 { font-size: 40px; font-weight: 800; letter-spacing: .03em; line-height: 1.4; color: var(--text); margin: 0 0 20px; }
  .section-head p { font-size: 18px; color: var(--text-2); margin: 0; line-height: 1.9; letter-spacing: .04em; }

  /* ============ 核心卖点 ============ */
  .feature-band { background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .feat-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-xl); padding: 42px 40px 44px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .22s var(--ease-out), border-color .22s, transform .22s;
    display: flex; gap: 26px; align-items: flex-start;
  }
  .feat-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-3px); }
  .feat-icon {
    width: 56px; height: 56px; flex: none; border-radius: var(--radius-lg);
    background: var(--primary-subtle); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
  }
  .feat-icon .ico { width: 27px; height: 27px; }
  .feat-num { font-size: 13px; font-weight: 700; color: var(--primary); font-family: var(--font-mono); letter-spacing: .04em; }
  .feat-card h3 { font-size: 22px; font-weight: 700; color: var(--text); margin: 8px 0 14px; letter-spacing: .03em; }
  .feat-card p { font-size: 15.5px; line-height: 1.95; color: var(--text-2); margin: 0; letter-spacing: .03em; }

  /* ============ 适用场景 ============ */
  .scene-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .scene-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 30px 30px; display: flex; align-items: center; gap: 20px;
    transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
  }
  .scene-card:hover { border-color: var(--primary); background: var(--primary-subtle); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
  .scene-ico {
    width: 46px; height: 46px; flex: none; border-radius: var(--radius-md);
    background: var(--surface-2); color: var(--text-2);
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, color .2s;
  }
  .scene-card:hover .scene-ico { background: var(--surface); color: var(--primary); }
  .scene-ico .ico { width: 23px; height: 23px; }
  .scene-card .label { font-size: 18px; font-weight: 600; color: var(--text); letter-spacing: .04em; }

  /* ============ 价值主张 ============ */
  .value-band { background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .value-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
  .value-item { padding: 8px 30px; text-align: center; border-right: 1px solid var(--border); }
  .value-item:last-child { border-right: none; }
  .value-ico {
    width: 54px; height: 54px; margin: 0 auto 22px; border-radius: var(--radius-full);
    background: var(--primary-light); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
  }
  .value-ico .ico { width: 26px; height: 26px; }
  .value-item h4 { font-size: 17px; font-weight: 700; color: var(--text); margin: 0; line-height: 1.8; letter-spacing: .04em; }

  /* ============ BOTTOM CTA ============ */
  .cta-wrap { max-width: 1200px; margin: 0 auto; padding: 136px 36px; }
  .cta {
    position: relative; overflow: hidden;
    background: var(--primary); border-radius: var(--radius-2xl);
    padding: 104px 40px; text-align: center; box-shadow: var(--shadow-lg);
  }
  .cta .dots {
    position: absolute; inset: 0; opacity: .2;
    background-image: radial-gradient(rgba(255,255,255,.7) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(72% 100% at 50% 0%, black, transparent 75%);
    mask-image: radial-gradient(72% 100% at 50% 0%, black, transparent 75%);
  }
  .cta-inner { position: relative; }
  .cta h2 { font-size: 44px; font-weight: 800; letter-spacing: .03em; line-height: 1.35; color: #fff; margin: 0 0 22px; }
  .cta p { font-size: 19px; color: var(--teal-100); max-width: 560px; margin: 0 auto 38px; line-height: 1.85; letter-spacing: .04em; }
  .btn-onteal { background: #fff; color: var(--primary); box-shadow: var(--shadow-md); }
  .btn-onteal:hover { background: var(--teal-50); }

  /* ============ FOOTER ============ */
  footer { border-top: 1px solid var(--border); background: var(--surface); }
  .foot-inner {
    max-width: 1200px; margin: 0 auto; padding: 56px 36px 30px;
    display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 36px;
  }
  .foot-brand .brand { margin-bottom: 16px; }
  .foot-brand p { font-size: 14px; color: var(--muted); line-height: 1.75; margin: 0; max-width: 260px; }
  .foot-col h5 { font-size: 13.5px; font-weight: 700; color: var(--text); margin: 0 0 16px; }
  .foot-col a { display: block; font-size: 14px; color: var(--text-2); margin-bottom: 11px; transition: color .18s; }
  .foot-col a:hover { color: var(--primary); }
  .foot-bottom { border-top: 1px solid var(--border); }
  .foot-bottom-inner {
    max-width: 1200px; margin: 0 auto; padding: 20px 36px;
    display: flex; align-items: center; justify-content: center; text-align: center;
  }
  .foot-legal { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
  .foot-legal span, .icp-link { font-size: 13.5px; color: var(--muted); }
  .icp-link { text-decoration: none; }
  .icp-link:hover { color: var(--primary); text-decoration: underline; }

  /* ============ SCROLL REVEAL (enhancement; base state is visible so
     content always shows even where the animation timeline is throttled) ============ */
  .reveal { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: no-preference) {
    .reveal.armed { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
    .reveal.armed.in { opacity: 1; transform: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 1000px) {
    .nav-links { display: none; }
    .hero h1 { font-size: 48px; }
    .feat-grid { grid-template-columns: 1fr; }
    .scene-grid { grid-template-columns: repeat(2, 1fr); }
    .value-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 0; }
    .value-item { border-right: none; }
    .value-item:nth-child(odd) { border-right: 1px solid var(--border); }
    .foot-inner { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 620px) {
    .hero h1 { font-size: 38px; }
    .hero-content { padding: 90px 22px 100px; }
    .section { padding: 72px 22px; }
    .scene-grid { grid-template-columns: 1fr; }
    .value-grid { grid-template-columns: 1fr; }
    .value-item { border-right: none !important; }
    .cta { padding: 56px 24px; }
    .cta h2 { font-size: 32px; }
    .foot-inner { grid-template-columns: 1fr 1fr; }
  }