*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#1f2937;background:#fff;line-height:1.7}
a{color:inherit;text-decoration:none}
.container{width:min(1200px,92%);margin:0 auto}

/* 顶部联系栏 */
.topbar-contact{background:#1D80D5;color:#fff;font-size:13px;padding:6px 0}
.topbar-contact-inner{display:flex;justify-content:space-between;align-items:center}
.topbar-contact-right{display:flex;gap:16px}
.topbar-tel strong{font-weight:600}

/* 导航栏 */
.topbar{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08);position:sticky;top:0;z-index:100}
.topbar-main{display:flex;align-items:center;justify-content:space-between;padding:10px 0;position:relative}
.brand{display:flex;align-items:center;gap:0}
.brand a{display:flex;align-items:center;gap:12px}
.brand-logo{height:60px !important;width:auto;border-radius:8px !important;vertical-align:middle !important}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-name{font-size:24px;font-weight:700;color:#0f172a;letter-spacing:2px}
.brand-sub{font-size:11px;color:#64748b;font-weight:400;letter-spacing:3px;margin-top:3px}
.nav{display:flex;gap:6px;font-size:14px;align-items:center}
.nav a{padding:6px 14px;border-radius:6px;color:#333;transition:.2s}
.nav a:hover{color:#1D80D5;background:#f0f7ff}
.nav-register{background:#1D80D5 !important;color:#fff !important;font-weight:600}
.nav-register:hover{background:#1668b5 !important;color:#fff !important}
.menu-toggle{display:none;flex-direction:column;gap:4px;cursor:pointer;padding:8px}
.menu-toggle span{width:22px;height:2px;background:#333;border-radius:2px;transition:.3s}

/* 横幅区 */
.banner{background:linear-gradient(135deg,#0f172a 0%,#1D80D5 100%);color:#fff;padding:60px 0 40px}
.banner h1{font-size:36px;font-weight:700;line-height:1.3;margin-bottom:14px;max-width:700px}
.banner p{font-size:16px;opacity:.9;max-width:680px;line-height:1.8;margin-bottom:20px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 20px;border-radius:8px;font-weight:600;font-size:14px;transition:.2s;cursor:pointer;border:none}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:#22c55e;color:#fff}
.btn-primary:hover{background:#16a34a}
.btn-outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.btn-outline:hover{background:rgba(255,255,255,.1)}
.btn-lg{padding:12px 28px;font-size:15px}
.btn-sm{padding:7px 16px;font-size:13px}
.banner-stats{display:flex;gap:32px;margin-top:40px;padding-top:30px;border-top:1px solid rgba(255,255,255,.15);flex-wrap:wrap}
.banner-stat{text-align:center;min-width:100px}
.banner-stat-num{font-size:44px;font-weight:700;color:#22c55e;line-height:1}
.banner-stat-unit{font-size:18px;color:rgba(255,255,255,.7);margin-top:2px}
.banner-stat-label{font-size:13px;color:rgba(255,255,255,.6);margin-top:4px}

/* 通用区块 */
.section{padding:60px 0}
.section-title{font-size:30px;font-weight:700;color:#0f172a;text-align:center;margin-bottom:8px}
.section-subtitle{color:#64748b;text-align:center;margin-bottom:40px;font-size:15px}

/* 核心优势 */
.section-advantage{background:#f8fafc}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.advantage-card{background:#fff;border-radius:14px;padding:28px 20px;text-align:center;border:1px solid #e2e8f0;transition:.25s}
.advantage-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.09);border-color:#1D80D5}
.advantage-icon{font-size:36px;margin-bottom:14px}
.advantage-card h3{font-size:18px;color:#0f172a;margin-bottom:8px}
.advantage-card p{color:#64748b;font-size:14px}

/* 项目卡片 */
.section-projects{background:#fff}
.project-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.project-card{background:#fff;border-radius:14px;padding:22px;border:1px solid #e2e8f0;transition:.25s;display:flex;flex-direction:column}
.project-card:hover{border-color:#1D80D5;box-shadow:0 4px 16px rgba(0,0,0,.08)}
.project-card.paused{opacity:.6}
.project-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.project-badge{background:#e0f2fe;color:#0369a1;font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px}
.project-status{font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px}
.status-active{background:#dcfce7;color:#166534}
.status-paused{background:#fee2e2;color:#991b1b}
.project-card-title{font-size:18px;font-weight:700;color:#0f172a;margin-bottom:10px}
.project-card-info{display:flex;gap:16px;margin-bottom:10px;font-size:13px;color:#475569}
.project-card-info strong{color:#0f172a}
.project-card-desc{color:#64748b;font-size:13px;margin-bottom:16px;flex:1}
.project-note{color:#94a3b8;font-size:13px;margin-top:16px}

/* 文章卡片 */
.section-articles{background:#f8fafc}
.article-card{background:#fff;border-radius:14px;border:1px solid #e2e8f0;overflow:hidden;transition:.25s;display:flex;flex-direction:column}
.article-card:hover{border-color:#1D80D5;transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.08)}
.article-card-body{padding:24px;flex:1;display:flex;flex-direction:column}
.article-card h3{font-size:17px;color:#0f172a;margin-bottom:8px}
.article-card p{color:#64748b;font-size:14px;flex:1}
.article-more{color:#1D80D5;font-size:13px;font-weight:600;margin-top:12px}

/* FAQ */
.section-faq{background:#fff}
.faq-list{max-width:800px;margin:0 auto}
.faq-item{border-bottom:1px solid #e2e8f0;padding:18px 0}
.faq-item h4{font-size:16px;color:#0f172a;margin-bottom:6px}
.faq-item p{color:#475569;font-size:14px}

/* 联系 */
.section-contact{background:#f8fafc}
.contact-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.contact-card{background:#fff;border-radius:14px;padding:22px 16px;text-align:center;border:1px solid #e2e8f0}
.contact-card-icon{font-size:30px;margin-bottom:10px}
.contact-card h4{font-size:14px;color:#0f172a;margin-bottom:6px}
.contact-card p{color:#64748b;font-size:13px}

/* 底部 */
.footer{background:#0f172a;color:#cbd5e1;padding:50px 0 0}
.footer-inner{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr auto;gap:32px;padding-bottom:40px;align-items:start}
.footer-brand img{display:block;margin-bottom:8px}
.footer-brand p{font-size:13px;color:#94a3b8;line-height:1.8}
.footer-nav h4,.footer-contact h4{color:#fff;font-size:14px;margin-bottom:14px;font-weight:600}
.footer-nav ul{list-style:none}
.footer-nav li{margin-bottom:8px}
.footer-nav a,.footer-contact p{font-size:13px;color:#94a3b8;line-height:1.8}
.footer-nav a:hover{color:#1D80D5}
.footer-qr{text-align:center}
.footer-qr img{width:110px;height:110px;border-radius:8px;border:2px solid #1e293b}
.footer-qr p{font-size:12px;color:#64748b;margin-top:6px}
.footer-bottom{background:#060f1a;padding:16px 0;margin-top:0}
.footer-bottom p{font-size:12px;color:#64748b;text-align:center}
.footer-bottom a{color:#64748b}
.footer-bottom a:hover{color:#1D80D5}

/* 悬浮侧边栏 */
.float-sidebar{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:100;background:#0f172a;border-radius:8px 0 0 8px;overflow:hidden}
.float-sidebar-item{display:flex;align-items:center;padding:12px 14px;cursor:pointer;color:#fff;font-size:12px;transition:.2s;border-bottom:1px solid rgba(255,255,255,.08);white-space:nowrap}
.float-sidebar-item:last-child{border-bottom:none}
.float-sidebar-item:hover{background:#1D80D5}
.float-sidebar-item svg{width:18px;height:18px;margin-right:6px;fill:#fff;flex-shrink:0}

/* 悬浮联系 */
.float-contact{position:fixed;right:20px;bottom:80px;z-index:100}
.float-btn{width:52px;height:52px;background:#22c55e;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px rgba(34,197,94,.4);transition:.3s}
.float-btn:hover{transform:scale(1.08);background:#16a34a}
.float-btn svg{width:26px;height:26px;fill:#fff}
.float-qr{position:absolute;right:64px;bottom:0;background:#fff;border-radius:12px;padding:12px;box-shadow:0 4px 20px rgba(0,0,0,.15);display:none}
.float-qr.show{display:block}
.float-qr img{width:150px;height:150px;border-radius:8px}
.float-qr p{text-align:center;font-size:12px;color:#64748b;margin-top:8px}

/* 响应式 */
@media(max-width:1100px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .contact-cards{grid-template-columns:repeat(3,1fr)}
  .footer-inner{grid-template-columns:1fr 1fr 1fr;gap:24px}
  .footer-qr{grid-column:span 3;text-align:center}
}
@media(max-width:900px){
  .project-cards{grid-template-columns:repeat(2,1fr)}
  .banner h1{font-size:28px}
  .banner-stats{gap:20px}
  .banner-stat{min-width:80px}
  .banner-stat-num{font-size:34px}
  .footer-inner{grid-template-columns:1fr 1fr;gap:20px}
}
@media(max-width:700px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .project-cards{grid-template-columns:1fr}
  .contact-cards{grid-template-columns:repeat(2,1fr)}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;padding:12px;gap:4px;box-shadow:0 4px 12px rgba(0,0,0,.1)}
  .nav.show{display:flex}
  .menu-toggle{display:flex}
  .banner{padding:40px 0 30px}
  .banner h1{font-size:24px}
  .banner-stats{grid-template-columns:repeat(2,1fr);gap:16px}
  .footer-inner{grid-template-columns:1fr}
  .footer-qr{grid-column:1}
  .float-sidebar{display:none}
  .section{padding:40px 0}
}

/* 项目合作网格（新17项目样式） */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 28px;
}
.proj-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  padding: 22px 18px 18px;
  transition: all 0.25s;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.proj-card:hover {
  border-color: #1D80D5;
  box-shadow: 0 8px 28px rgba(29,128,213,0.13);
  transform: translateY(-3px);
}
.proj-card-icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: contain;
  margin-bottom: 12px;
  background: #f8fafc;
  padding: 4px;
  border: 1px solid #e2e8f0;
}
.proj-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}
.proj-card-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 12px;
}
.proj-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 600;
}
.tag-ditu { background: #fef3c7; color: #92400e; }
.tag-wangtu { background: #dbeafe; color: #1e40af; }
.tag-api { background: #dcfce7; color: #166534; }
.tag-hot { background: #fee2e2; color: #991b1b; }
.proj-card-desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.6;
  flex: 1;
  margin-bottom: 14px;
}
.proj-card-cta {
  display: inline-block;
  width: 100%;
  padding: 8px 0;
  background: linear-gradient(135deg, #1D80D5, #3b82f6);
  color: #fff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.2s;
}
.proj-card-cta:hover {
  background: linear-gradient(135deg, #1668b5, #2563eb);
  color: #fff;
}
.proj-section-note {
  font-size: 13px;
  color: #94a3b8;
  margin-top: 16px;
}
.proj-section-desc {
  font-size: 15px;
  color: #64748b;
  margin-top: 12px;
}