/* ══════════════════════════════════════════════════════════════════
   CATLAXY Design System · v2 (strict-token edition)
   Rules enforced by this file:
   1. NO magic numbers inside primitives — everything references a token.
   2. NO font below --t-cap (20px). Presentation, not mobile.
   3. NEVER put .with-bar on main title — only on kicker or subtitle.
   4. HeaderStack固化 two variants: .has-sub / .no-sub.
   5. CenteredHero has no em-dash assumption; line breaks via <br>.
   6. Cover / Closing have dedicated page shells (.ds-cover / .ds-closing).
   ══════════════════════════════════════════════════════════════════ */

/* ═══ Print / PDF export · preserve backgrounds, gradients, card fills
   (ADR-0006 + ADR-0007). Outside @media print because some browsers
   need the declaration present in normal context to honor it.
   No-op for screen rendering. */
*, *::before, *::after {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ═══════════════════════════════════════
   L1 · TOKENS (atomic, fixed; ALL usage elsewhere must reference these)
   ═══════════════════════════════════════ */
:root {
  /* === BRAND COLORS === */
  --c-blue:       #0078FC;
  --c-blue-60:    #0060D0;
  --c-blue-40:    #4DA6FF;
  --c-blue-20:    #80D4FF;
  --c-blue-10:    #EFF6FF;
  --c-blue-ghost: rgba(0,120,252,0.04);
  --c-blue-line:  rgba(0,120,252,0.15);

  --c-orange:     #FF6B2B;
  --c-rose:       #E8175D;
  --c-rose-10:    #FFF1F2;
  --c-rose-ghost: rgba(232,23,93,0.04);
  --c-rose-line:  rgba(232,23,93,0.15);

  --c-cyan:       #0EA5E9;
  --c-amber:      #F59E0B;

  /* === SEMANTIC COLORS (trend / status) === */
  --c-success:    #10B981;       /* ↑ positive metrics */
  --c-warning:    #F59E0B;       /* ~ neutral-caution */
  --c-danger:     #EF4444;       /* ↓ negative metrics */
  --c-success-10: #ECFDF5;
  --c-danger-10:  #FEF2F2;

  /* === TEXT COLORS === */
  --c-title:     #111827;
  --c-primary:   #1A1A1A;
  --c-secondary: #374151;
  --c-muted:     #6B7280;
  --c-disabled:  #9CA3AF;

  /* === SURFACE COLORS === */
  --c-white:     #FFFFFF;
  --c-card:      #F3F4F6;
  --c-divider:   #E5E7EB;
  --c-dark:      #111827;
  --c-dark-card: #1F2937;

  /* === TYPOGRAPHY SCALE (PPT floor = 20px) === */
  --t-stat:    160px;  /* BigNumber hero — single-metric page */
  --t-mega:    110px;  /* cover super-hero */
  --t-hero:    84px;   /* section hero */
  --t-h1:      60px;   /* page title */
  --t-h2:      44px;   /* sub-hero */
  --t-h3:      32px;   /* card title */
  --t-body-xl: 32px;   /* emphasized body */
  --t-body-lg: 26px;   /* body on content pages */
  --t-body:    22px;   /* standard secondary body */
  --t-body-sm: 20px;   /* FLOOR — never go below in content primitives */
  --t-chip:    20px;   /* chip / tag inside cards — readable at distance */
  --t-label:   18px;   /* kicker / eyebrow */
  --t-cap:     20px;   /* footnotes */

  /* === LETTER SPACING === */
  --ls-tight:  -2.5px;
  --ls-snug:   -1.5px;
  --ls-normal: -0.3px;
  --ls-label:  2.5px;

  /* === LINE HEIGHTS === */
  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  /* === SPACING (8px base) === */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 120px;

  /* === RADIUS === */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  18px;
  --r-2xl: 24px;
  --r-pill: 9999px;

  /* === SHADOWS === */
  --sh-card:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --sh-hover: 0 4px 12px rgba(0,0,0,.08);
  --sh-modal: 0 20px 60px rgba(0,0,0,.12);

  /* === MOTION === */
  --ease:        cubic-bezier(.22,1,.36,1);
  --dur-fast:    200ms;
  --dur-normal:  400ms;
  --dur-slow:    800ms;

  /* === FONTS === */
  /* Font stacks — Inter FIRST in --f-cn so Latin chars in Chinese text
     use Inter (via @font-face unicode-range in catlaxy-fonts.css), not
     system fallback. CJK chars fall through to Noto Sans SC. */
  --f-cn: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --f-en: 'Inter', 'Helvetica Neue', sans-serif;
  --f-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* === LAYOUT CONSTANTS === */
  --slide-w:         1920px;
  --slide-h:         1080px;
  --slide-pad:       130px;
  --slide-pad-x:     var(--slide-pad);
  --slide-safe-top:  160px;        /* extra room so title not glued to logo */
  --slide-safe-bot:  var(--slide-pad);
  --bbar-h:          50px;
  --logo-top:        60px;
  --logo-w:          260px;        /* unified logo size across all pages */
  --logo-w-hero:     420px;        /* cover + closing use same hero size */

  /* === COMPONENT-SPECIFIC FIXED TOKENS === */
  --card-pad:     var(--s-7);
  --card-radius:  var(--r-xl);
  --card-border:  2px solid var(--c-divider);

  --bar-thickness: 4px;
  --bar-h-kicker:  22px;     /* small bar, matches kicker line-height */
  --bar-h-sub:     28px;     /* medium bar for subtitle */

  /* Icon circles — UNIFIED style across all primitives
     单色规则：永远品牌蓝单色，不按 accent 切色（防止"花花绿绿"）
     Visual: dashed blue outline · white bg · solid blue glyph */
  --icon-circle:      64px;     /* default — RoleCard, FlowChain step */
  --icon-circle-sm:   48px;     /* compact — HubSpoke spoke */
  --icon-circle-lg:   80px;     /* hero — emphasis variants */
  --icon-inner:       30px;     /* glyph size in default circle */
  --icon-inner-sm:    22px;     /* glyph size in compact */
  --icon-inner-lg:    36px;
  --icon-border:      2px dashed rgba(0,120,252,.35);

  --qr-size-sm: 260px;
  --qr-size-md: 320px;
  --qr-size-lg: 400px;
}

/* ═══════════════════════════════════════
   L1.5 · BASE + TYPOGRAPHY UTILITIES
   ═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

.t-mega    { font-size: var(--t-mega);    font-weight: 900; color: var(--c-title); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.t-hero    { font-size: var(--t-hero);    font-weight: 900; color: var(--c-title); line-height: var(--lh-tight); letter-spacing: var(--ls-snug); }
.t-h1      { font-size: var(--t-h1);      font-weight: 900; color: var(--c-title); line-height: var(--lh-snug); letter-spacing: var(--ls-normal); }
.t-h2      { font-size: var(--t-h2);      font-weight: 900; color: var(--c-title); line-height: var(--lh-snug); }
.t-h3      { font-size: var(--t-h3);      font-weight: 700; color: var(--c-title); line-height: var(--lh-snug); }
.t-body-xl { font-size: var(--t-body-xl); font-weight: 400; color: var(--c-primary);   line-height: var(--lh-normal); }
.t-body-lg { font-size: var(--t-body-lg); font-weight: 400; color: var(--c-primary);   line-height: var(--lh-loose); }
.t-body    { font-size: var(--t-body);    font-weight: 400; color: var(--c-secondary); line-height: var(--lh-normal); }
.t-body-sm { font-size: var(--t-body-sm); font-weight: 400; color: var(--c-secondary); line-height: var(--lh-normal); }
.t-label   { font-size: var(--t-label);   font-weight: 700; color: var(--c-blue); letter-spacing: var(--ls-label); text-transform: uppercase; }
.t-cap     { font-size: var(--t-cap);     font-weight: 400; color: var(--c-muted); }

.em-blue, em.em-blue     { font-style: normal; color: var(--c-blue); }
.em-rose, em.em-rose     { font-style: normal; color: var(--c-rose); }
.em-orange, em.em-orange { font-style: normal; color: var(--c-orange); }
.em-title                { font-style: normal; color: var(--c-title); font-weight: 900; }

/* ═══════════════════════════════════════
   L2 · PRIMITIVE: HeaderStack (固化两种版式)
   Rules:
   - Title NEVER has bar (enforced — no ::before on .hs-title)
   - Only subtitle can optionally have bar (.hs-sub.with-bar)
   - Two variants: has-sub (title + subtitle) / no-sub (title only)
   Usage:
     <div class="prim-header-stack">
       <h2 class="hs-title">Main title <em class="em-blue">highlight</em></h2>
       <div class="hs-sub with-bar">Subtitle line</div>     ← optional
     </div>
   ═══════════════════════════════════════ */
.prim-header-stack { display: flex; flex-direction: column; gap: var(--s-4); }

.prim-header-stack .hs-title {
  font-size: var(--t-h1);
  font-weight: 900;
  color: var(--c-title);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  margin: 0;
  /* NO ::before allowed — title never has bar */
}

.prim-header-stack .hs-sub {
  font-size: var(--t-body-lg);
  font-weight: 400;
  color: var(--c-muted);
  line-height: var(--lh-normal);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.prim-header-stack .hs-sub.with-bar::before {
  content: '';
  width: var(--bar-thickness);
  height: var(--bar-h-sub);
  background: var(--c-blue);
  border-radius: calc(var(--bar-thickness) / 2);
  flex-shrink: 0;
}
.prim-header-stack .hs-sub.accent-rose.with-bar::before   { background: var(--c-rose); }
.prim-header-stack .hs-sub.accent-orange.with-bar::before { background: var(--c-orange); }

/* Size modifiers */
.prim-header-stack.size-hero .hs-title { font-size: var(--t-hero); letter-spacing: var(--ls-snug); line-height: var(--lh-tight); }
.prim-header-stack.size-h2   .hs-title { font-size: var(--t-h2); }

/* Alignment */
.prim-header-stack.align-center { text-align: center; align-items: center; }
.prim-header-stack.align-center .hs-sub { justify-content: center; }

/* ═══════════════════════════════════════
   L2 · PRIMITIVE: RoleCard
   ═══════════════════════════════════════ */
.prim-role-card {
  background: var(--c-white);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: all var(--dur-normal) var(--ease);
}
.prim-role-card:hover {
  border-color: var(--c-blue);
  box-shadow: var(--sh-hover);
  transform: translateY(-2px);
}
.prim-role-card .rc-head { display: flex; align-items: center; gap: var(--s-4); }
.prim-role-card .rc-icon {
  width: var(--icon-circle);                 /* 64px */
  height: var(--icon-circle);
  border-radius: 50%;
  background: var(--c-white);                 /* white bg */
  border: var(--icon-border);                 /* dashed blue outline */
  color: var(--c-blue);                       /* blue glyph, always */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--icon-inner);               /* 30px glyph */
  flex-shrink: 0;
}
.prim-role-card .rc-name {
  font-size: var(--t-h3);
  font-weight: 900;
  color: var(--c-title);
  line-height: 1;
}
.prim-role-card .rc-tag {
  font-size: var(--t-body-sm);
  color: var(--c-rose);
  font-weight: 600;
  line-height: var(--lh-snug);
}
.prim-role-card .rc-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: var(--t-body-sm);
  color: var(--c-secondary);
  line-height: var(--lh-normal);
}
.prim-role-card .rc-list li {
  padding-left: var(--s-4);
  position: relative;
}
.prim-role-card .rc-list li::before {
  content: '';
  position: absolute;
  left: 0; top: calc(var(--t-body-sm) * 0.55);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-blue);
}
.prim-role-card .rc-list li b { color: var(--c-title); font-weight: 700; }

/* Accent variants — affect TAG + BULLETS only, NEVER the icon (单色规则)
   If you need role differentiation: change rc-tag and bullet color.
   Icon stays --c-blue across all cards. */
.prim-role-card.accent-rose   .rc-list li::before { background: var(--c-rose); }
.prim-role-card.accent-rose   .rc-tag { color: var(--c-rose); }
.prim-role-card.accent-orange .rc-tag  { color: var(--c-orange); }
.prim-role-card.accent-orange .rc-list li::before { background: var(--c-orange); }

/* ═══════════════════════════════════════
   L2 · PRIMITIVE: StatCard
   ═══════════════════════════════════════ */
.prim-stat-card {
  background: var(--c-white);
  border: 1px solid var(--c-divider);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.prim-stat-card .sc-head { display: flex; align-items: center; gap: var(--s-3); }
.prim-stat-card .sc-dot {
  width: 12px; height: 12px;
  border-radius: 3px;
  background: var(--c-blue);
}
.prim-stat-card .sc-name {
  font-size: var(--t-body-sm);
  font-weight: 900;
  color: var(--c-title);
}
.prim-stat-card .sc-num {
  font-family: var(--f-en);
  font-size: 56px;
  font-weight: 900;
  color: var(--c-title);
  letter-spacing: -1px;
  line-height: 1;
}
.prim-stat-card .sc-unit {
  font-size: var(--t-body-sm);
  margin-left: var(--s-2);
  font-weight: 700;
  color: var(--c-muted);
}
.prim-stat-card .sc-sub {
  font-size: var(--t-body-sm);
  color: var(--c-muted);
  line-height: var(--lh-snug);
}
.prim-stat-card .sc-chips {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-2);
}
.prim-stat-card .sc-chips span {
  font-size: var(--t-chip);        /* 20px, readable at projector distance */
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--c-card);
  color: var(--c-secondary);
  font-weight: 400;
}

.prim-stat-card.accent-rose   .sc-dot { background: var(--c-rose); }
.prim-stat-card.accent-orange .sc-dot { background: var(--c-orange); }
.prim-stat-card.accent-cyan   .sc-dot { background: var(--c-cyan); }

.prim-stat-card.frame {
  background: var(--c-blue-ghost);
  border: 2px solid var(--c-blue-line);
  padding: var(--s-7);
}
.prim-stat-card.frame.accent-rose {
  background: var(--c-rose-ghost);
  border-color: var(--c-rose-line);
}
.prim-stat-card.frame .sc-num { font-size: 72px; color: var(--c-blue); }
.prim-stat-card.frame.accent-rose .sc-num { color: var(--c-rose); }

/* ═══════════════════════════════════════
   L2 · PRIMITIVE: StatTriple
   ═══════════════════════════════════════ */
.prim-stat-triple { display: flex; gap: var(--s-9); flex-wrap: wrap; }
.prim-stat-triple .st-cell { display: flex; flex-direction: column; gap: var(--s-1); }
.prim-stat-triple .st-num {
  font-family: var(--f-en);
  font-size: 64px;
  font-weight: 900;
  color: var(--c-blue);
  line-height: 1;
  letter-spacing: -1px;
}
.prim-stat-triple .st-lbl {
  font-size: var(--t-body-sm);
  color: var(--c-muted);
}
.prim-stat-triple.accent-rose .st-num { color: var(--c-rose); }

/* ═══════════════════════════════════════
   L2 · PRIMITIVE: TagGrid
   ═══════════════════════════════════════ */
.prim-tag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.prim-tag-grid .tg-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--c-card);
  border-radius: var(--r-md);
  font-size: var(--t-body-sm);
  color: var(--c-secondary);
  line-height: var(--lh-snug);
}
.prim-tag-grid .tg-item .tg-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-blue);
  flex-shrink: 0;
}
.prim-tag-grid.accent-rose .tg-item .tg-dot { background: var(--c-rose); }
.prim-tag-grid .tg-item.span-2 { grid-column: span 2; }

/* ═══════════════════════════════════════
   L2 · PRIMITIVE: CenteredHero (NEW — no em-dash assumption)
   Structure:
     <div class="prim-centered-hero">
       <div class="ch-over">overline</div>      optional
       <h2 class="ch-title">
         Main line<br>
         <em class="em-blue">Emphasis phrase</em>
       </h2>
       <div class="ch-body">body</div>           optional
       <div class="ch-coda">closing note</div>   optional
     </div>
   Rules:
   - NEVER use「——」「—」between title parts. Use <br> + <em>.
   - Emphasis phrase on its own visual line.
   ═══════════════════════════════════════ */
.prim-centered-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-10);              /* 64px, bigger breathing between blocks */
  max-width: 1500px;
  margin: 0 auto;
}
.prim-centered-hero .ch-over {
  font-size: var(--t-body-xl);
  color: var(--c-muted);
  font-weight: 400;
  line-height: var(--lh-snug);
}
.prim-centered-hero .ch-title {
  font-size: var(--t-hero);
  font-weight: 900;
  color: var(--c-title);
  line-height: 1.25;             /* looser so multi-line金句 breathes */
  letter-spacing: var(--ls-snug);
  margin: 0;
}
.prim-centered-hero .ch-title em { font-style: normal; }
.prim-centered-hero .ch-title br + em {
  display: inline-block;
  margin-top: var(--s-5);        /* extra gap before emphasis line */
}
.prim-centered-hero .ch-body {
  font-size: var(--t-body-lg);
  color: var(--c-secondary);
  line-height: 2;                /* 2x line height for dramatic pause */
  max-width: 1200px;
}
.prim-centered-hero .ch-coda {
  font-size: var(--t-body-xl);
  font-weight: 700;
  color: var(--c-blue);
  margin-top: var(--s-6);
}

/* ═══════════════════════════════════════
   L2 · PRIMITIVE: QRContact
   ═══════════════════════════════════════ */
.prim-qr-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
}
.prim-qr-contact .qr-box {
  width: var(--qr-size-md);
  height: var(--qr-size-md);
  background: var(--c-white);
  border-radius: var(--r-xl);
  border: 2px solid var(--c-divider);
  padding: var(--s-5);
  box-shadow: var(--sh-modal);
}
.prim-qr-contact .qr-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.prim-qr-contact .qr-caption {
  font-family: var(--f-en);
  font-size: var(--t-body);
  color: var(--c-secondary);
  font-weight: 600;
  letter-spacing: 0.5px;
}
.prim-qr-contact.size-sm .qr-box { width: var(--qr-size-sm); height: var(--qr-size-sm); padding: var(--s-4); }
.prim-qr-contact.size-lg .qr-box { width: var(--qr-size-lg); height: var(--qr-size-lg); padding: var(--s-6); }

/* ═══════════════════════════════════════
   L2 · PRIMITIVE: ProductPair
   ═══════════════════════════════════════ */
.prim-product-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); }
.prim-product-pair .pp-card {
  background: var(--c-white);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.prim-product-pair .pp-badge {
  display: inline-block;
  font-size: var(--t-label);
  font-weight: 900;
  letter-spacing: var(--ls-label);
  color: var(--c-blue);
  text-transform: uppercase;
  font-family: var(--f-en);
}
.prim-product-pair .pp-name {
  font-size: var(--t-h2);
  font-weight: 900;
  color: var(--c-title);
  line-height: var(--lh-snug);
}
.prim-product-pair .pp-tag {
  font-size: var(--t-body-lg);
  color: var(--c-muted);
  line-height: var(--lh-snug);
}
.prim-product-pair .pp-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-size: var(--t-body-sm);
  color: var(--c-secondary);
  line-height: var(--lh-snug);
}
.prim-product-pair .pp-list li {
  padding-left: var(--s-4);
  position: relative;
}
.prim-product-pair .pp-list li::before {
  content: '';
  position: absolute;
  left: 0; top: calc(var(--t-body-sm) * 0.55);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-blue);
}
.prim-product-pair .pp-card.accent-rose .pp-badge  { color: var(--c-rose); }
.prim-product-pair .pp-card.accent-rose .pp-list li::before { background: var(--c-rose); }

/* ═══════════════════════════════════════
   L2 · PRIMITIVE: TierBand
   ═══════════════════════════════════════ */
.prim-tier-band {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--s-7);
  align-items: center;
  padding: var(--s-6) var(--s-7);
  background: var(--c-white);
  border: 1px solid var(--c-divider);
  border-radius: var(--r-lg);
}
.prim-tier-band .tb-left { display: flex; flex-direction: column; gap: var(--s-1); }
.prim-tier-band .tb-label {
  font-size: var(--t-h3);
  font-weight: 900;
  color: var(--c-blue);
  line-height: 1;
}
.prim-tier-band .tb-sub {
  font-size: var(--t-body-sm);
  color: var(--c-muted);
}
.prim-tier-band .tb-cells {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--s-6);
}
.prim-tier-band .tb-cell { display: flex; flex-direction: column; gap: var(--s-1); }
.prim-tier-band .tb-cell b {
  font-family: var(--f-en);
  font-size: var(--t-h3);
  font-weight: 900;
  color: var(--c-title);
  letter-spacing: -1px;
  line-height: 1;
}
.prim-tier-band .tb-cell span {
  font-size: var(--t-body-sm);
  color: var(--c-muted);
  line-height: var(--lh-snug);
}
.prim-tier-band.accent-rose   .tb-label { color: var(--c-rose); }
.prim-tier-band.accent-orange .tb-label { color: var(--c-orange); }

/* ═══════════════════════════════════════
   L2 · PRIMITIVE: HighlightQuote (HQ)
   Two sizes × three tones. Size comes first — it is the decision that
   drives padding / type scale / decoration weight.

   SIZES:
     .prim-hq              → default: compact banner. Fits below other content
                             as a summary strip (e.g. role-grid + summary quote).
                             No decorative glyph — stays low-profile.
     .prim-hq.hero         → full-slide pull quote. Massive type, centered,
                             decorative open-quote glyph as anchor.

   TONES (stack on any size):
     (none)                → soft blue tint, dark text
     .accent-rose          → rose tint
     .on-dark              → inverse: dark bg + white text

   STRUCTURE:
     <div class="prim-hq [hero] [accent-rose|on-dark]">
       <div class="hq-text">core quote … <em>emphasis</em> … </div>
       <div class="hq-attr">— OPTIONAL ATTRIBUTION</div>
     </div>
   ═══════════════════════════════════════ */
.prim-hq {
  position: relative;
  background: var(--c-blue-10);
  border-radius: var(--r-xl);
  padding: var(--s-7) var(--s-9);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.prim-hq .hq-text {
  position: relative;
  font-size: var(--t-body-xl);
  font-weight: 900;
  color: var(--c-title);
  line-height: var(--lh-snug);
  letter-spacing: -0.2px;
  max-width: 1100px;
  margin: 0 auto;
}
.prim-hq .hq-text em {
  font-style: normal;
  color: var(--c-blue);
  background: linear-gradient(to top, rgba(0,120,252,0.18) 0.2em, transparent 0.2em);
  padding: 0 2px;
}
.prim-hq .hq-attr {
  margin-top: var(--s-3);
  font-family: var(--f-en);
  font-size: var(--t-label);
  font-weight: 900;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
}

/* HERO — full-slide pull quote.
   Single decorative element: a large, clearly-visible open-quote glyph
   positioned at top-center. One anchor, not two — no competing rule.
   Opacity 0.22 so it reads as a proper quote mark, not noise. */
.prim-hq.hero {
  background: transparent;     /* let slide bg + splash show through on hero */
  padding: var(--s-10) var(--s-10);
}
.prim-hq.hero::before {
  content: "\201C";
  position: absolute;
  top: calc(var(--s-4) * -1);
  left: 50%;
  transform: translateX(-50%);
  font-family: Georgia, 'Source Han Serif SC', 'Noto Serif SC', 'Times New Roman', serif;
  font-size: 240px;
  font-weight: 700;
  line-height: 0.9;
  color: var(--c-blue);
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
  letter-spacing: -0.05em;
}
.prim-hq.hero .hq-text {
  font-size: var(--t-hero);   /* 84px — was --t-h2 (44px), too small for hero */
  font-weight: 900;
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-tight);
  max-width: 1400px;
  margin-top: var(--s-8);
  position: relative;
  z-index: 1;
}
.prim-hq.hero .hq-attr {
  margin-top: var(--s-8);
  font-size: var(--t-body-lg);
  position: relative;
  z-index: 1;
}

/* Rose tone */
.prim-hq.accent-rose             { background: var(--c-rose-10); }
.prim-hq.accent-rose .hq-text em {
  color: var(--c-rose);
  background: linear-gradient(to top, rgba(232,23,93,0.18) 0.2em, transparent 0.2em);
}
.prim-hq.hero.accent-rose::before { color: var(--c-rose); }

/* Dark inverse tone — banner variant keeps dark box; hero variant is
   transparent (handled by .prim-hq.hero base rule above) so splash shows. */
.prim-hq.on-dark {
  background: var(--c-dark);
  color: var(--c-white);
}
.prim-hq.hero.on-dark {
  background: transparent;   /* override — hero on dark slide: no fill */
}
.prim-hq.on-dark .hq-text        { color: var(--c-white); }
.prim-hq.on-dark .hq-text em     {
  color: var(--c-blue-40);
  background: linear-gradient(to top, rgba(77,166,255,0.24) 0.2em, transparent 0.2em);
}
.prim-hq.on-dark .hq-attr        { color: rgba(255,255,255,0.55); }
.prim-hq.hero.on-dark::before    { color: var(--c-blue-40); opacity: 0.28; }

/* ═══════════════════════════════════════
   L2 · PRIMITIVE: ProblemList
   ═══════════════════════════════════════ */
.prim-problem-list {
  background: var(--c-blue-10);
  border-radius: var(--r-xl);
  padding: var(--s-7) var(--s-8);
}
.prim-problem-list .pl-head {
  font-size: var(--t-h3);
  font-weight: 900;
  color: var(--c-blue);
  margin-bottom: var(--s-5);
}
.prim-problem-list .pl-items {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4) var(--s-9);
}
.prim-problem-list .pl-items li {
  font-size: var(--t-body-sm);
  color: var(--c-primary);
  line-height: var(--lh-normal);
  padding-left: var(--s-4);
  position: relative;
}
.prim-problem-list .pl-items li::before {
  content: '';
  position: absolute;
  left: 0; top: calc(var(--t-body-sm) * 0.55);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-blue);
}
.prim-problem-list .pl-items li b {
  color: var(--c-title);
  font-weight: 900;
}

/* ═══════════════════════════════════════
   L2 · PRIMITIVE: DeltaCell (before → after with multiplier)
   Usage:
     <div class="prim-delta-cell">
       <div class="dc-before">旧方式</div>
       <div class="dc-arrow">→</div>
       <div class="dc-after">新方式</div>
       <div class="dc-mult">3×</div>
       <div class="dc-label">效率提升</div>
     </div>
   ═══════════════════════════════════════ */
.prim-delta-cell {
  background: var(--c-white);
  border: 1px solid var(--c-divider);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  grid-template-rows: auto auto;
  gap: var(--s-2) var(--s-4);
  align-items: center;
}
.prim-delta-cell .dc-before {
  font-size: var(--t-body-sm);
  color: var(--c-muted);
  text-decoration: line-through;
  text-decoration-color: var(--c-disabled);
}
.prim-delta-cell .dc-arrow {
  font-size: var(--t-body-lg);
  color: var(--c-blue);
  font-weight: 900;
}
.prim-delta-cell .dc-after {
  font-size: var(--t-body-sm);
  color: var(--c-title);
  font-weight: 900;
}
.prim-delta-cell .dc-mult {
  font-family: var(--f-en);
  font-size: var(--t-h2);
  font-weight: 900;
  color: var(--c-blue);
  line-height: 1;
  letter-spacing: -1px;
  grid-row: 1 / span 2;
  grid-column: 4;
}
.prim-delta-cell .dc-label {
  grid-column: 1 / span 3;
  font-size: var(--t-body-sm);
  color: var(--c-muted);
  line-height: var(--lh-snug);
}
.prim-delta-cell.accent-rose .dc-arrow,
.prim-delta-cell.accent-rose .dc-mult { color: var(--c-rose); }

/* ═══════════════════════════════════════
   L2 · PRIMITIVE: NumberedList (agenda / TOC)
   Usage:
     <ol class="prim-numbered-list">
       <li><span class="nl-num">01</span><div><div class="nl-title">Title</div><div class="nl-body">Description</div></div></li>
     </ol>
   ═══════════════════════════════════════ */
.prim-numbered-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
}
.prim-numbered-list li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--s-7);
  align-items: center;
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--c-divider);
}
.prim-numbered-list li:last-child { border-bottom: none; }
.prim-numbered-list .nl-num {
  font-family: var(--f-en);
  font-size: 56px;
  font-weight: 900;
  color: var(--c-blue);
  line-height: 1;
  letter-spacing: -1px;
}
.prim-numbered-list .nl-title {
  font-size: var(--t-h3);
  font-weight: 900;
  color: var(--c-title);
  line-height: var(--lh-snug);
  margin-bottom: var(--s-2);
}
.prim-numbered-list .nl-body {
  font-size: var(--t-body-sm);
  color: var(--c-secondary);
  line-height: var(--lh-normal);
}

/* ═══════════════════════════════════════
   L2 · PRIMITIVE: CompareTable — iPhone-spec style redesign
   设计原则：
   - 只有横线，无竖线（信息密度靠排版不靠格子）
   - 左列：维度名（深色、权重 700）
   - 中间：✗ + 灰色删除线（被淘汰的一方）
   - 右列：✓ + 蓝底 + 加粗（胜出的一方）
   - 表头有色点，三列对应
   Usage:
     <table class="prim-compare-table">
       <thead>
         <tr><th>维度</th>
             <th class="ct-col-neg">传统做法</th>
             <th class="ct-col-pos">CATLAXY</th></tr>
       </thead>
       <tbody>
         <tr><td>知识结构</td>
             <td class="ct-neg">文档片段</td>
             <td class="ct-pos">实体图 + 关系</td></tr>
       </tbody>
     </table>
   ═══════════════════════════════════════ */
.prim-compare-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  font-size: var(--t-body-sm);
  table-layout: fixed;
}

/* Header row */
.prim-compare-table thead th {
  padding: var(--s-4) var(--s-6);
  text-align: left;
  vertical-align: middle;
  font-size: var(--t-body);
  font-weight: 900;
  letter-spacing: -0.2px;
  border-bottom: 2px solid var(--c-title);
  position: relative;
}
.prim-compare-table thead th:first-child {
  color: var(--c-disabled);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
}
.prim-compare-table thead th.ct-col-neg {
  color: var(--c-muted);
}
.prim-compare-table thead th.ct-col-pos {
  color: var(--c-blue);
  position: relative;
}
.prim-compare-table thead th.ct-col-pos::before {
  content: '';
  position: absolute;
  left: var(--s-6);
  top: calc(50% - 6px);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c-blue);
}
.prim-compare-table thead th.ct-col-pos {
  padding-left: calc(var(--s-6) + 22px);
}

/* Body rows */
.prim-compare-table tbody td {
  padding: var(--s-5) var(--s-6);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--c-divider);
  line-height: var(--lh-snug);
}
.prim-compare-table tbody tr:last-child td { border-bottom: none; }

/* Left column: dimension label */
.prim-compare-table tbody td:first-child {
  font-weight: 700;
  color: var(--c-title);
  font-size: var(--t-body-sm);
}

/* Negative cell: crossed out + gray */
.prim-compare-table tbody td.ct-neg {
  color: var(--c-muted);
  position: relative;
  padding-left: calc(var(--s-6) + 24px);
}
.prim-compare-table tbody td.ct-neg::before {
  content: '✗';
  position: absolute;
  left: var(--s-6);
  top: 50%; transform: translateY(-50%);
  color: var(--c-disabled);
  font-weight: 900;
  font-size: var(--t-body);
}

/* Positive cell: bold + blue tint */
.prim-compare-table tbody td.ct-pos {
  color: var(--c-title);
  font-weight: 700;
  background: var(--c-blue-ghost);
  position: relative;
  padding-left: calc(var(--s-6) + 24px);
}
.prim-compare-table tbody td.ct-pos::before {
  content: '✓';
  position: absolute;
  left: var(--s-6);
  top: 50%; transform: translateY(-50%);
  color: var(--c-blue);
  font-weight: 900;
  font-size: var(--t-body);
}

/* ═══════════════════════════════════════
   L2 · PRIMITIVE: ImgSlot (dashed placeholder / screenshot)
   Usage:
     <div class="prim-img-slot"><span>screenshot</span></div>
     <div class="prim-img-slot"><img src="..."></div>
   ═══════════════════════════════════════ */
.prim-img-slot {
  background: var(--c-card);
  border: 2px dashed var(--c-divider);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-body-sm);
  color: var(--c-disabled);
  font-family: var(--f-en);
  font-weight: 600;
  letter-spacing: 1px;
  overflow: hidden;
}
.prim-img-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prim-img-slot.aspect-16-9 { aspect-ratio: 16 / 9; }
.prim-img-slot.aspect-4-3  { aspect-ratio: 4 / 3; }
.prim-img-slot.aspect-1-1  { aspect-ratio: 1 / 1; }
.prim-img-slot.aspect-photo { aspect-ratio: 3 / 4; }

/* ═══════════════════════════════════════
   L2 · PRIMITIVE: PersonCard (portrait + name + title)
   Usage:
     <div class="prim-person-card">
       <div class="prim-img-slot aspect-photo"><img src=""></div>
       <div class="pc-name">Alan</div>
       <div class="pc-title">创始人 · 首席 AI 架构师</div>
       <div class="pc-body">Optional short bio</div>
     </div>
   ═══════════════════════════════════════ */
.prim-person-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.prim-person-card .pc-name {
  font-size: var(--t-h3);
  font-weight: 900;
  color: var(--c-title);
  margin-top: var(--s-2);
}
.prim-person-card .pc-title {
  font-size: var(--t-body-sm);
  color: var(--c-blue);
  font-weight: 700;
}
.prim-person-card .pc-body {
  font-size: var(--t-body-sm);
  color: var(--c-secondary);
  line-height: var(--lh-normal);
}

/* ═══════════════════════════════════════
   L2 · PRIMITIVE: BigNumber (single-metric hero page)
   研究发现：100-160px 字号 + 下方支撑上下文。
   Usage:
     <div class="prim-big-number">
       <div class="bn-value">47<span class="bn-unit">%</span></div>
       <div class="bn-label">收入同比增长</div>
       <div class="bn-context">2026 Q1 vs 2025 Q1</div>
     </div>
   ═══════════════════════════════════════ */
.prim-big-number {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-6);
}
.prim-big-number .bn-value {
  font-family: var(--f-en);
  font-size: var(--t-stat);        /* 160px — dominant */
  font-weight: 900;
  color: var(--c-blue);
  line-height: 1;
  letter-spacing: -4px;
}
/* Accent variants ONLY use BRAND colors — never semantic (green/red).
   语义色 (success/danger) 物理上不会出现在 BigNumber，只在 TrendArrow 原语里。
   如需表达"涨/跌"语义，把 TrendArrow 放在 BigNumber 旁边，不改 BigNumber 本身颜色。*/
.prim-big-number.accent-rose   .bn-value { color: var(--c-rose); }
.prim-big-number.accent-orange .bn-value { color: var(--c-orange); }
.prim-big-number .bn-unit {
  font-size: calc(var(--t-stat) * 0.5);
  letter-spacing: -2px;
  margin-left: var(--s-1);
}
.prim-big-number .bn-label {
  font-size: var(--t-h2);
  font-weight: 700;
  color: var(--c-title);
  letter-spacing: var(--ls-normal);
}
.prim-big-number .bn-context {
  font-size: var(--t-body-lg);
  color: var(--c-muted);
  letter-spacing: 0.2px;
}

/* ═══════════════════════════════════════
   L2 · PRIMITIVE: TrendArrow (atom, embedded in other primitives)
   Usage: <span class="prim-trend" data-dir="up">12%</span>
   ═══════════════════════════════════════ */
.prim-trend {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--f-en);
  font-weight: 900;
  font-size: var(--t-body-sm);
  padding: 2px var(--s-2);
  border-radius: var(--r-sm);
}
.prim-trend[data-dir="up"]    { color: var(--c-success); background: var(--c-success-10); }
.prim-trend[data-dir="down"]  { color: var(--c-danger);  background: var(--c-danger-10); }
.prim-trend[data-dir="flat"]  { color: var(--c-muted);   background: var(--c-card); }
.prim-trend[data-dir="up"]::before    { content: '↑'; font-size: 1em; }
.prim-trend[data-dir="down"]::before  { content: '↓'; font-size: 1em; }
.prim-trend[data-dir="flat"]::before  { content: '→'; font-size: 1em; }

/* ═══════════════════════════════════════
   L2 · PRIMITIVE: KPIRow (Dashboard: 3-5 KPIs with trends)
   Usage:
     <div class="prim-kpi-row">
       <div class="kpi-cell">
         <div class="kpi-value">¥210万</div>
         <div class="kpi-label">月收入</div>
         <span class="prim-trend" data-dir="up">12%</span>
       </div>
     </div>
   ═══════════════════════════════════════ */
.prim-kpi-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--s-4);
}
.prim-kpi-row .kpi-cell {
  background: var(--c-white);
  border: 1px solid var(--c-divider);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.prim-kpi-row .kpi-value {
  font-family: var(--f-en);
  font-size: 48px;
  font-weight: 900;
  color: var(--c-title);
  letter-spacing: -1px;
  line-height: 1;
}
.prim-kpi-row .kpi-label {
  font-size: var(--t-body-sm);
  color: var(--c-muted);
}

/* ═══════════════════════════════════════
   L2 · PRIMITIVE: Quadrant (2×2 matrix — SWOT, strategy)
   Usage:
     <div class="prim-quadrant">
       <div class="q-cell"><div class="q-label">优势</div><ul class="q-list"><li>...</li></ul></div>
       <div class="q-cell q-tl">...</div>  <!-- q-tl | q-tr | q-bl | q-br -->
     </div>
   ═══════════════════════════════════════ */
.prim-quadrant {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--s-4);
  aspect-ratio: 16 / 9;
  max-height: 640px;
}
.prim-quadrant .q-cell {
  background: var(--c-white);
  border: 2px solid var(--c-divider);
  border-radius: var(--r-lg);
  padding: var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.prim-quadrant .q-cell .q-label {
  font-size: var(--t-h3);
  font-weight: 900;
  color: var(--c-title);
}
.prim-quadrant .q-cell .q-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: var(--s-2);
  font-size: var(--t-body-sm);
  color: var(--c-secondary);
  line-height: var(--lh-normal);
}
.prim-quadrant .q-cell .q-list li {
  padding-left: var(--s-4);
  position: relative;
}
.prim-quadrant .q-cell .q-list li::before {
  content: ''; position: absolute;
  left: 0; top: calc(var(--t-body-sm) * 0.55);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
/* 4 quadrant color variants — use in order q-tl, q-tr, q-bl, q-br */
.prim-quadrant .q-cell:nth-child(1) { border-color: var(--c-blue-line);   background: var(--c-blue-ghost); }
.prim-quadrant .q-cell:nth-child(1) .q-label { color: var(--c-blue); }
.prim-quadrant .q-cell:nth-child(2) { border-color: var(--c-rose-line);   background: var(--c-rose-ghost); }
.prim-quadrant .q-cell:nth-child(2) .q-label { color: var(--c-rose); }
.prim-quadrant .q-cell:nth-child(3) { border-color: rgba(245,158,11,.15); background: rgba(245,158,11,.04); }
.prim-quadrant .q-cell:nth-child(3) .q-label { color: var(--c-amber); }
.prim-quadrant .q-cell:nth-child(4) { border-color: rgba(14,165,233,.15); background: rgba(14,165,233,.04); }
.prim-quadrant .q-cell:nth-child(4) .q-label { color: var(--c-cyan); }

/* ═══════════════════════════════════════
   L2 · PRIMITIVE: Timeline (horizontal roadmap)
   Usage:
     <ol class="prim-timeline">
       <li><div class="tl-date">2024 Q1</div><div class="tl-title">产品立项</div><div class="tl-body">...</div></li>
     </ol>
   ═══════════════════════════════════════ */
.prim-timeline {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  position: relative;
}
/* horizontal rail */
.prim-timeline::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 24px;
  height: 2px;
  background: var(--c-divider);
  z-index: 0;
}
.prim-timeline li {
  position: relative;
  padding: 0 var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  z-index: 1;
}
/* node dot */
.prim-timeline li::before {
  content: '';
  display: block;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--c-blue);
  border: 4px solid var(--c-white);
  margin: 15px auto 0;
  box-shadow: 0 0 0 2px var(--c-blue);
}
.prim-timeline li .tl-date {
  font-family: var(--f-en);
  font-size: var(--t-label);
  font-weight: 900;
  color: var(--c-blue);
  letter-spacing: var(--ls-label);
  text-align: center;
  margin-top: var(--s-2);
}
.prim-timeline li .tl-title {
  font-size: var(--t-h3);
  font-weight: 900;
  color: var(--c-title);
  text-align: center;
  line-height: var(--lh-snug);
}
.prim-timeline li .tl-body {
  font-size: var(--t-body-sm);
  color: var(--c-muted);
  text-align: center;
  line-height: var(--lh-normal);
}

/* ═══════════════════════════════════════
   L3 · PATTERN: Grid (N×M)
   ═══════════════════════════════════════ */
.pat-grid { display: grid; }
.pat-grid.cols-1 { grid-template-columns: 1fr; }
.pat-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.pat-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.pat-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.pat-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.pat-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
.pat-grid.gap-3  { gap: var(--s-3); }
.pat-grid.gap-4  { gap: var(--s-4); }
.pat-grid.gap-5  { gap: var(--s-5); }
.pat-grid.gap-6  { gap: var(--s-6); }
.pat-grid.gap-7  { gap: var(--s-7); }

/* ═══════════════════════════════════════
   L3 · PATTERN: Split L/R
   ═══════════════════════════════════════ */
.pat-split { display: grid; gap: var(--s-11); align-items: center; }
.pat-split.split-50-50 { grid-template-columns: 1fr 1fr; }
.pat-split.split-40-60 { grid-template-columns: 2fr 3fr; }
.pat-split.split-33-67 { grid-template-columns: 1fr 2fr; }
.pat-split.split-60-40 { grid-template-columns: 3fr 2fr; }
.pat-split.split-67-33 { grid-template-columns: 2fr 1fr; }
.pat-split.gap-sm { gap: var(--s-9); }
.pat-split.align-start { align-items: start; }

/* ═══════════════════════════════════════
   L3 · PATTERN: FlowChain
   ═══════════════════════════════════════ */
.pat-flow-chain { display: flex; align-items: stretch; gap: var(--s-4); }
.pat-flow-chain .fc-step {
  flex: 1;
  background: var(--c-white);
  border: 1px solid var(--c-divider);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}
.pat-flow-chain .fc-icon {
  width: var(--icon-circle);                  /* unified 64px */
  height: var(--icon-circle);
  border-radius: 50%;
  background: var(--c-white);
  border: var(--icon-border);
  color: var(--c-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--icon-inner);               /* 30px */
}
.pat-flow-chain .fc-badge {
  font-size: var(--t-label);
  font-weight: 900;
  letter-spacing: var(--ls-label);
  color: var(--c-muted);
  text-transform: uppercase;
  font-family: var(--f-en);
}
.pat-flow-chain .fc-title {
  font-size: var(--t-h3);
  font-weight: 900;
  color: var(--c-title);
  line-height: var(--lh-snug);
}
.pat-flow-chain .fc-body {
  font-size: var(--t-body-sm);
  color: var(--c-muted);
  line-height: var(--lh-normal);
}
.pat-flow-chain .fc-arrow {
  display: flex;
  align-items: center;
  color: var(--c-blue);
  font-size: var(--t-h3);
  font-weight: 900;
}

/* ═══════════════════════════════════════
   L3 · PATTERN: HubSpoke (redesigned)
   设计：左侧品牌渐变 hub（dominant）+ 右侧 2 列 spoke 网格
   Usage:
     <div class="pat-hub-spoke">
       <div class="hs-center">
         <div class="hc-eyebrow">CORE PLATFORM</div>     // optional
         <div class="hc-title">CATLAXY AI</div>
         <div class="hc-body">5 类核心智能体<br>按业务场景自由组合</div>
       </div>
       <div class="hs-spokes">
         <div class="hs-spoke">
           <div class="ss-head">
             <div class="ss-icon"><i class="ph-bold ph-eye"></i></div>
             <div class="ss-title">洞察智能体</div>
           </div>
           <div class="ss-body">市场情报监测 · 竞品动态</div>
         </div>
         ...repeat
       </div>
     </div>
   ═══════════════════════════════════════ */
.pat-hub-spoke {
  display: grid;
  grid-template-columns: 520px 1fr;    /* was 420, widened so CATLAXY AI fits without clipping */
  grid-template-rows: 1fr;
  gap: var(--s-8);
  align-items: stretch;
  height: 100%;
}
.pat-hub-spoke .hs-center {
  background: linear-gradient(135deg, var(--c-blue), var(--c-blue-60));
  color: var(--c-white);
  border-radius: var(--r-2xl);
  padding: var(--s-10) var(--s-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--s-4);
  box-shadow: 0 20px 50px rgba(0,120,252,0.25);
  position: relative;
  overflow: hidden;
}
.pat-hub-spoke .hs-center::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  pointer-events: none;
}
.pat-hub-spoke .hs-center .hc-eyebrow {
  font-family: var(--f-en);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
}
.pat-hub-spoke .hs-center .hc-title {
  font-size: var(--t-hero);
  font-weight: 900;
  line-height: 1;
  letter-spacing: var(--ls-snug);
  color: var(--c-white);
}
.pat-hub-spoke .hs-center .hc-body {
  font-size: var(--t-body-lg);
  color: rgba(255,255,255,0.85);
  line-height: var(--lh-normal);
  margin-top: var(--s-3);
}

.pat-hub-spoke .hs-spokes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  align-items: stretch;
}
.pat-hub-spoke .hs-spoke {
  background: var(--c-white);
  border: var(--card-border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: all var(--dur-fast) var(--ease);
}
.pat-hub-spoke .hs-spoke:hover {
  border-color: var(--c-blue);
  transform: translateY(-2px);
  box-shadow: var(--sh-hover);
}
.pat-hub-spoke .hs-spoke .ss-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.pat-hub-spoke .ss-icon {
  width: var(--icon-circle-sm);
  height: var(--icon-circle-sm);
  border-radius: 50%;
  background: var(--c-white);
  border: var(--icon-border);
  color: var(--c-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--icon-inner-sm);
  flex-shrink: 0;
}
.pat-hub-spoke .ss-title {
  font-size: var(--t-body-lg);
  font-weight: 900;
  color: var(--c-title);
}
.pat-hub-spoke .ss-body {
  font-size: var(--t-body-sm);
  color: var(--c-muted);
  line-height: var(--lh-normal);
}
/* 5 spokes → last spans both columns (最后一个占满底部) */
.pat-hub-spoke .hs-spokes.count-5 .hs-spoke:last-child { grid-column: span 2; }

/* ═══════════════════════════════════════
   L3 · PATTERN: Tier Stack (vertical band stack)
   ═══════════════════════════════════════ */
.pat-tier-stack { display: flex; flex-direction: column; gap: var(--s-3); }

/* ═══════════════════════════════════════
   L3 · PATTERN: Bento Grid (2025-2026 trend, 非对称方块)
   灵感：Apple 产品总结页。大小直接编码优先级。
   Layout whitelist (3 main shapes):
     .pat-bento-4  → 1 big + 3 small  (hero + 3 stats)
     .pat-bento-5  → 2 big + 3 small  (hero + sub-hero + 3 facts)
     .pat-bento-6  → 3×2 masonry
   Cells size with modifier: .bento-cell.span-x2, .span-y2
   ═══════════════════════════════════════ */
.pat-bento {
  display: grid;
  gap: var(--s-4);
  grid-auto-rows: minmax(0, 1fr);
  height: 100%;
}
.pat-bento.pat-bento-4 {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
}
.pat-bento.pat-bento-4 > :nth-child(1) {
  grid-column: 1; grid-row: 1 / span 3;  /* big hero cell */
}
.pat-bento.pat-bento-5 {
  grid-template-columns: 2fr 2fr 1fr;
  grid-template-rows: repeat(2, 1fr);
}
.pat-bento.pat-bento-5 > :nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.pat-bento.pat-bento-5 > :nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
/* pat-bento-6 = asymmetric dashboard layout: 1 tall hero + 4 small (total 5 cells)
   First cell spans 2 rows on the left, 4 cells on the right */
.pat-bento.pat-bento-6 {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.pat-bento.pat-bento-6 > :first-child { grid-row: 1 / span 2; }

.pat-bento .bento-cell.span-x2 { grid-column: span 2; }
.pat-bento .bento-cell.span-y2 { grid-row: span 2; }

/* Base bento-cell */
.pat-bento .bento-cell {
  background: var(--c-white);
  border: 1px solid var(--c-divider);
  border-radius: var(--r-xl);
  padding: var(--s-7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-3);
  overflow: hidden;
  position: relative;
}
.pat-bento .bento-cell.bento-accent {
  background: linear-gradient(135deg, var(--c-blue), var(--c-blue-60));
  border-color: transparent;
  color: var(--c-white);
}
.pat-bento .bento-cell.bento-accent::before {
  content: ''; position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.pat-bento .bento-cell.bento-dark {
  background: var(--c-dark);
  color: var(--c-white);
  border-color: var(--c-dark);
}

/* Bento cell content helpers — replace inline styles
   Usage: <div class="bento-cell"><div class="bnt-label">MRR</div><div class="bnt-value">¥210万</div></div> */
.bento-cell .bnt-label {
  font-family: var(--f-en);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
}
.bento-cell .bnt-value {
  font-family: var(--f-en);
  font-size: 56px;
  font-weight: 900;
  color: var(--c-title);
  letter-spacing: -1.5px;
  line-height: 1;
}
.bento-cell .bnt-value-lg {
  font-family: var(--f-en);
  font-size: 88px;
  font-weight: 900;
  color: var(--c-title);
  letter-spacing: -2.5px;
  line-height: 1;
}
.bento-cell .bnt-unit {
  font-size: 0.4em;
  margin-left: 4px;
  font-weight: 700;
  color: var(--c-muted);
}
.bento-cell .bnt-sub {
  font-size: var(--t-body-sm);
  color: var(--c-muted);
  line-height: var(--lh-snug);
}
.bento-cell .bnt-title {
  font-size: var(--t-body-xl);
  font-weight: 900;
  color: var(--c-title);
  line-height: var(--lh-snug);
}
.bento-cell .bnt-body {
  font-size: var(--t-body-sm);
  color: var(--c-secondary);
  line-height: var(--lh-normal);
}

/* Dark / accent variants recolor the helpers */
.bento-cell.bento-accent .bnt-label,
.bento-cell.bento-accent .bnt-sub    { color: rgba(255,255,255,0.75); }
.bento-cell.bento-accent .bnt-value,
.bento-cell.bento-accent .bnt-value-lg,
.bento-cell.bento-accent .bnt-title  { color: var(--c-white); }
.bento-cell.bento-accent .bnt-unit   { color: rgba(255,255,255,0.6); }

.bento-cell.bento-dark .bnt-label,
.bento-cell.bento-dark .bnt-sub    { color: rgba(255,255,255,0.6); }
.bento-cell.bento-dark .bnt-value,
.bento-cell.bento-dark .bnt-value-lg,
.bento-cell.bento-dark .bnt-title  { color: var(--c-white); }

/* TrendArrow on colored bento backgrounds — the default green/red pills
   clash visually with the blue-gradient accent card and dark card.
   Keep the ↑/↓ glyph for semantic meaning, but render as a translucent
   white pill so it reads as chrome, not a stray green/red rectangle. */
.bento-cell.bento-accent .prim-trend,
.bento-cell.bento-dark   .prim-trend {
  background: rgba(255,255,255,0.14);
  color: var(--c-white);
  padding: 3px var(--s-3);
  align-self: flex-start;
}
.bento-cell.bento-accent .prim-trend[data-dir="up"],
.bento-cell.bento-accent .prim-trend[data-dir="down"],
.bento-cell.bento-accent .prim-trend[data-dir="flat"],
.bento-cell.bento-dark   .prim-trend[data-dir="up"],
.bento-cell.bento-dark   .prim-trend[data-dir="down"],
.bento-cell.bento-dark   .prim-trend[data-dir="flat"] {
  background: rgba(255,255,255,0.14);
  color: var(--c-white);
}

/* ═══════════════════════════════════════
   L4 · PAGE SHELL: Base slide
   ═══════════════════════════════════════ */
.ds-slide {
  width: var(--slide-w);
  height: var(--slide-h);
  position: relative;
  overflow: hidden;
  background: var(--c-white);
  font-family: var(--f-cn);
  color: var(--c-primary);
}
.ds-slide.dark { background: var(--c-dark); color: var(--c-white); }
.ds-slide.dark .hs-title,
.ds-slide.dark .ch-title,
.ds-slide.dark .pp-name,
.ds-slide.dark .rc-name,
.ds-slide.dark .sc-name { color: var(--c-white); }
.ds-slide.dark .hs-sub,
.ds-slide.dark .ch-body,
.ds-slide.dark .sc-sub { color: rgba(255,255,255,0.7); }
.ds-slide.dark .ch-over { color: rgba(255,255,255,0.55); }
.ds-slide.dark .ds-logo { color: var(--c-white); }

/* Safe frame — content pages */
.ds-safe {
  position: absolute;
  top: var(--slide-safe-top);
  left: var(--slide-pad-x);
  right: var(--slide-pad-x);
  bottom: var(--slide-safe-bot);
  display: flex;
  flex-direction: column;
  z-index: 1;
}
.ds-safe > * + * { margin-top: var(--s-8); }
.ds-safe .ds-head + * { margin-top: var(--s-9); }

/* Centered content area — transition / cover pages */
.ds-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--slide-pad-x) var(--slide-safe-bot);
  z-index: 1;
}

/* Logo mark (top-left, inside top margin) */
.ds-logo {
  position: absolute;
  top: var(--logo-top);
  left: var(--slide-pad-x);
  z-index: 5;
  color: var(--c-blue);
  line-height: 0;
}
.ds-logo svg { width: var(--logo-w); height: auto; display: block; }

/* Bottom bar (page number only, no left label — symmetric chrome) */
.ds-bbar {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  height: var(--bbar-h);
  display: flex;
  align-items: center;
  padding: 0 var(--slide-pad-x);
  z-index: 5;
}
.ds-bbar .pg-num {
  margin-left: auto;
  font-family: var(--f-en);
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: var(--t-body-sm);
  color: var(--c-disabled);
}
.ds-slide.dark .ds-bbar .pg-num { color: rgba(255,255,255,0.35); }

/* ═══════════════════════════════════════
   L4 · PAGE SHELL: Cover / Closing (unified logo position + size)
   Rules:
   - Logo always absolutely positioned at same (top, left) on both
   - Logo size always --logo-w-hero (420px)
   - Works whether logo is inside or outside ds-cover/ds-closing parent
   ═══════════════════════════════════════ */
.cv-logo,
.cl-logo {
  position: absolute;
  top: var(--s-12);                /* 120px from top — same on both */
  left: var(--s-12);               /* 120px from left — same on both */
  color: var(--c-blue);
  line-height: 0;
  z-index: 2;
}
.cv-logo svg,
.cl-logo svg {
  width: var(--logo-w-hero);
  height: auto;
  display: block;
  fill: currentColor;              /* ensure glyphs inherit color */
}

/* Cover body — original legacy behavior: left-aligned stack, vertically centered.
   cv-logo remains absolute top-left (see .cv-logo/.cl-logo rule above). */
.ds-cover {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  inset: 0;
  padding: var(--s-12) var(--s-12) var(--slide-safe-bot);
  z-index: 1;
}
.ds-cover .cv-title {
  font-size: var(--t-mega);
  font-weight: 900;
  color: var(--c-title);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--s-5);
}
.ds-cover .cv-title em { font-style: normal; color: var(--c-blue); }
.ds-cover .cv-sig {
  margin-top: var(--s-10);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--t-body-lg);
  color: var(--c-muted);
}
.ds-cover .cv-sig .cv-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-rose);
  flex-shrink: 0;
}
.ds-cover .cv-sig .cv-sep {
  width: 1px; height: 20px;
  background: var(--c-divider);
}

/* Closing body — original grid: left column content (cl-title/cl-sub) + right column QR */
.ds-closing {
  display: grid;
  grid-template-columns: 1fr var(--qr-size-lg);
  gap: var(--s-11);
  align-items: center;
  position: absolute;
  inset: 0;
  padding: var(--s-12) var(--s-12) var(--slide-safe-bot);
  z-index: 1;
}
.ds-closing .cl-body {                 /* NEW wrapper for left column */
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
}
.ds-closing .cl-title {
  font-size: var(--t-mega);
  font-weight: 900;
  color: var(--c-title);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
.ds-closing .cl-title em { font-style: normal; color: var(--c-blue); }
.ds-closing .cl-sub {
  font-size: var(--t-body-xl);
  color: var(--c-secondary);
  line-height: var(--lh-normal);
  max-width: 820px;
}
.ds-closing .cl-sub b {
  color: var(--c-blue);
  font-weight: 900;
}

/* ═══════════════════════════════════════
   SPLASH SYSTEM (background art, unchanged DNA from v3)
   ═══════════════════════════════════════ */
.splash { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.splash .b { position: absolute; filter: url(#sf); }
.b1{width:420px;height:360px;bottom:-140px;left:-120px;border-radius:62% 38% 46% 54%/55% 68% 32% 45%}
.b2{width:350px;height:380px;bottom:-100px;left:50px;border-radius:44% 56% 63% 37%/38% 52% 48% 62%}
.b3{width:280px;height:320px;bottom:-20px;left:-40px;border-radius:58% 42% 35% 65%/48% 36% 64% 52%}
.b4{width:240px;height:280px;bottom:-70px;left:220px;border-radius:36% 64% 52% 48%/62% 44% 56% 38%}
.b5{width:200px;height:240px;bottom:30px;left:100px;border-radius:52% 48% 68% 32%/42% 58% 42% 58%}
.b6{width:160px;height:200px;bottom:-40px;left:340px;border-radius:68% 32% 42% 58%/35% 65% 35% 65%}
.b7{width:440px;height:380px;top:-120px;right:-60px;border-radius:38% 62% 55% 45%/62% 38% 62% 38%}
.b8{width:380px;height:360px;top:-80px;right:160px;border-radius:55% 45% 38% 62%/45% 55% 45% 55%}
.b9{width:300px;height:320px;top:-10px;right:-20px;border-radius:42% 58% 62% 38%/58% 42% 58% 42%}
.b10{width:260px;height:280px;top:40px;right:280px;border-radius:65% 35% 45% 55%/38% 62% 38% 62%}
.b11{width:200px;height:240px;top:-50px;right:480px;border-radius:48% 52% 58% 42%/52% 48% 52% 48%}
.big .b1{width:560px;height:480px;bottom:-120px;left:-80px}.big .b2{width:480px;height:500px;bottom:-80px;left:80px}.big .b3{width:400px;height:440px;bottom:10px;left:-10px}.big .b4{width:340px;height:380px;bottom:-40px;left:300px}.big .b5{width:280px;height:320px;bottom:60px;left:150px}.big .b6{width:240px;height:280px;bottom:0;left:380px}.big .b7{width:560px;height:480px;top:-80px;right:-60px}.big .b8{width:480px;height:480px;top:-50px;right:160px}.big .b9{width:400px;height:420px;top:20px;right:-20px}.big .b10{width:340px;height:360px;top:80px;right:280px}.big .b11{width:260px;height:300px;top:-10px;right:480px}
.pa .b1{background:linear-gradient(135deg,#00C2FF,#0078FC);opacity:.22}.pa .b2{background:linear-gradient(180deg,#4DA6FF,#0060D0);opacity:.18}.pa .b3{background:linear-gradient(220deg,#80D4FF,#0078FC);opacity:.15}.pa .b4{background:linear-gradient(160deg,#00C2FF,#3B8FFF);opacity:.14}.pa .b5{background:linear-gradient(280deg,#5BB8FF,#0060D0);opacity:.12}.pa .b6{background:linear-gradient(200deg,#00C2FF,#4DA6FF);opacity:.10}.pa .b7{background:linear-gradient(315deg,#0078FC,#80D4FF);opacity:.20}.pa .b8{background:linear-gradient(250deg,#3B8FFF,#00C2FF);opacity:.16}.pa .b9{background:linear-gradient(200deg,#0060D0,#5BB8FF);opacity:.14}.pa .b10{background:linear-gradient(170deg,#4DA6FF,#0078FC);opacity:.12}.pa .b11{background:linear-gradient(140deg,#00C2FF,#3B8FFF);opacity:.10}
.pb .b1{background:linear-gradient(135deg,#FF8A65,#E8175D);opacity:.20}.pb .b7{background:linear-gradient(315deg,#E8175D,#FF8DC7);opacity:.18}.pb .b8{background:linear-gradient(250deg,#FF6B2B,#FFB347);opacity:.15}
/* Soft variant — content (safe) pages: corner-only, halved opacity so
   the splash doesn't compete with primitives. */
.splash.soft .b { opacity: 0.10 !important; }
.splash.soft.pa .b1 { opacity: 0.12 !important; }
.splash.soft.pa .b7 { opacity: 0.10 !important; }

.splash-dk .b{opacity:1 !important;}
.splash-dk.pa .b1{opacity:.32 !important}.splash-dk.pa .b2{opacity:.26 !important}
.splash-dk.pa .b7{opacity:.30 !important}.splash-dk.pa .b8{opacity:.24 !important}
.splash-dk.pa .b3{opacity:.20 !important}.splash-dk.pa .b9{opacity:.22 !important}
@keyframes d1{0%{transform:translate(0,0) scale(.85) rotate(0)}50%{transform:translate(20px,-14px) scale(1.08) rotate(5deg)}100%{transform:translate(0,0) scale(.85) rotate(0)}}
@keyframes d2{0%{transform:translate(0,0) scale(.9) rotate(0)}50%{transform:translate(-15px,18px) scale(1.15) rotate(-4deg)}100%{transform:translate(0,0) scale(.9) rotate(0)}}
@keyframes d3{0%{transform:translate(0,0) scale(.88) rotate(0)}50%{transform:translate(14px,20px) scale(1.12) rotate(4deg)}100%{transform:translate(0,0) scale(.88) rotate(0)}}
.b1{animation:d1 8s linear infinite}.b2{animation:d2 8s linear infinite;animation-delay:-.96s}.b3{animation:d3 8s linear infinite;animation-delay:-2s}.b4{animation:d1 8s linear infinite;animation-delay:-2.96s}.b5{animation:d2 8s linear infinite;animation-delay:-4s}.b6{animation:d3 8s linear infinite;animation-delay:-4.96s}.b7{animation:d2 8s linear infinite;animation-delay:-.64s}.b8{animation:d1 8s linear infinite;animation-delay:-1.6s}.b9{animation:d3 8s linear infinite;animation-delay:-2.64s}.b10{animation:d1 8s linear infinite;animation-delay:-3.6s}.b11{animation:d2 8s linear infinite;animation-delay:-4.64s}