/* =====================================================
   U2 漆面保护膜 · 品牌独立站
   设计系统（重构）：模仿 new.spacex.com 的「全屏媒体面板」形式
   暗色基底 / 全屏 hero·panel / 半透明固定导航 / 角落叠字 / 大字型
   品牌橙红 #F94314 作为唯一强调色
   ===================================================== */

:root {
    /* 色板（暗色基底） */
    --red: #F94314;            /* 品牌橙红 · 主色 */
    --red-bright: #FF6A3D;     /* 高亮橙红 */
    --red-dark: #C9350C;       /* 深橙红 */
    --red-deep: #7A2008;       /* 暗橙红 */

    --bg: #000000;             /* 页面基底（黑） */
    --bg-2: #0A0A0C;           /* 区块略亮 */
    --bg-3: #111114;           /* 卡片基底 */
    --ink: #FFFFFF;            /* 主文字（白） */
    --text: #ECECEE;           /* 正文 */
    --muted: #A7A7AD;          /* 次级文字 */
    --muted-2: #797983;        /* 更弱 */
    --line: rgba(255, 255, 255, 0.12);
    --line-strong: rgba(255, 255, 255, 0.22);

    /* 字体：D-DIN（SpaceX 同款，自托管）+ Noto Sans SC（中文回退）；全站统一，离线可用 */
    --font-display: 'D-DIN', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-body: 'D-DIN', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;

    /* 阴影与过渡 */
    --shadow-sm: 0 2px 14px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.55);
    --shadow-red: 0 10px 36px rgba(249, 67, 20, 0.32);
    --transition: all 0.3s ease;
    --nav-h: 68px;
}

/* SpaceX 同款字体 D-DIN（自托管，离线可用，无需联网） */
@font-face {
    font-family: 'D-DIN';
    src: url('../assets/fonts/D-DIN.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'D-DIN';
    src: url('../assets/fonts/D-DIN-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--bg);
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
/* <picture> 只做格式协商（WebP/JPEG 兜底），本身不生成盒子：
   若保留默认 inline 盒子，.panel-bg img / .story-figure img 等
   依赖包含块的 width/height 百分比会失效 */
picture { display: contents; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
h1, h2, h3, h4 { line-height: 1.15; }

.container {
    width: 100%;               /* 原来 min(1180px, 96%)，改为 100% */
    padding-left: 3%;          /* 左右各留 3% 边距 */
    padding-right: 3%;
}

/* ---------- 按钮 / 链接 ---------- */
.btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    padding: 13px 30px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}
.btn-lg { padding: 16px 40px; font-size: 1rem; }

.btn-red {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
    box-shadow: var(--shadow-red);
}
.btn-red:hover { background: var(--red-bright); border-color: var(--red-bright); transform: translateY(-2px); }

/* 子页 hero 主 CTA（story-hero-actions 内的 btn-red btn-lg）：
   去掉红底与边框，只保留文字作为跳转链接（保留热区便于点击）；
   hover 仅文字变红作为反馈 */
.story-hero-actions .btn.btn-red.btn-lg {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.story-hero-actions .btn.btn-red.btn-lg:hover {
    background: transparent;
    border-color: transparent;
    color: var(--red-bright);
}

/* 子页 hero 次要 CTA（story-hero-actions 内的 btn-ghost btn-lg）：
   同样去掉背景与边框，只保留文字作为跳转链接；hover 仅文字变色反馈 */
.story-hero-actions .btn.btn-ghost.btn-lg {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.story-hero-actions .btn.btn-ghost.btn-lg:hover {
    background: transparent;
    border-color: transparent;
    color: var(--red-bright);
}

.btn-ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

/* 箭头文字链接（spacex 风格的 CTA） */
.panel-link,
.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    transition: gap 0.25s ease, color 0.25s ease;
}
.panel-link::after,
.arrow-link::after {
    content: '\2192';
    font-size: 1.15em;
    transition: transform 0.25s ease;
}
.panel-link:hover,
.arrow-link:hover { color: var(--red-bright); gap: 16px; }
.panel-link:hover::after,
.arrow-link:hover::after { transform: translateX(4px); }

/* ---------- 导航（固定，初始透明覆盖在 hero 上） ---------- */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    padding: 20px 0;
    transition: var(--transition);
    background: transparent;
}
.navbar.nav-scrolled {
    background: transparent;
    padding: 11px 0;
    box-shadow: none;
    backdrop-filter: none;
    border-bottom: none;
}
/* 子页导航：背景始终透明（文字加投影保证可读性） */
.navbar.subnav {
    background: transparent;
    padding: 13px 0;
    border-bottom: none;
    backdrop-filter: none;
}
/* 背景全透明时，导航文字加投影保持可读 */
.navbar .brand,
.navbar .nav-links a,
.navbar .lang-toggle,
.navbar .lang-switch { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }

/* 桌面端（鼠标设备）：导航平时隐藏，鼠标移到页面顶部区域时滑出显示；
   触屏设备没有“悬停”概念，保持常显以保证菜单可访问（由 pointer/hover 媒体查询区分） */
@media (hover: hover) and (pointer: fine) {
    .navbar {
        transform: translateY(-100%);
        visibility: hidden;
        transition: all 0.3s ease, visibility 0s 0.3s; /* 收起：先滑出动画，结束后再隐藏 */
    }
    .navbar.nav-visible {
        transform: translateY(0);
        visibility: visible;
        transition: all 0.3s ease, visibility 0s; /* 展开：立即可见，同时滑入 */
    }
}

.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.brand-logo { display: block; height: 30px; width: auto; flex: none; }

.nav-menu { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-links { display: flex; align-items: center; gap: 2px; }

.nav-links a {
    position: relative;
    display: block;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 9px 15px;
    transition: var(--transition);
}
.nav-links a::after {
    content: '';
    position: absolute;
    left: 15px; right: 15px; bottom: 4px;
    height: 2px;
    background: var(--red-bright);
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transition);
}
.nav-links a:hover,
.nav-links .active a { color: #fff; }
.nav-links a:hover::after,
.nav-links .active a::after { transform: scaleX(1); }

/* 两个栏目导航项文字较长，单独收窄字号与字距，避免导航挤压 */
.nav-links li.nav-col a { font-size: 0.82rem; letter-spacing: 1px; }

.nav-cta { padding: 11px 24px; margin-left: 8px; }

.lang-toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    margin-left: 14px;
    padding: 9px 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 1px;
    background: rgba(249, 67, 20, 0.16);
    transition: var(--transition);
    white-space: nowrap;
}
.lang-toggle:hover { border-color: var(--red-bright); background: rgba(249, 67, 20, 0.32); color: #fff; }

/* 统一语言切换下拉（中/英静态页互跳 + 日韩印尼马来机器翻译） */
.lang-switch { position: relative; flex: none; margin-left: 14px; }
.lang-switch .lang-current {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 15px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 1px;
    background: rgba(249, 67, 20, 0.16);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}
.lang-switch .lang-current::after {
    content: '';
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.75;
}
.lang-switch .lang-current:hover,
.lang-switch.open .lang-current { border-color: var(--red-bright); background: rgba(249, 67, 20, 0.32); }
/* 长语种名（Bahasa Indonesia / Bahasa Melayu）收窄排版，避免撑开导航 */
.lang-switch .lang-current.is-long { font-size: 0.74rem; letter-spacing: 0.4px; padding: 9px 13px; }
.lang-switch .lang-menu {
    display: none;
    position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 168px; margin: 0; padding: 6px; list-style: none;
    background: rgba(8, 8, 8, 0.96);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(12px);
    z-index: 80;
}
.lang-switch.open .lang-menu { display: block; }
.lang-switch .lang-menu li { margin: 0; }
.lang-switch .lang-option {
    display: block; width: 100%;
    padding: 8px 12px;
    border: 0; border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--font-body);
    font-size: 0.82rem;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition);
}
.lang-switch .lang-option:hover { background: rgba(249, 67, 20, 0.22); color: #fff; }
.lang-switch .lang-option[aria-current="true"] { background: rgba(249, 67, 20, 0.34); color: #fff; }

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    cursor: pointer;
    padding: 8px;
}
.nav-toggle span { display: block; height: 2px; background: #fff; transition: var(--transition); }

/* =====================================================
   全屏媒体面板系统（spacex 形式核心）
   ===================================================== */
.hero,
.panel {
    position: relative;
    min-height: 100vh;
    display: flex;
    overflow: hidden;
    background: #000;
}
.hero { align-items: flex-end; }
.panel { align-items: flex-end; }

.hero-bg,
.panel-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.hero-bg img, .hero-bg video,
.panel-bg img, .panel-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 首页背景动图视频（多视频滚播，静音循环） */
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 1;
    transition: opacity .6s ease;
}

/* 暗化遮罩：底部更强，保证文字可读 */
.hero::after,
.panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.45) 42%, rgba(0,0,0,0.18) 100%),
        linear-gradient(to right, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 55%);
    pointer-events: none;
}

/* 角落定位：SpaceX 规范所有文字块均 text-align:left，仅整块位置不同 */
.panel--right { align-items: flex-end; justify-content: flex-end; }
.panel--right .hero-content,
.panel--right .panel-content { text-align: left; }
.panel--right .panel-eyebrow { margin-left: 0; }
.panel--top { align-items: flex-start; }
.panel--center { align-items: center; }

.hero-content,
.panel-content {
    position: absolute;        /* SpaceX：section-inner 内绝对定位的角落文字块 */
    z-index: 2;
    width: 50%;
    max-width: 520px;          /* SpaceX inner-* 块宽（max-width 450–535px） */
    text-align: left;
    padding: 0;                /* 覆盖 .container 的 3% 内边距，改用固定边距定位 */
}

.hero-eyebrow,
.panel-eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 600;
    margin-bottom: 16px;
}

.hero-title,
.panel-title {
    color: #fff;
    font-family: var(--font-display);
    font-size: 3rem;            /* SpaceX hero 标题规格：D-DIN-Bold 3rem / 行高 48px */
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55);
    margin-bottom: 20px;
    max-width: 90%;             /* SpaceX h2 max-width:90%（宽度由父文字块控制） */
}
.hero-title span { color: var(--red-bright); }

.hero-lead,
.panel-sub {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.9rem;
    max-width: 440px;
    margin-bottom: 24px;
    letter-spacing: 0.4px;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
    line-height: 1.9;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* =====================================================
   SpaceX 式角落文字定位（严格对应 new.spacex.com 首页）
   桌面：文字块绝对定位，距边 left/right 100px，
         垂直位置 top 13% / top 50%（垂直居中）/ bottom 15%，
         各面板错落分布（left-middle、left-top、right-top、
         left-bottom、right-middle），非全部居中/底部对齐。
   移动：统一 inset auto 24px 28%（底部 28%，左右 24px）。
   ===================================================== */
.hero .hero-content {                     /* 对应 inner-left-middle（Mars 视频 hero） */
    top: 50%;
    left: 100px;
    transform: translateY(-50%);
}
#panel-equipment .panel-content {         /* 对应 inner-left-top */
    top: 13%;
    left: 100px;
}
#panel-factory .panel-content {           /* 对应 inner-right-top */
    top: 13%;
    right: 100px;
}
#panel-finished .panel-content {          /* 对应 inner-left-bottom */
    bottom: 15%;
    left: 100px;
}
#panel-tech .panel-content {              /* 对应 inner-right-middle */
    top: 50%;
    right: 100px;
    transform: translateY(-50%);
}

/* 暗化遮罩随文字方向（SpaceX gradient-left/right/bottom） */
.hero::after {
    background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.9) 100%);    /* 左下文字 → 底部暗 */
}
#panel-equipment::after {
    background: linear-gradient(270deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.8) 100%);  /* 左上文字 → 右侧暗 */
}
#panel-factory::after {
    background: linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.8) 100%);   /* 右上文字 → 左侧暗 */
}
#panel-finished::after {
    background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.9) 100%);    /* 左下文字 → 底部暗 */
}
#panel-tech::after {
    background: linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.8) 100%);   /* 右中文字 → 左侧暗 */
}

/* =====================================================
   通用区块标题
   ===================================================== */
.section { background: var(--bg-2); padding: 104px 0; }
.section--plain { background: var(--bg); }

.sec-head { position: relative; margin-bottom: 54px; max-width: 920px; }
.sec-eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.92rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--red-bright);
    font-weight: 600;
    margin-bottom: 14px;
}
.sec-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.4vw, 3.1rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: 1.5px;
    line-height: 1.12;
}
.sec-sub { margin-top: 16px; color: var(--muted); font-size: 1.02rem; letter-spacing: 0.4px; max-width: 600px; }
.sec-divider {
    display: block;
    width: 72px;
    height: 4px;
    background: var(--red);
    margin-top: 22px;
}

/* 标题区右侧装饰图（部分页面使用） */
.sec-head-media {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 290px;
    height: 196px;
    background-size: cover;
    background-position: center;
    border: 2px solid var(--red);
    box-shadow: var(--shadow-md);
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
}

/* =====================================================
   平台故事 / 品牌简介
   ===================================================== */
.brand-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 52px;
    align-items: center;
    margin-top: 4px;
}
.brand-text-col p { color: var(--muted); font-size: 0.97rem; line-height: 1.95; margin-bottom: 15px; }
.brand-text-col b { color: #fff; font-weight: 700; }
.brand-lead { font-size: 1.08rem !important; line-height: 1.95 !important; color: var(--text) !important; }
.milestone { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line); }
.milestone li { display: flex; flex-direction: column; gap: 5px; }
.ms-year { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--red-bright); letter-spacing: 1px; line-height: 1; }
.ms-text { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.5px; }
.brand-media {
    min-height: 430px;
    background-size: cover;
    background-position: center;
    border: 2px solid var(--red);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);
}

.brand-extra { margin-top: 66px; display: grid; gap: 46px; }
.brand-philosophy {
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-left: 4px solid var(--red);
    border-radius: 12px;
    padding: 44px 48px;
}
.be-quote { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; color: #fff; letter-spacing: 1.5px; line-height: 1.35; margin: 14px 0 20px; }
.be-text { color: var(--muted); font-size: 0.98rem; line-height: 1.95; margin-bottom: 14px; max-width: 880px; }
.be-text:last-child { margin-bottom: 0; }
.be-text strong { color: #fff; font-weight: 700; }
.be-subtitle { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700; color: #fff; letter-spacing: 1.5px; margin: 14px 0 26px; }

.culture-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.culture-item { background: var(--bg-3); border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: 10px; padding: 22px 20px; transition: var(--transition); }
.culture-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-top-color: var(--red-bright); }
.ci-label { display: block; font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; letter-spacing: 1px; color: var(--red-bright); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.ci-text { color: #fff; font-size: 0.88rem; line-height: 1.7; margin: 0; }

/* ---------- 工厂 ---------- */
.factory {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 48px;
    align-items: center;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 36px;
}
.factory-media { min-height: 340px; background-size: cover; background-position: center; border: 2px solid var(--red); border-radius: 10px; clip-path: polygon(0 0, 100% 0, 100% 100%, 6% 100%); }
.factory-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: #fff; letter-spacing: 1px; }
.factory-desc { margin: 14px 0 24px; color: var(--muted); font-size: 0.96rem; line-height: 1.9; }
.factory-desc b { color: #fff; font-family: var(--font-display); font-size: 1.05rem; }
.factory-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 16px; }
.factory-stat { border-left: 3px solid var(--red); padding-left: 14px; }
.fs-num { display: block; font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: #fff; line-height: 1.1; }
.fs-num i { font-style: normal; font-size: 0.58em; color: var(--muted); margin-left: 2px; font-weight: 600; }
.fs-label { display: block; margin-top: 5px; font-size: 0.78rem; color: var(--muted); letter-spacing: 0.4px; }

.cert-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.cert-list li { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.4px; color: #fff; background: var(--bg-3); border: 1px solid var(--line); padding: 7px 15px; border-radius: 999px; }

/* ---------- 时间线 ---------- */
.story-intro { max-width: 880px; margin: 0 0 52px; color: var(--text); font-size: 1.02rem; line-height: 1.95; }
.story-intro p + p { margin-top: 16px; }
.story-intro strong { color: #fff; font-weight: 700; }
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 26px; margin-bottom: 64px; }
.timeline-item { position: relative; padding-top: 22px; border-top: 3px solid var(--red); }
.tl-year { display: block; font-family: var(--font-display); font-size: 1.85rem; font-weight: 700; color: #fff; letter-spacing: 1px; }
.tl-text { margin-top: 10px; color: var(--muted); font-size: 0.92rem; line-height: 1.75; }

/* =====================================================
   核心技术（暗色卡片）
   ===================================================== */
.tech-group {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    margin: 8px 0 26px;
    padding-left: 16px;
    position: relative;
}
.tech-group::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 20px; background: var(--red); }
.tech-group:not(:first-of-type) { margin-top: 56px; }

.tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tech-card {
    position: relative;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 26px 24px 28px;
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.tech-card:hover { transform: translateY(-6px); border-color: var(--red); background: rgba(255, 255, 255, 0.05); }
.tc-no { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--red-bright); letter-spacing: 1px; }
.tc-title { font-family: var(--font-display); font-size: 1.18rem; font-weight: 700; color: #fff; letter-spacing: 0.5px; margin: 10px 0 12px; }
.tc-desc { color: var(--muted); font-size: 0.9rem; line-height: 1.8; }
.tech-foot { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.95rem; line-height: 1.85; }

/* =====================================================
   解决痛点（暗色区块）
   ===================================================== */
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 4px; }
.pain-card { background: var(--bg-3); border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: 12px; padding: 26px 24px 28px; transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease; }
.pain-card:hover { transform: translateY(-6px); border-color: var(--red); background: rgba(255, 255, 255, 0.05); }
.pain-threat { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: #fff; letter-spacing: 0.5px; margin-bottom: 12px; }
.pain-eff { color: var(--muted); font-size: 0.9rem; line-height: 1.8; margin-bottom: 14px; }
.pain-guard { color: var(--muted); font-size: 0.9rem; line-height: 1.75; padding-top: 14px; border-top: 1px dashed rgba(255, 255, 255, 0.18); }
.pain-guard b { color: var(--red-bright); font-family: var(--font-display); letter-spacing: 0.5px; margin-right: 4px; }

/* =====================================================
   产品中心入口 / 产品网格 / 参数表
   ===================================================== */
.products-teaser { background: var(--bg); padding: 64px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.teaser-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.teaser-title { font-family: var(--font-display); font-size: clamp(1.8rem, 3.8vw, 2.6rem); font-weight: 700; color: #fff; letter-spacing: 1px; line-height: 1.15; }
.teaser-sub { margin-top: 12px; color: var(--muted); max-width: 560px; font-size: 0.98rem; }
.teaser-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.product-card {
    --accent: var(--red);
    position: relative;
    top: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 24px 24px 28px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.35s ease, border-color 0.35s ease, opacity 0.7s ease;
}
.product-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease; }
.product-card:hover { top: -8px; box-shadow: var(--shadow-md); border-color: rgba(249, 67, 20, 0.4); }
.product-card:hover::before { transform: scaleX(1); }

.s-ppf   { --accent: var(--red); }
.s-film  { --accent: #E0A93B; }
.s-color { --accent: #36B6C9; }

.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.pc-series { font-size: 0.74rem; font-weight: 700; letter-spacing: 1.5px; color: #fff; background: var(--accent); padding: 5px 12px; border-radius: 999px; }
.pc-model { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: #fff; letter-spacing: 0.5px; }
.pc-hero { text-align: center; padding: 12px 0 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.pc-hero-main { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.pc-hero-num { font-family: var(--font-display); font-size: clamp(3.4rem, 7vw, 4.6rem); font-weight: 700; line-height: 1; color: var(--red-bright); letter-spacing: 1px; }
.pc-hero-unit { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--red-bright); }
.pc-hero-label { display: block; margin-top: 8px; font-size: 0.8rem; letter-spacing: 1.5px; color: var(--muted); }
.pc-specs { list-style: none; margin: 0 0 18px; flex: 1; }
.pc-specs li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.pc-specs li:last-child { border-bottom: none; }
.pc-specs li span { color: var(--muted); letter-spacing: 0.5px; }
.pc-specs li b { color: #fff; font-weight: 700; }
.pc-price { color: var(--red-bright) !important; font-size: 1.02rem; }
.pc-link { align-self: flex-start; font-size: 0.9rem; font-weight: 600; letter-spacing: 1px; color: var(--accent); transition: letter-spacing 0.25s ease; }
.pc-link:hover { letter-spacing: 2px; }
.pc-accent-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--accent); }

.product-card:nth-child(1) { transition-delay: .04s, .04s, 0s, 0s; }
.product-card:nth-child(2) { transition-delay: .12s, .12s, 0s, 0s; }
.product-card:nth-child(3) { transition-delay: .20s, .20s, 0s, 0s; }
.product-card:nth-child(4) { transition-delay: .28s, .28s, 0s, 0s; }
.product-card:nth-child(5) { transition-delay: .36s, .36s, 0s, 0s; }
.product-card:nth-child(6) { transition-delay: .44s, .44s, 0s, 0s; }

/* ---------- 参数总览表 ---------- */
.spec-tables { margin-top: 66px; display: grid; gap: 44px; }
.spec-block { min-width: 0; }
.spec-block-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: #fff; letter-spacing: 1px; margin-bottom: 18px; padding-left: 16px; position: relative; }
.spec-block-title::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 20px; background: var(--red); }
.spec-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-sm); }
.spec-table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 0.9rem; }
.spec-table thead th { background: var(--red); color: #fff; font-weight: 700; letter-spacing: 0.5px; text-align: left; padding: 14px 16px; white-space: nowrap; }
.spec-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--text); white-space: nowrap; }
.spec-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); }
.spec-table tbody tr:last-child td { border-bottom: none; }
.spec-table .cell-model { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1rem; }
.spec-table .cell-series { font-weight: 700; color: var(--red-bright); }
.spec-table .cell-price { font-family: var(--font-display); font-weight: 700; color: var(--red-bright); font-size: 1rem; }
.spec-note { margin-top: 14px; font-size: 0.8rem; color: var(--muted); letter-spacing: 0.3px; line-height: 1.7; }

/* =====================================================
   品牌数据带
   ===================================================== */
.stats-band { background: linear-gradient(120deg, var(--red-dark) 0%, var(--red) 58%, var(--red-bright) 100%); padding: 64px 0; position: relative; overflow: hidden; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stat-item { padding: 12px 10px; border-left: 1px solid rgba(255, 255, 255, 0.22); }
.stat-item:first-child { border-left: none; }
.stat-number { display: block; font-family: var(--font-display); font-size: clamp(2.4rem, 4.5vw, 3.4rem); font-weight: 700; color: #fff; line-height: 1.1; letter-spacing: 1px; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.18); }
.stat-unit { font-size: 0.55em; font-weight: 600; margin-left: 2px; }
.stat-label { display: block; margin-top: 10px; color: rgba(255, 255, 255, 0.85); font-size: 0.92rem; letter-spacing: 1.5px; }

/* =====================================================
   子页页头（全屏 panel 复用 .panel）
   ===================================================== */
.subhero { position: relative; min-height: 92vh; display: flex; align-items: flex-end; }
.subhero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.subhero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.4) 100%); }
.subhero-inner { position: relative; z-index: 2; padding-bottom: 8vh; }
.subhero-eyebrow { font-family: var(--font-display); letter-spacing: 4px; color: var(--red-bright); font-weight: 600; font-size: 0.95rem; text-transform: uppercase; }
.subhero-title { font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 4rem); color: #fff; letter-spacing: 3px; margin: 12px 0 14px; line-height: 1.1; }
.subhero-sub { color: rgba(255,255,255,0.78); letter-spacing: 1.5px; font-size: 1.02rem; }

/* =====================================================
   工厂媒体画廊（视频 + 图片）
   ===================================================== */
.media-gallery-section { background: var(--bg-2); padding: 104px 0 96px; }
.media-gallery-section .sec-sub { max-width: 640px; }
.media-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; }
.media-card { position: relative; background: var(--bg-3); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.3s ease, box-shadow 0.35s ease, border-color 0.35s ease; }
.media-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(249, 67, 20, 0.4); }
.media-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--red); z-index: 3; }
.media-frame { position: relative; aspect-ratio: 16 / 10; background: #000; overflow: hidden; }
.media-frame img, .media-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-video { background: #000; }
.media-badge { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 1px; color: #fff; background: rgba(0, 0, 0, 0.62); border: 1px solid rgba(255, 255, 255, 0.25); padding: 5px 11px; border-radius: 999px; backdrop-filter: blur(4px); transition: opacity 0.25s ease; }
/* 鼠标悬停在素材容器上时隐藏 VIDEO / PHOTO 角标 */
.media-frame:hover .media-badge { opacity: 0; }
.media-badge.video::before { content: '\25B6'; font-size: 0.62rem; }
.media-badge.photo::before { content: '\25A3'; }
.media-body { padding: 16px 18px 20px; }
.media-title { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; color: #fff; letter-spacing: 0.5px; line-height: 1.3; }
.media-sub { margin-top: 6px; font-size: 0.82rem; color: var(--muted); letter-spacing: 0.4px; }
.media-frame.is-image { cursor: zoom-in; }
.media-frame.is-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.3), transparent 42%); opacity: 0; transition: opacity 0.3s ease; }
.media-card:hover .media-frame.is-image::after { opacity: 1; }

/* =====================================================
   页脚
   ===================================================== */
.footer { background: var(--bg); color: var(--muted); padding: 56px 0 0; border-top: 1px solid var(--line); }
/* 精简页脚：仅商标 + 版权（联系方式等已移除） */
.footer-min { padding: 34px 0 6px; }
.footer-min .brand-footer { margin-bottom: 0; }
.footer-grid { display: grid; grid-template-columns: 1.35fr 0.8fr 1.05fr 1.2fr; gap: 44px; padding-bottom: 52px; border-bottom: 1px solid var(--line); }
.brand-footer { margin-bottom: 20px; }
.footer-desc { font-size: 0.88rem; line-height: 1.9; color: var(--muted); margin-top: 18px; max-width: 340px; }
.footer-title { color: #fff; font-size: 1rem; font-weight: 700; letter-spacing: 2px; margin-bottom: 20px; position: relative; padding-left: 14px; }
.footer-title::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 16px; background: var(--red); }
.footer-links li { margin-bottom: 12px; }
.footer-links a { color: var(--muted); font-size: 0.9rem; transition: var(--transition); }
.footer-links a:hover { color: var(--red-bright); padding-left: 6px; }
.footer-contact li { font-size: 0.88rem; color: var(--muted); margin-bottom: 13px; padding-left: 18px; position: relative; line-height: 1.7; }
.footer-contact li::before { content: '//'; position: absolute; left: 0; top: 1px; color: var(--red); font-family: var(--font-display); font-size: 0.8rem; letter-spacing: -1px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 0; font-size: 0.82rem; color: var(--muted-2); }
.footer-slogan { font-family: var(--font-display); letter-spacing: 4px; color: var(--red); font-weight: 600; }
.footer-friendlink { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 18px 0 26px; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--muted-2); }
.footer-friendlink .friendlink-label { letter-spacing: 1px; }
.footer-friendlink a { color: var(--muted); transition: var(--transition); }
.footer-friendlink a:hover { color: var(--red-bright); }

/* =====================================================
   滚动显现动画
   ===================================================== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

a:focus-visible, button:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 3px; }

/* =====================================================
   响应式
   ===================================================== */
@media (max-width: 992px) {
    /* 手机端/平板端主页 hero：仅保留背景媒体，隐藏全部文字与按钮 */
    .hero .hero-eyebrow,
    .hero .hero-title,
    .hero .hero-actions { display: none; }
    .nav-toggle { display: flex; margin-left: auto; }
    .nav-menu {
        position: fixed; top: 0; right: -100%; width: max-content; max-width: 78vw; height: 100vh;
        background: rgba(0, 0, 0, 0.96); flex-direction: column; justify-content: flex-start; align-items: stretch;
        gap: 0; padding: 96px 16px 40px; transition: right 0.35s ease; box-shadow: -20px 0 60px rgba(0,0,0,0.5);
        border-left: 2px solid var(--red); backdrop-filter: blur(12px);
    }
    .nav-menu.open { right: 0; }
    .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
    /* 移动端侧栏：所有导航项字号统一，行间距收紧 */
    .nav-links a,
    .nav-links li.nav-col a {
        padding: 9px 6px;
        font-size: 1rem;
        letter-spacing: 1.5px;
        line-height: 1.35;
        border-bottom: 1px solid var(--line);
    }
    .nav-links a::after { display: none; }

    /* 移动端：语言下拉常显在导航右侧，面板收窄 */
    .lang-switch { margin-left: 10px; }
    .lang-switch .lang-current { padding: 8px 12px; font-size: 0.78rem; }
    .lang-switch .lang-menu { min-width: 150px; }

    .nav-cta { margin-top: 22px; text-align: center; margin-left: 0; }
    .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle.open span:nth-child(2) { opacity: 0; }
    .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* SpaceX 移动端规范：所有角落文字块统一到底部（bottom 28%，左右 24px），标题 2.25rem */
    .hero .hero-content,
    #panel-equipment .panel-content,
    #panel-factory .panel-content,
    #panel-finished .panel-content,
    #panel-tech .panel-content {
        position: absolute;
        width: auto;
        max-width: none;
        top: auto;
        right: 24px;
        bottom: 28%;
        left: 24px;
        transform: none;
        padding: 0;
    }
    .hero-title,
    .panel-title { font-size: 2.25rem; line-height: 2.25rem; }

    .section { padding: 80px 0; }
    .sec-head { max-width: 100%; }
    .sec-head-media { display: none; }
    .brand-grid { grid-template-columns: 1fr; gap: 32px; }
    .brand-media { min-height: 280px; clip-path: none; }
    .culture-grid { grid-template-columns: repeat(3, 1fr); }
    .brand-philosophy { padding: 36px 32px; }
    .pain-grid { grid-template-columns: repeat(2, 1fr); }
    .tech-grid { grid-template-columns: repeat(2, 1fr); }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .factory { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
    .factory-media { min-height: 240px; clip-path: none; }
    .timeline { grid-template-columns: repeat(2, 1fr); }
    .media-gallery { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
    .stat-item:nth-child(odd) { border-left: none; }
    .stat-item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.22); padding-top: 24px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 560px) {
    .navbar { padding: 14px 0; }
    .hero-title, .panel-title { letter-spacing: 1px; }
    .hero-eyebrow, .panel-eyebrow { font-size: 0.72rem; letter-spacing: 2px; }
    .hero-lead, .panel-sub { font-size: 0.95rem; }
    .hero-actions .btn, .panel-content .btn { width: 100%; }
    .section { padding: 64px 0; }
    .culture-grid { grid-template-columns: repeat(2, 1fr); }
    .pain-grid { grid-template-columns: 1fr; }
    .tech-grid { grid-template-columns: 1fr; }
    .teaser-actions { width: 100%; }
    .teaser-actions .btn { width: 100%; }
    .product-grid { grid-template-columns: 1fr; gap: 18px; }
    .product-card { padding: 20px 18px 24px; }
    .pc-hero-num { font-size: 3.4rem; }
    .timeline { grid-template-columns: 1fr; gap: 22px; }
    .factory-stats { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
    .media-gallery { grid-template-columns: 1fr; gap: 18px; }
    .media-gallery-section { padding: 64px 0 72px; }
    .stats-band { padding: 46px 0; }
    .stat-number { font-size: 1.9rem; white-space: nowrap; }
    .stat-label { font-size: 0.8rem; }
    .footer { padding-top: 56px; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .footer-bottom { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    .reveal { opacity: 1; transform: none; }
}

/* =====================================================
   品牌故事独立页（样式参照 spaceX2 发射详情页 / spaceX3 火星页）
   全屏居中 hero + RECAP 文章段落 + 里程碑时间线 + 全宽大图 + 理念卡片
   ===================================================== */
.story-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background: #000;
}
.story-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
}
.story-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.92) 100%);
}
.story-hero-content {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 960px;
    padding: 130px 0 90px;
}
.story-hero-eyebrow {
    font-family: var(--font-display);
    font-size: 0.95rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 24px;
}
.story-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 7vw, 5.5rem);
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 0.95;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 40px rgba(0, 0, 0, 0.6);
}
.story-hero-sub {
    font-family: var(--font-display);
    font-size: 1.02rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--red-bright);
    margin-top: 24px;
}
.story-hero-actions { margin-top: 36px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* 文章段落区（SpaceX RECAP 风格：居中窄栏） */
.story-section { background: var(--bg); padding: 112px 0; }
.story-section .container { max-width: 900px; margin: 0 auto; }
.story-section-inner { max-width: 760px; margin: 0 auto; text-align: left; }
.story-eyebrow {
    font-family: var(--font-display);
    font-size: 0.9rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--red-bright);
    font-weight: 600;
    margin-bottom: 18px;
}
.story-title {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    line-height: 1.12;
    margin-bottom: 34px;
}
.story-lead {
    font-family: var(--font-display);
    font-size: 1.12rem;
    color: var(--text);
    line-height: 1.9;
    margin-bottom: 20px;
}
.story-paragraph { color: var(--muted); font-size: 1rem; line-height: 1.95; margin-bottom: 18px; }
.story-paragraph b { color: #fff; }

/* 里程碑时间线（SpaceX FLIGHT TEST TIMELINE 风格：时间 + 事件两列） */
.story-milestones { background: var(--bg-2); padding: 112px 0; }
.ms-head { text-align: center; margin-bottom: 64px; }
.ms-list { max-width: 880px; margin: 0 auto; }
.ms-item {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 30px;
    align-items: baseline;
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
}
.ms-item:first-child { border-top: 1px solid var(--line); }
.ms-year {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--red-bright);
    letter-spacing: 1px;
    line-height: 1;
}
.ms-event { color: var(--text); font-size: 1.02rem; line-height: 1.6; }
.ms-event b { color: #fff; }

/* 全宽大图（信息图风格） */
.story-figure { background: var(--bg); padding: 0; }
.story-figure img { width: 100%; height: auto; display: block; }
.story-figure-cap {
    text-align: center;
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    padding: 24px 0 10px;
}

/* 理念 + 文化卡片 */
.story-cards { background: var(--bg); padding: 112px 0; }
.story-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.story-card {
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-top: 3px solid var(--red);
    border-radius: 12px;
    padding: 40px 38px;
}
.story-card .sec-eyebrow { margin-bottom: 16px; }
.story-quote {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    line-height: 1.4;
    margin-bottom: 16px;
}
.story-text { color: var(--muted); font-size: 0.96rem; line-height: 1.9; }
.story-text b { color: #fff; }

@media (max-width: 992px) {
    .story-hero-title { letter-spacing: 1px; }
    .story-section { padding: 82px 0; }
    .story-milestones { padding: 82px 0; }
    .story-cards { padding: 82px 0; }
    .ms-item { grid-template-columns: 110px 1fr; gap: 18px; }
    .ms-year { font-size: 1.6rem; }
    .story-card-grid { grid-template-columns: 1fr; }
}

/* =====================================================
   工厂独立页（样式参照 spaceX2 发射详情页 hero / metric）
   视频全屏 hero + 介绍 + 数据区 + 资质 + 媒体画廊（迁自主页）
   ===================================================== */
.story-hero-bg video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 工厂数据区（SpaceX metric 风格：数字大字 + 标签） */
.plant-stats { background: var(--bg-2); padding: 96px 0; }
.plant-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 28px 20px;
    max-width: 1080px;
    margin: 0 auto;
    text-align: center;
}
.plant-stat {
    border-left: 1px solid var(--line);
    padding: 8px 6px;
}
.plant-stat:first-child { border-left: none; }
.plant-stat-num {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    letter-spacing: 1px;
}
.plant-stat-num i { font-style: normal; font-size: 0.55em; color: var(--red-bright); font-weight: 600; }
.plant-stat-label {
    display: block;
    margin-top: 10px;
    font-family: var(--font-display);
    font-size: 0.82rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
}

/* 资质徽章区 */
.plant-certs { background: var(--bg); padding: 0 0 110px; text-align: center; }
.plant-certs .cert-list { justify-content: center; max-width: 980px; margin: 0 auto; }

@media (max-width: 992px) {
    .plant-stats { padding: 72px 0; }
    .plant-certs { padding: 0 0 82px; }
    .plant-stat:nth-child(odd) { border-left: none; }
}

/* =====================================================
   图片素材透明覆盖层
   移动端对 <img> 的原生触摸拖拽 / 长按预览会与页面手势冲突，
   表现为点击图片后页面卡死。这里在图片上方放置透明覆盖层，
   并把 <img> 本身排除出命中测试 —— 所有左键点击、右键菜单、
   拖拽都发生在覆盖层上，<img> 只作为纯展示，不再接收任何指针事件。
   （.media-frame.is-image 已有 ::after 渐变层，天然充当覆盖层，
   故此处仅需把其中的 img 排除出命中测试即可，灯箱点击逻辑不变。）
   ===================================================== */
.hero-bg::after,
.panel-bg::after,
.story-figure::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
.story-figure { position: relative; }
.hero-bg img, .hero-bg video,
.panel-bg img, .panel-bg video,
.story-figure img,
.media-frame.is-image img { pointer-events: none; }

/* =====================================================
   图片灯箱（点击 media-frame.is-image 照片后的大图预览）
   此前缺少 .lightbox 样式：放大图以失控状态插入页面，无法关闭、
   移动端被大图拖卡。现补全：全屏深色浮层，大图 contain 缩放居中；
   <img> 不接收指针事件，所有点击/右键/拖拽都落在浮层上，
   点击任意处或右上角 × 即关闭。
   ===================================================== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.92);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
    cursor: zoom-out;
    -webkit-tap-highlight-color: transparent;
}
.lightbox.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}
.lightbox img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: var(--shadow-md);
    pointer-events: none;   /* 大图自身不接收指针事件，防拖拽/长按保存 */
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}
.lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 1.7rem;
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: zoom-out;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.lightbox-close:hover {
    background: var(--red-bright);
    border-color: var(--red-bright);
    transform: rotate(90deg);
}

/* 首页面板整块可跳转：整个 .panel-content 区域显示手型提示 */
.container.panel-content { cursor: pointer; }

/* =====================================================
   媒体中心 / Press（文章标题列表 → 独立文章页）
   沿用暗色基底 + 品牌橙红强调色
   ===================================================== */
.press-intro { background: var(--bg); padding: 104px 0 0; }
.press-intro-inner { max-width: 860px; }

/* ---------- 文章总目录 ---------- */
.press-all { background: var(--bg-2); padding: 84px 0 100px; border-top: 1px solid var(--line); }
.press-all-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 34px;
}
.press-all-title {
    margin-top: 8px;
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.6vw, 1.9rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    line-height: 1.2;
}

/* ---------- 文章条目（整块链接，点击进入独立文章页） ---------- */
.press-list { display: flex; flex-direction: column; gap: 14px; }
.press-item {
    display: block;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.press-item:hover {
    border-color: rgba(249, 67, 20, 0.7);
    background: rgba(255, 255, 255, 0.03);
    transform: translateX(4px);
}

.press-head {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
}
.press-num {
    flex: none;
    width: 32px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--red-bright);
}
.press-title {
    flex: 1;
    min-width: 0;
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.3px;
    color: #fff;
    transition: color 0.3s ease;
}
.press-item:hover .press-title { color: var(--red-bright); }
.press-arrow {
    flex: none;
    position: relative;
    width: 26px; height: 2px;
    background: var(--red-bright);
    transition: width 0.3s ease;
}
.press-arrow::after {
    content: '';
    position: absolute;
    right: 0; top: -4px;
    width: 10px; height: 10px;
    border-right: 2px solid var(--red-bright);
    border-bottom: 2px solid var(--red-bright);
    transform: rotate(-45deg);
}
.press-item:hover .press-arrow { width: 38px; }

/* 首页「文献与新闻」栏目：文章条目两列排布 + 查看全部 */
.press-list--home { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.news-more { margin-top: 34px; }
@media (max-width: 720px) {
    .press-list--home { grid-template-columns: 1fr; }
}

/* 文章正文内的插图 / 视频（详情页里按 [[IMG:…]] / [[VIDEO:…]] 生成） */
.article-figure { margin: 26px 0; }
.article-figure img,
.article-figure video { width: 100%; border-radius: 12px; border: 1px solid var(--line); background: #000; display: block; }
.article-figure figcaption {
    margin-top: 10px;
    font-size: 0.86rem;
    line-height: 1.7;
    color: var(--muted-2);
    letter-spacing: 0.4px;
}

/* ---------- 文章正文（媒体中心列表内 & 文章独立页共用） ---------- */
.press-article, .article-content { max-width: 900px; }
.press-deck, .article-deck {
    font-family: var(--font-display);
    font-size: 0.98rem;
    line-height: 1.7;
    letter-spacing: 0.5px;
    color: var(--red-bright);
    margin: 20px 0 24px;
}
.press-article p { color: var(--muted); font-size: 0.96rem; line-height: 1.95; margin-bottom: 16px; }
.press-article p:last-child { margin-bottom: 0; }
.press-article strong { color: #fff; font-weight: 700; }

.press-h4 {
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.5px;
    color: #fff;
    margin: 32px 0 14px;
    padding-left: 14px;
    border-left: 4px solid var(--red);
}
.press-h4:first-child { margin-top: 0; }

.press-ul { margin: 0 0 18px; }
.press-ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.9;
}
.press-ul li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 0.75em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--red);
}
.press-ul li:last-child { margin-bottom: 0; }

.press-rule { border: none; border-top: 1px solid var(--line); margin: 28px 0; }
.press-note { font-size: 0.86rem !important; color: var(--muted-2) !important; }
.article-content p { color: var(--text); font-size: 1rem; line-height: 1.95; margin-bottom: 18px; }
.article-content p:last-child { margin-bottom: 0; }
.article-content strong { color: #fff; font-weight: 700; }

.press-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 22px;
    border: 1px solid var(--line);
    border-radius: 10px;
}
.press-table { width: 100%; border-collapse: collapse; min-width: 460px; font-size: 0.88rem; }
.press-table thead th {
    background: rgba(249, 67, 20, 0.92);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: left;
    padding: 11px 14px;
    white-space: nowrap;
}
.press-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--text); }
.press-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); }
.press-table tbody tr:last-child td { border-bottom: none; }

/* =====================================================
   文章独立页（press/<slug>.html）
   结构参考同类文章页：橙色 hero + 面包屑 + 居中文章卡 + 上下篇导航
   ===================================================== */
.article-hero {
    position: relative;
    padding: 150px 0 110px;
    background: linear-gradient(135deg, var(--red) 0%, #E07000 100%);
    color: #fff;
}
.article-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.45) 100%);
    pointer-events: none;
}
.article-hero .container { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }

.article-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 26px;
}
.article-crumb a { color: rgba(255, 255, 255, 0.75); transition: color 0.25s ease; }
.article-crumb a:hover { color: #fff; }
.article-crumb-sep { color: rgba(255, 255, 255, 0.45); }
.article-crumb-current { color: #fff; }

.article-eyebrow {
    font-family: var(--font-display);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 18px;
}
.article-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4.4vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.5px;
    color: #fff;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.article-hero .article-deck {
    max-width: 760px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.02rem;
}

.article-page { background: var(--bg); padding: 0 0 110px; }
.article-page .container { max-width: 900px; margin: 0 auto; }
.article-body {
    position: relative;
    z-index: 1;
    margin: -60px auto 0;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 44px 52px 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--red-bright);
    margin-bottom: 30px;
    transition: color 0.25s ease, gap 0.25s ease;
}
.back-link::before { content: '←'; font-size: 1rem; line-height: 1; }
.back-link:hover { color: #fff; gap: 12px; }

.article-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}
.article-nav-link {
    display: block;
    padding: 16px 20px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color 0.3s ease, background 0.3s ease;
}
.article-nav-link:hover { border-color: rgba(249, 67, 20, 0.6); background: rgba(255, 255, 255, 0.03); }
.article-nav-next { text-align: right; }
.article-nav-empty { visibility: hidden; }
.article-nav-dir {
    display: block;
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--red-bright);
    margin-bottom: 8px;
}
.article-nav-title { display: block; font-size: 0.94rem; line-height: 1.5; color: var(--text); }
.article-nav-link:hover .article-nav-title { color: #fff; }

@media (max-width: 992px) {
    .press-intro { padding: 72px 0 0; }
    .press-all { padding: 60px 0 72px; }
    .press-all-head { gap: 16px; margin-bottom: 26px; }
    .press-head { gap: 12px; padding: 16px 18px; }
    .press-num { width: 26px; font-size: 0.9rem; }
    .press-h4 { font-size: 1.05rem; }
    .press-article p { font-size: 0.94rem; }

    .article-hero { padding: 120px 0 90px; }
    .article-page { padding: 0 0 72px; }
    .article-body { margin-top: -40px; padding: 28px 22px 30px; border-radius: 12px; }
    .article-content p { font-size: 0.95rem; }
    .article-nav { grid-template-columns: 1fr; }
    .article-nav-next { text-align: left; }
}

/* =====================================================
   Press 栏目页：顶部素材区 + 文章正文
   ===================================================== */

/* 顶部素材区（1–2 视频 + 1–2 图片），正文排在其下方 */
.col-media {
    background: var(--bg);
    padding: 88px 0 70px;
}
.col-media-inner { max-width: 900px; margin: 0 auto; }
.col-media .media-gallery { margin: 0; grid-template-columns: repeat(2, 1fr); }
.col-media .media-frame { aspect-ratio: 16 / 9; }

/* 媒体卡整卡为链接：点击跳转社媒；视频默认暂停、后台加载，悬停播放（JS） */
.media-link {
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
}
.media-link img,
.media-link video { pointer-events: none; }
.media-link::after {
    content: '\2197';
    position: absolute;
    top: 12px; right: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 0.92rem;
    line-height: 1;
    opacity: 0;
    transform: translateY(-4px);
    transition: var(--transition);
}
.media-card:hover .media-link::after { opacity: 1; transform: translateY(0); }
@media (hover: none) {
    .media-link::after { opacity: 0.85; transform: none; }
}

/* 正文卡片：沿用文章页样式，但不做「上移压图」 */
.col-article { padding-top: 0; }
.col-article .article-body { margin-top: 0; }

/* ---------- Q / A 页 ---------- */
.col-faq { background: var(--bg); padding: 84px 0 110px; }
.qa-list { display: flex; flex-direction: column; gap: 10px; }
.qa-item {
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 12px;
    transition: var(--transition);
}
.qa-item[open] { border-color: rgba(249, 67, 20, 0.5); }
.qa-q {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 22px;
    cursor: pointer;
    list-style: none;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: 0.2px;
}
.qa-q::-webkit-details-marker { display: none; }
.qa-q::after {
    content: '+';
    margin-left: auto;
    flex: none;
    color: var(--red-bright);
    font-size: 1.3rem;
    line-height: 1;
    transition: var(--transition);
}
.qa-item[open] .qa-q::after { content: '–'; }
.qa-num {
    flex: none;
    padding-top: 4px;
    color: var(--red-bright);
    font-size: 0.78rem;
    letter-spacing: 1.5px;
}
.qa-a { padding: 0 22px 22px 22px; }
.qa-a p { color: var(--muted); font-size: 0.95rem; }

/* ---------- Contact 页：联系方式图标 + 二维码弹窗 ---------- */
.col-contact { background: var(--bg); padding: 96px 0 130px; }
.col-contact .col-media-inner { text-align: center; }

.contact-icons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
}
.contact-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 132px;
    padding: 26px 12px 22px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 16px;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
}
.contact-icon svg { width: 36px; height: 36px; display: block; }
.contact-icon--whatsapp svg { color: #25D366; }
.contact-icon--telegram svg { color: #29A9EB; }
.contact-icon--facebook svg { color: #1877F2; }
.contact-icon:hover,
.contact-icon:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(249, 67, 20, 0.55);
    background: rgba(249, 67, 20, 0.07);
    color: #fff;
}

/* 二维码弹窗：默认隐藏，悬停或点击 WhatsApp 图标才出现 */
.qr-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0s 0.22s;
}
.qr-modal.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.22s ease, visibility 0s;
}
.qr-modal-panel {
    position: relative;
    width: min(420px, 100%);
    max-height: 88vh;
    overflow: auto;
    padding: 18px 18px 22px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    text-align: center;
    transform: translateY(10px) scale(0.98);
    transition: transform 0.24s ease;
}
.qr-modal.open .qr-modal-panel { transform: translateY(0) scale(1); }
.qr-modal-panel img { width: 100%; height: auto; border-radius: 10px; }
.qr-modal-close {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition);
}
.qr-modal-close:hover { border-color: transparent; background: rgba(249, 67, 20, 0.65); }
.qr-modal-hint {
    margin-top: 16px;
    color: var(--muted);
    font-size: 0.88rem;
}

@media (max-width: 560px) {
    .contact-icons { gap: 14px; }
    .contact-icon { width: 96px; padding: 20px 8px 16px; gap: 10px; }
    .contact-icon svg { width: 30px; height: 30px; }
}

@media (max-width: 992px) {
    .col-media { padding: 56px 0 48px; }
    .col-media .media-gallery { grid-template-columns: 1fr; }
}