*{margin:0;padding:0;box-sizing:border-box}
/*body{*/
/*    font-family:"Microsoft YaHei", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;*/
/*    background:#0b0f14;*/
/*    color:#fff;*/
/*}*/

.spacer{
    height: 80vh;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9aa4b2;
    opacity:.8;
}

/* 页面：上图 + 下栏 */
.hero-page{ width:100%; }

/* ✅ 上方图片区域（标题必须放这里面） */
.hero{
    position:relative;            /* 关键：给 absolute 的标题当定位参照 */
    width:100%;
    /*height:min(72vh, 760px);*/
    overflow:hidden;
}

/*.bg-img{*/
/*    position:absolute;*/
/*    inset:0;*/
/*    width:100%;*/
/*    height:100%;*/
/*    object-fit:cover;*/
/*    filter: brightness(1.06) contrast(1.02);*/
/*    z-index:0;*/
/*}*/

/* 轻遮罩（不压暗） */
/*.hero::after{*/
/*    content:"";*/
/*    position:absolute; inset:0;*/
/*    background:*/
/*            radial-gradient(1100px 520px at 50% 84%, rgba(0,0,0,.03), rgba(0,0,0,.10)),*/
/*            linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,.03));*/
/*    z-index:1;*/
/*    pointer-events:none;*/
/*}*/

/* ✅ 只在 hero 内生效，防止串到其他 div */
.hero .title123{
    position:absolute;
    top:5%;
    left:0; right:0;
    text-align:center;
    font-size:clamp(28px, 3.2vw, 52px);
    font-weight:900;
    color:#2f7de1;
    letter-spacing:2px;
    text-shadow:0 12px 36px rgba(0,0,0,.22);
    padding:0 16px;
    z-index:2;
}

.hero .subtitle123{
    position:absolute;
    top:15%;
    left:0; right:0;
    text-align:center;
    font-size:clamp(14px, 1.1vw, 18px);
    color:#0b0f14;
    opacity:.82;
    padding:0 16px;
    z-index:2;
}

.hero .glass-bar{
    position:absolute;
    top:80%;
    left:0; right:0;
    text-align:center;
    font-size:clamp(14px, 1.1vw, 18px);
    color:white;
    opacity:.82;
    padding:0 16px;
    z-index:1;
}
/* ✅ 下方区域（在图片下方） */
.bottom-area{
    padding: 14px 0 26px;
}

/*!* 玻璃底栏（更透明） *!*/
/*.hero .glass-bar{*/
/*    width:min(1120px, calc(100vw - 28px));*/
/*    margin: 0 auto;*/
/*    padding: 16px 14px;*/
/*    border-radius: 22px;*/
/*    position:relative;*/

/*    background: rgba(255,255,255,.04);  !* 更透明：你可以再降到 .03/.02 *!*/
/*    backdrop-filter: blur(6px);*/
/*    -webkit-backdrop-filter: blur(6px);*/

/*    box-shadow: 0 14px 40px rgba(0,0,0,.18),*/
/*    inset 0 0 0 1px rgba(255,255,255,.06);*/
/*    overflow:hidden;*/
/*}*/

/*.hero .glass-bar{*/
/*    content:"";*/
/*    position:absolute;*/
/*    top:-70%;*/
/*    left:-30%;*/
/*    width:60%;*/
/*    height:180%;*/
/*    transform: rotate(18deg);*/
/*    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.10), rgba(255,255,255,0) 65%);*/
/*    opacity:.5;*/
/*    pointer-events:none;*/
/*    z-index:3;*/
/*}*/

.stats-wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap: clamp(14px, 4vw, 80px);
    opacity:0;
    transform: translateY(12px);
    filter: blur(2px);
    transition: opacity .7s ease, transform .7s ease, filter .7s ease;
    position:relative;
    z-index:1;
}
.stats-wrap.is-in{ opacity:1; transform:translateY(0); filter:blur(0); }

.stat{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:10px;
    text-shadow:0 2px 12px rgba(0,0,0,.28);
}

.divider{
    width:1px;
    align-self:stretch;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.16), rgba(255,255,255,0));
    opacity:.85;
}

/* 月桂在文字左右 */
.label-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    width:auto;
}
.laurel-half{
    width:88px; height:36px;
    opacity:.95;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.20))
    drop-shadow(0 0 10px rgba(255,255,255,.06));
    flex:0 0 auto;
}

.label{
    font-size:clamp(13px, 1vw, 18px);
    opacity:.95;
    line-height:1.2;
    white-space:nowrap;
}

.mid-lines{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
}
.mid-lines .line1{
    font-size:clamp(13px, 1vw, 18px);
    font-weight:700;
    opacity:.95;
    white-space:nowrap;
}
.mid-lines .line2{
    font-size:clamp(14px, 1.15vw, 20px);
    font-weight:850;
    opacity:.96;
    white-space:nowrap;
    letter-spacing:.5px;
}

.value{
    position:relative;
    display:inline-flex;
    align-items:baseline;
    justify-content:center;
    gap:2px;
    font-size:clamp(22px, 2.05vw, 36px);
    font-weight:950;
    letter-spacing:.6px;
    padding:4px 10px;
    border-radius:999px;
    background: rgba(255,255,255,.06);
    box-shadow: 0 14px 40px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.10);
    overflow:hidden;
}

.value.shine::after{
    content:"";
    position:absolute;
    top:-30%;
    left:-40%;
    width:40%;
    height:160%;
    transform: skewX(-18deg);
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.33), rgba(255,255,255,0));
    animation: sweep 1.0s ease-out 1 forwards;
}
@keyframes sweep{
    from{ left:-40%; opacity:0; }
    30%{ opacity:1; }
    to{ left:120%; opacity:0; }
}

.suffix{ font-weight:950; font-size:.85em; opacity:.95; margin-left:2px; }

/*@media (max-width: 860px){*/
/*    .hero{ height:min(62vh, 620px); }*/
/*    .stats-wrap{ flex-direction:column; gap:14px; }*/
/*    .divider{ display:none; }*/
/*    .label, .mid-lines .line1, .mid-lines .line2{ white-space:normal; }*/
/*    .laurel-half{ width:76px; height:32px; }*/
/*}*/

/* =========================
   glass-bar 响应式总控（追加到CSS末尾）
   ========================= */

/* 1) 用变量控制整体缩放：小屏更小，大屏恢复 */
.hero .glass-bar{
    --gb-scale: clamp(.86, 0.72 + 0.02 * 10vw, 1);   /* 0.86~1 之间平滑变化 */
    --gb-gap: clamp(10px, 2.2vw, 80px);              /* 横向间距线性缩放 */
    --gb-pad-y: clamp(10px, 1.6vw, 18px);
    --gb-pad-x: clamp(10px, 1.8vw, 14px);
    --gb-radius: clamp(16px, 2.2vw, 22px);

    width: min(1120px, calc(100vw - 28px));
    margin: 0 auto;
    padding: var(--gb-pad-y) var(--gb-pad-x);
    border-radius: var(--gb-radius);
}

/* 2) 三列布局：默认横排 */
.hero .glass-bar .stats-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gb-gap);

    /* 所有元素按比例缩放（包含文字、数字、SVG等） */
    transform: scale(var(--gb-scale));
    transform-origin: center bottom;
}

/* 3) 每一列的内部间距也跟着缩放 */
.hero .glass-bar .stat{
    gap: clamp(6px, 1.2vw, 10px);
}

/* 4) 月桂、文字、数字按比例一起缩放（用 clamp + 继承 transform 双保险） */
.hero .glass-bar .laurel-half{
    width: clamp(40px, 7vw, 88px);
    height: clamp(18px, 3.2vw, 36px);
}

.hero .glass-bar .label{
    font-size: clamp(12px, 1.3vw, 18px);
    /*white-space: normal;          !* 允许换行 *!*/
    text-align: center;
    word-break: break-word;
}

.hero .glass-bar .mid-lines .line1{
    font-size: clamp(12px, 1.3vw, 18px);
    /*white-space: normal;          !* 允许换行 *!*/
    text-align: center;
    word-break: break-word;
}

.hero .glass-bar .mid-lines .line2{
    font-size: clamp(13px, 1.45vw, 20px);
    /*white-space: normal;          !* 允许换行 *!*/
    text-align: center;
    word-break: break-word;
}

/* 数字整体缩放 */
.hero .glass-bar .value{
    font-size: clamp(18px, 2.2vw, 36px);
    padding: clamp(3px, .6vw, 6px) clamp(8px, 1.1vw, 10px);
}
.hero .glass-bar .suffix{
    font-size: .85em;
}

/* 5) 小屏：自动竖排 + 间距缩小 + 分割线隐藏 */
@media (max-width: 860px){
    .hero .glass-bar{
        --gb-scale: clamp(.82, 0.70 + 0.03 * 10vw, .94);
        --gb-gap: clamp(10px, 2.8vw, 18px);
        top:60%;
    }

    /*.hero .glass-bar .stats-wrap{*/
    /*    flex-direction: column;*/
    /*    align-items: center;*/
    /*}*/

    .hero .glass-bar .divider{
        display: none;
    }

    .hero .title123{
        position:absolute;
        top:5%;
        left:0; right:0;
        text-align:center;
        font-size:clamp(10px, 3.2vw, 52px);
        font-weight:900;
        color:#2f7de1;
        letter-spacing:2px;
        text-shadow:0 12px 36px rgba(0,0,0,.22);
        padding:0 16px;
        z-index:2;
    }
}