/* =====================================================================
   kuk-home.css — 首页 banner 以下自主设计区块（class 前缀 hb-）
   ---------------------------------------------------------------------
   仅由首页控制器 Index.php 按页加载，全站其它页面不引入。
   铁律：
   1. 不复用目标站 index_* 类名/选择器（旧样式与旧 DOM 强耦合，混用必破损）；
   2. 所有规则限定在 .hb- 作用域内，不覆盖全局 img 尺寸（已知坑：曾因
      全局 height:auto 覆盖正文内联尺寸导致整页变矮）；
   3. 断点沿用 kuk.css 既有约定（1020 / 768 / 620）。
   视觉体系：深蓝灰 #1f2d3d + 科技蓝 #0796e5（精密仪器/温度校准调性）。
   ===================================================================== */

.hb-stats,
.hb-products,
.hb-about,
.hb-news,
.hb-cta {
    font-family: "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    color: #231f20;
}

.hb-stats ul,
.hb-about ul,
.hb-news ul { list-style: none; margin: 0; padding: 0; }
.hb-stats h2, .hb-stats h3,
.hb-products h2, .hb-products h3,
.hb-about h2, .hb-about h3,
.hb-news h2, .hb-news h3,
.hb-cta h2, .hb-cta h3 { margin: 0; font-weight: bold; }
.hb-stats p, .hb-products p, .hb-about p, .hb-news p, .hb-cta p { margin: 0; }
.hb-stats a, .hb-products a, .hb-about a, .hb-news a, .hb-cta a { text-decoration: none; color: inherit; }

/* ---------- 公共区头（产品中心 / 新闻动态） ---------- */
.hb-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 36px;
}
.hb-kicker {
    display: block;
    font-size: 12px;
    letter-spacing: 3px;
    color: #0796e5;
    margin-bottom: 8px;
}
.hb-kicker-light { color: #0796e5; }
.hb-title {
    font-size: 28px;
    color: #1f2d3d;
    line-height: 1.2;
}
.hb-more {
    font-size: 14px;
    color: #555;
    padding-bottom: 4px;
    border-bottom: 1px solid #d8dee5;
    transition: color .25s, border-color .25s;
}
.hb-more .hb-arrow { display: inline-block; margin-left: 6px; transition: transform .25s; }
.hb-more:hover { color: #0796e5; border-color: #0796e5; }
.hb-more:hover .hb-arrow { transform: translateX(4px); }

/* ---------- 1. 数据条 ---------- */
.hb-stats { background: #1f2d3d; }
.hb-stats-list {
    display: flex;
    align-items: stretch;
}
.hb-stats-list li {
    flex: 1;
    padding: 24px 16px;
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, .12);
}
.hb-stats-list li:first-child { border-left: 0; }
.hb-stats-num {
    display: block;
    font-size: 21px;
    font-weight: bold;
    color: #4db4f0;
    letter-spacing: .5px;
    margin-bottom: 6px;
    white-space: nowrap;
}
.hb-stats-label {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, .72);
    line-height: 1.5;
}

/* ---------- 2. 产品中心：左大卡（跨两行）+ 右 2×2 小卡 ---------- */
.hb-products { padding: 76px 0 80px; background: #fff; }
.hb-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.hb-pro-feature {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e6ebf0;
    transition: border-color .25s, box-shadow .25s;
}
.hb-pro-pic {
    /* 产品图统一 3:2 超清图（2040x1360），图区同比例铺满：零裁切、零留边 */
    flex: none;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #e9ebee;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hb-pro-pic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .4s ease;
}
.hb-pro-body { padding: 26px 28px 28px; flex: 1; }
.hb-pro-num {
    display: block;
    font-size: 13px;
    font-weight: bold;
    color: #0796e5;
    letter-spacing: 2px;
    margin-bottom: 10px;
}
.hb-pro-title { font-size: 21px; color: #1f2d3d; margin-bottom: 8px; }
.hb-pro-sub { font-size: 13.5px; color: #777; line-height: 1.6; margin-bottom: 14px; }
.hb-pro-go {
    font-size: 14px;
    color: #1f2d3d;
    font-weight: bold;
    transition: color .25s;
}
.hb-pro-feature:hover { border-color: #0796e5; box-shadow: 0 12px 28px rgba(31, 45, 61, .08); }
.hb-pro-feature:hover .hb-pro-pic img { transform: scale(1.04); }
.hb-pro-feature:hover .hb-pro-go { color: #0796e5; }

.hb-pro-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e6ebf0;
    transition: border-color .25s, box-shadow .25s;
}
.hb-pro-thumb {
    height: 158px;
    /* 现代浏览器按 3:2 铺满图区；不支持 aspect-ratio 的旧内核退回固定高度 */
    height: auto;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #e9ebee;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hb-pro-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .4s ease;
}
.hb-pro-info { padding: 16px 18px 18px; position: relative; flex: 1; }
.hb-pro-info .hb-pro-num { margin-bottom: 6px; font-size: 12px; }
.hb-pro-info .hb-pro-title { font-size: 16px; margin-bottom: 6px; padding-right: 24px; }
.hb-pro-info .hb-pro-sub { font-size: 12.5px; margin-bottom: 0; }
.hb-pro-arrow {
    position: absolute;
    right: 18px;
    bottom: 16px;
    font-size: 15px;
    color: #c0c8d0;
    transition: color .25s, transform .25s;
}
.hb-pro-card:hover { border-color: #0796e5; box-shadow: 0 12px 28px rgba(31, 45, 61, .08); }
.hb-pro-card:hover .hb-pro-thumb img { transform: scale(1.05); }
.hb-pro-card:hover .hb-pro-arrow { color: #0796e5; transform: translateX(4px); }

/* ---------- 3. 关于我们 ---------- */
.hb-about { padding: 80px 0; background: #f5f7fa; }
.hb-about-wrap {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 64px;
    align-items: center;
}
.hb-about-text .hb-title { margin-bottom: 20px; }
.hb-about-desc {
    font-size: 14.5px;
    color: #555;
    line-height: 1.95;
    margin-bottom: 28px;
    text-align: justify;
}
.hb-about-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 34px;
}
.hb-about-points li {
    border-left: 3px solid #0796e5;
    padding-left: 14px;
}
.hb-about-points strong {
    display: block;
    font-size: 24px;
    color: #1f2d3d;
    margin-bottom: 4px;
}
.hb-about-points span {
    display: block;
    font-size: 12px;
    color: #999;
    line-height: 1.5;
}
.hb-btn {
    display: inline-block;
    background: #0796e5;
    color: #fff;
    font-size: 14px;
    padding: 13px 36px;
    letter-spacing: 1px;
    transition: background .25s;
}
.hb-btn:hover { background: #057ec2; color: #fff; }

.hb-about-media { position: relative; }
.hb-about-media > img {
    width: 100%;
    height: 400px;
    /* 楼体图与产品图同为 3:2：精确铺满、不裁切楼顶 */
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}
.hb-about-quote {
    position: absolute;
    left: -28px;
    bottom: -24px;
    background: #1f2d3d;
    color: #fff;
    padding: 18px 28px;
    max-width: 78%;
}
.hb-about-quote-label {
    display: block;
    font-size: 11px;
    letter-spacing: 2px;
    color: #4db4f0;
    margin-bottom: 6px;
}
.hb-about-quote p { font-size: 16px; letter-spacing: 2px; }

/* ---------- 4. 新闻动态：左头条 + 右列表 ---------- */
.hb-news { padding: 80px 0; background: #fff; }
.hb-news-wrap {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 48px;
    align-items: start;
}
.hb-news-feature { display: block; }
.hb-news-pic {
    overflow: hidden;
    background: #f2f4f7;
    margin-bottom: 18px;
}
.hb-news-pic img {
    width: 100%;
    height: 272px;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.hb-news-feature:hover .hb-news-pic img { transform: scale(1.03); }
.hb-news-date {
    display: block;
    font-size: 12px;
    color: #0796e5;
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.hb-news-feature .hb-news-title {
    font-size: 19px;
    color: #1f2d3d;
    line-height: 1.5;
    margin-bottom: 10px;
    transition: color .25s;
}
.hb-news-feature:hover .hb-news-title { color: #0796e5; }
.hb-news-desc {
    font-size: 13.5px;
    color: #777;
    line-height: 1.8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hb-news-list li { border-bottom: 1px solid #e8ecf1; }
.hb-news-list li:first-child { border-top: 1px solid #e8ecf1; }
.hb-news-list a {
    display: block;
    padding: 22px 40px 22px 0;
    position: relative;
}
.hb-news-list .hb-news-title {
    font-size: 15.5px;
    color: #333;
    line-height: 1.6;
    font-weight: bold;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .25s;
}
.hb-news-arrow {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: #c0c8d0;
    transition: color .25s, transform .25s;
}
.hb-news-list a:hover .hb-news-title { color: #0796e5; }
.hb-news-list a:hover .hb-news-arrow { color: #0796e5; transform: translate(4px, -50%); }

/* ---------- 5. 资料下载 + 咨询深色带 ---------- */
/* 2026-10-17 由深色带改为白底：与上方新闻区同为白底，用顶部分隔线划分 */
.hb-cta { background: #fff; border-top: 1px solid #e8ecf1; padding: 62px 0; }
.hb-cta .container {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 56px;
    align-items: center;
}
.hb-cta-title { font-size: 22px; color: #1f2d3d; margin-bottom: 20px; }
.hb-cta-chips { margin-bottom: 16px; }
.hb-chip {
    display: inline-block;
    border: 1px solid #c9d2da;
    color: #33414f;
    font-size: 13px;
    padding: 9px 16px;
    margin: 0 10px 10px 0;
    transition: color .25s, border-color .25s;
}
.hb-chip:hover { color: #0796e5; border-color: #0796e5; }
.hb-cta-all { font-size: 13px; color: #0796e5; }
.hb-cta-all:hover { color: #057ec2; }

.hb-cta-right {
    border-left: 1px solid #e2e6ea;
    padding-left: 56px;
}
.hb-cta-label {
    display: block;
    font-size: 12px;
    letter-spacing: 2px;
    color: #777777;
    margin-bottom: 10px;
}
.hb-cta-phone {
    display: block;
    font-size: 30px;
    font-weight: bold;
    color: #1f2d3d;
    letter-spacing: 2px;
    margin-bottom: 20px;
    transition: color .25s;
}
.hb-cta-phone:hover { color: #0796e5; }
.hb-btn-accent { background: #0796e5; }
.hb-btn-accent:hover { background: #057ec2; }

/* ================= 响应式 ================= */
@media (max-width: 1020px) {
    .hb-products { padding: 60px 0; }
    .hb-products-grid { grid-template-columns: repeat(2, 1fr); }
    .hb-pro-feature { grid-column: 1 / 3; grid-row: auto; }
    .hb-about-wrap { gap: 40px; }
    .hb-news-wrap { gap: 32px; }
    .hb-news-pic img { height: 220px; }
    .hb-cta .container { grid-template-columns: 1fr; gap: 36px; }
    .hb-cta-right { border-left: 0; border-top: 1px solid #e2e6ea; padding-left: 0; padding-top: 32px; }
}

@media (max-width: 768px) {
    .hb-title { font-size: 23px; }
    .hb-head { margin-bottom: 26px; }
    .hb-stats-list { flex-wrap: wrap; }
    .hb-stats-list li { flex: 0 0 50%; box-sizing: border-box; padding: 18px 10px; }
    .hb-stats-list li:nth-child(odd) { border-left: 0; }
    .hb-stats-list li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .12); }
    .hb-stats-num { font-size: 18px; }
    .hb-about { padding: 56px 0; }
    .hb-about-wrap { grid-template-columns: 1fr; }
    .hb-about-media { order: -1; }
    .hb-about-quote { position: static; max-width: none; margin-top: 0; }
    .hb-news { padding: 56px 0; }
    .hb-news-wrap { grid-template-columns: 1fr; }
    .hb-cta { padding: 48px 0; }
}

@media (max-width: 620px) {
    .hb-products { padding: 44px 0 48px; }
    .hb-products-grid { grid-template-columns: 1fr; gap: 16px; }
    .hb-pro-feature { grid-column: auto; }
    .hb-about-points { grid-template-columns: 1fr; gap: 12px; }
    .hb-news-pic img { height: 190px; }
    .hb-cta-phone { font-size: 24px; }
    .hb-chip { display: block; margin-right: 0; text-align: center; }
}

/* ---------- 文字颜色修正（必须声明在媒体查询之后的文件末尾） ----------
   开头的重置规则 `.hb-cta a { color: inherit }` 等为「类+元素」(0,1,1) 特异性，
   会压过 `.hb-chip` / `.hb-cta-phone` / `.hb-btn` 这类单类规则(0,1,0)，
   导致带内链接文字被继承成 #231f20 而不生效（已知缺陷）。
   这里用「双类」作用域(0,2,0)显式覆盖，并同步补上对应 hover 态。
   （2026-10-17 下载带已改为白底，以下为白底配色） */
.hb-head .hb-more { color: #555; }
.hb-about .hb-btn,
.hb-cta .hb-btn { color: #fff; }
.hb-cta .hb-cta-phone { color: #1f2d3d; }
.hb-cta .hb-cta-all { color: #0796e5; }
.hb-cta .hb-cta-all:hover { color: #057ec2; }
.hb-cta .hb-chip {
    color: #33414f;
    border-color: #c9d2da;
    background: #f5f7fa;
    font-size: 14px;
}
.hb-cta .hb-chip:hover {
    color: #0796e5;
    border-color: #0796e5;
    background: #eaf6fd;
}