/* ==========================================================================
   BMI Brakes 官网首页样式 v2 (image-to-code skill 重建版)
   设计稿: index.png (1920x4252) — 全部尺寸经 PIL 从原图实测
   结构: fit-shell > fit-box > artboard(1920px 锁定画板)
   自适应: 外层 transform: scale() 整体等比缩放,无断点重排

   实测区块边界(原图 y 坐标):
     Topbar    y=0-48      (48px)   #222222
     Hero      y=48-848    (800px)  #01477f
     News      y=848-1720  (872px)  #ffffff
     Products  y=1720-2544 (824px)  #00437a
     Downloads y=2544-3560 (1016px) #ffffff
     Brands    y=3560-3792 (232px)  #f4f6f7
     Footer    y=3792-4252 (460px)  #282828
   ========================================================================== */

/* ---------- Reset & 基础 ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #333333;
    background: #ffffff;
    overflow-x: hidden;
}

/* 首页在超宽屏时，用页面底图填充固定画板外侧，避免超宽伪元素触发合成异常。 */
@media (min-width: 1921px) {
    body.bmi-home-page {
        background: linear-gradient(
            to bottom,
            #222222 0,
            #222222 44px,
            #01477f 44px,
            #01477f 768px,
            #ffffff 768px,
            #ffffff 1640px,
            #00437a 1640px,
            #00437a 2464px,
            #ffffff 2464px,
            #ffffff 3480px,
            #eff2f4 3480px,
            #eff2f4 3712px,
            #282828 3712px
        );
    }
}

img {
    max-width: 100%;
    vertical-align: middle;
    border: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

ul, ol {
    list-style: none;
}

button {
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
}

/* ==========================================================================
   fit-shell / fit-box / artboard 三层结构 (image-to-code skill 强制)
   ========================================================================== */
:root {
    --board-w: 1920;
    --board-h: 4252; /* 原图精确高度,JS 会按实际渲染微调 */
    --fit-gutter: 0px;
    --board-scale: 1;
}

.fit-shell {
    width: 100%;
    display: grid;
    place-items: start center;
    overflow-x: clip;
}

.fit-box {
    width: calc(var(--board-w) * 1px * var(--board-scale));
    height: calc(var(--board-h) * 1px * var(--board-scale));
    overflow: hidden;
    position: relative;
}

.artboard {
    /* RTL 下仍以物理左边缘锚定固定宽度画板。 */
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--board-w) * 1px);
    height: auto;
    /* 原图顶部 48px 是 topbar；header 绝对定位叠加，但内容流必须从 hero y=48 开始。 */
    padding-top: 48px;
    transform: scale(var(--board-scale));
    transform-origin: top left;
    background: #ffffff;
}

/* ==========================================================================
   Banner 轮播区 (高 720px, #01477f)
   桌面首屏按原设计约 90% 缩小，保留右侧主视觉和左侧操作层级。
   ========================================================================== */
.hero {
    position: relative;
    height: 720px;
    background-color: #01477f;
    background-image: url("../img/v2/%E5%9B%BE%E5%B1%82%209@2x.png");
    background-image: -webkit-image-set(url("../img/v2/%E5%9B%BE%E5%B1%82%209@2x.png") 1x, url("../img/v2/%E5%9B%BE%E5%B1%82%209@3x.png") 2x);
    background-image: image-set(url("../img/v2/%E5%9B%BE%E5%B1%82%209@2x.png") 1x, url("../img/v2/%E5%9B%BE%E5%B1%82%209@3x.png") 2x);
    background-size: 100% 100%;
    background-position: center;
    color: #ffffff;
    overflow: hidden;
}

.hero-inner {
    height: 100%;
    padding: 0 100px 0 102px;
    position: relative;
}

.hero-slides {
    position: relative;
    height: 100%;
    --hero-transition-ms: 700ms;
}

/* 文案独立于右侧图片轨道，因此图片切换不会带动阅读内容。 */
.hero-copy-item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 600ms ease, visibility 0s linear 600ms;
}

.hero-copy-item.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 600ms ease;
}

/* 左列: 标题 + 按钮 + 箭头 */
.hero-text {
    position: absolute;
    left: 40px;
    top: 0;
    width: 630px;
    height: 100%;
}

.hero-copy {
    padding-top: 210px;
}

.hero-title {
    font-size: 54px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    /* 标题和按钮使用同一内容流，长译文换行时按钮会自然下移。 */
    margin: 0 0 15px -1px;
}

.hero-copy .btn {
    position: static;
    margin: 0;
    width: 197px;
    height: 41px;
    padding: 0 13px 0 23px;
    border-radius: 4px;
    font-size: 14px;
    letter-spacing: 0;
    font-weight: 400;
    justify-content: space-between;
    gap: 0;
}

/* 全站按钮 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 4px;
    padding: 18px 34px;
    transition: opacity 0.2s, transform 0.2s;
}

.btn:hover {
    opacity: 0.85;
}

.btn .btn-arrow {
    width: 10px;
    height: auto;
}

.btn-white {
    background: #ffffff;
    color: #03487f;
}

.btn-blue {
    background: #03487f;
    color: #ffffff;
    /* 实测 More News 按钮 209x57 */
    height: 57px;
    font-weight: 300;
    padding: 0 24px;
    border-radius: 6px;
}

.btn-outline {
    background: #ffffff;
    color: #03487f;
    border: 1px solid #03487f;
    border-radius: 6px;
    height: 57px;
    font-weight: 300;
    padding: 0 24px;
}

/* 轮播箭头: 位于主视觉左侧下方，与图片底边对齐。
   hero-slides 位于 hero-inner padding-box 内(left=102px)，与主视觉保留 20px 间距。
   注意: hero-arrow 切图本身就是完整圆形(白描边圆 / 实心蓝圆),
   不要再额外加 border/background, 否则会出现"双层描边"或外圈蓝边;
   也不需要翻转 prev 切图, 它本身就是左向箭头。 */
.hero-controls {
    position: absolute;
    left: 478px;
    top: 647px;
    display: flex;
    gap: 18px;
    z-index: 3; /* 高于 slide(is-active z-index:2), 保证箭头始终可点 */
}

.hero-arrow {
    width: 54px;
    height: 54px;
    border: 0;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 0.2s;
}

.hero-arrow img {
    width: 54px;
    height: 54px;
    display: block;
}

/* 右箭头复用左键图标样式, 水平翻转使其指向右, 保持左右导航语义 */
.hero-arrow.is-primary img {
    transform: scaleX(-1);
}

/* hover: 整体半透明反馈, 不改变切图本身 */
.hero-arrow:hover {
    opacity: 0.75;
}

.hero-arrow:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

.hero-arrow:disabled {
    cursor: default;
    opacity: 0.55;
}

.hero-arrow:disabled:hover {
    opacity: 0.55;
}

/* 主视觉按 500:280 原始比例放大至 1050:588，抵消 hero-slides 内边距。 */
.hero-visual-viewport {
    position: absolute;
    right: -56px;
    top: 113px;
    width: 1050px;
    height: 588px;
    overflow: hidden;
}

.hero-visual {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform var(--hero-transition-ms) ease;
}

.hero-visual.is-active,
.hero-visual.is-enter-from-left,
.hero-visual.is-enter-from-right,
.hero-visual.is-leave-to-left,
.hero-visual.is-leave-to-right {
    visibility: visible;
}

.hero-visual.is-active {
    transform: translateX(0);
}

.hero-visual.is-enter-from-left,
.hero-visual.is-leave-to-left {
    transform: translateX(-100%);
}

.hero-visual.is-enter-from-right,
.hero-visual.is-leave-to-right {
    transform: translateX(100%);
}

.hero-visual.is-enter-from-left,
.hero-visual.is-enter-from-right {
    z-index: 2;
}

.hero-visual.is-preparing {
    transition: none;
}

.hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

/* ==========================================================================
   News 新闻区 (y=848-1720, 高 872px, 白底)
   实测: 标题字面 x=885-1034, y=924-968 (Lato Bold 60px, 居中)
         展台图 x=160-960, y=1028-1508 (800x480)
         新闻标题字面 x=1041-1497, y=1067-1144 (Lato Black 36px/42px)
         摘要字面 x=1040-1749, y=1174-1249 (Lato 21px/28px)
         日期 21 字面 x=1041-1097, y=1395-1438
         +按钮 x=1705-1759, y=1404-1458 (54x54)
         More News 按钮 x=855-1064, y=1560-1617 (209x57, 居中)
   ========================================================================== */
.section-news {
    position: relative;
    height: 872px;
    padding: 0;
    background: #ffffff;
}

.section-title {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    letter-spacing: 1px;
    color: #1a1a1a;
    margin-bottom: 61px;
}

.section-news > .section-title {
    position: absolute;
    top: 63px;
    left: 0;
    width: 1920px;
    font-family: "Lato", sans-serif;
    font-size: 60px;
    font-weight: 700;
    line-height: 72px;
    letter-spacing: 0;
    color: #175da9;
    margin: 0;
}

.news-card {
    position: static;
    display: block;
}

.news-thumb {
    position: absolute;
    left: 160px;
    top: 180px;
    width: 800px;
    height: 480px;
    border-radius: 8px;
    overflow: hidden;
}

.news-thumb img {
    width: 800px;
    height: 480px;
    object-fit: cover;
    display: block;
}

.news-content {
    position: static;
    display: block;
    min-width: 0;
    min-height: 0;
    padding: 0;
}

.news-copy {
    position: absolute;
    left: 1040px;
    top: 211px;
    width: 720px;
}

.news-heading {
    position: static;
    width: 640px;
    min-height: 86px;
    font-family: "Lato", sans-serif;
    font-size: 36px;
    font-weight: 900;
    line-height: 42px;
    color: #175da9;
    margin: 0 0 24px;
}

.news-excerpt {
    position: static;
    width: 720px;
    max-width: none;
    font-family: "Lato", sans-serif;
    font-size: 21px;
    line-height: 28px;
    color: #175da9;
    margin: 0;
}

.news-meta {
    position: static;
    margin: 0;
    max-width: none;
}

.news-date {
    text-align: left;
    color: #175da9;
}

.news-date-row {
    display: block;
}

.news-date .day {
    position: absolute;
    left: 1040px;
    top: 538px;
    display: block;
    font-size: 60px;
    font-weight: 800;
    line-height: 1;
}

.news-date .month {
    position: absolute;
    left: 1040px;
    top: 600px;
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #175da9;
    margin: 0;
}

/* 实测 + 按钮 54x54 */
.news-more {
    position: absolute;
    left: 1705px;
    top: 556px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #175da9;
    color: #ffffff;
    font-size: 30px;
    font-weight: 300;
    line-height: 52px;
    text-align: center;
    transition: opacity 0.2s;
}

.news-more:hover {
    opacity: 0.85;
}

/* 实测 More News y=1560, 展台图底 y=1508 → 间距 52 */
.section-more {
    text-align: center;
    margin-top: 52px;
}

.section-news .section-more {
    position: absolute;
    left: 855px;
    top: 712px;
    width: 209px;
    margin: 0;
    text-align: left;
}

.section-news .section-more .btn-blue {
    position: relative;
    width: 209px;
    background: #175da9;
    padding: 0 14px 0 25px;
    font-size: 16px;
    justify-content: space-between;
    gap: 0;
}

.section-news .section-more .news-more-arrow {
    position: absolute;
    left: 167px;
    top: 18px;
    width: 27px;
    height: 21px;
}

/* ==========================================================================
   产品总览 (y=1720-2544, 高 824px, #00437a)
   实测: 标题字面 y=1810-1845 (Lato Regular 49.2px, 左对齐)
         卡片 370x370, x=160/570/980/1390, 间隙 40
         标签字面 y=2306-2320 (Lato Light 20px), 圆键 60x60
   ========================================================================== */
.section-products {
    position: relative;
    height: 824px;
    background-color: #00437a;
    background-image: url("../img/v2/%E7%9F%A9%E5%BD%A2%2012@2x.png");
    background-image: -webkit-image-set(url("../img/v2/%E7%9F%A9%E5%BD%A2%2012@2x.png") 1x, url("../img/v2/%E7%9F%A9%E5%BD%A2%2012@3x.png") 2x);
    background-image: image-set(url("../img/v2/%E7%9F%A9%E5%BD%A2%2012@2x.png") 1x, url("../img/v2/%E7%9F%A9%E5%BD%A2%2012@3x.png") 2x);
    background-size: cover;
    background-position: center;
    padding: 0;
}

.section-products .section-title {
    position: absolute;
    left: 160px;
    top: 80px;
    color: #ffffff;
    font-family: "Lato", sans-serif;
    font-size: 49.2px;
    font-weight: 400;
    line-height: 49.2px;
    letter-spacing: 0;
    text-align: left;
    text-transform: uppercase;
    margin: 0;
}

.products-carousel {
    position: absolute;
    left: 160px;
    top: 186px;
    width: 1600px;
}

.product-viewport {
    width: 1600px;
    overflow: hidden;
}

.product-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 370px;
    gap: 40px;
    align-items: start;
    width: max-content;
    transition: transform 0.3s ease;
    will-change: transform;
}

.product-item {
    position: relative;
    text-align: left;
    display: flex;
    flex-direction: column;
    width: 370px;
}

.product-card {
    position: relative;
    display: block;
    background: #dddddd;
    border-radius: 10px;
    width: 370px;
    height: 370px;
    padding: 0;
    overflow: hidden;
    transition: opacity 0.2s;
}

.product-card:hover {
    opacity: 0.92;
}

.product-card img {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    object-fit: cover;
}

/* 字面像素 y=2306-2320；Lato Light 的字面顶部距行盒约 4px。 */
.product-name {
    display: block;
    margin-top: 26px;
    font-family: "Lato", sans-serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 20px;
    letter-spacing: 0;
    color: #ffffff;
    text-transform: uppercase;
    text-align: left;
    height: 40px;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.products-controls {
    position: absolute;
    left: 726px;
    top: 462px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.products-controls .hero-arrow {
    width: 68px;
    height: 68px;
    border: none;
    background: transparent;
    padding: 0;
    border-radius: 0;
}

.products-controls .hero-arrow img {
    width: 68px;
    height: 68px;
    display: block;
}

.product-arrow {
    position: relative;
}

.product-arrow-icon-disabled {
    display: none !important;
}

.product-arrow:disabled .product-arrow-icon-enabled {
    display: none !important;
}

.product-arrow:disabled .product-arrow-icon-disabled {
    display: block !important;
}

.product-arrow-forward .product-arrow-icon-enabled {
    transform: scaleX(-1);
}

.product-arrow-back .product-arrow-icon-disabled {
    transform: scaleX(-1);
}

.product-arrow:not(:disabled) {
    cursor: pointer;
}

.product-arrow:disabled {
    cursor: default;
}

.product-arrow:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
}

.products-carousel-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* ==========================================================================
   Downloads 下载区 (y=2544-3560, 高 1016px, 白底)
   实测: 标题字面 y=2617-2662 (Lato Black 60px, 居中)
         标签字面 y=2719-2740 (Lato Regular 24px, 左对齐)
         封面 296x420, x=160/486/812/1138/1464, 间隙 30, y=2762-3182
   ========================================================================== */
.section-downloads {
    position: relative;
    height: 1016px;
    padding: 0;
    background: #ffffff;
}

.section-downloads .section-title {
    position: absolute;
    left: 0;
    top: 60px;
    width: 1920px;
    margin: 0;
    font-family: "Lato", sans-serif;
    font-size: 60px;
    font-weight: 900;
    line-height: 60px;
    letter-spacing: 0;
    color: #222222;
    text-align: center;
}

.download-grid {
    position: absolute;
    left: 160px;
    top: 170px;
    display: grid;
    grid-template-columns: repeat(5, 296px);
    gap: 30px;
}

.download-item {
    text-align: left;
}

.download-label {
    display: block;
    font-family: "Lato", sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0;
    color: #222222;
    margin-bottom: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.download-cover {
    display: block;
    width: 296px;
    height: 420px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    transition: transform 0.25s;
}

.download-cover:hover {
    transform: translateY(-5px);
}

.download-cover img {
    width: 296px;
    height: 420px;
    object-fit: cover;
    display: block;
}

.download-link {
    position: relative;
    display: block;
    margin-top: 24px;
    font-family: "Lato", sans-serif;
    font-size: 19px;
    font-weight: 300;
    line-height: 22px;
    letter-spacing: 0;
    color: #005ca9;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.download-link:hover {
    color: #03487f;
}

.section-downloads .section-more {
    position: absolute;
    left: 835px;
    top: 747px;
    width: 250px;
    height: 60px;
    margin: 0;
    text-align: left;
}

.section-downloads .section-more .btn-outline {
    position: relative;
    width: 250px;
    height: 60px;
    padding: 0 0 0 23px;
    justify-content: flex-start;
    gap: 0;
    border: 2px solid #005ca9;
    border-radius: 8px;
    font-family: "Lato", sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: 0;
    color: #005ca9;
}

.section-downloads .section-more .downloads-more-arrow {
    position: absolute;
    left: 207px;
    top: 20px;
    width: 27px;
    height: 21px;
}

/* ==========================================================================
   品牌墙 (y=3560-3792, 高 232px, #f4f6f7)
   实测: 两行卡片, 每行 7 个, 卡片 214x70, 横向间隙 17, 行间距 28
   ========================================================================== */
.section-brands {
    display: flex;
    align-items: center;
    height: 232px;
    background: #f4f6f7;
    background-image: url("../img/v2/%E7%9F%A9%E5%BD%A2%2016@2x.png");
    background-image: -webkit-image-set(url("../img/v2/%E7%9F%A9%E5%BD%A2%2016@2x.png") 1x, url("../img/v2/%E7%9F%A9%E5%BD%A2%2016@3x.png") 2x);
    background-image: image-set(url("../img/v2/%E7%9F%A9%E5%BD%A2%2016@2x.png") 1x, url("../img/v2/%E7%9F%A9%E5%BD%A2%2016@3x.png") 2x);
    background-size: cover;
    background-position: center;
    padding: 0 160px;
}

.brand-rows {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.brand-row {
    display: flex;
    gap: 48px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 60px;
    flex-shrink: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.brand-logo:hover {
    opacity: 0.75;
    transform: translateY(-2px);
}

.brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==========================================================================
   自适应说明(无断点重排)
   - 1920px 视口: --board-scale = 1, artboard 1:1 显示
   - 375px 视口: --board-scale ≈ 0.195, artboard 整体缩小到 ~375px 宽
   - 子元素不重新排版,坐标固定,只整体缩放
   ==========================================================================
*/

@media (max-width: 1279px) {
    .bmi-home-page .fit-shell {
        display: block;
        overflow: visible;
    }

    .bmi-home-page .fit-box {
        width: 100% !important;
        height: auto !important;
        overflow: visible;
    }

    .bmi-home-page .artboard {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        padding-top: 0;
        overflow: visible;
        transform: none !important;
    }

    .bmi-home-page .hero {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .bmi-home-page .hero-inner {
        height: auto;
    }

    .bmi-home-page .hero-inner {
        padding: 56px 32px 40px;
    }

    .bmi-home-page .hero-slides {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: 32px;
        height: auto;
    }

    .bmi-home-page .hero-copy-item {
        position: static;
        display: none;
        height: auto;
        visibility: visible;
    }

    .bmi-home-page .hero-copy-item.is-active {
        display: block;
    }

    .bmi-home-page .hero-text,
    .bmi-home-page .hero-visual-viewport {
        position: static;
        height: auto;
    }

    /* 清除桌面端固定 630px 文案列，避免单列 Grid 被内容最小宽度撑开。 */
    .bmi-home-page .hero-text {
        width: 100%;
    }

    .bmi-home-page .hero-copy {
        padding-top: 0;
    }

    /* 截图中的右侧轮播主视觉不再占满整列，保留右侧对齐和留白。 */
    .bmi-home-page .hero-visual-viewport {
        position: relative;
        top: auto;
        right: auto;
        width: 88%;
        justify-self: end;
        aspect-ratio: 5 / 3;
        overflow: hidden;
    }

    .bmi-home-page .hero-visual {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .bmi-home-page .hero-title {
        margin: 0 0 28px;
        font-size: 45px;
        line-height: 1.15;
        letter-spacing: 0;
    }

    .bmi-home-page .hero-copy .btn {
        position: static;
        width: auto;
        min-height: 48px;
        padding: 0 22px;
    }

    .bmi-home-page .hero-visual img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        object-fit: cover;
    }

    .bmi-home-page .hero-controls {
        position: static;
        justify-content: flex-start;
        margin-top: 32px;
    }

    .bmi-home-page .section-news,
    .bmi-home-page .section-products,
    .bmi-home-page .section-downloads,
    .bmi-home-page .section-brands {
        height: auto;
    }

    .bmi-home-page .section-news {
        padding: 64px 32px;
    }

    .bmi-home-page .section-news > .section-title,
    .bmi-home-page .section-products .section-title,
    .bmi-home-page .section-downloads .section-title {
        position: static;
        width: auto;
        margin: 0 0 36px;
        font-size: 40px;
        line-height: 1.2;
        text-align: start;
    }

    .bmi-home-page .news-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 32px;
    }

    .bmi-home-page .news-thumb,
    .bmi-home-page .news-heading,
    .bmi-home-page .news-excerpt,
    .bmi-home-page .news-date .day,
    .bmi-home-page .news-date .month,
    .bmi-home-page .news-more,
    .bmi-home-page .section-news .section-more {
        position: static;
        width: auto;
        height: auto;
    }

    .bmi-home-page .news-thumb,
    .bmi-home-page .news-thumb img {
        width: 100%;
        height: auto;
        max-width: 100%;
        aspect-ratio: 5 / 3;
        object-fit: cover;
    }

    .bmi-home-page .news-heading {
        min-height: 0;
        margin: 0 0 16px;
        font-size: 30px;
        line-height: 1.3;
    }

    .bmi-home-page .news-excerpt {
        margin: 0 0 24px;
        font-size: 18px;
        line-height: 1.65;
    }

    .bmi-home-page .news-meta {
        width: 100%;
        margin-top: 24px;
    }

    .bmi-home-page .news-date-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 14px;
    }

    .bmi-home-page .news-date .day {
        font-size: 42px;
    }

    .bmi-home-page .news-date .month {
        font-size: 15px;
    }

    .bmi-home-page .news-more {
        display: inline-flex;
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        line-height: 1;
        margin-left: auto;
    }

    .bmi-home-page .section-news .section-more,
    .bmi-home-page .section-downloads .section-more {
        position: static;
        width: auto;
        height: auto;
        margin: 36px 0 0;
        text-align: start;
    }

    .bmi-home-page .section-downloads .section-more .btn-outline {
        width: auto;
        min-height: 52px;
        padding-inline: 22px;
    }

    .bmi-home-page .section-downloads .downloads-more-arrow {
        position: static;
        margin-inline-start: 12px;
    }

    .bmi-home-page .section-products {
        padding: 64px 32px;
    }

    .bmi-home-page .products-carousel,
    .bmi-home-page .product-viewport {
        position: static;
        width: 100%;
        overflow: visible;
    }

    .bmi-home-page .product-grid {
        display: grid;
        grid-auto-flow: row;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: 100%;
        gap: 20px;
        transform: none !important;
    }

    .bmi-home-page .product-item {
        width: auto;
    }

    .bmi-home-page .product-card {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    .bmi-home-page .product-name {
        height: auto;
        min-height: 40px;
        margin-top: 14px;
        font-size: 16px;
        line-height: 1.35;
    }

    .bmi-home-page .products-controls {
        display: none;
    }

    .bmi-home-page .section-downloads {
        padding: 64px 32px;
    }

    .bmi-home-page .download-grid {
        position: static;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 32px 20px;
    }

    .bmi-home-page .download-label {
        font-size: 18px;
        line-height: 1.4;
        white-space: normal;
    }

    .bmi-home-page .download-cover,
    .bmi-home-page .download-cover img {
        width: 100%;
        height: auto;
        aspect-ratio: 296 / 420;
    }

    .bmi-home-page .section-brands {
        padding: 48px 32px;
    }

    .bmi-home-page .brand-row {
        gap: 20px 32px;
    }

    .bmi-home-page .brand-logo {
        width: 150px;
        height: 54px;
    }

    .bmi-home-page .site-footer {
        position: relative;
        top: auto;
        left: auto;
        display: flex;
        width: 100%;
        height: auto;
        min-height: 0;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 44px 24px;
    }

    .bmi-home-page .site-footer .footer-social,
    .bmi-home-page .site-footer .footer-line,
    .bmi-home-page .site-footer .footer-privacy,
    .bmi-home-page .site-footer .footer-badge {
        position: static;
        left: auto;
        width: auto;
        height: auto;
        margin: 0;
        transform: none;
    }

    .bmi-home-page .site-footer .footer-social {
        max-width: 100%;
    }

    .bmi-home-page .site-footer .footer-line {
        font-size: 15px;
        line-height: 1.55;
        white-space: normal;
    }

    .bmi-home-page .site-footer .footer-privacy {
        font-size: 15px;
        line-height: 1.4;
    }

    .bmi-home-page .site-footer .footer-badge {
        background-position: center;
    }
}

/* 超过设计画板宽度时，内容保持 1920px，带底色的区块背景延展至全屏。 */
@media (min-width: 1921px) {
    .bmi-home-page .fit-box {
        overflow: visible;
    }

    .bmi-home-page .hero {
        width: 100vw;
        left: 50%;
        transform: translateX(-50%);
    }

    .bmi-home-page .hero-inner {
        width: 1920px;
        margin: 0 auto;
    }

}

@media (max-width: 1024px) and (max-width: 1279px) {
    .bmi-home-page .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bmi-home-page .download-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) and (max-width: 1279px) {
    .bmi-home-page .hero-inner {
        padding: 24px 20px 32px;
    }

    .bmi-home-page .hero-slides,
    .bmi-home-page .news-card {
        grid-template-columns: 1fr;
    }

    .bmi-home-page .hero-visual-viewport {
        order: -1;
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .bmi-home-page .hero-title {
        margin: 24px 0 32px;
        font-size: 30px;
        line-height: 1.25;
        font-weight: 500;
    }

    .bmi-home-page .hero-copy .btn {
        height: 36px;
        min-height: 36px;
        padding: 0 18px;
        font-size: 16px;
        font-weight: 400;
    }

    .bmi-home-page .hero-controls .hero-arrow {
        width: 42px;
        height: 42px;
    }

    .bmi-home-page .hero-controls .hero-arrow img {
        width: 42px;
        height: 42px;
    }

    .bmi-home-page .section-news,
    .bmi-home-page .section-products,
    .bmi-home-page .section-downloads {
        padding: 44px 20px;
    }

    .bmi-home-page .section-news > .section-title,
    .bmi-home-page .section-products .section-title,
    .bmi-home-page .section-downloads .section-title {
        font-size: 31px;
    }

    .bmi-home-page .news-heading {
        font-size: 25px;
    }

    .bmi-home-page .product-grid,
    .bmi-home-page .download-grid {
        grid-template-columns: 1fr;
    }

    .bmi-home-page .section-brands {
        padding: 40px 20px;
    }

    .bmi-home-page .brand-row {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-copy-item,
    .hero-visual {
        transition: none;
    }
}

@media (max-width: 767px) {
    .bmi-home-page .product-viewport {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .bmi-home-page .product-viewport::-webkit-scrollbar,
    .bmi-home-page .download-grid::-webkit-scrollbar {
        display: none;
    }

    .bmi-home-page .product-grid {
        display: flex;
        width: max-content;
        gap: 16px;
        transform: none !important;
    }

    .bmi-home-page .product-item,
    .bmi-home-page .download-item {
        flex: 0 0 min(76vw, 280px);
        width: min(76vw, 280px);
        scroll-snap-align: start;
    }

    .bmi-home-page .download-grid {
        display: flex;
        width: 100%;
        max-width: 100%;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    /* 友情链接复用 Downloads 的移动端横向滑动模式，桌面端继续保留自动换行。 */
    .bmi-home-page .brand-rows {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .bmi-home-page .brand-rows::-webkit-scrollbar {
        display: none;
    }

    .bmi-home-page .brand-row {
        width: max-content;
        gap: 16px;
        justify-content: flex-start;
        flex-wrap: nowrap;
    }

    .bmi-home-page .brand-logo {
        flex: 0 0 150px;
        scroll-snap-align: start;
    }
}