/* ============================================================
   鼎汉智能 · Base — reset / typography / layout
   v18：配色与节奏改为延续[鼎汉集团官网](https://dinghangroup.com/)——
   暖米色与白交替、金棕色主色、小节标题居中、段间弧线过渡。
   色值取自集团站实测，不是估的。
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 40px)}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--ff);
  font-size:var(--t4);line-height:1.9;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{border:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,h5{margin:0;font-weight:600;line-height:1.5;letter-spacing:-.012em}
p{margin:0}
figure,figcaption{margin:0}          /* UA 默认 figure 有 1em 40px，会把图挤窄 80px */
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse}
::selection{background:rgba(184,137,59,.18)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ---------------- 版心与分节 ---------------- */
.wrap{width:min(100% - var(--pad)*2,var(--max));margin-inline:auto;position:relative}
.wrap--n{width:min(100% - var(--pad)*2,880px);margin-inline:auto;position:relative}
.sec{padding-block:var(--sec)}
.sec--s{padding-block:clamp(60px,7.4vw,104px)}
/* 暖米色分节。集团站用它与白色交替，并在上下缘做弧形过渡 ——
   弧线是集团站最明显的版式特征，去掉就不像一家了。 */
.tint{
  position:relative;
  background:radial-gradient(120% 140% at 50% 50%,var(--warm) 0%,var(--warm-2) 100%);
}
.tint::before,.tint::after{
  content:"";position:absolute;left:-2%;right:-2%;height:clamp(40px,5vw,74px);
  background:inherit;pointer-events:none;
}
.tint::before{top:calc(-1 * clamp(40px,5vw,74px));border-radius:50% 50% 0 0/100% 100% 0 0}
.tint::after{bottom:calc(-1 * clamp(40px,5vw,74px));border-radius:0 0 50% 50%/0 0 100% 100%}
.rule{height:1px;border:0;margin:0;background:var(--line-2)}

/* ---------------- 排版 ---------------- */
/* eyebrow：灰色小字，不用品牌蓝。
   每段标题上方都顶一个蓝色小标签，是幻灯片的做法，页面会显得很吵。 */
.eyebrow{
  display:inline-block;
  font-size:var(--t3);line-height:1.5;font-weight:600;color:var(--gold);letter-spacing:.02em;
}

/* 集团站的标题字重是 800–900，比常规粗一档。跟上。 */
.d1{font-size:var(--t1);line-height:1.4;letter-spacing:-.02em;font-weight:800;color:var(--ink)}
.d2{font-size:var(--t2);line-height:1.5;letter-spacing:-.012em;font-weight:800;color:var(--ink)}
.d3{font-size:var(--t3);line-height:1.55;font-weight:700;color:var(--ink)}
.d4{font-size:var(--t4);line-height:1.6;font-weight:700;color:var(--ink)}

.lead{font-size:var(--t3);line-height:1.9;color:var(--muted)}
.sub{font-size:var(--t4);line-height:1.9;color:var(--muted)}
.tiny{font-size:var(--t5);line-height:1.7;color:var(--muted-2)}
.mono{font-family:var(--ff-m);font-variant-numeric:tabular-nums}
.ctr{text-align:center}

/* 集团站所有小节标题都居中，正文左对齐。这是它最好认的版式特征。 */
.head{max-width:660px;margin-inline:auto;text-align:center}
.head--l{margin-inline:0;text-align:left}
.head .d1,.head .d2,.head .d3{margin-top:16px}
.head .lead{margin-top:20px}

/* ---------------- 滚动出现 ----------------
   全站唯一的动效：淡入 + 8px 上移。
   这不是特效，是让长页面读起来有节奏。不要再加别的。 */
[data-r]{opacity:0;transform:translateY(8px);
  transition:opacity .5s ease,transform .5s var(--e-o)}
[data-r].in{opacity:1;transform:none}
[data-d="1"]{transition-delay:.05s}[data-d="2"]{transition-delay:.10s}
[data-d="3"]{transition-delay:.15s}[data-d="4"]{transition-delay:.20s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  [data-r]{opacity:1!important;transform:none!important}
}