:root{
  --ink:#0f172a;
  --muted:#5b6475;
  --brand:#1f5aa6;
  --brand-2:#004e92;
  --brand-3:#000428;
  --card-radius:18px;
}

/* 通用容器 */
.wrap{ max-width:1200px; margin:0 auto; padding:0 16px; }
.sec-title{ margin:0 0 16px; font:800 26px/1.2 Arial,system-ui; color:var(--ink); }

/* ===== 海报 ===== */
.cf-hero{
  position:relative; isolation:isolate;
  min-height:56vh; display:grid; place-items:center;
  overflow:hidden; background:#000;
}
.cf-hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(140% 70% at 70% -10%, rgba(31,90,166,.35), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55)),
    var(--hero) center/cover no-repeat;
  transform:scale(1.06);
  transition:transform .2s ease;
  will-change:transform;
}
.cf-hero__inner{ position:relative; text-align:left; width:min(1200px,100%); padding:0 16px; }
.cf-hero__title{ margin:0 0 8px; font:800 clamp(28px,4.5vw,44px)/1.1 Arial,system-ui; color:#fff; letter-spacing:.02em; }
.cf-hero__subtitle{ margin:0 0 16px; color:rgba(255,255,255,.9); }

.btn{
  display:inline-block; padding:12px 18px; border-radius:999px; font:800 14px/1 Arial,system-ui;
  text-decoration:none; transition:filter .15s ease, transform .15s ease, box-shadow .2s ease;
}
.btn--solid{
  color:#fff;
  background:linear-gradient(90deg,var(--brand-2),var(--brand-3));
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  margin-right:10px;
}
.btn--solid:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.btn--ghost{
  color:#fff; border:1.5px solid rgba(255,255,255,.75); background:transparent;
}
.btn--ghost:hover{ filter:brightness(1.12); transform:translateY(-1px); }

/* ===== 卖点条 ===== */
.cf-highlights{ background:#fbfcfe; border-top:1px solid #eef1f5; border-bottom:1px solid #eef1f5; }
.cf-highlights .wrap{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:16px;
}
.hi{
  background:#fff; border:1px solid #e9edf2; border-radius:12px;
  padding:12px 14px; text-align:center; font-weight:700; color:#1f2937;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  transform:translateY(8px); opacity:0;
  transition:transform .35s ease, opacity .35s ease, box-shadow .2s ease;
}
.hi.in{ transform:none; opacity:1; }

/* ===== 卡片区 ===== */
.cf-sectors{ background:#fff; padding:40px 0 18px; }
.grid-cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.card{
  position:relative; border-radius:var(--card-radius); overflow:hidden; isolation:isolate;
  box-shadow:0 14px 36px rgba(0,0,0,.10);
  transform:translateY(12px); opacity:0;
  transition:transform .45s cubic-bezier(.2,.7,.2,1), opacity .45s;
}
.card.in{ transform:none; opacity:1; }
.card__bg{
  width:100%; height:100%; display:block; object-fit:cover;
  aspect-ratio: 4 / 3;
  transform:scale(1.02); transition:transform .4s ease;
  filter:saturate(1.02) contrast(1.02);
}
.card__overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:18px; color:#fff;
  background:linear-gradient(180deg, rgba(0,0,0,.0) 40%, rgba(0,0,0,.55) 100%);
  backdrop-filter:saturate(1.15);
}
.eyebrow{ font:800 12px/1 Arial; letter-spacing:.12em; opacity:.95; }
.card__title{ margin:6px 0 4px; font:800 20px/1.25 Arial,system-ui; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.card__desc{ margin:0 0 10px; opacity:.92; }
.card__more{
  align-self:flex-start; padding:8px 12px; border-radius:999px; font-weight:800; text-decoration:none;
  background:rgba(255,255,255,.92); color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
  transition:transform .15s ease, box-shadow .2s ease;
}
.card:hover .card__bg{ transform:scale(1.06); }
.card__more:hover{ transform:translateY(-1px); box-shadow:0 12px 24px rgba(0,0,0,.22); }

/* ===== 工艺流程 ===== */
.cf-flow{ background:#f8fafc; padding:36px 0 48px; }
.flowline{
  list-style:none; padding:18px 12px; margin:0; display:flex; gap:14px; flex-wrap:wrap;
  counter-reset: step;
}
.flowline li{
  position:relative; padding:12px 14px 12px 42px; background:#fff; border:1px solid #e9edf2; border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}
.flowline li::before{
  counter-increment: step; content: counter(step);
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  color:#fff; font:800 12px/1 Arial;
  background:linear-gradient(90deg,var(--brand-2),var(--brand-3));
  box-shadow:0 5px 14px rgba(0,0,0,.18);
}

/* ===== CTA ===== */
.cf-cta{
  background:linear-gradient(90deg,var(--brand-2),var(--brand-3));
  color:#fff; text-align:center; padding:40px 16px;
}
.cf-cta h3{ margin:0 0 6px; font:800 24px/1.2 Arial; }
.cf-cta p{ margin:0 0 14px; opacity:.92; }

/* ===== 响应式 ===== */
@media (max-width: 1024px){
  .cf-highlights .wrap{ grid-template-columns:repeat(2,1fr); }
  .grid-cards{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px){
  .grid-cards{ grid-template-columns:1fr; }
  .cf-highlights .wrap{ grid-template-columns:1fr; }
  .cf-hero{ min-height:48vh; }
}