/* =====================================================
CULINOVA 商用厨房智能温控控制器官网
字体：中文 Noto Sans SC / 英文 Inter
核心修复：移除1600px断点固定字号，全屏幕流体自适应文字
===================================================== */
/* 先声明本地字体，本地存在优先加载，不存在自动降级 */
@font-face {
    font-family: "SourceHan";
    font-display: swap;
    src: local("Noto Sans SC"), local("Microsoft YaHei");
}

/* 谷歌字体仅作为备用，国内打不开时会自动使用系统黑体，不会400空白文字 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

/*统一颜色、间距、字号变量，方便全局维护*/
:root {
    --bg-dark: #03070d;
    --bg-dark2: #07121c;
    --bg-deep: #02050b;
    --gold: #c89b5b;
    --gold-light: #e4bd83;
    --gold-trans-12: rgba(200, 155, 91, .12);
    --gold-trans-25: rgba(200, 155, 91, .25);
    --gold-trans-40: rgba(200, 155, 91, .4);
    --orange: #ff9d3d;
    --blue: #43b8ff;
    --text-white: #ffffff;
    --text-gray: #9da5ad;
    --text-light-gray: #c0c5ca;
    --border-line: rgba(255, 255, 255, .12);

    /* 统一排版核心变量（全站格式统一关键） */
    --container-max: 1500px;
    /* 内容最大宽度，所有模块统一 */
    --container-padding: clamp(30px, 5vw, 70px);
    /* 左右留白自适应 */
    --section-gap: clamp(80px, 10vw, 130px);
    /* 区块上下统一间距 */
}

/* 通用容器（备用，页面暂时没用到） */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* 全局重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: clamp(14px, 1vw, 16px);
    /*、全局基础流体字号 */
    scroll-behavior: smooth;
    scroll-padding-top: 140px;
}

body {
    background: var(--bg-dark);
    color: var(--text-white);
    font-family: Inter, "SourceHan", "Microsoft YaHei", sans-serif;
    line-height: 1.75;
}

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

img {
    display: block;
    max-width: 100%;
    object-fit: cover;
}

ul,
li {
    list-style: none;
}

/* 统一标题字号体系，替换所有分散clamp */
h1 {
    font-size: clamp(38px, calc(32px + 3vw), 90px);
    line-height: 1.05;
    font-weight: 600;
}

h2 {
    font-size: clamp(28px, 4vw, 56px);
    line-height: 1.1;
    font-weight: 700;
}

h3 {
    font-size: clamp(22px, 2.5vw, 32px);
    font-weight: 600;
}

h4 {
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 600;
    letter-spacing: 1.5px;
}

p {
    font-size: clamp(14px, 0.6vw, 16px);
    color: var(--text-gray);
    line-height: 1.8;
}

small,
.label {
    font-size: clamp(11px, 0.4vw, 12px);
    letter-spacing: 3px;
    color: var(--gold);
    text-transform: uppercase;
}





/*================导航栏 Header================*/

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: clamp(70px, 8vh, 76px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--container-padding);
    background: linear-gradient(180deg, rgba(2, 6, 12, .95), rgba(2, 6, 12, .15));
    backdrop-filter: blur(6px);
}

.logo {
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
    /* 核心：基线对齐 */
    gap: 16px;
    text-decoration: none;
    color: #fff;
}

/* logo 图片放大，最大46px，导航栏内更醒目 */
.logo img {
    height: clamp(32px, 3.5vw, 46px);
    width: auto;
    display: block;
}

/* 右侧公司名文字，字号放大，更清晰 */
.logo span {
    font-size: clamp(12px, 0.9vw, 14px);
    font-weight: 400;
    letter-spacing: 0.5px;
    color: #c0c5ca;
    white-space: nowrap;
}

.nav {
    display: flex;
    gap: clamp(30px, 4vw, 50px);
    color: #fff;
    font-size: clamp(16px, 1vw, 18px);
    text-transform: uppercase;
    margin-left: auto;
    margin-right: clamp(40px, 4vw, 50px);
    /*导航和按钮之间的空隙、自适应*/
    flex-shrink: 0;
}

.nav a {
    position: relative;
    transition: .3s;
    white-space: nowrap;
}

.nav a:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 1px;
    background: var(--gold);
    transition: .3s;
}

.nav a:hover,
.nav a.active {
    color: var(--gold);
}

.nav a:hover:after,
.nav a.active:after {
    width: 100%;
}

.header-btn {
    padding: clamp(10px, 1vw, 11px) clamp(20px, 2vw, 28px);
    border-radius: 30px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    color: #111;
    font-size: clamp(14px, 0.6vw, 12px);
    letter-spacing: .5px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.header-btn:before {
    content: "";
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .25);
    transition: .4s;
}

.header-btn:hover:before {
    left: 100%;
}

/* 滚动变色 */
.header.scrolled {
    background: rgba(2, 6, 12, .98);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

/* 移动端汉堡 */
.menu-btn {
    width: 28px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    display: none;
}

.menu-btn span {
    display: block;
    height: 1px;
    width: 100%;
    background: #fff;
    transition: .3s;
}

.menu-btn:hover span {
    background: var(--gold);
}

/* 搜索按钮 */
.search-btn {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: .3s;
}

.search-btn:hover {
    color: var(--gold);
}

/* =====================================================
   导航栏语言切换
===================================================== */
.language-switcher {
    position: relative;
    flex-shrink: 0;
    margin-left: clamp(12px, 1.5vw, 24px);
}

/* 当前语言按钮 */
.language-current {
    min-width: 68px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
    font-family: Inter, "Noto Sans SC", "Microsoft YaHei", sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    cursor: pointer;
    transition:
        color .3s ease,
        border-color .3s ease,
        background .3s ease;
}

.language-current:hover {
    color: var(--gold);
    border-color: var(--gold);
    background: rgba(200, 155, 91, .08);
}

/* 下拉箭头 */
.language-arrow {
    width: 6px;
    height: 6px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .3s ease;
}

/* 下拉菜单 */
.language-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 110px;
    padding: 6px;
    background: rgba(3, 7, 13, .97);
    border: 1px solid rgba(200, 155, 91, .35);
    border-radius: 4px;
    box-shadow:
        0 12px 35px rgba(0, 0, 0, .45);
    backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;
    z-index: 1100;
}

/* hover 打开下拉 */
.language-switcher:hover .language-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.language-switcher:hover .language-arrow {
    transform: rotate(225deg) translateY(-2px);
}

/* 语言选项 */
.language-option {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 9px 12px;
    border-radius: 3px;
    color: #c0c5ca;
    font-size: 13px;
    letter-spacing: .5px;
    cursor: pointer;
    transition:
        color .25s ease,
        background .25s ease;
}

.language-option:hover {
    color: #ffffff;
    background: rgba(200, 155, 91, .12);
}

.language-option.active {
    color: var(--gold);
    background: rgba(200, 155, 91, .08);
}

/* =====================================================
   小屏幕适配
===================================================== */
@media (max-width: 900px) {
    .language-switcher {
        margin-left: 10px;
    }

    .language-current {
        min-width: 58px;
        height: 34px;
        padding: 0 10px;
        font-size: 12px;
    }
}



/*================Hero首屏（核心自适应文字）================*/
.hero {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 var(--container-padding);
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 45%, var(--gold-trans-12), transparent 28%),
        linear-gradient(120deg, var(--bg-deep), var(--bg-dark) 55%, #050a12);
}

#particle-container {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

#particle-container canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-content {
    position: relative;
    z-index: 2;
    animation: heroFade 1.2s ease forwards;
}

/* =========================
   首页 Hero 标题
========================= */
.hero-title {
    font-family:
        Inter,
        "Noto Sans SC",
        "Microsoft YaHei",
        sans-serif;
    font-size: clamp(38px, calc(32px + 3vw), 90px);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: 1px;
    color: #ffffff;
    margin: 0;
}

/* 第一行 白色 */
.hero-title-line-1 {
    color: #ffffff;
}

/* 第二行 金色 */
.hero-title-line-2 {
    color: var(--gold);
    
}

/* 中文：取消字间距 */
html[lang="zh-CN"] .hero-title {
    letter-spacing: 0;
    max-width: min(630px, 52vw);
}

/* 英文：保留字间距 */
html[lang="en"] .hero-title {
    letter-spacing: 1px;
    max-width: min(580px, 52vw);
}


.hero-desc {
    margin: clamp(20px, 2.5vw, 32px) 0;
    color: var(--text-light-gray);
    max-width: 420px;
}

/* =====================================================
   首页统一按钮
   探索产品 / 产品详情 / 查看更多产品
   ===================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    min-width: 180px;
    height: 52px;

    padding: 0 30px;

    border: 1px solid var(--gold);

    color: #fff;
    background: transparent;

    font-family:
        Inter,
        "Noto Sans SC",
        "Microsoft YaHei",
        sans-serif;

    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1px;

    white-space: nowrap;
    text-decoration: none;

    transition: 0.3s ease;

    margin-top: clamp(30px, 4vw, 40px);
}

.btn:hover {
    background-color: var(--gold);
    color: #000;
}

.btn:hover {
    background-color: var(--gold);
    color: #000;
}

/* 滚动提示 */
.scroll-tip {
    position: absolute;
    left: var(--container-padding);
    bottom: clamp(120px, 15vh, 190px);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #aaa;
    font-size: 11px;
    letter-spacing: 2px;
}

.scroll-tip:before {
    content: "";
    width: 1px;
    height: 45px;
    background: var(--gold);
}

/* 入场动画 */
@keyframes heroFade {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =====================================================
模块3：四大优势栏 feature-section 自适应间距可控版
===================================================== */
.feature-section {
    width: 100%;
    max-width: unset;
    margin: 0;
    background: var(--bg-dark);
    border-top: 1px solid var(--gold-trans-25);
    border-bottom: 1px solid var(--gold-trans-25);
    padding: clamp(30px, 4vw, 50px) 0;
    /* 修复文字红蓝重影虚影 */
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.feature-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    /* ========== ① 整栏左右留白（和页面其他模块对齐） ========== */
    /* clamp(最小值, 视窗自适应值, 最大值) */
    padding-left: clamp(24px, 4vw, 100px);
    padding-right: clamp(24px, 4vw, 70px);

    /* ========== ② 四个项目之间横向空隙（自由调） ========== */
    gap: clamp(12px, 3vw, 60px);
}

.feature-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(14px, 1.5vw, 18px);
    /* 图标和文字之间距离 */
    flex: 1 1 200px;
    /* 最小宽度200px，屏幕不够自动换行 */
    color: #fff;
    transition: .35s ease;
}

.feature-item:hover {
    transform: translateY(-5px);
}

.feature-icon {
    width: clamp(42px, 5vw, 64px);
    height: clamp(42px, 5vw, 64px);
    object-fit: contain;
    flex-shrink: 0;
    transition: .35s ease;
    filter: sepia(1) saturate(3) hue-rotate(340deg);
    /* 图标金色 */
}

.feature-item:hover .feature-icon {
    transform: scale(1.08);
}

.feature-text h4 {
    margin-bottom: 4px;
    font-size: clamp(18px, 1.8vw, 26px);
    letter-spacing: 2px;
    color: #fff;
}

.feature-text p {
    color: var(--text-gray);
    font-size: clamp(14px, 0.6vw, 16px);
}

/* =====================================================
模块4：EFFICIENCY 横幅标题区块（效果图红框模块）
===================================================== */
.efficiency {
    max-width: unset;
    margin: 80px 0 40px;
    padding-left: var(--container-padding);
    padding-right: 8vw;
}

.efficiency h2 {
    font-size: 56px;
    letter-spacing: 1px
}

.efficiency h2 span {
    color: var(--gold)
}

.efficiency p {
    margin-top: 30px;
    color: #8f98a5;
    max-width: 720px;
    line-height: 2
}

/* =====================================================
模块5：单图产品介绍 control-showcase
===================================================== */
.control-showcase {
    width: 100%;
    max-width: unset;
    margin: clamp(30px, 4vw, 60px) 0 clamp(80px, 8vw, 120px);
    /* 自适应左右边距，所有分辨率对齐首屏文字 */
    padding-inline: clamp(24px, 5vw, 70px);
    display: flex;
    /* 顶部对齐，文字位置固定不上下飘 */
    align-items: flex-start;
    /* 间隙自适应，大屏宽、小屏窄 */
    gap: clamp(40px, 5vw, 90px);
}

.control-image {
    /* 大屏图片占48%，小屏自动压缩 */
    flex: 0 0 clamp(42%, 48%, 52%);
}

.control-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: fill;
    /* 核心：完整展示整张图，绝不裁剪 */
    background-color: #08080b;
    /* 图片留白处填充页面深色，不突兀 */
    border: 1px solid var(--gold-trans-25);
}

.control-text {
    flex: 1;
    margin-top: 0px;
    /* 文字整体在图片的下Xpx */
}

/* 顶部型号 */
.control-text small {
    color: var(--gold);
    letter-spacing: 3px;
    font-size: clamp(14px, 1.2vw, 18px);
    /* 自适应字号 */
    display: block;
    margin-bottom: clamp(12px, 1.5vh, 24px);
}

/* =====================================================
   模块5：产品主标题
 *
 * 数据库换行 = 颜色分界
 * 网页显示 = 同一行
===================================================== */
.control-text h2 {
    font-size: clamp(32px, 4vw, 60px);
    line-height: 1.1;
    margin: 0 0 clamp(16px, 2vh, 30px) 0;

    /* 防止数据库换行被带到网页 */
    white-space: nowrap;
}

/* 第一部分：白色 */
.control-text h2 .title-white {
    color: #ffffff;
}

/* 第二部分：金色 */
.control-text h2 .title-gold {
    color: var(--gold);
}

/* 长描述段落 */
.control-text p {
    color: #9aa4b3;
    line-height: 1.75;
    font-size: clamp(14px, 0.9vw, 17px);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    /* 最多展示6行，超出省略 */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 底部按钮 */
.solution-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    min-width: 180px;
    height: 52px;

    margin-top: clamp(20px, 3vh, 36px);
    padding: 0 30px;

    border: 1px solid var(--gold);

    color: #fff;

    font-family:
        Inter,
        "Noto Sans SC",
        "Microsoft YaHei",
        sans-serif;

    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1px;

    white-space: nowrap;
    text-decoration: none;

    transition: 0.3s;
}

.solution-btn:hover {
    background: var(--gold);
    color: #000
}

/* =====================================================
模块6：产品案例展示 case-study
===================================================== */
.case-study {
    width: 100%;
    padding-inline: clamp(24px, 5vw, 70px);
    margin: clamp(50px, 6vw, 90px) 0;
}

.case-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: clamp(10px, 3vw, 45px);
}

.case-title label {
    display: block;
    color: #b99152;
    font-size: 11px;
    letter-spacing: 4px;
    /* margin-bottom: 20px; */
}

.case-title h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(32px, 4vw, 55px);
    line-height: 1.15;
    font-weight: 400;
    /* 字体粗细 */
}

.case-title h2 span {
    color: #c79a55;
    font-weight: 700;
}

.case-head .solution-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    min-width: 180px;
    height: 52px;

    padding: 0 30px;

    border: 1px solid rgba(210, 165, 80, .7);
    border-radius: 40px;

    color: #fff;

    font-family:
        Inter,
        "Noto Sans SC",
        "Microsoft YaHei",
        sans-serif;

    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1px;

    white-space: nowrap;
    text-decoration: none;

    transition: .3s;
}

/* 箭头样式 */
.case-head .solution-btn span {
    margin-left: 12px;
    font-size: 18px;
    display: inline-block;
    transition: .3s ease;
}

/* hover箭头右移动效 */
.case-head .solution-btn:hover span {
    transform: translateX(5px);
}

.case-head .solution-btn:hover {
    background: #b99152;
    color: #000;
}

.case-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows:
        clamp(240px, 24vw, 350px) clamp(200px, 20vw, 300px);
    gap: clamp(14px, 1.4vw, 18px);
}

.case-card {
    position: relative;
    overflow: hidden;
    background: #222;
    border: 3px solid rgba(99, 80, 60, .75);
}

.case-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    opacity: .85;
    transition: .5s;
}

.case-card:hover img {
    transform: scale(1.05);
}

.case-arrow {
    position: absolute;
    right: clamp(12px, 1.2vw, 20px);
    top: clamp(12px, 1.2vw, 20px);
    width: clamp(32px, 3vw, 45px);
    height: clamp(32px, 3vw, 45px);
    border-radius: 50%;
    border: 1px solid #c69a55;
    background: #05070b;
    color: #d2a45b;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: clamp(18px, 1.5vw, 24px);
    z-index: 5;
    transition: .3s ease;
    /* 给箭头添加平滑过渡 */
}

/* 悬浮卡片时，箭头放大 */
.case-card:hover .case-arrow {
    transform: scale(1.2);
    /* 放大倍数，数值越大箭头放得越大 */
}

.case-card p {
    position: absolute;
    left: clamp(16px, 2vw, 28px);
    bottom: clamp(15px, 2vw, 25px);
    margin: 0;
    color: #c89b5b;
    font-size: clamp(12px, 1vw, 16px);
    letter-spacing: 2px;
    line-height: 1.5;
}

.case-card p b {
    display: block;
    color: #ffffff;
    font-size: clamp(22px, 2.2vw, 32px);
    font-weight: 400;
    margin-top: 5px;
    letter-spacing: 0;
}

.case-card p b::after {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    margin-top: 12px;
    background: #b9955c;
}

.case-card.tall {
    grid-column: 3;
    grid-row: 1 / span 2;
}


/* 图片底部文字遮罩 */
.case-card:not(.wide),
.case-card.tall {
    position: relative;
    overflow: hidden;
}

/* 底部渐变蒙版：只在卡片底部区域，向上渐隐，图片上半部分完全不遮挡 */
.case-card:not(.wide)::before,
.case-card.tall::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 190px;
    background: linear-gradient(to top, rgba(0,0,0,0.90), rgba(0,0,0,0));
    pointer-events: none;
    z-index: 2;
}

/* 图片铺满 */
.case-card:not(.wide) img,
.case-card.tall img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 文字层：浮在蒙版上方，移除自身背景 */
.case-card:not(.wide) p,
.case-card.tall p {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 0 28px 25px;
    box-sizing: border-box;
    color: #c89b5b;
    z-index: 3;
}


.case-card.wide {
    grid-column: 1 / span 2;
    grid-row: 2;
    height: 100%;
    min-height: 0;
    display: flex;
}

/* 左侧图片区域：铺满60%宽度 */
.case-card.wide .case-image {
    width: 60%;
    overflow: hidden;
}

/* 图片自适应填满容器，无黑边 */
.case-card.wide .case-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 右侧文字区域：文字沉到左下角 */
.case-card.wide .case-info {
    width: 40%;
    display: flex;
    align-items: flex-end;
    /* 垂直底部对齐 */
    justify-content: flex-start;
    /* 水平左侧对齐 */
    padding: 0 0 clamp(16px, 2vw, 28px) clamp(16px, 2vw, 28px);
    /* 仅保留左下内边距 */
    background: #05070b;
    border-left: 1px solid rgba(190, 150, 80, .3);
}

.case-card.wide .case-info p {
    position: static;
    margin: 0;
}

.case-card.wide p {
    position: static;
    background: none;
    padding: 0;
}

.experience {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: #05070b;
    border: 1px solid rgba(190, 150, 80, .35);
}

.experience strong {
    color: #c69a55;
    font-size: clamp(45px, 5vw, 75px);
    font-weight: 300;
}

.experience span {
    color: #ffffff;
    font-size: clamp(12px, 1vw, 16px);
    line-height: 1.5;
    letter-spacing: 2px;
}

/* 模块6底部粒子装饰条 */
.particle-divider {
    width: 100%;
    /* 突破模块左右内边距，实现全屏通栏 */
    margin-left: calc(-1 * clamp(24px, 5vw, 70px));
    margin-right: calc(-1 * clamp(24px, 5vw, 70px));
    height: clamp(100px, 12vw, 200px);
    position: relative;
    overflow: hidden;
    margin-top: clamp(20px, 2.5vw, 40px);

    /* 左右渐隐，和深蓝背景自然融合 */
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}

.particle-divider canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.case-title-line1 {
    color: #ffffff !important; /* 第一行：不止于此 →白色 */
}
.case-title-line2 {
    color: var(--gold); /* 第二行：全系列商用设备可选 →金色 */
}

/* =========================
移动端
========================= */
@media(max-width:900px) {
    .case-head {
        flex-direction: column;
        gap: 30px;
    }

    .case-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .case-card.tall,
    .case-card.wide {
        grid-column: auto;
        grid-row: auto;
        min-height: 280px;
    }

    .experience {
        min-height: 180px;
    }
}

/* =====================================================
模块7：服务图库 dream-service
===================================================== */

.dream-service {
    width: 100%;
    max-width: unset;
    margin: clamp(60px, 8vw, 100px) 0;
    padding-inline: clamp(24px, 5vw, 70px);
    display: flex;
    align-items: flex-start;
    gap: clamp(40px, 5vw, 90px);
}

.dream-gallery {
    flex: 0 0 clamp(42%, 48%, 52%);
    display: grid;
    grid-template-columns: 45% 50%;
    grid-template-rows: clamp(160px, 18vw, 320px) clamp(160px, 18vw, 320px);
    gap: 10px;

    overflow: visible !important;
    min-width: 0;
}

.dream-gallery .image-one {
    grid-column: 1;
    grid-row: 1;
}

.dream-gallery .image-two {
    grid-column: 1;
    grid-row: 2;
}

.dream-gallery .image-three {
    grid-column: 2;
    grid-row: 1 / span 2;
    height: 90%;
    align-self: flex-start;
    position: relative;
    overflow: visible !important;
}

/* 图片容器 */
.dream-gallery div {
    background: #222;
    position: relative;
    border: 1px solid var(--gold-trans-12);
    overflow: hidden;
    /* 不再额外撑高 */
    min-height: 0;
}

/* 图片只负责填充容器 */
.dream-gallery div img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.dream-gallery .db-image {
    position: relative;
    background: #222;
    border: 1px solid var(--gold-trans-12);
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}

.dream-gallery .db-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: center;
    border: 0;
}

.white-text-box {
    position: absolute;
    z-index: 20;
    right: -60%;
    bottom: 3%;
    width: clamp(120px, 12vw, 215px);
    height: clamp(50px, 5vw, 80px);
    /* 高度流体自适应 */
    min-height: unset !important;
    /* 清除其他样式带来的最小高度限制 */
    box-sizing: border-box;
    /* 内边距计入盒子总宽高 */
    padding: clamp(8px, 1vw, 15px);
    /* 盒子内部留白自适应 */
    background: #fff !important;
    /* 白色背景强制覆盖 */
    color: #000;
    font-size: clamp(7px, 1.1vw, 18px);
    /* 让字体参考白框自身宽度 */
    line-height: 1.4;
    overflow: hidden;
}

/* 文字区域防挤压换行 */
.dream-content {
    flex: 1;
    min-width: 0;
}

/* 型号 */
.dream-model {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: clamp(32px, 2.5vw, 42px);
    padding: 0 clamp(18px, 2vw, 28px);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 30px;
    color: #ffffff;
    font-size: clamp(12px, 0.8vw, 15px);
    letter-spacing: 2px;
    margin-bottom: clamp(8px, 1vw, 15px);
    background:
        rgba(255, 255, 255, .02);
}

/* 标题 */
.dream-content h2 {
    font-size: clamp(32px, 4vw, 60px);
    line-height: 1.25;
    margin: clamp(8px, 1vw, 15px) 0;
    color: #eee;
}

/*介绍*/
.dream-content p {
    color: #9098a5;
    line-height: 1.8;
    font-size: clamp(14px, 0.9vw, 17px);
}

/*描述*/
.dream-content ul {
    list-style: none;
    padding: 0;
    margin: clamp(18px, 2vw, 28px) 0;
    color: #ddd;
    line-height: 2;
    font-size: clamp(14px, 1vw, 18px);
}

.dream-content li {
    margin-bottom: 10px;
}

.dream-content li:before {
    content: '✓';
    color: var(--gold);
    margin-right: 12px;
}

/* =====================================================
   梦想服务模块「产品详情」
   与第一个「产品详情」按钮完全统一
   ===================================================== */

.dream-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    min-width: 180px;
    width: 180px;
    height: 52px;

    padding: 0 30px;

    margin-top: clamp(25px, 3vw, 45px);

    border: 1px solid var(--gold);
    border-radius: 0;

    color: #fff;
    background: transparent;

    font-family:
        Inter,
        "Noto Sans SC",
        "Microsoft YaHei",
        sans-serif;

    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1px;

    white-space: nowrap;
    text-decoration: none;

    transition: 0.3s ease;

    cursor: pointer;
}

.dream-btn:hover {
    background: var(--gold);
    color: #000;
}

/* 箭头 */
.dream-btn span {
    margin-left: 12px;
    font-size: 18px;
}

/* 触碰效果 */
.dream-btn:hover {
    background: #c89b5b;
    color: #000;
}

/* 箭头动画 */
.dream-btn:hover span {
    transform: translateX(5px);
}

@media(max-width:900px) {
    .dream-service {
        flex-direction: column;
    }

    .dream-gallery {
        flex: unset;
        width: 100%;
    }
}

/* =====================================================
模块8：页脚 Footer
===================================================== */
.footer {
    background: #05080d;
    color: #aaa;
    padding: 40px var(--container-padding);
    text-align: center;
}

/* =====================================================
全局响应式媒体查询（768手机 / 900平板 / 1600大屏）
===================================================== */
/* 超大屏适配 */
@media(min-width:1600px) {
    .feature-icon {
        width: 64px;
        height: 64px;
    }
}

/* 平板 900px以下 */
@media(max-width:900px) {

    .efficiency,
    .control-showcase,
    .case-study {
        padding: 0 30px
    }

    .control-showcase {
        flex-direction: column
    }

    .control-image {
        width: 100%
    }

    .case-grid {
        display: block
    }

    .case-card,
    .case-card.tall,
    .case-card.wide,
    .experience {
        height: 260px;
        margin-bottom: 15px
    }

    .case-head {
        display: block
    }

    .case-head h2,
    .control-text h2,
    .efficiency h2 {
        font-size: 36px
    }

    .dream-service {
        grid-template-columns: 1fr
    }
}

/* 手机端768px以下 */
@media(max-width:768px) {
    .header {
        height: 70px;
        padding: 0 25px;
    }

    .logo img {
        height: 28px;
    }

    .logo span {
        font-size: 11px;
        letter-spacing: 0.3px;
    }

    .nav {
        display: none;
    }

    .menu-btn {
        display: flex;
    }

    .header-btn {
        padding: 10px 20px;
    }

    /* Hero手机垂直布局 */
    .hero {
        flex-direction: column;
        justify-content: center;
        padding-top: 80px;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-title {
        font-size: clamp(36px, 10vw, 44px);
    }

    /* 四大优势纵向堆叠 */
    .feature-bar {
        flex-direction: column;
        gap: 30px;
    }
}

@media(max-width:480px) {
    .logo span {
        display: none;
    }
}

/* =========================================================
   内页统一黑金首屏
   关于我们 / 产品 / 技术支持
   中文字体：Noto Sans SC
========================================================= */

.inner-page-hero {
    position: relative;
    width: 100%;
    min-height: clamp(560px, 72vh, 760px);
    display: flex;
    align-items: center;
    overflow: hidden;

    padding:
        clamp(110px, 13vh, 150px) clamp(30px, 5.2vw, 80px) clamp(70px, 8vh, 100px);

    background:
        radial-gradient(circle at 78% 70%,
            rgba(200, 155, 91, 0.08),
            transparent 23%),
        linear-gradient(120deg,
            #020202 0%,
            #030303 58%,
            #050505 100%);

    isolation: isolate;
}

/* 右下角金色点阵（已调整为图2效果） */
.inner-page-hero::after {
    content: "";
    position: absolute;
    /* 加宽横向范围，更贴合图2的横向点阵比例 */
    width: clamp(380px, 40vw, 700px);
    height: clamp(260px, 30vw, 520px);
    right: clamp(-80px, -2vw, 0px);
    /* 核心：增大负值，整体点阵向下偏移，更贴底部 */
    bottom: clamp(-120px, -8vw, -30px);
    opacity: 0.45;
    background-image:
        radial-gradient(circle,
            rgba(200, 155, 91, 0.7) 3px,
            transparent 3px);
    background-size:
        clamp(10px, 0.75vw, 14px) clamp(10px, 0.75vw, 14px);
    /* 核心：调整遮罩渐变色标，60%位置就完全透明
       点阵只保留右下角密集区域，向上快速淡出，和图2一致 */
    mask-image: linear-gradient(to top left,
            black 0%,
            rgba(0, 0, 0, .8) 25%,
            transparent 60%);
    -webkit-mask-image: linear-gradient(to top left,
            black 0%,
            rgba(0, 0, 0, .8) 25%,
            transparent 60%);
    pointer-events: none;
    z-index: -1;
}

/* 首屏内容 */
.inner-page-hero-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1500px;

    margin: 0 auto 0 0;

    animation: innerHeroFade 1s ease both;
}

/* 大标题 */
.inner-page-title {
    margin: 0;

    font-family:
        "Noto Sans SC",
        "SourceHan",
        "Microsoft YaHei",
        sans-serif;

    font-size: clamp(48px,
            6vw,
            96px);

    line-height: 1.08;

    font-weight: 700;

    letter-spacing: clamp(4px, 0.4vw, 12px);

    color: #ffffff;
}

/* =========================================================
   英文状态：内页首屏标题取消中文式大字间距
========================================================= */

html[lang="en"] .inner-page-title {
    letter-spacing: -0.02em;
}

/* 第二行金色标题 */
.inner-page-title .gold {
    display: block;

    margin-top: clamp(12px, 1.2vw, 24px);

    color: #c89b5b;

    font-weight: 700;

    text-shadow:
        0 0 25px rgba(200, 155, 91, .08);
}


.inner-page-line {
    width: clamp(240px, 32vw, 520px);
    height: 28px;
    margin-top: clamp(26px, 3vw, 42px);
    position: relative;
    display: flex;
    align-items: center;
    overflow: visible;
}

/* 左侧小线段 */
.inner-page-line::before {
    content: "";
    width: clamp(40px, 4vw, 60px);
    height: 2px;
    background: linear-gradient(90deg,
            #e4bd83 0%,
            rgba(200, 155, 91, 0.65) 100%);
    box-shadow: 0 0 8px rgba(200, 155, 91, 0.45);
    margin-right: clamp(12px, 1.5vw, 24px);
    flex-shrink: 0;
}

/* 中间主光晕：天然纺锤形，中间粗亮，两端细暗 */
.inner-page-line::after {
    content: "";
    flex: 1;
    height: 100%;
    display: block;
    background: radial-gradient(
            /* 水平60%、垂直25%：扁椭圆，天然中间粗、两头尖 */
            ellipse 60% 25% at 50% 50%,
            #ffffff 0%,
            /* 正中心最亮 */
            #fff3d6 8%,
            #e4bd83 20%,
            rgba(200, 155, 91, 0.5) 50%,
            transparent 85%
            /* 两端自然收尖消失 */
        );
    filter: blur(0.6px);
}

/* 描述文字 */
.inner-page-desc {
    max-width: 720px;

    margin-top: clamp(25px, 2.5vw, 36px);

    font-family:
        "Noto Sans SC",
        "SourceHan",
        "Microsoft YaHei",
        sans-serif;

    font-size: clamp(14px,
            1vw,
            18px);

    line-height: 2;

    font-weight: 400;

    letter-spacing: 0.03em;

    color: #d0d0d0;

    white-space: nowrap;
}


/* 左侧极淡装饰光 */
.inner-page-hero-content::before {
    content: "";

    position: absolute;

    left: 0;
    top: 48%;

    width: clamp(200px, 18vw, 320px);
    height: 90px;

    transform: translateY(-50%);

    background:
        radial-gradient(ellipse,
            rgba(200, 155, 91, .08),
            transparent 70%);

    filter: blur(18px);

    pointer-events: none;

    z-index: -1;
}


/* 页面底部金色细线 */
.inner-page-hero {
    border-bottom: 1px solid rgba(200, 155, 91, .45);
}


/* 首屏动画 */
@keyframes innerHeroFade {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   中文字体强化
========================================================= */

.inner-page-hero,
.inner-page-hero h1,
.inner-page-hero p {
    font-family:
        "Noto Sans SC",
        "SourceHan",
        "Microsoft YaHei",
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/* =========================================================
   平板
========================================================= */

@media (max-width: 900px) {

    .inner-page-hero {
        min-height: 620px;

        padding:
            120px 7vw 80px;
    }

    .inner-page-title {
        font-size: clamp(48px, 9vw, 72px);
    }

    .inner-page-desc {
        max-width: 600px;
    }

}


/* =========================================================
   手机
========================================================= */

@media (max-width: 600px) {

    .inner-page-hero {
        min-height: 580px;

        padding:
            120px 24px 70px;

        align-items: center;
    }

    .inner-page-title {
        font-size: clamp(42px,
                13vw,
                60px);

        line-height: 1.12;

        letter-spacing: -0.03em;
    }

    html[lang="en"] .inner-page-title {
        letter-spacing: -0.02em;
    }

    .inner-page-title .gold {
        margin-top: 4px;
    }

    .inner-page-line {
        width: 75%;
        margin-top: 25px;
    }

    .inner-page-desc {
        margin-top: 24px;

        font-size: 14px;

        line-height: 1.9;
    }

    .inner-page-hero::after {
        width: 330px;
        height: 300px;

        right: -120px;
        bottom: -70px;

        background-size: 10px 10px;

        opacity: .32;
    }

}


/* =========================================================
   超小屏
========================================================= */

@media (max-width: 380px) {

    .inner-page-hero {
        padding-left: 20px;
        padding-right: 20px;
    }

    .inner-page-title {
        font-size: 40px;
    }

    .inner-page-desc {
        font-size: 13px;
    }

}


/* =========================================
   JavaScript 禁用提醒
   ========================================= */

.noscript-warning {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999999;
    box-sizing: border-box;
    background: #0b0b0b;
    border-bottom: 1px solid rgba(212, 175, 55, 0.65);
    color: #ffffff;
    font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.noscript-warning__content {
    width: min(1200px, calc(100% - 40px));
    min-height: 64px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
}

.noscript-warning__icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(212, 175, 55, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d4af37;
    font-size: 16px;
    font-weight: 600;
}

.noscript-warning__content strong {
    display: block;
    margin-bottom: 3px;
    color: #d4af37;
    font-size: 14px;
    font-weight: 600;
}

.noscript-warning__content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    line-height: 1.6;
}

/* 手机端 */
@media (max-width: 768px) {

    .noscript-warning__content {
        width: calc(100% - 28px);
        min-height: 58px;
        gap: 10px;
    }

    .noscript-warning__icon {
        width: 26px;
        height: 26px;
        font-size: 14px;
    }

    .noscript-warning__content strong {
        font-size: 13px;
    }

    .noscript-warning__content p {
        font-size: 11px;
        line-height: 1.5;
    }
}