/* ===== Extracted custom CSS from nesoul.com.cn/N35(1).html ===== */
/* Slide / glass / gradient / reveal / count-roll / watch styles */

/* ============================================================================
 * N35 产品详情页 typography token（页面级）
 * ----------------------------------------------------------------------------
 * 本文件只被 N35 详情页加载（ProductDetailPage.astro 里的 <link>），所以 :root
 * 上的 --n35-* 实际只在 N35 页生效，不会外溢到 N21 / NSL03 / 首页等其它页面；
 * --n35- 前缀也避开了 global.css 的 --home-* 命名空间。
 * 全站结构变量（--text / --muted / --content-width）仍复用 global.css，不重复定义。
 *
 * 文字层级只保留 README 规定的 7 档，取值为整数像素刻度，恰好与 Tailwind 的
 * text-xs / text-sm / text-base / text-lg / text-4xl / text-5xl 一一对齐，
 * 因此页面内不会出现两套互不相干的字号。
 *
 *   ① hero    H1（首屏主标题）
 *   ② section 区块标题（H2 .section-title / 规格区标题）
 *   ③ lead    区块说明、副标题
 *   ④ card    卡片标题、卖点标题、表头
 *   ⑤ body    正文
 *   ⑥ small   辅助文本、标签、眉题、角标
 *   ⑦ action  按钮、文字链接
 *
 * 另有 --n35-type-display：它服务的是「叙事型数字」（#slide3 的 count-roll
 * 整数滚动）与表盘示意数字，属于视觉主体而非文字层级，因此单列。
 * ========================================================================== */
:root {
    /* ---- 7 个文字层级 ---- */
    --n35-type-hero: clamp(2.25rem, 4.6vw, 3rem);          /* 36 → 48px */
    --n35-type-section: clamp(1.75rem, 2.6vw, 2.25rem);    /* 28 → 36px（=text-4xl）*/
    --n35-type-lead: 1.25rem;                              /* 20px：阅读型正文（对齐 N21 的 .n21-feature-body，桌面 ≈20.8px）*/
    --n35-type-card: 1rem;                                 /* 16px（=text-base）*/
    --n35-type-body: 0.875rem;                             /* 14px（=text-sm）*/
    --n35-type-small: 0.75rem;                             /* 12px（=text-xs）*/
    --n35-type-action: 0.875rem;                           /* 14px */

    /* ---- 中文 H1：中文字宽远大于拉丁字母，5+4 两行需要更大字号才撑得住；
     *      仍属 Hero 层级，只是按语种字形宽度分档，一个页面只用其中一档 ---- */
    --n35-type-hero-cjk: clamp(3rem, 9vw, 4.75rem);        /* 48 → 76px */

    /* ---- 叙事型数字 / 图内示意数字（不是文字层级，故不占上面 7 档）----
     *  · display   ：#slide3「600LM」的整数滚动，页面视觉主体
     *  · figure-*   ：#slide6 表盘 mockup 内部的时钟数字（示意图形的一部分，
     *                 取值与 Tailwind 的 text-5xl / text-4xl 完全一致，不随视口缩放）*/
    --n35-type-display: clamp(5.75rem, 8.6vw, 7.5rem);     /* 92 → 120px */
    --n35-type-figure-lg: 3rem;                            /* 48px */
    --n35-type-figure-sm: 2.25rem;                         /* 36px */

    /* ---- 行高：4 档覆盖全部场景 ---- */
    --n35-leading-hero: 1.14;
    --n35-leading-section: 1.2;
    --n35-leading-body: 1.6;
    --n35-leading-display: 0.86;

    /* ---- 字重：3 档，不再出现 760/820/850 这类零散值 ---- */
    --n35-weight-display: 800;
    --n35-weight-title: 700;
    --n35-weight-action: 600;

    /* ---- 字体族：与 global.css 保持同一套单一栈（拉丁 → Inter，中文 → PingFang SC）
     *      原稿的 'EDIX' 展示字体在本项目从未真正加载过，实际一直回退到 PingFang SC，
     *      这里直接删掉这个死声明，避免继续误导。---- */
    --n35-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 移动端只覆盖 token，不在各个 selector 里重复写一套字号 */
@media (max-width: 1024px) {
    :root {
        --n35-type-hero: clamp(1.75rem, 7.4vw, 2.5rem);        /* 390px → 28.9px */
        --n35-type-section: clamp(1.5rem, 6.4vw, 1.75rem);     /* 390px → 25px，1024px → 28px（与桌面档衔接）*/
        --n35-type-hero-cjk: clamp(2.2rem, 15vw, 3.6rem);      /* 390px → 57.6px */
        --n35-type-display: clamp(3.5rem, 23.6vw, 5.75rem);    /* 390px → 92px */
        --n35-type-lead: 1rem;                                 /* 16px：移动端正文，与 N21 的 clamp 下限一致 */
    }
}
@media (max-width: 500px) {
    :root {
        /* 窄屏下整个 small 档统一下调，保证 slide5/7/8/9 的 4 图标行 nowrap 不撑破 */
        --n35-type-small: clamp(0.625rem, 2.9vw, 0.75rem);
    }
}

/* ----------------------------------------------------------------------------
 * 把 Tailwind 的 text-* 工具类在 N35 页内接回 --n35-* token
 * 目的：不出现「自定义 CSS 一套刻度 + Tailwind 一套刻度」并存的情况。
 *   · text-xs(12) 接回 token —— 否则 ≤500px 时同一档会同时出现 12px（Tailwind）
 *     和 11.3px（token）两个值，正是 README 要消除的「同一页面两套字号」；
 *   · text-4xl / text-5xl 全部出现在 slide6 表盘 mockup 内部，归入 figure 档。
 *   · p.text-sm / p.text-lg（2026-10-12 调整）：「阅读型正文」（各 slide 的大段
 *     描述）统一提到 lead 档，对齐 N21 详情页 .n21-feature-body（桌面 ≈20.8px）；
 *     其中 .glass-card 里的一句话描述性质等同 N21 的 more-card（14.4px），
 *     单独压回 body 档。只匹配 <p>，h5/span 上的 text-sm 维持原档不受影响。
 * 作用域 .n35-page 只覆盖本页内容，特异性高于 Tailwind 的工具类，
 * 因此不需要 !important，也不会影响 Header / Footer。
 * -------------------------------------------------------------------------- */
.n35-page .text-xs { font-size: var(--n35-type-small); }
/* ⚠️ Tailwind 的每个 text-* 工具类都会「同时」写死一对 font-size + line-height，
 * 所以这里重定向字号时必须一并接管行高，否则 20px 字会配上 text-sm 的 20px 行高。 */
.n35-page p.text-sm { font-size: var(--n35-type-lead); line-height: var(--n35-leading-body); }
.n35-page p.text-lg { font-size: var(--n35-type-lead); line-height: var(--n35-leading-body); }
.n35-page .glass-card p.text-sm { font-size: var(--n35-type-body); }
.n35-page .text-4xl { font-size: var(--n35-type-figure-sm); }
.n35-page .text-5xl { font-size: var(--n35-type-figure-lg); }

/* ----------------------------------------------------------------------------
 * 字重同样接回 token：整页只保留 4 档
 *   display 800（首屏 H1 / 数字）· title 700（区块与卡片标题）·
 *   action 600（label / 角标 / 按钮 / 卡片标题）· regular 400（正文描述）
 * Tailwind 的 font-medium(500)、font-light(300) 不在 token 内，接回最近的一档：
 *   500 → 600 让 slide2/3/6 的卡片标题字重统一；
 *   300 → 400 让正文描述回到 README 要求的 regular。
 * -------------------------------------------------------------------------- */
.n35-page .font-medium { font-weight: var(--n35-weight-action); }
.n35-page .font-light { font-weight: 400; }

/* ===== 局部 preflight 补偿（仅作用于 N35 页 .slide / .spec-section）=====
 * 原始 N35(1).html 使用 Tailwind Play CDN（未禁用 preflight），会把 h1-h6 / p 的
 * 浏览器默认外边距清零、并让标题继承字号/字重；本站为保护全站样式关闭了 preflight，
 * 导致标题与段落保留默认外边距（如 h4 上下约 1.33em、p 上下 1em），
 * 表现为 slide2 卡片里图标相对文字"偏高"、标题与正文间距过大。
 * 这里在 N35 页作用域内补回，1:1 还原原稿，且不影响 Header/Footer 及其它页面。
 * 用 :where() 保持 0 特异性，确保后续 .section-title / .hero-title 及 Tailwind 工具类可以覆盖。 */
.slide :where(h1, h2, h3, h4, h5, h6),
.spec-section :where(h1, h2, h3, h4, h5, h6) {
margin: 0;
font-size: inherit;
font-weight: inherit;
}
.slide :where(p),
.spec-section :where(p) {
margin: 0;
}
/* 补回 Tailwind preflight 的边框基线：本站为保护全站样式关闭了 preflight，
   缺少 `border-style: solid` 会让 .border / .border-2 / .border-t 这类工具类只剩颜色、
   边框完全不渲染（经典指针外圈圆环、简约数字圆环、分隔线、唤醒缩略图边框全部丢失）。
   这里仅在 N35 的 .slide / .spec-section 作用域内补回，:where() 保持 0 特异性，
   任何具体的 border 声明（.watch-card / .n35-color-* 等）仍然优先。 */
.slide :where(*, ::before, ::after),
.spec-section :where(*, ::before, ::after) {
border-width: 0;
border-style: solid;
border-color: currentColor;
}

html {
scroll-behavior: smooth;
scroll-padding-top: 80px; /*锚点偏移，避开导航栏遮挡*/
}
* { box-sizing: border-box; }
body {
background-color: #0f0101 !important; /* 仅 N35 页加载；覆盖站点 global.css 的 var(--bg)，还原原稿深色背景 */
color: #111827;
font-family: var(--n35-font-body);
overflow-x: hidden;
margin: 0;
padding: 0;
}
/*深色区块强制保留深色背景（footer 不在此列：N35 沿用站点全局 Footer 的 #181818 风格）*/
#slide1, #slide11, #cta, .split-slide {
background-color: #0a0a0a !important;
color: #f8f9fa;
}
.split-slide.rev.alt-bg {
background-color: #0f0f0f !important;
}
.watch-slide {
background: radial-gradient(ellipse at center top, rgba(91, 192, 222, 0.08) 0%, transparent 60%), #0a0a0a !important;
}
/* ⚠️ 这里原为 margin-bottom: 4rem（64px）。它会和 body 的深色底 rgb(15,1,1) 一起
 * 在每两屏之间显出一条 64px 黑带（slide1→slide10 共 9 处，外加 slide10→颜色展示区 1 处）。
 * 全屏幻灯片的相邻背景应当无缝相接，故整段删除；改回时请连 .split-slide 一起改，
 * 否则两个块级「满屏幻灯片」会重新出现不一致的间距。 */
.slide {
position: relative;
min-height: 100vh;
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
}
.slide-fullbg {
min-height: 100vh;
}
.slide img.bg-img, .split-right img, .watch-preview img, .preview-small img {
border-radius: 16px;
overflow: hidden;
}
/* 原始裸 <img class="bg-img"> 定位 */
.slide-fullbg > .bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 60% center;
z-index: 0;
border-radius: 0;
}
/* 新增 <picture class="bg-wrap"> 容器：用于需要响应式切换移动端图的 slide */
.slide-fullbg > picture.bg-wrap {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
border-radius: 0;
display: block;
}
.slide-fullbg > picture.bg-wrap > .bg-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 60% center;
border-radius: 0;
display: block;
}
@media (max-width:1024px) {
.slide-fullbg > .bg-img,
.slide-fullbg > picture.bg-wrap > .bg-img {
object-position: 72% center;
}
}
/* slide2：卡片列表整体上移（PC 与手机端均生效） */
#slide2 .space-y-4 {
transform: translateY(-2.5rem);
}
/* 仅在 JS 可用时隐藏初始态，避免脚本未执行导致内容不可见
   动效参数与 N21 页面保持一致：纯位移淡入、无模糊、0.8s cubic-bezier(0.16,1,0.3,1)
   ❗transition 必须写在基础选择器上：若写在 :not(.reveal-active) 里，加上激活类后该规则不再匹配，
   transition 定义随之消失，动画会瞬间跳变（这正是原先"生硬"的根因） */
html.js .reveal {
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
html.js .reveal:not(.reveal-active) {
opacity: 0;
transform: translateY(30px);
}
.reveal-active {
opacity: 1;
transform: translateY(0);
}
/* 系统开启「减弱动态效果」时直接显示，不做位移动画 */
@media (prefers-reduced-motion: reduce) {
html.js .reveal { transition: none; }
html.js .reveal:not(.reveal-active) { opacity: 1; transform: none; }
}
.rd-1 { transition-delay: 0.1s; }
.rd-2 { transition-delay: 0.2s; }
.rd-3 { transition-delay: 0.3s; }
.rd-4 { transition-delay: 0.4s; }
.rd-5 { transition-delay: 0.5s; }
.gradient-text-hero {
background: linear-gradient(90deg,#ff7c7c,#ffd878,#84ffb7,#6edbff,#b19cff,#ff7c7c);
background-size:200% auto;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
animation:rainbow 6s linear infinite;
}
.gradient-text-section {
background: linear-gradient(90deg,#ff7c7c,#ffd878,#84ffb7,#6edbff,#b19cff,#ff7c7c);
background-size:200% auto;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
animation:rainbow 8s linear infinite;
}
/* 需求：N35 页面所有彩虹渐变标题统一改为纯白，仅 slide3「600LM…」保留彩虹渐变。
   hero 标题本身带 .white-hero-title（已是白色），不受影响。 */
.gradient-text-section {
background: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
-webkit-text-fill-color: #ffffff !important;
color: #ffffff !important;
animation: none !important;
}
#slide3 .gradient-text-section {
background: linear-gradient(90deg,#ff7c7c,#ffd878,#84ffb7,#6edbff,#b19cff,#ff7c7c) !important;
background-size: 200% auto !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
animation: rainbow 8s linear infinite !important;
}
@keyframes rainbow {
0% { background-position:0% center; }
100% { background-position:200% center; }
}
/* slide3：仅「600LM」保留彩虹渐变，逗号后的副标题（all-round upgrade 等）改为纯白 */
#slide3 .slide3-title-plain {
background: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
-webkit-text-fill-color: #fff !important;
color: #fff !important;
animation: none !important;
}
.white-hero-title {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background: none !important;
}
.label-small {
font-size: var(--n35-type-small);
letter-spacing: 0.3em;
color: #5bc0de;
font-weight: var(--n35-weight-action);
text-transform: uppercase;
}
.section-title {
font-size: var(--n35-type-section);
font-weight: var(--n35-weight-title);
line-height: var(--n35-leading-section);
}
.hero-title {
font-family: var(--n35-font-body);
/* 中文主标题（5+4 两行）。上限 4.75rem 是硬约束：
   容器 max-w-xl=576px 且 box-sizing:border-box，lg:px-20 左右各 80px 含在内，
   实际内容宽仅 576-160=416px；5 字需 5×76×1.01≈384px ≤ 416px 才不会被挤断成 3 行。 */
font-size: var(--n35-type-hero-cjk);
font-weight: var(--n35-weight-display);
line-height: var(--n35-leading-hero);
letter-spacing: 0.01em;
}
.divider {
width: 48px;
height: 2px;
background: linear-gradient(90deg, #5bc0de, transparent);
}
.feat-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(91, 192, 222, 0.12);
border: 1px solid rgba(91, 192, 222, 0.3);
color: #5bc0de;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: var(--n35-type-action); /* 图标字号（Font Awesome 字形），非文案 */
}
.circle-scroll-wrap {
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
padding: 8px 0 12px;
cursor: grab;
}
.circle-scroll-wrap:active {
cursor: grabbing;
}
.circle-scroll-inner {
display: flex;
gap: 20px;
}
.circle-scroll-item {
scroll-snap-align: start;
text-align: center;
flex-shrink: 0;
}
.circle-scroll-img {
width: 64px;
height: 64px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.12);
object-fit: cover;
margin: 0 auto 8px;
transition: 0.3s ease;
}
.circle-scroll-img:hover {
border-color: #5bc0de;
transform: scale(1.05);
}
.circle-scroll-text {
font-size: var(--n35-type-small);
color: #b4b8c0;
}
.glass-card {
background: rgba(10, 10, 10, 0.55);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
border-radius: 16px;
}
.glass-card:hover {
background: rgba(91, 192, 222, 0.08);
border-color: rgba(91, 192, 222, 0.25);
transform: translateY(-2px);
}
.genre-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
font-size: var(--n35-type-small);
color: #d1d5db;
transition: all 0.3s ease;
}
.genre-pill:hover {
background: rgba(91, 192, 222, 0.1);
border-color: rgba(91, 192, 222, 0.3);
color: #5bc0de;
}
.genre-pill i {
color: #5bc0de;
font-size: var(--n35-type-small);
}
/* slide9 白噪音：圆形实物图 + 文字 */
.sound-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 9px;
width: fit-content;
transition: transform 0.35s ease;
}
.sound-photo {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.sound-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sound-item:hover { transform: translateY(-4px); }
.sound-item:hover .sound-photo {
border-color: rgba(91, 192, 222, 0.75);
box-shadow: 0 12px 28px rgba(91, 192, 222, 0.28), 0 0 0 4px rgba(91, 192, 222, 0.12);
}
.sound-label {
font-size: var(--n35-type-small);
color: #fff;
white-space: nowrap;
}
.watch-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px);
border-radius: 24px;
padding: 48px 28px 28px;
text-align: center;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
flex-shrink: 0;
width: 280px;
}
.watch-card:hover {
background: rgba(91, 192, 222, 0.06);
border-color: rgba(91, 192, 222, 0.25);
transform: translateY(-4px);
}
.watch-preview {
width: 200px;
height: 200px;
border-radius: 50%;
margin: 0 auto 24px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
/* 霓虹幻彩表盘：实物图片填充圆形预览 */
.watch-preview-photo {
background: #000;
overflow: hidden;
padding: 0;
}
.watch-preview-photo img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
border-radius: 50% !important;
}
.watch-scroll-wrap {
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
.watch-scroll-inner {
display: flex;
gap: 16px;
padding-bottom: 12px;
padding-left: calc(50% - 140px);
padding-right: calc(50% - 140px);
}
.watch-scroll-wrap .watch-card {
scroll-snap-align: center;
}
@media(min-width:768px) {
.watch-scroll-wrap {
overflow: visible;
}
.watch-scroll-inner {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 24px;
padding: 0;
}
.watch-scroll-inner .watch-card {
width: 100%;
}
}
.wakeup-select-item {
cursor: pointer;
transition: 0.3s;
}
.wakeup-select-item:hover {
transform: scale(1.03);
}
#topnav.scrolled {
background: rgba(0, 0, 0, 0.95) !important;
backdrop-filter: blur(20px);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
/* ⚠️ 未被引用（原 N35(1).html 顶部字标；现 Header 用图片 logo）。
   它是「字标」而非文案层级，所以不套 --n35-type-* 的 7 档；如需启用请自行定义一个
   字标专用值，不要直接塞进文案 token。 */
.logo-text {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.05em;
color: white;
}
.slide-num {
position: absolute;
bottom: 32px;
right: 48px;
font-size: var(--n35-type-small);
color: rgba(255, 255, 255, 0.25);
letter-spacing: 0.2em;
font-weight: var(--n35-weight-action);
pointer-events: none;
z-index: 10;
}
@media (max-width: 768px) {
.slide-num {
right: 16px;
bottom: 16px;
}
}
.cta-btn-primary {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 28px;
background: #5bc0de;
color: #0a0a0a;
font-weight: var(--n35-weight-action);
border-radius: 999px;
transition: all 0.3s ease;
font-size: var(--n35-type-action);
}
.cta-btn-primary:hover {
background: #7ecde4;
transform: translateY(-1px);
box-shadow: 0 10px 30px rgba(91, 192, 222, 0.25);
}
.cta-btn-ghost {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 28px;
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
font-weight: var(--n35-weight-action);
border-radius: 999px;
transition: all 0.3s ease;
font-size: var(--n35-type-action);
}
.cta-btn-ghost:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.3);
}
.split-slide {
display: flex;
min-height: 100vh;
width: 100%;
position: relative;
}
.split-left {
position: relative;
z-index: 2;
display: flex;
align-items: center;
padding: 80px 40px 80px 64px;
flex-shrink: 0;
max-width: 520px;
}
.split-right {
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
overflow: hidden;
}
.split-right img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 16px;
}
.split-slide.rev .split-right {
right: auto;
left: 0;
}
.split-slide.rev .split-left {
padding: 80px 64px 80px 40px;
margin-left: auto;
}
@media (max-width: 1024px) {
.split-slide {
flex-direction: column;
}
.split-right {
position: relative;
width: 100% !important;
height: 55vh;
order: 1;
}
.split-left {
order: 2;
width: 100% !important;
max-width: 100%;
padding: 48px 24px !important;
}
.split-slide.rev .split-right {
order: 1;
left: 0;
}
.split-slide.rev .split-left {
margin-left: 0;
order: 2;
}
}
.fullbg-overlay {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
}
@media(max-width:1024px) {
#slide2 {
flex-direction: column;
}
#slide2 .bg-img {
position: relative;
height: 55vh;
order: 1;
border-radius: 16px;
/* 手机端完整、缩小显示整张产品图，不再裁切 */
object-fit: contain !important;
object-position: center center !important;
background: #0a0a0a;
}
#slide2 > div:nth-child(2) {
position: relative !important;
order: 2;
width: 100%;
padding: 40px 24px !important;
background: #0a0a0a;
}
}
@media (max-width: 1024px) {
#slide10 .bg-img {
object-position: 72% center;
}
#slide10 .fullbg-overlay {
align-items: flex-end;
padding-bottom: 52px;
}
}
.watch-slide {
position: relative;
}
#backTop {
position: fixed;
bottom: 28px;
right: 28px;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(91,192,222,0.15);
border: 1px solid rgba(91,192,222,0.35);
color: #5bc0de;
display: flex;
align-items: center;
justify-content: center;
z-index: 99;
opacity: 0;
visibility: hidden;
transition: 0.3s ease;
backdrop-filter: blur(8px);
}
#backTop.show {
opacity: 1;
visibility: visible;
}
#backTop:hover {
background: rgba(91,192,222,0.3);
transform: translateY(-2px);
}
/* 悬浮 WhatsApp（站点全局组件）与「回到顶部」都固定在右下角，会重叠。
   这里把 WhatsApp 抬到「回到顶部」按钮正上方，并让两者水平居中对齐（WhatsApp 在上、回到顶部在下）。
   - #backTop 中心距右边缘 = right 28 + 宽 44/2 = 50px；
   - WhatsApp 用其自身 --whatsapp-button-size（62/58/50，随断点）反推 right，使中心同为 50px；
   - 垂直方向：backTop 顶边 = 28 + 44 = 72px，WhatsApp bottom 84px → 间隔 12px。
   本文件仅 N35 页加载，!important 用于覆盖组件内 scoped 样式，不会波及其它页面。 */
.whatsapp-float {
bottom: calc(84px + env(safe-area-inset-bottom)) !important;
right: calc(50px - var(--whatsapp-button-size, 62px) / 2 + env(safe-area-inset-right)) !important;
}
.hero-qrcode {
position: absolute;
bottom: 32px;
right: 48px;
z-index: 10;
width: 90px;
height: 90px;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.12);
backdrop-filter: blur(6px);
background: #fff;
}
@media(max-width:768px) {
.hero-qrcode {
width: 64px;
height: 64px;
right: 16px;
bottom: 64px;
}
}
/* ===== 炫酷动效 ===== */
#scrollProgress {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 0%;
background: linear-gradient(90deg, #5bc0de, #a78bfa, #f472b6, #5bc0de);
background-size: 300% 100%;
z-index: 100;
box-shadow: 0 0 12px rgba(91,192,222,0.6);
animation: progressShift 4s linear infinite;
}
@keyframes progressShift {
0% { background-position: 0% 0; }
100% { background-position: 300% 0; }
}
/* 背景图缓慢 Ken Burns 缩放 */
@keyframes kenburns {
0% { transform: scale(1); }
50% { transform: scale(1.12); }
100% { transform: scale(1); }
}
.slide-fullbg > .bg-img,
.slide-fullbg > picture.bg-wrap > .bg-img {
animation: kenburns 20s ease-in-out infinite;
}
.split-right img {
animation: kenburns 26s ease-in-out infinite;
}
/* 玻璃卡片悬停流光 */
.glass-card { position: relative; overflow: hidden; }
.glass-card::after {
content: '';
position: absolute;
top: 0;
left: -130%;
width: 70%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
transform: skewX(-20deg);
pointer-events: none;
}
.glass-card:hover::after {
animation: shimmerSweep 0.9s ease forwards;
}
@keyframes shimmerSweep {
from { left: -130%; }
to { left: 130%; }
}
.circle-scroll-item {
position: relative;
cursor: pointer;
transition: transform 0.3s ease;
}
.circle-scroll-item:hover { transform: translateY(-5px); }
.circle-scroll-item .circle-scroll-img {
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.circle-scroll-item:hover .circle-scroll-img {
transform: scale(1.08);
border-color: #5bc0de;
box-shadow: 0 10px 26px rgba(91,192,222,0.35);
}
.tap-hint {
position: absolute;
top: -8px;
left: 50%;
background: #5bc0de;
color: #0a0a0a;
font-size: var(--n35-type-small);
font-weight: var(--n35-weight-action);
padding: 2px 7px;
border-radius: 999px;
opacity: 0;
transform: translateX(-50%) translateY(-4px) scale(0.8);
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(91,192,222,0.4);
white-space: nowrap;
}
.circle-scroll-item:hover .tap-hint {
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
}
.white-hero-title { text-shadow: 0 4px 28px rgba(0,0,0,0.55); }
.fullbg-overlay { text-shadow: 0 1px 12px rgba(0,0,0,0.65); }
.fullbg-overlay p { text-shadow: 0 2px 14px rgba(0,0,0,0.6); }
.gradient-text-section { text-shadow: 0 2px 16px rgba(0,0,0,0.5); }
/* ===== 本轮优化补充 ===== */
.fullbg-mask-left {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: linear-gradient(90deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.5) 60%, transparent 100%);
z-index: 1;
pointer-events: none;
}
@media (min-width: 1025px) {
.overlay-right { justify-content: flex-end; }
#slide3 .fullbg-overlay { padding-right: 70px; }
/* ⚠️ 这里原有 `#slide3 .section-title { font-size: 56px }`，比首屏 H1（48px）还大，
   违反 README「Section 标题不应该大过 Hero 标题」。已删除，section 统一走
   --n35-type-section；「600LM」的视觉冲击由里面的 .count-roll 承担。 */
}
/* slide1：PC 端文字适当下移（在垂直居中基础上再下移 14vh，数值可直接调；不影响手机端） */
@media (min-width: 1025px) {
#slide1 > .fullbg-overlay > div.max-w-xl {
transform: translateY(14vh);
}
}
/* slide6 PC 端：左间距与其他 slide 对齐。
   其他 slide 用 .fullbg-overlay > div 的 lg:px-20（80px）；slide6 用 Tailwind .container（有 max-width 且 mx-auto 居中），
   大屏下会整体内缩，故 PC 端去掉 max-width 与自动外边距，让内容左缘也落在 80px。 */
@media (min-width: 1025px) {
#slide6 > .container {
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* PC 端渐变分隔线随文字块居中（标题区改为居中排版） */
#slide6 .text-center.max-w-2xl .divider {
margin-left: auto !important;
margin-right: auto !important;
}
}
#slide3 .fullbg-overlay,
#slide3 .fullbg-overlay p,
#slide3 .fullbg-overlay h5,
#slide3 .fullbg-overlay .label-small { text-shadow: none !important; }
#slide4 .fullbg-overlay,
#slide4 .fullbg-overlay * { text-shadow: none !important; }
.count-roll {
font-variant-numeric: tabular-nums;
/* 与正文同一字体栈：原先单独挂 -apple-system / Helvetica Neue，会让数字字形与
   同屏标题不一致；改走 --n35-font-body 后整页只有一套字体族。 */
font-family: var(--n35-font-body);
font-size: var(--n35-type-display);
font-weight: var(--n35-weight-display);
line-height: var(--n35-leading-display);
}
#slide7 .reveal, #slide8 .reveal, #slide9 .reveal, #slide10 .reveal { filter: none !important; }
#slide7 p, #slide8 p, #slide9 p, #slide10 p { color: #ffffff !important; }
#slide9 .sound-item span { color: #ffffff !important; }
#slide8 .text-secondary, #slide10 .text-secondary { color: #ffffff !important; }
#slide8 .text-gray-500, #slide10 .text-gray-600 { color: #ffffff !important; }
#slide7 .fullbg-overlay, #slide9 .fullbg-overlay, #slide10 .fullbg-overlay,
#slide7 .fullbg-overlay p, #slide9 .fullbg-overlay p, #slide10 .fullbg-overlay p,
#slide7 .gradient-text-section, #slide9 .gradient-text-section, #slide10 .gradient-text-section { text-shadow: none !important; }
/* slide7 背景偏白（浅木／银白机身），眉题与主标题改暖调深色，避免与背景重叠
   仅桌面端（≥1025px）；手机端保持原有白色（背景为深色遮罩效果） */
@media (min-width: 1025px) {
#slide7 .label-small {
color: #33291f !important;
text-shadow: none !important;
}
#slide7 .section-title {
background: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
-webkit-text-fill-color: #241b14 !important;
color: #241b14 !important;
text-shadow: none !important;
animation: none !important;
}
}
/* slide5 背景图（透明底产品抠图）向右移动 */
#slide5 > .bg-img {
object-position: 50% center;
transform: translateX(15%);
animation: none;
}
@media (min-width:1025px) {
#slide10 .wakeup-copy { max-width: none !important; width: calc(27rem + 10rem); }
#slide10 .fullbg-overlay { padding-top: 120px; }
}
@media (max-width:640px) {
#slide10 .preview-small { gap: 10px !important; }
#slide10 .wakeup-select-item { width: 4rem !important; height: 4rem !important; }
#slide9 .sound-photo { width: 62px; height: 62px; }
#slide9 .sound-item { gap: 7px; }
#slide9 .sound-row { column-gap: 14px !important; row-gap: 14px !important; }
#slide5 .sound-photo, #slide7 .sound-photo, #slide8 .sound-photo { width: 62px; height: 62px; }
#slide5 .sound-item, #slide7 .sound-item, #slide8 .sound-item { gap: 7px; }
/* 图注字号不再逐个 selector 写：≤500px 统一覆盖 --n35-type-small（见文件顶部 token 块）*/
}
/* 手机端（≤500px）：slide5/7/8/9 的 4 个圆形 icon 强制单行，不再掉行。
   根因：overlay padding 26px + 内层 px-8 32px = 左右各 58px，iPhone 390px 屏可用仅 274px，
   而「4×62px 图 + 3×24px 间距 = 320px」放不下，flex-wrap 必然换行。
   改法：flex 换 grid 四等分（列宽随屏宽自适应），图片用 clamp(vw) 可收缩，字号同理。 */
@media (max-width: 500px) {
#slide5 .sound-row, #slide7 .sound-row, #slide8 .sound-row, #slide9 .sound-row {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
justify-items: center;
align-items: start;
column-gap: 8px !important;
row-gap: 14px !important;
width: 100%;
}
#slide5 .sound-item, #slide7 .sound-item, #slide8 .sound-item, #slide9 .sound-item {
min-width: 0;
max-width: 100%;
}
#slide5 .sound-photo, #slide7 .sound-photo, #slide8 .sound-photo, #slide9 .sound-photo {
width: clamp(44px, 14vw, 62px);
height: clamp(44px, 14vw, 62px);
}
#slide5 .sound-label, #slide7 .sound-label, #slide8 .sound-label, #slide9 .sound-label {
white-space: nowrap;
}
}
/* 手机端重设计：全屏背景图 + 底部渐变遮罩 */
@media (max-width: 1024px) {
.slide-fullbg:not(#slide1) > .fullbg-overlay {
align-items: flex-end;
justify-content: flex-start;
padding: 0 26px 18px;
background: linear-gradient(0deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.15) 58%, transparent 80%);
}
.overlay-right { justify-content: flex-start !important; }
/* slide1 手机端：改为「贴底」定位——这是能到的最低位置且不会把按钮截掉。
   旋钮变成 padding-bottom：值越小文字越靠下（0 即完全贴底）。 */
#slide1 > .fullbg-overlay {
align-items: flex-end !important;
padding-top: 0 !important;
padding-bottom: 4vh !important;
}
/* ⚠️ slide1 手机端的遮罩必须跟着一起改：
   基础规则（本文件 844 行）把 .fullbg-mask-left 定义成「左侧 50% 宽的横向渐变」，
   那是为 PC 端「文字靠左、垂直居中」配的；手机端文字已经贴底通排，
   而这条横向遮罩只压暗左半边 —— 右下角的白色正文会直接压在亮画面上丢掉可读性。
   这里改成整幅「底部渐隐」，停靠点与其它 slide 的底部遮罩
   （见上一条 .slide-fullbg:not(#slide1) > .fullbg-overlay）完全一致，保证全页观感统一。 */
.fullbg-mask-left {
width: 100%;
background: linear-gradient(0deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.15) 58%, transparent 80%);
}
/* slide1 手机端中文主标题（5+4 两行）的字号已收敛到 --n35-type-hero-cjk，
   在文件顶部的 ≤1024px token 覆盖里统一定义，这里不再单独写 selector 字号。 */
/* ========= slide3 ========= */
#slide3 {
position: relative !important;
}
/* 标题+描述整体放到顶部右侧：移动端靠右、文字左对齐 */
#slide3 .slide3-head {
position: absolute !important;
top: 2rem !important;
right: 1rem !important;
left: auto !important;
max-width: 72% !important;
z-index: 10;
text-align: left !important;
}
/* 标题在头部容器内正常流排布（移出旧的绝对定位，交给 .slide3-head 管理） */
#slide3 .section-title {
position: static !important;
top: auto !important;
right: auto !important;
text-align: left !important;
max-width: 100% !important;
margin-bottom: 0 !important;
}
/* 移动端显示描述文字，置于“600LM，全方位升级”下方 */
#slide3 p.reveal.rd-2.text-gray-400 {
display: block !important;
margin-top: 0.75rem !important;
margin-bottom: 0 !important;
max-width: 100% !important;
}
/* 移动端隐藏渐变分割线 */
#slide3 .divider.reveal.rd-1 {
display: none !important;
}
/* 内层容器左右padding适配手机 */
#slide3 .fullbg-overlay .px-8.md\:px-12.lg\:px-20 {
padding-left: 1rem !important;
padding-right: 1rem !important;
max-width: 100% !important;
}
/* 3个feature卡片到底部，并与上方各 slide 同宽(320px)居中，左缘对齐 */
#slide3 .space-y-4 {
position: absolute !important;
bottom: 3rem !important;
left: 50% !important;
width: 320px !important;
transform: translateX(-160px) !important;
z-index:10;
gap:0.6rem !important;
}
/* ========= slide4 360云台 ========= */
#slide4 {
position: relative !important;
}
/* 标题组保留在上方；与上方各 slide 同宽(320px)居中，左缘对齐 */
#slide4 .px-8.md\:px-12.lg\:px-20.max-w-xl {
position: absolute !important;
top: 2.5rem !important;
left: 50% !important;
width: 320px !important;
right: auto !important;
transform: translateX(-160px) !important;
bottom: 0 !important;
max-width: unset !important;
padding: 0 !important;
z-index: 10;
}
/* 主标题：字号与行高已统一走 --n35-type-section，这里只保留布局修正 */
#slide4 .section-title {
transform: none !important;
width: auto !important;
}
#slide4 .eyebrow-text,
#slide4 .text-xs.uppercase.tracking-widest {
font-size: inherit !important;
}
#slide4 .fullbg-overlay p.text-sm {
font-size: inherit !important;
}
/* 4个特性文字挪到底部，2行2列，并与上方各 slide 同宽(320px)居中，左缘对齐 */
#slide4 .space-y-3 {
position: absolute !important;
bottom: 3.5rem !important;
left: 50% !important;
width: 320px !important;
right: auto !important;
transform: translateX(-160px) !important;
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 1.1rem 0.8rem;
z-index: 10;
}
#slide4 .space-y-3 > div {
margin-top: 0 !important;
}
#slide4 .space-y-3 h5,
#slide4 .space-y-3 p {
font-size: inherit !important;
}
/* 4 个特性卡片文字改为白色（仅手机端，覆盖当前 gray-400） */
#slide4 .space-y-3 span {
color: #ffffff !important;
}

/* ========= slide5：百变副屏｜移动端完整修复【直接替换原有全部slide5代码】 ========= */
#slide5 > .bg-img {
  transform: translateX(0) !important;
  object-fit: cover !important;
  object-position: center 10% !important;
  width: 100% !important;
  height: 100% !important;
  animation: none !important;
}
#slide5 {
  overflow: hidden;
  position: relative !important;
}
@media (max-width: 1024px) {
/* 权重提升，压制全局 .slide-fullbg:not(#slide1) > .fullbg-overlay */
#slide5.slide-fullbg > .fullbg-overlay {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  align-items: unset !important;
  justify-content: unset !important;
  padding: 0 !important;
  /* slide5独立渐变，不和其他slide共用 */
  background: linear-gradient(
    0deg,
    rgba(0,0,0,0.94) 0%,
    rgba(0,0,0,0.75) 20%,
    rgba(0,0,0,0.40) 38%,
    rgba(0,0,0,0.15) 52%,
    transparent 62%
  ) !important;
}
/* 文字外层容器：与下方“实时时钟”图标组同宽(320px)并水平居中，
   使文字左缘精确对齐首个图标“实时时钟”左缘（屏幕中线-160px），不受屏宽影响 */
#slide5 .fullbg-overlay > div {
  position: absolute !important;
  left: 50% !important;
  width: 320px !important;
  transform: translateX(-160px) !important;
  height: auto !important;
  /* 自然流式排布（不拉伸行距），整体落在产品图下方偏下区域，两端间距均衡 */
  /* top 控制整块文字（含4个图标与底部规格）的纵向位置：42vh→48vh→56vh 手机端持续下移 */
  top: 56vh !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* slide6：手机端顶部文字块与slide5同宽(320px)居中，左缘精确对齐slide5；标题两短语强制换行 */
#slide6 .container .text-center.max-w-2xl {
  max-width: 320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* 手机端也显示「息屏亦有时光」后面的逗号（对齐 PC 端）；
   .slide6-l2 仍是 display:block，所以第二段照旧另起一行，两行布局不变 */
#slide6 .slide6-br {
  display: inline !important;
}
#slide6 .slide6-l2 {
  display: block !important;
}
#slide6 .text-center.max-w-2xl .divider {
  margin-left: auto !important;
  margin-right: auto !important;
}
/* slide6：手机端容器纵向分布——头/底适度拉开，不再顶到屏幕边缘 */
#slide6 .container {
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  min-height: 88vh !important;
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}
#slide6 .text-center.max-w-2xl {
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
}
#slide6 .watch-scroll-wrap {
  margin-top: 1.5rem !important;
  margin-bottom: 0 !important;
}
/* “效果仅供参考，后台持续更新”底部文字推到容器底部（适度下移） */
#slide6 .container > p {
  margin-top: auto !important;
}
/* ========= slide8：自定义电子吧唧｜手机端 ========= */
#slide8 {
  position: relative !important;
}
/* 标题组（CUSTOM BADGE / 自定义电子吧唧 / 描述 / 4张示例图）移到图片上方区域 */
#slide8 > .fullbg-overlay {
  padding: 0 !important;
}
#slide8 .slide8-head {
  position: absolute !important;
  top: 6vh !important;
  left: 50% !important;
  width: 320px !important;
  transform: translateX(-160px) !important;
  z-index: 10;
  padding: 0 !important;
}
/* 4张示例图在顶部区域左对齐，与标题左缘一致 */
#slide8 .slide8-head .flex.flex-wrap.justify-center {
  justify-content: flex-start !important;
}
/* “后台推送…趣味玩法”说明块留在屏幕底部，并与上方 slide 同宽左对齐 */
#slide8 .slide8-foot {
  position: absolute !important;
  bottom: 6vh !important;
  left: 50% !important;
  width: 320px !important;
  transform: translateX(-160px) !important;
  z-index: 10;
  padding: 0 !important;
}
/* 后台推送文字颜色改浅（淡灰，作为次级说明，覆盖全局纯白强制） */
#slide8 .slide8-foot .text-gray-500,
#slide8 .slide8-foot .text-secondary {
  color: rgba(255,255,255,0.6) !important;
}
/* slide7：“副屏UI动效仅供参考…”文字颜色改浅（淡灰次级说明，仅手机端，覆盖全局纯白强制） */
#slide7 p.text-gray-600 {
  color: rgba(255,255,255,0.6) !important;
}
/* ❗删除暴力覆盖子元素margin！！恢复原生reveal内部所有元素的margin、行距，解决文字挤扁 */
/* 不再写 #slide5 .fullbg-overlay > div > * {margin-top:6px !important} */
/* 页码贴底 */
#slide5 .slide-num {
  bottom: 2px !important;
}
}
}

/* ========= slide6：手机端(<768px)表盘改为 3D 旋转轮播，去掉左右横滑；768px+ 桌面网格不变 ========= */
@media (max-width: 767px) {
  #slide6 .watch-scroll-wrap {
    overflow: hidden !important;
    perspective: 1100px !important;
    height: 390px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #slide6 .watch-scroll-inner {
    display: block !important;
    position: relative !important;
    width: 280px !important;
    height: 360px !important;
    padding: 0 !important;
    transform-style: preserve-3d !important;
    animation: watchSpin 18s linear infinite !important;
  }
  #slide6 .watch-scroll-inner .watch-card {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: 280px !important;
    margin-left: -140px !important;
    flex-shrink: 0 !important;
    transition: none !important;
    opacity: 1 !important;
    backface-visibility: hidden !important;
  }
  #slide6 .watch-scroll-inner .watch-card:nth-child(1) { transform: rotateY(0deg)   translateZ(180px) !important; }
  #slide6 .watch-scroll-inner .watch-card:nth-child(2) { transform: rotateY(90deg)  translateZ(180px) !important; }
  #slide6 .watch-scroll-inner .watch-card:nth-child(3) { transform: rotateY(180deg) translateZ(180px) !important; }
  #slide6 .watch-scroll-inner .watch-card:nth-child(4) { transform: rotateY(270deg) translateZ(180px) !important; }
  @keyframes watchSpin {
    from { transform: rotateY(0deg); }
    to   { transform: rotateY(360deg); }
  }
}

/* ========= slide3：PC 端把“全玻璃镜片组…寿命更持久”描述文字改为白色（仅桌面，移动端保持灰色不变） ========= */
@media (min-width: 1025px) {
  #slide3 .slide3-head p.text-gray-400 {
    color: #ffffff !important;
  }
}

/* ========= slide4：PC 端把“无极调节/自动对焦/自动梯形校正/自动避障”改为白色（仅桌面） ========= */
@media (min-width: 1025px) {
  #slide4 .space-y-3 span {
    color: #ffffff !important;
  }
}

/* ========== 全局：所有slide section-title 强制左对齐（桌面+移动端） ========== */
.section-title {
  text-align: left !important;
}
/* slide6「多表盘」：标题区文字全部居中（eyebrow / 标题 / 渐变线 / 正文）。
   这里原本是强制左对齐以对齐其它 slide 的左缘，现按需求改回居中。 */
#slide6 .section-title {
  text-align: center !important;
}
#slide6 .text-center.max-w-2xl {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* slide6「多表盘」PC 端：标题块整体仍居中，但两行各自左对齐，
   使第一行首字「息」与第二行首字「多」左缘对齐（居中时因两行字数不同会错开）。
   仅对桌面生效，手机端保持原来的居中效果不变。 */
@media (min-width: 1025px) {
  #slide6 .section-title {
    text-align: left !important;
    width: max-content;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* slide6 手机/平板端（≤1024px）：文字块与「百变副屏」等其它 slide 保持一致的左对齐排版
   ——标题两行首字直接贴左缘（自然对齐），渐变线也靠左；PC 端（≥1025px）仍为居中块。 */
@media (max-width: 1024px) {
  #slide6 .text-center.max-w-2xl {
    text-align: left !important;
  }
  #slide6 .section-title {
    text-align: left !important;
    width: auto;
  }
  #slide6 .text-center.max-w-2xl .divider {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}




/* ===== second <style> block (mobile/extra overrides) ===== */

/* ⚠️ 这里原先重复定义了一遍 .section-title（font-size:46px / font-weight:700），
   与文件上方那份互相覆盖：上方 clamp(1.7rem,2.6vw,2.4rem) 从未生效，是死代码，
   同时 46px 已经逼近首屏 H1 的 48px，层级拉不开。现已合并——字号/字重/行高只在
   上方用 --n35-type-section / --n35-weight-title / --n35-leading-section 声明一次，
   这里只保留颜色与间距。 */
.section-title{
    color:#ffffff;
    margin:0 0 48px;
}
/* 手机端字号由文件顶部 ≤1024px 的 token 覆盖统一处理，这里只改间距 */
@media (max-width:991px){
    .section-title{ margin-bottom:32px; }
}

/* ============ 多颜色选择（珍珠白 / 曜石黑）============
   还原 nesoulofficialwebsite 原代码（commit 5e1593d）的 .n35-color-showcase：
   大产品图 + 底部胶囊色点 + 色名。仅 #color-showcase 使用，仅 N35 页加载。 */
/* 纵向 flex：标题块贴顶靠左，产品图 + 胶囊用 auto 外边距在剩余空间居中 */
.n35-color-showcase { position:relative; display:flex; flex-direction:column; align-items:center; min-height:calc(100svh - var(--site-header-height)); overflow:hidden; padding:80px 32px 72px; background:radial-gradient(circle at 50% 34%, #263b43 0, #121b20 28%, #090d0f 68%, #070808 100%); isolation:isolate; }
/* 曜石黑专用背景层：与珍珠白底色叠放，靠 opacity 过渡实现整屏底色的平滑切换 */
.n35-color-showcase:after { content:""; position:absolute; inset:0; z-index:-3; opacity:0; background:radial-gradient(circle at 50% 34%, #2a3035 0, #171b1f 34%, #0b0c0e 72%, #040405 100%); transition:opacity .6s ease; }
.n35-color-showcase[data-color="black"]:after { opacity:1; }
.n35-color-showcase:before { content:""; position:absolute; inset:0; z-index:-2; opacity:.38; background:linear-gradient(115deg, transparent 30%, #5bc0de12 50%, transparent 70%); transition:opacity .6s ease; }
.n35-color-showcase[data-color="black"]:before { opacity:.16; }
.n35-color-aura { position:absolute; z-index:-1; top:36%; left:50%; width:min(56vw,700px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, #8bd7e52b 0, #5bc0de0c 42%, transparent 70%); filter:blur(14px); }
/* 曜石黑光晕用伪元素叠层（渐变无法插值，靠 opacity 平滑过渡） */
.n35-color-aura:before { content:""; position:absolute; inset:0; border-radius:50%; opacity:0; background:radial-gradient(circle, #ffffff22 0, #5bc0de0a 42%, transparent 70%); transition:opacity .6s ease; }
.n35-color-showcase[data-color="black"] .n35-color-aura:before { opacity:1; }
/* 标题块：与 slide10「温柔唤醒」同样的左对齐排版（靠左内边距、文字左对齐、标题下有渐变线），
   产品图与色点胶囊仍在剩余空间里居中。 */
.n35-color-heading { position:relative; z-index:2; width:100%; min-height:28px; text-align:left; padding:0 40px; }
/* 字号/字重/行高全部交给 .section-title（与 slide10 同一套），这里只清零 h2 默认外边距 */
.n35-color-title { margin:0; }
.n35-color-stage { position:relative; display:grid; place-items:center; width:min(100%,760px); height:clamp(300px,52vh,570px); margin-top:auto; }
.n35-color-orbit { position:absolute; bottom:11%; width:min(58%,420px); height:18%; border:1px solid #8fd7e52e; border-radius:50%; box-shadow:0 0 40px #5bc0de16, inset 0 0 30px #5bc0de0d; transform:rotate(-8deg); transition:border-color .6s ease, box-shadow .6s ease; }
.n35-color-showcase[data-color="black"] .n35-color-orbit { border-color:#ffffff20; box-shadow:0 0 40px #ffffff10, inset 0 0 30px #ffffff08; }
.n35-color-product { position:relative; z-index:2; width:min(74%,470px); height:100%; }
.n35-color-image { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .5s ease; filter:drop-shadow(0 28px 30px #0008); }
.n35-color-image.is-active { opacity:1; }
.n35-color-shadow { position:absolute; z-index:1; bottom:12%; width:42%; height:7%; border-radius:50%; background:#0009; filter:blur(18px); }
.n35-color-showcase[data-color="black"] .n35-color-shadow { background:#000c; }
.n35-color-controls { display:flex; align-items:center; justify-content:center; gap:13px; min-height:54px; margin-top:40px; margin-bottom:auto; padding:8px 13px 8px 9px; border:1px solid #ffffff18; border-radius:999px; background:#ffffff0d; box-shadow:0 12px 36px #0005, inset 0 1px #ffffff14; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
.n35-color-option { display:grid; place-items:center; width:38px; height:38px; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer; }
.n35-color-swatch { display:block; width:23px; height:23px; border:1px solid #ffffff45; border-radius:50%; box-shadow:0 2px 6px #0006; transition:transform .2s ease, box-shadow .2s ease; }
.n35-color-swatch.is-white { background:linear-gradient(145deg,#fff,#c8d0d2); }
.n35-color-swatch.is-black { background:linear-gradient(145deg,#4b5054,#0a0c0d); border-color:#ffffff3d; }
.n35-color-option:hover .n35-color-swatch,.n35-color-option:focus-visible .n35-color-swatch { transform:scale(1.1); }
.n35-color-option.is-selected .n35-color-swatch { box-shadow:0 0 0 3px #0b1113, 0 0 0 4px #5bc0de, 0 3px 12px #0008; }
.n35-color-name { min-width:104px; padding-left:3px; color:#e6eef0; font-size:var(--n35-type-small); font-weight:var(--n35-weight-action); white-space:nowrap; text-align:left; }
/* 标题左内边距对齐 slide10 文字块：区块自身 padding + 这里，等值于 lg:px-20(80px) / md:px-12(48px) / px-8(32px) */
@media (min-width:641px){ .n35-color-heading { padding:0 16px; } }
@media (min-width:1025px){ .n35-color-heading { padding:0 48px; } }
@media (max-width:900px){ .n35-color-stage { height:clamp(290px,48svh,480px); } }
@media (max-width:640px){
    .n35-color-showcase { min-height:calc(100svh - var(--site-header-height)); padding:64px 18px 52px; }
    .n35-color-heading { padding:0 40px; }
    .n35-color-stage { height:clamp(260px,45svh,390px); }
    .n35-color-product { width:min(86%,390px); }
    .n35-color-orbit { bottom:9%; width:70%; }
    .n35-color-controls { margin-top:20px; }
}
@media (prefers-reduced-motion: reduce){
    .n35-color-aura,.n35-color-aura:before,.n35-color-image,.n35-color-shadow,.n35-color-orbit { transition:none; }
    .n35-color-showcase:after,.n35-color-showcase:before { transition:none; }
}

/* ============ slide1 主标题：非中文语种改常规字体 + 手机端逗号后断行 ============
   中文用的是 5+4 两行短标题，字形宽、字号大（--n35-type-hero-cjk）；
   西文/其它语种的标题长得多，沿用中文的大字号会撑破容器，因此单独走
   --n35-type-hero 这一档（仍属 Hero 层级，只是按语种字形宽度分档）。
   字体族与字重不再单独声明，统一继承 --n35-font-body / --n35-weight-title。 */
.hero-title.hero-title-plain {
    font-family: var(--n35-font-body);
    font-weight: var(--n35-weight-title);
    letter-spacing: 0;
}
#slide1 .hero-title.hero-title-plain {
    font-size: var(--n35-type-hero);
    line-height: var(--n35-leading-hero);
}
/* 逗号后断行只在手机端生效；PC 端隐藏该 <br>，保持自然折行 */
@media (min-width: 1025px) {
    .hero-title-br { display: none; }
}

/* ============ 规格参数区（格式照 NSL03 页面）============
   内容来自 nesoulofficialwebsite 原有的 n35SpecTable（AOSP / Whale TV 双版本 + 四节单值参数），
   呈现方式整套照搬 Nsl03ProductSections 的 .nsl03-specs / .nsl03-download，
   仅把 class 前缀改为 n35-*；字号/字重/行高统一走文件顶部的 --n35-* token。
   配色：--nsl03-primary #2f2f2f / --nsl03-secondary #5bc0de / --nsl03-neutral #f8f9fa / --nsl03-muted #666f7a */
.n35-specs-block {
    padding: 80px 0 32px;
    background: #f8f9fa;
    color: #2f3440;
}
.n35-specs-container {
    width: min(1200px, calc(100% - 32px));
    margin-inline: auto;
}
.n35-specs-header {
    width: min(720px, 100%);
    display: grid;
    gap: 14px;
    margin: 0 auto 64px;
    text-align: center;
}
.n35-specs-header h2 {
    margin: 0;
    font-size: var(--n35-type-section);
    line-height: var(--n35-leading-section);
    font-weight: var(--n35-weight-title);
    background: linear-gradient(135deg, #5bc0de, #3498db);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.n35-specs-header p {
    margin: 0;
    color: #666f7a;
    font-size: var(--n35-type-lead);
    line-height: var(--n35-leading-body);
}

.n35-table-wrap {
    position: relative;
    overflow-x: auto;
    border-radius: 12px;
    background: white;
    box-shadow: 0 24px 60px rgba(20, 27, 36, 0.14);
}
.n35-spec-table {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
}
.n35-spec-table th {
    padding: 24px 32px;
    background: rgba(47, 47, 47, 0.1);
    color: #2f2f2f;
    font-size: var(--n35-type-card);
    font-weight: var(--n35-weight-title);
    text-align: left;
}
.n35-spec-table th:not(:first-child),
.n35-spec-table td:not(:first-child) {
    text-align: center;
}
.n35-spec-table td {
    padding: 22px 32px;
    border-top: 1px solid #edf0f3;
    color: #333a42;
    font-size: var(--n35-type-body);
    line-height: var(--n35-leading-body);
    transition: background 0.2s ease;
}
.n35-spec-table tr:hover td {
    background: #fafafa;
}
.n35-spec-table td:first-child {
    font-weight: var(--n35-weight-title);
}
.n35-spec-group td {
    padding: 14px 32px;
    background: #f8f9fa;
    color: #717b85;
    font-weight: var(--n35-weight-title);
    text-align: left !important;
}
.n35-swipe-hint {
    display: none;
    margin: 0;
}
.n35-mobile-specs {
    display: none;
}

.n35-download {
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 48px 16px 64px;
    text-align: center;
    background: #f8f9fa;
}
.n35-download a {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    padding: 0 28px;
    border-radius: 12px;
    background: #2f2f2f;
    color: white;
    text-decoration: none;
    box-shadow: 0 18px 42px rgba(20, 27, 36, 0.2);
    transition: transform 0.24s ease, background 0.24s ease;
}
.n35-download a:hover {
    transform: translateY(-4px);
    background: #000;
}
.n35-download a span {
    color: #5bc0de;
    font-size: var(--n35-type-small);
    font-weight: var(--n35-weight-action);
}
/* 下载按钮：规格书图标（PDF 文件图标，取代原来的 "PDF" 文字） */
.n35-download-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    line-height: 0;
}
.n35-download-icon svg {
    display: block;
    width: 22px;
    height: 22px;
}
.n35-download p {
    margin: 0;
    color: #727b84;
    font-size: var(--n35-type-body);
    font-style: italic;
}

@media (max-width: 768px) {
    .n35-specs-block {
        padding: 56px 0 24px;
    }
    .n35-specs-header {
        margin-bottom: 40px;
    }
    .n35-table-wrap {
        display: none;
    }
    .n35-mobile-specs {
        display: grid;
        gap: 24px;
    }
    .n35-spec-card {
        overflow: hidden;
        border-radius: 12px;
        background: white;
        box-shadow: 0 18px 42px rgba(20, 27, 36, 0.12);
    }
    .n35-spec-card > h3 {
        margin: 0;
        padding: 16px 18px;
        background: rgba(91, 192, 222, 0.12);
        color: #2f2f2f;
        font-size: var(--n35-type-card);
        font-weight: var(--n35-weight-title);
    }
    .n35-spec-accordion {
        border-top: 1px solid #edf0f3;
    }
    .n35-spec-accordion summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 54px;
        padding: 0 18px;
        color: #222;
        font-weight: var(--n35-weight-title);
        cursor: pointer;
        list-style: none;
    }
    .n35-spec-accordion summary::-webkit-details-marker {
        display: none;
    }
    .n35-spec-accordion summary::after {
        content: "\2304";
        color: #77818b;
        transition: transform 0.2s ease;
    }
    .n35-spec-accordion[open] summary::after {
        transform: rotate(180deg);
    }
    .n35-spec-accordion dl {
        display: grid;
        gap: 0;
        margin: 0;
        padding: 0 18px 12px;
    }
    .n35-spec-accordion dl div {
        display: flex;
        justify-content: space-between;
        gap: 18px;
        padding: 12px 0;
        border-bottom: 1px solid #f0f2f4;
    }
    .n35-spec-accordion dl div:last-child {
        border-bottom: 0;
    }
    .n35-spec-accordion dt,
    .n35-spec-accordion dd {
        margin: 0;
        font-size: var(--n35-type-body);
        line-height: var(--n35-leading-body);
    }
    .n35-spec-accordion dt {
        color: #5f6872;
        font-weight: var(--n35-weight-title);
    }
    .n35-spec-accordion dd {
        max-width: 58%;
        color: #222;
        font-weight: var(--n35-weight-title);
        text-align: right;
    }
}

@media (max-width: 560px) {
    .n35-specs-container {
        width: min(100% - 24px, 1200px);
    }
    .n35-download a {
        width: min(100%, 360px);
        justify-content: center;
        padding-inline: 18px;
    }
}

/* slide7：正文段落与四个音乐风格标签同改暖调深色（背景偏白，避免与白字重叠）
   仅桌面端（≥1025px）；手机端保持原有白色 */
@media (min-width: 1025px) {
#slide7 p.text-gray-400,
#slide7 .sound-label {
color: #241b14 !important;
text-shadow: none !important;
}
}