/* =========================================================
   西安达昊电子科技有限公司 官网样式表（源码版，可直接修改）
   来源于模板站点 www.sxyjxx.com 的 style.min.css，已展开为可读源码。
   修改后刷新浏览器即可生效，无需编译/打包。
   ========================================================= */

*,*::before,*::after {
  margin:0;
  padding:0;
  box-sizing:border-box
}

:root {
  --primary:#1E88E5;
  --primary-light:#42A5F5;
  --primary-dark:#1565C0;
  --accent:#29B6F6;
  --accent-light:#81D4FA;
  --text-dark:#1a1a2e;
  --text-body:#444;
  --text-light:#777;
  --bg-white:#ffffff;
  --bg-light:#F0F8FF;
  --bg-gray:#E3F2FD;
  --border:#BBDEFB;
  --shadow-sm:0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg:0 8px 40px rgba(0,0,0,0.12);
  --radius:12px;
  --radius-sm:8px;
  --transition:all 0.3s ease;
  --max-width:1200px
}

html {
  scroll-behavior:smooth;
  font-size:16px
}

body {
  font-family:'Segoe UI','Microsoft YaHei','PingFang SC',sans-serif;
  color:var(--text-body);
  background:var(--bg-white);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeSpeed
}

a {
  text-decoration:none;
  color:inherit;
  transition:var(--transition);
  touch-action:manipulation
}

ul {
  list-style:none
}

img {
  max-width:100%;
  display:block;
  content-visibility:auto
}

.container {
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 24px
}

.section {
  padding:80px 0;
  content-visibility:auto;
  contain-intrinsic-size:auto 400px
}

.section-light {
  background:var(--bg-light)
}

.section-gray {
  background:var(--bg-gray)
}

.section-title {
  text-align:center;
  margin-bottom:50px
}

.section-title h2 {
  font-size:2.2rem;
  color:var(--text-dark);
  font-weight:700;
  margin-bottom:12px;
  letter-spacing:1px
}

.section-title .subtitle {
  font-size:1rem;
  color:var(--text-light);
  text-transform:uppercase;
  letter-spacing:3px
}

.section-title p {
  color:var(--text-light);
  max-width:600px;
  margin:0 auto
}

.section-title .divider {
  width:60px;
  height:4px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  margin:16px auto;
  border-radius:2px
}

.btn {
  display:inline-block;
  padding:12px 32px;
  border-radius:50px;
  font-size:0.95rem;
  font-weight:600;
  cursor:pointer;
  border:none;
  transition:var(--transition);
  letter-spacing:0.5px;
  touch-action:manipulation
}

.btn-primary {
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  color:#fff;
  box-shadow:0 4px 15px rgba(26,75,140,0.3)
}

.btn-primary:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 25px rgba(26,75,140,0.4)
}

.btn-outline {
  background:transparent;
  color:#fff;
  border:2px solid rgba(255,255,255,0.6)
}

.btn-outline:hover {
  background:#fff;
  color:var(--primary);
  border-color:#fff
}

.btn-accent {
  background:linear-gradient(135deg,var(--accent),var(--accent-light));
  color:#fff;
  box-shadow:0 4px 15px rgba(0,180,216,0.3)
}

.btn-accent:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 25px rgba(0,180,216,0.4)
}

.navbar {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow-sm);
  transition:var(--transition)
}

.navbar .container {
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:72px
}

.nav-logo {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1.25rem;
  font-weight:700;
  color:var(--primary)
}

.nav-logo .logo-icon {
  width:40px;
  height:40px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1.3rem;
  font-weight:800
}

.nav-logo span:last-child {
  font-size:1rem;
  color:var(--text-light);
  font-weight:400
}

.nav-menu {
  display:flex;
  gap:8px;
  align-items:center
}

.nav-menu a {
  padding:8px 18px;
  border-radius:8px;
  font-size:0.95rem;
  font-weight:500;
  color:var(--text-body);
  position:relative
}

.nav-menu a:hover,.nav-menu a.active {
  color:var(--primary);
  background:rgba(26,75,140,0.06)
}

.nav-toggle {
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  padding:4px
}

.nav-toggle span {
  width:24px;
  height:2px;
  background:var(--text-dark);
  border-radius:2px;
  transition:var(--transition)
}

.hero {
  min-height:100vh;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 50%,var(--primary-light) 100%);
  color:#fff
}

.hero::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:radial-gradient(circle at 20% 50%,rgba(0,180,216,0.15) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(72,202,228,0.1) 0%,transparent 50%)
}

.hero-bg-pattern {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  opacity:0.05;
  background-image:linear-gradient(rgba(255,255,255,0.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.5) 1px,transparent 1px);
  background-size:50px 50px
}

.hero .container {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px
}

.hero-content {
  flex:1;
  max-width:600px
}

.hero-content h1 {
  font-size:3.2rem;
  font-weight:800;
  line-height:1.3;
  margin-bottom:20px;
  letter-spacing:1px
}

.hero-content h1 .highlight {
  background:linear-gradient(90deg,var(--accent-light),#fff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text
}

.hero-content .hero-desc {
  font-size:1.15rem;
  opacity:0.85;
  margin-bottom:32px;
  line-height:1.8
}

.hero-buttons {
  display:flex;
  gap:16px;
  flex-wrap:wrap
}

.hero-visual {
  flex:0 0 400px;
  position:relative
}

.hero-card {
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:20px;
  padding:30px;
  position:relative
}

.hero-card .float-icon {
  position:absolute;
  width:60px;
  height:60px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.8rem;
  color:#fff
}

.hero-card .float-icon:nth-child(1) {
  background:linear-gradient(135deg,#00b4d8,#0077b6);
  top:-20px;
  left:20px;
  animation:float 3s ease-in-out infinite
}

.hero-card .float-icon:nth-child(2) {
  background:linear-gradient(135deg,#7209b7,#3a0ca3);
  top:-20px;
  right:20px;
  animation:float 3s ease-in-out infinite 0.5s
}

.hero-card .float-icon:nth-child(3) {
  background:linear-gradient(135deg,#f72585,#b5179e);
  bottom:-20px;
  left:50%;
  transform:translateX(-50%);
  animation:float 3s ease-in-out infinite 1s
}

.hero-card-inner {
  margin-top:50px;
  text-align:center
}

.hero-card-inner .big-num {
  font-size:3rem;
  font-weight:800;
  color:var(--accent-light)
}

.hero-card-inner .label {
  font-size:0.9rem;
  opacity:0.7;
  margin-top:4px
}

.hero-stats-row {
  display:flex;
  justify-content:space-around;
  margin-top:30px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.1)
}

.hero-stat {
  text-align:center
}

.hero-stat .num {
  font-size:1.5rem;
  font-weight:700;
  color:var(--accent-light)
}

.hero-stat .lbl {
  font-size:0.75rem;
  opacity:0.6
}

@keyframes float {
  0%,100% {
    transform:translateY(0)
  }

  50% {
    transform:translateY(-10px)
  }

}

.stats-bar {
  background:var(--bg-white);
  padding:50px 0;
  box-shadow:var(--shadow-md);
  margin-top:-40px;
  position:relative;
  z-index:10;
  border-radius:var(--radius)
}

.stats-bar .container {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  text-align:center
}

.stat-item .num {
  font-size:2.5rem;
  font-weight:800;
  color:var(--primary);
  line-height:1
}

.stat-item .num span {
  font-size:1.2rem;
  color:var(--accent)
}

.stat-item .label {
  margin-top:8px;
  color:var(--text-light);
  font-size:0.9rem
}

.services-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px
}

.service-card {
  background:#fff;
  border-radius:var(--radius);
  padding:40px 30px;
  text-align:center;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
  transition:var(--transition);
  position:relative;
  overflow:hidden
}

.service-card::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  transform:scaleX(0);
  transition:var(--transition);
  transform-origin:left
}

.service-card:hover {
  transform:translateY(-8px);
  box-shadow:var(--shadow-lg);
  border-color:transparent
}

.service-card:hover::before {
  transform:scaleX(1)
}

.service-icon {
  width:70px;
  height:70px;
  border-radius:18px;
  margin:0 auto 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  color:#fff
}

.service-icon.s1 {
  background:linear-gradient(135deg,#1a4b8c,#2d6db5)
}

.service-icon.s2 {
  background:linear-gradient(135deg,#00b4d8,#0077b6)
}

.service-icon.s3 {
  background:linear-gradient(135deg,#7209b7,#3a0ca3)
}

.service-icon.s4 {
  background:linear-gradient(135deg,#f72585,#b5179e)
}

.service-icon.s5 {
  background:linear-gradient(135deg,#06d6a0,#059669)
}

.service-icon.s6 {
  background:linear-gradient(135deg,#ff8500,#e8590c)
}

.service-card h3 {
  font-size:1.25rem;
  color:var(--text-dark);
  margin-bottom:12px;
  font-weight:700
}

.service-card p {
  color:var(--text-light);
  font-size:0.9rem;
  line-height:1.7
}

.about-preview {
  display:flex;
  align-items:center;
  gap:60px
}

.about-preview .about-text {
  flex:1
}

.about-preview .about-text h2 {
  font-size:2rem;
  color:var(--text-dark);
  margin-bottom:20px;
  font-weight:700
}

.about-preview .about-text p {
  color:var(--text-light);
  margin-bottom:16px;
  line-height:1.9
}

.about-features {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:24px
}

.about-feature {
  display:flex;
  align-items:center;
  gap:12px
}

.about-feature .check {
  width:24px;
  height:24px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:0.8rem;
  flex-shrink:0
}

.about-feature span {
  font-size:0.9rem;
  color:var(--text-body);
  font-weight:500
}

.about-visual {
  flex:0 0 420px
}

.about-visual-card {
  background:linear-gradient(135deg,var(--primary-dark),var(--primary));
  border-radius:var(--radius);
  padding:40px;
  color:#fff;
  position:relative;
  overflow:hidden
}

.about-visual-card::after {
  content:'';
  position:absolute;
  bottom:-50px;
  right:-50px;
  width:200px;
  height:200px;
  border-radius:50%;
  background:rgba(0,180,216,0.15)
}

.about-visual-card .avc-label {
  font-size:0.85rem;
  opacity:0.7;
  text-transform:uppercase;
  letter-spacing:2px;
  margin-bottom:8px
}

.about-visual-card .avc-title {
  font-size:1.5rem;
  font-weight:700;
  margin-bottom:24px
}

.about-visual-card .avc-items {
  display:flex;
  flex-direction:column;
  gap:16px;
  position:relative;
  z-index:2
}

.about-visual-card .avc-item {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  background:rgba(255,255,255,0.08);
  border-radius:var(--radius-sm);
  backdrop-filter:blur(5px)
}

.about-visual-card .avc-item .avc-num {
  font-size:1.5rem;
  font-weight:800;
  color:var(--accent-light)
}

.about-visual-card .avc-item .avc-text {
  font-size:0.85rem;
  opacity:0.9
}

.why-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px
}

.why-card {
  text-align:center;
  padding:30px 20px
}

.why-card .why-icon {
  width:80px;
  height:80px;
  margin:0 auto 20px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(26,75,140,0.1),rgba(0,180,216,0.1));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem
}

.why-card h3 {
  font-size:1.1rem;
  color:var(--text-dark);
  margin-bottom:10px;
  font-weight:700
}

.why-card p {
  color:var(--text-light);
  font-size:0.85rem
}

.cta-section {
  background:linear-gradient(135deg,var(--primary-dark),var(--primary));
  color:#fff;
  text-align:center;
  padding:70px 0;
  position:relative;
  overflow:hidden
}

.cta-section::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:radial-gradient(circle at 50% 50%,rgba(0,180,216,0.1) 0%,transparent 70%)
}

.cta-section .container {
  position:relative;
  z-index:2
}

.cta-section h2 {
  font-size:2rem;
  font-weight:700;
  margin-bottom:12px
}

.cta-section p {
  opacity:0.8;
  margin-bottom:28px;
  font-size:1.05rem
}

.partners-row {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:40px;
  align-items:center
}

.partner-item {
  padding:16px 32px;
  background:#fff;
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
  font-size:1rem;
  font-weight:600;
  color:var(--text-light);
  transition:var(--transition);
  border:1px solid var(--border)
}

.partner-item:hover {
  color:var(--primary);
  transform:translateY(-4px);
  box-shadow:var(--shadow-md)
}

.page-banner {
  padding:140px 0 60px;
  background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 60%,var(--primary-light) 100%);
  color:#fff;
  text-align:center;
  position:relative;
  overflow:hidden
}

.page-banner::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:radial-gradient(circle at 30% 50%,rgba(0,180,216,0.1) 0%,transparent 50%),radial-gradient(circle at 70% 50%,rgba(72,202,228,0.08) 0%,transparent 50%)
}

.page-banner::after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg,var(--primary),var(--accent),var(--primary))
}

.page-banner .container {
  position:relative;
  z-index:2
}

.page-banner h1 {
  font-size:2.5rem;
  font-weight:800;
  margin-bottom:10px
}

.page-banner .breadcrumb {
  font-size:0.9rem;
  opacity:0.7
}

.page-banner .breadcrumb a:hover {
  opacity:1
}

.about-intro {
  display:flex;
  align-items:center;
  gap:50px
}

.about-intro-text {
  flex:1
}

.about-intro-text h2 {
  font-size:1.8rem;
  color:var(--text-dark);
  margin-bottom:20px
}

.about-intro-text p {
  color:var(--text-light);
  margin-bottom:14px;
  line-height:1.9
}

.about-intro-visual {
  flex:0 0 400px
}

.about-intro-card {
  background:linear-gradient(135deg,var(--primary),var(--accent));
  border-radius:var(--radius);
  padding:36px;
  color:#fff;
  text-align:center
}

.about-intro-card .aic-icon {
  font-size:3rem;
  margin-bottom:16px
}

.about-intro-card h3 {
  font-size:1.3rem;
  margin-bottom:8px
}

.about-intro-card p {
  opacity:0.85;
  font-size:0.9rem
}

.timeline {
  position:relative;
  max-width:800px;
  margin:0 auto;
  padding:20px 0
}

.timeline::before {
  content:'';
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:3px;
  background:linear-gradient(var(--primary),var(--accent));
  transform:translateX(-50%)
}

.timeline-item {
  position:relative;
  width:50%;
  padding:20px 40px
}

.timeline-item:nth-child(odd) {
  left:0;
  text-align:right
}

.timeline-item:nth-child(even) {
  left:50%
}

.timeline-item .tl-dot {
  position:absolute;
  top:28px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--accent);
  border:3px solid #fff;
  box-shadow:0 0 0 3px var(--accent)
}

.timeline-item:nth-child(odd) .tl-dot {
  right:-8px
}

.timeline-item:nth-child(even) .tl-dot {
  left:-8px
}

.timeline-content {
  background:#fff;
  border-radius:var(--radius-sm);
  padding:20px 24px;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border)
}

.timeline-content .year {
  font-size:1.3rem;
  font-weight:800;
  color:var(--primary)
}

.timeline-content h4 {
  font-size:1rem;
  color:var(--text-dark);
  margin:4px 0
}

.timeline-content p {
  font-size:0.85rem;
  color:var(--text-light)
}

.culture-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:30px
}

.culture-card {
  background:#fff;
  border-radius:var(--radius);
  padding:36px 28px;
  text-align:center;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
  transition:var(--transition)
}

.culture-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-md)
}

.culture-card .cc-icon {
  width:64px;
  height:64px;
  margin:0 auto 20px;
  border-radius:16px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.8rem;
  color:#fff
}

.culture-card h3 {
  font-size:1.15rem;
  color:var(--text-dark);
  margin-bottom:10px
}

.culture-card p {
  color:var(--text-light);
  font-size:0.88rem
}

.team-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:30px
}

.team-card {
  text-align:center
}

.team-avatar {
  width:120px;
  height:120px;
  border-radius:50%;
  margin:0 auto 16px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.5rem;
  color:#fff;
  font-weight:700
}

.team-card h3 {
  font-size:1.1rem;
  color:var(--text-dark);
  margin-bottom:4px
}

.team-card .role {
  color:var(--accent);
  font-size:0.85rem;
  font-weight:600;
  margin-bottom:8px
}

.team-card p {
  color:var(--text-light);
  font-size:0.82rem
}

.service-detail {
  display:flex;
  align-items:center;
  gap:50px;
  margin-bottom:60px
}

.service-detail:nth-child(even) {
  flex-direction:row-reverse
}

.service-detail-text {
  flex:1
}

.service-detail-text .sd-tag {
  display:inline-block;
  padding:4px 16px;
  border-radius:50px;
  font-size:0.8rem;
  font-weight:600;
  margin-bottom:12px
}

.service-detail-text h3 {
  font-size:1.6rem;
  color:var(--text-dark);
  margin-bottom:16px
}

.service-detail-text p {
  color:var(--text-light);
  margin-bottom:16px;
  line-height:1.9
}

.service-detail-text ul {
  margin-bottom:20px
}

.service-detail-text ul li {
  padding:6px 0 6px 28px;
  position:relative;
  color:var(--text-body);
  font-size:0.9rem
}

.service-detail-text ul li::before {
  content:'✓';
  position:absolute;
  left:0;
  color:var(--accent);
  font-weight:700
}

.service-detail-visual {
  flex:0 0 380px
}

.service-detail-card {
  border-radius:var(--radius);
  padding:40px;
  text-align:center;
  color:#fff;
  min-height:280px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center
}

.service-detail-card .sdc-icon {
  font-size:3.5rem;
  margin-bottom:16px
}

.service-detail-card h4 {
  font-size:1.2rem;
  margin-bottom:8px
}

.service-detail-card p {
  opacity:0.8;
  font-size:0.85rem
}

.sd-bg1 {
  background:linear-gradient(135deg,#1a4b8c,#2d6db5)
}

.sd-bg2 {
  background:linear-gradient(135deg,#00b4d8,#0077b6)
}

.sd-bg3 {
  background:linear-gradient(135deg,#7209b7,#3a0ca3)
}

.sd-bg4 {
  background:linear-gradient(135deg,#f72585,#b5179e)
}

.sd-bg5 {
  background:linear-gradient(135deg,#06d6a0,#059669)
}

.sd-bg6 {
  background:linear-gradient(135deg,#ff8500,#e8590c)
}

.process-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:24px;
  counter-reset:step
}

.process-card {
  text-align:center;
  padding:30px 20px;
  position:relative
}

.process-card .pc-num {
  counter-increment:step;
  width:50px;
  height:50px;
  margin:0 auto 16px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  font-weight:800
}

.process-card .pc-num::before {
  content:counter(step)
}

.process-card h4 {
  font-size:1rem;
  color:var(--text-dark);
  margin-bottom:8px
}

.process-card p {
  color:var(--text-light);
  font-size:0.82rem
}

.contact-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px
}

.contact-info-list {
  margin-bottom:30px
}

.contact-info-item {
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:20px 0;
  border-bottom:1px solid var(--border)
}

.contact-info-item:last-child {
  border-bottom:none
}

.contact-info-item .ci-icon {
  width:48px;
  height:48px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  color:#fff;
  flex-shrink:0
}

.contact-info-item .ci-text h4 {
  font-size:1rem;
  color:var(--text-dark);
  margin-bottom:4px
}

.contact-info-item .ci-text p {
  color:var(--text-light);
  font-size:0.9rem
}

.contact-form {
  background:#fff;
  border-radius:var(--radius);
  padding:40px;
  box-shadow:var(--shadow-md);
  border:1px solid var(--border)
}

.form-group {
  margin-bottom:20px
}

.form-group label {
  display:block;
  font-size:0.9rem;
  color:var(--text-dark);
  margin-bottom:6px;
  font-weight:600
}

.form-group input,.form-group textarea,.form-group select {
  width:100%;
  padding:12px 16px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:0.9rem;
  font-family:inherit;
  transition:var(--transition);
  outline:none
}

.form-group input:focus,.form-group textarea:focus,.form-group select:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(26,75,140,0.08)
}

.form-group textarea {
  resize:vertical;
  min-height:120px
}

.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}

.form-message {
  padding:12px 16px;
  border-radius:var(--radius-sm);
  margin-bottom:16px;
  font-size:0.9rem;
  display:none
}

.form-message.success {
  background:#d4edda;
  color:#155724;
  border:1px solid #c3e6cb;
  display:block
}

.form-message.error {
  background:#f8d7da;
  color:#721c24;
  border:1px solid #f5c6cb;
  display:block
}

.map-container {
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  background:var(--bg-light);
  padding:40px;
  text-align:center;
  border:1px solid var(--border)
}

.map-placeholder {
  color:var(--text-light)
}

.map-placeholder .mp-icon {
  font-size:3rem;
  margin-bottom:12px
}

.map-placeholder h3 {
  color:var(--text-dark);
  margin-bottom:8px
}

.footer {
  background:var(--primary-dark);
  color:rgba(255,255,255,0.7);
  padding:60px 0 0
}

.footer-top {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.5fr;
  gap:40px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,0.08)
}

.footer-brand .footer-logo {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  color:#fff;
  font-size:1.2rem;
  font-weight:700
}

.footer-brand p {
  font-size:0.88rem;
  line-height:1.8;
  margin-bottom:16px
}

.footer-social {
  display:flex;
  gap:12px
}

.footer-social a {
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  color:rgba(255,255,255,0.6);
  transition:var(--transition)
}

.footer-social a:hover {
  background:var(--accent);
  color:#fff
}

.footer-col h4 {
  color:#fff;
  font-size:1rem;
  margin-bottom:18px;
  font-weight:600
}

.footer-col ul li {
  margin-bottom:10px
}

.footer-col ul li a {
  font-size:0.88rem;
  color:rgba(255,255,255,0.6);
  transition:var(--transition)
}

.footer-col ul li a:hover {
  color:var(--accent-light);
  padding-left:4px
}

.footer-contact .fc-item {
  display:flex;
  gap:10px;
  margin-bottom:14px;
  font-size:0.85rem;
  color:rgba(255,255,255,0.6)
}

.footer-contact .fc-item .fc-icon {
  flex-shrink:0;
  color:var(--accent-light)
}

.footer-bottom {
  padding:20px 0;
  text-align:center;
  font-size:0.82rem;
  color:rgba(255,255,255,0.4)
}

.footer-bottom a {
  color:rgba(255,255,255,0.4)
}

.footer-bottom a:hover {
  color:var(--accent-light)
}

.footer-stats {
  margin-top:10px;
  font-size:0.8rem;
  color:rgba(255,255,255,0.45);
  letter-spacing:0.3px
}

.footer-stats b {
  color:var(--accent-light);
  font-weight:600;
  padding:0 2px;
  font-variant-numeric:tabular-nums
}

.cases-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:30px
}

.case-card {
  background:#fff;
  border-radius:var(--radius);
  padding:36px 30px;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
  transition:var(--transition);
  position:relative;
  overflow:hidden
}

.case-card::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  transform:scaleX(0);
  transition:var(--transition);
  transform-origin:left
}

.case-card:hover {
  transform:translateY(-8px);
  box-shadow:var(--shadow-lg);
  border-color:transparent
}

.case-card:hover::before {
  transform:scaleX(1)
}

.case-card .case-icon {
  font-size:2.5rem;
  margin-bottom:12px
}

.case-card .case-tag {
  display:inline-block;
  padding:4px 14px;
  border-radius:50px;
  font-size:0.78rem;
  font-weight:600;
  background:var(--bg-gray);
  color:var(--primary);
  margin-bottom:12px
}

.case-card h3 {
  font-size:1.25rem;
  color:var(--text-dark);
  margin-bottom:6px;
  font-weight:700
}

.case-card .case-client {
  font-size:0.82rem;
  color:var(--accent);
  font-weight:600;
  margin-bottom:10px
}

.case-card .case-desc {
  color:var(--text-light);
  font-size:0.88rem;
  line-height:1.8;
  margin-bottom:16px
}

.case-results {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}

.case-results .cr-item {
  display:inline-block;
  padding:4px 12px;
  background:linear-gradient(135deg,rgba(26,75,140,0.06),rgba(0,180,216,0.06));
  border-radius:50px;
  font-size:0.78rem;
  color:var(--primary);
  font-weight:500
}

.case-detail {
  display:flex;
  align-items:flex-start;
  gap:30px;
  background:#fff;
  border-radius:var(--radius);
  padding:36px;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
  margin-bottom:24px;
  transition:var(--transition)
}

.case-detail:hover {
  box-shadow:var(--shadow-md);
  border-color:var(--accent-light)
}

.case-detail-icon {
  flex:0 0 80px;
  width:80px;
  height:80px;
  border-radius:20px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.2rem;
  color:#fff
}

.case-detail-body {
  flex:1
}

.case-detail-body .case-tag {
  display:inline-block;
  padding:4px 14px;
  border-radius:50px;
  font-size:0.78rem;
  font-weight:600;
  background:var(--bg-gray);
  color:var(--primary);
  margin-bottom:10px
}

.case-detail-body h3 {
  font-size:1.35rem;
  color:var(--text-dark);
  margin-bottom:6px;
  font-weight:700
}

.case-detail-body .case-client {
  font-size:0.85rem;
  color:var(--accent);
  font-weight:600;
  margin-bottom:12px
}

.case-detail-body .case-desc {
  color:var(--text-light);
  font-size:0.9rem;
  line-height:1.9;
  margin-bottom:16px
}

.cert-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px
}

.cert-card {
  background:#fff;
  border-radius:var(--radius);
  padding:36px 28px;
  text-align:center;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
  transition:var(--transition);
  position:relative;
  overflow:hidden
}

.cert-card::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  transform:scaleX(0);
  transition:var(--transition);
  transform-origin:left
}

.cert-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-md)
}

.cert-card:hover::before {
  transform:scaleX(1)
}

.cert-card .cert-icon {
  width:72px;
  height:72px;
  margin:0 auto 20px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  color:#fff
}

.cert-card h3 {
  font-size:1.05rem;
  color:var(--text-dark);
  margin-bottom:8px;
  font-weight:700
}

.cert-card .cert-issuer {
  font-size:0.82rem;
  color:var(--accent);
  font-weight:600;
  margin-bottom:4px
}

.cert-card .cert-date {
  font-size:0.78rem;
  color:var(--text-light);
  margin-bottom:8px
}

.cert-card .cert-desc {
  font-size:0.82rem;
  color:var(--text-light);
  line-height:1.6
}

.news-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px
}

.news-list {
  max-width:900px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:20px
}

.news-card,.news-item {
  display:flex;
  align-items:center;
  gap:24px;
  background:#fff;
  border-radius:var(--radius);
  padding:24px 28px;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
  transition:var(--transition);
  cursor:pointer
}

.news-card:hover,.news-item:hover {
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:var(--accent-light)
}

.news-date {
  flex:0 0 70px;
  text-align:center;
  border-right:2px solid var(--border);
  padding-right:20px
}

.news-date .nd-day {
  display:block;
  font-size:2rem;
  font-weight:800;
  color:var(--primary);
  line-height:1
}

.news-date .nd-month {
  display:block;
  font-size:0.78rem;
  color:var(--text-light);
  margin-top:4px
}

.news-body {
  flex:1
}

.news-body .news-tag {
  display:inline-block;
  padding:2px 12px;
  border-radius:50px;
  font-size:0.72rem;
  font-weight:600;
  background:var(--bg-gray);
  color:var(--primary);
  margin-bottom:8px
}

.news-body h3 {
  font-size:1.1rem;
  color:var(--text-dark);
  margin-bottom:6px;
  font-weight:700;
  line-height:1.5
}

.news-body p {
  color:var(--text-light);
  font-size:0.85rem;
  line-height:1.7;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}

.news-arrow {
  flex:0 0 auto;
  font-size:1.5rem;
  color:var(--accent);
  transition:var(--transition)
}

.news-card:hover .news-arrow,.news-item:hover .news-arrow {
  transform:translateX(6px)
}

.news-modal-overlay {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(4px);
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:40px 20px
}

.news-modal-overlay.active {
  display:flex
}

.news-modal {
  background:#fff;
  border-radius:var(--radius);
  max-width:700px;
  width:100%;
  max-height:80vh;
  overflow-y:auto;
  padding:40px;
  position:relative;
  box-shadow:var(--shadow-lg);
  animation:newsModalIn 0.3s ease
}

@keyframes newsModalIn {
  from {
    opacity:0;
    transform:scale(0.95) translateY(20px)
  }

  to {
    opacity:1;
    transform:scale(1) translateY(0)
  }

}

.news-modal-close {
  position:absolute;
  top:16px;
  right:16px;
  width:36px;
  height:36px;
  border-radius:50%;
  border:none;
  background:var(--bg-gray);
  color:var(--text-dark);
  font-size:1.1rem;
  cursor:pointer;
  transition:var(--transition);
  display:flex;
  align-items:center;
  justify-content:center
}

.news-modal-close:hover {
  background:var(--primary);
  color:#fff
}

.news-modal-tag {
  display:inline-block;
  padding:4px 14px;
  border-radius:50px;
  font-size:0.78rem;
  font-weight:600;
  background:var(--bg-gray);
  color:var(--primary);
  margin-bottom:12px
}

.news-modal h2 {
  font-size:1.6rem;
  color:var(--text-dark);
  font-weight:700;
  line-height:1.4;
  margin-bottom:10px;
  padding-right:40px
}

.news-modal-date {
  font-size:0.85rem;
  color:var(--text-light);
  margin-bottom:24px;
  padding-bottom:20px;
  border-bottom:2px solid var(--bg-gray)
}

.news-modal-content p {
  color:var(--text-body);
  font-size:0.95rem;
  line-height:2;
  margin-bottom:16px
}

.empty-section {
  text-align:center;
  padding:60px 20px;
  color:var(--text-light)
}

.empty-section p {
  font-size:1rem
}

@media (max-width:968px) {
  .hero .container {
    flex-direction:column;
    text-align:center
  }

  .hero-visual {
    flex:0 0 auto;
    width:100%;
    max-width:400px
  }

  .hero-content {
    max-width:100%
  }

  .hero-buttons {
    justify-content:center
  }

  .about-preview {
    flex-direction:column
  }

  .about-visual {
    flex:0 0 auto;
    width:100%;
    max-width:400px
  }

  .about-intro {
    flex-direction:column
  }

  .about-intro-visual {
    flex:0 0 auto;
    width:100%;
    max-width:420px
  }

  .aic-header {
    justify-content:center
  }

  .aic-titles {
    text-align:left
  }

  .service-detail {
    flex-direction:column !important
  }

  .service-detail-visual {
    flex:0 0 auto;
    width:100%;
    max-width:380px
  }

  .contact-layout {
    grid-template-columns:1fr
  }

  .footer-top {
    grid-template-columns:1fr 1fr
  }

  .timeline::before {
    left:20px
  }

  .timeline-item {
    width:100%;
    left:0 !important;
    text-align:left !important;
    padding-left:50px;
    padding-right:0
  }

  .timeline-item .tl-dot {
    left:12px !important;
    right:auto !important
  }

  .case-detail {
    flex-direction:column
  }

  .case-detail-icon {
    flex:0 0 auto
  }

}

@media (max-width:768px) {
  .nav-menu {
    position:fixed;
    top:72px;
    left:0;
    right:0;
    background:#fff;
    flex-direction:column;
    padding:20px;
    gap:4px;
    box-shadow:var(--shadow-md);
    transform:translateY(-150%);
    transition:var(--transition)
  }

  .nav-menu.open {
    transform:translateY(0)
  }

  .nav-menu a {
    width:100%;
    text-align:center
  }

  .nav-toggle {
    display:flex
  }

  .hero-content h1 {
    font-size:2.2rem
  }

  .section {
    padding:50px 0
  }

  .section-title h2 {
    font-size:1.6rem
  }

  .stats-bar .container {
    grid-template-columns:repeat(2,1fr);
    gap:30px
  }

  .about-features {
    grid-template-columns:1fr
  }

  .about-intro-card {
    padding:24px
  }

  .about-stat-item {
    padding:14px 8px
  }

  .about-stat-item .asi-num {
    font-size:1.6rem
  }

  .form-row {
    grid-template-columns:1fr
  }

  .footer-top {
    grid-template-columns:1fr
  }

  .page-banner h1 {
    font-size:1.8rem
  }

  .news-card,.news-item {
    flex-direction:column;
    align-items:flex-start
  }

  .news-date {
    flex:0 0 auto;
    border-right:none;
    border-bottom:2px solid var(--border);
    padding-right:0;
    padding-bottom:12px;
    width:100%;
    display:flex;
    gap:12px;
    align-items:baseline
  }

  .news-date .nd-day {
    font-size:1.5rem
  }

  .news-arrow {
    display:none
  }

  .news-modal {
    padding:28px 20px
  }

  .news-modal h2 {
    font-size:1.2rem
  }

}

.fade-in-up {
  opacity:0;
  transform:translateY(30px);
  transition:opacity 0.6s ease,transform 0.6s ease;
  will-change:transform,opacity
}

.fade-in-up.visible {
  opacity:1;
  transform:translateY(0);
  will-change:auto
}

.scroll-top {
  position:fixed;
  bottom:30px;
  right:30px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:1.2rem;
  box-shadow:var(--shadow-md);
  opacity:0;
  pointer-events:none;
  transition:var(--transition);
  z-index:999;
  border:none;
  touch-action:manipulation
}

.scroll-top.visible {
  opacity:1;
  pointer-events:auto
}

.scroll-top:hover {
  transform:translateY(-4px)
}

.update-banner {
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%) translateY(-100px);
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  color:#fff;
  padding:10px 24px;
  border-radius:50px;
  font-size:0.9rem;
  font-weight:600;
  box-shadow:var(--shadow-lg);
  z-index:10000;
  transition:transform 0.3s ease;
  touch-action:manipulation
}

.update-banner.show {
  transform:translateX(-50%) translateY(0)
}


/* =========================================================
   页面补充样式：index（首屏关键样式）
   ========================================================= */

*,*::before,*::after {
  margin:0;
  padding:0;
  box-sizing:border-box
}

:root {
  --primary:#1E88E5;
  --primary-light:#42A5F5;
  --primary-dark:#1565C0;
  --accent:#29B6F6;
  --accent-light:#81D4FA;
  --text-dark:#1a1a2e;
  --text-body:#444;
  --text-light:#777;
  --bg-white:#ffffff;
  --transition:all 0.3s ease;
  --max-width:1200px
}

html {
  scroll-behavior:smooth;
  font-size:16px
}

body {
  font-family:"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
  color:var(--text-body);
  background:var(--bg-white);
  line-height:1.7;
  overflow-x:hidden
}

a {
  text-decoration:none;
  color:inherit;
  transition:var(--transition)
}

ul {
  list-style:none
}

img {
  max-width:100%;
  display:block
}

.container {
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 24px
}

.btn {
  display:inline-block;
  padding:12px 32px;
  border-radius:50px;
  font-size:.95rem;
  font-weight:600;
  cursor:pointer;
  border:none;
  transition:var(--transition);
  letter-spacing:.5px
}

.btn-primary {
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  color:#fff;
  box-shadow:0 4px 15px rgba(26,75,140,.3)
}

.btn-primary:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 25px rgba(26,75,140,.4)
}

.btn-outline {
  background:0 0;
  color:#fff;
  border:2px solid rgba(255,255,255,.6)
}

.btn-outline:hover {
  background:rgba(255,255,255,.1)
}

.btn-accent {
  background:#fff;
  color:var(--primary-dark);
  box-shadow:0 4px 20px rgba(0,0,0,.12)
}

.btn-accent:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 30px rgba(0,0,0,.18)
}

.navbar {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  box-shadow:0 2px 8px rgba(0,0,0,.06)
}

.navbar .container {
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:72px
}

.nav-logo {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1.25rem;
  font-weight:700;
  color:var(--primary)
}

.nav-logo .logo-icon {
  width:40px;
  height:40px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1.3rem;
  font-weight:800
}

.nav-logo span:last-child {
  font-size:1rem;
  color:var(--text-light);
  font-weight:400
}

.nav-menu {
  display:flex;
  gap:8px;
  align-items:center
}

.nav-menu a {
  padding:8px 18px;
  border-radius:8px;
  font-size:.95rem;
  font-weight:500;
  color:var(--text-body)
}

.nav-menu a.active,.nav-menu a:hover {
  color:var(--primary);
  background:rgba(26,75,140,.06)
}

.nav-toggle {
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  padding:4px
}

.nav-toggle span {
  width:24px;
  height:2px;
  background:var(--text-dark);
  border-radius:2px;
  transition:var(--transition)
}

.hero {
  min-height:100vh;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,var(--primary-dark),var(--primary) 50%,var(--primary-light));
  color:#fff
}

.hero::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:radial-gradient(circle at 20% 50%,rgba(0,180,216,.15) 0,transparent 50%),radial-gradient(circle at 80% 80%,rgba(72,202,228,.1) 0,transparent 50%)
}

.hero-bg-pattern {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  opacity:.05;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:50px 50px
}

.hero .container {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px
}

.hero-content {
  flex:1;
  max-width:600px
}

.hero-content h1 {
  font-size:3.2rem;
  font-weight:800;
  line-height:1.3;
  margin-bottom:20px;
  letter-spacing:1px
}

.hero-content h1 .highlight {
  background:linear-gradient(90deg,var(--accent-light),#fff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text
}

.hero-desc {
  font-size:1.15rem;
  opacity:.85;
  margin-bottom:32px;
  line-height:1.8
}

.hero-buttons {
  display:flex;
  gap:16px;
  flex-wrap:wrap
}

.hero-visual {
  flex:0 0 400px;
  position:relative
}

.hero-card {
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.15);
  border-radius:20px;
  padding:30px;
  position:relative
}

.hero-card .float-icon {
  position:absolute;
  width:60px;
  height:60px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.8rem;
  color:#fff
}

.hero-card .float-icon:nth-child(1) {
  background:linear-gradient(135deg,#00b4d8,#0077b6);
  top:-20px;
  left:20px;
  animation:float 3s ease-in-out infinite
}

.hero-card .float-icon:nth-child(2) {
  background:linear-gradient(135deg,#7209b7,#3a0ca3);
  top:-20px;
  right:20px;
  animation:float 3s ease-in-out infinite .5s
}

.hero-card .float-icon:nth-child(3) {
  background:linear-gradient(135deg,#f72585,#b5179e);
  bottom:-20px;
  left:50%;
  transform:translateX(-50%);
  animation:float 3s ease-in-out infinite 1s
}

.hero-card-inner {
  margin-top:50px;
  text-align:center
}

.hero-card-inner .big-num {
  font-size:3rem;
  font-weight:800;
  color:var(--accent-light)
}

.hero-card-inner .label {
  font-size:.9rem;
  opacity:.7;
  margin-top:4px
}

.hero-stats-row {
  display:flex;
  justify-content:space-around;
  margin-top:30px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1)
}

.hero-stat {
  text-align:center
}

.hero-stat .num {
  font-size:1.5rem;
  font-weight:700;
  color:var(--accent-light)
}

.hero-stat .lbl {
  font-size:.75rem;
  opacity:.6
}

@keyframes float {
  0%,100% {
    transform:translateY(0)
  }

  50% {
    transform:translateY(-10px)
  }

}

.stats-bar {
  background:var(--bg-white);
  padding:50px 0;
  box-shadow:0 4px 20px rgba(0,0,0,.08);
  margin-top:-40px;
  position:relative;
  z-index:10;
  border-radius:12px
}

.stats-bar .container {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  text-align:center
}

.stat-item .num {
  font-size:2.5rem;
  font-weight:800;
  color:var(--primary);
  line-height:1
}

.stat-item .num span {
  font-size:1.2rem;
  color:var(--accent)
}

.stat-item .label {
  margin-top:8px;
  color:var(--text-light);
  font-size:.9rem
}

@media(max-width:992px) {
  .hero .container {
    flex-direction:column;
    text-align:center;
    gap:30px
  }

  .hero-visual {
    flex:0 0 auto;
    width:100%;
    max-width:400px
  }

  .hero-content h1 {
    font-size:2.2rem
  }

  .hero-buttons {
    justify-content:center
  }

}

@media(max-width:768px) {
  .nav-menu {
    display:none
  }

  .nav-menu.open {
    display:flex;
    flex-direction:column;
    position:absolute;
    top:72px;
    left:0;
    right:0;
    background:var(--bg-white);
    padding:20px;
    box-shadow:0 4px 20px rgba(0,0,0,.08)
  }

  .nav-toggle {
    display:flex
  }

  .hero-content h1 {
    font-size:1.8rem
  }

  .hero-desc {
    font-size:1rem
  }

  .stats-bar .container {
    grid-template-columns:repeat(2,1fr)
  }

}

@media(max-width:480px) {
  .hero-content h1 {
    font-size:1.6rem
  }

  .hero-card {
    padding:20px
  }

}


/* =========================================================
   页面补充样式：services / contact（表单等）
   ========================================================= */

*,::before,::after {
  margin:0;
  padding:0;
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  font-size:16px
}

body {
  font-family:'Segoe UI','Microsoft YaHei','PingFang SC',sans-serif;
  color:#444;
  background:#fff;
  line-height:1.7;
  overflow-x:hidden;
  font-display:swap
}

a {
  text-decoration:none;
  color:inherit
}

.container {
  max-width:1200px;
  margin:0 auto;
  padding:0 24px
}

.navbar {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  box-shadow:0 2px 8px rgba(0,0,0,.06)
}

.navbar .container {
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:72px
}

.nav-logo {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1.25rem;
  font-weight:700;
  color:#1E88E5
}

.nav-logo .logo-icon {
  width:40px;
  height:40px;
  background:linear-gradient(135deg,#1E88E5,#29B6F6);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1.3rem;
  font-weight:800
}

.nav-menu {
  display:flex;
  gap:8px;
  align-items:center
}

.nav-menu a {
  padding:8px 18px;
  border-radius:8px;
  font-size:.95rem;
  font-weight:500;
  color:#444
}

.nav-menu a:hover,.nav-menu a.active {
  color:#1E88E5;
  background:rgba(26,75,140,.06)
}

.nav-toggle {
  display:none
}

.page-banner {
  padding:140px 0 60px;
  background:linear-gradient(135deg,#1565C0,#1E88E5,#42A5F5);
  color:#fff;
  text-align:center;
  position:relative
}

.page-banner h1 {
  font-size:2.5rem;
  font-weight:800
}

.page-banner .container {
  position:relative;
  z-index:2
}

footer {
  background:#1565C0;
  color:rgba(255,255,255,.7);
  padding:60px 0 0
}

@media(max-width:768px) {
  .page-banner h1 {
    font-size:1.8rem
  }

}


/* =========================================================
   页面补充样式：wechat
   ========================================================= */

.page-banner {
  background:linear-gradient(135deg,#1aad19,#07c160);
  padding:120px 0 60px;
  color:#fff;
  text-align:center
}

.page-banner h1 {
  font-size:2.5rem;
  font-weight:800;
  margin-bottom:12px
}

.breadcrumb {
  opacity:.8;
  font-size:.9rem
}

.breadcrumb a {
  color:rgba(255,255,255,.9);
  text-decoration:underline
}

.section {
  padding:80px 0
}

.section-title {
  text-align:center;
  margin-bottom:50px
}

.section-title h2 {
  font-size:2rem;
  color:#1E88E5;
  margin-bottom:12px;
  font-weight:700
}

.section-title p {
  color:#666;
  font-size:1.05rem;
  max-width:600px;
  margin:0 auto
}

/* 服务类型卡片 */        .service-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px
}

.svc-card {
  background:#fff;
  border-radius:16px;
  padding:32px 24px;
  box-shadow:0 4px 20px rgba(0,0,0,.06);
  transition:transform .3s,box-shadow .3s;
  text-align:center;
  border:1px solid #f0f0f0
}

.svc-card:hover {
  transform:translateY(-6px);
  box-shadow:0 12px 40px rgba(0,0,0,.1)
}

.svc-icon {
  font-size:3rem;
  margin-bottom:16px
}

.svc-card h3 {
  font-size:1.2rem;
  color:#1E88E5;
  margin-bottom:10px
}

.svc-card p {
  color:#666;
  line-height:1.7;
  font-size:.95rem
}

/* 配置流程 */        .steps {
  max-width:900px;
  margin:0 auto
}

.step-item {
  display:flex;
  gap:24px;
  margin-bottom:40px;
  position:relative
}

.step-item:last-child {
  margin-bottom:0
}

.step-num {
  flex-shrink:0;
  width:56px;
  height:56px;
  border-radius:50%;
  background:linear-gradient(135deg,#1aad19,#07c160);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  font-weight:700;
  position:relative;
  z-index:2
}

.step-item::after {
  content:'';
  position:absolute;
  left:27px;
  top:56px;
  bottom:-40px;
  width:2px;
  background:linear-gradient(#07c160,#e0e0e0);
  z-index:1
}

.step-item:last-child::after {
  display:none
}

.step-body {
  flex:1;
  background:#fff;
  border-radius:12px;
  padding:24px 28px;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
  border:1px solid #f0f0f0
}

.step-body h4 {
  font-size:1.15rem;
  color:#1E88E5;
  margin-bottom:10px
}

.step-body p,.step-body ul {
  color:#555;
  line-height:1.8;
  font-size:.95rem
}

.step-body ul {
  padding-left:18px;
  margin-top:8px
}

.step-body ul li {
  margin-bottom:6px
}

.step-body code {
  background:#f5f7fa;
  padding:2px 8px;
  border-radius:4px;
  color:#e74c3c;
  font-size:.88rem
}

/* 配置表格 */        .config-table {
  width:100%;
  border-collapse:collapse;
  margin-top:24px;
  font-size:.93rem
}

.config-table th,.config-table td {
  border:1px solid #e8e8e8;
  padding:12px 16px;
  text-align:left
}

.config-table th {
  background:#f5f7fa;
  font-weight:600;
  color:#1E88E5
}

.config-table td code {
  background:#fff3cd;
  padding:2px 8px;
  border-radius:3px;
  color:#856404;
  font-size:.85rem
}

.config-table tr:hover {
  background:#fafbfd
}

/* 优势 */        .advantage-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:24px
}

.adv-card {
  text-align:center;
  padding:36px 20px;
  border-radius:16px;
  background:linear-gradient(135deg,#f0fff4,#e6f9ed);
  border:1px solid #b7ebc8
}

.adv-icon {
  font-size:2.5rem;
  margin-bottom:14px
}

.adv-card h4 {
  color:#1E88E5;
  margin-bottom:8px;
  font-size:1.05rem
}

.adv-card p {
  color:#666;
  font-size:.92rem;
  line-height:1.7
}

.highlight-box {
  background:linear-gradient(135deg,#1aad19,#07c160);
  color:#fff;
  padding:32px;
  border-radius:16px;
  text-align:center;
  margin-top:40px
}

.highlight-box h3 {
  margin-bottom:12px;
  font-size:1.3rem
}

.highlight-box p {
  opacity:.9;
  font-size:1rem;
  line-height:1.8
}

@media(max-width:768px) {
  .step-item {
    flex-direction:column;
    gap:12px
  }

  .step-num {
    align-self:flex-start
  }

  .step-item::after {
    left:28px;
    top:56px;
    bottom:-12px
  }

}

/* =========================================================
   补充：导航滚动态（main.js 在页面下滚时给 .navbar 添加 .scrolled）
   ========================================================= */

.navbar.scrolled {
  box-shadow:0 4px 20px rgba(0,0,0,0.10);
  background:rgba(255,255,255,0.98)
}

/* 新闻卡片可点击 */
.news-card,.news-item {
  cursor:pointer
}