.hero{
  position:relative;padding:216px 0 116px;overflow:hidden;
  background:#fff;
}
.hero-blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;}
.blob-1{width:520px;height:520px;background:#0F6CBD;top:-160px;left:-120px;
  animation:drift1 22s ease-in-out infinite;}
.blob-2{width:440px;height:440px;background:#00B8A9;top:6%;right:-100px;
  animation:drift2 26s ease-in-out infinite;}
.blob-3{width:400px;height:400px;background:#FFC53D;bottom:-140px;left:32%;
  animation:drift3 24s ease-in-out infinite;opacity:.42;}
.blob-4{width:380px;height:380px;background:#FF7A1A;bottom:-120px;right:6%;
  animation:drift1 28s ease-in-out infinite reverse;opacity:.38;}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(50px,40px) scale(1.12);}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-60px,50px) scale(1.1);}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(40px,-50px) scale(1.14);}}

.hero::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(15,108,189,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(15,108,189,.05) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(circle at 50% 34%,#000 0%,transparent 70%);
  -webkit-mask-image:radial-gradient(circle at 50% 34%,#000 0%,transparent 70%);
  pointer-events:none;
}

.hero-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.06fr .94fr;
  gap:64px;align-items:center;
}

.badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 20px 8px 14px;border-radius:999px;
  background:#fff;border:1px solid rgba(15,108,189,.14);
  box-shadow:var(--sh-xs);
  color:var(--c-blue);font-size:13px;font-weight:800;letter-spacing:.6px;
  margin-bottom:26px;
}
.badge-dots{display:flex;gap:3px;}
.badge-dots i{width:7px;height:7px;border-radius:50%;display:block;}
.badge-dots i:nth-child(1){background:var(--c-blue);}
.badge-dots i:nth-child(2){background:var(--c-teal);}
.badge-dots i:nth-child(3){background:var(--c-yellow);}
.badge-dots i:nth-child(4){background:var(--c-orange);}

.hero h1{
  font-size:clamp(34px,4.5vw,58px);
  font-weight:900;line-height:1.14;
  letter-spacing:-1.6px;margin-bottom:24px;
}
.hero .lead{
  font-size:17px;color:var(--text2);
  max-width:540px;margin-bottom:36px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:50px;}

.hero-stats{display:flex;gap:46px;flex-wrap:wrap;}
.hero-stats .stat b{
  display:block;font-size:30px;font-weight:900;
  line-height:1.15;letter-spacing:-1px;
  background:var(--grad-blue-teal);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-stats .stat:nth-child(2) b{background:var(--grad-teal-yellow);
  -webkit-background-clip:text;background-clip:text;}
.hero-stats .stat:nth-child(3) b{background:var(--grad-warm);
  -webkit-background-clip:text;background-clip:text;}
.hero-stats .stat b em{font-style:normal;font-size:17px;}
.hero-stats .stat span{font-size:13px;color:var(--text2);}

/* Hero 四色环 */
.hero-visual{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:500px;
}
.ring-wrap{position:relative;width:360px;height:360px;}
.color-ring{
  width:100%;height:100%;border-radius:50%;
  background:conic-gradient(
    #0F6CBD 0deg 90deg,
    #00B8A9 90deg 180deg,
    #FFC53D 180deg 270deg,
    #FF7A1A 270deg 360deg
  );
  box-shadow:0 30px 70px rgba(15,108,189,.28);
  animation:ringSpin 30s linear infinite;
}
@keyframes ringSpin{to{transform:rotate(360deg);}}

.ring-mask{
  position:absolute;inset:44px;border-radius:50%;
  background:#fff;display:grid;place-items:center;
  box-shadow:inset 0 6px 26px rgba(15,108,189,.1);
}
.ring-center{text-align:center;animation:ringSpin 30s linear infinite reverse;}
.ring-center svg{width:120px;height:120px;margin:0 auto;}
.ring-center span{
  display:block;margin-top:4px;
  font-size:12px;font-weight:900;letter-spacing:2.6px;
  color:var(--text2);
}
.ring-dashed{
  position:absolute;inset:-24px;border-radius:50%;
  border:1.5px dashed rgba(15,108,189,.3);
  animation:ringSpin 40s linear infinite reverse;
}

/* Hero 浮卡 */
.float-card{
  position:absolute;
  display:flex;align-items:center;gap:10px;
  padding:12px 18px;border-radius:14px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 14px 40px rgba(15,108,189,.18);
  font-size:12.5px;font-weight:900;letter-spacing:.4px;
  animation:floaty 6s ease-in-out infinite;
  white-space:nowrap;
}
.float-card .chip{width:22px;height:22px;border-radius:7px;flex-shrink:0;}
.fc1{top:4%;left:-4%;}
.fc1 .chip{background:var(--c-blue);}
.fc2{top:38%;right:-7%;animation-delay:-1.8s;}
.fc2 .chip{background:var(--c-teal);}
.fc3{bottom:14%;left:-2%;animation-delay:-3.4s;}
.fc3 .chip{background:var(--c-yellow);}
.fc4{bottom:-1%;right:2%;animation-delay:-5s;}
.fc4 .chip{background:var(--c-orange);}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-16px);}}

/* ---------- 2. 数据条 ---------- */
.stats-bar{position:relative;overflow:hidden;padding:60px 0;background:var(--navy);}
.stats-bar::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(560px 320px at 12% 0%,rgba(15,108,189,.5),transparent 66%),
    radial-gradient(520px 300px at 42% 100%,rgba(0,184,169,.34),transparent 66%),
    radial-gradient(520px 300px at 72% 0%,rgba(255,197,61,.22),transparent 66%),
    radial-gradient(560px 320px at 96% 100%,rgba(255,122,26,.32),transparent 66%);
}
.stats-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:26px;text-align:center;
}
.stat-item b{
  display:block;font-size:clamp(30px,3.8vw,46px);
  font-weight:900;line-height:1.18;letter-spacing:-1.4px;color:#fff;
}
.stat-item:nth-child(1) b{color:#5FA9E8;}
.stat-item:nth-child(2) b{color:#3ED9C9;}
.stat-item:nth-child(3) b{color:#FFD466;}
.stat-item:nth-child(4) b{color:#FF9B52;}
.stat-item b em{font-style:normal;font-size:21px;}
.stat-item span{font-size:14px;color:rgba(255,255,255,.66);letter-spacing:.4px;}

/* ---------- 3. 产品中心 ---------- */
.palette-section{position:relative;overflow:hidden;background:var(--bg-soft);}
.palette-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.palette-card{
  position:relative;overflow:hidden;
  border-radius:22px;background:#fff;
  box-shadow:var(--sh-sm);
  transition:all .4s var(--ease);
  display:flex;flex-direction:column;
}
.palette-card:hover{transform:translateY(-10px);box-shadow:var(--sh-lg);}
.palette-color{
  height:180px;position:relative;overflow:hidden;
  background:var(--pc);display:grid;place-items:center;
}
.palette-color::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 74% 22%,rgba(255,255,255,.34),transparent 58%);
}
.palette-color::before{
  content:"";position:absolute;left:-30%;bottom:-60%;
  width:170%;height:170%;border-radius:50%;
  background:rgba(255,255,255,.14);
  transform:scale(0);transition:transform .7s var(--ease);
}
.palette-card:hover .palette-color::before{transform:scale(1);}
.palette-color svg{
  position:relative;z-index:2;width:64px;height:64px;
  stroke:#fff;stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.16));
}
.palette-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1;}
.palette-body .tag{
  font-size:11px;font-weight:900;letter-spacing:2.4px;
  color:var(--pc);margin-bottom:8px;text-transform:uppercase;
}
.palette-body h3{font-size:19px;font-weight:900;margin-bottom:10px;letter-spacing:-.2px;}
.palette-body p{font-size:13.8px;color:var(--text2);line-height:1.75;margin-bottom:18px;flex:1;}
.palette-specs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;}
.palette-specs span{
  font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:999px;
  background:rgba(15,108,189,.07);color:var(--c-blue);
}
.palette-card:nth-child(1) .palette-specs span{background:rgba(15,108,189,.08);color:#0F6CBD;}
.palette-card:nth-child(2) .palette-specs span{background:rgba(0,184,169,.1);color:#019187;}
.palette-card:nth-child(3) .palette-specs span{background:rgba(255,197,61,.16);color:#B8860B;}
.palette-card:nth-child(4) .palette-specs span{background:rgba(255,122,26,.1);color:#E8640A;}
.palette-bar{height:4px;border-radius:4px;background:var(--pc);width:44px;transition:width .45s var(--ease);}
.palette-card:hover .palette-bar{width:100%;}

/* ---------- 4. 调色服务 ---------- */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-bottom:72px;}
.service-card{
  position:relative;padding:38px 30px 34px;
  border-radius:22px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--sh-xs);
  transition:all .4s var(--ease);overflow:hidden;
}
.service-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--sc,var(--grad-main));
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.service-card:hover{transform:translateY(-9px);box-shadow:var(--sh-lg);border-color:transparent;}
.service-card:hover::before{transform:scaleX(1);}
.service-icon{
  width:60px;height:60px;border-radius:18px;
  display:grid;place-items:center;margin-bottom:24px;
  background:var(--sc-soft,rgba(15,108,189,.08));
  transition:.4s var(--ease);
}
.service-icon svg{
  width:27px;height:27px;
  stroke:var(--sc-color,var(--c-blue));
  stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  transition:.4s var(--ease);
}
.service-card:hover .service-icon{background:var(--sc,var(--grad-main));transform:rotate(-6deg) scale(1.06);}
.service-card:hover .service-icon svg{stroke:#fff;}
.service-card h3{font-size:18.5px;font-weight:900;margin-bottom:11px;letter-spacing:-.2px;}
.service-card p{font-size:14.5px;color:var(--text2);line-height:1.78;}
.service-num{
  position:absolute;top:28px;right:30px;
  font-size:38px;font-weight:900;line-height:1;
  color:rgba(15,108,189,.06);letter-spacing:-2px;
  transition:.4s var(--ease);
}
.service-card:hover .service-num{color:rgba(15,108,189,.12);transform:scale(1.1);}

/* ---------- 6. 关于我们 ---------- */
.about-inner{display:grid;grid-template-columns:1fr 1.05fr;gap:74px;align-items:center;}
.about-visual{position:relative;}
.about-img{
  border-radius:26px;height:460px;
  background:var(--grad-main);box-shadow:var(--sh-lg);
  position:relative;overflow:hidden;
}
.about-img::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);
  background-size:46px 46px;
}
.about-img-circles{position:absolute;inset:0;z-index:2;display:grid;place-items:center;}
.about-img-circles svg{width:210px;height:210px;filter:drop-shadow(0 12px 30px rgba(0,0,0,.18));}
.about-badge{
  position:absolute;right:-24px;bottom:40px;z-index:3;
  background:#fff;border-radius:20px;
  padding:22px 28px;box-shadow:var(--sh-lg);
  display:flex;align-items:center;gap:16px;
}
.about-badge b{
  font-size:38px;font-weight:900;line-height:1;
  background:var(--grad-warm);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.about-badge span{font-size:13px;color:var(--text2);line-height:1.5;}
.about-text h2{
  font-size:clamp(27px,3.3vw,39px);
  font-weight:900;line-height:1.24;letter-spacing:-1px;margin-bottom:22px;
}
.about-text > p{color:var(--text2);font-size:16px;margin-bottom:30px;}
.about-list{display:grid;gap:18px;margin-bottom:36px;}
.about-list li{display:flex;gap:15px;align-items:flex-start;}
.about-list .tick{
  width:26px;height:26px;border-radius:9px;flex-shrink:0;margin-top:3px;
  display:grid;place-items:center;background:var(--tc,var(--grad-blue-teal));
}
.about-list .tick svg{
  width:13px;height:13px;stroke:#fff;stroke-width:3.2;
  fill:none;stroke-linecap:round;stroke-linejoin:round;
}
.about-list h4{font-size:15.5px;font-weight:900;margin-bottom:3px;}
.about-list p{font-size:14px;color:var(--text2);line-height:1.68;}

/* ---------- 7. 案例展示 ---------- */
.case-section{background:var(--bg-soft);}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.case-card{
  border-radius:22px;overflow:hidden;background:#fff;
  box-shadow:var(--sh-sm);transition:all .4s var(--ease);
}
.case-card:hover{transform:translateY(-9px);box-shadow:var(--sh-lg);}
.case-cover{height:210px;position:relative;overflow:hidden;display:grid;place-items:center;}
.case-cover.c1{background:linear-gradient(135deg,#0F6CBD,#00B8A9);}
.case-cover.c2{background:linear-gradient(135deg,#FFC53D,#FF7A1A);}
.case-cover.c3{background:linear-gradient(135deg,#00B8A9,#FFC53D);}
.case-cover::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 72% 28%,rgba(255,255,255,.28),transparent 58%);
}
.case-cover .num{
  position:relative;z-index:2;
  font-size:52px;font-weight:900;line-height:1;
  color:rgba(255,255,255,.92);letter-spacing:-2.5px;
}
.case-body{padding:28px 26px 30px;}
.case-body h3{font-size:17.5px;font-weight:900;margin-bottom:10px;letter-spacing:-.2px;}
.case-body p{font-size:14.5px;color:var(--text2);line-height:1.74;margin-bottom:16px;}
.case-tag{
  display:inline-block;padding:6px 15px;border-radius:999px;
  font-size:12px;font-weight:900;letter-spacing:.5px;
  color:var(--c-blue);background:rgba(15,108,189,.09);
}
.case-card:nth-child(2) .case-tag{color:var(--c-orange-d);background:rgba(255,122,26,.11);}
.case-card:nth-child(3) .case-tag{color:var(--c-teal-d);background:rgba(0,184,169,.11);}

/* ---------- 9. 首页响应式 ---------- */
@media (max-width:1120px){
  .palette-grid{grid-template-columns:repeat(2,1fr);}
  .swatch-grid{grid-template-columns:repeat(4,1fr);}
  .case-grid{grid-template-columns:1fr 1fr;}
  .case-grid .case-card:last-child{grid-column:span 2;}
}
@media (max-width:980px){
  .hero{padding:150px 0 84px;}
  .hero-inner{grid-template-columns:1fr;gap:60px;}
  .hero-visual{order:-1;min-height:400px;}
  .hero-text{text-align:center;}
  .hero .lead{margin-left:auto;margin-right:auto;}
  .hero-actions,.hero-stats{justify-content:center;}
  .badge{margin-left:auto;margin-right:auto;}
  .about-inner{grid-template-columns:1fr;gap:56px;}
  .about-badge{right:16px;}
  .cta-box{flex-direction:column;text-align:center;padding:58px 34px;}
  .cta-actions{justify-content:center;}
}
@media (max-width:740px){
  .service-grid{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:36px 16px;}
  .stats-bar{padding:48px 0;}
  .palette-grid{grid-template-columns:1fr;}
  .palette-color{height:150px;}
  .swatch-wrap{padding:34px 22px 32px;}
  .swatch-grid{grid-template-columns:repeat(3,1fr);gap:14px;}
  .swatch .block{height:78px;}
  .case-grid{grid-template-columns:1fr;}
  .case-grid .case-card:last-child{grid-column:auto;}
  .cta-section{padding-bottom:76px;}
  .hero-stats{gap:28px;}
  .hero-stats .stat b{font-size:25px;}
  .ring-wrap{width:270px;height:270px;}
  .ring-mask{inset:34px;}
  .ring-center svg{width:88px;height:88px;}
  .fc1{left:-3%;}
  .fc2{right:-3%;}
  .fc3{display:none;}
  .fc4{right:0;}
  .about-img{height:340px;}
  .about-badge{right:12px;bottom:22px;padding:17px 22px;}
  .about-badge b{font-size:28px;}
}
@media (max-width:430px){
  .swatch-grid{grid-template-columns:repeat(2,1fr);}
  .hero-actions{flex-direction:column;align-items:stretch;}
  .hero-actions .btn{width:100%;}
  .blob{filter:blur(60px);}
  .logo-cn{font-size:17px;}
  .logo-en{font-size:8px;letter-spacing:1.8px;}
}