/* ================================================================
   ★ 全局主题变量（仅保留深色主题）
   ================================================================ */
:root {
    --bg-body: #0a0f14;
    --bg-card: #12161c;
    --bg-nav: rgba(10, 15, 20, 0.92);
    --bg-footer: #05080c;
    --border-subtle: #2a2f38;
    --text-primary: #eef2f8;
    --text-secondary: #8a9bb0;
    --text-muted: #5a6a7a;
    --accent: #3b82f6;
    --accent2: #8b5cf6;
    --accent3: #06b6d4;
    --transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1);
    --shadow-color: rgba(0, 0, 0, 0.4);
    --border-light: rgba(255, 255, 255, 0.06);
    --bg-hover: rgba(255, 255, 255, 0.04);
    --glass-bg: rgba(18, 22, 28, 0.55);
    --scrollbar-track: rgba(255, 255, 255, 0.02);
    --scrollbar-thumb: #3a4452;

    /* ================================================================
       字号规范（全站唯一来源）
       ----------------------------------------------------------------
       固定字号只允许用下面这些 token；标题类响应式字号用下面的
       --fs-* 语义 token。页面样式不要再写零散 px。
       ================================================================ */
    --fs-10: 10px;
    --fs-11: 11px;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-15: 15px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-20: 20px;
    --fs-22: 22px;
    --fs-24: 24px;
    --fs-28: 28px;
    --fs-32: 32px;
    --fs-36: 36px;
    --fs-40: 40px;
    --fs-48: 48px;
    --fs-56: 56px;

    /* 响应式字号：正文辅助、卡片标题、章节标题、Hero */
    --fs-lede: clamp(15px, 1.25vw, 18px);
    --fs-lede-lg: clamp(16px, 1.6vw, 22px);
    --fs-card-title: clamp(18px, 2vw, 28px);
    --fs-section-sm: clamp(22px, 5vw, 28px);
    --fs-mobile-title: clamp(28px, 6vw, 36px);
    --fs-section-title: clamp(28px, 3.2vw, 44px);
    --fs-page-title: clamp(32px, 4vw, 48px);
    --fs-hero: clamp(36px, 4vw, 56px);
    --fs-hero-lg: clamp(38px, 5.5vw, 64px);
    --fs-hero-xl: clamp(40px, 8vw, 76px);
    --fs-display: clamp(38px, 5.5vw, 80px);
    --fs-display-sm: clamp(30px, 8.4vw, 46px);
    --fs-title: clamp(27px, 3.6vw, 54px);
    --fs-title-sm: clamp(23px, 6.4vw, 34px);
    --fs-suffix: 0.6em;   /* 数字后缀等相对父级缩放的例外 */
}

/* ================================================================
   ★ 导航栏样式
   ================================================================ */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    /* 导航高度。与下面 .logo img 的高度是一对：logo 要在栏内留出上下呼吸空间，
       改这里时顺手看一眼那边（当前 64 / 30，上下各余 17px） */
    height: 64px;
    background: var(--bg-nav);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background 0.4s ease, border-color 0.3s ease;
}

.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.logo a {
    display: flex;
    align-items: center;
}
.logo img {
    /* 站点 logo 尺寸的唯一来源。
       原先各页面 <img id="logoImg"> 上还挂着 style="height:40px;width:auto" 内联样式，
       内联优先级高于此处，导致改 CSS 对全站无效 —— 那些内联样式已全部移除，
       现在只改这一个值即可（含由 backend/templates/_header*.html 生成的页面）。 */
    height: 30px;
    width: auto;
    transition: opacity 0.3s ease;
}

.desktop-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    margin-left: 40px;
    position: relative;
}
.nav-left {
    display: flex;
    align-items: center;
    gap: 28px;
}
.nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.desktop-nav a {
    color: var(--text-secondary);
    font-weight: 500;
    /* 原来用 var(--transition)（0.4s），颜色变化偏慢；导航这种小面积变色快一点更利落 */
    transition: color 0.22s ease;
    position: relative;
    font-size: var(--fs-14);
    /* 14px 下加一点点字距，中英文都更像"排版"而不是挤在一起 */
    letter-spacing: 0.02em;
    display: inline-block;
    line-height: 1.5;
    padding: 4px 0;
    margin: 0 4px;
    text-decoration: none;
}
.desktop-nav a:hover {
    color: var(--text-primary);
}
.desktop-nav a::after {
    content: '';
    position: absolute;
    /* 下划线与文字的间距 = 本值 + 链接的 padding-bottom(4px) - 线高(2px)。
       原为 -6px（下划线上沿落在文字下方 8px，视觉约 10px，显得脱节），
       收到 -2px 后为 4px（视觉约 6px），也顺带与产品详情页
       .tab-bar .tab-btn.active::after 的 -2px 取得一致。 */
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    border-radius: 2px;              /* 端点柔化，细线不再像硬切 */
    background: var(--accent);
    transition: width 0.28s cubic-bezier(0.2, 0.9, 0.4, 1);
}
.desktop-nav a:hover::after,
.desktop-nav a.active::after {
    width: 100%;
}
.desktop-nav a.active {
    color: var(--text-primary);
}

/* ★ 语言切换按钮（无边框）
   注意：.desktop-nav a 的优先级高于 .lang-switch，所以这里的 font-size / padding
   要写在下面的 .desktop-nav a.lang-switch 里才生效（原先那两条声明一直是失效的）。 */
.lang-switch {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-secondary);
    transition: 0.25s ease;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    line-height: 1.4;
}
.desktop-nav a.lang-switch {
    font-size: var(--fs-13);
    letter-spacing: 0.04em;          /* 两三个字母的按钮，拉开一点更精致 */
    padding: 4px 2px;
}
.lang-switch:hover {
    color: var(--accent);
}
.lang-switch::after {
    display: none !important;
}
.lang-switch:hover::after {
    width: 0 !important;
}

.nav-divider {
    width: 1px;
    height: 18px;                    /* 22px 是配 15px 字号的，字号降了同比收窄 */
    background: var(--border-subtle);
    flex-shrink: 0;
    transition: background 0.3s ease;
    opacity: 0.5;
}

.nav-item-has-dropdown {
    position: relative;
}
.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) !important;  /* ★ 强制水平居中 */
    background: var(--bg-card);              /* ★ 卡片背景 */
    border: 1px solid var(--border-subtle);  /* ★ 边框 */
    border-radius: 12px;                     /* ★ 圆角 */
    padding: 6px 0;                          /* 原 8px 0，与下面的 item 一起收窄 */
    min-width: 180px;                        /* 原 200px，同步收窄（最宽项为"PA系列行星电机"） */
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    box-shadow: 0 12px 28px var(--shadow-color); /* ★ 阴影 */
    z-index: 999;
}
.nav-item-has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
}
.dropdown-menu li a {
    display: block;
    /* 原 10px 24px。收到 7px 18px 后单项高 = 13px × 1.5 行高 + 14px = 33.5px（原 39.5px），
       三个项的面板高 114.5px（原 136.5px），与导航降到 64px 的比例相称。
       字号仍保持 13px（次一级层级）：只收盒模型、不缩字，避免可读性下降。 */
    padding: 7px 18px;
    color: var(--text-secondary);
    transition: 0.2s;
    white-space: nowrap;
    font-weight: 400;
    font-size: var(--fs-13);                 /* 次一级字号，与一级菜单拉开层级 */
    letter-spacing: 0.02em;
    line-height: 1.5;
    text-decoration: none;          /* ★ 去掉默认下划线 */
}
/* 下拉项不加悬停下划线：它本身有蓝色背景反馈，且 ::after 会锚在下拉项自身，
   在面板里多画一条蓝线（一级菜单的 ::after 规则会连带命中这里） */
.dropdown-menu li a::after {
    display: none !important;
}
.dropdown-menu li a:hover {
    background: var(--accent) !important; /* ★ 悬停蓝色背景 */
    color: #fff !important;              /* ★ 白色文字 */
    border-radius: 6px;                  /* ★ 圆角 */
    text-decoration: none;
}
.dropdown-menu li a.active {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* 移动端 */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    cursor: pointer;
    z-index: 200;
}
.menu-toggle span {
    background: var(--text-primary);
    height: 2px;
    border-radius: 2px;
    transition: var(--transition);
}
.menu-toggle.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}
.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

.mobile-menu-mask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: 0.25s;
}
.mobile-menu-mask.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-panel {
    display: none;
    position: fixed;
    top: 0;
    right: -280px;
    width: 260px;
    height: 100%;
    background: var(--bg-card);
    z-index: 999;
    box-shadow: -4px 0 20px var(--shadow-color);
    transition: right 0.25s ease;
    flex-direction: column;
    border-left: 1px solid var(--border-subtle);
}
.mobile-menu-panel.active {
    right: 0;
}
.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid var(--border-subtle);
    font-weight: 600;
    color: var(--text-primary);
}
.close-menu {
    background: none;
    border: none;
    font-size: var(--fs-28);
    color: var(--text-secondary);
    cursor: pointer;
}
.mobile-menu-list {
    list-style: none;
    padding: 12px 0;
}
.mobile-menu-list li a {
    display: block;
    padding: 14px 24px;
    color: var(--text-secondary);
    transition: 0.2s;
    font-size: var(--fs-15);
    border-bottom: 1px solid var(--border-light);
}
.mobile-menu-list li a:hover {
    background: var(--bg-hover);
    color: var(--accent);
    padding-left: 32px;
}
.mobile-menu-list .menu-item-has-children {
    position: relative;
}
.mobile-menu-list .menu-item-has-children .sub-menu {
    list-style: none;
    padding-left: 20px;
}
.mobile-menu-list .menu-item-has-children .sub-menu li a {
    padding-left: 40px;
    font-size: var(--fs-13);
    border-bottom: 1px solid var(--border-light);
}
.mobile-menu-list .menu-item-has-children .sub-menu li a:hover {
    padding-left: 48px;
}
.mobile-menu-list .sub-menu li a.active {
    color: var(--accent);
    background: var(--bg-hover);
}
/* 一级项：文字在左（点它跳转），文字右边整片空白 + 箭头（点它展开折叠）。
   把箭头推到行尾，两片点击区在视觉上才分得开（见 common.js 里的点击分区逻辑）。 */
.mobile-menu-list .menu-item-has-children > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.mobile-menu-list .arrow {
    font-size: var(--fs-12);
    transition: transform 0.2s;
    display: inline-block;
}
.mobile-menu-list .menu-item-has-children.open .arrow {
    transform: rotate(180deg);
}
.mobile-menu-list .menu-item-has-children .sub-menu {
    display: none;
}
.mobile-menu-list .menu-item-has-children.open .sub-menu {
    display: block;
}
body.menu-open {
    overflow: hidden;
}

/* ★ 移动端 */
@media (max-width: 768px) {
    .desktop-nav {
        display: none;
    }
    .menu-toggle {
        display: flex;
    }
    .mobile-menu-mask {
        display: block;
    }
    .mobile-menu-panel {
        display: flex;
    }

    .nav-right .lang-switch .label-text {
        display: none;
    }
    .nav-right .lang-switch .icon {
        display: inline;
    }

    .lang-switch {
        min-width: auto;
        height: 36px;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
    }
    .lang-switch .icon {
        font-size: var(--fs-16);
    }
    /* 窄屏语言按钮：同样要用高优先级选择器，否则保持桌面那档字号 */
    .desktop-nav a.lang-switch {
        padding: 0 6px;
        font-size: var(--fs-12);
    }
}

/* ===== 页脚二维码（右侧，与版权行同一行；窄屏自动换行到下方） ===== */
.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.footer-main {
    text-align: center;
}

.footer-qr {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 150px;
}

.footer-qr img {
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 0 0 1px var(--border-subtle);
    object-fit: contain;
}

.footer-qr-tip {
    font-size: var(--fs-12);
    line-height: 1.4;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    text-align: center;
}

/* 页脚联系信息（二维码右侧，5 行：网址/咨询/招聘/技术支持/地址） */
.footer-contact {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-content: center;
    justify-items: start;
    gap: 3px 10px;
    font-size: var(--fs-13);
    line-height: 1.6;
    text-align: left;
}

.footer-contact .fc-label {
    color: var(--text-muted);
    white-space: nowrap;
}

.footer-contact .fc-value {
    color: var(--text-secondary);
}

/* 网址/咨询/招聘 三个链接去掉默认下划线（与备案号链接一致，仅在悬停时出现下划线） */
.footer-contact a {
    text-decoration: none;
}

/* 桌面端：页脚固定为「主信息 / 二维码 / 联系方式」三列。
   英文地址、邮箱、网址往往比中文长很多，如果继续用 flex-wrap，
   联系块会被整体挤到下一行；改成 grid 后只让值列内部折行。 */
@media (min-width: 769px) {
    .footer-inner {
        display: grid;
        grid-template-columns: minmax(0, 0.85fr) auto minmax(0, 1.15fr);
        align-items: center;
        justify-content: center;
        gap: 40px;
    }
    .footer-main {
        min-width: 0;
    }
    .footer-contact {
        width: 100%;
        min-width: 0;
        grid-template-columns: max-content minmax(0, 1fr);
        justify-content: start;
    }
    .footer-contact .fc-value,
    .footer-contact a {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

@media (max-width: 768px) {
    .footer-inner {
        gap: 22px;
    }
    .footer-qr img {
        width: 84px;
        height: 84px;
    }
    /* 联系块共 5 行、地址是工商全称，窄屏下必须允许它收缩：
       默认的 grid-template-columns: auto auto 会按 max-content 撑到 363px，
       比 360/375 机型的容器还宽 —— 结果是二维码被挤成单独一行（页脚高出一大截），
       或者直接撑出横向滚动条。
       这里 max-width 直接扣掉"二维码(88) + 间距(22)"再留 4px 余量，
       让两者在任何窄屏下都能并排；值列用 minmax(0, …) 允许折行。 */
    .footer-contact {
        justify-content: center;
        font-size: var(--fs-12);
        grid-template-columns: auto minmax(0, max-content);
        min-width: 0;
        max-width: calc(100% - 114px);
    }
    .footer-contact .fc-value,
    .footer-contact a {
        overflow-wrap: anywhere;
    }
}

/* ==================================================================
   业务展示模块统一容器（全站唯一来源）
   ------------------------------------------------------------------
   原先每个业务模块各自抄了一份“max-width: 1400px; margin: 0 auto;
   padding: … 5%;”，值虽大多相同却分散在 6 个页面与 4 个样式表里，
   任何一处改动都会造成页面之间宽度/留白漂移（新闻详情就因此掉队成
   1000px）。现在把宽度与横向留白收敛到这里，各模块只保留自己的
   纵向节奏、背景与层级。

   用法：给模块最外层容器元素加 class="container"，例如
         <section class="section container">

   三条约束（写新样式时请遵守）：
   1) 各模块自有规则不得再写带左右值的 padding 简写。同优先级下
      “后加载者胜”，页面内联 <style> 在 common.css 之后，会覆盖本类；
      纵向节奏请一律用 padding-top / padding-bottom。
   2) 只给“最外层”容器加本类。已处在带 5% 留白的整幅色带
      （如 .map-section / .culture-section / .achievement-section /
      .highlight-section / .page-hero）内部的元素不要再加，否则
      左右留白会叠加一倍。这类色带自身的 5% 留白 + 内部
      “max-width: 1400px; margin: 0 auto” 的写法在数学上与 .container
      完全对齐：色带内层左边距 = 0.05W + (W-0.1W-1400)/2 = (W-1400)/2，
      而 .container 左边距 = max(0.05W, (W-1400)/2)，两者在
      视口宽 ≥ 1556px 时相等。
   3) 需要窄行宽的正文类阅读列（如新闻详情的 .detail-header / .detail-content，
      由 news-detail.css 用子选择器再收窄到 1000px）在本类内部收窄，
      不要把容器本身改窄。
   ================================================================== */
.container {
    box-sizing: border-box;
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 5%;
    padding-right: 5%;
}

/* 移动端：横向留白用百分比，因此 5% 会随视口自动收窄
   （768px 视口 → 38.4px，375px 视口 → 18.75px），无需额外断点。
   纵向节奏按“断点收窄时同比压减”的约定在下方统一处理：
   80→40、60→32、40→28、30→24、20→16。
   这里用 .container.模块类 的双类选择器（优先级 0,2,0），
   以便在各页内联 <style>（单类 0,1,0，且在 common.css 之后加载）
   的既有规则之上稳定生效。
   各模块桌面 → 移动端：.section 80/80→40/40；.about-company 80/60→40/32；
   .timeline-section 40/80→28/40；.research-section 20/60→16/32；
   .pain-points-section 60/80→32/40；.applications-section 40/80→28/40；
   .section-tech 60/60→32/32；.section-data / .section-drive-control 40/60→28/32；
   .section-params 20/60→16/32；.product-page 40→28/28；
   .news-page / .news-detail-page / .detail-page 40/60→28/32；
   .contact-info-top 30/20→24/16；.contact-bottom-wrapper 0/40→0/28。 */
@media (max-width: 768px) {
    .container.section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .container.pain-points-section {
        padding-top: 32px;
        padding-bottom: 40px;
    }
    .container.timeline-section,
    .container.applications-section {
        padding-top: 28px;
        padding-bottom: 40px;
    }
    .container.about-company {
        padding-top: 40px;
        padding-bottom: 32px;
    }
    .container.section-tech {
        padding-top: 32px;
        padding-bottom: 32px;
    }
    .container.section-data,
    .container.section-drive-control,
    .container.news-page,
    .container.news-detail-page,
    .container.detail-page {
        padding-top: 28px;
        padding-bottom: 32px;
    }
    .container.research-section,
    .container.section-params {
        padding-top: 16px;
        padding-bottom: 32px;
    }
    .container.product-page {
        padding-top: 28px;
        padding-bottom: 28px;
    }
    .container.contact-info-top {
        padding-top: 24px;
        padding-bottom: 16px;
    }
    .container.contact-bottom-wrapper {
        padding-top: 0;
        padding-bottom: 28px;
    }
}