/**
 * solution.html（Solution 页面）专用样式
 * 全景屏幕结构：每个 100vh 屏幕阐述一个主题，滚动整屏切换（scroll-snap）
 * 01 Hero（开场文案 + 资产金句）→ 02 四大价值（同台交替）
 * 03~06 四大应用场景（全景背景图 + 左右交替的单侧文字栏）
 * → 07 服务模式 → 08 结尾 CTA
 * 配色与排版沿用 index.css：深墨绿 #17201D 为底 / 米白 #F4F1EA 为字 / 暖金 #D8C6A3 点缀
 * 字体：中文 Noto Sans SC / 英文 Inter / 金句衬体 Noto Serif SC
 */

/* ==================== 页面本地变量（与 index.css :root 保持一致） ==================== */
/* 仅保留本页 var() 实际引用的令牌；index.css 同名的浅色侧文字/线条令牌本页无深色以外的反白场景，已清理 */
:root {
    /* 色彩变量 */
    --dark: #17201D;
    --warm: #D8C6A3;
    --light: #FFFFFF;

    --text-on-dark: #F4F1EA;
    --text-on-dark-muted: rgba(244, 241, 234, 0.68);
    --text-on-dark-faint: rgba(244, 241, 234, 0.42);
    --line-on-dark: rgba(244, 241, 234, 0.16);

    /* 字体 */
    --font-cn: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --font-en: "Inter", "Helvetica Neue", Arial, sans-serif;
    /* 中文衬体展示字：用于金句等声调文案，系统无衬体时回退宋体 */
    --font-display: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;

    /* 圆角 */
    --radius-lg: 5px;

    /* 页面局部别名（沿用既有 sol-* 引用，指向 index.css 同款配色） */
    --sol-accent: var(--warm);                      /* 强调色：暖金 */
    --sol-line: var(--line-on-dark);                /* 线框/分隔线 */
    --sol-line-strong: rgba(244, 241, 234, 0.45);   /* 强线框 */
    --sol-words: var(--text-on-dark);               /* 巨大文字 */
}

/* ==================== 页面基调 ==================== */
body.solution-page {
    background: #000000; /* 与全站活动页面统一的纯黑背景 */
    font-family: var(--font-cn);
    color: var(--text-on-dark);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* Topbar 全站统一：固定窗口位置（topbar.css），不随全景屏切换滚动 */

/* ==================== 全景屏幕布局 ==================== */
/* 每屏一个主题；整屏切换由 js/solution.js 拦截滚轮/键盘驱动（与 engine 页面同机制），
   scroll-snap 仅作邻近辅助吸附，避免与 JS smooth 滚动抢占 */
html {
    scroll-snap-type: y proximity;
}

/* 底部信息栏作为最后一个吸附点，保证可滚动到底部查看 */
#footer-container {
    scroll-snap-align: end;
}

/* 全屏统一纵向居中：每屏整体文字内容作为一块，由 section 的 flex 居中控制，
   内容容器中部与全景屏中部对齐；屏内文字间隔仅由各区块自身 margin 提供，
   不再使用 transform 偏移或不对称内边距做光学补偿 */
.sol > section {
    height: 100vh;
    height: 100dvh; /* 动态视口高度：适配微信/浏览器地址栏收展，避免底部截断 */
    scroll-snap-align: start;
    scroll-snap-stop: always;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* 上下内边距对称（顶部同时避让固定 Topbar），保证 flex 居中不产生纵向偏移 */
    padding: 110px var(--page-padding);
}

/* 最后一个全景屏与底部信息栏共用一屏：
   屏高扣除 footer 实测高度（js/footer.js 写入 --footer-h），
   内边距保持上下对称，内容中心与该屏可见区域中心对齐 */
.sol > section:last-of-type {
    height: calc(100vh - var(--footer-h, 104px));
    height: calc(100dvh - var(--footer-h, 104px));
}

.sol {
    position: relative;
    z-index: 1;
    width: 100%;
    color: var(--text-on-dark);
    overflow-x: clip;
}

/* 全景屏内容容器：各屏统一的内容包裹层，宽度收窄；
   纵向位置统一由 section 的 flex 居中控制（移动端由 margin:auto 接管） */
.sol > section > .sol-screen {
    width: 100%;
    max-width: 1200px;
}

/* 眉题（与 index.css .eyebrow 一致） */
.sol-eyebrow {
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--warm);
    margin-bottom: 20px;
}

/* 区块大标题与导语（与 index.css .section__title / .section__lead 一致） */
.sol-title {
    font-size: clamp(28px, 3.6vw, 46px);
    font-weight: 700;
    line-height: 1.32;
    color: var(--text-on-dark);
    margin-bottom: 18px;
}

.sol-lead {
    font-size: 15.5px;
    line-height: 2.05;
    color: var(--text-on-dark-muted);
    max-width: 640px;
    margin: 24px auto 32px;
}

/* ==================== 滚动渐入动画（与 index.css 一致） ==================== */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.reveal.in-view {
    opacity: 1;
    transform: none;
}

.reveal.d-1 { transition-delay: 0.12s; }
.reveal.d-2 { transition-delay: 0.24s; }
.reveal.d-3 { transition-delay: 0.36s; }

/* ==================== 01 Hero：开场文案 + 资产金句（同一屏幕上下构图） ==================== */
/* 满屏高度由 .sol > section 提供，文案区在上、金句舞台在下（屏内无定位子元素，不再保留 position: relative 定位层） */
/* ---- 上层：开场文案（容器横向居中） ---- */
/* 行宽机制：标题字号收进 --hero-title-size、字数收进 --hero-title-chars（11 字），
   容器 max-width = 字号 × 字数 = 标题整行宽度，故标题恒为一行；
   详情段落填满容器宽，与标题左右两端对齐（窄屏下依旧成立） */
.sol-hero__copy {
    --hero-title-size: clamp(38px, 6.2vw, 76px);
    --hero-title-chars: 11;
    width: fit-content;
    max-width: calc(var(--hero-title-size) * var(--hero-title-chars));
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* 与 index.css .hero__title 一致；nowrap 作为不折行的硬保障 */
.sol-hero__title {
    font-size: var(--hero-title-size);
    font-weight: 700;
    line-height: 1.18;
    color: var(--text-on-dark);
    margin: 30px 0 20px;
    white-space: nowrap;
}

/* 与 index.css .hero__sub 一致 */
.sol-hero__sub {
    font-family: var(--font-en);
    font-size: clamp(16px, 1.7vw, 21px);
    letter-spacing: 0.34em;
    color: var(--text-on-dark-muted);
    margin-bottom: 16px;
}

/* 行宽由 .sol-hero__copy 容器统一限定（等于标题行宽）；
   justify 下除末行外每行填满，末行自然贴左（text-align-last 默认值即 start，
   各引擎含 Safari 均如此，无需额外声明） */
.sol-hero__desc {
    font-size: 15.5px;
    line-height: 2.05;
    color: var(--text-on-dark-muted);
    margin: 0;
    text-align: justify;
}

/* ---- 下层：资产金句舞台（大字自动换词） ---- */
.sol-hero__stage {
    width: min(100%, 860px);
    margin-top: clamp(40px, 7vh, 80px);
    /* 舞台宽度被 860px 截断，需左右 auto 外边距在 .sol-screen 内水平居中，
       否则大屏下该块贴靠左边界、内部居中文字整体偏左 */
    margin-left: auto;
    margin-right: auto;
    padding-top: clamp(24px, 4vh, 40px);
    text-align: center;
}

.sol-hero__stage .sol-eyebrow {
    margin-bottom: 28px;
}

.sol-hero__word {
    font-size: clamp(3rem, 11vw, 9rem);
    font-weight: 700;
    letter-spacing: 8px;
    line-height: 1.05;
    color: var(--sol-words);
    min-height: 1.1em;
    transition: opacity 0.35s ease;
}

.sol-hero__word.is-swapping {
    opacity: 0;
}

/* 与 index.css .qcard__en（英文弱化信息）一致 */
.sol-hero__cap {
    font-family: var(--font-en);
    font-size: 12px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--text-on-dark-faint);
    margin-top: 20px;
}

/* ==================== 02 四个核心商业价值：同一舞台自动交替展示 ==================== */
/* 舞台容器：四个 sol-value 叠放在同一位置，由 JS 定时自动交替切换 */
.sol-values {
    position: relative;
    min-height: 480px;
    margin-top: 32px;
}

.sol-value {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.9s ease, visibility 0.9s ease;
}

.sol-value.is-active {
    opacity: 1;
    visibility: visible;
}

/* 关键词从小到大的冲击力动画 */
.sol-value__word {
    font-size: clamp(3rem, 10vw, 8rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 4px;
    color: var(--sol-words);
    opacity: 0;
    transform: scale(0.3);
    transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.sol-value.is-active .sol-value__word {
    opacity: 1;
    transform: scale(1);
}

.sol-value__cn {
    margin-top: 22px;
    font-size: 15px;
    letter-spacing: 0.06em;
    width: max-content;
    color: var(--text-on-dark-muted);
    opacity: 0;
    transition: opacity 0.9s ease 0.4s;
}

.sol-value.is-active .sol-value__cn {
    opacity: 1;
}

/* 交替指示圆点：可点击跳转 */
.sol-values__dots {
    position: absolute;
    left: 50%;
    bottom: -12px;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 2;
}

.sol-values__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--sol-line);
    background: transparent;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.sol-values__dot:hover {
    transform: scale(1.25);
}

.sol-values__dot.is-active {
    background: var(--sol-accent);
    border-color: var(--sol-accent);
}

/* ==================== 03~06 应用场景：四屏共用结构（全景视频背景 + 单侧文字栏） ==================== */
/* 屏序：眉题 + 标题行（中文主标 + 英文副题）+ 主张金句 + 描述段落 + 核心服务列表 + 助手角色 + 典型空间；
   背景为全屏铺底视频（.sol-scene__video，src 写在 HTML）+ 遮罩层（.sol-scene__bg），
   文字栏宽 780px 靠边摆放：.is-right 靠右、.is-left 靠左，容器与文字同侧对齐 */
.sol-scene {
    position: relative;
}

/* 场景屏左右内边距与顶部 topbar logo 页面边缘对齐（严格同尺寸）：
   topbar.css `.topbar` 默认 padding 0 5vw，平板 ≤768px 为 4vw，
   移动 ≤480px 为 3vw；本处 `.sol > section.sol-scene` 选择器特异度 (0,2,1)
   高于基线 `.sol > section` (0,1,1)，长手式 padding-left/right 直接覆盖 shorthand 展开。
   确保靠右、靠左两种摆放时，内容边缘到页面边缘的距离与 logo 完全一致 */
.sol > section.sol-scene {
    padding-left: 5vw;
    padding-right: 5vw;
}

@media (max-width: 768px) {
    .sol > section.sol-scene {
        padding-left: 4vw;
        padding-right: 4vw;
    }
}

@media (max-width: 480px) {
    .sol > section.sol-scene {
        padding-left: 3vw;
        padding-right: 3vw;
    }
}

/* 各屏背景为全屏铺底视频（service / exhibition / cultural），
   <video> 写在 solution.html 各 .sol-scene 内的 .sol-scene__bg 之前；
   poster 暂用 assets/default 图占位，视频加载失败时不至于纯黑 */

/* 背景遮罩层：满屏铺底，叠加「均匀暗面 + 文字侧渐变」两层遮罩保证视频上文字可读；
   遮罩方向随屏侧翻转（is-left 左侧压暗 / is-right 右侧压暗）；z-index 1 在视频之上、文字之下 */
.sol-scene__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: var(--scene-scrim);
    pointer-events: none;
}

/* 背景视频层：满屏铺底居中裁切；z-index 0 在遮罩与文字之下，不拦截交互 */
.sol-scene__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.sol-scene.is-left {
    --scene-scrim: linear-gradient(rgba(23, 32, 29, 0.42), rgba(23, 32, 29, 0.42)),
        linear-gradient(90deg, rgba(23, 32, 29, 0.92) 0%, rgba(23, 32, 29, 0.74) 34%, rgba(23, 32, 29, 0.24) 66%, rgba(23, 32, 29, 0.06) 100%);
}

.sol-scene.is-right {
    --scene-scrim: linear-gradient(rgba(23, 32, 29, 0.42), rgba(23, 32, 29, 0.42)),
        linear-gradient(270deg, rgba(23, 32, 29, 0.92) 0%, rgba(23, 32, 29, 0.74) 34%, rgba(23, 32, 29, 0.24) 66%, rgba(23, 32, 29, 0.06) 100%);
}

/* 文字栏：置于背景之上，单侧收窄；
   flex 项的 auto 外边距优先于 section 的 align-items:center，实现靠边摆放；
   选择器需带上 section 元素与 .sol-scene，以压过基线 .sol > section > .sol-screen 的 width:100% */
.sol > section.sol-scene > .sol-screen {
    position: relative;
    z-index: 2;
    width: min(100%, 780px);
}

.sol-scene.is-left > .sol-screen {
    margin-right: auto;
    text-align: left;
}

.sol-scene.is-right > .sol-screen {
    margin-left: auto;
    text-align: right;
}

.sol-scene__head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 8px;
}

.sol-scene.is-left .sol-scene__head {
    justify-content: flex-start;
}

.sol-scene.is-right .sol-scene__head {
    justify-content: flex-end;
}

/* 右边缘光学对齐：letter-spacing 加在每个字符之后，
   靠右屏末字符右侧会多出字距宽的空隙，用等值负外边距抵消（左侧无需） */
.sol-scene.is-right .sol-eyebrow {
    margin-right: -0.42em;
}

.sol-scene.is-right .sol-scene__en {
    margin-right: -0.28em;
}

/* 右边缘光学对齐：各文字块字距不同，
   靠右屏末字符右侧会多出等值空隙，用负外边距抵消，与标题/副题保持同一右侧基准。
   例外：label 是 flex 行，::before 短横线本身贴右缘，无需补偿 */
.sol-scene.is-right .sol-scene__title {
    margin-right: -0.14em;
}

.sol-scene.is-right .sol-scene__tagline {
    margin-right: -0.06em;
}

.sol-scene.is-right .sol-scene__desc {
    margin-right: -0.05em;
}

.sol-scene.is-right .sol-scene__label {
    margin-right: 0;
}

.sol-scene.is-right .sol-scene__value {
    margin-right: -0.05em;
}

.sol-scene.is-right .sol-scene__value.is-role {
    margin-right: -0.12em;
}

.sol-scene__title {
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.4;
    color: var(--text-on-dark);
}

/* 英文副题（与 index.css .pcard__en 一致） */
.sol-scene__en {
    font-family: var(--font-en);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--text-on-dark-faint);
    margin-top: 8px;
}

/* 主张金句：轻衬体 + 大号字距，作为屏内声调句 */
.sol-scene__tagline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.8;
    letter-spacing: 0.06em;
    color: var(--sol-accent);
    margin: 14px 0 0;
}

/* 场景描述段落（宽度限半，避免行长过长影响阅读节奏） */
.sol-scene__desc {
    font-size: 14px;
    line-height: 2.05;
    letter-spacing: 0.05em;
    color: var(--text-on-dark-muted);
    margin: 16px 0 4px;
    max-width: 50%;
}

/* 分组标签（助手角色 / 典型空间）：暖金小字 + 前置短横线装饰 */
.sol-scene__label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.32em;
    color: var(--warm);
    margin: 26px 0 10px;
}

.sol-scene__label::before {
    content: "";
    flex: none;
    width: 18px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}

/* 靠右屏：短横线换到文字右侧，与容器右边界对齐；
   row-reverse 下主轴反向，main-start 在右缘，故用 flex-start 才能贴齐右侧
   （误用 flex-end 会把内容推到 780px 栏的左缘，表现为标题偏离到页面中部） */
.sol-scene.is-right .sol-scene__label {
    justify-content: flex-start;
    flex-direction: row-reverse;
}

/* 分组标签下方的内容行（助手角色 / 典型空间 具体值，宽度限半） */
.sol-scene__value {
    font-size: 13.5px;
    line-height: 1.95;
    letter-spacing: 0.05em;
    color: var(--text-on-dark);
    opacity: 0.88;
    margin: 0;
    max-width: 50%;
}

/* 助手角色值：屏内强调行，字号与字重抬升 */
.sol-scene__value.is-role {
    font-size: 15.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--text-on-dark);
    opacity: 1;
}

/* 典型空间值：弱化为辅助信息 */
.sol-scene__value:not(.is-role) {
    color: var(--text-on-dark-muted);
    opacity: 1;
}

/* 靠右屏：desc / value 限宽后自动靠右摆摆，与父级 text-align: right 保持同侧 */
.sol-scene.is-right .sol-scene__desc,
.sol-scene.is-right .sol-scene__value {
    margin-left: auto;
}

/* 靠左屏：自然靠左侧齐 */
.sol-scene.is-left .sol-scene__desc,
.sol-scene.is-left .sol-scene__value {
    margin-right: auto;
}

/* ==================== 06 服务模式 ==================== */
.sol-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    list-style: none;
    width: 100%;
    max-width: 640px;
    margin: 0 auto 32px;
}

/* 层级卡片：简洁单色细边框，无左侧强调线与底色填充，圆角容器 */
.sol-stack__layer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 30px;
    border: 1px solid var(--sol-line);
    background: transparent;
    border-radius: var(--radius-lg);
}

.sol-stack__en {
    font-family: var(--font-en);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.24em;
    color: var(--text-on-dark);
}

.sol-stack__cn {
    font-size: 15px;
    letter-spacing: 0.06em;
    color: var(--text-on-dark-muted);
}

.sol-income {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    list-style: none;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* 收入卡片：与 .sol-stack__layer 一致的简洁单色细边框，无底色填充，圆角容器 */
.sol-income li {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 20px;
    border: 1px solid var(--sol-line);
    background: transparent;
    border-radius: var(--radius-lg);
    transition: border-color 0.3s ease, background 0.3s ease;
}

.sol-income li:hover {
    border-color: var(--sol-line-strong);
    background: transparent;
}

.sol-income__en {
    font-family: var(--font-en);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-on-dark);
}

.sol-income__cn {
    font-size: 14.5px;
    letter-spacing: 0.05em;
    color: var(--text-on-dark-muted);
}

/* ==================== 07 结尾 CTA ==================== */
/* 满屏收尾：由 .sol > section 提供垂直居中；宽度收窄由 .sol-screen 提供 */

/* 与 index.css .section__title 一致 */
.sol-end__title {
    font-size: clamp(28px, 3.6vw, 46px);
    font-weight: 700;
    line-height: 1.32;
    color: var(--text-on-dark);
    max-width: 820px;
    /* 标题宽度被 820px 截断，左右 auto 外边距保证大屏下相对 .sol-screen 居中 */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 32px;
}

.sol-end__cn {
    font-size: 15.5px;
    line-height: 2.05;
    color: var(--text-on-dark-muted);
    margin-bottom: 72px;
}

/* 描边胶囊按钮：不填充背景，仅保留边框与文字同色的暖金轮廓，悬停时半透明暖金淡入 */
.sol-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 36px;
    font-size: 15px;
    letter-spacing: 0.12em;
    color: var(--sol-accent);
    background: transparent;
    border: none; /* 链接跳转按钮：取消容器边框显示 */
    border-radius: 5px;
    transition: background 0.3s ease, transform 0.3s ease;
}

.sol-cta i {
    font-style: normal;
    transition: transform 0.3s ease;
}

.sol-cta:hover {
    background: rgba(216, 198, 163, 0.14);
    transform: translateY(-2px);
}

.sol-cta:hover i {
    transform: translateX(6px);
}

/* ==================== 响应式 ==================== */
/* 平板 ≤1024px */
@media (max-width: 1024px) {
    .sol > section {
        padding: 96px var(--page-padding);
    }

    .sol-income {
        grid-template-columns: repeat(2, 1fr);
    }

    .sol > section.sol-scene > .sol-screen {
        width: min(100%, 680px);
    }
}

/* 移动端 ≤767px：保持固定屏高整屏切换（mandatory 吸附，触屏滑动切换体验与桌面一致）；
   屏内不设滚动容器（overflow: clip 不产生滚动区），触摸滑动直接驱动整屏切换，响应即时。
   内容预算：单屏内容容器（.sol-screen）纵向累计高度 ≤ 扣除内边距后的可用高度；
   设计基准为竖屏高宽比 5:3（如 390×650 屏，扣除上下 72px 对称内边距后预算约 506px），
   字号/间距按此基准压缩，确保内容自然落入预算内（无内滚兜底，超出即被裁切） */
@media (max-width: 767px) {
    html {
        scroll-snap-type: y mandatory;
    }

    .sol > section {
        height: 100vh;
        height: 100dvh;
        justify-content: flex-start;
        /* clip 不产生滚动容器：触摸滑动不被屏内内容截留，直接驱动整屏切换；
           原 overflow-y:auto 的屏内滚动会让手势先滚完内部内容才传递，导致切换滞后 */
        overflow: clip;
        /* 上下对称内边距，保证 margin:auto 居中不产生纵向偏移 */
        padding: 72px var(--page-padding);
    }

    /* 内容容器：垂直居中由 margin:auto 实现（内容超高时自动贴顶，
       避免 flex 居中裁切顶部）；不设 max-height/overflow，
       不形成内部滚动区，避免吞掉切屏手势 */
    .sol > section > .sol-screen {
        width: 100%;
        max-width: 1200px;
        margin: auto 0;
    }

    .sol > section:last-of-type {
        height: calc(100vh - var(--footer-h, 104px));
        height: calc(100dvh - var(--footer-h, 104px));
    }

    /* ---- 紧凑排版：按 5:3 竖屏基准压缩，确保内容累计高度不超预算 ---- */
    .sol-eyebrow {
        margin-bottom: 10px;
        font-size: 11px;
    }

    .sol-title {
        margin-bottom: 10px;
        font-size: 20px;
        line-height: 1.35;
    }

    .sol-lead {
        margin: 10px auto 18px;
        font-size: 13px;
        line-height: 1.8;
    }

    /* 01 Hero：两层构图收紧间距；行宽机制与桌面一致（11 字 × 26~34px = 286~374px，
       落在 480px 屏可用宽 290px ~ 767px 屏可用宽 395px 区间内），标题仍为一行 */
    .sol-hero__copy {
        --hero-title-size: clamp(26px, 7vw, 34px);
    }

    .sol-hero__title {
        margin: 14px 0 10px;
        line-height: 1.25;
    }

    .sol-hero__sub {
        margin-bottom: 10px;
        font-size: 14px;
        letter-spacing: 0.22em;
    }

    .sol-hero__desc {
        font-size: 14px;
        line-height: 1.85;
    }

    .sol-hero__stage {
        margin-top: 26px;
        padding-top: 14px;
    }

    .sol-hero__stage .sol-eyebrow {
        margin-bottom: 14px;
    }

    .sol-hero__word {
        font-size: clamp(2.4rem, 11vw, 4.5rem);
        letter-spacing: 4px;
    }

    .sol-hero__cap {
        margin-top: 12px;
    }

    /* 02 舞台高度收缩 */
    .sol-values {
        min-height: 220px;
        margin-top: 14px;
    }

    .sol-value__word {
        font-size: clamp(2.4rem, 10vw, 4.5rem);
        letter-spacing: 2px;
    }

    .sol-value__cn {
        margin-top: 12px;
        font-size: 13px;
    }

    /* 03~05 场景屏：按 5:3 竖屏基准压缩；
       窄屏撤销单侧摆放：侧对齐在整宽下无意义，统一回退左对齐与垂直居中；
       背景遮罩改为均匀暗面（内容占满屏高，文字侧渐变已不适用的同时保住可读性） */
    .sol-scene.is-left,
    .sol-scene.is-right {
        --scene-scrim: linear-gradient(rgba(23, 32, 29, 0.68), rgba(23, 32, 29, 0.68));
    }

    /* 窄屏撑回整宽（与其余屏一致），侧对齐由下方 is-left/is-right 规则撤销 */
    .sol > section.sol-scene > .sol-screen {
        width: 100%;
    }

    .sol-scene.is-left > .sol-screen,
    .sol-scene.is-right > .sol-screen {
        margin: auto 0;
        text-align: left;
    }

    .sol-scene.is-left .sol-scene__head,
    .sol-scene.is-right .sol-scene__head {
        justify-content: flex-start;
    }

    /* 窄屏左对齐，右侧字距补偿不再需要 */
    .sol-scene.is-right .sol-eyebrow,
    .sol-scene.is-right .sol-scene__title,
    .sol-scene.is-right .sol-scene__en,
    .sol-scene.is-right .sol-scene__tagline,
    .sol-scene.is-right .sol-scene__desc,
    .sol-scene.is-right .sol-scene__label,
    .sol-scene.is-right .sol-scene__value,
    .sol-scene.is-right .sol-scene__value.is-role {
        margin-right: 0;
    }

    /* 窄屏统一左对齐：标签短横线回到文字左侧 */
    .sol-scene.is-right .sol-scene__label {
        flex-direction: row;
        justify-content: flex-start;
    }

    .sol-scene__head {
        gap: 12px;
        margin-bottom: 6px;
    }

    .sol-scene__title {
        font-size: 19px;
        letter-spacing: 0.1em;
        line-height: 1.45;
    }

    .sol-scene__en {
        margin-top: 4px;
        font-size: 9.5px;
        letter-spacing: 0.24em;
    }

    .sol-scene__tagline {
        margin: 10px 0 0;
        font-size: 14px;
        line-height: 1.7;
        letter-spacing: 0.04em;
    }

    .sol-scene__desc {
        font-size: 12.5px;
        line-height: 1.85;
        letter-spacing: 0.03em;
        margin: 10px 0 0;
        max-width: 100%;
    }

    .sol-scene__label {
        gap: 8px;
        font-size: 10px;
        letter-spacing: 0.24em;
        margin: 18px 0 6px;
    }

    .sol-scene__label::before {
        width: 14px;
    }

    .sol-scene__value {
        font-size: 12px;
        line-height: 1.8;
        letter-spacing: 0.04em;
        max-width: 100%;
    }

    .sol-scene__value.is-role {
        font-size: 13.5px;
        letter-spacing: 0.08em;
    }

    /* 06 服务模式：层级栈与收入格压缩，收入格改双列 */
    .sol-stack {
        gap: 8px;
        margin: 0 auto 16px;
    }

    .sol-stack__layer {
        gap: 12px;
        padding: 10px 16px;
    }

    .sol-stack__en {
        font-size: 14px;
    }

    .sol-stack__cn {
        font-size: 12.5px;
    }

    .sol-income {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .sol-income li {
        gap: 4px;
        padding: 10px 12px;
    }

    .sol-income__en {
        font-size: 13px;
    }

    .sol-income__cn {
        font-size: 12px;
    }

    /* 07 结尾 CTA */
    .sol-end__title {
        margin-bottom: 16px;
        font-size: 22px;
    }

    .sol-end__cn {
        margin-bottom: 24px;
        font-size: 14px;
        line-height: 1.8;
    }

    .sol-cta {
        padding: 12px 28px;
        font-size: 14px;
    }
}

/* 小屏幕 ≤480px：仅微调留白，排版沿用 ≤767px 紧凑规则以守住 80% 高度预算 */
@media (max-width: 480px) {
    .sol > section {
        padding-left: var(--page-padding-small);
        padding-right: var(--page-padding-small);
    }
}

/* 矮视口（宽屏但高度不足，典型为 ~800px 高的笔记本视口）：内容自然高度可能超过一屏，
   回退自然高度避免裁切；第 1/2 屏排版按视口高度压缩，确保内容+内边距收进视口，
   使 flex 垂直居中恢复自由度（否则内容失去居中空间而贴顶，呈现“偏上部”）。
   阈值 900px：覆盖最高的 06 服务模式屏（三层栈+收入格）约 830px 内容高度 */
@media (min-width: 768px) and (max-height: 900px) {
    .sol > section {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        /* 与基准屏一致的对称内边距，保证内容居中不偏移 */
        padding: 96px var(--page-padding);
    }

    .sol > section:last-of-type {
        min-height: calc(100vh - var(--footer-h, 104px));
        min-height: calc(100dvh - var(--footer-h, 104px));
    }

    /* 第 1 屏 Hero：标题/金句舞台按视口高度收缩；
       行宽由 --hero-title-size × 字数自动跟随本屏标题字号 */
    .sol-hero__copy {
        --hero-title-size: clamp(34px, 5vw, 58px);
    }

    .sol-hero__title {
        margin: 24px 0 16px;
    }

    .sol-hero__stage {
        margin-top: clamp(24px, 4vh, 48px);
        padding-top: clamp(16px, 2.5vh, 28px);
    }

    .sol-hero__stage .sol-eyebrow {
        margin-bottom: 20px;
    }

    .sol-hero__word {
        font-size: clamp(2.6rem, 12vh, 8rem);
    }

    /* 第 2 屏：价值舞台高度收缩 */
    .sol-values {
        min-height: 400px;
        margin-top: 24px;
    }

    .sol-value__word {
        font-size: clamp(2.6rem, 11vh, 7rem);
    }
}