:root{--brand-blue:#1088ff;--brand-deep:#071b4f;--text:#37485f;--muted:#6f8097;--line:#e6eef9;--soft:#f4f9ff}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif;color:var(--brand-deep);background:#fff}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.wrap{width:min(1280px,92vw);margin:0 auto}
.header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.98);border-bottom:1px solid #edf2f8;backdrop-filter:blur(10px)}
.header-inner{height:86px;display:flex;align-items:center;gap:24px}
.logo img{width:175px;height:auto}
.nav{display:flex;gap:56px;margin:0 auto}
.nav a{position:relative;padding-bottom:12px;font-size:16px;font-weight:800;color:#111a37;transition:color .2s ease}
.phone-link{font-size:16px;font-weight:800;color:#111a37;white-space:nowrap}
.menu-btn{display:none;border:0;background:none;font-size:28px;color:var(--brand-deep);margin-left:auto}
.hero{background:#f5f9ff;padding:42px 0 30px}
.hero-inner{display:grid;grid-template-columns:1.04fr .96fr;align-items:center;gap:36px}
.hero-copy h1{margin:0 0 22px;font-size:68px;line-height:1.16;font-weight:900;letter-spacing:-.04em;color:var(--brand-deep)}
.hero-copy h1 span{color:var(--brand-blue)}
.hero-copy p{margin:0 0 28px;max-width:720px;font-size:18px;line-height:1.9;font-weight:700;color:var(--text)}
.hero-features{display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.feature{display:flex;align-items:center;gap:10px;color:#17356f;font-size:15px;font-weight:800}
.feature img{width:28px;height:28px;object-fit:contain}
.hero-art-box{display:flex;justify-content:center;align-items:center;min-height:400px}
.hero-art-box img{width:min(100%,613px);height:auto;object-fit:contain}
.section{padding:38px 0 0}
.section-title{text-align:center;margin-bottom:20px}
.section-title h2{margin:0 0 8px;font-size:34px;line-height:1.2;font-weight:900;color:var(--brand-deep)}
.section-title p{margin:0;font-size:15px;color:var(--muted);font-weight:700}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.service-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 10px 24px rgba(11,76,162,.05)}
.service-card .icon-hero{width:58px;height:58px;object-fit:contain;margin-bottom:12px}
.service-card h3{margin:0 0 10px;font-size:18px;font-weight:900;color:#0a1e52}
.service-card p{margin:0 0 12px;font-size:13px;line-height:1.72;color:#44556e;font-weight:650;min-height:88px}
.service-card ul{margin:0;padding-left:18px}
.service-card li{font-size:13px;line-height:1.72;color:#1a366d;font-weight:700}
.process-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:10px;align-items:start}
.process-item{text-align:center}
.process-item img{width:72px;height:72px;object-fit:contain;margin:0 auto 12px}
.process-item h4{margin:0 0 8px;font-size:18px;font-weight:900;color:#0a1e52}
.process-item p{margin:0;font-size:13px;line-height:1.65;color:#6b7b92;font-weight:650}
.process-arrow{font-size:30px;color:#2d67ff;font-weight:700;text-align:center;padding-top:22px}
.case-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.case-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 10px 24px rgba(11,76,162,.05);transition:transform .28s ease, box-shadow .28s ease;will-change:transform;position:relative}
.case-card>img{width:100%;aspect-ratio:16/9;height:auto;object-fit:contain;object-position:center;display:block;background:#eef4ff;padding:0}
.case-body{padding:14px}
.case-body h3{margin:0 0 8px;font-size:18px;font-weight:900;color:#0a1e52}
.case-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.case-tags span{padding:4px 8px;border-radius:999px;background:#f1f6ff;border:1px solid #d9e6ff;color:#4967ef;font-size:12px;font-weight:800}
.case-body p{margin:0;font-size:13px;line-height:1.7;color:#5f6f86;font-weight:650}
.adv-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.adv-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;text-align:center;box-shadow:0 8px 22px rgba(11,76,162,.04)}
.adv-card img{width:56px;height:56px;object-fit:contain;margin:0 auto 12px}
.adv-card h3{margin:0 0 8px;font-size:18px;font-weight:900}
.adv-card p{margin:0;font-size:13px;line-height:1.72;color:#627288;font-weight:650}
.clients-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;padding:4px 0}
.client-logo{background:#fff;border:1px solid var(--line);border-radius:16px;min-height:112px;display:flex;align-items:center;justify-content:center;padding:10px 12px;box-shadow:0 8px 22px rgba(11,76,162,.035);overflow:hidden}
.client-logo img{display:block;width:120px;height:50px;object-fit:contain}
.about-desc{text-align:center;font-size:15px;line-height:1.9;color:#34455d;font-weight:700;max-width:980px;margin:0 auto 18px}
.about-top{display:grid;grid-template-columns:430px 1fr;gap:24px;align-items:stretch;margin-bottom:18px}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;height:100%}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 16px;text-align:center;box-shadow:0 8px 22px rgba(11,76,162,.04);display:flex;flex-direction:column;align-items:center;justify-content:center}
.stat-card strong{display:block;font-size:38px;color:#0a1e52;font-weight:900;margin-bottom:6px}
.stat-card span{font-size:14px;color:#56667d;font-weight:700}
.about-image img{width:100%;height:100%;min-height:332px;object-fit:cover;object-position:center;border-radius:16px;border:1px solid var(--line);background:#fff;display:block}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.value-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 8px 22px rgba(11,76,162,.04)}
.value-card img{width:56px;height:56px;object-fit:contain;margin-bottom:12px}
.value-card h4{margin:0 0 8px;font-size:18px;font-weight:900}
.value-card p{margin:0;font-size:13px;line-height:1.75;color:#627288;font-weight:650}
.contact-grid{display:grid;grid-template-columns:320px 1fr;gap:18px;align-items:stretch;padding-bottom:40px}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:18px;box-shadow:0 8px 22px rgba(11,76,162,.04)}
.contact-row{display:flex;gap:14px;align-items:flex-start}
.contact-row img{width:24px;height:24px;flex:0 0 24px;margin-top:2px}
.contact-row h4{margin:0 0 6px;font-size:16px;font-weight:900}
.contact-row p{margin:0;font-size:14px;line-height:1.72;color:#627288;font-weight:650}
.map-box img{width:100%;height:100%;object-fit:cover;border-radius:16px;border:1px solid var(--line)}
.footer{background:var(--brand-blue);color:#fff;text-align:center;padding:18px 12px;font-size:13px;font-weight:700}
@media (max-width:1200px){
  .hero-copy h1{font-size:54px}
  .service-grid,.case-grid{grid-template-columns:repeat(2,1fr)}
  .adv-grid{grid-template-columns:repeat(3,1fr)}
  .clients-grid{grid-template-columns:repeat(3,1fr)}
  .about-top{grid-template-columns:1fr}
  .values-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .header-inner{height:74px}
  .logo img{width:148px}
  .nav{display:none;position:absolute;left:0;right:0;top:74px;background:#fff;border-bottom:1px solid var(--line);padding:16px 24px;flex-direction:column;gap:14px}
  .nav.open{display:flex}
  .phone-link{display:none}
  .menu-btn{display:block}
  .hero-inner,.contact-grid{grid-template-columns:1fr}
  .hero-copy h1{font-size:40px}
  .hero-copy p{font-size:15px}
  .hero-art-box img{width:min(100%,500px)}
  .service-grid,.case-grid,.adv-grid,.clients-grid,.values-grid,.stats-grid{grid-template-columns:1fr}
  .process-grid{grid-template-columns:1fr}
  .process-arrow{transform:rotate(90deg);padding-top:0}
}

.nav a.active,.nav a:hover{color:var(--brand-blue)}
.nav a.active::after,.nav a:hover::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:22px;height:4px;border-radius:999px;background:var(--brand-blue)}

.about-image{height:100%;display:flex;align-items:stretch}






@media (max-width:860px){
  .nav a{
    position:relative;
    display:block;
    width:100%;
    padding:12px 48px 12px 0;
  }

  .nav a.active::after,
  .nav a:hover::after{
    content:"";
    position:absolute;
    right:-24px;
    top:50%;
    left:auto;
    bottom:auto;
    transform:translateY(-50%);
    width:4px;
    height:30px;
    border-radius:999px;
    background:var(--brand-blue);
  }
}



.case-card:hover{
  transform:scale(1.045);
  box-shadow:0 18px 42px rgba(11,76,162,.16);
  z-index:3;
}



@media (hover:none){
  .case-card:hover{
    transform:none;
    box-shadow:0 10px 24px rgba(11,76,162,.05);
  }
}


/* Hero carousel - v21 */
.hero-carousel{
  position:relative;
  overflow:hidden;
  background:#f5f9ff;
}
.hero-slides{
  display:flex;
  width:100%;
  transform:translateX(0);
  transition:transform .72s cubic-bezier(.22,.61,.36,1);
}
.hero-slide{
  flex:0 0 100%;
  width:100%;
}
.hero-slide.active{
  z-index:2;
}
.hero-kicker{
  display:inline-flex;
  align-items:center;
  margin-bottom:14px;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(16,136,255,.10);
  color:var(--brand-blue);
  font-size:14px;
  font-weight:900;
  letter-spacing:.08em;
}
.hero-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:6;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid rgba(16,136,255,.22);
  border-radius:50%;
  background:rgba(255,255,255,.88);
  color:var(--brand-blue);
  font-size:26px;
  line-height:1;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(11,76,162,.10);
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}
.hero-arrow:hover{
  transform:translateY(-50%) scale(1.08);
  background:#fff;
  box-shadow:0 14px 34px rgba(11,76,162,.16);
}
.hero-prev{left:28px}
.hero-next{right:28px}
.hero-dots{
  position:absolute;
  left:50%;
  bottom:22px;
  z-index:7;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  align-items:center;
}
.hero-dots button{
  width:10px;
  height:10px;
  border:0;
  padding:0;
  border-radius:999px;
  background:#c4d7ff;
  cursor:pointer;
  transition:width .25s ease, background .25s ease;
}
.hero-dots button.active{
  width:30px;
  background:var(--brand-blue);
}
@media (max-width:860px){
  .hero-arrow{display:none}
  .hero-dots{bottom:14px}
}

/* v21 hover scale interactions update */
.service-card,
.adv-card,
.client-logo,
.stat-card,
.value-card,
.about-image,
.map-box{
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  will-change:transform;
  position:relative;
}

.service-card:hover,
.adv-card:hover,
.client-logo:hover,
.stat-card:hover,
.value-card:hover,
.about-image:hover,
.map-box:hover{
  transform:scale(1.045);
  box-shadow:0 18px 42px rgba(11,76,162,.16);
  border-color:#cfe0ff;
  z-index:3;
}

@media (hover:none){
  .service-card:hover,
  .adv-card:hover,
  .client-logo:hover,
  .stat-card:hover,
  .value-card:hover,
  .about-image:hover,
  .map-box:hover{
    transform:none;
  }
}

/* v21 scroll reveal animation update */
.reveal-up{
  opacity:0;
  transform:translateY(46px);
  transition:opacity .72s cubic-bezier(.22,.61,.36,1), transform .72s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}

.reveal-up.is-visible{
  opacity:1;
  transform:translateY(0);
}

.reveal-up[data-reveal-delay="1"]{transition-delay:.06s}
.reveal-up[data-reveal-delay="2"]{transition-delay:.12s}
.reveal-up[data-reveal-delay="3"]{transition-delay:.18s}
.reveal-up[data-reveal-delay="4"]{transition-delay:.24s}
.reveal-up[data-reveal-delay="5"]{transition-delay:.30s}

@media (prefers-reduced-motion:reduce){
  .reveal-up{
    opacity:1;
    transform:none;
    transition:none;
  }
}