/* ==========================================================================
   定制卡牌工厂 · 外贸独立站 UI 设计稿
   全局样式系统  style.css   —— V2.0（红色圆角按钮 + 红色图标）
   --------------------------------------------------------------------------
   [V2 变更]
     按钮 : 主色改为红色 #D90817，圆角 50px 全圆角（--btn-radius，V2.4 调整）
     图标 : 统一红色（要点勾、流程序号、特色图标、联系图标、悬浮按钮等）
   [V2.5 变更] --btn-radius 仅用于「按钮 / 输入框 / 标签 / 菜单项」
     图标方块（.logo__mark / .feature__icon / .info-card__icon / .steps3__num / .social a）
     恢复为圆角方形 --radius-sm(10px)，不再继承 50px 全圆角
   [对标站实测提取 · wjplayingcard.com]
     主题/编辑器 : GeneratePress + Elementor Pro
     配色        : 主色 #005793 / 辅助 #68A4CC / #CFECFF / 深色 #1A2933 / 浅底 #F5F6F7
     版式        : 内容宽 1500px、卡片圆角 15px、首屏 min-height 750px、区块间距 60px
     动效        : fadeInDown / fadeInLeft / fadeInRight，时长 1.25s
   [设计要求] B 端展示型官网 / 无商城 / 不标价 / 13+ 语种 / 三端自适应
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Roboto:wght@400;500;700&display=swap');

/* ---------- 1. 变量（对齐对标站） ---------- */
:root{
  /* 变量名沿用，取值已切换为对标站品牌色 */
  --navy-900:#101C25;   /* 最深底：页脚 / 导航条 */
  --navy-800:#1A2933;   /* 品牌深色（对标站 #1A2933） */
  --navy-700:#005793;   /* 品牌主蓝（对标站主色） */
  --navy-600:#0A6BB0;   /* 主蓝 hover */
  --gold-500:#005793;   /* 强调色 → 品牌主蓝 */
  --gold-400:#68A4CC;   /* 深底上的浅蓝强调 */
  --gold-100:#CFECFF;   /* 浅蓝 tint 底 */
  --ink:#1A2933;
  --muted:#667580;
  --line:#E1E6EA;
  --bg:#FFFFFF;
  --bg-soft:#F5F6F7;
  --bg-mist:#EDF1F4;
  --ok:#1E9E6A;
  /* V2：红色体系（按钮 / 图标） */
  --red:#D90817;
  --red-dark:#B30612;
  --red-light:#FDECEE;
  --radius:15px;         /* 对标站卡片圆角 15px */
  --radius-sm:10px;
  --btn-radius:50px;     /* 所有按钮 / 输入框 / 标签统一圆角（V2.4：10px → 50px 全圆角） */
  --shadow-sm:0 1px 2px rgba(16,32,56,.06),0 2px 8px rgba(16,32,56,.05);
  --shadow-md:0 6px 18px rgba(16,32,56,.08),0 2px 6px rgba(16,32,56,.05);
  --shadow-lg:0 18px 48px rgba(11,26,46,.16);
  --shadow-btn:0 0 10px 0 rgba(0,0,0,.5);   /* 对标站按钮阴影 */
  --container:1500px;    /* 对标站内容宽度 */
  --font-head:'Montserrat','PingFang SC','Microsoft YaHei',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Roboto','PingFang SC','Microsoft YaHei',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease:.25s cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. 基础重置 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.25;font-weight:700;letter-spacing:-.01em;font-family:var(--font-head)}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 22px}
.section{padding:60px 0}
.section--soft{background:var(--bg-soft)}
.section--mist{background:var(--bg-mist)}
.section--dark{background:var(--navy-800);color:#fff}
.section--tight{padding:40px 0}

/* ---------- 3. 标题与辅助文字 ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-head);
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy-700);margin-bottom:14px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--navy-700);display:block}
.section--dark .eyebrow{color:var(--gold-400)}
.section--dark .eyebrow::before{background:var(--gold-400)}
.section-title{font-size:39px;font-weight:600;line-height:1.15;margin-bottom:14px;color:var(--navy-800)}
.section-title--light{color:#fff}
.section-sub{color:var(--muted);max-width:820px;margin-bottom:38px;font-size:16px}
.section--dark .section-sub{color:rgba(255,255,255,.72)}
.center{text-align:center}
.center .section-sub{margin-left:auto;margin-right:auto}

/* ---------- 4. 按钮（对齐对标站：蓝底白字 / 3px 圆角 / 外发光阴影） ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 26px;border-radius:var(--btn-radius);border:1px solid transparent;
  font-family:var(--font-head);font-size:14.5px;font-weight:600;letter-spacing:.01em;
  transition:all var(--ease);white-space:nowrap;
}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 4px 14px rgba(217,8,23,.28)}
.btn-primary:hover{background:var(--red-dark);transform:translateY(-2px);box-shadow:0 8px 22px rgba(217,8,23,.38)}
.btn-dark{background:var(--red-dark);color:#fff;box-shadow:0 4px 14px rgba(179,6,18,.24)}
.btn-dark:hover{background:#950510;transform:translateY(-2px)}
.btn-outline{border-color:rgba(255,255,255,.55);color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.16);border-color:#fff}
.btn-ghost{border-color:var(--line);color:var(--red);background:#fff}
.btn-ghost:hover{border-color:var(--red);background:var(--red-light)}
.btn-sm{padding:9px 18px;font-size:13.5px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- 5. 顶部信息条 ---------- */
.topbar{background:var(--navy-900);color:rgba(255,255,255,.78);font-size:12.5px}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:40px;flex-wrap:wrap}
.topbar__list{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.topbar__list li{display:flex;align-items:center;gap:7px}
.topbar a:hover{color:var(--gold-400)}
.dot-ok{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block;box-shadow:0 0 0 3px rgba(30,158,106,.22)}

/* ---------- 6. 头部导航（含二级下拉，对齐对标站 IA） ---------- */
.header{position:sticky;top:0;z-index:80;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow var(--ease)}
.header.is-stuck{box-shadow:var(--shadow-md)}
/* 首页：页头悬浮于首屏之上（参考站做法），滚动后变实底 */
.header--over{position:fixed;top:0;left:0;right:0;background:transparent;border-bottom:0}
.header--over .logo__name{color:#fff}
.header--over .logo__slogan{color:rgba(255,255,255,.62)}
.header--over .nav__link{color:rgba(255,255,255,.92)}
.header--over .nav__item.is-active > .nav__link{color:#fff;box-shadow:inset 0 -3px 0 #fff}
.header--over .lang__btn{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32);color:#fff}
.header--over .burger{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.12)}
.header--over .burger span,.header--over .burger span::before,.header--over .burger span::after{background:#fff}
.header--over.is-solid{background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-md)}
.header--over.is-solid .logo__name{color:var(--navy-800)}
.header--over.is-solid .logo__slogan{color:var(--muted)}
.header--over.is-solid .nav__link{color:#243845}
.header--over.is-solid .nav__item.is-active > .nav__link{color:var(--navy-700);box-shadow:inset 0 -3px 0 var(--navy-700)}
.header--over.is-solid .lang__btn{background:#fff;border-color:var(--line);color:#243845}
.header--over.is-solid .burger{border-color:var(--line);background:#fff}
.header--over.is-solid .burger span,.header--over.is-solid .burger span::before,.header--over.is-solid .burger span::after{background:var(--navy-800)}
.header__inner{display:flex;align-items:center;gap:22px;min-height:72px}
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.logo__mark{
  width:40px;height:40px;border-radius:var(--radius-sm);flex-shrink:0;   /* 品牌方块：圆角方形，非按钮圆角 */
  background:var(--navy-700);
  display:grid;place-items:center;color:#fff;font-family:var(--font-head);font-weight:800;font-size:16px;
  box-shadow:var(--shadow-btn);
}
.logo__text{display:flex;flex-direction:column;line-height:1.15}
.logo__name{font-family:var(--font-head);font-weight:800;font-size:17px;letter-spacing:.02em;color:var(--navy-800)}
.logo__slogan{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.nav{margin-left:auto}
.nav__list{display:flex;align-items:center;gap:0}
.nav__item{position:relative}
.nav__link{
  display:flex;align-items:center;gap:6px;padding:12px 13px;
  font-family:var(--font-head);font-size:14px;font-weight:600;color:#243845;transition:all var(--ease);
}
.nav__link:hover{color:var(--navy-700)}
.nav__item.is-active > .nav__link{color:var(--navy-700);box-shadow:inset 0 -3px 0 var(--navy-700)}
.nav__link .caret{width:9px;height:6px;transition:transform var(--ease)}

/* 二级下拉 */
.submenu{
  position:absolute;left:0;top:100%;min-width:238px;background:#fff;
  border:1px solid var(--line);border-top:3px solid var(--navy-700);
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
  box-shadow:0 14px 34px rgba(16,32,56,.14);
  padding:8px 0;display:none;z-index:90;
}
.nav__item.has-sub:hover .submenu{display:block}
.nav__item.has-sub:hover .caret{transform:rotate(180deg)}
.submenu li a{
  display:block;padding:9px 18px;font-size:13.5px;color:#3C4A61;transition:all var(--ease);
}
.submenu li a:hover{background:var(--bg-soft);color:var(--navy-700);padding-left:22px}

.header__actions{display:flex;align-items:center;gap:12px;flex-shrink:0}

/* 语言切换 */
.lang{position:relative}
.lang__btn{
  display:flex;align-items:center;gap:8px;padding:9px 13px;background:#fff;
  border:1px solid var(--line);border-radius:var(--btn-radius);font-size:13.5px;font-weight:600;color:#243845;
}
.lang__btn:hover{border-color:var(--navy-700);color:var(--navy-700)}
.lang__btn svg{transition:transform var(--ease)}
.lang.is-open .lang__btn svg{transform:rotate(180deg)}
.lang__menu{
  position:absolute;right:0;top:calc(100% + 8px);width:212px;max-height:330px;overflow:auto;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);
  padding:7px;display:none;z-index:95;
}
.lang.is-open .lang__menu{display:block}
.lang__item{display:flex;justify-content:space-between;gap:10px;padding:9px 11px;border-radius:var(--btn-radius);font-size:13.5px;color:#3C4A61;cursor:pointer}
.lang__item:hover{background:var(--bg-soft);color:var(--navy-700)}
.lang__item.is-current{background:var(--gold-100);color:var(--navy-700);font-weight:700}
.lang__item span{color:var(--muted);font-size:12px}

.burger{display:none;width:42px;height:42px;border:1px solid var(--line);background:#fff;border-radius:var(--btn-radius);align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:2px;background:var(--navy-800);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--navy-800)}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* ---------- 7. 首页主视觉（按参考站截图重构：全幅底图 + 左侧深色圆角面板）---------- */
.hero{position:relative;background:#E9E5DE;overflow:hidden;min-height:750px;display:flex;align-items:center}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.06),rgba(0,0,0,0) 62%)}
.hero__inner{position:relative;z-index:2;width:100%;padding:140px 22px 96px}
.hero__panel{
  background:rgba(15,19,25,.94);border-radius:var(--radius);padding:46px 48px 44px;
  max-width:680px;color:#fff;box-shadow:0 26px 64px rgba(0,0,0,.38);
}
.hero__badge{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.05em;color:#FF6B70;margin-bottom:16px}
.hero__panel h1{font-size:40px;font-weight:700;line-height:1.14;color:#fff;margin-bottom:16px}
.hero__lead{font-size:16px;color:rgba(255,255,255,.84);max-width:560px;margin-bottom:24px}
.hero__stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  padding:20px 0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:20px;
}
.hero__stats b{display:block;font-family:var(--font-head);font-size:23px;font-weight:700;color:#fff;line-height:1.15}
.hero__stats span{font-size:11.5px;color:rgba(255,255,255,.6);letter-spacing:.02em}
.hero__pills{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.hero__pills span{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:var(--btn-radius);padding:6px 12px;font-size:12px;color:rgba(255,255,255,.9)}

/* 卡牌视觉占位 */
.hero__visual{position:relative;height:420px}
.card-fan{position:absolute;inset:0}
.card-fan__item{
  position:absolute;width:172px;height:246px;border-radius:var(--radius-sm);
  background:linear-gradient(150deg,#FFFFFF,#E6EDF3);
  box-shadow:0 22px 48px rgba(0,0,0,.45);
  display:grid;place-items:center;font-size:12px;color:#5B6B85;text-align:center;padding:14px;
  border:1px solid rgba(255,255,255,.7);
}
.card-fan__item:nth-child(1){left:6%;top:56px;transform:rotate(-13deg)}
.card-fan__item:nth-child(2){left:32%;top:24px;transform:rotate(-2deg);z-index:3;background:linear-gradient(150deg,#FFFFFF,#CFECFF);border-color:rgba(0,87,147,.35)}
.card-fan__item:nth-child(3){left:58%;top:52px;transform:rotate(11deg)}
.card-fan__item span{font-weight:700;color:var(--navy-700)}

/* ---------- 8. 占位图 ---------- */
.ph{
  position:relative;border-radius:var(--radius-sm);overflow:hidden;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.5) 0 12px,rgba(255,255,255,0) 12px 24px),
    linear-gradient(145deg,#E3E9EE,#CFD8E0);
  display:grid;place-items:center;color:#4A5B75;font-size:13px;font-weight:600;
  border:1px dashed #A9B8CE;min-height:180px;text-align:center;padding:14px;
}
.ph--tall{min-height:340px}
.ph--wide{min-height:260px}
.ph--square{aspect-ratio:1/1;min-height:0}
.ph--dark{background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 12px,rgba(255,255,255,0) 12px 24px),linear-gradient(145deg,#1E3A5F,#16283F);color:rgba(255,255,255,.62);border-color:rgba(255,255,255,.25)}
.ph--gold{background:repeating-linear-gradient(45deg,rgba(0,87,147,.10) 0 12px,rgba(255,255,255,0) 12px 24px),linear-gradient(145deg,#CFECFF,#B7DDF5);border-color:#8FC4E4;color:#005793}

/* ---------- 9. 网格与卡片 ---------- */
.grid{display:grid;gap:26px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-5{grid-template-columns:repeat(5,1fr)}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:all var(--ease);display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#C3D3E0}
.card__body{padding:20px 22px 24px}
.card__title{font-size:20px;font-weight:600;line-height:1.3;margin-bottom:8px;color:var(--navy-800)}
.card__text{font-size:15px;color:var(--muted);margin:0}
.card__tag{
  position:absolute;left:14px;top:14px;z-index:2;
  background:var(--navy-700);color:#fff;font-family:var(--font-head);font-size:11.5px;font-weight:600;
  padding:5px 11px;border-radius:var(--btn-radius);letter-spacing:.04em;
}
.card__media{position:relative}

/* 品类卡（首页产品入口） */
.cat-card{position:relative;display:block;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#fff;transition:all var(--ease)}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#C3D3E0}
.cat-card__img{height:186px}
.cat-card__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px}
.cat-card__name{font-family:var(--font-head);font-weight:700;font-size:15.5px;color:var(--navy-800)}
.cat-card__en{font-size:12px;color:var(--muted);display:block;font-weight:500}
.cat-card__arrow{width:30px;height:30px;border-radius:50%;background:var(--red-light);display:grid;place-items:center;color:var(--red);flex-shrink:0;transition:all var(--ease)}
.cat-card:hover .cat-card__arrow{background:var(--red);color:#fff}

/* 优势 / 图标卡 */
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;transition:all var(--ease)}
.feature:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.feature__icon{
  width:48px;height:48px;border-radius:var(--radius-sm);background:var(--red-light);color:var(--red);   /* 图标方块：圆角方形 */
  display:grid;place-items:center;font-family:var(--font-head);font-size:20px;font-weight:800;margin-bottom:16px;
}
.feature h3{font-size:16.5px;margin-bottom:9px;color:var(--navy-800)}
.feature p{font-size:14px;color:var(--muted);margin:0}
.feature--dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.feature--dark h3{color:#fff}.feature--dark p{color:rgba(255,255,255,.68)}
.feature--dark .feature__icon{background:rgba(217,8,23,.22);color:#FF8A93}

/* ---------- 10. 数据条 ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.stats__item{background:#fff;padding:28px 22px;text-align:center}
.stats__num{font-family:var(--font-head);font-size:34px;font-weight:800;color:var(--navy-700);line-height:1.1}
.stats__num small{font-size:16px;color:var(--muted);font-weight:700}
.stats__label{font-size:13px;color:var(--muted);margin-top:7px}
.stats--dark{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.12)}
.stats--dark .stats__item{background:transparent}
.stats--dark .stats__num{color:#CFECFF}
.stats--dark .stats__label{color:rgba(255,255,255,.68)}

/* ---------- 11. 定制流程 ---------- */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:54px 22px 24px}
.step::before{
  counter-increment:step;content:"0" counter(step);
  position:absolute;left:22px;top:16px;font-family:var(--font-head);font-size:26px;font-weight:800;
  color:var(--red);opacity:.9;letter-spacing:-.02em;
}
.step h4{font-size:15.5px;margin-bottom:7px;color:var(--navy-800)}
.step p{font-size:13.5px;color:var(--muted);margin:0}

/* ---------- 12. 规格参数表 ---------- */
.spec{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.spec__row{display:grid;grid-template-columns:200px 1fr;border-bottom:1px solid var(--line)}
.spec__row:last-child{border-bottom:0}
.spec__row:nth-child(odd){background:var(--bg-soft)}
.spec__key{padding:14px 20px;font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--navy-800);border-right:1px solid var(--line)}
.spec__val{padding:14px 20px;font-size:14px;color:#3C4A61}
.spec__val b{color:var(--navy-700)}
.tagline{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px}
.tag{background:var(--bg-mist);border:1px solid var(--line);color:#3C4A61;font-size:12.5px;padding:5px 12px;border-radius:var(--btn-radius);font-weight:600}
.tag--gold{background:var(--gold-100);border-color:#9CC9E6;color:var(--navy-700)}
.tag--ok{background:#E9F7F0;border-color:#BEE4D1;color:#12724B}

/* ---------- 13. 询盘 CTA 带 ---------- */
.cta{position:relative;overflow:hidden;background:var(--navy-800);color:#fff}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(660px 320px at 88% 20%,rgba(217,8,23,.30),transparent 62%)}
.cta__inner{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:center;padding:62px 0}
.cta h2{font-size:30px;margin-bottom:12px;color:#fff}
.cta p{color:rgba(255,255,255,.82);margin-bottom:0;max-width:620px}
.cta__actions{display:flex;flex-direction:column;gap:12px}
.cta .btn-outline{border-color:rgba(255,255,255,.6)}

/* ---------- 14. 表单 ---------- */
.form{display:grid;gap:16px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:13px;font-weight:700;color:#3C4A61;font-family:var(--font-head)}
.field label i{color:#C0392B;font-style:normal}
.field input,.field select,.field textarea{
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--btn-radius);
  font-size:14px;font-family:inherit;background:#fff;color:var(--ink);transition:all var(--ease);width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy-700);box-shadow:0 0 0 3px rgba(0,87,147,.12)}
.field textarea{min-height:118px;resize:vertical}
.field__hint{font-size:12px;color:var(--muted)}
.form__submit{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.form__note{font-size:12.5px;color:var(--muted)}

/* 联系信息卡 */
.info-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;display:flex;gap:16px;align-items:flex-start}
.info-card__icon{width:42px;height:42px;border-radius:var(--radius-sm);background:var(--red);color:#fff;display:grid;place-items:center;flex-shrink:0;font-size:17px}   /* 图标方块：圆角方形 */
.info-card h4{font-size:15px;margin-bottom:5px;color:var(--navy-800)}
.info-card p{margin:0;font-size:13.5px;color:var(--muted);word-break:break-word}

/* ---------- 15. 面包屑 ---------- */
.crumb{background:var(--bg-mist);border-bottom:1px solid var(--line)}
.crumb__inner{display:flex;align-items:center;gap:9px;min-height:52px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.crumb a:hover{color:var(--navy-700)}
.crumb__sep{color:#A9B8CE}
.crumb__current{color:var(--navy-800);font-weight:600}

/* 内页头部 */
.pagehead{background:var(--navy-800);color:#fff;position:relative;overflow:hidden}
.pagehead::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 340px at 84% 16%,rgba(104,164,204,.30),transparent 64%)}
.pagehead__inner{position:relative;padding:62px 0 58px;max-width:820px}
.pagehead h1{font-size:38px;margin-bottom:14px;color:#fff}
.pagehead p{color:rgba(255,255,255,.8);margin:0;font-size:15.5px}

/* ---------- 16. 产品筛选 ---------- */
.filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
.filter__btn{
  padding:9px 20px;border-radius:var(--btn-radius);border:1px solid var(--line);background:#fff;
  font-family:var(--font-head);font-size:13.5px;font-weight:600;color:#3C4A61;transition:all var(--ease);
}
.filter__btn:hover{border-color:var(--red);color:var(--red)}
.filter__btn.is-active{background:var(--red);border-color:var(--red);color:#fff}

/* ---------- 17. 博客列表 ---------- */
.post{display:grid;grid-template-columns:300px 1fr;gap:24px;padding:24px 0;border-bottom:1px solid var(--line);align-items:center}
.post:first-child{padding-top:0}
.post__meta{display:flex;gap:14px;font-size:12.5px;color:var(--muted);margin-bottom:9px;flex-wrap:wrap;align-items:center}
.post h3{font-size:19px;margin-bottom:9px;color:var(--navy-800)}
.post h3:hover{color:var(--navy-700)}
.post p{font-size:14px;color:var(--muted);margin:0}
.post__img{height:190px}

/* ---------- 18. 页脚 ---------- */
.footer{background:#0B0B0B;color:rgba(255,255,255,.7);font-size:13.5px;padding:62px 0 0}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:38px;padding-bottom:44px}
.footer h4{color:#fff;font-size:14.5px;margin-bottom:18px;letter-spacing:.03em}
.footer__list li{margin-bottom:10px}
.footer__list a:hover{color:var(--gold-400)}
.footer__about p{margin:16px 0 0;line-height:1.75}
.footer__logo .logo__name{color:#fff}
.footer__logo .logo__slogan{color:rgba(255,255,255,.5)}
.footer__bottom{border-top:1px solid rgba(255,255,255,.12);padding:20px 0;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.5)}
.footer__bottom a:hover{color:var(--gold-400)}
.social{display:flex;gap:10px;margin-top:18px}
.social a{width:36px;height:36px;border-radius:var(--radius-sm);background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;transition:all var(--ease)}   /* 图标方块：圆角方形 */
.social a:hover{background:var(--red);color:#fff}

/* 悬浮沟通按钮 */
.float-chat{position:fixed;right:22px;bottom:26px;z-index:95;display:flex;flex-direction:column;gap:10px}
.float-chat a{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--red);color:#fff;font-size:11px;font-weight:700;box-shadow:var(--shadow-lg);transition:all var(--ease);
}
.float-chat a:hover{transform:translateY(-3px) scale(1.04)}
.float-chat a.is-wa{background:#25D366;color:#fff}
.float-chat a.is-top{background:#fff;color:var(--red);border:1px solid var(--line)}

/* ---------- 19. 设计稿标注 ---------- */
.mock-note{
  background:var(--gold-100);border:1px dashed #9CC9E6;border-radius:var(--radius-sm);
  padding:12px 16px;font-size:12.5px;color:#0B4A73;margin-bottom:26px;
}
.mock-note b{color:#005793}

/* 对标说明条 */
.ref-note{background:#E9F7F0;border:1px solid #BEE4D1;border-radius:var(--radius-sm);padding:12px 16px;font-size:12.5px;color:#12724B;margin-bottom:20px}

/* ---------- 22. 对标站首页专属组件 ---------- */
/* 首屏全幅底图（照片占位） */
.hero__bg{
  position:absolute;inset:0;border:0;border-radius:0;min-height:0;display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.55) 0 12px,rgba(255,255,255,0) 12px 24px),linear-gradient(145deg,#F0ECE5,#D5CFC4);
  color:#8B8478;font-size:13px;font-weight:600;
}
/* 首屏下方搜索条 */
.hero-search{background:#F5F6F7;border-bottom:1px solid var(--line);padding:14px 0}
.hero-search__box{display:flex;align-items:center;gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--btn-radius);overflow:hidden}
.hero-search__box input{flex:1;border:0;padding:12px 16px;font-size:14px;font-family:inherit;outline:none}
.hero-search__box button{width:56px;background:var(--navy-800);color:#fff;border:0;padding:12px 0;font-size:15px}
/* H2 红色短下划线（参考站分区标题装饰） */
.center .section-title::after,
.section-title.center::after,
.section-title--line::after{
  content:"";display:block;width:64px;height:3px;background:var(--red);border-radius:2px;margin:16px auto 0;
}
.section-title--line-left::after{margin-left:0}

/* 品类卡：一排 3 个 × 2 排（对标站为 6 个一排，按客户要求改为 3 个一排） */
.cat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.cat-cn{background:#F5F6F7;border:1px solid #E4E7EA;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:all var(--ease);padding-bottom:6px}
.cat-cn:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#C3D3E0}
.cat-cn__fig{background:#fff;border:1px solid #EDF0F2;border-radius:var(--radius-sm);margin:14px 14px 0;padding:16px}
.cat-cn__fig .ph{min-height:186px;border:0;background:repeating-linear-gradient(45deg,rgba(0,0,0,.028) 0 12px,rgba(255,255,255,0) 12px 24px),linear-gradient(145deg,#EFF3F7,#DEE6ED);color:#7C8B9D}
.cat-cn__body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.cat-cn h3{font-size:30px;font-weight:700;line-height:1.15;color:var(--navy-800);margin-bottom:16px}
.cat-cn ul{display:grid;gap:9px;margin-bottom:16px}
.cat-cn li{position:relative;padding-left:18px;font-size:14px;line-height:1.6;color:var(--muted)}
.cat-cn li::before{content:"✓";position:absolute;left:0;top:1px;color:var(--red);font-size:12px;font-weight:700}
.cat-cn__ideal{margin-top:auto;font-size:14px;line-height:1.6;color:#3C4A61;border-top:1px solid var(--line);padding-top:14px}
.cat-cn__ideal b{color:var(--navy-700)}

/* 左右分栏（Kickstarter 等） */
.split2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}

/* Why Choose —— 4 项指标卡 */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.why__item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;transition:all var(--ease)}
.why__item:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.why__item h3{font-size:18px;font-weight:700;line-height:1.3;margin-bottom:10px;color:var(--navy-800)}
.why__item p{font-size:15px;color:var(--muted);margin:0}

/* Kickstarter 黄色圆角板块（按截图 #FBB216） */
.amber{background:#FBB216;border-radius:var(--radius);padding:46px 48px;color:#1A2933}
.amber h2,.amber .section-title{color:#1A2933}
.amber p,.amber .section-sub{color:rgba(26,41,51,.84)}
.amber__panel{background:#fff;border-radius:var(--radius-sm);padding:16px}
.amber__panel .ph{min-height:200px;border:0;background:repeating-linear-gradient(45deg,rgba(0,0,0,.03) 0 12px,rgba(255,255,255,0) 12px 24px),linear-gradient(145deg,#F2F4F7,#E2E7ED);color:#7C8B9D}

/* 生产流程深色板块（按截图：黑底白字 + 红色序号 + 图文交替） */
.section--black{background:#0E1116;color:#fff}
.section--black .section-title{color:#fff}
.section--black .section-sub{color:rgba(255,255,255,.72)}
.section--black .ph{background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 12px,rgba(255,255,255,0) 12px 24px),linear-gradient(145deg,#1C242F,#131A23);color:rgba(255,255,255,.55);border-color:rgba(255,255,255,.16)}
.proc-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px 40px}
.proc-col{display:grid;gap:30px;align-content:start}
.proc-item{position:static;border-radius:0;overflow:visible;display:grid;grid-template-columns:180px 1fr;gap:18px;align-items:center}
.proc-item .ph{min-height:132px;border-radius:var(--radius-sm)}
.proc-item__body{padding:0}
.proc-item__body h4{font-size:17px;font-weight:700;color:#fff;margin:0 0 8px;display:flex;gap:10px;align-items:baseline;line-height:1.25}
.proc-item__body h4 span{font-family:var(--font-head);font-size:19px;font-weight:800;color:var(--red);flex-shrink:0}
.proc-item__body p{font-size:13.5px;color:rgba(255,255,255,.7);margin:0}
.proc-item--reverse{grid-template-columns:1fr 180px}
.proc-item--reverse .proc-item__body{order:1}
.proc-item--reverse .ph{order:2}

/* 询盘大表单 */
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow-sm)}
.quote.form{gap:14px}
.quote .form__row{grid-template-columns:1fr 1fr}
.fieldset-note{background:var(--bg-soft);border-left:3px solid var(--navy-700);padding:10px 14px;font-size:12.5px;color:#3C4A61;border-radius:var(--radius-sm);margin:2px 0}

/* ---------- 23. 内页首屏 与 品类落地页组件（按参考站第 2 张截图） ---------- */
/* 内页首屏（结构与首页一致，高度更紧凑） */
.hero--page{min-height:520px}
.hero--page .hero__inner{padding:132px 22px 72px}
.hero--page .hero__panel{max-width:880px;padding:36px 38px 34px}
.hero--page h1{font-size:34px}
.hero__crumb{font-size:13px;color:rgba(255,255,255,.6);margin-bottom:14px}
.hero__crumb a:hover{color:#fff}
.hero__crumb span{color:rgba(255,255,255,.92)}

/* 产品列表（4 列） */
.plist-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.plist-head__count{font-size:14px;color:var(--muted)}
.plist-head select{padding:10px 14px;border:1px solid var(--line);border-radius:var(--btn-radius);font-size:13.5px;font-family:inherit;background:#fff}
.plist{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.prod{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;text-align:center;transition:all var(--ease);display:flex;flex-direction:column}
.prod:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:#C3D3E0}
.prod__fig{padding:18px 18px 0}
.prod__fig .ph{min-height:152px;border:0;background:repeating-linear-gradient(45deg,rgba(0,0,0,.028) 0 12px,rgba(255,255,255,0) 12px 24px),linear-gradient(145deg,#EFF3F7,#DEE6ED);color:#7C8B9D}
.prod__name{font-size:14px;font-weight:600;color:var(--navy-700);padding:0 16px;margin:16px 0 16px;flex:1;line-height:1.45}
.prod .btn{margin:0 18px 18px}

/* 三列细线框 */
.tricol{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tricol__item{border:1px solid var(--line);border-radius:var(--radius-sm);padding:26px 24px;background:#fff}
.tricol__item h3{font-size:17px;color:var(--red);margin-bottom:16px;display:flex;gap:9px;align-items:center;line-height:1.3}
.tricol__item ul{display:grid;gap:9px}
.tricol__item li{font-size:14px;color:var(--muted);position:relative;padding-left:22px;line-height:1.55}
.tricol__item li::before{content:"✓";position:absolute;left:0;top:0;color:var(--red);font-weight:700;font-size:12px}

/* 编号步骤（3 列） */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.steps3__item{border:1px solid var(--line);border-radius:var(--radius-sm);padding:24px;background:#fff}
.steps3__head{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.steps3__num{width:32px;height:32px;border-radius:var(--radius-sm);background:var(--red-light);color:var(--red);display:grid;place-items:center;font-family:var(--font-head);font-size:13px;font-weight:800;flex-shrink:0}   /* 图标方块：圆角方形 */
.steps3__item h4{font-size:15.5px;color:var(--navy-800);margin:0}
.steps3__item p{font-size:13.5px;color:var(--muted);margin:0}

/* 合作方 LOGO 墙 */
.partners{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:center}
.partners__logos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.partners__logos .ph{min-height:92px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:#9AA7B5}

/* 客户评价（深色板块 + 聊天截图卡） */
.reviews{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.reviews .ph{min-height:400px;border-radius:var(--radius-sm);background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 12px,rgba(255,255,255,0) 12px 24px),linear-gradient(145deg,#1C242F,#131A23);color:rgba(255,255,255,.55);border-color:rgba(255,255,255,.16)}

/* 视频板块 */
.video-band{position:relative;border-radius:var(--radius);overflow:hidden;min-height:360px;display:grid;place-items:center}
.video-band .ph{position:absolute;inset:0;border:0;border-radius:0;min-height:0}
.video-band__play{position:relative;z-index:2;width:76px;height:76px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:24px;box-shadow:0 12px 34px rgba(0,0,0,.4)}

/* FAQ 折叠列表 */
.faq{max-width:920px;margin:0 auto;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;overflow:hidden}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item:last-child{border-bottom:0}
.faq__q{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 24px;font-size:15px;font-weight:600;color:var(--navy-800);cursor:pointer}
.faq__q b{color:var(--red);font-size:19px;flex-shrink:0;transition:transform var(--ease);font-weight:700}
.faq__item.is-open .faq__q b{transform:rotate(45deg)}
.faq__a{padding:0 24px 20px;font-size:14px;color:var(--muted);display:none}
.faq__item.is-open .faq__a{display:block}

/* ---------- 21. 入场动效（对齐对标站 Elementor 动效） ---------- */
/* 关键帧与对标站加载的 animate.css 定义完全一致 */
@keyframes fadeInDown{from{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}
@keyframes fadeInLeft{from{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}
@keyframes fadeInRight{from{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}
/* 大区块专用：小位移淡入，避免整块从屏幕外滑入 */
@keyframes fadeInSoft{from{opacity:0;transform:translate3d(0,-28px,0)}to{opacity:1;transform:none}}

/* 未启用 JS 时不隐藏内容，避免动效失效导致空白 */
.js-anim .anim-ready{visibility:hidden}
.anim-in{
  visibility:visible;
  animation-duration:1.25s;                       /* 对标站 .animated 默认时长 */
  animation-timing-function:cubic-bezier(.25,.46,.45,.94);
  animation-fill-mode:both;
  will-change:opacity,transform;
}
.anim-in.d-fadeInDown{animation-name:fadeInDown}
.anim-in.d-fadeInLeft{animation-name:fadeInLeft}
.anim-in.d-fadeInRight{animation-name:fadeInRight}
.anim-in.d-fadeInSoft{animation-name:fadeInSoft}

@media (prefers-reduced-motion:reduce){
  .js-anim .anim-ready{visibility:visible}
  .anim-in{animation:none !important}
}

/* ---------- 20. 响应式 ---------- */
@media (max-width:1180px){
  .nav__link{padding:12px 9px;font-size:13.5px}
  .grid-5{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .cat-row{gap:20px}
  .why{grid-template-columns:repeat(2,1fr)}
  .plist{grid-template-columns:repeat(3,1fr)}
  .reviews{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1020px){
  .submenu{min-width:210px}
}
@media (max-width:980px){
  .hero__inner{grid-template-columns:1fr;gap:40px;padding:48px 22px}
  .split2{grid-template-columns:1fr;gap:26px}
  .proc-grid{grid-template-columns:1fr}
  .proc-col{grid-template-rows:none}
  .cat-row{grid-template-columns:repeat(2,1fr)}
  .section-title{font-size:32px}
  .cat-cn h3{font-size:24px}
  .hero__panel{padding:38px 34px 36px}
  .hero__stats b{font-size:20px}
  .proc-item,.proc-item--reverse{grid-template-columns:150px 1fr}
  .tricol,.steps3,.partners{grid-template-columns:1fr}
  .plist{grid-template-columns:repeat(2,1fr)}
  .hero--page{min-height:460px}
  .hero--page .hero__panel{padding:30px 28px 28px}
  .hero--page h1{font-size:28px}
  .video-band{min-height:260px}
  .hero__center h1{font-size:34px}
  .hero h1{font-size:37px}
  .hero__visual{height:330px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .cta__inner{grid-template-columns:1fr;gap:28px;padding:50px 0}
  .footer__grid{grid-template-columns:1fr 1fr;gap:30px}
  .spec__row{grid-template-columns:150px 1fr}
  .post{grid-template-columns:1fr}
  .post__img{height:200px}
}
@media (max-width:820px){
  .nav{position:fixed;left:0;right:0;top:112px;background:#fff;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg);padding:10px 18px 22px;display:none;max-height:calc(100vh - 132px);overflow:auto}
  .nav.is-open{display:block}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__item{border-bottom:1px solid var(--line)}
  .nav__link{padding:14px 6px;font-size:15px;justify-content:space-between}
  .nav__item.is-active > .nav__link{box-shadow:none;border-left:3px solid var(--navy-700);padding-left:12px}
  .submenu{position:static;display:block;border:0;border-top:0;box-shadow:none;padding:0 0 8px 12px;min-width:0}
  .submenu li a{padding:9px 6px;font-size:14px}
  .burger{display:flex}
  .topbar__list li:not(:first-child){display:none}
  .section{padding:52px 0}
  .section-title{font-size:26px}
  .hero h1{font-size:30px}
  .pagehead h1{font-size:28px}
  .grid-3,.grid-2,.grid-4,.grid-5{grid-template-columns:1fr}
  .cat-row{grid-template-columns:1fr}
  .cat-cn h3{font-size:21px}
  .hero__inner{padding:112px 22px 64px}
  .hero__panel{padding:30px 24px 28px;max-width:none}
  .hero__panel h1{font-size:28px}
  .hero__stats{grid-template-columns:repeat(2,1fr);gap:14px}
  .amber{padding:30px 24px}
  .proc-item,.proc-item--reverse{grid-template-columns:1fr;gap:12px}
  .proc-item--reverse .proc-item__body,.proc-item--reverse .ph{order:0}
  .plist,.reviews{grid-template-columns:1fr}
  .partners__logos{grid-template-columns:repeat(2,1fr)}
  .why{grid-template-columns:1fr}
  .quote{padding:20px 18px}
  .hero__center{padding:64px 22px}
  .hero__center h1{font-size:28px}
  .form__row{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .hero__meta{gap:18px}
  .hero__meta b{font-size:22px}
  .float-chat{right:14px;bottom:16px}
  .header__actions .btn{display:none}
}