*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --primary-light:#eff6ff;
  --text:#1e293b;
  --text-light:#64748b;
  --bg:#ffffff;
  --bg-gray:#f8fafc;
  --border:#e2e8f0;
  --radius:12px;
  --max-width:1200px;
}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 20px;
}

.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.header .container{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
.logo{
  font-size:24px;font-weight:700;
  color:var(--primary);text-decoration:none;
  letter-spacing:2px;
}
.nav{display:flex;gap:28px}
.nav a{
  font-size:15px;color:var(--text);
  text-decoration:none;
  transition:color 0.2s;
}
.nav a:hover{color:var(--primary)}

.hero{
  padding:140px 0 100px;
  text-align:center;
  background:linear-gradient(180deg,var(--primary-light) 0%,var(--bg) 100%);
}
.hero-title{
  font-size:clamp(28px,5vw,48px);
  font-weight:800;line-height:1.3;
  margin-bottom:20px;
}
.highlight{
  color:var(--primary);
  position:relative;
}
.highlight::after{
  content:'';
  position:absolute;bottom:2px;left:0;right:0;
  height:8px;
  background:rgba(37,99,235,0.15);
  border-radius:4px;
}
.hero-subtitle{
  font-size:clamp(15px,2.5vw,18px);
  color:var(--text-light);
  max-width:600px;
  margin:0 auto 32px;
}
.hero-tags{
  display:flex;gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.hero-tags span{
  padding:6px 18px;
  font-size:13px;color:var(--primary);
  background:var(--primary-light);
  border-radius:20px;
  font-weight:500;
}

section{padding:80px 0}
.section-title{
  font-size:clamp(22px,4vw,32px);
  font-weight:700;text-align:center;
  margin-bottom:12px;
}
.section-desc{
  font-size:15px;color:var(--text-light);
  text-align:center;
  max-width:560px;
  margin:0 auto 48px;
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:20px;
}
.service-card{
  background:var(--bg-gray);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px 24px;
  transition:box-shadow 0.3s,transform 0.3s;
}
.service-card:hover{
  box-shadow:0 8px 30px rgba(0,0,0,0.08);
  transform:translateY(-2px);
}
.service-icon{margin-bottom:16px}
.service-card h3{
  font-size:17px;font-weight:600;
  margin-bottom:10px;
}
.service-card p{
  font-size:14px;color:var(--text-light);
  line-height:1.7;
}

.about{background:var(--bg-gray)}
.about-content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:start;
}
.about-text p{
  font-size:15px;color:var(--text-light);
  line-height:1.9;
  margin-bottom:16px;
}
.about-values{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.value-item{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  text-align:center;
}
.value-item strong{
  display:block;
  font-size:15px;color:var(--primary);
  margin-bottom:4px;
}
.value-item span{
  font-size:13px;color:var(--text-light);
}

.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:20px;
}
.contact-item{
  background:var(--bg-gray);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
}
.contact-label{
  display:block;
  font-size:13px;color:var(--text-light);
  margin-bottom:6px;
}
.contact-value{
  font-size:15px;font-weight:500;
  color:var(--text);
}

.footer{
  background:#0f172a;
  color:#cbd5e1;
  padding:60px 0 0;
}
.footer-top{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:40px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.footer-col h4{
  font-size:15px;font-weight:600;
  color:#f1f5f9;
  margin-bottom:16px;
}
.footer-col p{
  font-size:13px;line-height:1.8;
}
.footer-col a{
  display:block;
  font-size:13px;color:#94a3b8;
  text-decoration:none;
  margin-bottom:10px;
  transition:color 0.2s;
}
.footer-col a:hover{color:#e2e8f0}
.footer-col-pending .pending-tag{
  display:inline-block;
  padding:3px 10px;
  font-size:12px;
  color:#64748b;
  background:rgba(255,255,255,0.06);
  border-radius:4px;
  margin:0 4px 8px 0;
}
.footer-bottom{
  padding:24px 0;
  font-size:12px;color:#475569;
  text-align:center;
  line-height:2;
}

@media(max-width:768px){
  .nav{display:none}
  .hero{padding:110px 0 70px}
  section{padding:60px 0}
  .about-content{
    grid-template-columns:1fr;
    gap:32px;
  }
  .footer-top{
    grid-template-columns:1fr 1fr;
    gap:32px;
  }
}

@media(max-width:480px){
  .service-grid{
    grid-template-columns:1fr;
  }
  .about-values{
    grid-template-columns:1fr;
  }
  .footer-top{
    grid-template-columns:1fr;
  }
}