/* ====== CCD维修平台 v2.0 ====== */
:root {
  --primary: #1a1a2e;
  --secondary: #16213e;
  --accent: #e74c3c;
  --accent-light: #f0c040;
  --orange: #e67e22;
  --text: #333;
  --text-light: #666;
  --bg: #f5f7fa;
  --card-bg: #fff;
  --radius: 12px;
  --shadow: 0 4px 20px rgba(0,0,0,.08);
  --nav-height: 60px;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }

/* ====== Navigation ====== */
.navbar {
  position: fixed; top:0; left:0; right:0; z-index:1000;
  height: var(--nav-height); background: var(--primary);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.navbar .logo { color:#fff; font-size:18px; font-weight:600; text-decoration:none; }
.navbar .logo span { color: var(--accent-light); }
.navbar .nav-links { display:flex; align-items:center; gap:4px; }
.navbar .nav-links a {
  color: rgba(255,255,255,.8); text-decoration:none; font-size:14px;
  padding:6px 14px; border-radius:6px; transition: all .2s;
}
.navbar .nav-links a:hover { background: rgba(255,255,255,.1); color:#fff; }
.navbar .nav-links a.nav-biz {
  color: var(--accent-light); border:1px solid var(--accent-light);
  font-weight:600;
}
.navbar .nav-links a.nav-biz:hover { background: var(--accent-light); color: var(--primary); }
.navbar .nav-right { display:flex; align-items:center; gap:8px; }
.navbar .nav-right .btn-wechat {
  background: #07c160; color:#fff; border:none; padding:6px 16px;
  border-radius:20px; font-size:13px; cursor:pointer;
  transition: all .2s;
}
.navbar .nav-right .btn-wechat:hover { background: #06ad56; }

/* ====== Hero Banner ====== */
.hero-section { margin-top: var(--nav-height); position:relative; overflow:hidden; }
.hero-banner {
  position:relative; width:100%; height:420px; overflow:hidden;
  display:flex; transition: transform .5s ease;
}
.hero-slide {
  min-width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  padding:0 60px; position:relative;
}
.hero-slide-1 { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); }
.hero-slide-2 { background: linear-gradient(135deg, #1a1a2e 0%, #2c1810 50%, #4a2c0f 100%); }
.hero-content { text-align:center; z-index:2; }
.hero-content h1 { color:#fff; font-size:36px; font-weight:700; margin-bottom:12px; }
.hero-content p { color: rgba(255,255,255,.7); font-size:16px; max-width:600px; margin:0 auto 24px; }
.hero-content .btn-group { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.hero-btn {
  display:inline-block; padding:12px 32px; border-radius:8px;
  font-size:15px; font-weight:600; text-decoration:none; transition: all .2s;
}
.hero-btn-primary { background: var(--accent); color:#fff; }
.hero-btn-primary:hover { background: #c0392b; transform:translateY(-2px); }
.hero-btn-secondary { background: rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.3); }
.hero-btn-secondary:hover { background: rgba(255,255,255,.25); }
.hero-btn-gold { background: var(--accent-light); color: var(--primary); }
.hero-btn-gold:hover { background: #d4a830; transform:translateY(-2px); }
.hero-dots {
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:3;
}
.hero-dot {
  width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,.3);
  cursor:pointer; border:none; transition: all .2s;
}
.hero-dot.active { background: var(--accent-light); width:24px; border-radius:5px; }
.hero-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:40px; height:40px; border-radius:50%; background: rgba(0,0,0,.3);
  color:#fff; border:none; font-size:18px; cursor:pointer; display:flex;
  align-items:center; justify-content:center; transition: all .2s;
}
.hero-arrow:hover { background: rgba(0,0,0,.5); }
.hero-arrow.prev { left:16px; }
.hero-arrow.next { right:16px; }

/* ====== Stats Bar ====== */
.stats-bar {
  display:flex; justify-content:center; gap:40px; flex-wrap:wrap;
  padding:30px 20px; background: var(--card-bg); margin: -30px 24px 0;
  border-radius: var(--radius); box-shadow: var(--shadow); position:relative; z-index:5;
}
.stat-item { text-align:center; min-width:120px; }
.stat-item .num { font-size:28px; font-weight:800; color: var(--accent); }
.stat-item .num.gold { color: var(--accent-light); }
.stat-item .label { font-size:13px; color: var(--text-light); margin-top:4px; }

/* ====== Section Common ====== */
.section { padding:60px 24px; max-width:1200px; margin:0 auto; }
.section-title { text-align:center; font-size:26px; font-weight:700; margin-bottom:40px; }
.section-title .highlight { color: var(--accent); }

/* ====== Service Cards ====== */
.service-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:20px; }
.service-card {
  background: var(--card-bg); border-radius: var(--radius); padding:28px 24px;
  box-shadow: var(--shadow); transition: all .3s; text-align:center;
}
.service-card:hover { transform:translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,.12); }
.service-card .icon { font-size:36px; margin-bottom:12px; }
.service-card h3 { font-size:17px; margin-bottom:8px; }
.service-card p { font-size:13px; color: var(--text-light); line-height:1.7; }

/* ====== Biz Section (创业专区) ====== */
.biz-section { background: linear-gradient(180deg, #fff 0%, #fff8f0 100%); }
.biz-features { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:20px; margin-bottom:40px; }
.biz-feature {
  background: var(--card-bg); border-radius: var(--radius); padding:24px;
  box-shadow: var(--shadow); border-left: 4px solid var(--accent-light);
}
.biz-feature .icon { font-size:28px; margin-bottom:8px; }
.biz-feature h4 { font-size:15px; margin-bottom:6px; }
.biz-feature p { font-size:13px; color: var(--text-light); }

.biz-packages { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:24px; }
.package-card {
  background: var(--card-bg); border-radius: var(--radius); padding:32px 28px;
  box-shadow: var(--shadow); text-align:center; border:2px solid transparent;
  transition: all .3s; position:relative;
}
.package-card:hover { border-color: var(--accent-light); transform:translateY(-4px); }
.package-card.featured {
  border-color: var(--accent-light); background: linear-gradient(180deg,#fff8f0,#fff);
}
.package-card .badge {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background: var(--accent-light); color: var(--primary); font-size:12px;
  padding:3px 16px; border-radius:20px; font-weight:600;
}
.package-card .price { font-size:36px; font-weight:800; color: var(--accent); margin:16px 0; }
.package-card .price .unit { font-size:14px; color: var(--text-light); font-weight:400; }
.package-card ul { list-style:none; margin:16px 0 24px; }
.package-card ul li { padding:6px 0; font-size:14px; color: var(--text-light); }
.package-card ul li::before { content:"✅ "; }
.package-btn {
  display:inline-block; padding:10px 32px; border-radius:8px;
  font-size:14px; font-weight:600; text-decoration:none; transition: all .2s;
}
.package-btn-primary { background: var(--accent); color:#fff; }
.package-btn-primary:hover { background: #c0392b; }
.package-btn-gold { background: var(--accent-light); color: var(--primary); }
.package-btn-gold:hover { background: #d4a830; }

/* ====== Comparison Table ====== */
.compare-table { width:100%; border-collapse:collapse; margin:30px 0; border-radius:var(--radius); overflow:hidden; }
.compare-table th, .compare-table td { padding:14px 18px; text-align:left; font-size:14px; }
.compare-table thead th { background: var(--primary); color:#fff; font-weight:600; }
.compare-table tbody tr:nth-child(even) { background: #f8f9fa; }
.compare-table tbody tr:hover { background: #fff8f0; }
.compare-table .yes { color: #27ae60; }
.compare-table .no { color: #e74c3c; }

/* ====== Price Table ====== */
.price-table { width:100%; border-collapse:collapse; margin:30px 0; }
.price-table th, .price-table td { padding:14px 18px; text-align:center; font-size:14px; border:1px solid #e8e8e8; }
.price-table thead th { background: var(--primary); color:#fff; }
.price-table tbody tr:nth-child(even) { background: #f8f9fa; }
.price-table .highlight { background: #fff8f0; font-weight:600; }

/* ====== Technician Cards ====== */
.tech-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:20px; }
.tech-card {
  background: var(--card-bg); border-radius: var(--radius); padding:24px;
  box-shadow: var(--shadow); text-align:center; transition: all .2s;
}
.tech-card:hover { transform:translateY(-3px); }
.tech-card .avatar {
  width:64px; height:64px; border-radius:50%; background: linear-gradient(135deg, var(--primary), var(--secondary));
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-size:24px; font-weight:700; margin-bottom:12px;
}
.tech-card h4 { font-size:15px; }
.tech-card .tags { margin:8px 0; display:flex; gap:4px; flex-wrap:wrap; justify-content:center; }
.tech-card .tags span {
  background: #f0f0f0; padding:2px 10px; border-radius:10px; font-size:12px; color: var(--text-light);
}
.tech-card .rating { color: var(--accent-light); font-size:14px; }

/* ====== FAQ ====== */
.faq-list { max-width:800px; margin:0 auto; }
.faq-item {
  background: var(--card-bg); border-radius: var(--radius); margin-bottom:12px;
  box-shadow: var(--shadow); overflow:hidden;
}
.faq-q {
  padding:16px 20px; cursor:pointer; display:flex; justify-content:space-between;
  align-items:center; font-size:15px; font-weight:600;
}
.faq-q:hover { background: #f8f9fa; }
.faq-q .arrow { transition: transform .2s; font-size:12px; }
.faq-q.open .arrow { transform: rotate(180deg); }
.faq-a { padding:0 20px 16px; font-size:14px; color: var(--text-light); display:none; }
.faq-item.open .faq-a { display:block; }

/* ====== Footer ====== */
.footer { background: var(--primary); color: rgba(255,255,255,.6); padding:40px 24px; text-align:center; }
.footer a { color: var(--accent-light); text-decoration:none; }
.footer .contact { margin:12px 0; font-size:14px; }

/* ====== Floating Buttons ====== */
.floating-wechat {
  position:fixed; bottom:24px; right:24px; z-index:999;
  background: #07c160; color:#fff; width:56px; height:56px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 16px rgba(7,193,96,.4); cursor:pointer; border:none;
  font-size:24px; transition: all .2s;
}
.floating-wechat:hover { transform:scale(1.1); }
.floating-wechat::after {
  content:"微信咨询"; position:absolute; right:64px; background: rgba(0,0,0,.8);
  color:#fff; padding:6px 12px; border-radius:6px; font-size:12px;
  white-space:nowrap; opacity:0; transition: opacity .2s; pointer-events:none;
}
.floating-wechat:hover::after { opacity:1; }

/* ====== Tips/CTA Banner ====== */
.cta-banner {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-radius: var(--radius); padding:40px; text-align:center; margin:40px 0;
}
.cta-banner h3 { color:#fff; font-size:22px; margin-bottom:8px; }
.cta-banner p { color: rgba(255,255,255,.6); margin-bottom:20px; }

/* ====== Responsive ====== */
@media (max-width:768px) {
  .navbar .nav-links { display:none; }
  .navbar .nav-links.mobile-open { display:flex; flex-direction:column; position:absolute; top:var(--nav-height); left:0; right:0; background: var(--primary); padding:16px; gap:8px; }
  .menu-toggle { display:block !important; background:none; border:none; color:#fff; font-size:24px; cursor:pointer; }
  .hero-banner { height:320px; }
  .hero-content h1 { font-size:26px; }
  .hero-content p { font-size:14px; }
  .stats-bar { gap:20px; padding:20px 16px; margin:-30px 12px 0; }
  .stat-item { min-width:80px; }
  .stat-item .num { font-size:22px; }
  .section { padding:40px 16px; }
  .compare-table { font-size:12px; }
  .compare-table th,.compare-table td { padding:10px 8px; }
}
.menu-toggle { display:none; }