/* ==========================================================================
   圣元医疗科技（常州）有限公司 · 官网设计系统
   Design tokens + components. 科技感 / 数据企业风格
   ========================================================================== */

:root{
  /* 品牌（取自 Armeebeauty 圣元医疗 标识紫）——整体调淡一档，仍保证正文对比度 */
  --brand-900:#332659;
  --brand-800:#3F2F6C;
  --brand-700:#4C3A83;
  --brand-600:#5A449C;
  --brand-500:#6E58B6;
  --brand-400:#9A87DA;
  --brand-200:#DDD5F6;
  --brand-100:#F1EDFC;
  --brand-50:#F8F6FE;

  /* 数据/科技强调色（青） */
  --cyan-700:#0A7D94;
  --cyan-600:#1497B3;
  --cyan-500:#2FB3CF;
  --cyan-400:#60CEE5;
  --cyan-200:#C8EDF6;
  --cyan-100:#E9F8FC;

  /* 多元化辅助色（新增：让版面色彩更丰富） */
  --sky-600:#3C7CD6;   --sky-100:#EAF2FD;
  --mint-600:#12A57E;  --mint-100:#E6F7F1;
  --amber-600:#C57D18; --amber-100:#FDF3E3;
  --rose-600:#C65683;  --rose-100:#FCEEF4;
  --violet-600:#7C5DD8;--violet-100:#F0EBFD;
  --teal-600:#0E9CB0;  --teal-100:#E4F7FA;

  /* 传统辅助色 */
  --pink-300:#F8DCE4;
  --pink-100:#FDF3F7;
  --gold-500:#C8A24A;
  --green-500:#17A97A;
  --amber-500:#E39A2A;

  /* 中性 —— 深色区块由近黑改为柔和靛蓝，整体更轻 */
  --ink-900:#1B2440;
  --ink-800:#242E4E;
  --ink-700:#2F3862;
  --paper:#FFFFFF;
  --paper-2:#F8F9FD;
  --paper-3:#F1F3FA;
  --line:#E6EAF5;
  --line-2:#EFF2FA;
  --line-dark:rgba(255,255,255,.16);
  --text:#1A2137;
  --text-2:#414B67;
  --muted:#5F6985;
  --muted-2:#7D87A2;

  --radius-s:8px;
  --radius:14px;
  --radius-l:22px;
  --radius-xl:30px;

  --shadow-s:0 1px 2px rgba(13,20,36,.06), 0 2px 8px rgba(13,20,36,.04);
  --shadow:0 6px 24px rgba(13,20,36,.07), 0 2px 8px rgba(13,20,36,.04);
  --shadow-l:0 24px 60px -18px rgba(20,12,60,.28);

  --maxw:1200px;
  --font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-num:"DIN Alternate","Bahnschrift","Inter","Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--paper);
  line-height:1.75;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.25;letter-spacing:-.01em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

::selection{background:var(--brand-400);color:#fff}

/* ---------- 通用容器 ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:920px}

.section{padding:96px 0}
.section.tight{padding:64px 0}
.section.dark{
  background:linear-gradient(172deg,#1B2440 0%,#242E4E 54%,#1F2B49 100%);
  color:#fff;
}
.section.dark::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 420px at 88% -6%,rgba(96,206,229,.2),transparent 62%),
             radial-gradient(680px 400px at 6% 106%,rgba(154,135,218,.24),transparent 64%);}
.section.dark{position:relative;overflow:hidden}
.section.dark>.wrap{position:relative;z-index:1}
.section.soft{background:var(--paper-2)}
/* 柔和浅色调区块：让页面色彩更丰富 */
.section.tint-violet{background:linear-gradient(180deg,#F8F6FE 0%,#F3F1FD 100%)}
.section.tint-teal{background:linear-gradient(180deg,#F2FBFC 0%,#EDF8FB 100%)}
.section.tint-amber{background:linear-gradient(180deg,#FFFCF7 0%,#FDF6EC 100%)}
.section.tint-rose{background:linear-gradient(180deg,#FFF8FB 0%,#FDF1F6 100%)}
.section.tint-mint{background:linear-gradient(180deg,#F4FCF9 0%,#EDF9F4 100%)}
.section.mesh{
  background:
    radial-gradient(760px 420px at 12% 0%,rgba(154,135,218,.14),transparent 60%),
    radial-gradient(680px 380px at 92% 14%,rgba(96,206,229,.15),transparent 60%),
    radial-gradient(620px 380px at 60% 100%,rgba(198,86,131,.09),transparent 62%),
    var(--paper-2);
}

/* ---------- 文本工具 ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand-500);
}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--brand-500),var(--cyan-400))}
.section.dark .eyebrow{color:var(--cyan-400)}
.section.dark .eyebrow::before{background:linear-gradient(90deg,var(--cyan-400),var(--brand-400))}

.section-head{max-width:760px;margin-bottom:56px}
.section-head h2{font-size:clamp(26px,3.4vw,40px);margin:18px 0 0}
.section-head .lead{margin-top:18px;color:var(--muted);font-size:17px}
.section.dark .section-head .lead{color:rgba(255,255,255,.66)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}

.grad-text{
  background:linear-gradient(100deg,var(--brand-500) 0%,var(--brand-400) 42%,var(--cyan-500) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.section.dark .grad-text{
  background:linear-gradient(100deg,#fff 0%,#C9B6FF 45%,var(--cyan-400) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:88px;display:flex;align-items:center;
  transition:background .3s ease,box-shadow .3s ease,border-color .3s ease,height .3s ease;
  border-bottom:1px solid transparent;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.site-header.on-dark{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.site-header.scrolled{
  background:rgba(255,255,255,.94);
  border-bottom-color:var(--line);
  box-shadow:0 6px 26px rgba(13,20,36,.06);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.site-header .wrap{display:flex;align-items:center;gap:22px;max-width:1280px}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand img{height:63px;width:auto;transition:filter .3s,opacity .3s}

/* 语言切换 */
.lang{display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;
  border:1px solid var(--line);background:var(--paper-2);flex:0 0 auto}
.lang a{padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:600;line-height:1;
  color:var(--text-2);letter-spacing:.02em;transition:color .2s,background .2s,box-shadow .2s;white-space:nowrap}
.lang a:hover{color:var(--brand-600)}
.lang a.on{background:#fff;color:var(--brand-600);box-shadow:0 1px 4px rgba(13,20,36,.09)}
.site-header.on-dark:not(.scrolled) .lang{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.08)}
.site-header.on-dark:not(.scrolled) .lang a{color:rgba(255,255,255,.72)}
.site-header.on-dark:not(.scrolled) .lang a:hover{color:#fff}
.site-header.on-dark:not(.scrolled) .lang a.on{background:rgba(255,255,255,.94);color:var(--brand-700);box-shadow:none}

/* 抽屉内语言切换 */
.drawer .lang-row{display:flex;gap:8px;padding:18px 22px 22px;margin-top:6px;border-top:1px solid var(--line)}
.drawer .lang-row a{flex:1;text-align:center;padding:11px 6px;border-radius:10px;
  border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--text-2);transition:.2s}
.drawer .lang-row a:hover{border-color:var(--brand-400);color:var(--brand-600)}
.drawer .lang-row a.on{background:var(--brand-100);border-color:var(--brand-400);color:var(--brand-700)}
.brand .logo-dark{display:none}
.site-header.on-dark:not(.scrolled) .brand .on-light{filter:brightness(0) invert(1)}
.brand-txt{display:none}

.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-link{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  padding:10px 15px;border-radius:10px;white-space:nowrap;
  font-size:15px;font-weight:500;color:var(--text-2);
  transition:color .2s,background .2s;
}
.nav-link:hover{color:var(--brand-600);background:var(--paper-2)}
.nav-link.active{color:var(--brand-600);font-weight:600}
.nav-link.active::after{
  content:"";position:absolute;left:15px;right:15px;bottom:2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand-500),var(--cyan-400));
}
.site-header.on-dark:not(.scrolled) .nav-link{color:rgba(255,255,255,.82)}
.site-header.on-dark:not(.scrolled) .nav-link:hover{color:#fff;background:rgba(255,255,255,.1)}
.site-header.on-dark:not(.scrolled) .nav-link.active{color:#fff}

/* 英文 / 日文页头：标签文字比中文长，同等宽度下需要更紧凑的排布 */
html[lang="en"] .site-header .wrap,html[lang="ja"] .site-header .wrap{gap:12px}
html[lang="en"] .nav,html[lang="ja"] .nav{gap:0}
html[lang="en"] .nav-link,html[lang="ja"] .nav-link{padding:10px 8px;font-size:13.5px}
html[lang="en"] .lang a,html[lang="ja"] .lang a{padding:6px 9px;font-size:12px}
html[lang="en"] .header-cta,html[lang="ja"] .header-cta{padding:10px 14px;font-size:13.5px}
html[lang="en"] .nav-link.active::after,html[lang="ja"] .nav-link.active::after{left:8px;right:8px}

.nav-item{position:relative}
.caret{width:9px;height:9px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s;opacity:.6}
.nav-item.open .caret{transform:rotate(-135deg) translateY(-3px)}
.dropdown{
  position:absolute;top:calc(100% + 10px);left:0;min-width:308px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-l);padding:10px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s,transform .22s,visibility .22s;
}
.nav-item.open .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.dropdown-head{
  padding:8px 12px 10px;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);
}
.dropdown a{
  display:flex;gap:13px;align-items:flex-start;padding:12px;border-radius:10px;
  transition:background .18s;
}
.dropdown a:hover{background:var(--paper-2)}
.dd-ico{
  flex:0 0 38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--brand-100),var(--cyan-100));
  color:var(--brand-600);
}
.dd-ico svg{width:20px;height:20px}
.dd-t{font-size:14.5px;font-weight:600;color:var(--text);line-height:1.4}
.dd-d{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5}

.header-cta{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:11px 20px;border-radius:999px;font-size:14.5px;font-weight:600;
  color:#fff;background:linear-gradient(100deg,var(--brand-600),var(--brand-500) 55%,var(--cyan-600));
  box-shadow:0 8px 22px -8px rgba(75,42,150,.7);
  transition:transform .2s,box-shadow .2s;
}
.header-cta:hover{transform:translateY(-1px);box-shadow:0 12px 28px -8px rgba(75,42,150,.8)}

.burger{
  display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:11px;
  background:#fff;align-items:center;justify-content:center;cursor:pointer;
}
.burger span{display:block;width:17px;height:2px;background:var(--text);border-radius:2px;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:2px;background:var(--text);border-radius:2px}
.burger span::before{top:-5.5px}
.burger span::after{top:5.5px}
.site-header.on-dark:not(.scrolled) .burger{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24)}
.site-header.on-dark:not(.scrolled) .burger span,
.site-header.on-dark:not(.scrolled) .burger span::before,
.site-header.on-dark:not(.scrolled) .burger span::after{background:#fff}

/* 移动端抽屉 */
.drawer{
  position:fixed;inset:74px 0 0;z-index:190;background:#fff;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;padding:20px 24px 60px;
}
.drawer.open{transform:translateX(0)}
.drawer a{display:block;padding:15px 4px;border-bottom:1px solid var(--line);font-size:16px;font-weight:500}
.drawer .sub a{padding-left:22px;font-size:15px;color:var(--muted);border-bottom-color:var(--paper-3)}
.drawer .sub{display:none}
.drawer .sub.open{display:block}
.drawer .grp>a{display:flex;justify-content:space-between;align-items:center}
.drawer .grp>a::after{content:"";width:8px;height:8px;border-right:1.6px solid var(--muted-2);border-bottom:1.6px solid var(--muted-2);transform:rotate(45deg);transition:transform .2s}
.drawer .grp.open>a::after{transform:rotate(-135deg)}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 28px;border-radius:999px;font-size:15.5px;font-weight:600;
  border:1px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s,color .2s;
  white-space:nowrap;
}
.btn-primary{
  color:#fff;background:linear-gradient(100deg,var(--brand-600),var(--brand-500) 52%,var(--cyan-600));
  box-shadow:0 12px 30px -12px rgba(75,42,150,.75);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 38px -12px rgba(75,42,150,.85)}
.btn-ghost{color:var(--brand-700);background:#fff;border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brand-400);color:var(--brand-600);transform:translateY(-2px)}
.btn-outline-light{color:#fff;border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.06)}
.btn-outline-light:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6);transform:translateY(-2px)}
.btn svg{width:17px;height:17px}
.btn-lg{padding:16px 34px;font-size:16.5px}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(1100px 600px at 10% -12%,rgba(154,135,218,.5) 0%,transparent 62%),
             radial-gradient(980px 540px at 94% 4%,rgba(96,206,229,.38) 0%,transparent 60%),
             radial-gradient(760px 520px at 60% 110%,rgba(198,86,131,.24) 0%,transparent 64%),
             linear-gradient(168deg,#1B2440 0%,#273253 52%,#20314D 100%);
  padding:168px 0 96px;
  isolation:isolate;
}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.72}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(700px 380px at 50% 112%,rgba(96,206,229,.18),transparent 70%);
}
.hero-inner{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:64px;align-items:center}
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  font-size:13px;color:rgba(255,255,255,.86);letter-spacing:.02em;
}
.hero-badge i{width:7px;height:7px;border-radius:50%;background:var(--cyan-400);box-shadow:0 0 0 4px rgba(34,211,238,.18);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero h1{
  font-size:clamp(34px,5vw,60px);line-height:1.14;margin:26px 0 0;letter-spacing:-.02em;
}
.hero h1 em{
  font-style:normal;display:block;
  font-size:.5em;font-weight:600;line-height:1.4;letter-spacing:0;
  color:rgba(255,255,255,.9);margin-top:18px;
}
.hero .sub{margin-top:24px;font-size:17.5px;line-height:1.85;color:rgba(255,255,255,.72);max-width:620px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero-meta{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:40px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12)}
.hero-meta div{font-size:13.5px;color:rgba(255,255,255,.55)}
.hero-meta strong{display:block;color:#fff;font-family:var(--font-num);font-size:26px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.hero-meta span{font-size:12.5px}

/* hero 右侧数据面板 */
.panel{
  position:relative;border-radius:var(--radius-l);padding:26px;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow-l);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.panel-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1)}
.panel-top b{font-size:14px;font-weight:600;letter-spacing:.02em}
.panel-top .tag{font-size:11.5px;padding:5px 11px;border-radius:999px;background:rgba(34,211,238,.16);color:var(--cyan-400);border:1px solid rgba(34,211,238,.3);letter-spacing:.06em}
.kpi-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;background:rgba(255,255,255,.1);border-radius:var(--radius);overflow:hidden;margin-top:18px}
.kpi{background:rgba(9,14,30,.66);padding:20px 18px}
.kpi .n{font-family:var(--font-num);font-size:34px;font-weight:700;line-height:1.1;background:linear-gradient(120deg,#fff,#9FD8FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.kpi .n small{font-size:16px;font-weight:600;margin-left:2px}
.kpi .l{font-size:12.5px;color:rgba(255,255,255,.6);margin-top:7px;line-height:1.5}
.panel-foot{margin-top:18px;font-size:12px;color:rgba(255,255,255,.42);line-height:1.7}
.bars{display:flex;align-items:flex-end;gap:5px;height:56px;margin-top:18px}
.bars i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,rgba(34,211,238,.85),rgba(138,92,224,.35));animation:grow 3.6s ease-in-out infinite}
@keyframes grow{0%,100%{transform:scaleY(.62)}50%{transform:scaleY(1)}}

/* hero 右侧：医疗数据主题视觉 */
.hero-visual{
  position:relative;margin:0;border-radius:var(--radius-l);overflow:hidden;
  border:1px solid rgba(255,255,255,.15);background:#080D1C;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}
.hero-visual img{display:block;width:100%;height:auto;aspect-ratio:1024/891;object-fit:cover}
.hero-visual::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,11,24,.06) 0%,rgba(7,11,24,0) 38%,rgba(7,11,24,.88) 100%);
}
.hv-chip{
  position:absolute;top:16px;left:16px;z-index:1;display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  color:#fff;background:rgba(9,14,30,.58);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.hv-chip i{width:6px;height:6px;border-radius:50%;background:var(--cyan-400);box-shadow:0 0 0 3px rgba(34,211,238,.2)}
.hv-cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:24px 26px}
.hv-cap b{display:block;font-size:15.5px;font-weight:700;color:#fff;letter-spacing:.01em}
.hv-cap span{display:block;margin-top:9px;font-size:12.5px;line-height:1.72;color:rgba(255,255,255,.6)}
.hv-cap .hv-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.hv-cap .hv-tags i{font-style:normal;font-size:11.5px;padding:4px 10px;border-radius:999px;
  color:rgba(255,255,255,.82);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16)}

/* 页面二级 hero */
.page-hero{
  position:relative;overflow:hidden;color:#fff;padding:148px 0 72px;
  background:radial-gradient(900px 460px at 6% -18%,rgba(154,135,218,.46) 0%,transparent 62%),
             radial-gradient(760px 420px at 96% 0%,rgba(96,206,229,.34) 0%,transparent 58%),
             radial-gradient(620px 380px at 52% 120%,rgba(198,86,131,.18) 0%,transparent 64%),
             linear-gradient(168deg,#1E2846,#293454 60%,#22304C);
}
.page-hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(180deg,#000,transparent 78%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 78%);pointer-events:none}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{font-size:clamp(28px,4vw,46px);margin-top:20px;letter-spacing:-.02em}
.page-hero p{margin-top:20px;font-size:17px;color:rgba(255,255,255,.7);max-width:720px}
.crumb{display:flex;flex-wrap:wrap;gap:9px;align-items:center;font-size:13px;color:rgba(255,255,255,.5)}
.crumb a:hover{color:#fff}
.crumb span.sep{opacity:.45}

/* ==========================================================================
   卡片 / 网格
   ========================================================================== */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);
  padding:30px;transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s,border-color .3s;
  overflow:hidden;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-l);border-color:var(--brand-200)}
.card h3{font-size:18.5px;margin-bottom:12px}
.card p{color:var(--muted);font-size:15px}
.card-num{
  font-family:var(--font-num);font-size:13px;font-weight:700;letter-spacing:.14em;
  color:var(--brand-400);margin-bottom:16px;display:block;
}
.card-ico{
  width:50px;height:50px;border-radius:14px;display:grid;place-items:center;margin-bottom:20px;
  background:linear-gradient(140deg,var(--brand-100),var(--cyan-100));color:var(--brand-600);
}
.card-ico svg{width:24px;height:24px}
.card.line::after{content:"";position:absolute;left:30px;right:30px;top:0;height:2px;background:linear-gradient(90deg,var(--brand-500),var(--cyan-400));opacity:0;transition:opacity .3s}
.card.line:hover::after{opacity:1}
.section.dark .card-num{color:#C9B6FF}

/* 数据指标 */
.metrics{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden}
.metrics.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.metrics.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.metric{background:#fff;padding:34px 26px;transition:background .3s}
.metric:hover{background:var(--paper-2)}
.metric .n{font-family:var(--font-num);font-size:clamp(30px,4vw,46px);font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--brand-700)}
.metric .n small{font-size:.5em;font-weight:600;margin-left:3px;color:var(--brand-500)}
.metric .n.cy{color:var(--cyan-600)}
.metric .l{margin-top:12px;font-size:14.5px;color:var(--text-2);font-weight:600}
.metric .s{margin-top:6px;font-size:12.5px;color:var(--muted);line-height:1.6}
.section.dark .metrics{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.12)}
.section.dark .metric{background:#0C1226}
.section.dark .metric:hover{background:#111a35}
.section.dark .metric .n{background:linear-gradient(120deg,#fff,#9FD8FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.section.dark .metric .l{color:#fff}
.section.dark .metric .s{color:rgba(255,255,255,.55)}

/* ==========================================================================
   产品
   ========================================================================== */
.product-card{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:0;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-xl);overflow:hidden;
  transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s;
}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-l)}
.product-card .visual{
  position:relative;min-height:360px;display:grid;place-items:center;padding:24px;
  background:linear-gradient(150deg,#F3F0FB,#EAF6FA 60%,#FDF2F5);
}
.product-card .visual img{max-height:330px;width:auto;border-radius:14px;box-shadow:0 18px 44px -18px rgba(30,20,70,.4)}
.product-card .visual.plain img{max-height:300px;box-shadow:none;border-radius:0}
.product-card .body{padding:44px}
.product-card .body .kicker{font-size:12.5px;font-weight:700;letter-spacing:.16em;color:var(--cyan-600);text-transform:uppercase}
.product-card .body h3{font-size:clamp(22px,2.6vw,30px);margin:14px 0 8px}
.product-card .body .en{font-size:13px;color:var(--muted-2);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.product-card .body p.desc{color:var(--muted);margin-top:18px;font-size:15.5px}
.tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.tag{
  font-size:13px;padding:7px 15px;border-radius:999px;background:var(--paper-2);
  border:1px solid var(--line);color:var(--text-2);font-weight:500;
}
.tag.hi{background:var(--brand-100);border-color:#D9CBF7;color:var(--brand-700)}
.product-mini{display:flex;flex-wrap:wrap;gap:20px 34px;margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.product-mini div .n{font-family:var(--font-num);font-size:24px;font-weight:700;color:var(--brand-700);line-height:1.2}
.product-mini div .l{font-size:12.5px;color:var(--muted);margin-top:2px}
.pcard-actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}

/* 参数表 */
.spec{border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;background:#fff}
.spec .row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr);gap:0;border-bottom:1px solid var(--line)}
.spec .row:last-child{border-bottom:0}
.spec .row:nth-child(odd){background:var(--paper-2)}
.spec .k{padding:16px 22px;font-size:14.5px;font-weight:600;color:var(--text-2);border-right:1px solid var(--line)}
.spec .v{padding:16px 22px;font-size:14.5px;color:var(--text);font-family:var(--font-num);letter-spacing:.01em}

/* 对比 */
.compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden}
.compare .col{background:#fff;padding:32px 28px}
.compare .col.hl{background:linear-gradient(170deg,#F6F2FE,#EDF8FC)}
.compare .col h4{font-size:17px;margin-bottom:6px}
.compare .col .sub{font-size:12.5px;color:var(--muted-2);margin-bottom:20px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.compare ul li{display:flex;gap:12px;padding:12px 0;border-bottom:1px dashed var(--line);font-size:14.5px;color:var(--text-2)}
.compare ul li:last-child{border-bottom:0}
.compare .mark{flex:0 0 20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;margin-top:2px}
.compare .yes .mark{background:#E4F7EE;color:var(--green-500)}
.compare .no .mark{background:#F2F4F8;color:var(--muted-2)}

/* ==========================================================================
   时间线 / 步骤
   ========================================================================== */
.timeline{position:relative;padding-left:0}
.tl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.tl-item{position:relative;padding-top:30px}
.tl-item::before{content:"";position:absolute;top:6px;left:0;right:0;height:2px;background:var(--line)}
.tl-item::after{content:"";position:absolute;top:0;left:0;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--brand-500)}
.tl-item.done::after{border-color:var(--green-500)}
.tl-item.now::after{border-color:var(--amber-500)}
.tl-item.next::after{border-color:var(--muted-2)}
.tl-item .yr{font-family:var(--font-num);font-size:20px;font-weight:700;color:var(--brand-700);margin-top:16px}
.tl-item .st{font-size:12.5px;font-weight:600;margin-top:8px;display:inline-block;padding:4px 12px;border-radius:999px;background:var(--paper-2);color:var(--muted)}
.tl-item.done .st{background:#E4F7EE;color:#0B8A50}
.tl-item.now .st{background:#FEF3E2;color:#B25E00}
.tl-item ul{margin-top:16px;display:grid;gap:11px}
.tl-item ul li{font-size:14px;color:var(--muted);padding-left:16px;position:relative;line-height:1.65}
.tl-item ul li::before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;border-radius:50%;background:var(--brand-400)}

/* 流程步骤 */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);padding:30px;position:relative}
.step .idx{
  font-family:var(--font-num);font-size:13px;font-weight:700;letter-spacing:.1em;
  color:#fff;background:linear-gradient(120deg,var(--brand-600),var(--cyan-600));
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;margin-bottom:20px;
}
.step h3{font-size:17px;margin-bottom:10px}
.step p{font-size:14.5px;color:var(--muted)}

/* ==========================================================================
   资质 / 知识产权（文字化呈现）
   ========================================================================== */
.cert{display:flex;gap:18px;padding:24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);transition:border-color .3s,box-shadow .3s}
.cert:hover{border-color:#D7C9F5;box-shadow:var(--shadow)}
.cert .ic{flex:0 0 44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(140deg,var(--brand-100),var(--cyan-100));color:var(--brand-600)}
.cert .ic svg{width:22px;height:22px}
.cert h4{font-size:15.5px;margin-bottom:6px}
.cert p{font-size:13.5px;color:var(--muted);line-height:1.7}
.cert .no{display:inline-block;margin-top:8px;font-family:var(--font-num);font-size:12.5px;color:var(--brand-600);background:var(--brand-100);padding:3px 10px;border-radius:6px;letter-spacing:.04em}

/* ==========================================================================
   表单
   ========================================================================== */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);padding:40px;box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}

/* ---------- 溢出防护 ----------
   英文/日文版最常见的横向溢出源：长单词、长 select 选项、大写 + 字距的 eyebrow。
   中文词短，这些规则在中文版看不出差异，但翻译之后必须有。 */
.eyebrow{flex-wrap:wrap;max-width:100%}
.section-head,.section-head h2,.section-head .lead,
.card h3,.card p,.biz-card h3,.biz-card p{overflow-wrap:break-word}
.chip,.pill,.badge,.tag{max-width:100%}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field.full{grid-column:1 / -1}
.field label{font-size:13.5px;font-weight:600;color:var(--text-2)}
.field label .req{color:#E5484D;margin-left:3px}
.field input,.field select,.field textarea{
  width:100%;min-width:0;max-width:100%;padding:13px 15px;border:1px solid var(--line);
  border-radius:11px;background:var(--paper-2);
  font-size:15px;transition:border-color .2s,background .2s,box-shadow .2s;
}
.field textarea{resize:vertical;min-height:118px;line-height:1.7}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:#fff;border-color:var(--brand-400);box-shadow:0 0 0 4px rgba(138,92,224,.12);
}
.field .hint{font-size:12px;color:var(--muted-2)}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  font-size:13.5px;padding:9px 16px;border-radius:999px;border:1px solid var(--line);
  background:var(--paper-2);cursor:pointer;transition:all .2s;user-select:none;
}
.chip:hover{border-color:var(--brand-400)}
.chip.on{background:var(--brand-100);border-color:var(--brand-400);color:var(--brand-700);font-weight:600}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:28px}
.form-note{font-size:12.5px;color:var(--muted-2);line-height:1.7}
.form-msg{margin-top:20px;padding:16px 18px;border-radius:12px;font-size:14.5px;display:none;line-height:1.7}
.form-msg.show{display:block}
.form-msg.ok{background:#E9F9F1;border:1px solid #BEEBD5;color:#0B7A46}
.form-msg.err{background:#FEF0F0;border:1px solid #F9D3D3;color:#B42318}
.form-msg.load{background:var(--paper-2);border:1px solid var(--line);color:var(--text-2)}
.spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
.btn[disabled]{opacity:.65;cursor:not-allowed;transform:none!important}

/* ==========================================================================
   CTA 区
   ========================================================================== */
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--radius-xl);padding:64px 56px;color:#fff;
  background:radial-gradient(620px 340px at 88% 0%,rgba(96,206,229,.46) 0%,transparent 62%),
             radial-gradient(560px 320px at 10% 104%,rgba(198,86,131,.28) 0%,transparent 64%),
             linear-gradient(120deg,#332659,#4C3A83 52%,#1F5A73);
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:40px;align-items:center;
}
.cta-band::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(500px 300px at 90% 10%,#000,transparent);-webkit-mask-image:radial-gradient(500px 300px at 90% 10%,#000,transparent)}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{font-size:clamp(24px,3vw,34px)}
.cta-band p{margin-top:16px;color:rgba(255,255,255,.74);font-size:16px}
.cta-band .acts{display:flex;flex-direction:column;gap:12px}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background:
    radial-gradient(700px 380px at 92% 0%,rgba(96,206,229,.14),transparent 62%),
    radial-gradient(620px 360px at 6% 100%,rgba(154,135,218,.16),transparent 64%),
    linear-gradient(180deg,#1B2440,#212B49);
  color:rgba(255,255,255,.66);padding:72px 0 0;font-size:14px;
}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.92fr) minmax(0,.92fr) minmax(0,.9fr) minmax(0,.92fr) minmax(0,1.12fr);gap:28px;padding-bottom:52px}
.site-footer .logo{height:42px;width:auto;filter:brightness(0) invert(1);opacity:.94}
.site-footer .about{margin-top:22px;line-height:1.9;max-width:330px;font-size:13.5px}
.site-footer h5{color:#fff;font-size:14px;font-weight:600;margin-bottom:18px;letter-spacing:.04em}
.site-footer li{margin-bottom:12px}
.site-footer a:hover{color:#fff}
.site-footer .contact-row{display:flex;gap:11px;margin-bottom:14px;line-height:1.7}
.site-footer .contact-row svg{width:16px;height:16px;flex:0 0 16px;margin-top:5px;opacity:.6}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding:24px 0;display:flex;flex-wrap:wrap;gap:12px 28px;
  justify-content:space-between;font-size:12.5px;color:rgba(255,255,255,.42);
}
.foot-bottom .disc{max-width:760px;line-height:1.8}
.foot-bottom a:hover{color:#fff}

/* ==========================================================================
   核心业务（四大板块）
   ========================================================================== */
.biz-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.biz-card[id]{scroll-margin-top:104px}
.biz-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);padding:36px 34px;
  transition:transform .32s cubic-bezier(.4,0,.2,1),box-shadow .32s,border-color .32s;
}
.biz-card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--brand-500),var(--cyan-400));
  transform:scaleX(0);transform-origin:left;transition:transform .36s cubic-bezier(.4,0,.2,1);
}
.biz-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-l);border-color:transparent}
.biz-card:hover::after{transform:scaleX(1)}
.biz-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.biz-ico{flex:0 0 54px;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(140deg,var(--brand-100),var(--cyan-100));color:var(--brand-600)}
.biz-ico svg{width:26px;height:26px}
.biz-num{font-family:var(--font-num);font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--brand-400)}
.biz-card h3{font-size:22px;margin:24px 0 0}
.biz-card .en{display:block;margin-top:8px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.biz-card>p{color:var(--muted);font-size:15px;margin-top:16px;line-height:1.8}
.biz-card ul{margin-top:20px;display:grid;gap:11px}
.biz-card ul li{position:relative;padding-left:19px;font-size:14px;color:var(--text-2);line-height:1.7}
.biz-card ul li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;background:linear-gradient(140deg,var(--brand-500),var(--cyan-400))}
.biz-more{margin-top:auto;padding-top:26px;display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--brand-600)}
.biz-more svg{width:16px;height:16px;transition:transform .25s}
.biz-card:hover .biz-more svg{transform:translateX(5px)}

/* ==========================================================================
   Hero 右侧 · 数据能力层清单
   ========================================================================== */
.layer-list{margin-top:18px;display:grid;gap:1px;background:rgba(255,255,255,.1);border-radius:var(--radius);overflow:hidden}
.layer-list li{display:flex;align-items:center;gap:13px;background:rgba(9,14,30,.68);padding:12px 16px}
.layer-list li:nth-child(even){background:rgba(9,14,30,.84)}
.layer-list .code{flex:0 0 16px;font-family:var(--font-num);font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--cyan-400)}
.layer-list .nm{flex:1;font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.88)}
.layer-list .nm small{display:block;margin-top:2px;font-size:11px;color:rgba(255,255,255,.44);letter-spacing:.02em}
.layer-list .stt{
  flex:0 0 auto;font-size:10.5px;padding:3px 10px;border-radius:999px;letter-spacing:.06em;
  background:rgba(34,211,238,.14);color:#7FE3F5;border:1px solid rgba(34,211,238,.3);
}
.layer-list .stt.core{background:rgba(138,92,224,.22);color:#CBB8FF;border-color:rgba(138,92,224,.42)}

/* ==========================================================================
   8 层架构（技术实力页 · 紧凑列表式）
   ========================================================================== */
.arch-list{display:grid;gap:12px}
.arch-list .arch-row{
  display:grid;grid-template-columns:172px minmax(0,1fr);gap:14px;align-items:stretch;
}
.arch-list .arch-tag{
  display:flex;flex-direction:row;align-items:center;gap:12px;padding:18px 20px;
  border-radius:var(--radius);background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.13);
}
.arch-list .arch-tag .code{
  flex:0 0 30px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-family:var(--font-num);font-size:14px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--brand-500),var(--cyan-600));
}
.arch-list .arch-tag .nm{font-size:14.5px;font-weight:600;color:#fff;letter-spacing:.02em}
.arch-list .arch-row.core .arch-tag{
  background:linear-gradient(120deg,rgba(96,52,180,.34),rgba(7,151,182,.28));
  border-color:rgba(34,211,238,.42);
}
.arch-list .arch-cells{
  display:flex;flex-wrap:wrap;gap:8px;align-content:center;
  padding:14px 16px;border-radius:var(--radius);
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1);
}
.arch-list .arch-cells span{
  font-size:12.5px;line-height:1.5;padding:5px 11px;border-radius:999px;
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.11);white-space:nowrap;
}
.arch-list .arch-row.core .arch-cells span{
  background:rgba(34,211,238,.1);border-color:rgba(34,211,238,.24);color:#BFEFFA;
}

/* 架构铁律卡 */
.rule-card{
  padding:28px 30px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.rule-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-l);border-color:rgba(96,52,180,.28)}
.rule-no{
  display:inline-block;font-family:var(--font-num);font-size:11.5px;font-weight:700;
  letter-spacing:.12em;color:var(--brand-600);padding:4px 11px;border-radius:999px;
  background:rgba(96,52,180,.08);border:1px solid rgba(96,52,180,.18);
}
.rule-card h4{margin-top:14px;font-size:17px}
.rule-card p{margin-top:10px;font-size:14px;line-height:1.75;color:var(--muted)}
.rule-card code{
  font-family:var(--font-num);font-size:12.5px;padding:2px 7px;border-radius:6px;
  background:var(--paper-2);color:var(--brand-700);border:1px solid var(--line);
}
.rule-check{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-size:12.5px;font-weight:600;color:var(--cyan-700);
}
.rule-check::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan-500);
  box-shadow:0 0 0 3px rgba(15,181,214,.16);
}

/* 深色区浅色面板 */
.panel-lite{
  padding:32px 34px;border-radius:var(--radius-l);
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
}
.panel-lite h4{font-size:17px;color:#fff}
.panel-lite .mini{margin-top:12px;font-size:13.5px;color:rgba(255,255,255,.6);line-height:1.7}

/* 勾选清单 */
.tick-list{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.tick-list li{position:relative;padding-left:22px;font-size:13.5px;line-height:1.7;color:var(--muted)}
.tick-list li::before{
  content:"";position:absolute;left:0;top:.52em;width:11px;height:11px;
  border-radius:3px;background:rgba(96,52,180,.12);border:1px solid rgba(96,52,180,.34);
}
.tick-list li::after{
  content:"";position:absolute;left:3.2px;top:.72em;width:4.6px;height:2.2px;
  border-left:1.7px solid var(--brand-600);border-bottom:1.7px solid var(--brand-600);
  transform:rotate(-45deg);
}
.panel-lite .tick-list li{color:rgba(255,255,255,.68)}
.panel-lite .tick-list li::before{background:rgba(34,211,238,.14);border-color:rgba(34,211,238,.36)}
.panel-lite .tick-list li::after{border-color:#7FE3F5}

/* 标签网格 */
.chip-grid{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.chip-grid .tag{
  font-size:12.5px;padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.8);
}

/* ==========================================================================
   8 层数据能力架构（旧版 · 保留兼容）
   ========================================================================== */
.arch{display:grid;gap:14px}
.arch-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px}
.arch-tag{
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:22px;
  border-radius:var(--radius);background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
}
.arch-tag b{font-size:15px;font-weight:600;color:#fff}
.arch-tag small{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.arch-cells{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.arch-cell{
  position:relative;padding:22px;border-radius:var(--radius);
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);
  transition:background .3s,border-color .3s,transform .3s;
}
.arch-cell:hover{background:rgba(255,255,255,.085);border-color:rgba(34,211,238,.45);transform:translateY(-3px)}
.arch-cell .code{position:absolute;top:16px;right:20px;font-family:var(--font-num);font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--cyan-400);opacity:.9}
.arch-cell h4{font-size:16px;color:#fff;padding-right:28px}
.arch-cell p{margin-top:9px;font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.6)}
.arch-cell .kcap{display:inline-block;margin-top:12px;font-size:11.5px;padding:3px 10px;border-radius:999px;background:rgba(34,211,238,.13);color:#7FE3F5;border:1px solid rgba(34,211,238,.26)}

/* ==========================================================================
   数据入口小卡（器械作为数据来源）
   ========================================================================== */
.entry-list{display:grid;gap:16px}
.entry-card{
  display:flex;align-items:center;gap:20px;padding:22px 24px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-l);
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.entry-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-l);border-color:transparent}
.entry-card .thumb{flex:0 0 92px;height:92px;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(150deg,#F3F0FB,#EAF6FA)}
.entry-card .thumb img{width:100%;height:100%;object-fit:cover}
.entry-card h4{font-size:16.5px}
.entry-card p{margin-top:7px;font-size:13.5px;line-height:1.65;color:var(--muted)}
.entry-card .go{
  flex:0 0 38px;width:38px;height:38px;margin-left:auto;border-radius:50%;display:grid;place-items:center;
  background:var(--paper-2);color:var(--brand-600);transition:background .25s,color .25s;
}
.entry-card .go svg{width:17px;height:17px}
.entry-card:hover .go{background:linear-gradient(120deg,var(--brand-600),var(--cyan-600));color:#fff}

/* 图文两栏（数据闭环） */
.loop-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}

/* 两栏分栏（可响应式折叠） */
.split-contact{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:44px;align-items:start}
.split-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:44px;align-items:center}

/* 窄屏可横向滑动的示意图容器 */
.scroll-x{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding:6px 0 10px}
.scroll-x svg{display:block}
.scroll-hint{display:none;margin-top:10px;font-size:12.5px;color:var(--muted-2);letter-spacing:.02em;text-align:center}

/* ==========================================================================
   多元化展示组件（配色调淡版 · 2026-09 新增）
   目标：参照国外大型企业官网的多样信息呈现 —— 交错栅格 / 标签页 /
   折叠问答 / 信任条 / 指标带 / 横向流程 / 媒体双栏 / 引述块 / 竖版时间线
   ========================================================================== */
:root{
  /* 阴影整体调轻，配合调淡后的色彩 */
  --shadow-s:0 1px 2px rgba(28,36,68,.05), 0 2px 8px rgba(28,36,68,.035);
  --shadow:0 8px 26px rgba(28,36,68,.06), 0 2px 8px rgba(28,36,68,.035);
  --shadow-l:0 22px 52px -20px rgba(28,36,68,.18), 0 4px 14px rgba(28,36,68,.05);
}

/* ---------- 下拉菜单：栏目概览首项 + 纯文字下拉 ---------- */
.dropdown.plain a{display:block;padding:11px 14px;font-size:14.5px;font-weight:500;border-radius:9px;color:var(--text-2)}
.dropdown.plain a:hover{background:var(--paper-2);color:var(--brand-600)}
.dropdown a.dd-feat{
  background:linear-gradient(120deg,var(--brand-50),var(--cyan-100));
  border:1px solid var(--brand-200);margin-bottom:6px;
}
.dropdown a.dd-feat:hover{background:linear-gradient(120deg,var(--brand-100),var(--cyan-100))}
.dropdown a.dd-feat .dd-t{color:var(--brand-700)}
.dropdown a.dd-feat .dd-ico{background:rgba(255,255,255,.8);color:var(--brand-600)}

/* ---------- 多色图标块 ---------- */
.ico{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;flex:0 0 48px}
.ico svg{width:23px;height:23px}
.ico.violet{background:var(--violet-100);color:var(--violet-600)}
.ico.sky{background:var(--sky-100);color:var(--sky-600)}
.ico.teal{background:var(--teal-100);color:var(--teal-600)}
.ico.mint{background:var(--mint-100);color:var(--mint-600)}
.ico.amber{background:var(--amber-100);color:var(--amber-600)}
.ico.rose{background:var(--rose-100);color:var(--rose-600)}
.ico.cyan{background:var(--cyan-100);color:var(--cyan-600)}
.ico.brand{background:var(--brand-100);color:var(--brand-600)}
.ico.sm{width:40px;height:40px;border-radius:12px;flex:0 0 40px}
.ico.sm svg{width:19px;height:19px}

/* ---------- 交错栅格（bento） ---------- */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.bento>*{
  position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-l);padding:32px;
  transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s,border-color .3s;
}
.bento>*:hover{transform:translateY(-4px);box-shadow:var(--shadow-l);border-color:var(--brand-200)}
.bento .b2{grid-column:span 2}
.bento .b3{grid-column:span 3}
.bento .b4{grid-column:span 4}
.bento .b6{grid-column:span 6}
.bento h3{font-size:19px;margin-top:20px}
.bento p{margin-top:12px;color:var(--muted);font-size:14.5px;line-height:1.8}
.bento .b-kicker{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-500)}
/* 柔和色块变体 */
.bento .t-violet{background:linear-gradient(158deg,#F9F7FE,#F2EFFC);border-color:#E7E2F9}
.bento .t-teal{background:linear-gradient(158deg,#F5FCFD,#EBF7FA);border-color:#D8EFF4}
.bento .t-amber{background:linear-gradient(158deg,#FFFDF8,#FDF5E7);border-color:#F6E7CC}
.bento .t-rose{background:linear-gradient(158deg,#FFFAFC,#FCEFF5);border-color:#F6DEE7}
.bento .t-mint{background:linear-gradient(158deg,#F6FDFA,#EAF8F2);border-color:#D5F0E5}
.bento .t-sky{background:linear-gradient(158deg,#F7FAFE,#ECF3FC);border-color:#DBE7F9}
.bento .t-ink{
  background:radial-gradient(520px 260px at 88% 0%,rgba(96,206,229,.28),transparent 62%),
             linear-gradient(150deg,#222C4C,#2C3860);border-color:transparent;color:#fff;
}
.bento .t-ink h3{color:#fff}
.bento .t-ink p{color:rgba(255,255,255,.7)}
.bento .t-ink .b-kicker{color:var(--cyan-400)}

/* ---------- 指标带（stat band） ---------- */
.stat-band{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;
}
.stat-band .sb{background:#fff;padding:30px 26px}
.stat-band .sb:nth-child(1){background:linear-gradient(160deg,#F9F7FE,#fff)}
.stat-band .sb:nth-child(2){background:linear-gradient(160deg,#F5FCFD,#fff)}
.stat-band .sb:nth-child(3){background:linear-gradient(160deg,#FFFDF8,#fff)}
.stat-band .sb:nth-child(4){background:linear-gradient(160deg,#FFFAFC,#fff)}
.stat-band .n{font-family:var(--font-num);font-size:clamp(28px,3.4vw,40px);font-weight:700;line-height:1;color:var(--brand-700)}
.stat-band .n small{font-size:.5em;margin-left:3px;color:var(--brand-500);font-weight:600}
.stat-band .sb:nth-child(2) .n{color:var(--teal-600)}
.stat-band .sb:nth-child(3) .n{color:var(--amber-600)}
.stat-band .sb:nth-child(4) .n{color:var(--rose-600)}
.stat-band .l{margin-top:11px;font-size:14.5px;font-weight:600;color:var(--text-2)}
.stat-band .s{margin-top:5px;font-size:12.5px;color:var(--muted);line-height:1.6}
.stat-band.two{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---------- 标签页 ---------- */
.tabs{margin-top:34px}
.tab-list{display:flex;flex-wrap:wrap;gap:8px;padding:6px;background:var(--paper-2);border:1px solid var(--line);border-radius:999px;width:fit-content;max-width:100%}
.tab-btn{
  border:0;background:transparent;cursor:pointer;white-space:nowrap;
  padding:10px 20px;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--text-2);
  transition:background .22s,color .22s,box-shadow .22s;
}
.tab-btn:hover{color:var(--brand-600)}
.tab-btn.on{background:#fff;color:var(--brand-700);box-shadow:0 2px 10px rgba(28,36,68,.09)}
.tab-panels{margin-top:26px}
.tab-panel{display:none}
.tab-panel.on{display:block;animation:fadeUp .38s cubic-bezier(.22,1,.36,1)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- 折叠问答 ---------- */
.acc{border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;background:#fff}
.acc-item{border-bottom:1px solid var(--line)}
.acc-item:last-child{border-bottom:0}
.acc-item summary{
  cursor:pointer;list-style:none;display:flex;align-items:flex-start;gap:16px;
  padding:22px 26px;font-size:16px;font-weight:600;color:var(--text);transition:background .2s;
}
.acc-item summary::-webkit-details-marker{display:none}
.acc-item summary:hover{background:var(--paper-2)}
.acc-item summary::after{
  content:"";flex:0 0 10px;width:10px;height:10px;margin-left:auto;margin-top:7px;
  border-right:1.8px solid var(--muted-2);border-bottom:1.8px solid var(--muted-2);
  transform:rotate(45deg);transition:transform .25s;
}
.acc-item[open] summary::after{transform:rotate(-135deg)}
.acc-item[open] summary{color:var(--brand-700);background:var(--brand-50)}
.acc-a{padding:0 26px 24px;color:var(--muted);font-size:14.5px;line-height:1.85}
.acc-a p+p{margin-top:12px}

/* ---------- 信任条 / 标签云 ---------- */
.trust{
  display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center;justify-content:center;
  padding:26px 0;
}
.trust .t-chip{
  font-size:13px;font-weight:600;padding:9px 18px;border-radius:999px;
  background:#fff;border:1px solid var(--line);color:var(--text-2);
}
.trust .t-chip.violet{background:var(--violet-100);border-color:#E7E1FA;color:var(--violet-600)}
.trust .t-chip.teal{background:var(--teal-100);border-color:#D8EFF4;color:var(--teal-600)}
.trust .t-chip.amber{background:var(--amber-100);border-color:#F6E7CC;color:var(--amber-600)}
.trust .t-chip.rose{background:var(--rose-100);border-color:#F6DEE7;color:var(--rose-600)}
.trust .t-chip.mint{background:var(--mint-100);border-color:#D5F0E5;color:var(--mint-600)}
.trust .t-chip.sky{background:var(--sky-100);border-color:#DBE7F9;color:var(--sky-600)}

/* ---------- 横向流程（胶囊步骤） ---------- */
.pill-steps{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:14px}
.pill-step{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 22px;transition:transform .3s,box-shadow .3s,border-color .3s;
}
.pill-step:hover{transform:translateY(-4px);box-shadow:var(--shadow-l)}
.pill-step .pn{
  display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;
  border-radius:11px;font-family:var(--font-num);font-size:13px;font-weight:700;color:#fff;
  background:linear-gradient(130deg,var(--brand-500),var(--cyan-600));
}
.pill-step:nth-child(2) .pn{background:linear-gradient(130deg,var(--sky-600),var(--teal-600))}
.pill-step:nth-child(3) .pn{background:linear-gradient(130deg,var(--violet-600),var(--rose-600))}
.pill-step:nth-child(4) .pn{background:linear-gradient(130deg,var(--amber-600),var(--rose-600))}
.pill-step:nth-child(5) .pn{background:linear-gradient(130deg,var(--mint-600),var(--teal-600))}
.pill-step h4{margin-top:16px;font-size:16px}
.pill-step p{margin-top:9px;font-size:13.5px;color:var(--muted);line-height:1.7}

/* ---------- 媒体双栏（图文交错） ---------- */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.duo.rev .duo-media{order:1}
.duo.rev .duo-body{order:2}
.duo-media{
  position:relative;border-radius:var(--radius-xl);overflow:hidden;
  background:linear-gradient(150deg,#F3F0FB,#EAF6FA 58%,#FDF2F5);
  padding:34px;display:grid;place-items:center;min-height:300px;
}
.duo-media img{width:100%;height:auto;border-radius:var(--radius);display:block}
.duo-body h2{font-size:clamp(23px,2.9vw,33px);margin-top:18px}
.duo-body>p{margin-top:18px;color:var(--muted);font-size:15.5px;line-height:1.9}
.duo-list{margin-top:24px;display:grid;gap:14px}
.duo-list li{display:flex;gap:14px;align-items:flex-start}
.duo-list li .ico{margin-top:2px}
.duo-list li b{display:block;font-size:15px}
.duo-list li span{display:block;margin-top:4px;font-size:13.5px;color:var(--muted);line-height:1.7}

/* ---------- 引述块 ---------- */
.pull{
  position:relative;border-radius:var(--radius-l);padding:38px 42px;
  background:linear-gradient(140deg,var(--brand-50),var(--cyan-100));
  border:1px solid var(--brand-200);
}
.pull::before{content:"“";position:absolute;top:6px;left:22px;font-size:74px;line-height:1;color:var(--brand-400);opacity:.35}
.pull p{position:relative;font-size:17.5px;line-height:1.85;color:var(--brand-900);padding-left:8px}
.pull cite{display:block;margin-top:16px;font-style:normal;font-size:13px;color:var(--muted);padding-left:8px}

/* ---------- 竖版流程 / 时间线 ---------- */
.vtl{position:relative;display:grid;gap:0;padding-left:38px}
.vtl::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--brand-400),var(--cyan-400),var(--mint-600))}
.vtl-item{position:relative;padding:0 0 30px}
.vtl-item:last-child{padding-bottom:0}
.vtl-item::before{
  content:"";position:absolute;left:-38px;top:4px;width:32px;height:32px;border-radius:50%;
  background:#fff;border:2px solid var(--brand-400);z-index:1;
}
.vtl-item::after{
  content:attr(data-n);position:absolute;left:-38px;top:4px;width:32px;height:32px;
  display:grid;place-items:center;font-family:var(--font-num);font-size:12px;font-weight:700;
  color:var(--brand-600);z-index:2;
}
.vtl-item h4{font-size:16.5px}
.vtl-item p{margin-top:8px;font-size:14px;color:var(--muted);line-height:1.8}

/* ---------- 参与角色卡（多色） ---------- */
.role-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.role-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);padding:28px 26px;
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.role-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-l);border-color:var(--brand-200)}
.role-card h4{margin-top:18px;font-size:16.5px}
.role-card p{margin-top:10px;font-size:13.5px;color:var(--muted);line-height:1.75}
.role-card .rk{display:inline-block;margin-top:14px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-500)}

/* ---------- 任务大厅示意（浏览器窗口 mock） ---------- */
.board{
  border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;background:#fff;
  box-shadow:var(--shadow-l);
}
.board-bar{display:flex;align-items:center;gap:8px;padding:13px 18px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.board-bar i{width:10px;height:10px;border-radius:50%;background:#E5E9F4}
.board-bar i:nth-child(1){background:#FAD2D6}
.board-bar i:nth-child(2){background:#FBE7C2}
.board-bar i:nth-child(3){background:#CFEEDC}
.board-bar b{margin-left:10px;font-size:12.5px;font-weight:600;color:var(--muted)}
.board-body{padding:22px}
.board-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;
  padding:15px 16px;border-radius:12px;border:1px solid var(--line-2);background:#fff;
  margin-bottom:10px;transition:border-color .2s,background .2s;
}
.board-row:last-child{margin-bottom:0}
.board-row:hover{border-color:var(--brand-200);background:var(--brand-50)}
.board-row .bt{font-size:14.5px;font-weight:600}
.board-row .bd{display:block;margin-top:4px;font-size:12.5px;color:var(--muted)}
.board-row .bp{font-family:var(--font-num);font-size:14px;font-weight:700;color:var(--mint-600);white-space:nowrap}
.board-row .bg{font-size:11.5px;font-weight:600;padding:5px 12px;border-radius:999px;white-space:nowrap;
  background:var(--mint-100);color:var(--mint-600)}
.board-row .bg.warm{background:var(--amber-100);color:var(--amber-600)}
.board-row .bg.cool{background:var(--sky-100);color:var(--sky-600)}
.board-row .bg.viol{background:var(--violet-100);color:var(--violet-600)}
.board-foot{margin-top:16px;font-size:12px;color:var(--muted-2);line-height:1.7}

/* ---------- 匹配示意（双栏 + 中枢） ---------- */
.match-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:26px;align-items:center}
.match-col{display:grid;gap:14px}
.match-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.match-card b{display:block;font-size:14.5px}
.match-card span{display:block;margin-top:6px;font-size:12.5px;color:var(--muted);line-height:1.6}
.match-col:first-child .match-card{background:linear-gradient(158deg,#F7FAFE,#fff);border-color:#DBE7F9}
.match-col:last-child .match-card{background:linear-gradient(158deg,#FFFAFC,#fff);border-color:#F6DEE7}
.match-core{
  width:132px;height:132px;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:radial-gradient(circle at 30% 24%,#fff,rgba(255,255,255,.1) 62%),
             linear-gradient(140deg,var(--brand-500),var(--cyan-600));
  color:#fff;box-shadow:0 18px 40px -16px rgba(90,68,156,.55);
}
.match-core b{display:block;font-size:15px;line-height:1.35}
.match-core small{display:block;margin-top:6px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.78}

/* ---------- 勾选清单（浅色版，用于浅底区块） ---------- */
.check-list{display:grid;gap:12px}
.check-list li{position:relative;padding-left:28px;font-size:14.5px;line-height:1.75;color:var(--text-2)}
.check-list li::before{
  content:"";position:absolute;left:0;top:.42em;width:17px;height:17px;border-radius:6px;
  background:var(--brand-100);border:1px solid var(--brand-200);
}
.check-list li::after{
  content:"";position:absolute;left:5.5px;top:.68em;width:6px;height:3px;
  border-left:1.9px solid var(--brand-600);border-bottom:1.9px solid var(--brand-600);
  transform:rotate(-45deg);
}
.check-list.mint li::before{background:var(--mint-100);border-color:#D5F0E5}
.check-list.mint li::after{border-color:var(--mint-600)}
.check-list.amber li::before{background:var(--amber-100);border-color:#F6E7CC}
.check-list.amber li::after{border-color:var(--amber-600)}

/* ---------- 小徽标 / 状态胶囊 ---------- */
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{font-size:12px;font-weight:600;padding:6px 13px;border-radius:999px}
.badge.violet{background:var(--violet-100);color:var(--violet-600)}
.badge.sky{background:var(--sky-100);color:var(--sky-600)}
.badge.teal{background:var(--teal-100);color:var(--teal-600)}
.badge.mint{background:var(--mint-100);color:var(--mint-600)}
.badge.amber{background:var(--amber-100);color:var(--amber-600)}
.badge.rose{background:var(--rose-100);color:var(--rose-600)}
.badge.line{background:#fff;border:1px solid var(--line);color:var(--muted)}

/* ---------- 空状态 / 提示条 ---------- */.notice{
  display:flex;gap:14px;align-items:flex-start;padding:20px 24px;border-radius:var(--radius);
  background:var(--amber-100);border:1px solid #F6E7CC;color:var(--text-2);font-size:14px;line-height:1.8;
}
.notice.violet{background:var(--violet-100);border-color:#E7E1FA}
.notice.teal{background:var(--teal-100);border-color:#D8EFF4}
.notice b{color:var(--text)}
.notice .ico{margin-top:1px}

/* ---------- 锚点定位留出固定页头高度 ---------- */
section[id],div[id][class*="section"]{scroll-margin-top:110px}

/* ---------- 首页栏目入口（大卡） ---------- */
.col-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.col-card{
  position:relative;overflow:hidden;border-radius:var(--radius-xl);padding:46px 44px;color:#fff;
  display:flex;flex-direction:column;min-height:340px;
  transition:transform .34s cubic-bezier(.4,0,.2,1),box-shadow .34s;
}
.col-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -24px rgba(28,36,68,.4)}
.col-card.c-crowd{
  background:radial-gradient(560px 300px at 88% 0%,rgba(96,206,229,.4),transparent 62%),
             radial-gradient(420px 260px at 4% 108%,rgba(198,86,131,.28),transparent 64%),
             linear-gradient(140deg,#2B2A5C,#3A3B7C 52%,#22546C);
}
.col-card.c-exchange{
  background:radial-gradient(560px 300px at 88% 0%,rgba(154,135,218,.44),transparent 62%),
             radial-gradient(440px 260px at 6% 108%,rgba(18,165,126,.26),transparent 64%),
             linear-gradient(140deg,#1F3A56,#245066 52%,#2C4C7E);
}
.col-card .cc-badge{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  padding:7px 15px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.04em;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
}
.col-card .cc-badge i{width:6px;height:6px;border-radius:50%;background:var(--cyan-400);box-shadow:0 0 0 3px rgba(96,206,229,.24)}
.col-card h3{margin-top:24px;font-size:clamp(23px,2.8vw,32px);color:#fff}
.col-card .cc-en{display:block;margin-top:10px;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.col-card p{margin-top:18px;font-size:15.5px;line-height:1.85;color:rgba(255,255,255,.76);max-width:520px}
.col-card .cc-feats{margin-top:24px;display:grid;gap:10px}
.col-card .cc-feats li{font-size:14px;color:rgba(255,255,255,.82);padding-left:20px;position:relative}
.col-card .cc-feats li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:3px;background:var(--cyan-400);opacity:.85}
.col-card .cc-acts{margin-top:auto;padding-top:30px;display:flex;flex-wrap:wrap;gap:12px}
.col-card .cc-sub{
  margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;gap:8px;
}
.col-card .cc-sub a{
  font-size:12.5px;padding:6px 13px;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.85);
  transition:background .2s,border-color .2s;
}
.col-card .cc-sub a:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4);color:#fff}

/* ---------- 新增组件的响应式 ---------- */
@media (max-width:1280px){
  .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* 导航项增至 6 个后，英文/日文标签更长：在紧凑区间再收一档 */
  html[lang="en"] .brand img,html[lang="ja"] .brand img{height:56px}
  html[lang="en"] .nav-link,html[lang="ja"] .nav-link{padding:10px 7px}
  html[lang="en"] .nav-link.active::after,html[lang="ja"] .nav-link.active::after{left:7px;right:7px}
  html[lang="en"] .lang a,html[lang="ja"] .lang a{padding:6px 8px}
}
/* 导航项增加后提前折叠，避免 1081–1200 区间页头溢出 */
@media (max-width:1200px){
  .nav{display:none}
  .lang{display:none}
  .burger{display:flex;margin-left:auto}
  .header-cta{display:none}
}
@media (max-width:1080px){
  .bento{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bento .b3,.bento .b4{grid-column:span 4}
  .bento .b2{grid-column:span 2}
  .role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-band{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pill-steps{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .bento{grid-template-columns:minmax(0,1fr)}
  .bento .b2,.bento .b3,.bento .b4,.bento .b6{grid-column:span 1}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .duo,.duo.rev .duo-media{grid-template-columns:minmax(0,1fr);gap:30px}
  .duo.rev .duo-media{order:0}
  .match-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .match-core{width:100%;height:auto;border-radius:var(--radius-l);padding:22px}
  .role-grid{grid-template-columns:minmax(0,1fr)}
  .pill-steps{grid-template-columns:minmax(0,1fr)}
  .tab-list{width:100%;border-radius:var(--radius-l)}
  .pull{padding:28px 24px}
  .col-grid{grid-template-columns:minmax(0,1fr)}
  .col-card{padding:34px 26px}
  .board-row{grid-template-columns:minmax(0,1fr);gap:10px}
}
@media (max-width:600px){
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  .stat-band,.stat-band.two{grid-template-columns:minmax(0,1fr)}
  .acc-item summary{padding:18px 20px;font-size:15px}
  .acc-a{padding:0 20px 20px}
  .vtl{padding-left:34px}
  .vtl-item::before,.vtl-item::after{left:-34px}
}

/* ==========================================================================
   动效
   ========================================================================== */
/* 仅在脚本可用时启用入场动效；无 JS 时内容保持可见 */
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
  .bars i,.hero-badge i{animation:none}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width:1280px){
  .site-header .wrap{gap:16px}
  .nav-link{padding:10px 12px;font-size:14.5px}
}
@media (max-width:1080px){
  .nav{display:none}
  .lang{display:none}
  .burger{display:flex;margin-left:auto}
  .header-cta{display:none}
  .brand img{height:54px}
  .site-header{height:82px}
  .hero-inner{grid-template-columns:minmax(0,1fr);gap:48px}
  .g4,.metrics.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
  .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px}
  .cta-band{grid-template-columns:minmax(0,1fr);padding:48px 36px}
}
@media (max-width:860px){
  .section{padding:72px 0}
  .g3,.steps{grid-template-columns:minmax(0,1fr)}
  .product-card{grid-template-columns:minmax(0,1fr)}
  .product-card .visual{min-height:280px}
  .product-card .body{padding:32px}
  .compare{grid-template-columns:minmax(0,1fr)}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .form-card{padding:26px}
  .wrap{padding:0 18px}
  .biz-grid{grid-template-columns:minmax(0,1fr)}
  .biz-card{padding:30px 26px}
  .arch-row{grid-template-columns:minmax(0,1fr)}
  .arch-tag{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:16px 20px}
  .arch-cells{grid-template-columns:minmax(0,1fr)}
  .loop-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .split-contact,.split-hero{grid-template-columns:minmax(0,1fr);gap:28px}
  .scroll-hint{display:block}
  .arch-list .arch-row{grid-template-columns:minmax(0,1fr);gap:10px}
  .arch-list .arch-tag{padding:14px 18px}
  .arch-list .arch-cells{padding:12px 14px}
  .arch-list .arch-cells span{font-size:12px;padding:4px 10px;white-space:normal}
}
@media (max-width:600px){
  body{font-size:15.5px}
  .brand img{height:48px}
  .site-header{height:74px}
  .hero{padding:132px 0 72px}
  .page-hero{padding:126px 0 56px}
  .g2,.g4,.metrics.g4,.metrics.g3{grid-template-columns:minmax(0,1fr)}
  .tl-grid{grid-template-columns:minmax(0,1fr)}
  .spec .row{grid-template-columns:minmax(0,1fr)}
  .spec .k{border-right:0;border-bottom:1px solid var(--line);padding-bottom:8px}
  .kpi-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .cta-band{padding:36px 24px}
  .metric{padding:26px 20px}
  .layer-list li{padding:11px 13px;gap:10px}
  .layer-list .nm{font-size:13px}
  .entry-card{flex-wrap:wrap}
  .entry-card .go{margin-left:0}
}