:root{
  --navy:#13263d;
  --blue:#235d98;
  --bg:#eef2f6;
  --red:#d71920;
  --amber:#f39200;
}
body{
  background:
    radial-gradient(circle at 92% 7%,rgba(215,25,32,.10),transparent 24rem),
    linear-gradient(135deg,rgba(19,38,61,.045) 25%,transparent 25%) 0 0/32px 32px,
    linear-gradient(135deg,#f5f7fa,#e7edf3);
}
body:before{
  content:"YUNDA  韵达快递  YUNDA  韵达快递";
  position:fixed; inset:auto -10% 5% auto;
  transform:rotate(-18deg);
  color:rgba(215,25,32,.045);
  font:800 54px/1.6 Arial,"Microsoft YaHei";
  letter-spacing:10px;
  white-space:pre-wrap;
  width:900px;
  pointer-events:none;
  z-index:-1;
}
header{
  background:linear-gradient(110deg,#14283e 0%,#1d3855 62%,#d71920 62%,#e3292f 100%);
  box-shadow:0 3px 14px rgba(19,38,61,.22);
}
header h1:before{
  content:"Y";
  display:inline-grid;
  place-items:center;
  width:28px;height:28px;
  margin-right:9px;
  border-radius:50%;
  color:#fff;
  background:var(--red);
  font:800 19px Arial;
  vertical-align:2px;
}
.kpi,article{
  border:1px solid rgba(19,38,61,.08);
  box-shadow:0 6px 18px rgba(19,38,61,.07);
}
.kpi{border-top:3px solid #d71920}
.kpi:nth-child(3n){border-top-color:#f39200}
button{background:linear-gradient(135deg,#d71920,#ed3a34)}
button:hover{filter:brightness(.96)}
nav button.active{border-bottom-color:#f39200}