/* ============================================================
   香子湾科技 · 全站共享样式 (css/common.css)
   用于富页脚、技术生态条、通用卡片等跨页面复用模块
   主色 #2563eb / 浅蓝 #e8f0ff / 深色页脚 #0f172a
   ============================================================ */

/* ---------- 站头品牌（logo 图标 + 文字） ---------- */
.logo-text {
    color: #0f172a;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.logo-text span { color: #2563eb; }

/* ---------- 富页脚 ---------- */
.site-footer {
    background: #0f172a;
    color: #cbd5e1;
    text-align: left;
    padding: 0;
    width: 100%;
    font-size: 14px;
}
.site-footer .ft-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 24px 28px;
}
.site-footer .ft-cols {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1fr 1.3fr;
    gap: 32px;
}
.site-footer .ft-logo {
    height: 34px;
    width: auto;
    display: block;
    margin-bottom: 16px;
    border-radius: 6px;
}
.site-footer .ft-brand-name {
    font-size: 20px;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 14px;
}
.site-footer .ft-brand-name span { color: #60a5fa; }
.site-footer .ft-slogan {
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.8;
    max-width: 280px;
    margin: 0 0 18px;
}
.site-footer .ft-col h4 {
    color: #f8fafc;
    font-size: 15px;
    margin: 4px 0 16px;
    font-weight: 600;
}
.site-footer .ft-col ul {
    list-style: none;
}
.site-footer .ft-col li {
    margin-bottom: 10px;
    font-size: 13px;
    color: #94a3b8;
}
.site-footer .ft-col li a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.2s ease;
}
.site-footer .ft-col li a:hover {
    color: #60a5fa;
}
.site-footer .ft-contact li {
    line-height: 1.6;
}
.site-footer .ft-btn {
    display: inline-block;
    margin-top: 14px;
    background: #2563eb;
    color: #fff;
    text-decoration: none;
    padding: 9px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.2s ease;
}
.site-footer .ft-btn:hover {
    background: #1d4ed8;
}
.site-footer .ft-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.site-footer .ft-bottom p {
    margin: 0;
    color: #64748b;
    font-size: 12px;
}

/* ---------- 技术生态 / 保障条 (首页等复用) ---------- */
.eco-strip {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 28px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
.eco-strip .eco-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.eco-strip .eco-badge {
    background: #f1f5f9;
    color: #475569;
    border-radius: 20px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
}
.eco-strip .eco-note {
    color: #64748b;
    font-size: 13px;
    max-width: 360px;
    line-height: 1.7;
}

/* ---------- 通用：卖点小标签 ---------- */
.hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}
.hero-chips span {
    background: #e8f0ff;
    color: #2563eb;
    border-radius: 20px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
}

/* ---------- 首页新增区块通用栅格 ---------- */
.build-types,
.adv-grid2,
.industry-grid,
.testi-grid,
.academy-grid {
    display: grid;
    gap: 24px;
}
.build-types { grid-template-columns: repeat(3, 1fr); }
.adv-grid2 { grid-template-columns: repeat(3, 1fr); }
.industry-grid { grid-template-columns: repeat(3, 1fr); }
.testi-grid { grid-template-columns: repeat(3, 1fr); }
.academy-grid { grid-template-columns: repeat(3, 1fr); }

/* 建站类型卡 */
.build-card {
    background: #fff;
    border-radius: 12px;
    padding: 30px 26px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.build-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.12);
}
.build-card .ic {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: #e8f0ff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.build-card .ic svg { width: 26px; height: 26px; fill: #2563eb; }
.build-card h3 { font-size: 18px; margin-bottom: 8px; color: #0f172a; }
.build-card p { font-size: 14px; color: #64748b; }

/* 核心优势卡 */
.adv-card {
    background: #fff;
    border-radius: 12px;
    padding: 28px 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    text-align: center;
}
.adv-card .ic {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #e8f0ff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.adv-card .ic svg { width: 28px; height: 28px; fill: #2563eb; }
.adv-card h4 { font-size: 16px; margin-bottom: 8px; color: #0f172a; }
.adv-card p { font-size: 13px; color: #64748b; }

/* 行业方案卡 */
.industry-card {
    background: #fff;
    border-radius: 12px;
    padding: 28px 26px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    border-top: 3px solid #2563eb;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.industry-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.12);
}
.industry-card h3 { font-size: 18px; margin-bottom: 10px; color: #0f172a; }
.industry-card p { font-size: 14px; color: #64748b; line-height: 1.7; }
.industry-card .ind-tag {
    display: inline-block;
    font-size: 12px;
    color: #2563eb;
    background: #e8f0ff;
    padding: 3px 12px;
    border-radius: 20px;
    margin-bottom: 14px;
}

/* 客户评价卡 */
.testi-card {
    background: #fff;
    border-radius: 12px;
    padding: 28px 26px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}
.testi-card .quote-mark {
    font-size: 40px;
    line-height: 1;
    color: #bfdbfe;
    font-family: Georgia, serif;
    margin-bottom: 6px;
}
.testi-card p { font-size: 14px; color: #475569; line-height: 1.8; flex: 1; }
.testi-card .t-author {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.testi-card .t-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #60a5fa);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
}
.testi-card .t-name { font-size: 14px; color: #0f172a; font-weight: 600; }
.testi-card .t-role { font-size: 12px; color: #94a3b8; }

/* 建站学院卡 */
.academy-card {
    background: #fff;
    border-radius: 12px;
    padding: 26px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.academy-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.12);
}
.academy-card .a-cat {
    display: inline-block;
    font-size: 12px;
    color: #2563eb;
    background: #e8f0ff;
    padding: 3px 12px;
    border-radius: 20px;
    margin-bottom: 14px;
}
.academy-card h4 { font-size: 16px; margin-bottom: 10px; color: #0f172a; line-height: 1.5; }
.academy-card .a-meta { font-size: 12px; color: #94a3b8; }
.academy-card .a-more { margin-top: 14px; font-size: 13px; color: #2563eb; font-weight: 500; }
.academy-card .a-ex { font-size: 13px; color: #64748b; line-height: 1.75; margin-bottom: 12px; }

/* 学院区块「查看全部文章」按钮容器 */
.academy-more { text-align: center; margin-top: 30px; }

/* ---------- 响应式（自管，不依赖各页内联） ---------- */
@media screen and (max-width: 996px) {
    .site-footer .ft-cols { grid-template-columns: repeat(2, 1fr); }
    .build-types { grid-template-columns: repeat(2, 1fr); }
    .industry-grid { grid-template-columns: repeat(2, 1fr); }
    .testi-grid { grid-template-columns: 1fr; }
    .academy-grid { grid-template-columns: 1fr; }
}
@media screen and (max-width: 768px) {
    .site-footer { padding: 0 !important; font-size: 14px !important; }
    .site-footer .ft-inner { padding: 40px 20px 24px; }
    .site-footer .ft-cols { grid-template-columns: 1fr !important; gap: 28px; }
    .site-footer .ft-bottom { flex-direction: column; align-items: flex-start; }
    .adv-grid2 { grid-template-columns: 1fr !important; }
    .build-types { grid-template-columns: 1fr !important; }
    .industry-grid { grid-template-columns: 1fr !important; }
    .eco-strip { flex-direction: column; align-items: flex-start; }
}
@media screen and (max-width: 480px) {
    .site-footer .ft-inner { padding: 32px 16px 20px; }
}