
/* ============================================================
   SUNEVCHARGE - About Us Page (Ueeshop custom code)
   用法：粘贴到 Ueeshop 自定义代码的"代码内容"，触发页面选择 About Us
   [最终版] Product Portfolio / More Than a Supplier 已使用指定图片
   ============================================================ */
.sunev-about{
  --sv-primary:#0f4c81;   /* 深蓝 */
  --sv-accent:#2f80ed;    /* 强调蓝 */
  --sv-ink:#1c2733;       /* 正文深灰 */
  --sv-soft:#667788;      /* 次要文字 */
  --sv-line:rgba(47,128,237,.15);
  --sv-bg-light:#f8fafc;
  font-family:'Space Grotesk','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',Arial,sans-serif;
  color:var(--sv-ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.sunev-about *{box-sizing:border-box;margin:0;padding:0;}
.sunev-about img{max-width:100%;display:block;}
.sunev-about a{text-decoration:none;}
.sunev-about .sv-container{max-width:1200px;margin:0 auto;padding:0 24px;}
.sunev-about .sv-kicker{
  display:inline-block;font-size:13px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sv-accent);margin-bottom:16px;
}
.sunev-about .sv-h2{
  font-size:clamp(26px,4vw,40px);font-weight:700;line-height:1.2;color:var(--sv-primary);margin-bottom:20px;
}
.sunev-about .sv-section{padding:72px 0;}
.sunev-about .sv-section--light{background:var(--sv-bg-light);}
@media(min-width:768px){.sunev-about .sv-section{padding:96px 0;}}
.sunev-about [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.sunev-about [data-reveal].sv-revealed{opacity:1;transform:none;}
.sunev-about [data-reveal="left"]{transform:translateX(-40px);}
.sunev-about [data-reveal="right"]{transform:translateX(40px);}
.sunev-about [data-reveal].sv-revealed{transform:none;}
/* ---------- 1. Hero ---------- */
.sunev-hero{
  position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding-top:130px;padding-bottom:80px;
}
.sunev-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;}
.sunev-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(15,76,129,.85) 0%,rgba(15,76,129,.65) 50%,rgba(15,76,129,.5) 100%);
}
.sunev-hero-content{position:relative;z-index:2;max-width:880px;padding:0 28px;text-align:center;}
.sunev-hero h1{
  font-size:clamp(30px,5.2vw,64px);font-weight:700;color:#fff;line-height:1.15;letter-spacing:-.02em;margin-bottom:22px;
  animation:svFadeUp .9s cubic-bezier(.16,1,.3,1) both;
}
.sunev-hero-sub{
  font-size:clamp(16px,2vw,22px);font-weight:300;color:rgba(255,255,255,.88);margin-bottom:40px;
  animation:svFadeUp .9s .2s cubic-bezier(.16,1,.3,1) both;
}
.sunev-hero-cta{
  display:inline-block;padding:16px 34px;background:#fff;color:var(--sv-primary);font-weight:600;
  border-radius:999px;font-size:16px;box-shadow:0 6px 24px rgba(0,0,0,.15);transition:transform .3s,box-shadow .3s;
  animation:svFadeUp .9s .4s cubic-bezier(.16,1,.3,1) both;
}
.sunev-hero-cta:hover{transform:scale(1.05);box-shadow:0 10px 30px rgba(0,0,0,.22);}
.sunev-scroll{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.6);
  font-size:13px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:2;animation:svFadeUp 1s 1s both;
}
.sunev-scroll svg{width:20px;height:20px;animation:svBounce 1.5s infinite ease-in-out;}
@keyframes svFadeUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:none;}}
@keyframes svBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(8px);}}
/* ---------- 双栏布局 ---------- */
.sv-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:center;}
@media(min-width:1024px){.sv-grid{grid-template-columns:1fr 1fr;gap:56px;}}
.sv-img{width:100%;border-radius:16px;box-shadow:0 10px 30px rgba(15,76,129,.12);object-fit:cover;}
.sv-body p{font-size:16px;line-height:1.75;color:var(--sv-soft);}
.sv-body p+p{margin-top:16px;}
/* ---------- 3. Product Portfolio ---------- */
.sv-center{text-align:center;}
.sv-img--full{width:100%;border-radius:16px;box-shadow:0 10px 30px rgba(15,76,129,.12);margin-bottom:32px;}
.sv-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:30px;}
.sv-tag{padding:10px 22px;background:var(--sv-accent);color:#fff;font-size:14px;font-weight:500;border-radius:999px;transition:transform .3s,box-shadow .3s;}
.sv-tag:hover{transform:scale(1.05);box-shadow:0 6px 16px rgba(47,128,237,.35);}
.sv-lead{max-width:760px;margin:0 auto;text-align:center;color:var(--sv-soft);font-size:16px;line-height:1.75;}
/* ---------- 5. What We Provide 服务卡片 ---------- */
.sv-cards{display:grid;grid-template-columns:1fr;gap:24px;}
@media(min-width:640px){.sv-cards{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.sv-cards{grid-template-columns:repeat(3,1fr);}}
.sv-card{
  background:#fff;border-radius:16px;padding:32px;border:2px solid var(--sv-line);
  transition:transform .3s,box-shadow .3s;
}
.sv-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(15,76,129,.12);}
.sv-card-icon{
  width:56px;height:56px;border-radius:12px;background:rgba(47,128,237,.1);
  display:flex;align-items:center;justify-content:center;font-size:30px;margin-bottom:22px;
}
.sv-card h3{font-size:20px;font-weight:700;color:var(--sv-primary);margin-bottom:12px;}
.sv-card p{color:var(--sv-soft);font-size:15px;line-height:1.7;}
/* ---------- 6/7. 深蓝通栏背景区 ---------- */
.sv-band{position:relative;overflow:hidden;padding:88px 0;}
@media(min-width:1024px){.sv-band{padding:120px 0;}}
.sv-band-bg{position:absolute;inset:0;background-size:cover;background-position:center;}
.sv-band--dark::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,76,129,.82) 0%,rgba(15,76,129,.75) 100%);
}
.sv-band--diag::after{
  content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(15,76,129,.88) 0%,rgba(15,76,129,.78) 100%);
}
.sv-band .sv-band-content{position:relative;z-index:2;max-width:860px;margin:0 auto;text-align:center;padding:0 24px;}
.sv-band .sv-kicker{color:rgba(255,255,255,.8);}
.sv-band h2{color:#fff;font-size:clamp(26px,4vw,40px);font-weight:700;line-height:1.2;margin-bottom:20px;}
.sv-band p{color:rgba(255,255,255,.82);font-size:clamp(15px,1.8vw,19px);line-height:1.75;}
/* ---------- 7. Mission & Vision 卡片 ---------- */
.sv-mv{position:relative;z-index:2;max-width:1080px;margin:0 auto;padding:0 24px;}
.sv-mv-head{text-align:center;margin-bottom:44px;}
.sv-mv-grid{display:grid;grid-template-columns:1fr;gap:24px;}
@media(min-width:768px){.sv-mv-grid{grid-template-columns:1fr 1fr;gap:32px;}}
.sv-mv-card{background:#fff;border-radius:16px;padding:36px;box-shadow:0 14px 34px rgba(0,0,0,.18);transition:transform .3s,box-shadow .3s;}
.sv-mv-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.24);}
.sv-mv-icon{width:48px;height:48px;border-radius:50%;background:rgba(47,128,237,.12);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:22px;}
.sv-mv-card h3{font-size:22px;font-weight:700;color:var(--sv-primary);margin-bottom:14px;}
.sv-mv-card p{font-size:16px;color:var(--sv-soft);font-style:italic;line-height:1.7;}
/* ---------- 8. Quality Control ---------- */
.sv-chips{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px;}
.sv-chip{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;background:#f8fafc;border:1px solid #eef1f4;}
.sv-chip span{font-size:20px;}
.sv-chip b{font-size:14px;font-weight:600;color:var(--sv-primary);}
/* ---------- 9. Why Choose 数字卡 ---------- */
.sv-reasons{display:grid;grid-template-columns:1fr;gap:20px;}
@media(min-width:768px){.sv-reasons{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1200px){.sv-reasons{grid-template-columns:repeat(5,1fr);}}
.sv-reason{background:#fff;border-radius:16px;padding:24px;box-shadow:0 2px 10px rgba(15,76,129,.05);border:1px solid #eef1f4;transition:transform .3s,box-shadow .3s;}
.sv-reason:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(15,76,129,.12);}
.sv-reason .sv-num{font-size:40px;font-weight:800;line-height:1;color:var(--sv-accent);margin-bottom:16px;}
.sv-reason h3{font-size:18px;font-weight:700;color:var(--sv-primary);margin-bottom:8px;}
.sv-reason p{font-size:14px;color:var(--sv-soft);line-height:1.6;}
/* ---------- 10. CTA ---------- */
.sv-cta{padding:88px 0;background:var(--sv-primary);text-align:center;}
@media(min-width:1024px){.sv-cta{padding:120px 0;}}
.sv-cta h2{color:#fff;font-size:clamp(26px,4vw,42px);font-weight:700;line-height:1.2;max-width:820px;margin:0 auto 40px;}
.sv-cta-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.sv-cta-tag{padding:10px 22px;background:var(--sv-accent);color:#fff;font-size:14px;font-weight:500;border-radius:999px;}
@media(max-width:640px){
  .sv-hero h1{font-size:30px;}
  .sv-chips{grid-template-columns:1fr;}
  .sv-reasons{grid-template-columns:1fr;}
}
