/* Site typeface: Noto Sans SC (思源黑体), self-hosted so every device shows the same font.
   Subset to the characters the site uses (assets/fonts, SIL Open Font License — see OFL-NotoSansSC.txt).
   Characters added later that are not in the subset fall back to the system Chinese fonts in --font-cn;
   rebuild the subset after text changes (README → 字体). */
@font-face { font-family: "Noto Sans SC"; font-style: normal; font-weight: 100 450; font-display: swap; src: url("assets/fonts/NotoSansSC-Regular.subset.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans SC"; font-style: normal; font-weight: 451 650; font-display: swap; src: url("assets/fonts/NotoSansSC-Medium.subset.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans SC"; font-style: normal; font-weight: 651 900; font-display: swap; src: url("assets/fonts/NotoSansSC-Bold.subset.woff2") format("woff2"); }

:root {
  /* Site font first (self-hosted Noto Sans SC), then Chinese system fonts as fallback: PingFang (Apple), HarmonyOS Sans / MiSans (Huawei / Xiaomi), Microsoft YaHei (Windows), Noto / Source Han (Android, Linux) */
  --font-cn: "Noto Sans SC", "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", system-ui, sans-serif;
  --page: #f6f7f9;
  --ink: #222832;
  --muted: #868b94;
  --line: #e7e9ed;
  --card: #fff;
  --pink: #fa3e96;
  --violet: #c9b8fc;
  --footer: #232931;
  --container: 1440px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--page);
  font-family: var(--font-cn);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { color: #fff; background: #fa3d97; }

.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 10px 16px; border-radius: 999px; color: #fff; background: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: relative; z-index: 20; width: 100%; height: 82px; }
.header-inner { width: min(100% - 48px, var(--container)); height: 100%; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; width: 104px; justify-self: start; }
.brand img { width: 100%; height: auto; }
.nav-pill { display: flex; align-items: center; justify-content: center; gap: 3px; padding: 5px; border: 1px solid rgba(35,41,49,.035); border-radius: 999px; background: rgba(255,255,255,.88); box-shadow: 0 4px 18px rgba(26,33,45,.035); }
.nav-pill > a { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 17px; border: 0; border-radius: 999px; background: transparent; color: #343942; font-size: 13px; transition: color .2s ease, background .2s ease; }
.nav-pill > a:hover { color: #171b22; background: #f4f5f7; }
.header-contact { justify-self: end; }
.mobile-menu-toggle { display: none; }

.button { position: relative; display: inline-flex; align-items: center; justify-content: space-between; min-height: 50px; gap: 24px; padding: 6px 8px 6px 18px; border: 1px solid transparent; border-radius: 999px; white-space: nowrap; font-size: 13px; font-weight: 500; transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 9px 24px rgba(37,41,52,.11); }
.button-light { color: #292e36; border-color: #e7e8eb; background: rgba(255,255,255,.9); }
.button-light:hover { border-color: #d9dce1; background: #fff; }
.button-gradient { color: #fff; background: linear-gradient(110deg, #ff3e51 0%, #fd3e85 51%, #d982e8 100%); box-shadow: 0 7px 19px rgba(250,62,123,.17); }
.button-gradient:hover { box-shadow: 0 10px 25px rgba(250,62,123,.28); }
.button-arrow { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.84); transition: transform .22s ease, background .22s ease; }
.button-arrow img { width: 10px; height: 10px; object-fit: contain; }
.button-gradient .button-arrow { background: rgba(255,255,255,.18); }
.button:hover .button-arrow { transform: translateX(2px); }
.button-light .button-arrow { background: #f4f5f7; }

.hero-section { padding: 0 24px; }
.hero-frame { position: relative; isolation: isolate; width: min(100%, 1440px); min-height: 1010px; margin: 0 auto; padding: 95px 48px 84px; overflow: hidden; border: 1px solid rgba(225,228,234,.58); border-radius: 28px; }
.grid-surface { background-color: #f7f8fa; background-image: url("assets/bg-lines.svg"); background-position: center; background-repeat: no-repeat; background-size: cover; }
.hero-frame.grid-surface { background-color: #fff; background-image: none; }
.eyebrow { display: flex; width: fit-content; align-items: center; gap: 8px; margin: 0 auto; padding: 5px 12px; border: 1px solid #e3e6e9; border-radius: 999px; background: rgba(255,255,255,.7); color: #333944; font-size: 12px; line-height: 1.2; }
.eyebrow-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #20252d; }
.hero-copy { position: relative; z-index: 2; margin: 35px auto 0; text-align: center; }
h1, h2, h3, p, figure { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-cn); letter-spacing: 0; }
button, input, select, textarea { font-family: inherit; }
.hero-copy h1, .hero-copy .hero-subtitle { max-width: 1000px; margin: 0 auto; font-size: clamp(48px, 5.5vw, 76px); font-weight: 500; line-height: 1.08; letter-spacing: 0; }
.hero-copy h1 { color: #080808; }
.hero-copy > p { margin: 21px 0 24px; color: #626974; font-size: 16px; }
.hero-copy .hero-subtitle { margin: 8px auto 0; background: linear-gradient(100deg, #CC2017 0%, #E24737 100%); color: transparent; font-weight: 800; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.button-row { display: flex; align-items: center; justify-content: center; gap: 12px; }

.feature-ribbon { width: min(calc(100% - 48px), 1440px); margin: 0 auto; padding: 17px 0 4px; }
.feature-ribbon-inner { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid rgba(226,228,233,.8); border-radius: 16px; background: rgba(255,255,255,.42); }

.section { position: relative; padding: 104px 24px; }
.section-inner { width: min(100%, var(--container)); margin: 0 auto; padding: 0 48px; }
.split-layout { display: grid; grid-template-columns: minmax(180px, .55fr) minmax(0, 2fr); gap: 54px; align-items: start; }
.section-content { min-width: 0; }
.section-heading { max-width: 840px; }
.section-heading h2 { margin: 0; color: var(--ink); font-size: clamp(36px, 4vw, 58px); font-weight: 500; line-height: 1.14; letter-spacing: 0; }
.section-heading p { margin: 16px 0 0; color: #737984; font-size: 14px; line-height: 1.65; }
.left-heading { margin: 0 auto 49px; text-align: center; }
.steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.step-card { overflow: hidden; border: 1px solid #e8eaee; border-radius: 17px; background: rgba(255,255,255,.78); transition: transform .25s ease, box-shadow .25s ease; }
.step-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(34,40,50,.08); }
.step-image { height: 220px; overflow: hidden; border-radius: 15px 15px 0 0; background: linear-gradient(135deg, #eceef4, #d4d8e2); }
.step-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.75,.3,1); }
.step-card:hover .step-image img { transform: scale(1.04); }
.step-card h3 { margin: 19px 16px 8px; font-size: 19px; font-weight: 500; line-height: 1.25; letter-spacing: 0; }
.step-card p { min-height: 62px; margin: 0 16px 19px; color: #858a92; font-size: 12px; line-height: 1.6; }

.discover-section { padding-top: 104px; padding-bottom: 105px; }
.stats-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.stat-card { grid-column: span 3; display: flex; min-width: 0; min-height: 250px; flex-direction: column; align-items: center; justify-content: center; padding: 24px 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: linear-gradient(155deg, #303030 0%, #090909 38%, #030303 62%, #ed111b 100%); box-shadow: 0 22px 50px rgba(220,0,15,.18); color: #fff; text-align: center; }
.stat-card:nth-child(n+5) { grid-column: span 4; }
.stat-card h2 { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.35; }
.stat-card p { margin: 8px 0 14px; color: rgba(255,255,255,.9); font-size: 15px; line-height: 1.45; }
.stat-card strong { font-size: 68px; font-weight: 500; line-height: 1.1; white-space: nowrap; }

.metrics-section { padding-top: 112px; padding-bottom: 120px; }
.metrics-heading { max-width: 900px; margin-bottom: 52px; }
.metrics-heading h2 { font-size: clamp(36px, 4vw, 56px); }
.metric-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.metric-card { overflow: hidden; border: 1px solid #e9ebef; border-radius: 17px; background: #fff; }
.metric-copy { padding: 19px 18px 23px; }
.metric-copy h3 { min-height: 24px; margin: 0 0 9px; font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: 0; }
.metric-copy p { margin: 0; color: #858a92; font-size: 12px; line-height: 1.55; }

.section-heading.centered-heading { margin-right: auto; margin-left: auto; text-align: center; }
.centered-heading h2 { font-size: clamp(38px, 4vw, 58px); }
.centered-heading p { margin-top: 13px; font-size: 13px; }

.about-section { padding-top: 52px; padding-bottom: 138px; }
.about-section .section-heading { margin-bottom: 46px; }

.cta-section { padding-top: 0; padding-bottom: 104px; }
.cta-inner { display: flex; min-height: 435px; flex-direction: column; align-items: center; justify-content: center; gap: 20px; overflow: hidden; border: 1px solid #e5e7eb; border-radius: 27px; text-align: center; }
.cta-inner .section-heading h2 { font-size: clamp(45px,5vw,72px); }
.cta-inner .section-heading p { margin-top: 13px; }

.site-footer { color: #f2f4f7; background: var(--footer); }

@media (min-width: 1600px) {
  .hero-frame { min-height: 1094px; }
  .feature-section { padding-top: 104px; padding-bottom: 104px; }
}

@media (max-width: 1100px) {
  .hero-frame { min-height: 840px; padding-top: 90px; }
  .section-inner { padding-right: 28px; padding-left: 28px; }
  .split-layout { grid-template-columns: 180px minmax(0,1fr); gap: 30px; }
  .step-image { height: 175px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .stat-card, .stat-card:nth-child(n+5) { grid-column: span 1; min-height: 220px; padding: 20px 14px; }
  .stat-card h2 { font-size: 18px; }
  .stat-card p { font-size: 13px; }
  .stat-card strong { font-size: 56px; }
}

@media (max-width: 760px) {
  body { font-size: 14px; }
  .site-header { height: 72px; }
  .header-inner { width: calc(100% - 32px); grid-template-columns: 1fr auto auto; gap: 12px; }
  .brand { width: 93px; }
  .mobile-menu-toggle { display: flex; width: 42px; height: 42px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; order: 3; border: 1px solid #e3e5e9; border-radius: 50%; background: rgba(255,255,255,.85); cursor: pointer; }
  .mobile-menu-toggle span { width: 15px; height: 1.5px; border-radius: 2px; background: #252a32; transition: transform .2s ease; }
  .mobile-menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .mobile-menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  .header-contact { min-height: 41px; gap: 9px; padding: 4px 5px 4px 13px; font-size: 11px; }
  .header-contact .button-arrow { width: 30px; height: 30px; }
  .nav-pill { position: absolute; top: 63px; right: 16px; left: 16px; display: none; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px; border-radius: 20px; background: #fff; box-shadow: 0 18px 48px rgba(33,39,48,.13); }
  .nav-pill.is-open { display: flex; }
  .nav-pill > a { justify-content: space-between; min-height: 45px; padding: 0 14px; }
  .hero-section { padding: 0 12px; }
  .hero-frame { min-height: 0; padding: 56px 16px 42px; border-radius: 22px; }
  .grid-surface { background-size: cover; }
  .hero-copy { margin-top: 28px; }
  .hero-copy h1, .hero-copy .hero-subtitle { max-width: 560px; font-size: clamp(39px,10vw,62px); line-height: 1.04; }
  .hero-copy > p { max-width: 290px; margin: 17px auto 20px; font-size: 13px; }
  .button-row { flex-wrap: wrap; gap: 8px; }
  .button { min-height: 45px; gap: 12px; padding: 5px 6px 5px 14px; font-size: 11px; }
  .button-arrow { width: 33px; height: 33px; }
  .feature-ribbon { width: calc(100% - 24px); padding-top: 12px; }
  .feature-ribbon-inner { grid-template-columns: repeat(2, minmax(0,1fr)); border-radius: 14px; }
  .section { padding: 72px 12px; }
  .section-inner { padding: 0 10px; }
  .split-layout { grid-template-columns: 1fr; gap: 25px; }
  .section-heading h2 { font-size: clamp(35px,9vw,48px); }
  .left-heading { margin-bottom: 28px; text-align: left; }
  .left-heading p { font-size: 13px; }
  .steps-grid { grid-template-columns: 1fr; gap: 12px; }
  .step-card { display: grid; grid-template-columns: 38% 1fr; grid-template-rows: auto 1fr; align-items: start; }
  .step-image { height: 100%; min-height: 142px; grid-row: 1 / span 2; border-radius: 15px 0 0 15px; }
  .step-card h3 { margin: 17px 14px 7px; font-size: 17px; }
  .step-card p { min-height: 0; margin: 0 14px 15px; font-size: 11px; }
  .stats-grid { grid-template-columns: 1fr; gap: 14px; }
  .stat-card, .stat-card:nth-child(n+5) { min-height: 190px; padding: 20px 16px; }
  .stat-card h2 { font-size: 19px; }
  .stat-card p { margin: 7px 0 12px; font-size: 14px; }
  .stat-card strong { font-size: 56px; }
  .metric-cards { grid-template-columns: 1fr; gap: 10px; }
  .metric-card { display: grid; grid-template-columns: 39% 1fr; min-height: 155px; }
  .metric-copy { align-self: center; padding: 15px; }
  .metric-copy h3 { min-height: 0; font-size: 15px; }
  .metric-copy p { font-size: 11px; }
  .centered-heading h2 { font-size: clamp(36px,9vw,50px); }
  .about-section { padding-top: 54px; padding-bottom: 84px; }
  .cta-section { padding: 0 12px 72px; }
  .cta-inner { min-height: 340px; padding: 30px 15px; border-radius: 21px; }
  .cta-inner .section-heading h2 { font-size: clamp(42px,10vw,60px); }
}

/* Match the section rhythm of the desktop reference while letting content grow naturally on small screens. */
@media (min-width: 1200px) {
  .site-header { position: absolute; top: 0; left: 0; }
  .hero-section { height: 1094px; padding-top: 82px; }
  .hero-frame { height: 1012px; min-height: 0; }
  .feature-ribbon { height: 58px; padding: 8px 0 4px; }
  .feature-ribbon-inner { height: 46px; }
  .feature-section { min-height: 916px; }
  .discover-section { min-height: 584px; }
  .metrics-section { min-height: 846px; }
  .about-section { min-height: 1232px; }
  .cta-section { min-height: 504px; }
  .cta-inner { min-height: 400px; }
  .site-footer { min-height: 1015px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Layout corrections: full-size grid art, aligned section rhythm, and responsive card layouts. */
body { overflow-x: clip; }
.site-header { position: absolute; top: 0; left: 0; }
.header-inner { width: min(calc(100% - 28px), 1344px); }
.brand { width: 118px; }
.grid-surface { background-position: center; background-repeat: no-repeat; background-size: cover; }
.step-image { height: auto; aspect-ratio: 1 / 1; }
.step-image img { object-fit: cover; }

/* Article cards use the source layout: cover image first, copy beneath or beside it. */
.cta-inner {
  position: relative;
  isolation: isolate;
  color: #fff;
  border-color: rgba(255,255,255,.4);
  background-color: #ef5bb5;
  background-image: linear-gradient(0deg, rgba(36,22,49,.08), rgba(36,22,49,.08)), url("assets/bg-lines.svg"), url("assets/cta-gradient.avif");
  background-position: center, center, center;
  background-repeat: no-repeat;
  background-size: cover, cover, cover;
}
.cta-inner .section-heading h2, .cta-inner .section-heading p { color: #fff; }
.cta-inner .eyebrow { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.18); }
.cta-inner .eyebrow-dot { background: #fff; }
.cta-inner .button-gradient { color: #292e36; background: #fff; box-shadow: 0 9px 24px rgba(42,29,50,.15); }
.cta-inner .button-gradient .button-arrow { background: #f0f1f4; }
.mobile-menu-toggle span { transition: transform .22s ease, opacity .22s ease; }
.mobile-menu-toggle span:first-child { transform: rotate(90deg); }
.mobile-menu-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.mobile-menu-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
.mobile-menu-toggle:focus-visible, .button:focus-visible, .nav-pill a:focus-visible { outline: 3px solid rgba(250,62,150,.4); outline-offset: 3px; }

@media (min-width: 1200px) {
  .hero-section { height: 1208px; padding: 0; }
  .hero-frame { width: min(calc(100% - 48px), 1344px); height: 1000px; min-height: 0; margin-top: 104px; padding: 64px 48px 0; border-radius: 27px; }
  .feature-section { min-height: 908px; }
  .discover-section { min-height: 567px; }
  .metrics-section { min-height: 828px; padding-top: 104px; padding-bottom: 104px; }
  .about-section { min-height: 1231px; padding: 32px 24px 104px; }
  .hw-section { min-height: 0; }
  .about-section .section-inner { width: min(100%, 1440px); padding: 0 48px; }
  .cta-section { min-height: 504px; }
  .cta-inner { min-height: 400px; }
}

@media (max-width: 1199px) and (min-width: 761px) {
  .hero-section { padding-top: 82px; }
  .hero-frame { width: min(calc(100% - 40px), 1100px); min-height: 840px; }
}

@media (max-width: 760px) {
  .site-header { height: 70px; }
  .header-inner { width: calc(100% - 28px); grid-template-columns: 1fr auto; gap: 10px; }
  .brand { width: 84px; }
  .header-contact { display: none; }
  .mobile-menu-toggle { position: relative; order: 2; width: 42px; height: 42px; gap: 0; border-color: transparent; background: transparent; }
  .mobile-menu-toggle span { position: absolute; top: 50%; left: 50%; width: 15px; transform: translate(-50%,-50%); }
  .mobile-menu-toggle span:first-child { transform: translate(-50%,-50%) rotate(90deg); }
  .mobile-menu-toggle span:last-child { transform: translate(-50%,-50%); }
  .mobile-menu-toggle[aria-expanded="true"] span:first-child { transform: translate(-50%,-50%) rotate(45deg); }
  .mobile-menu-toggle[aria-expanded="true"] span:last-child { transform: translate(-50%,-50%) rotate(-45deg); }
  .nav-pill { top: 62px; right: 14px; left: 14px; }
  .hero-section { height: 930px; padding: 0 14px; }
  .hero-frame { position: relative; width: 100%; height: 790px; min-height: 0; margin: 91px auto 0; padding: 56px 14px 0; border-radius: 23px; }
  .grid-surface { background-size: cover; }
  .hero-copy { margin-top: 20px; }
  .hero-copy h1, .hero-copy .hero-subtitle { max-width: 360px; font-size: clamp(36px, 9.75vw, 38px); line-height: 1.25; letter-spacing: 0; }
  .hero-copy > p { max-width: none; margin: 10px auto 18px; font-size: 13px; }
  .hero-copy .button-row { flex-direction: column; gap: 6px; }
  .hero-copy .button { min-width: 166px; min-height: 42px; }
  .hero-copy .button-arrow { width: 30px; height: 30px; }
  .feature-ribbon { width: calc(100% - 28px); padding: 0; }
  .feature-ribbon-inner { display: flex; flex-direction: column; border-radius: 14px; }
  .section { padding: 49px 14px; }
  .section-inner { width: 100%; padding: 0; }
  .feature-section, .metrics-section { padding: 66px 14px; }
  .discover-section { padding: 49px 14px; }
  .split-layout { grid-template-columns: 1fr; gap: 25px; }
  .steps-grid { grid-template-columns: 1fr; gap: 18px; }
  .step-card { display: block; }
  .step-image { width: 100%; height: auto; min-height: 0; aspect-ratio: 1 / 1; border-radius: 15px 15px 0 0; }
  .step-card h3 { margin: 17px 16px 7px; font-size: 18px; }
  .step-card p { min-height: 0; margin: 0 16px 17px; font-size: 12px; }
  .feature-section .left-heading { margin-bottom: 30px; }
  .metric-card { grid-template-columns: 39% 1fr; }
  .about-section { padding: 32px 14px 45px; }
  .about-section .section-heading { margin-bottom: 30px; }
  .cta-section { padding: 24px 14px 25px; }
  .cta-inner { min-height: 380px; padding: 30px 16px; }
}

@media (prefers-reduced-motion: no-preference) {
  html.has-motion [data-motion] { opacity: 0; translate: 0 18px; transition: opacity .65s ease, translate .65s cubic-bezier(.2,.7,.2,1); transition-delay: var(--motion-delay, 0ms); }
  html.has-motion [data-motion].is-visible { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html.has-motion [data-motion] { opacity: 1; translate: none; }
}

@media (max-width: 760px) {
  .step-card { padding-bottom: 28px; }
  .about-section .section-heading { margin-bottom: 49px; }
  .site-footer { min-height: 1875px; }
}

/* =====================================================================
   HERO — base layout: edge to edge, no border or radius.
   The "image" mode block below sets the final background and positions.
   ===================================================================== */
.site-header { position: absolute; top: 0; left: 0; }
.hero-section {
  --hero-stage: clamp(300px, 36vw, 660px); /* height of the visual area; scales with width */
  --hero-gap: 96px; /* space between the button and the visual area */
  height: auto;
  padding: 0;
}
.hero-section .hero-frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 150px 24px 0;
  border: 0;
  border-radius: 0;
  background-color: var(--page);
  background-image: linear-gradient(to top,
    #8f1109 0,
    #cc2017 calc(var(--hero-stage) * .45),
    #e24737 calc(var(--hero-stage) * .85),
    #ec7564 var(--hero-stage),
    #f6c2b8 calc(var(--hero-stage) + var(--hero-gap) * .45),
    var(--page) calc(var(--hero-stage) + var(--hero-gap)));
}
.hero-section .hero-copy { margin-top: 32px; }
.hero-stage { flex: none; height: var(--hero-stage); margin-top: var(--hero-gap); }

@media (max-width: 1199px) {
  .hero-section { --hero-gap: 84px; }
  .hero-section .hero-frame { padding-top: 136px; }
}
@media (max-width: 760px) {
  .hero-section { --hero-stage: 330px; --hero-gap: 64px; }
  .hero-section .hero-frame { padding: 104px 16px 0; }
  .hero-section .hero-copy { margin-top: 22px; }
}

/* Hero CTA ("服务咨询"): brand-red gradient matching the subtitle; label and icon centred together instead of pushed to the edges. */
.hero-copy .button-gradient {
  justify-content: center;
  gap: 12px;
  min-width: 0;
  padding: 6px 12px; /* equal left/right so the label + icon group is truly centred */
  background: linear-gradient(100deg, #cc2017 0%, #e24737 100%);
  box-shadow: 0 8px 22px rgba(204, 32, 23, .26);
}
.hero-copy .button-gradient:hover { box-shadow: 0 12px 28px rgba(204, 32, 23, .36); }
@media (max-width: 760px) {
  .hero-copy .button-gradient { min-width: 0; gap: 10px; padding: 5px 10px; }
}

/* =====================================================================
   HERO — "image" mode (data-hero-visual="image" on .hero-frame)
   Clean, flat background (the scene image's own sky colour, so its edges disappear),
   copy aligned left, scene image across the bottom of the hero.
   ≥1200px: the copy sits over the image's empty upper-left sky.
   <1200px: copy first, image below it (the buildings would otherwise run into the text).
   ===================================================================== */
.hero-frame[data-hero-visual="image"] {
  --hero-bg: #f6f6f8;                                   /* sampled from the image's sky */
  --hero-inset: max(48px, calc((100% - 1344px) / 2));   /* lines the copy up with the header logo */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  padding: 0;
  background: var(--hero-bg);
}
.hero-frame[data-hero-visual="image"] .eyebrow { position: relative; z-index: 2; grid-area: 1 / 1; justify-self: start; margin: 150px 0 0 var(--hero-inset); }
.hero-frame[data-hero-visual="image"] .hero-copy { grid-area: 2 / 1; justify-self: start; width: min(780px, 100% - 64px); margin: 22px 0 0 var(--hero-inset); text-align: left; }
.hero-frame[data-hero-visual="image"] .hero-copy h1,
.hero-frame[data-hero-visual="image"] .hero-copy .hero-subtitle { max-width: none; margin-left: 0; margin-right: 0; font-size: clamp(34px, 4vw, 60px); line-height: 1.1; }
.hero-frame[data-hero-visual="image"] .hero-copy > p:not(.hero-subtitle) { max-width: 520px; margin-left: 0; margin-right: 0; }
.hero-frame[data-hero-visual="image"] .button-row { justify-content: flex-start; align-items: flex-start; }
.hero-frame[data-hero-visual="image"] .hero-stage { position: relative; z-index: 0; grid-area: 1 / 1 / -1 / 2; align-self: end; height: auto; margin: max(140px, calc(500px - 18vw)) 0 0; aspect-ratio: 2000 / 1000; } /* keeps the plane below the paragraph */
.hero-frame[data-hero-visual="image"] .hero-scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hero-stage .hero-scene { display: none; }
.hero-frame[data-hero-visual="image"] .hero-stage .hero-scene { display: block; }

@media (max-width: 1199px) {
  .hero-frame[data-hero-visual="image"] { display: flex; flex-direction: column; }
  .hero-frame[data-hero-visual="image"] .eyebrow { margin: 120px 0 0 16px; }
  .hero-frame[data-hero-visual="image"] .hero-copy { width: calc(100% - 32px); margin: 20px 0 0 16px; }
  .hero-frame[data-hero-visual="image"] .hero-stage { align-self: stretch; margin-top: -4%; }   /* full width; tuck the empty sky slightly under the button */
}
@media (max-width: 760px) {
  .hero-frame[data-hero-visual="image"] .eyebrow { margin: 100px 0 0 16px; }
  .hero-frame[data-hero-visual="image"] .hero-copy { width: calc(100% - 32px); margin: 18px 0 0 16px; }
  .hero-frame[data-hero-visual="image"] .hero-copy h1,
  .hero-frame[data-hero-visual="image"] .hero-copy .hero-subtitle { font-size: clamp(24px, 7.3vw, 38px); } /* 12-character subtitle stays on one line */
  .hero-frame[data-hero-visual="image"] .hero-stage { aspect-ratio: auto; height: 320px; margin-top: 8px; }
  .hero-frame[data-hero-visual="image"] .hero-scene { object-position: 70% 100%; }
}

/* =====================================================================
   PARTNER LOGO STRIP — continuous loop inside the bordered bar under the hero.
   Two identical lists slide left by half the track width, so the loop is seamless.
   The viewport is masked so logos fade in and out at both ends instead of being cut off.
   Each logo's height comes from --logo-h (set per logo in index.html, optically balanced).
   ===================================================================== */
.partner-strip.feature-ribbon { height: auto; padding: 18px 0 6px; }
.partner-strip .feature-ribbon-inner { display: block; height: auto; overflow: hidden; border-radius: 16px; }
.partner-viewport {
  --fade: 110px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}
.partner-track { display: flex; width: max-content; animation: partner-scroll 75s linear infinite; }
.partner-viewport:hover .partner-track { animation-play-state: paused; }
.partner-list { display: flex; flex: none; align-items: center; gap: 56px; margin: 0; padding: 0 28px; list-style: none; }
.partner-list li { display: grid; flex: none; height: 76px; place-items: center; }
.partner-list img { display: block; width: auto; height: var(--logo-h, 30px); max-width: none; }
@keyframes partner-scroll { to { transform: translateX(-50%); } }

@media (max-width: 760px) {
  .partner-strip.feature-ribbon { width: calc(100% - 28px); padding: 12px 0 0; }
  .partner-strip .feature-ribbon-inner { display: block; border-radius: 14px; }
  .partner-viewport { --fade: 48px; }
  .partner-list { gap: 36px; padding: 0 18px; }
  .partner-list li { height: 60px; }
  .partner-list img { height: calc(var(--logo-h, 30px) * .8); }
  .partner-track { animation-duration: 60s; }
}
/* Reduced motion: no auto-scroll; the strip can be scrolled by hand instead */
@media (prefers-reduced-motion: reduce) {
  .partner-track { animation: none; }
  .partner-viewport { overflow-x: auto; scrollbar-width: none; }
  .partner-list[aria-hidden="true"] { display: none; }
}

/* 平台实力 cards: four across on wide screens, 2×2 on tablets so each card stays readable */
@media (min-width: 761px) and (max-width: 1100px) {
  .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-grid .step-image { aspect-ratio: 16 / 10; }
}

/* =====================================================================
   STATS GLOBE — "平台经营数据" band
   Brand-red radial background, centred title, figures in rows divided by thin lines,
   a faint wordmark, and a slowly turning globe rising from the bottom edge
   (drawn by startStatsGlobe in script.js; a plain CSS sphere shows if WebGL is unavailable).
   Colours: change the --sg-* variables below.
   ===================================================================== */
.stats-globe {
  --sg-base: #a9160d;
  --sg-glow: #dc3a2d;
  --sg-edge: #7e0f08;
  --sg-cap: min(22.3vw, 422px);       /* visible part of the globe (62% of its radius, as in script.js) */
  --sg-mark: min(9vw, 170px);         /* wordmark size; it gets its own band above the globe */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 0;
  padding: 92px 0 calc(var(--sg-cap) + var(--sg-mark) + 44px);   /* below the figures: wordmark band + globe cap */
  color: #fff;
  background:
    radial-gradient(70% 60% at 50% 78%, var(--sg-glow) 0%, rgba(220, 58, 45, 0) 72%),
    radial-gradient(120% 90% at 50% 40%, var(--sg-base) 0%, var(--sg-edge) 100%);
}
.stats-globe__canvas { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.stats-globe__watermark {
  position: absolute; z-index: 0; left: 50%; bottom: calc(var(--sg-cap) + 14px); translate: -50% 0;
  font-family: var(--font-cn); font-size: var(--sg-mark); font-weight: 700;
  line-height: 1; letter-spacing: .06em; white-space: nowrap; color: rgba(255, 255, 255, .07); pointer-events: none; user-select: none;
}
.stats-globe__inner { position: relative; z-index: 1; }
.stats-globe__title { margin: 0 0 54px; color: #fff; font-size: clamp(26px, 2.6vw, 38px); font-weight: 600; letter-spacing: 0; text-align: center; }

.stats-globe .stats-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 44px; column-gap: 0; max-width: 1180px; margin: 0 auto; }
.stats-globe .stat-card,
.stats-globe .stat-card:nth-child(n+5) {
  grid-column: span 3; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  min-height: 0; padding: 4px 18px; border: 0; border-left: 1px solid rgba(255, 255, 255, .2); border-radius: 0;
  background: none; box-shadow: none; color: #fff; text-align: center;
}
.stats-globe .stat-card:nth-child(n+5) { grid-column: span 4; }
.stats-globe .stat-card:nth-child(1), .stats-globe .stat-card:nth-child(5) { border-left: 0; }
.stats-globe .stat-card strong { order: 0; font-family: var(--font-cn); font-size: clamp(36px, 3.6vw, 52px); font-weight: 500; line-height: 1.1; letter-spacing: 0; white-space: nowrap; }
.stats-globe .stat-card h3 { order: 1; margin: 10px 0 4px; font-size: 15px; font-weight: 500; line-height: 1.4; color: rgba(255, 255, 255, .92); }
.stats-globe .stat-card p { order: 2; margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .62); }
/* No-WebGL fallback: a soft sphere made with CSS */
.stats-globe.no-webgl::after {
  content: ""; position: absolute; z-index: 0; left: 50%; bottom: calc(-0.38 * 72vw); width: 72vw; height: 72vw; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle at 45% 30%, #e45346, #b81a10 60%, #8c0f09); box-shadow: 0 0 80px rgba(255, 120, 100, .25);
}

@media (max-width: 1100px) {
  .stats-globe .stats-grid { max-width: 920px; }
  .stats-globe .stat-card, .stats-globe .stat-card:nth-child(n+5) { padding: 4px 12px; }
}
@media (max-width: 760px) {
  .stats-globe { --sg-cap: 38.5vw; --sg-mark: 14vw; padding-top: 64px; }
  .stats-globe__title { margin-bottom: 36px; }
  .stats-globe .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; padding: 0 16px; }
  .stats-globe .stat-card, .stats-globe .stat-card:nth-child(n+5) { grid-column: span 1; padding: 2px 10px; border-left: 0; }
  .stats-globe .stat-card:nth-child(2n) { border-left: 1px solid rgba(255, 255, 255, .2); }
  .stats-globe .stat-card:nth-child(7) { grid-column: 1 / -1; }
  .stats-globe .stat-card strong { font-size: clamp(30px, 9vw, 40px); }
  .stats-globe .stat-card h3 { font-size: 14px; }
  .stats-globe .stat-card p { font-size: 12px; }
  .stats-globe.no-webgl::after { width: 124vw; height: 124vw; bottom: calc(-0.38 * 124vw); }
}

/* =====================================================================
   平台实力 (#features) — centred single column
   The shared .split-layout puts the label in a narrow left column and pushes the content
   right; here the label, heading, text and cards are stacked and centred instead.
   ===================================================================== */
.feature-section .split-layout { display: block; }
.feature-section .section-heading.left-heading { max-width: 1000px; margin: 0 auto 49px; text-align: center; }
.feature-section .section-heading p { max-width: 860px; margin-right: auto; margin-left: auto; }
@media (max-width: 760px) {
  .feature-section .section-heading.left-heading { margin-bottom: 30px; text-align: center; }
}

/* "平台经营数据" title uses the same type as the section headings above it (.section-heading h2) */
.stats-globe .stats-globe__title { font-size: clamp(36px, 4vw, 58px); font-weight: 500; line-height: 1.14; letter-spacing: 0; }
@media (max-width: 760px) {
  .stats-globe .stats-globe__title { font-size: clamp(35px, 9vw, 48px); }
}

/* =====================================================================
   FEATURE ILLUSTRATIONS — animated SVGs in the 平台实力 cards
   Light grid background, white "UI" panels, red highlights. The base (non-animated) styles
   are each illustration's finished state, so reduced motion shows a complete, still picture.
   ===================================================================== */
.step-illus {
  position: relative;
  background-color: #f5f6f8;
  background-image: linear-gradient(#e8eaee 1px, transparent 1px), linear-gradient(90deg, #e8eaee 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: center;
}
.step-illus::after { content: ""; position: absolute; inset: 0; background: radial-gradient(75% 70% at 50% 50%, rgba(245,246,248,0) 40%, #f5f6f8 100%); pointer-events: none; }
.step-illus .illus { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.illus text { font-family: inherit; fill: #4f5560; font-size: 12px; }
.illus .il-cap { fill: #8b909a; font-size: 11px; }
.illus .il-strong { fill: #262b33; font-size: 13px; font-weight: 600; }
.illus .il-big { fill: #1d2128; font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
.illus .il-panel, .illus .il-chip rect, .illus .il-block rect { fill: #fff; stroke: #e3e6eb; stroke-width: 1; }
.illus .il-panel { filter: drop-shadow(0 6px 14px rgba(30, 35, 45, .06)); }

/* 1 · 数字技术驱动 */
.illus .il-wire path { fill: none; stroke: #d9dce2; stroke-width: 1.5; }
.illus .il-beam path { fill: none; stroke: #e0352a; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 14 180; stroke-dashoffset: 194; animation: il-flow 2.4s linear var(--d) infinite; }
@keyframes il-flow { to { stroke-dashoffset: 0; } }
.illus .il-core { fill: #fff; stroke: #f2c3be; stroke-width: 1.5; }
.illus .il-pulse { fill: none; stroke: #e0352a; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: il-pulse 2.4s ease-out infinite; }
@keyframes il-pulse { 0% { opacity: .5; transform: scale(1); } 100% { opacity: 0; transform: scale(1.22); } }
.illus .il-cloud { fill: #fde4e1; stroke: #e0352a; stroke-width: 1.6; }
.illus .il-link { fill: none; stroke: #c9ccd2; stroke-width: 1.5; stroke-dasharray: 3 4; }
.illus .il-block text { font-size: 10px; fill: #6b7079; }
.illus .il-block rect { animation: il-confirm 6s ease var(--d) infinite; }
@keyframes il-confirm { 0%, 30% { fill: #fde4e1; stroke: #e0352a; } 45%, 100% { fill: #fff; stroke: #e3e6eb; } }

/* 2 · 可信画像评估 */
.illus .il-avatar { fill: #fde4e1; }
.illus .il-truck-icon { fill: #e0352a; }
.illus .il-badge rect { fill: #e0352a; }
.illus .il-badge text { fill: #fff; font-size: 11px; font-weight: 600; }
.illus .il-gauge-bg, .illus .il-gauge { fill: none; stroke-width: 12; stroke-linecap: round; }
.illus .il-gauge-bg { stroke: #eef0f3; }
.illus .il-gauge { stroke: #e0352a; stroke-dasharray: 100; stroke-dashoffset: 14; animation: il-gauge 7s cubic-bezier(.3,.7,.2,1) infinite; }
@keyframes il-gauge { 0% { stroke-dashoffset: 100; } 35%, 85% { stroke-dashoffset: 14; } 100% { stroke-dashoffset: 100; } }
.illus .il-score { animation: il-fade-in-out 7s ease infinite; }
@keyframes il-fade-in-out { 0%, 12% { opacity: 0; } 32%, 85% { opacity: 1; } 100% { opacity: 0; } }
.illus .il-track { fill: #eef0f3; }
.illus .il-bar { fill: #e0352a; transform-box: fill-box; transform-origin: left center; transform: scaleX(var(--v)); animation: il-bar 7s cubic-bezier(.3,.7,.2,1) var(--d) infinite; }
@keyframes il-bar { 0%, 8% { transform: scaleX(0); } 45%, 85% { transform: scaleX(var(--v)); } 100% { transform: scaleX(0); } }

/* 3 · 垂直车险服务 (8 s loop: truck stops at each stage, the stage lights up, status updates) */
.illus .il-track-line { stroke: #e3e6eb; stroke-width: 4; stroke-linecap: round; }
.illus .il-progress { stroke: #e0352a; stroke-width: 4; stroke-linecap: round; transform-box: fill-box; transform-origin: left center; animation: il-progress 8s ease-in-out infinite; }
@keyframes il-progress { 0%, 10% { transform: scaleX(0); } 22%, 32% { transform: scaleX(.33); } 44%, 54% { transform: scaleX(.67); } 66%, 92% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
.illus .il-node { fill: #e0352a; stroke: #fff; stroke-width: 3; }
.illus .il-node.n2 { animation: il-n2 8s infinite; } .illus .il-node.n3 { animation: il-n3 8s infinite; } .illus .il-node.n4 { animation: il-n4 8s infinite; }
@keyframes il-n2 { 0%, 21% { fill: #d4d7dd; } 22%, 94% { fill: #e0352a; } 96%, 100% { fill: #d4d7dd; } }
@keyframes il-n3 { 0%, 43% { fill: #d4d7dd; } 44%, 94% { fill: #e0352a; } 96%, 100% { fill: #d4d7dd; } }
@keyframes il-n4 { 0%, 65% { fill: #d4d7dd; } 66%, 94% { fill: #e0352a; } 96%, 100% { fill: #d4d7dd; } }
.illus .il-truck { transform: translateX(220px); animation: il-truck 8s ease-in-out infinite; }
@keyframes il-truck { 0%, 10% { transform: translateX(0); opacity: 1; } 22%, 32% { transform: translateX(73px); } 44%, 54% { transform: translateX(147px); } 66%, 90% { transform: translateX(220px); opacity: 1; } 94% { transform: translateX(220px); opacity: 0; } 95% { transform: translateX(0); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
.illus .il-truck-body { fill: #fff; stroke: #c9ccd2; stroke-width: 1.5; }
.illus .il-truck-cab { fill: #e0352a; }
.illus .il-wheel { fill: #4f5560; }
.illus .il-status text { opacity: 0; }
.illus .il-status .st4 { opacity: 1; }
.illus .il-status .st1 { animation: il-st1 8s infinite; } .illus .il-status .st2 { animation: il-st2 8s infinite; }
.illus .il-status .st3 { animation: il-st3 8s infinite; } .illus .il-status .st4 { animation: il-st4 8s infinite; }
@keyframes il-st1 { 0%, 20% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes il-st2 { 0%, 21% { opacity: 0; } 22%, 42% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes il-st3 { 0%, 43% { opacity: 0; } 44%, 64% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes il-st4 { 0%, 65% { opacity: 0; } 66%, 94% { opacity: 1; } 96%, 100% { opacity: 0; } }
.illus .il-dot { fill: #e0352a; animation: il-blink 1.6s ease-in-out infinite; }
@keyframes il-blink { 50% { opacity: .3; } }

/* 4 · 可信数字资产 */
.illus .il-wire-line { fill: none; stroke: #d9dce2; stroke-width: 2; stroke-dasharray: 4 5; }
.illus .il-shield, .illus .il-bank { fill: #fde4e1; stroke: #e0352a; stroke-width: 1.4; stroke-linejoin: round; }
.illus .il-token { fill: #c9ccd2; }
.illus .il-hex { fill: #fff; stroke: #e0352a; stroke-width: 2; stroke-linejoin: round; }
.illus .il-hex-pulse { fill: none; stroke: #e0352a; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: il-pulse 2.4s ease-out infinite; }
.illus .il-check { fill: none; stroke: #e0352a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.illus .il-chart { fill: none; stroke: #e0352a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; animation: il-draw 6s ease-in-out infinite; }
@keyframes il-draw { 0% { stroke-dashoffset: 100; } 45%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } }

/* Off screen: pause. Reduced motion: no animation — the finished state shows instead. */
.step-illus.is-paused * { animation-play-state: paused !important; }
.step-illus.is-static * { animation: none !important; }
.step-illus.is-static .il-tokens, .step-illus.is-static .il-beam { display: none; }
@media (prefers-reduced-motion: reduce) { .step-illus * { animation: none !important; } .step-illus .il-tokens, .step-illus .il-beam { display: none; } }

/* =====================================================================
   三大核心服务平台 (.metrics-section) — centred single column
   Same treatment as 平台实力: label, heading and cards stacked and centred;
   the panel titles and card text are centred too.
   ===================================================================== */
.metrics-section .split-layout { display: block; }
.metrics-section .section-heading.left-heading { max-width: 1000px; margin: 0 auto 52px; text-align: center; }
.metrics-section .metric-copy { text-align: center; }
@media (max-width: 760px) {
  .metrics-section .section-heading.left-heading { margin-bottom: 30px; text-align: center; }
}
/* Panel titles are Chinese phrases, not short numbers: size them to stay on one line on desktop */
/* Wrapped headings split into even lines instead of leaving one character alone */
h1, h2, h3 { text-wrap: balance; }

/* Keep a short phrase on one line inside a heading */
.nowrap { white-space: nowrap; }

/* =====================================================================
   FOOTER — simple centred layout
   Top rule · centred brand tile and name · one row of links · dashed divider that fades in
   from the left · copyright on the left, contact icons on the right.
   ===================================================================== */
.site-footer--simple { min-height: 0; color: #e8eaee; background: #0d0e10; }
.footer-simple { width: min(100%, var(--container)); margin: 0 auto; padding: 72px 48px 88px; }   /* dark space above the rule, as in the reference */
.footer-simple__rule { height: 1px; background: rgba(255, 255, 255, .1); }
.footer-simple__brand { display: flex; align-items: center; justify-content: center; width: fit-content; margin: 104px auto 0; }
.footer-simple__logo { width: 190px; height: auto; }
.footer-simple__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 34px auto 0; color: rgba(255, 255, 255, .8); font-size: 16px; }
.footer-simple__nav a { padding: 4px 0; transition: color .18s ease; }
.footer-simple__nav a:hover { color: #fff; }
.footer-simple__dash {
  height: 1px; margin-top: 54px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .3) 0 6px, transparent 6px 12px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 100%);
}
.footer-simple__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 40px clamp(0px, 5.5vw, 96px) 0; }
.footer-simple__bottom p { margin: 0; color: rgba(255, 255, 255, .6); font-size: 15px; }
.footer-simple__social { display: flex; gap: 14px; }
.footer-simple__social a { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 10px; color: rgba(255, 255, 255, .82); transition: color .18s ease, background .18s ease; }
.footer-simple__social a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.footer-simple__social svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 760px) {
  .footer-simple { padding: 40px 20px 48px; }
  .footer-simple__brand { margin-top: 52px; }
  .footer-simple__logo { width: 160px; }
  .footer-simple__nav { gap: 6px 20px; margin-top: 26px; font-size: 14px; }
  .footer-simple__dash { margin-top: 38px; }
  .footer-simple__bottom { flex-direction: column-reverse; gap: 18px; padding: 28px 0 0; text-align: center; }
  .footer-simple__bottom p { font-size: 13px; }
}

/* =====================================================================
   METRICS CARDS — 三大核心服务平台
   Layout as in the supplied diagram: light card, illustration on top, bold centred title,
   left-aligned description. Illustrations are the supplied SVGs, animated per service:
   · 保险融资服务: the core breathes, ripples spread, capital flows out along the ribbon.
   · 保险撮合交易: the two parties lean in, pulses pass both ways through the matching hub.
   · 数据+赔付管控: the outer arc draws, the gauge segments fill in turn, the shield floats.
   ===================================================================== */
.metrics-section .metric-cards { gap: 24px; }
.metrics-section .metric-card {
  display: flex; flex-direction: column; overflow: hidden; padding-bottom: 34px;
  border: 1px solid #eceef2; border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 14px 34px rgba(30, 35, 45, .05);
  transition: transform .3s ease, box-shadow .3s ease;
}
.metrics-section .metric-card:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 20px 44px rgba(204, 32, 23, .1); }
.metrics-section .metric-visual { display: grid; height: 250px; place-items: center; padding: 28px 12px 0; }
.metrics-section .mt-svg { display: block; width: 100%; max-width: 400px; height: auto; max-height: 210px; overflow: visible; }
.metrics-section .mt-svg--data { max-width: 270px; }
.metrics-section .metric-copy { padding: 6px 40px 0; text-align: left; }
.metrics-section .metric-copy h2 { margin: 6px 0 26px; color: #1f2329; font-size: clamp(22px, 2.1vw, 30px); font-weight: 700; line-height: 1.3; text-align: center; }
.metrics-section .metric-copy p { margin: 0; color: #6b7079; font-size: 15px; line-height: 1.85; }

/* 保险融资服务 */
.mt-svg--finance .mt-core { transform-box: fill-box; transform-origin: center; animation: mt-breathe 4s ease-in-out infinite; }
@keyframes mt-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.mt-svg--finance .mt-ripple { fill: none; stroke: #ff6a6a; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: mt-ripple 4s ease-out infinite; }
.mt-svg--finance .mt-ripple--2 { animation-delay: 2s; }
@keyframes mt-ripple { 0% { opacity: .45; transform: scale(1); } 100% { opacity: 0; transform: scale(1.75); } }
.mt-svg--finance .mt-ribbon { animation: mt-ribbon 4s ease-in-out infinite; }
@keyframes mt-ribbon { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
.mt-svg--finance .mt-flow { fill: #ff4d4d; opacity: 0; }
.mt-svg--finance .mt-flow--l { animation: mt-flow-l 3s ease-in infinite; }
.mt-svg--finance .mt-flow--r { animation: mt-flow-r 3s ease-in 1.5s infinite; }
@keyframes mt-flow-l { 0% { opacity: 0; transform: translateX(-40px); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateX(-190px); } }
@keyframes mt-flow-r { 0% { opacity: 0; transform: translateX(40px); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateX(190px); } }

/* 保险撮合交易 (4 s cycle) */
.mt-svg--trade .mt-side--l { animation: mt-lean-l 4s ease-in-out infinite; }
.mt-svg--trade .mt-side--r { animation: mt-lean-r 4s ease-in-out infinite; }
@keyframes mt-lean-l { 0%, 100% { transform: translateX(0); opacity: .7; } 40%, 60% { transform: translateX(8px); opacity: 1; } }
@keyframes mt-lean-r { 0%, 100% { transform: translateX(0); opacity: .7; } 40%, 60% { transform: translateX(-8px); opacity: 1; } }
.mt-svg--trade .mt-pulse { fill: #ff4d4d; opacity: 0; }
.mt-svg--trade .mt-pulse--l { animation: mt-pass-l 4s ease-in-out infinite; }
.mt-svg--trade .mt-pulse--r { animation: mt-pass-r 4s ease-in-out infinite; }
@keyframes mt-pass-l { 0%, 8% { opacity: 0; transform: translateX(-48px); } 15% { opacity: 1; } 42% { opacity: 1; transform: translateX(0); } 48%, 100% { opacity: 0; transform: translateX(0); } }
@keyframes mt-pass-r { 0%, 52% { opacity: 0; transform: translateX(0); } 58% { opacity: 1; transform: translateX(0); } 85% { opacity: 1; } 92%, 100% { opacity: 0; transform: translateX(48px); } }
.mt-svg--trade .mt-core { transform-box: fill-box; transform-origin: center; animation: mt-match 4s ease-in-out infinite; }
@keyframes mt-match { 0%, 38%, 62%, 100% { transform: scale(1); } 48% { transform: scale(1.08); } }

/* 数据 + 赔付管控 (6 s cycle) */
.mt-svg--data .mt-outer { stroke-dasharray: 100; stroke-dashoffset: 0; animation: mt-outer 6s ease-in-out infinite; }
@keyframes mt-outer { 0% { stroke-dashoffset: 100; } 40%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } }
.mt-svg--data .mt-seg { fill: #f8c9c9; }
.mt-svg--data .mt-seg--1 { animation: mt-seg-1 6s ease-in-out infinite; }
.mt-svg--data .mt-seg--2 { animation: mt-seg-2 6s ease-in-out infinite; }
.mt-svg--data .mt-seg--3 { animation: mt-seg-3 6s ease-in-out infinite; }
@keyframes mt-seg-1 { 0%, 8% { opacity: .15; } 18%, 88% { opacity: 1; } 100% { opacity: .15; } }
@keyframes mt-seg-2 { 0%, 22% { opacity: .1; } 34%, 88% { opacity: .55; } 100% { opacity: .1; } }
@keyframes mt-seg-3 { 0%, 38% { opacity: .05; } 50%, 88% { opacity: .3; } 100% { opacity: .05; } }
.mt-svg--data .mt-shield { animation: mt-float 3.2s ease-in-out infinite; }
@keyframes mt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.mt-svg--data .mt-glow { transform-box: fill-box; transform-origin: center bottom; animation: mt-glow 3.2s ease-in-out infinite; }
@keyframes mt-glow { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(.85); opacity: .3; } }

@media (max-width: 1100px) and (min-width: 761px) {
  .metrics-section .metric-copy { padding: 4px 22px 0; }
  .metrics-section .metric-copy p { font-size: 14px; }
  .metrics-section .metric-visual { height: 200px; }
}
@media (max-width: 760px) {
  .metrics-section .metric-cards { grid-template-columns: 1fr; gap: 16px; }
  .metrics-section .metric-card { display: flex; min-height: 0; padding-bottom: 26px; }
  .metrics-section .metric-visual { height: 200px; padding-top: 20px; }
  .metrics-section .metric-copy { align-self: stretch; padding: 4px 22px 0; }
  .metrics-section .metric-copy h2 { margin-bottom: 16px; font-size: 22px; }
  .metrics-section .metric-copy p { font-size: 14px; }
}
/* Off screen: pause. Reduced motion: still illustrations (finished state). */
.metrics-section.is-paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .metrics-section .mt-svg * { animation: none !important; }
  .metrics-section .mt-flow, .metrics-section .mt-pulse, .metrics-section .mt-ripple { display: none; }
}
/* Tablets: one centred column so titles and illustrations keep their size */
@media (max-width: 900px) and (min-width: 761px) {
  .metrics-section .metric-cards { grid-template-columns: minmax(0, 560px); justify-content: center; gap: 20px; }
  .metrics-section .metric-visual { height: 230px; }
}

/* =====================================================================
   CTA — wavy background (canvas drawn by the CTA WAVES block in script.js)
   The canvas fills the block behind the text and is blurred so the waves read as soft light.
   ===================================================================== */
.cta-inner.cta-waves-bg { position: relative; isolation: isolate; border-color: rgba(204, 32, 23, .3); background: #8a1209; }
.cta-waves { position: absolute; inset: -40px; z-index: -1; display: block; width: calc(100% + 80px); height: calc(100% + 80px); filter: blur(14px); pointer-events: none; }
.cta-waves-bg::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 50% 50%, rgba(80, 6, 2, .28), transparent 75%); pointer-events: none; }   /* soft shade behind the text */
.cta-waves-bg .section-heading h2, .cta-waves-bg .section-heading p { color: #fff; text-shadow: 0 2px 18px rgba(80, 6, 2, .25); }
/* CTA button: red arrow circle with a white arrow (was grey) */
.cta-inner .button-gradient .button-arrow { background: linear-gradient(100deg, #cc2017 0%, #e24737 100%); box-shadow: 0 4px 10px rgba(204, 32, 23, .3); }
/* CTA heading "携手共创 · 共赢未来": bold everywhere; on phones it stays on one line and scales with the screen width */
.cta-inner .section-heading h2 { font-weight: 700; }
@media (max-width: 760px) {
  .cta-inner .section-heading h2 { font-size: min(8.2vw, 46px); white-space: nowrap; }
}

/* =====================================================================
   HOW IT WORKS — 服务流程 (section #about)
   Left: illustration panel; right: five steps. The active step expands to show its text and
   its illustration plays (animations restart each time a step is opened).
   ===================================================================== */
.hw { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hw__visual { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid #eceef2; border-radius: 28px;
  background: radial-gradient(80% 70% at 30% 20%, #fff 0%, #f8f3f2 55%, #f3ecec 100%); box-shadow: 0 24px 60px rgba(30, 35, 45, .06); }
.hw__visual::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(204, 32, 23, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(204, 32, 23, .05) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent); -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent); }
.hw-pane { position: absolute; inset: 0; }
.hw-pane[hidden] { display: none; }
.hw-pane.is-active { animation: hw-pane-in .5s cubic-bezier(.2, .7, .2, 1); }
@keyframes hw-pane-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }

.hw__list { display: grid; gap: 4px; }
.hw-step { display: block; width: 100%; padding: 18px 20px; border: 1px solid transparent; border-radius: 18px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .3s, border-color .3s, box-shadow .3s; }
.hw-step:hover { background: rgba(255, 255, 255, .6); }
.hw-step.is-active { border-color: #f1d6d2; background: #fff; box-shadow: 0 14px 34px rgba(204, 32, 23, .08); }
.hw-step__head { display: flex; align-items: center; gap: 14px; }
.hw-step__icon { display: grid; width: 42px; height: 42px; flex: none; place-items: center; border-radius: 12px; background: #f1f2f4; color: #9aa0a8; transition: background .3s, color .3s; }
.hw-step__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hw-step.is-active .hw-step__icon { background: linear-gradient(135deg, #cc2017, #e24737); color: #fff; }
.hw-step__title { flex: 1; color: #8a8f98; font-size: 20px; font-weight: 700; transition: color .3s; }
.hw-step.is-active .hw-step__title, .hw-step:hover .hw-step__title { color: #1f2329; }
.hw-step__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.2, .7, .2, 1); }
.hw-step__body > span { overflow: hidden; padding-left: 56px; color: #6b7079; font-size: 15px; line-height: 1.8; }
.hw-step.is-active .hw-step__body { grid-template-rows: 1fr; }
.hw-step.is-active .hw-step__body > span { padding-top: 10px; }

@media (max-width: 991px) {
  .hw { grid-template-columns: 1fr; gap: 28px; }
  .hw__visual { max-width: 620px; width: 100%; margin: 0 auto; }
}
@media (max-width: 560px) {
  .hw-step { padding: 14px; }
  .hw-step__title { font-size: 17px; }
  .hw-step__body > span { padding-left: 0; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-pane, .hw-pane * { animation: none !important; }
  .hw-step__body { transition: none; }
}

/* =====================================================================
   HOW IT WORKS — scenes (layered UI mockups, played by script.js)
   Everything scales with the panel width (container query units). Base styles are each
   scene's finished state; .is-play runs the choreography into it.
   Icons: Lucide (ISC) sprite at the top of index.html; use <svg class="lc"><use href="#lc-name"/></svg>.
   ===================================================================== */
.lc { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hw-step__icon .lc { width: 22px; height: 22px; stroke-width: 1.8; }
.hw__visual { container-type: inline-size; }
.hw__visual::after { content: ""; position: absolute; width: 46%; aspect-ratio: 1; right: -12%; top: -14%; border-radius: 50%; background: radial-gradient(circle, rgba(226, 71, 55, .22), transparent 70%); filter: blur(10px); pointer-events: none; }
.sc { --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.3, 1.45, .5, 1); position: absolute; inset: 0; z-index: 1; color: #1f2329; font-size: clamp(7.5px, 2.25cqw, 15px); }
.sc-card { position: absolute; left: var(--x); top: var(--y); width: var(--w); padding: 1.1em; border: 1px solid #eef0f3; border-radius: 1.1em; background: #fff; box-shadow: 0 1.6em 3.2em rgba(30, 35, 45, .09), 0 .2em .5em rgba(30, 35, 45, .04); }
.sc-head { display: flex; align-items: center; gap: .7em; margin-bottom: .9em; }
.sc-head b { display: block; font-size: 1.05em; }
.sc-head small, .sc-muted { color: #8a8f98; font-size: .78em; }
.sc-tile { display: grid; width: 2.4em; height: 2.4em; flex: none; place-items: center; border-radius: .75em; background: linear-gradient(135deg, #cc2017, #e24737); color: #fff; box-shadow: 0 .5em 1.2em rgba(204, 32, 23, .28); }
.sc-tile .lc { width: 1.25em; height: 1.25em; }
.sc-btn { display: inline-flex; align-items: center; margin-top: 1em; padding: .65em 1.3em; border-radius: 999px; background: linear-gradient(100deg, #cc2017, #e24737); color: #fff; font-size: .85em; font-weight: 700; box-shadow: 0 .6em 1.4em rgba(204, 32, 23, .28); }
.sc-big { display: flex; align-items: center; gap: .15em; margin: .15em 0; font-size: 2.6em; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sc-big--sm { font-size: 1.9em; }
.sc-toast { position: absolute; left: var(--x); top: var(--y); z-index: 4; display: flex; align-items: center; gap: .6em; padding: .65em 1.1em .65em .65em; border-radius: 999px; background: #fff; box-shadow: 0 1em 2.6em rgba(30, 35, 45, .16); font-size: .85em; font-weight: 700; white-space: nowrap; }
.sc-toast > span { display: grid; width: 2em; height: 2em; place-items: center; border-radius: 50%; color: #fff; }
.sc-toast--ok > span { background: #2fae6a; } .sc-toast--warn > span { background: #f08a24; }
.sc-cursor { position: absolute; left: var(--tx, 80%); top: var(--ty, 80%); z-index: 5; color: #1f2329; font-size: 1.8em; opacity: 0; filter: drop-shadow(0 .15em .25em rgba(0, 0, 0, .25)); pointer-events: none; }
.sc-cursor .lc { fill: #fff; stroke-width: 1.6; }
/* 1 企业入驻 */
.sc-field { display: grid; gap: .3em; margin-top: .55em; }
.sc-field small { color: #8a8f98; font-size: .75em; }
.sc-input { display: flex; align-items: center; min-height: 2.3em; padding: 0 .8em; border: 1px solid #eceef1; border-radius: .6em; background: #f6f7f9; font-size: .9em; font-weight: 600; }
.sc-side__title { display: block; margin-bottom: .2em; font-size: .95em; }
.sc-steps { position: relative; display: grid; gap: 1.05em; margin: .8em 0 0; padding: 0; list-style: none; }
.sc-steps li { position: relative; display: flex; align-items: center; gap: .65em; font-size: .85em; font-weight: 600; }
.sc-steps li > i { display: grid; width: 1.7em; height: 1.7em; flex: none; place-items: center; border-radius: 50%; background: #cc2017; color: #fff; }
.sc-steps li > i .lc { width: .95em; height: .95em; stroke-width: 3; }
.sc-steps li:not(:last-child)::after { content: ""; position: absolute; left: .82em; top: 1.75em; width: 2px; height: 1.1em; background: #cc2017; transform-origin: top; }
/* 2 风险画像 */
.sc-radar { display: block; width: 100%; height: auto; overflow: visible; }
.sc-radar__grid polygon, .sc-radar__grid path { fill: none; stroke: #eceef1; stroke-width: 1.2; }
.sc-radar__data { fill: rgba(226, 71, 55, .18); stroke: #cc2017; stroke-width: 2.4; stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 55%; }
.sc-radar__pts circle { fill: #fff; stroke: #cc2017; stroke-width: 2.4; transform-box: fill-box; transform-origin: center; }
.sc-radar__lbl text { fill: #8a8f98; font-size: 10px; text-anchor: middle; }
.sc-scan { fill: url(#sc-scan-grad); opacity: 0; }
.sc-grade { display: inline-block; padding: .3em .7em; border-radius: 999px; background: #fde4e1; color: #cc2017; font-size: .78em; font-weight: 700; }
.sc-meter { display: grid; grid-template-columns: 1fr auto; gap: .3em; margin: .25em 0 .7em; font-size: .82em; }
.sc-meter small { color: #6b7079; } .sc-meter b { font-variant-numeric: tabular-nums; }
.sc-meter i { grid-column: 1 / -1; height: .45em; border-radius: 1em; background: linear-gradient(90deg, #cc2017, #e24737) 0 0 / calc(var(--v) * 100%) 100% no-repeat, #f1f2f4; }
/* 3 投保分期 */
.sc-quote { position: relative; display: flex; align-items: center; gap: .7em; margin-top: .6em; padding: .7em .8em; border: 1.5px solid #eef0f3; border-radius: .8em; font-size: .9em; font-weight: 600; }
.sc-quote span:nth-child(2) { flex: 1; }
.sc-logo { display: grid; width: 1.9em; height: 1.9em; place-items: center; border-radius: .55em; background: #f1f2f4; color: #6b7079; font-weight: 800; }
.sc-quote--best { border-color: #cc2017; background: #fff6f5; }
.sc-quote--best .sc-logo { background: #cc2017; color: #fff; }
.sc-quote em { position: absolute; right: -.6em; top: -.75em; padding: .15em .6em; border-radius: 999px; background: #cc2017; color: #fff; font-size: .75em; font-style: normal; font-weight: 700; }
.sc-months { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35em; margin-top: .8em; }
.sc-months i { aspect-ratio: 1; border-radius: .35em; background: #e24737; }
/* 4 风控管控 */
.sc-map { display: block; width: 100%; height: auto; overflow: visible; border-radius: .8em; background: #f7f8fa; background-image: linear-gradient(#eceef1 1px, transparent 1px), linear-gradient(90deg, #eceef1 1px, transparent 1px); background-size: 10% 18%; }
.sc-map__road { fill: none; stroke: #e4e6ea; stroke-width: 10; stroke-linecap: round; }
.sc-map__route { fill: none; stroke: #e24737; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.sc-map__truck circle { fill: #cc2017; filter: drop-shadow(0 4px 6px rgba(204, 32, 23, .4)); }
.sc-map__truck use { color: #fff; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sc-alert { position: relative; height: 2.2em; margin-top: .8em; }
.sc-alert > span { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: .45em; padding: .45em .8em; border-radius: 999px; font-size: .82em; font-weight: 700; }
.sc-alert__bad { background: #fff1e6; color: #c2410c; opacity: 0; }
.sc-alert__ok { background: #e8f6ee; color: #1f8a51; }
.sc-down { color: #1f8a51; } .sc-down .lc { width: .7em; height: .7em; }
.sc-spark { display: block; width: 100%; height: auto; margin-top: .4em; overflow: visible; }
.sc-spark polyline { fill: none; stroke: #1f8a51; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; }
/* 5 理赔续保 */
.sc-steps--claim { gap: 1em; }
.sc-amount { display: flex; align-items: baseline; gap: .5em; margin-top: 1.1em; padding-top: .9em; border-top: 1px dashed #eceef1; }
.sc-amount small { color: #8a8f98; font-size: .78em; }
.sc-amount b { font-size: 1.6em; font-variant-numeric: tabular-nums; }
.sc-amount em { padding: .15em .6em; border-radius: 999px; background: #e8f6ee; color: #1f8a51; font-size: .72em; font-style: normal; font-weight: 700; }
.sc-renew { display: grid; justify-items: start; gap: .35em; }
.sc-renew .sc-btn { margin-top: .5em; }

/* ---------- choreography (.is-play) ---------- */
.is-play .sc-card { animation: sc-in .7s var(--ease) var(--d, 0s) both; }
.is-play .sc-side { animation: sc-in .7s var(--ease) var(--d, .25s) both, sc-float 5s ease-in-out calc(var(--d, .25s) + 1s) infinite; }
.is-play .sc-toast { animation: sc-toast .6s var(--spring) var(--d) both; }
.is-play .sc-field { animation: sc-in .5s var(--ease) var(--d) both; }
.is-play .sc-cursor { animation: sc-cursor 1.7s var(--ease) var(--cd) both; }
.is-play .sc-steps li > i { animation: sc-tick .5s var(--spring) var(--d) both; }
.is-play .sc-steps li > i .lc { animation: sc-pop .4s var(--spring) calc(var(--d) + .1s) both; }
.is-play .sc-steps li { animation: sc-text .4s ease var(--d) both; }
.is-play .sc-steps li:not(:last-child)::after { animation: sc-line .45s ease calc(var(--d) + .25s) both; }
.is-play .sc-1 .sc-btn--submit { animation: sc-press .35s ease 3.15s both; }
.is-play .sc-radar__data { animation: sc-grow .9s var(--spring) .8s both; }
.is-play .sc-radar__pts circle { animation: sc-pop .4s var(--spring) var(--d) both; }
.is-play .sc-scan { animation: sc-scan 1.8s ease-in-out .3s both; }
.is-play .sc-grade { animation: sc-pop .45s var(--spring) 2.2s both; }
.is-play .sc-meter i { animation: sc-meter .9s var(--ease) var(--d) both; }
.is-play .sc-quote { animation: sc-slide .55s var(--ease) var(--d) both; }
.is-play .sc-quote--best { animation: sc-slide .55s var(--ease) var(--d) both, sc-best .4s ease 2.6s both; }
.is-play .sc-quote--best .sc-logo { animation: sc-best-logo .4s ease 2.6s both; }
.is-play .sc-quote em { animation: sc-pop .45s var(--spring) 2.75s both; }
.is-play .sc-months i { animation: sc-month .3s ease var(--d) both; }
.is-play .sc-map__route { animation: sc-draw 3.2s ease-in-out .3s both; }
.is-play .sc-alert__bad { animation: sc-bad 1.6s ease 1.6s both; }
.is-play .sc-alert__ok { animation: sc-ok .5s var(--spring) 3.1s both; }
.is-play .sc-spark polyline { animation: sc-draw 1s ease 3.4s both; }
.is-play .sc-renew .sc-tile--spin .lc { animation: sc-spin 1.4s linear 3.8s 2; }
.is-play .sc-btn--renew { animation: sc-glow 1.2s ease-in-out 4.2s 2, sc-press .35s ease 5.35s both; }
.is-play .sc-amount { animation: sc-in .5s var(--ease) 2.4s both; }
@keyframes sc-in { from { opacity: 0; transform: translateY(1.4em) scale(.97); } }
@keyframes sc-float { 50% { translate: 0 -.45em; } }
@keyframes sc-toast { from { opacity: 0; transform: translateY(1.2em) scale(.85); } }
@keyframes sc-cursor { 0% { opacity: 0; left: var(--sx); top: var(--sy); transform: none; } 12% { opacity: 1; } 62% { left: var(--tx); top: var(--ty); transform: none; } 70% { transform: scale(.82); } 80% { transform: none; } 92% { opacity: 1; } 100% { opacity: 0; left: var(--tx); top: var(--ty); } }
@keyframes sc-tick { from { background: #e9ebee; transform: scale(.7); } }
@keyframes sc-pop { from { opacity: 0; transform: scale(0); } }
@keyframes sc-text { from { color: #b4b8bf; } }
@keyframes sc-line { from { transform: scaleY(0); } }
@keyframes sc-blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sc-press { 40% { transform: scale(.92); box-shadow: 0 0 0 .5em rgba(204, 32, 23, .15); } }
@keyframes sc-grow { from { transform: scale(0); opacity: 0; } }
@keyframes sc-scan { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(180px); } }
@keyframes sc-meter { from { background-size: 0% 100%, auto; } }
@keyframes sc-slide { from { opacity: 0; transform: translateX(-1.2em); } }
@keyframes sc-best { from { border-color: #eef0f3; background: #fff; } }
@keyframes sc-best-logo { from { background: #f1f2f4; color: #6b7079; } }
@keyframes sc-month { from { background: #f6dcd8; transform: scale(.8); } }
@keyframes sc-draw { from { stroke-dashoffset: 100; } }
@keyframes sc-bad { 0% { opacity: 0; transform: translateY(.5em) scale(.9); } 15%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-.4em); } }
@keyframes sc-ok { from { opacity: 0; transform: scale(.85); } }
@keyframes sc-spin { to { transform: rotate(360deg); } }
@keyframes sc-glow { 50% { box-shadow: 0 0 0 .55em rgba(226, 71, 55, .18), 0 .6em 1.4em rgba(204, 32, 23, .28); } }

@media (prefers-reduced-motion: reduce) {
  .sc, .sc * { animation: none !important; }
}
/* Phones/tablets: the scene panel scrolls with the page. (It used to stay pinned below the
   top edge, but the header is not fixed, so the panel floated free of the page and seemed to
   drift when scrolling back up. Panel + step list fit on one phone screen anyway.) */
@media (max-width: 991px) {
  .hw__visual { position: relative; top: auto; z-index: 2; }
  .hw__list { overflow-anchor: none; }
}

/* =====================================================================
   HOW IT WORKS — polish: autoplay progress, scene transitions, depth, micro-interactions
   ===================================================================== */
/* scene transitions: the old scene slides out while the new one comes in */
.hw-pane { z-index: 1; }
.hw-pane.is-leaving { display: block !important; z-index: 0; animation: hw-pane-out .38s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes hw-pane-out { to { opacity: 0; transform: translateY(-12px) scale(.98); filter: blur(2px); } }
/* depth: the scene tilts slightly toward the mouse (desktop) */
.hw__visual { perspective: 1400px; }
.sc { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
/* ambient glow drifting in the background */
.hw__visual::after { animation: hw-blob 14s ease-in-out infinite alternate; }
@keyframes hw-blob { to { transform: translate(-55%, 70%) scale(1.25); } }
/* click ripple where the cursor taps */
.sc-click { position: absolute; left: var(--tx); top: var(--ty); z-index: 4; width: 2.6em; height: 2.6em; margin: -1.3em 0 0 -1.3em; border: 2px solid rgba(204, 32, 23, .55); border-radius: 50%; opacity: 0; pointer-events: none; }
.is-play .sc-click { animation: sc-click .65s ease-out calc(var(--cd) + 1.1s) both; }
@keyframes sc-click { from { opacity: .9; transform: scale(.25); } to { opacity: 0; transform: scale(1.7); } }
/* pulse ring when a toast appears */
.sc-toast { --ring: 47, 174, 106; } .sc-toast--warn { --ring: 240, 138, 36; }
.is-play .sc-toast > span { animation: sc-ring 1.1s ease-out calc(var(--d) + .3s) 2; }
@keyframes sc-ring { from { box-shadow: 0 0 0 0 rgba(var(--ring), .5); } to { box-shadow: 0 0 0 .9em rgba(var(--ring), 0); } }
/* light sheen across the main card when the scene completes */
.sc-main { overflow: hidden; }
.sc-main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .8) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
.is-play .sc-main::after { animation: sc-shine 1.1s ease var(--shine, 4s) both; }
@keyframes sc-shine { to { transform: translateX(120%); } }
.sc-1 { --shine: 4.9s; } .sc-2 { --shine: 2.7s; } .sc-3 { --shine: 3s; } .sc-4 { --shine: 3.6s; } .sc-5 { --shine: 2.8s; }
/* live caret on the field being typed */
.sc-input.is-typing::after { content: ""; width: 1.5px; height: 1.1em; margin-left: 2px; background: #cc2017; animation: sc-blink .8s steps(1) infinite; }
/* mini cards */
.sc-big--xs { font-size: 1.45em; }
.sc-big small { margin-left: .15em; color: #8a8f98; font-size: .55em; font-weight: 600; }
.sc-chipbar { display: block; height: .4em; margin-top: .5em; border-radius: 1em; background: linear-gradient(90deg, #cc2017, #e24737); transform-origin: left; }
.is-play .sc-chipbar { animation: sc-chipbar .8s var(--ease) var(--d) both; }
@keyframes sc-chipbar { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .hw__visual::after, .hw-pane.is-leaving { animation: none !important; }
  .hw-pane.is-leaving { display: none !important; }
  .sc { transform: none; transition: none; }
}

/* =====================================================================
   HOW IT WORKS — materials & states
   · Panel: "acrylic" — warm diffused light behind frosted glass, with a faint grain.
   · Cards / toasts: "liquid glass" — translucent fill, background blur + saturation,
     a bright top edge (specular highlight), a soft gradient rim and layered, diffused shadows.
   · Step list: clear states — upcoming, hover, completed, active, pressed, keyboard focus.
   · Falls back to solid surfaces where backdrop blur is unsupported or reduced transparency is preferred.
   ===================================================================== */
.hw { --glass: rgba(255, 255, 255, .58); --glass-strong: rgba(255, 255, 255, .78); --rim: rgba(255, 255, 255, .85);
  --shadow-diffuse: 0 1px 1px rgba(60, 20, 15, .03), 0 4px 10px rgba(60, 20, 15, .04), 0 18px 40px rgba(120, 30, 20, .07), 0 40px 80px rgba(120, 30, 20, .06); }

/* panel: warm diffused light + acrylic grain */
.hw__visual {
  border: 1px solid rgba(255, 255, 255, .8);
  background:
    radial-gradient(42% 46% at 82% 14%, rgba(239, 98, 80, .38), transparent 70%),
    radial-gradient(38% 42% at 12% 88%, rgba(255, 178, 150, .45), transparent 72%),
    radial-gradient(50% 50% at 46% 52%, rgba(255, 236, 230, .9), transparent 80%),
    linear-gradient(160deg, #fdf5f3 0%, #f9ebe8 55%, #f5e3df 100%);
  background-size: 140% 140%, 140% 140%, 100% 100%, 100% 100%;
  animation: hw-light 18s ease-in-out infinite alternate;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--shadow-diffuse);
}
@keyframes hw-light { to { background-position: 30% 60%, 70% 30%, 0 0, 0 0; } }
.hw__visual::before {   /* grain replaces the old grid: gives the acrylic surface texture */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.3  0 0 0 0 0.3  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px; opacity: .16; mix-blend-mode: multiply; -webkit-mask-image: none; mask-image: none;
}
.hw__visual::after { background: radial-gradient(circle, rgba(204, 32, 23, .28), transparent 68%); filter: blur(24px); }

/* liquid-glass cards */
.sc-card {
  isolation: isolate;   /* keeps the rim (::before) above the card's own fill */
  border: 1px solid var(--rim);
  background: linear-gradient(160deg, rgba(255, 255, 255, .82), var(--glass) 60%);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .35), var(--shadow-diffuse);
}
.sc-card::before {     /* soft gradient rim catching the light from the top left */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .15) 40%, rgba(226, 71, 55, .18) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.sc-toast { border: 1px solid var(--rim); background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 10px 30px rgba(120, 30, 20, .14), 0 2px 6px rgba(60, 20, 15, .06); }
/* glossy brand tiles and buttons */
.sc-tile, .sc-btn, .sc-steps li > i, .sc-quote--best .sc-logo, .sc-map__truck circle {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, #d42a1f, #e8503f);
}
.sc-tile, .sc-btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 .5em 1.2em rgba(204, 32, 23, .28); }
/* frosted, inset form fields and rows */
.sc-input, .sc-quote { border-color: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .5); box-shadow: inset 0 1px 2px rgba(60, 20, 15, .06); }
.sc-quote--best { border-color: rgba(204, 32, 23, .55); background: rgba(255, 240, 237, .75); box-shadow: inset 0 1px 0 #fff, 0 .4em 1.2em rgba(204, 32, 23, .12); }
.sc-map { background-color: rgba(255, 255, 255, .45); background-image: linear-gradient(rgba(204, 32, 23, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(204, 32, 23, .06) 1px, transparent 1px); box-shadow: inset 0 1px 3px rgba(60, 20, 15, .06); }
.sc-meter i { background: linear-gradient(90deg, #cc2017, #e24737) 0 0 / calc(var(--v) * 100%) 100% no-repeat, rgba(204, 32, 23, .08); }
.sc-grade, .sc-amount em, .sc-alert > span { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }

/* ---------- step list states ---------- */
.hw-step { border: 1px solid transparent; transition: background .35s, border-color .35s, box-shadow .35s, transform .15s; }
/* upcoming (default) */
.hw-step .hw-step__icon { border: 1px solid rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .6); color: #a3a8b0; box-shadow: 0 2px 6px rgba(60, 20, 15, .04); }
/* hover */
.hw-step:hover:not(.is-active) { border-color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hw-step:hover:not(.is-active) .hw-step__icon { color: #cc2017; }
/* completed (steps before the active one) */
.hw-step.is-done .hw-step__icon { border-color: rgba(204, 32, 23, .12); background: #fde9e6; color: #d0473b; }
.hw-step.is-done .hw-step__title { color: #4a4f58; }
/* active */
.hw-step.is-active { border-color: rgba(255, 255, 255, .95); background: linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .7));
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1.5px 0 #fff, var(--shadow-diffuse); }
.hw-step.is-active .hw-step__icon { border-color: transparent; color: #fff;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, #d42a1f, #e8503f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 20px rgba(204, 32, 23, .32); }
/* pressed + keyboard focus */
.hw-step:active { transform: scale(.99); }
.hw-step:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(204, 32, 23, .28), var(--shadow-diffuse); }
/* soft light behind the module so the glass has something to sit on */
.hw-section { position: relative; isolation: isolate; }
.hw-section::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 52%; width: min(1100px, 90vw); height: 70%; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(239, 98, 80, .1), transparent); pointer-events: none; }

/* fallbacks: no backdrop blur, or the visitor prefers less transparency → solid surfaces */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sc-card, .sc-toast, .hw-step.is-active { background: #fff; }
}
@media (prefers-reduced-transparency: reduce) {
  .sc-card, .sc-toast, .hw-step.is-active, .hw-step:hover { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .hw__visual::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hw__visual { animation: none; } }

/* =====================================================================
   HOW IT WORKS — staging & entrances
   · Nothing shows before a scene plays (.hw.is-armed), so no finished state flashes first.
   · The click ripple stays invisible until the cursor actually clicks (fill: forwards, not both).
   · Main cards float up out of a soft blur; follow-up cards and chips pop in with a light
     spring and then float gently; toasts pop up from below.
   ===================================================================== */
.hw.is-armed .hw-pane:not(.is-play):not(.is-leaving) .sc > * { opacity: 0; }
.is-play .sc-click { animation: sc-click .65s ease-out calc(var(--cd) + 1.1s) forwards; }
@keyframes sc-click { 0% { opacity: .9; transform: scale(.25); } 100% { opacity: 0; transform: scale(1.7); } }

.is-play .sc-main { animation: sc-float-in .8s var(--ease) var(--d, 0s) both; }
@keyframes sc-float-in { from { opacity: 0; transform: translateY(1.8em) scale(.96); filter: blur(6px); } }
.is-play .sc-side { animation: sc-pop-in .65s var(--spring) var(--d, .25s) both, sc-float 5.5s ease-in-out calc(var(--d, .25s) + .8s) infinite; }
@keyframes sc-pop-in { 0% { opacity: 0; transform: translateY(1em) scale(.82); filter: blur(4px); } 60% { opacity: 1; filter: blur(0); } }
.is-play .sc-toast { animation: sc-toast-pop .6s var(--spring) var(--d) both, sc-float 4.5s ease-in-out calc(var(--d) + .7s) infinite; }
@keyframes sc-toast-pop { 0% { opacity: 0; transform: translateY(1.4em) scale(.7); } 70% { opacity: 1; } }
/* stage cues moved with the new order */
.is-play .sc-grade { animation: sc-pop .45s var(--spring) 2.95s both; }
.is-play .sc-spark polyline { animation: sc-draw 1s ease 3.75s both; }
.is-play .sc-quote em { animation: sc-pop .45s var(--spring) 2.75s both; }
/* the dots on the progress lists pop in with their card, then tick in order */
.is-play .sc-side .sc-steps li { animation: sc-text .4s ease var(--d) both; }
@media (prefers-reduced-motion: reduce) { .hw.is-armed .hw-pane .sc > * { opacity: 1; } }

/* =====================================================================
   CLIENT CASES — 客户案例 (section #cases)
   Logo tabs on top; each tab opens a case panel: tag, title, summary, key points, figures,
   related services and a button on the left; the case photo on a soft red "stage" on the right.
   The photos fade into #fffaf9 at the top, so the panel ends in the same tone.
   ===================================================================== */
.cases-section { position: relative; isolation: isolate; }
.cases-section::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 58%; width: min(1200px, 92vw); height: 62%; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(239, 98, 80, .1), transparent); pointer-events: none; }
.cases-section .section-heading p { max-width: 640px; margin-right: auto; margin-left: auto; line-height: 1.9; }

/* logo tabs */
.case-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 8px; width: fit-content; max-width: 100%; margin: 44px auto 0; padding: 8px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 24px;
  background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(60, 20, 15, .03), 0 12px 30px rgba(120, 30, 20, .06); }
.case-tab { position: relative; display: grid; height: 76px; place-items: center; padding: 0 24px; border: 1px solid transparent; border-radius: 17px; background: transparent; cursor: pointer;
  transition: background .35s, border-color .35s, box-shadow .35s, transform .15s; }
.case-tab img { width: auto; height: 34px; filter: grayscale(1); opacity: .5; transition: filter .35s, opacity .35s; }
.case-tab:hover img { filter: grayscale(.2); opacity: .85; }
.case-tab::after { content: ""; position: absolute; left: 34%; right: 34%; bottom: 9px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #cc2017, #e24737); transform: scaleX(0); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.case-tab.is-active { border-color: rgba(255, 255, 255, .95); background: linear-gradient(160deg, #fff, rgba(255, 255, 255, .85)); box-shadow: inset 0 1.5px 0 #fff, 0 10px 26px rgba(120, 30, 20, .09); }
.case-tab.is-active img { filter: none; opacity: 1; }
.case-tab.is-active::after { transform: scaleX(1); }
.case-tab:active { transform: scale(.985); }
.case-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(204, 32, 23, .28); }

/* panel */
.case-panels { margin-top: 36px; }
.case-panel { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 76px); align-items: center; padding: clamp(28px, 4vw, 56px);
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 32px; background: linear-gradient(165deg, #fff 0%, #fffaf9 55%, #fdf1ee 100%);
  box-shadow: inset 0 1.5px 0 #fff, 0 1px 1px rgba(60, 20, 15, .03), 0 4px 10px rgba(60, 20, 15, .04), 0 18px 40px rgba(120, 30, 20, .07), 0 40px 80px rgba(120, 30, 20, .05); }
.case-panel[hidden] { display: none; }
.case-tag { display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 999px; background: #fde9e6; color: #c42116; font-size: 13px; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }
.case-copy h3 { margin: 16px 0 14px; font-size: clamp(26px, 2.5vw, 36px); font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.case-lede { margin: 0; color: #5d636d; font-size: 15px; line-height: 1.9; }
.case-points { display: grid; gap: 9px; margin: 20px 0 0; padding: 0; list-style: none; }
.case-points li { position: relative; padding-left: 20px; color: #2c323b; font-size: 15px; line-height: 1.75; }
.case-points .nb { white-space: nowrap; }
.case-points li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #cc2017, #e24737); box-shadow: 0 0 0 3px rgba(226, 71, 55, .14); }
.case-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 26px 0 0; }
.case-stats > div { display: flex; flex-direction: column-reverse; gap: 4px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .95); border-radius: 16px; background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(120, 30, 20, .05); }
.case-stats dt { color: var(--muted); font-size: 12.5px; }
.case-stats dd { margin: 0; color: #cc2017; font-size: clamp(24px, 2.1vw, 30px); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.case-stats dd small { margin-left: 3px; font-size: 13px; font-weight: 600; }
.case-services { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 22px; }
.case-services b { color: #4a4f58; font-size: 13px; font-weight: 600; }
.case-services ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.case-services li { padding: 5px 12px; border: 1px solid #f3d9d5; border-radius: 999px; background: #fff; color: #9a2a20; font-size: 13px; }
.case-cta { margin-top: 30px; }
/* same brand-red button as the hero CTA ("服务咨询") */
.case-cta.button-gradient { justify-content: center; gap: 12px; padding: 6px 8px 6px 18px; background: linear-gradient(100deg, #cc2017 0%, #e24737 100%); box-shadow: 0 8px 22px rgba(204, 32, 23, .26); }
.case-cta.button-gradient:hover { box-shadow: 0 12px 28px rgba(204, 32, 23, .36); }

/* photo on a soft red stage */
.case-media { position: relative; z-index: 0; margin: 0 0 30px; }
.case-photo { position: relative; overflow: hidden; aspect-ratio: 930 / 438; border-radius: 24px; background: #fffaf9; box-shadow: 0 24px 50px rgba(120, 30, 20, .12), 0 4px 10px rgba(60, 20, 15, .05); }
.case-photo img { width: 100%; height: 100%; object-fit: cover; }
.case-media::before, .case-media::after { content: ""; position: absolute; z-index: -1; left: 50%; border-radius: 50%; translate: -50% 0; pointer-events: none; }
.case-media::after { bottom: -34px; width: 92%; height: 64px; background: radial-gradient(closest-side, rgba(226, 71, 55, .34), rgba(226, 71, 55, .08) 62%, transparent); filter: blur(4px); }
.case-media::before { bottom: -22px; width: 78%; height: 40px; border: 1.5px solid rgba(226, 71, 55, .22); box-shadow: 0 0 0 10px rgba(226, 71, 55, .05), 0 0 0 22px rgba(226, 71, 55, .03); }
.case-badge { position: absolute; left: 18px; top: 18px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 999px;
  background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  box-shadow: inset 0 1px 0 #fff, 0 8px 22px rgba(120, 30, 20, .12); color: #2c323b; font-size: 13px; font-weight: 600; }
.case-badge img { width: auto; height: 22px; }

/* switching: the panel rises in, its parts follow in order, the photo settles from a slight zoom */
.case-panel.is-active { animation: case-in .6s cubic-bezier(.2, .8, .2, 1) both; }
.case-panel.is-active .case-copy > * { animation: case-rise .6s cubic-bezier(.2, .8, .2, 1) both; }
.case-panel.is-active .case-copy > :nth-child(2) { animation-delay: .05s; }
.case-panel.is-active .case-copy > :nth-child(3) { animation-delay: .1s; }
.case-panel.is-active .case-copy > :nth-child(4) { animation-delay: .15s; }
.case-panel.is-active .case-copy > :nth-child(5) { animation-delay: .2s; }
.case-panel.is-active .case-copy > :nth-child(6) { animation-delay: .25s; }
.case-panel.is-active .case-copy > :nth-child(7) { animation-delay: .3s; }
.case-panel.is-active .case-photo img { animation: case-zoom 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.case-panel.is-active .case-badge { animation: case-pop .55s cubic-bezier(.3, 1.45, .5, 1) .35s both, case-float 5.5s ease-in-out 1s infinite; }
@keyframes case-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes case-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes case-zoom { from { opacity: .4; transform: scale(1.06); } }
@keyframes case-pop { from { opacity: 0; transform: translateY(8px) scale(.85); } }
@keyframes case-float { 50% { translate: 0 -4px; } }

@media (max-width: 991px) {
  .case-panel { grid-template-columns: 1fr; gap: 40px; }
  .case-media { order: -1; }
}
@media (max-width: 560px) {
  .case-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin-top: 30px; padding: 6px; border-radius: 20px; }
  .case-tab { height: 62px; padding: 0 12px; border-radius: 15px; }
  .case-tab img { height: 26px; }
  .case-panels { margin-top: 22px; }
  .case-panel { gap: 34px; padding: 18px 18px 26px; border-radius: 24px; }
  .case-photo { border-radius: 16px; }
  .case-badge { left: 10px; top: 10px; padding: 6px 10px; }
  .case-badge img { height: 18px; }
  .case-copy h3 { font-size: 23px; }
  .case-lede, .case-points li { font-size: 14px; }
  .case-stats { gap: 8px; }
  .case-stats > div { padding: 11px 10px; border-radius: 13px; }
  .case-stats dd { font-size: 21px; }
  .case-stats dd small { font-size: 11px; }
  .case-stats dt { font-size: 11.5px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .case-tabs, .case-badge { background: #fff; }
}
@media (prefers-reduced-transparency: reduce) {
  .case-tabs, .case-badge { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .case-panel, .case-panel *, .case-tab, .case-tab::after { animation: none !important; transition: none !important; }
}