/* ===== 全局重置 & 基础 ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:#f8faff;color:#1a1f2e;line-height:1.6;transition:background .4s,color .4s}
body.dark-mode{background:#0b0f1a;color:#e8ecf4}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{display:block;max-width:100%;height:auto}

/* ===== 容器 & 布局 ===== */
.container{max-width:1240px;margin:0 auto;padding:0 24px;width:100%}
.section{padding:80px 0}
.section-title{font-size:2.2rem;font-weight:700;margin-bottom:12px;letter-spacing:-.5px;line-height:1.2}
.section-subtitle{font-size:1.1rem;color:#6b7280;margin-bottom:48px;max-width:640px}
body.dark-mode .section-subtitle{color:#9ca3af}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.text-center{text-align:center}
.flex-center{display:flex;align-items:center;justify-content:center}
.gap-16{gap:16px}
.gap-24{gap:24px}
.mt-16{margin-top:16px}
.mt-32{margin-top:32px}
.mb-16{margin-bottom:16px}
.mb-32{margin-bottom:32px}
.relative{position:relative}
.overflow-hidden{overflow:hidden}
.rounded-full{border-radius:9999px}
.shadow-soft{box-shadow:0 8px 30px rgba(0,0,0,.05)}
body.dark-mode .shadow-soft{box-shadow:0 8px 30px rgba(0,0,0,.3)}

/* ===== 品牌背景 ===== */
.bg-gradient-brand{background:linear-gradient(135deg,#f0f5ff 0%,#e8eefb 50%,#f5f8ff 100%)}
body.dark-mode .bg-gradient-brand{background:linear-gradient(135deg,#0a0e1a 0%,#111827 50%,#0f1729 100%)}

/* ===== 按钮 ===== */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border-radius:60px;font-weight:600;font-size:1rem;border:none;cursor:pointer;transition:all .3s;background:linear-gradient(135deg,#1e3a5f,#2b4b7a);color:#fff;box-shadow:0 8px 24px rgba(30,58,95,.25)}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(30,58,95,.35)}
.btn-outline{background:transparent;border:2px solid #1e3a5f;color:#1e3a5f;box-shadow:none}
body.dark-mode .btn-outline{border-color:#7a9bcb;color:#7a9bcb}

/* ===== 毛玻璃卡片 ===== */
.glass{background:rgba(255,255,255,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.3);border-radius:20px;box-shadow:0 8px 32px rgba(0,0,0,.06)}
body.dark-mode .glass{background:rgba(15,23,42,.6);border-color:rgba(255,255,255,.08)}

/* ===== 普通卡片 ===== */
.card{border-radius:24px;padding:32px;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.04);transition:all .4s;border:1px solid rgba(0,0,0,.02)}
body.dark-mode .card{background:#121827;border-color:rgba(255,255,255,.04)}
.card:hover{box-shadow:0 16px 48px rgba(0,0,0,.08);transform:translateY(-4px)}
body.dark-mode .card:hover{box-shadow:0 16px 48px rgba(0,0,0,.4)}

/* ===== 渐变文字 ===== */
.gradient-text{background:linear-gradient(135deg,#1e3a5f,#4a7bbf);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ===== 滚动动画 ===== */
.fade-in{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ===== 暗色模式按钮悬停 ===== */
#darkModeToggle:hover{background:rgba(30,58,95,.1)}
body.dark-mode #darkModeToggle:hover{background:rgba(255,255,255,.1)}

/* ===== 导航链接悬停 ===== */
#mainNav a:hover{background:rgba(30,58,95,.08);color:#1e3a5f}
body.dark-mode #mainNav a:hover{background:rgba(255,255,255,.08);color:#7a9bcb}

/* ===== Hero 区域标签 ===== */
#hero span[style*="background:rgba(30,58,95,.1)"]{transition:background .3s,transform .3s}
#hero span[style*="background:rgba(30,58,95,.1)"]:hover{background:rgba(30,58,95,.2);transform:translateY(-2px)}

/* ===== 品牌数据块 ===== */
#brand .grid-2 > div:first-child > div:last-child > div{transition:transform .3s,box-shadow .3s}
#brand .grid-2 > div:first-child > div:last-child > div:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.08)}

/* ===== 时间轴圆点 ===== */
#story .flex-center > div svg{transition:transform .3s}
#story .flex-center > div:hover svg{transform:scale(1.15)}

/* ===== 企业文化卡片图标 ===== */
#culture .card svg{transition:transform .3s}
#culture .card:hover svg{transform:scale(1.1) rotate(-5deg)}

/* ===== 团队成员头像 ===== */
#team .card svg{transition:transform .3s,box-shadow .3s}
#team .card:hover svg{transform:scale(1.05);box-shadow:0 8px 24px rgba(30,58,95,.15)}

/* ===== 产品中心图标 ===== */
#products .card svg{transition:transform .3s}
#products .card:hover svg{transform:scale(1.1) rotate(5deg)}

/* ===== 优势卡片 ===== */
#advantages .card{transition:all .4s}
#advantages .card:hover{background:rgba(30,58,95,.02)}
body.dark-mode #advantages .card:hover{background:rgba(255,255,255,.02)}

/* ===== 行业应用卡片 ===== */
#industry .card{transition:all .3s}
#industry .card:hover{background:rgba(30,58,95,.04);transform:translateY(-3px)}
body.dark-mode #industry .card:hover{background:rgba(255,255,255,.04)}

/* ===== 统计数字 ===== */
.stat-number{transition:color .3s}
.stat-number.visible{color:#1e3a5f}

/* ===== 案例卡片 ===== */
#cases .card svg{transition:transform .3s}
#cases .card:hover svg{transform:scale(1.02)}

/* ===== 合作客户标签 ===== */
#clients > div > div > div{transition:all .3s;cursor:default}
#clients > div > div > div:hover{background:rgba(30,58,95,.1)!important;transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.06)}

/* ===== 评价卡片 ===== */
#testimonials .card{transition:all .4s}
#testimonials .card:hover{background:rgba(30,58,95,.02);transform:translateY(-3px)}
body.dark-mode #testimonials .card:hover{background:rgba(255,255,255,.02)}

/* ===== 新闻卡片 ===== */
#news .card svg{transition:transform .3s}
#news .card:hover svg{transform:scale(1.02)}

/* ===== 相关文章卡片 ===== */
#related-articles .card{transition:all .3s}
#related-articles .card:hover{background:rgba(30,58,95,.02);transform:translateX(4px)}
body.dark-mode #related-articles .card:hover{background:rgba(255,255,255,.02)}

/* ===== FAQ 图标旋转 ===== */
.faq-icon{transition:transform .4s ease}

/* ===== 使用指南数字 ===== */
#howto .card:hover div:first-child{opacity:.6!important;transform:scale(1.1);transition:all .3s}

/* ===== 联系信息卡片 ===== */
#contact .card{transition:all .3s}
#contact .card:hover{background:rgba(30,58,95,.02)}
body.dark-mode #contact .card:hover{background:rgba(255,255,255,.02)}

/* ===== 输入框聚焦 ===== */
input:focus,textarea:focus{border-color:#1e3a5f!important;box-shadow:0 0 0 3px rgba(30,58,95,.1)}
body.dark-mode input:focus,body.dark-mode textarea:focus{border-color:#7a9bcb!important;box-shadow:0 0 0 3px rgba(122,155,203,.15)}

/* ===== 友情链接 ===== */
#friends a{transition:all .3s}
#friends a:hover{background:rgba(30,58,95,.1)!important;color:#1e3a5f!important;transform:translateY(-2px)}

/* ===== 网站地图 ===== */
#sitemap ul li{transition:color .3s;cursor:default}
#sitemap ul li:hover{color:#1e3a5f}
body.dark-mode #sitemap ul li:hover{color:#7a9bcb}

/* ===== 页脚链接 ===== */
#footer ul li{transition:color .3s;cursor:pointer}
#footer ul li:hover{color:#fff}

/* ===== 返回顶部按钮 ===== */
#backToTopBtn{transition:all .3s}
#backToTopBtn:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.3)}

/* ===== 搜索容器 ===== */
#searchContainer input:focus{outline:none;border-color:#1e3a5f}

/* ===== 移动端菜单 ===== */
#mobileNav{transition:all .4s ease}

/* ===== 响应式 ===== */
@media(max-width:1024px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr}
  .section-title{font-size:1.9rem}
}
@media(max-width:768px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .section{padding:56px 0}
  .section-title{font-size:1.6rem}
  .container{padding:0 16px}
  #hero .container{grid-template-columns:1fr;gap:32px;text-align:center}
  #hero .container > div:first-child{order:2}
  #hero .container > div:last-child{order:1;min-height:200px}
  #hero h1{font-size:2.2rem!important}
  #hero p{margin-left:auto;margin-right:auto}
  #hero .flex-center{justify-content:center}
  #brand .grid-2{text-align:center}
  #brand .grid-2 > div:first-child > div:last-child{justify-content:center}
  #story .flex-center{gap:16px!important}
  #team .grid-4{grid-template-columns:repeat(2,1fr)}
  #advantages .card{flex-direction:column!important;text-align:center!important}
  #advantages .card svg{margin-bottom:8px}
  #related-articles .card{flex-direction:column!important;text-align:center!important}
  #related-articles .card svg{margin-bottom:12px}
  #contact .grid-2{grid-template-columns:1fr}
  #footer .grid-4{grid-template-columns:repeat(2,1fr);gap:32px}
  #footer .container > div:last-child{flex-direction:column;gap:8px;text-align:center}
  #sitemap .grid-4{grid-template-columns:repeat(2,1fr);text-align:center}
  #mainNav{overflow-x:auto;flex-wrap:nowrap;gap:4px}
  #mainNav a{font-size:.8rem;padding:6px 12px}
}
@media(max-width:480px){
  #team .grid-4{grid-template-columns:1fr}
  #footer .grid-4{grid-template-columns:1fr;text-align:center}
  #sitemap .grid-4{grid-template-columns:1fr}
  #hero h1{font-size:1.8rem!important}
  .btn{padding:12px 24px;font-size:.9rem}
}