/* =====================================================================
   关于我们 · 页面独立样式 guanyu.css
   模块原创设计：左右分栏简介 + 角标 / 三承诺卡片 / 纵向彩点历程 / 团队叠卡 / 深蓝理由带
   说明：本文件只负责本页模块样式，外壳样式在 base.css
   ===================================================================== */

/* ---------- 页面横幅 ---------- */
.banner-about{background-image:url('../images/banner-about.jpg')}

/* ---------- 关于我们子栏目导航 ---------- */
.about-subnav{background:#F4F7FC;border-bottom:1px solid #E6EBF4}
.about-subnav-inner{display:flex;gap:8px;flex-wrap:wrap;padding-top:16px;padding-bottom:16px}
.about-subnav a{
  display:inline-flex;align-items:center;padding:9px 22px;border-radius:999px;font-size:15px;font-weight:600;
  color:var(--c-text-2);background:#fff;border:1px solid #E0E7F1;transition:all .25s ease;
}
.about-subnav a:hover{color:var(--c-accent);border-color:var(--c-accent);transform:translateY(-2px);box-shadow:0 6px 16px rgba(37,99,235,.12)}
.about-subnav a.on{background:var(--c-grad);color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(37,99,235,.3)}
@media (max-width:640px){.about-subnav-inner{flex-wrap:nowrap;overflow-x:auto;padding-bottom:14px}.about-subnav a{flex-shrink:0}}

/* ---------- 公司简介分栏 ---------- */
.about-split{background:var(--c-white)}
.about-split>.container:first-child{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center}
.about-media{position:relative}
.about-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);aspect-ratio:3/2;object-fit:cover}
.about-media::before{content:"";position:absolute;inset:24px -24px -24px 24px;border-radius:var(--radius-lg);background:var(--c-ice);z-index:-1}
.media-badge{
  position:absolute;right:-22px;bottom:26px;background:var(--c-grad);color:#fff;border-radius:16px;
  padding:20px 26px;text-align:center;box-shadow:var(--shadow-lg);animation:floatY 4s ease-in-out infinite;
}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.media-badge b{display:block;font-size:30px;font-weight:800;line-height:1.1}
.media-badge span{font-size:13px;opacity:.85}
.about-text h2{font-size:clamp(24px,2.8vw,34px);margin:0 0 18px;line-height:1.35}
.about-text p{color:var(--c-text-2);margin-bottom:16px}
.about-points{margin:22px 0 30px;display:grid;gap:12px}
.about-points li{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--c-text)}
.about-points svg{width:20px;height:20px;fill:var(--c-accent);flex-shrink:0}

/* 数字带 */
.stat-band{
  margin-top:70px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  background:var(--c-dark);border-radius:var(--radius-lg);padding:40px 30px;
  background-image:radial-gradient(circle at 12% 120%,rgba(37,99,235,.35),transparent 45%),radial-gradient(circle at 88% -30%,rgba(37,99,235,.25),transparent 40%);
}
.stat-item{text-align:center;position:relative}
.stat-item:not(:last-child)::after{content:"";position:absolute;right:0;top:18%;height:64%;width:1px;background:rgba(255,255,255,.12)}
.stat-item .stat-num{color:#fff}
.stat-item .stat-num .unit{color:var(--c-accent-2)}
.stat-item span{display:block;margin-top:8px;font-size:14px;color:#9FB2D4}

/* ---------- 服务承诺 ---------- */
.promise-sec{background:var(--c-ice-2)}
.promise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.promise-card{
  position:relative;background:#fff;border-radius:var(--radius-lg);padding:38px 32px 34px;
  box-shadow:var(--shadow);transition:transform var(--trans),box-shadow var(--trans);overflow:hidden;
}
.promise-card::before{content:"";position:absolute;left:0;top:0;height:6px;width:100%;background:var(--c-grad)}
.promise-card:nth-child(2)::before{background:linear-gradient(90deg,#2563EB,#0EA5E9)}
.promise-card:nth-child(3)::before{background:linear-gradient(90deg,#0EA5E9,#10B981)}
.promise-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.promise-num{position:absolute;right:26px;top:22px;font-size:44px;font-weight:800;color:var(--c-ice);line-height:1}
.promise-icon{width:62px;height:62px;border-radius:16px;background:var(--c-ice);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.promise-icon svg{width:30px;height:30px;fill:var(--c-accent)}
.promise-card h3{font-size:20px;margin-bottom:10px}
.promise-card p{color:var(--c-text-2);font-size:14.5px}

/* ---------- 发展历程 ---------- */
.journey-sec{background:#fff}
.journey{position:relative;max-width:860px;margin:0 auto;padding-left:40px}
.journey::before{content:"";position:absolute;left:14px;top:8px;bottom:8px;width:2px;background:linear-gradient(#2563EB,#0EA5E9,#10B981,#F59E0B,#EF4444)}
.journey-item{position:relative;padding:0 0 44px}
.journey-item:last-child{padding-bottom:0}
.j-dot{
  position:absolute;left:40px;top:6px;transform:translateX(-40px);
  width:30px;height:30px;border-radius:50%;border:5px solid #fff;
  box-shadow:0 0 0 2px currentColor,0 6px 14px rgba(27,58,107,.2);z-index:2;
}
.j-dot::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px dashed currentColor;opacity:.6}
.jc1{background:#2563EB;color:#2563EB}
.jc2{background:#0EA5E9;color:#0EA5E9}
.jc3{background:#10B981;color:#10B981}
.jc4{background:#F59E0B;color:#F59E0B}
.jc5{background:#EF4444;color:#EF4444}
.j-card{
  background:var(--c-ice-2);border-radius:14px;padding:22px 26px;
  border-left:4px solid currentColor;transition:transform var(--trans);
}
.j-card:hover{transform:translateX(8px)}
.j-year{display:inline-block;font-size:12.5px;font-weight:800;color:#fff;background:var(--c-primary);border-radius:999px;padding:4px 14px;margin-bottom:8px;letter-spacing:1px}
.j-card h3{font-size:18px;margin-bottom:6px}
.j-card p{color:var(--c-text-2);font-size:14.5px;margin:0}

/* ---------- 团队风采 ---------- */
.team-sec{background:var(--c-ice-2)}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.team-card{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;margin:0;
  box-shadow:var(--shadow);background:#fff;
}
.team-card img{aspect-ratio:3/2;object-fit:cover;width:100%;transition:transform .6s ease;filter:saturate(.95)}
.team-card:hover img{transform:scale(1.06)}
.team-card figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:40px 22px 18px;color:#fff;
  background:linear-gradient(transparent,rgba(15,31,61,.92));
}
.team-card figcaption h3{color:#fff;font-size:18px;margin-bottom:2px}
.team-card figcaption p{font-size:13px;color:#C9D8F2;margin:0}

/* ---------- 为什么选择我们 ---------- */
.why-sec{background:var(--c-dark);background-image:radial-gradient(circle at 85% 10%,rgba(37,99,235,.22),transparent 40%)}
.why-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
.why-media img{border-radius:var(--radius-lg);aspect-ratio:3/2;object-fit:cover;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.why-list .sec-eyebrow{background:rgba(37,99,235,.16);color:#7DA6E8}
.why-list h2{color:#fff;font-size:clamp(24px,2.8vw,34px);margin-bottom:30px}
.why-list ul{display:grid;gap:22px}
.why-list li{display:flex;gap:18px;align-items:flex-start}
.why-list li>b{
  font-size:20px;font-weight:800;color:#7DA6E8;background:rgba(255,255,255,.07);
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid rgba(255,255,255,.12);
}
.why-list li h3{color:#fff;font-size:17px;margin-bottom:4px}
.why-list li p{color:#93A7C9;font-size:14px;margin:0}
.why-list .btn{margin-top:30px}

/* ---------- 联系区 ---------- */
.contact-sec{padding-top:20px;background:#fff}

/* ---------- 响应式 ---------- */
@media (max-width:992px){
  .about-split>.container:first-child{grid-template-columns:1fr;gap:44px}
  .about-media::before{inset:16px -12px -12px 16px}
  .media-badge{right:10px}
  .why-wrap{grid-template-columns:1fr;gap:40px}
  .promise-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .team-grid{grid-template-columns:1fr 1fr}
  .stat-band{grid-template-columns:repeat(2,1fr);gap:30px 20px}
  .stat-item:nth-child(2)::after{display:none}
}
@media (max-width:640px){
  .team-grid{grid-template-columns:1fr}
  .stat-band{padding:32px 20px}
  .journey{padding-left:26px}
  .j-dot{transform:translateX(-26px)}
  .j-card{padding:18px}
}