/* 全局样式重置与基础 */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans SC",sans-serif;background:#f8fafc;color:#1e293b;line-height:1.7;scroll-behavior:smooth}
a{color:#1a73e8;text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%;height:auto;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
/* 暗黑模式 */
body.dark{background:#0f172a;color:#e2e8f0}
body.dark a{color:#60a5fa}
body.dark .header,body.dark .footer,body.dark .card,body.dark .faq-item,body.dark .article-card,body.dark .howto-step{background:#1e293b;color:#e2e8f0}
body.dark .header{background:#1e293b;box-shadow:0 2px 10px rgba(0,0,0,0.3)}
body.dark .banner{background:linear-gradient(135deg,#0f172a,#1e293b)}
/* 导航 */
.header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 2px 10px rgba(0,0,0,0.08);transition:background 0.3s}
body.dark .header{background:rgba(30,41,59,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{font-size:28px;font-weight:800;color:#1a73e8;display:flex;align-items:center;gap:8px}
.logo svg{width:36px;height:36px}
.nav{display:flex;gap:24px;align-items:center}
.nav a{color:#475569;font-size:15px;font-weight:500;transition:color 0.2s}
.nav a:hover{color:#1a73e8}
.nav-toggle{display:none;background:none;border:none;font-size:28px;cursor:pointer;color:#1e293b}
body.dark .nav-toggle{color:#e2e8f0}
.mobile-menu{display:none;position:fixed;top:70px;left:0;right:0;background:rgba(255,255,255,0.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:20px;box-shadow:0 10px 20px rgba(0,0,0,0.1);flex-direction:column;gap:16px;z-index:999}
body.dark .mobile-menu{background:rgba(30,41,59,0.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.mobile-menu.active{display:flex}
.mobile-menu a{font-size:18px;padding:8px 0;border-bottom:1px solid #e2e8f0}
body.dark .mobile-menu a{border-color:#334155}
/* 面包屑 */
.breadcrumb{padding:12px 0;font-size:14px;color:#64748b;background:#f1f5f9}
body.dark .breadcrumb{background:#1e293b;color:#94a3b8}
.breadcrumb a{color:#1a73e8}
.breadcrumb span{margin:0 6px}
/* Banner 渐变+毛玻璃 */
.banner{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:80px 0 60px;text-align:center;position:relative;overflow:hidden}
.banner::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,transparent 60%);animation:float 12s infinite ease-in-out;pointer-events:none}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-30px)}}
.banner h1{font-size:44px;font-weight:800;margin-bottom:16px;line-height:1.2;position:relative;z-index:1}
.banner p{font-size:20px;max-width:700px;margin:0 auto 30px;opacity:0.9;position:relative;z-index:1}
.banner .btn{display:inline-block;background:rgba(255,255,255,0.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;padding:14px 36px;border-radius:50px;font-size:18px;font-weight:600;border:1px solid rgba(255,255,255,0.3);transition:transform 0.2s,box-shadow 0.2s,background 0.2s}
.banner .btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.2);background:rgba(255,255,255,0.35)}
.banner-slider{position:relative;min-height:300px}
.banner-slide{animation:fadeIn 0.8s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
/* 通用标题 */
.section-title{text-align:center;margin-bottom:48px}
.section-title h2{font-size:32px;font-weight:700;position:relative;display:inline-block;padding-bottom:12px}
.section-title h2::after{content:'';display:block;width:60px;height:4px;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:2px;margin:8px auto 0}
.section-title p{color:#64748b;margin-top:12px;font-size:16px}
/* 卡片 毛玻璃效果 */
.card{background:rgba(255,255,255,0.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:16px;padding:24px;box-shadow:0 4px 15px rgba(0,0,0,0.06);border:1px solid rgba(255,255,255,0.3);transition:transform 0.3s,box-shadow 0.3s}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,0.1)}
body.dark .card{background:rgba(30,41,59,0.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:rgba(255,255,255,0.05)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}
.grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:24px}
@media(max-width:768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
/* 品牌介绍等区块 */
.section{padding:60px 0}
.bg-white{background:#fff}
body.dark .bg-white{background:#1e293b}
.bg-light{background:#f1f5f9}
body.dark .bg-light{background:#0f172a}
/* 关于我们 */
.about-content{display:flex;gap:40px;align-items:center}
.about-text{flex:1}
.about-text p{margin-bottom:16px;font-size:16px}
.about-svg{flex:1;max-width:400px}
@media(max-width:768px){.about-content{flex-direction:column}}
/* 文章卡片 */
.article-card{background:rgba(255,255,255,0.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:16px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,0.06);border:1px solid rgba(255,255,255,0.3);transition:transform 0.3s,box-shadow 0.3s}
.article-card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,0.1)}
body.dark .article-card{background:rgba(30,41,59,0.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:rgba(255,255,255,0.05)}
.article-card .body{padding:20px}
.article-card .body h3{font-size:18px;margin-bottom:8px}
.article-card .body .meta{font-size:13px;color:#94a3b8;margin-bottom:10px}
.article-card .body p{font-size:14px;color:#475569;margin-bottom:12px}
body.dark .article-card .body p{color:#cbd5e1}
.article-card .body a{font-weight:600;font-size:14px}
/* FAQ */
.faq-item{border-bottom:1px solid #e2e8f0;padding:16px 0;cursor:pointer}
body.dark .faq-item{border-color:#334155}
.faq-question{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:16px}
.faq-question .icon{transition:transform 0.3s;font-size:20px}
.faq-item.open .faq-question .icon{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.4s ease;padding-top:0}
.faq-item.open .faq-answer{max-height:600px;padding-top:12px}
.faq-answer p{color:#475569;font-size:15px;line-height:1.8}
body.dark .faq-answer p{color:#cbd5e1}
/* HowTo */
.howto-step{background:rgba(255,255,255,0.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-left:4px solid #667eea;padding:20px 24px;margin-bottom:16px;border-radius:0 16px 16px 0;border:1px solid rgba(255,255,255,0.3);transition:transform 0.3s}
.howto-step:hover{transform:translateX(4px)}
body.dark .howto-step{background:rgba(30,41,59,0.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:rgba(255,255,255,0.05)}
.howto-step h4{font-size:18px;margin-bottom:6px}
.howto-step p{font-size:15px;color:#475569}
body.dark .howto-step p{color:#cbd5e1}
/* 联系方式 */
.contact-info{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}
.contact-item{text-align:center;padding:20px;flex:1;min-width:180px}
.contact-item svg{margin:0 auto 12px}
.contact-item h4{font-size:16px;margin-bottom:6px}
.contact-item p{color:#475569;font-size:14px}
body.dark .contact-item p{color:#cbd5e1}
/* 页脚 */
.footer{background:#1e293b;color:#cbd5e1;padding:40px 0 20px;font-size:14px}
.footer .grid-4{gap:30px}
.footer h4{color:#fff;margin-bottom:12px;font-size:16px}
.footer a{color:#94a3b8}
.footer a:hover{color:#60a5fa}
.footer-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.footer-links a{font-size:13px}
.footer-bottom{border-top:1px solid #334155;margin-top:30px;padding-top:20px;text-align:center;font-size:13px}
/* 返回顶部 */
.back-top{position:fixed;bottom:40px;right:40px;width:50px;height:50px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:50%;font-size:24px;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,0.2);z-index:999;transition:opacity 0.3s,transform 0.3s}
.back-top.show{display:flex}
.back-top:hover{transform:scale(1.1);box-shadow:0 6px 20px rgba(0,0,0,0.3)}
/* 搜索 */
.search-box{display:flex;align-items:center;gap:8px;margin:20px 0}
.search-box input{flex:1;padding:12px 16px;border:1px solid #cbd5e1;border-radius:8px;font-size:16px;outline:none;background:rgba(255,255,255,0.7);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.search-box input:focus{border-color:#667eea}
body.dark .search-box input{background:rgba(30,41,59,0.7);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-color:#334155;color:#e2e8f0}
.search-box button{padding:12px 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:16px;font-weight:600;transition:transform 0.2s}
.search-box button:hover{transform:scale(1.02)}
.search-results{margin-top:20px}
/* 数字动画 */
.stats{display:flex;justify-content:space-around;flex-wrap:wrap;gap:20px;padding:40px 0}
.stat-item{text-align:center}
.stat-number{font-size:40px;font-weight:800;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-label{font-size:16px;color:#64748b;margin-top:4px}
/* 案例评价 */
.testimonial-card{background:rgba(255,255,255,0.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:16px;padding:24px;box-shadow:0 4px 15px rgba(0,0,0,0.06);text-align:center;border:1px solid rgba(255,255,255,0.3);transition:transform 0.3s}
.testimonial-card:hover{transform:translateY(-4px)}
body.dark .testimonial-card{background:rgba(30,41,59,0.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:rgba(255,255,255,0.05)}
.testimonial-card .avatar{margin:0 auto 12px;width:60px;height:60px;border-radius:50%;background:#e2e8f0;display:flex;align-items:center;justify-content:center;font-size:28px;color:#667eea}
.testimonial-card p{font-style:italic;color:#475569;margin-bottom:8px}
body.dark .testimonial-card p{color:#cbd5e1}
.testimonial-card .author{font-weight:600}
/* 响应式 */
@media(max-width:768px){
    .nav a{display:none}
    .nav-toggle{display:block}
    .banner h1{font-size:28px}
    .banner p{font-size:16px}
    .section-title h2{font-size:26px}
    .about-svg{max-width:100%}
}
@media(min-width:769px){
    .mobile-menu{display:none!important}
}
/* 滚动动画 */
.fade-up{opacity:0;transform:translateY(30px);transition:opacity 0.6s ease,transform 0.6s ease}
.fade-up.visible{opacity:1;transform:translateY(0)}
/* 图片占位 */
.svg-placeholder{background:#e2e8f0;border-radius:8px;display:flex;align-items:center;justify-content:center;min-height:160px;color:#94a3b8;font-size:14px}