/* =========================================================
   多兰租号 · 暗夜鎏金主题
   ========================================================= */

:root {
    --ink: #0A0A0C;
    --ink-2: #101014;
    --ink-3: #16161C;

    /* 金色色阶（全局约定）：
       --gold     装饰线/边框/分隔线/图标底
       --gold-lt  标题与强调文字（正文可读色）
       --gold-hi  hover / 高亮态 */
    --gold: #D4AF37;
    --gold-lt: #E8D9A0;
    --gold-hi: #F5E9C4;

    --text: #C0C6D0;
    --text-dim: #9C9EA8;
    --text-hi: #EDE7D7;
    /* 区块大标题再亮一档：眉题改 --gold-lt 后，标题需与之拉开亮度层级 */
    --text-hi2: #F7F2E6;

    --line: rgba(var(--gold-rgb), .16);
    --line-2: rgba(var(--gold-rgb), .34);

    --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
    --sans: "Noto Sans SC", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;

    --wrap: 1240px;
    --ease: cubic-bezier(.22, .61, .36, 1);
    /* 主区块（游戏/流程/安全/FAQ/CTA）上下留白统一取这个值，
       相邻区块间距 = 2 × --sec-pad：PC 120px，移动端 96px（见 960 断点） */
    --sec-pad: 60px;

    /* 带 alpha 的金色/紫色统一走这两个分量，别再散落硬编码 RGB */
    --gold-rgb: 212, 175, 55;
    --violet-rgb: 124, 77, 245;
    --violet-lt-rgb: 167, 139, 250;

    /* 间距刻度：只保留这 6 档，新增间距从这里取 */
    --sp-1: 8px;
    --sp-2: 12px;
    --sp-3: 20px;
    --sp-4: 24px;
    --sp-5: 32px;
    --sp-6: 48px;

    /* 字距刻度：4 档（中文正文 .02 / 小标签 .08 / 中文标题 .16 / 英文小标 .3）
       唯一例外是 ≤640 的 Hero 眉题（.22em，见 640 断点注释：为保单行） */
    --ls-1: .02em;
    --ls-2: .08em;
    --ls-3: .16em;
    --ls-4: .3em;

    /* 行高刻度：5 档（display 1 / 标题 1.3 / UI 1.6 / 正文 1.75 / 长文 1.95）
       例外：.foot__col a 的 28px 是为触屏点按热区写死的像素行高 */
    --lh-1: 1;
    --lh-2: 1.3;
    --lh-3: 1.6;
    --lh-4: 1.75;
    --lh-5: 1.95;
    /* 刻度补充：移动端眉题字距、触屏链接行高，纳入变量避免散落字面量 */
    --ls-5: .22em;
    --lh-touch: 28px;

    /* 字号三档（保守纳入）：超窄屏说明下限 / 正文下限 / 长文正文 */
    --fs-note: 13px;
    --fs-body: 14px;
    --fs-long: 15px;

    /* FAQ 答案展开的最大高度：取足够容纳最长回答的固定值，替代 scrollHeight 计算。
       维护点：若答案显著加长（尤其 ≤320 窄屏），需同步调大，否则会被裁切 */
    --qa-open-max: 360px;

    /* 标题装饰线两级刻度（区块大标题 / 条带小标题） */
    --deco-md: 44px;
    --deco-sm: 26px;

    /* 两页第一个内容块的顶距（首页 Hero 与法务页 hero 共用一套） */
    --hero-pad-top: 120px;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* 导航实际高度 ≈ 88–90px（16+16 内边距 + 品牌两行），
       锚点定位要让出整条导航 + 一点呼吸空隙，84 会把标题压在导航底下 */
    scroll-padding-top: 96px;
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font-family: var(--sans);
    /* 全站可见文本都显式声明字号，这条只作为浏览器默认基线：
       卡内 13 / 说明 14 / 正文（FAQ 答案、法务条款）15 */
    font-size: 16px;
    line-height: var(--lh-4);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    position: relative;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; font-family: var(--serif); color: var(--text-hi); }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--gold); color: #14100A; }

/* 跳过导航：键盘/读屏用户不必逐个 Tab 过 7 个导航项（平时视觉上不可见） */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 300;
    padding: 12px 20px;
    background: var(--gold);
    color: #17130A;
    font-size: 14px;
    font-weight: 700;
}
.skip-link:focus { left: 12px; top: 12px; }

/* 锚点/跳过导航落点时让出固定导航高度，焦点不被导航条压住 */
#top { scroll-margin-top: 96px; }

/* 键盘焦点：全站统一金色描边（深色底上浏览器默认描边几乎看不见） */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* 全局金色细网格底纹 */
.grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(rgba(var(--gold-rgb), .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--gold-rgb), .035) 1px, transparent 1px);
    background-size: 68px 68px;
}

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

.eyebrow {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: var(--ls-4);
    text-transform: uppercase;
    color: var(--gold-lt);
    margin-bottom: 18px;
}

/* ---------------- 按钮 ---------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    padding: 13px 26px;
    min-height: 60px;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: var(--ls-1);
    border: 1px solid transparent;
    transition: background .38s var(--ease), border-color .38s var(--ease), color .38s var(--ease),
                box-shadow .38s var(--ease), transform .38s var(--ease);
    white-space: nowrap;
    position: relative;
    /* <button> 不会继承页面字体、也没有手型光标，Hero 的安卓/苹果弹窗按钮用到了 */
    font-family: inherit;
    cursor: pointer;
}
.btn--sm { min-height: 0; padding: 9px 18px; font-size: var(--fs-body); }
.btn--full { width: 100%; }

.btn--gold {
    background: var(--gold);
    color: #17130A;
    font-weight: 700;
}
.btn--gold:hover {
    background: var(--gold-lt);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(var(--gold-rgb), .22);
}

.btn--line {
    border-color: var(--line-2);
    color: var(--gold-lt);
    background: transparent;
}
.btn--line:hover {
    border-color: var(--gold);
    background: rgba(var(--gold-rgb), .09);
    color: var(--gold-hi);
    transform: translateY(-2px);
}

.btn--ghost {
    border-color: rgba(255, 255, 255, .12);
    color: var(--text);
}
.btn--ghost:hover { border-color: var(--line-2); color: var(--gold-lt); }

/* 按钮内平台图标：沿用素材原始 32×32 */
.btn .ico { flex: none; display: block; }

/* ---------------- 导航 ---------------- */
/* 导航任何端、任何尺寸、任何滚动位置都保持实底固定条，
   杜绝页面内容（尤其品牌区）从它背后透出造成"重叠"观感 */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 90;
    background: rgba(10, 10, 12, .9);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.is-stuck {
    background: rgba(10, 10, 12, .96);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .38);
}
.nav__inner {
    max-width: var(--wrap);
    margin: 0 auto;
    /* 刘海屏/灵动岛：顶部让出安全区 */
    padding: calc(16px + env(safe-area-inset-top, 0px)) 24px 16px;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.brand { position: relative; display: inline-flex; flex-direction: column; }
.brand__mark { display: flex; }
.brand__mark img { border-radius: 8px; }
.brand__row { display: flex; align-items: center; gap: var(--sp-2); }
.brand__name {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--gold-lt);
    letter-spacing: var(--ls-3);
    /* 与品牌展示区「多兰租号」完全一致的金渐变（文字裁剪上色） */
    background: linear-gradient(180deg, #F7EFD8 12%, var(--gold-lt) 55%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* 域名第二行：逐字符 flex + space-between，两端与上一行（logo 左缘 / 名称右缘）严格对齐；
   width:0 使其不参与容器固有宽度计算（容器宽由上一行决定），min-width:100% 再撑满 */
.brand__domain {
    display: flex;
    justify-content: space-between;
    width: 0;
    min-width: 100%;
    margin-top: 5px;
    font-style: normal;
    font-size: 12px;
    /* 用 700 而非 600：全站只有这一处会用到 600，为它多下一个字重包不划算 */
    font-weight: 700;
    color: var(--text-dim);
}

.nav__links {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-5);
}
.nav__links a {
    font-size: 14px;
    color: var(--text);
    position: relative;
    transition: color .3s var(--ease);
}
.nav__links a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -6px;
    width: 0; height: 1px;
    background: var(--gold);
    transition: width .34s var(--ease);
}
.nav__links a:hover { color: var(--gold-lt); }
.nav__links a:hover::after { width: 100%; }
.nav__links a.is-active { color: var(--gold-lt); }
.nav__links a.is-active::after { width: 100%; }

.nav__auth { display: flex; gap: var(--sp-1); }

.nav__toggle {
    display: none;
    margin-left: auto;
    width: 40px; height: 36px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 9px 10px;
    flex-direction: column;
    justify-content: space-between;
}
.nav__toggle span { display: block; height: 1px; background: var(--gold-lt); transition: .3s var(--ease); }

/* 移动端抽屉：右上角关闭按钮 + 左侧遮罩层 */
.nav__close {
    display: none;
    position: absolute;
    top: 20px; right: 22px;
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid var(--line-2);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.nav__close:hover { border-color: var(--gold); background: rgba(var(--gold-rgb), .12); transform: rotate(90deg); }
.nav__close span {
    position: absolute;
    width: 17px; height: 1.5px;
    background: var(--gold-lt);
    border-radius: 1px;
}
.nav__close span:nth-child(1) { transform: rotate(45deg); }
.nav__close span:nth-child(2) { transform: rotate(-45deg); }

.nav__backdrop {
    position: fixed;
    inset: 0;
    z-index: 88;
    background: rgba(6, 6, 8, .58);
    opacity: 0;
    visibility: hidden;
    transition: opacity .38s var(--ease), visibility .38s var(--ease);
}
.nav__backdrop.is-on { opacity: 1; visibility: visible; }

/* <picture> 只是载体：让它撑满父容器，内部 img 的百分比宽高行为与原来一致 */
.hero__bg picture,
.card__media picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---------------- Hero ---------------- */
.hero {
    position: relative;
    overflow: hidden;
}

.hero__stage {
    position: relative;
    z-index: 1;
    /* 封顶 900px：视口再高（iPad Pro 竖屏 / 大屏显示器）也不无限拉伸，
       否则 Hero 内容到信任条之间会出现大段空白 */
    min-height: 100vh;
    min-height: min(100svh, 900px);
    display: flex;
    flex-direction: column;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .5;
    filter: saturate(.55) brightness(.75);
}
.hero__veil {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 50% 42%, rgba(var(--gold-rgb), .13), transparent 62%),
        linear-gradient(180deg, rgba(10, 10, 12, .94) 0%, rgba(10, 10, 12, .74) 42%, var(--ink) 100%);
}
.hero__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(var(--gold-rgb), .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--gold-rgb), .05) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 78%);
}

.hero__inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    /* 左右必须显式给 padding：本规则源码位置在 .wrap{padding:0 24px} 之后、
       同为单类选择器，写 0 会把 wrap 的左右内边距覆盖掉，导致 Hero 文案贴边 */
    padding: 120px 24px 56px;
}

.hero__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    margin-bottom: 40px;
}
.hero__logo {
    width: 96px; height: 96px;
    border-radius: 20px;
    /* 光晕取自 logo 自身主色（紫），与金渐变标题形成冷暖对比；2026-09-14 定稿（原为金色 rgba(212,175,55,.3)） */
    box-shadow: 0 10px 40px rgba(var(--violet-rgb), .4);
}
.hero__wordmark {
    text-align: left;
    display: flex;
    align-items: center;
    height: 96px;
}
.hero__wordmark strong {
    display: block;
    font-family: var(--serif);
    /* 上限从 78px 放到 96px：超宽屏下品牌名不该和 .hero__title(上限 68px) 挤成同一量级 */
    font-size: clamp(46px, 6.4vw, 96px);
    font-weight: 700;
    letter-spacing: var(--ls-3);
    line-height: var(--lh-1);
    background: linear-gradient(180deg, #F7EFD8 12%, var(--gold-lt) 55%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* 与 logo 的紫色光晕呼应（2026-09-14 定稿，原为金色 rgba(212,175,55,.28)） */
    filter: drop-shadow(0 4px 22px rgba(var(--violet-lt-rgb), .26));
}

.hero__title {
    font-size: clamp(34px, 5.4vw, 68px);
    line-height: var(--lh-2);
    letter-spacing: var(--ls-2);
    /* H1 用最亮一档（--text-hi2）：区块标题提亮后，H1 需保持最高层级 */
    color: var(--text-hi2);
    /* 与品牌区 logo / 品牌名的紫色光晕同一套语言（原为金色） */
    text-shadow: 0 2px 40px rgba(var(--violet-rgb), .18);
}
.hero__title .sep { color: var(--gold); margin: 0 .1em; }

.hero__actions {
    margin-top: 44px;
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.hero__actions .btn { min-width: 176px; }
.cta__actions .btn { min-width: 176px; }

.hero__scroll {
    position: relative;
    width: 1px; height: 38px;
    margin: 22px auto 28px;
    background: linear-gradient(180deg, transparent, var(--gold));
    overflow: hidden;
}
.hero__scroll span {
    position: absolute;
    top: -20px; left: 0;
    width: 1px; height: 20px;
    background: var(--gold-lt);
    animation: scrollDot 2.4s infinite var(--ease);
}
@keyframes scrollDot {
    0% { top: -22px; opacity: 0; }
    40% { opacity: 1; }
    100% { top: 40px; opacity: 0; }
}

/* ---------------- 信任数据条 ---------------- */
.trust {
    position: relative;
    z-index: 2;
    flex: none;
    padding: 30px 0;
    background: linear-gradient(180deg, rgba(20, 20, 26, .92), rgba(10, 10, 12, .5));
    border-top: 1px solid var(--line-2);
    border-bottom: 1px solid var(--line-2);
}
.trust__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
}
.trust__list li { text-align: center; position: relative; }
.trust__list li + li::before {
    content: "";
    position: absolute;
    left: -10px; top: 12%;
    width: 1px; height: 76%;
    background: var(--line);
}
.trust .num {
    display: block;
    font-family: var(--serif);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 700;
    color: var(--gold-lt);
    line-height: var(--lh-2);
    letter-spacing: var(--ls-1);
}
/* 说明文字长度不一（5–8 字），窄列里宁可整行不折，避免某一格变成两行把整条拉高 */
.trust__list span {
    display: block;
    font-size: 14px;
    color: var(--text-dim);
    letter-spacing: var(--ls-2);
    white-space: nowrap;
}
/* 280px 级折叠屏外屏：两列时单列只剩 ~116px，「全网游戏一站畅玩」撑不下 → 允许折行 */
@media (max-width: 380px) {
    .trust__list span { white-space: normal; }
}
/* 320px 级超窄屏：信任条数字与说明再降一档，避免「全网游戏一站畅玩」被压成三行 */
@media (max-width: 320px) {
    /* 数字再降一档 + 说明行高固定（不预留两行，避免短说明下方留空） */
    .trust .num { font-size: 20px; }
    .trust__list span {
        font-size: var(--fs-note);
        letter-spacing: var(--ls-1);
        white-space: normal;
        line-height: var(--lh-3);
    }
}

/* ---------------- 章节标题 ---------------- */
/* 区块间距收到 72px 后，标题到内容的 58px 显得和区块间距同级，
   降到 48px 保住「区块间距 > 标题间距 > 卡片间距」的层级 */
.sec-head { text-align: center; margin-bottom: 48px; }
.sec-head__en {
    font-size: 12px;
    letter-spacing: var(--ls-4);
    color: var(--gold-lt);
    text-transform: uppercase;
    margin-bottom: 12px;
}
.sec-head__zh {
    font-size: clamp(26px, 3.4vw, 40px);
    letter-spacing: var(--ls-3);
    color: var(--text-hi2);
}
.sec-head__sub { margin-top: 14px; font-size: 14px; color: var(--text-dim); }
/* 金色在本站同时承担数据/价格/按钮/分隔线四种语义，纯装饰这一段收窄到 44px
   并改成两端渐隐，靠左右两根渐隐线继续向两侧延伸，减少实心金色面积 */
.sec-head__line {
    width: var(--deco-md); height: 1px;
    margin: 22px auto 0;
    background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
    position: relative;
}
.sec-head__line::before,
.sec-head__line::after {
    content: "";
    position: absolute;
    top: 50%;
    width: var(--deco-md); height: 1px;
}
.sec-head__line::before { right: 100%; margin-right: 10px; background: linear-gradient(270deg, transparent, var(--line-2)); }
.sec-head__line::after { left: 100%; margin-left: 10px; background: linear-gradient(90deg, transparent, var(--line-2)); }

/* ---------------- 游戏卡片 ---------------- */
.games { padding: var(--sec-pad) 0; }

.game-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
}

.card {
    position: relative;
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: 3px;
    overflow: hidden;
    transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.card::before,
.card::after {
    content: "";
    position: absolute;
    width: 14px; height: 14px;
    border: 1px solid var(--gold);
    opacity: 0;
    transition: opacity .45s var(--ease);
    z-index: 3;
    pointer-events: none;
}
.card::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.card::after { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.card:hover {
    transform: translateY(-8px);
    border-color: var(--line-2);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .55), 0 0 0 1px rgba(var(--gold-rgb), .1);
}
.card:hover::before, .card:hover::after { opacity: 1; }

.card__media {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--ink-3);
}
.card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease), filter .5s var(--ease);
    filter: saturate(.85) brightness(.92);
}
.card:hover .card__media img { transform: scale(1.07); filter: saturate(1) brightness(1); }

.card__body { padding: var(--sp-3); }
.card__title {
    font-size: 18px;
    letter-spacing: var(--ls-2);
    color: var(--text-hi);
    margin-bottom: 8px;
}
.card__desc {
    /* 两行高度跟着行高走，不再写死 47px；max-height 兜住不支持 line-clamp 的内核 */
    min-height: calc(2 * var(--lh-4) * 1em);
    max-height: calc(2 * var(--lh-4) * 1em);
    font-size: var(--fs-body);
    color: var(--text);
    line-height: var(--lh-4);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card__price {
    margin: 14px 0 16px;
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--serif);
    white-space: nowrap;
}
.card__price .val { font-size: 26px; font-weight: 700; color: var(--gold-lt); line-height: var(--lh-1); }
.card__price .unit { font-size: var(--fs-body); color: var(--text-dim); margin-left: 4px; font-family: var(--sans); }

/* 「更多游戏」入口卡：与其余 7 张区隔（金边 + 金色标题），别让 .card--more 继续当死类名 */
.card--more { border-color: var(--line-2); }
.card--more .card__title { color: var(--gold-lt); }

/* 点击热区只覆盖「媒体图 + 立即租号按钮」两块：
   媒体图由 .card__media-link 承载跳转（tabindex=-1 + aria-hidden，读屏与 Tab 只看按钮），
   描述与价格区恢复为普通文本，可正常选中复制。 */
.card__media-link { display: block; width: 100%; height: 100%; }

/* ---------------- 租号步骤 ---------------- */
.steps { padding: var(--sec-pad) 0; }
.steps__actions {
    margin-top: 46px;
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.steps__actions .btn { min-width: 176px; }
.step-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
    position: relative;
}
.step {
    position: relative;
    padding: 40px 22px 34px;
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: 3px;
    text-align: center;
    transition: border-color .4s var(--ease), background .4s var(--ease);
}
.step:hover { border-color: var(--line-2); background: var(--ink-3); }
.step::after {
    content: "";
    position: absolute;
    right: -13px; top: 50%;
    width: 20px; height: 1px;
    background: var(--line-2);
    z-index: 2;
}
.step:last-child::after { display: none; }
.step__no {
    display: block;
    font-family: var(--serif);
    font-size: 40px;
    font-weight: 700;
    /* 兜底：不支持 -webkit-text-stroke 的渲染器上给半透明金色填充，数字至少看得见 */
    color: rgba(var(--gold-rgb), .5);
    -webkit-text-stroke: 1px var(--gold);
    line-height: var(--lh-1);
    margin-bottom: 18px;
    letter-spacing: var(--ls-1);
}
@supports (-webkit-text-stroke: 1px red) {
    .step__no { color: transparent; }
}
.step h3 { font-size: 18px; letter-spacing: var(--ls-3); margin-bottom: 12px; }
.step p { font-size: 14px; color: var(--text-dim); line-height: var(--lh-4); }

/* ---------------- 安全保障 ---------------- */
.safety { padding: var(--sec-pad) 0; }
.safe-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
}
.safe {
    text-align: center;
    padding: 38px 20px;
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: 3px;
    transition: transform .45s var(--ease), border-color .45s var(--ease);
}
.safe:hover { transform: translateY(-6px); border-color: var(--line-2); }
.safe__icon {
    width: 74px; height: 74px;
    margin: 0 auto 22px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--ink-3);
}
.safe__icon svg { width: 40px; height: 40px; }
/* 区块内小标题统一 18px，卡标题 19px：17/18/19/20 四档收成两档 */
.safe h3 { font-size: 18px; letter-spacing: var(--ls-3); margin-bottom: 10px; }
.safe p { font-size: 14px; color: var(--text-dim); line-height: var(--lh-4); letter-spacing: var(--ls-1); }

/* ---------------- FAQ ---------------- */
.faq { padding: var(--sec-pad) 0; }
.faq__list { max-width: 900px; margin: 0 auto; }
.qa {
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--ink-2);
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color .4s var(--ease);
}
.qa:hover { border-color: var(--line-2); }
.qa__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 20px 24px;
    background: transparent;
    border: 0;
    color: var(--text-hi);
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: var(--ls-1);
    text-align: left;
}
.qa__q i {
    flex: none;
    width: 13px; height: 13px;
    position: relative;
    transition: transform .4s var(--ease);
}
.qa__q i::before,
.qa__q i::after {
    content: "";
    position: absolute;
    background: var(--gold);
    transition: opacity .3s var(--ease);
}
.qa__q i::before { left: 0; top: 6px; width: 13px; height: 1px; }
.qa__q i::after { left: 6px; top: 0; width: 1px; height: 13px; }
.qa.is-open .qa__q i { transform: rotate(90deg); }
.qa.is-open .qa__q i::after { opacity: 0; }
.qa.is-open .qa__q { color: var(--gold-lt); }

.qa__a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .48s var(--ease);
}
/* 展开高度改为固定「足够大」值过渡：不再依赖 JS 计算 scrollHeight，
   字体延迟加载或视口变化都不会把答案截断 */
.qa.is-open .qa__a { max-height: var(--qa-open-max); }
.qa__a p {
    padding: 16px 24px 22px;
    font-size: var(--fs-long);
    line-height: var(--lh-5);
    color: var(--text-dim);
    /* 分隔线直接贴住问题区，不留 2px 断层 */
    border-top: 1px solid var(--line);
}

/* ---------------- CTA ---------------- */
.cta {
    /* 与整站背景一致：不使用渐变底与上下分割线 */
    padding: var(--sec-pad) 0;
}
.cta__inner { text-align: center; }
.cta h2 {
    font-size: clamp(28px, 4vw, 46px);
    letter-spacing: var(--ls-3);
    /* 与 .hero__title 一致：字色 + 紫色光晕 */
    color: var(--text-hi2);
    text-shadow: 0 2px 40px rgba(var(--violet-rgb), .18);
}
.cta__actions {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

/* ---------------- 悬浮返回顶部 ---------------- */
.to-top {
    position: fixed;
    right: calc(22px + env(safe-area-inset-right, 0px));
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    z-index: 80;
    width: 44px; height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--line-2);
    border-radius: 2px;
    background: rgba(16, 16, 20, .92);
    color: var(--gold-lt);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .35s var(--ease), visibility .35s var(--ease),
                transform .35s var(--ease), border-color .3s var(--ease),
                background .3s var(--ease), color .3s var(--ease);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--gold); background: rgba(var(--gold-rgb), .12); color: var(--gold-hi); }

/* 关注我们：独立成段，位于 CTA 区下方、页脚上方 */
/* 关注我们只是 CTA 下方的附属条带：与 CTA 的间距（60+30）略小于与页脚的间距（20+76），
   靠"离主区更近"表达从属关系；标题左右各加一根渐隐短线做视觉标识，
   避免它与上方 CTA 连成一片被误读成同一个区块（不额外加分割线/底色） */
.follow-band {
    /* 与 CTA / 页脚用一条细分割线明确区隔，避免"从属关系"靠间距隐晦表达 */
    border-top: 1px solid var(--line);
    padding: 44px 0 34px;
}
.follow-band__inner { text-align: center; }
.follow-band__title {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 12px;
    letter-spacing: var(--ls-4);
    text-transform: uppercase;
    color: var(--gold-lt);
    margin-bottom: 20px;
}
.follow-band__title::before,
.follow-band__title::after {
    content: "";
    width: var(--deco-sm); height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold));
}
.follow-band__title::after { background: linear-gradient(270deg, transparent, var(--gold)); }
.follow-band__list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.follow-band__list .follow {
    gap: var(--sp-1);
    min-height: 44px; /* 触屏最小可点热区 */
    padding: 9px 18px;
    border: 1px solid var(--line-2);
    border-radius: 2px;
    background: rgba(255, 255, 255, .02);
    transition: border-color .3s var(--ease), background .3s var(--ease);
}
.follow-band__list .follow:hover {
    border-color: var(--gold);
    background: rgba(var(--gold-rgb), .08);
}

/* ---------------- 页脚 ---------------- */
.foot { padding: 76px 0 30px; background: var(--ink); }
.foot__inner {
    display: grid;
    /* 三栏内容都很短，整组收窄到 1000px 居中（分割线另由 .foot__rule 铺满 1240） */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
    max-width: 1000px;
    padding-bottom: 46px;
}
/* 页脚分割线：单独一行、与全站 .wrap(1240) 等宽；三栏收窄后分割线仍与上下文左右对齐 */
.foot__rule { border-bottom: 1px solid var(--line); }
/* 三栏居中：整组由 max-width+margin auto 居中，每栏内容也居中 */
.foot__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 链接带 5px 上下内边距（触屏热区），gap 收到 8px 以保持原始行距观感 */
    gap: var(--sp-1);
    text-align: center;
}
.foot__col h4 {
    font-size: 14px;
    letter-spacing: var(--ls-3);
    color: var(--gold-lt);
    margin-bottom: 6px;
    font-weight: 700;
}
.foot__col a { font-size: 14px; line-height: var(--lh-touch); padding: 5px 0; color: var(--text-dim); transition: color .3s var(--ease); width: fit-content; }
.foot__col a:hover { color: var(--gold-lt); }

/* 关注我们（由页脚移入 CTA）：图标 + 名称的胶囊按钮横排 */
.follow {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    min-height: 24px;
    cursor: pointer;
    /* 三个平台入口由 <a> 改成了 <button>：按钮既不继承页面字体、还带平台默认外观，这里全部拉平 */
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
}
/* 弹窗触发行是 <button>，双击会选中文字，关掉 */
button.follow { -webkit-user-select: none; user-select: none; }
/* 恢复素材自带的图标（<img> 引用），不再用 mask 统一上色 */
.follow__ico {
    width: 28px;
    max-height: 24px;
    flex: none;
    object-fit: contain;
}
.follow__name { font-size: 14px; color: var(--text-dim); transition: color .3s var(--ease); }
.follow:hover .follow__name { color: var(--gold-lt); }

.foot__bar {
    /* 与 .foot__inner 同宽、且都对齐全站 .wrap（1240）：分割线与上下文左右对齐 */
    max-width: var(--wrap);
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    font-size: var(--fs-body);
    color: var(--text-dim);
    text-align: center;
}
.foot__copy { display: block; letter-spacing: var(--ls-1); }
.foot__icp { color: var(--text-dim); transition: color .3s var(--ease); }
.foot__icp:hover { color: var(--gold-lt); }

/* ---------------- 法务子页（隐私协议） ---------------- */
.legal-hero {
    position: relative;
    /* 与首页 Hero 用同一个顶距变量（原来 152px，两页首块起点差 32px） */
    padding: var(--hero-pad-top) 0 52px;
    background:
        radial-gradient(900px 420px at 50% -20%, rgba(var(--gold-rgb), .12), transparent 70%),
        var(--ink);
    border-bottom: 1px solid var(--line);
}
.legal-hero .wrap { text-align: center; }
.legal-hero h1 {
    font-size: clamp(32px, 4.6vw, 54px);
    letter-spacing: var(--ls-2);
    line-height: var(--lh-2);
}
.legal-hero__sub { margin-top: 14px; font-size: 14px; letter-spacing: var(--ls-2); color: var(--text-dim); }
.legal-hero__meta {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-1) 0;
    font-size: var(--fs-body);
    color: var(--text-dim);
}
.legal-hero__meta span { padding: 0 16px; position: relative; }
.legal-hero__meta span + span::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 1px; height: 12px;
    margin-top: -6px;
    background: var(--line-2);
}

/* 与首页同源：上下留白跟随 --sec-pad（PC 60 / ≤960 48），底部多留一段收尾空间 */
.legal { padding: var(--sec-pad) 0 calc(var(--sec-pad) + 32px); }

.legal__toc {
    display: grid;
    /* 自适应列数、下限 240px（920 宽下约 3 列）：长条目基本单行，不再挤成两行 */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-2) var(--sp-4);
    padding: 26px 30px;
    /* 与 .legal__body(max 920) 等宽并居中对齐，避免目录比正文宽出一截 */
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 52px;
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: 3px;
}
.legal__toc a {
    display: flex;
    align-items: baseline;
    gap: var(--sp-1);
    font-size: 14px;
    line-height: var(--lh-3);
    color: var(--text-dim);
    transition: color .3s var(--ease);
}
.legal__toc a:hover { color: var(--gold-lt); }
.legal__toc a i {
    flex: none;
    font-style: normal;
    font-family: var(--serif);
    font-size: 12px;
    letter-spacing: var(--ls-1);
    color: var(--gold-lt);
}

.legal__body { max-width: 920px; margin: 0 auto; }
.legal__body h2 {
    margin: 52px 0 20px;
    padding-left: 14px;
    border-left: 3px solid var(--gold);
    font-size: 22px;
    line-height: var(--lh-2);
    letter-spacing: var(--ls-1);
    color: var(--gold-lt);
    scroll-margin-top: 96px;
}
.legal__body h2:first-of-type { margin-top: 0; }
.legal__body h3 {
    margin: 34px 0 14px;
    font-size: 18px;
    line-height: var(--lh-2);
    color: var(--text-hi);
    scroll-margin-top: 96px;
}
/* 正文序号统一为标准四级：一、（h2）→（一）（h3）→ 1.（有序列表 marker）→（1）（嵌套有序列表）。
   第四层用计数器生成 （1）（2）…：若沿用默认 decimal，嵌套列表和外层列表的序号
   长得一模一样（都是 1. 2. 3.），层级完全分不出来。 */
.legal__body ol ol {
    list-style: none;
    counter-reset: legal-sub;
    padding-left: 2.7em;
}
.legal__body ol ol > li { position: relative; counter-increment: legal-sub; }
.legal__body ol ol > li::before {
    content: "（" counter(legal-sub) "）";
    position: absolute;
    left: -2.7em;
    color: var(--gold);
}
/* 第三层嵌套（ol ol ol）若沿用（1）会与上一层撞车，改用 1) 并再收一级缩进 */
.legal__body ol ol ol { padding-left: 2.4em; }
.legal__body ol ol ol > li::before {
    content: counter(legal-sub) ")";
    left: -2.4em;
    color: var(--gold-lt);
}

.legal__body p {
    margin: 0 0 14px;
    font-size: var(--fs-long);
    line-height: var(--lh-5);
    color: var(--text);
}
.legal__body strong { color: var(--text-hi); font-weight: 700; }
.legal__body a {
    color: var(--gold-lt);
    border-bottom: 1px solid var(--line-2);
    transition: color .3s var(--ease);
}
.legal__body a:hover { color: var(--gold-hi); }

.legal__body ol, .legal__body ul { margin: 0 0 16px; padding-left: 1.8em; }
.legal__body ol { list-style: decimal; }
.legal__body ul { list-style: disc; }
.legal__body ol ol, .legal__body ol ul, .legal__body ul ol, .legal__body ul ul { margin: 10px 0 12px; }
.legal__body li {
    margin-bottom: 10px;
    font-size: var(--fs-long);
    line-height: var(--lh-5);
    color: var(--text);
}
.legal__body li > p:last-child { margin-bottom: 0; }
/* 15px 正文旁的序号用浅金，避免与正文抢重量 */
.legal__body li::marker { color: var(--gold-lt); }

/* 用 .legal__body p.legal__note 提高特异性，替掉原来的两处 !important */
.legal__body p.legal__note {
    padding: 20px 24px;
    margin-bottom: 28px;
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    border-radius: 2px;
    color: var(--text);
}
.legal__contact {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
.legal__body p.legal__sign {
    margin-top: 30px;
    text-align: right;
    color: var(--text-dim);
}
.legal__back {
    display: flex;
    width: fit-content;
    margin: 46px auto 0;
}

/* ---------------- 关注我们弹窗 ---------------- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(6, 6, 8, .74); }

/* 弹窗/抽屉打开时锁住背景滚动：iOS 上单纯 overflow:hidden 无效，
   必须配 position:fixed + 负 top（JS 写入 scrollY），关闭时还原 */
body.is-locked {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}
.modal__card {
    position: relative;
    width: min(360px, 100%);
    max-height: min(84vh, 660px);
    overflow: auto;
    padding: 34px 28px 28px;
    background: var(--ink-2);
    border: 1px solid var(--line-2);
    border-radius: 4px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
    text-align: center;
    transform: translateY(16px) scale(.97);
    transition: transform .35s var(--ease);
}
.modal.is-open .modal__card { transform: none; }
.modal__close {
    position: absolute;
    top: 12px; right: 12px;
    width: 44px; height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--line-2);
    border-radius: 50%;
    transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.modal__close:hover { border-color: var(--gold); background: rgba(var(--gold-rgb), .12); transform: rotate(90deg); }
.modal__close span {
    position: absolute;
    width: 15px; height: 1.5px;
    background: var(--gold-lt);
    border-radius: 1px;
}
.modal__close span:nth-child(1) { transform: rotate(45deg); }
.modal__close span:nth-child(2) { transform: rotate(-45deg); }
/* 二维码必须是方的：HTML 上的 width/height 属性会在 CSS 只写 width 时继续生效，
   210px 的宽度配 396px 的属性高度会把方图拉成长方形（企业微信弹窗就是这样被拉长的）。
   这里显式 height:auto + aspect-ratio 兜底，任何尺寸下都保持等比；max-width 防空卡片溢出。 */
.modal__qr {
    display: block;
    width: 210px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    margin: 0 auto 18px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #fff;
}
.modal__body h3 {
    font-size: 18px;
    letter-spacing: var(--ls-2);
    color: var(--gold-lt);
    margin-bottom: 12px;
}
.modal__body p {
    font-size: 14px;
    line-height: var(--lh-5);
    color: var(--text-dim);
    text-align: center;
}
/* 抖音/快手弹窗：平台图标置于「多兰租号」上方（素材为 1024×1024 方图，等比不拉伸） */
.modal__brand-ico {
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    object-fit: contain;
}
.modal__eyebrow {
    font-size: 12px;
    letter-spacing: var(--ls-4);
    text-transform: uppercase;
    color: var(--gold-lt);
    margin-bottom: 14px;
}

/* 弹窗内的跳转按钮（安卓/苹果租号下载弹窗，与源站一致的两枚） */
.modal__actions {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}
.modal__btn {
    display: block;
    padding: 13px 18px;
    border: 1px solid var(--gold);
    border-radius: 2px;
    background: var(--gold);
    color: #17130A;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: var(--ls-1);
    transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.modal__btn--line {
    background: transparent;
    border-color: var(--line-2);
    color: var(--gold-lt);
    font-weight: 500;
}
.modal__btn:hover { background: var(--gold-lt); border-color: var(--gold-lt); }
.modal__btn--line:hover {
    background: rgba(var(--gold-rgb), .09);
    border-color: var(--gold);
    color: var(--gold-hi);
}

/* ---------------- 入场动画 ---------------- */
/* 这里改用 keyframes + backwards 填充，而不是在 .reveal 上写 transition 简写：
   ①.transition 简写会连组件自己的 transition 一起覆盖（.reveal 源码在 .card 之后、同特异性），
     卡片/安全卡的 hover 边框与阴影因此失去过渡，变成瞬跳；
   ②.reveal.in-view{transform:none} 与 .card:hover{transform:translateY(-8px)} 特异性相同
     (0,2,0) 但源码更靠后，会把悬停上浮整个盖掉。
   动画（backwards，不带 forwards）只在入场期间接管 opacity/transform，播完即完全交还层叠，
   组件自身的 hover 过渡与位移随之恢复。 */
.js .reveal { opacity: 0; }
.js .reveal.in-view {
    opacity: 1;
    animation: rvIn .8s var(--ease) var(--rv-delay, 0s) backwards;
}
@keyframes rvIn {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}
.reveal[data-delay="1"] { --rv-delay: .09s; }
.reveal[data-delay="2"] { --rv-delay: .18s; }
.reveal[data-delay="3"] { --rv-delay: .27s; }
.reveal[data-delay="4"] { --rv-delay: .36s; }
.reveal[data-delay="5"] { --rv-delay: .45s; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1080px) {
    /* 961–1080：游戏区回到 3 列（4 列时卡片仅 ~210px，14px 卖点易被两行裁切）。
       flex-grow 设为 0：末行两张与其余卡等宽、右侧留一格空，避免末行明显变大 */
    .nav__inner { gap: var(--sp-3); }
    .nav__links { gap: var(--sp-3); }
    .game-grid { display: flex; flex-wrap: wrap; }
    .card { flex: 0 1 calc(33.333% - 16px); }
    .foot__inner { gap: var(--sp-5); }
}

@media (max-width: 960px) {
    /* 桌面导航在 961 才出现，信任条也统一到 960 降 2 列：
       881–960 这段 4 列每列只有 ~190px，8 字说明会贴到分隔线 */
    .trust__list { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-2); }
    .trust__list li:nth-child(odd)::before { display: none; }

    /* 统一降列时机：≤960 游戏/步骤/安全一起降到 2 列（游戏区由上面的 flex 复位为 grid） */
    .game-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
    .card { flex: none; }
    .step-list { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
    .step::after { display: none; }
    .safe-grid { grid-template-columns: repeat(2, 1fr); }

    /* 移动端抽屉 .nav__links 是 .nav 的 fixed 子元素：.nav 一旦带 backdrop-filter /
       filter，会成为 fixed 后代的包含块，抽屉会被压成导航条高度、背景只剩一条。
       故移动端导航一律不用 backdrop-filter，用近实底色保证不透出内容。 */
    .nav, .nav.is-stuck {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(12, 12, 15, .97);
        box-shadow: none;
    }
    .nav__links {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        /* 86vw 时 320px 机型要占掉 85% 屏宽，遮罩几乎看不见；收到 78vw 兼顾菜单宽度与遮罩 */
        width: min(16rem, 78vw);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-4);
        /* 顶部/底部让出安全区；横屏矮视口下抽屉内容会超过一屏，必须可滚 */
        padding: calc(76px + env(safe-area-inset-top, 0px)) 26px calc(28px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        overscroll-behavior: contain;
        /* 深色抽屉里默认的亮色系统滚动条很跳 */
        scrollbar-width: thin;
        scrollbar-color: var(--line-2) transparent;
        background: var(--ink-3);
        border-left: 1px solid var(--line-2);
        box-shadow: -18px 0 48px rgba(0, 0, 0, .55);
        transform: translateX(100%);
        /* 关闭态必须 visibility:hidden：只靠 translateX 移出屏幕时，
           键盘 Tab 仍会跳进这 6 个看不见的链接里 */
        visibility: hidden;
        transition: transform .42s var(--ease), visibility .42s var(--ease);
        z-index: 95;
    }
    .nav__links.is-open { transform: none; visibility: visible; }
    .nav__close {
        display: flex;
        top: calc(16px + env(safe-area-inset-top, 0px));
        right: calc(16px + env(safe-area-inset-right, 0px));
    }
    .nav__links a { font-size: 16px; }
    /* 抽屉里的当前页高亮：桌面用下划线，抽屉里补一根左侧金色竖条更醒目 */
    .nav__links a.is-active::before {
        content: "";
        position: absolute;
        left: -14px; top: 50%;
        transform: translateY(-50%);
        width: 2px; height: 15px;
        background: var(--gold);
    }
    .nav__auth { display: none; }
    .nav__toggle { display: flex; }
    .nav__toggle.is-on span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .nav__toggle.is-on span:nth-child(2) { opacity: 0; }
    .nav__toggle.is-on span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* 平板/手机（≤960）不做整屏撑高：内容实际高度往往只有视口的一半，
       100svh 会把多出来的空间全部堆在「品牌区按钮 → 信任数据条」之间。
       改为随内容自适应，信任条紧跟内容之后。 */
    .hero__stage { min-height: 0; }
    /* 小屏内容总高常超过一屏：若仍居中，溢出会上下同时外溢，
       上半截顶进 fixed 导航下面。改为顶部对齐 + 足够 padding-top，任何尺寸都不会重叠。
       用 .wrap.hero__inner 双类提高特异性：640px 媒询里的 .wrap{padding:0 18px}
       在文件更靠后，单类写法会被它覆盖，导致顶距只剩 18px、内容钻进导航底下。
       左右同样要显式给 24px，否则 Hero 文案会贴着屏幕边缘。 */
    .wrap.hero__inner { padding: calc(104px + env(safe-area-inset-top, 0px)) 24px 48px; justify-content: flex-start; }
    .sec-head__sub { font-size: 15px; }
    .qa__q { font-size: 16px; }
    .hero__brand { gap: var(--sp-3); margin-bottom: 28px; }
    .hero__logo { width: 64px; height: 64px; border-radius: 14px; }
    .hero__wordmark { height: 64px; }
    .hero__wordmark strong { font-size: 38px; letter-spacing: var(--ls-3); }
    /* 移动端同样统一：相邻区块间距 = 2 × 48 = 96px */
    .games, .steps, .safety, .faq, .cta { padding: 48px 0; }
    .legal { padding: 48px 0 72px; }
    /* 目录列数随断点收敛：≤960 两列 */
    .legal__toc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    body { font-size: 16px; }
    .wrap { padding: 0 18px; }
    /* Hero 眉题 33 个字符在 375px 宽 + .34em 字距下约 400px 必然折行，
       收小字号和字距让它保持单行 */
    .eyebrow { font-size: 10px; letter-spacing: var(--ls-5); }
    /* 同样用双类防覆盖：保证 ≤640px 时 Hero 顶距仍在导航之下，并补回水平内边距 */
    .wrap.hero__inner { padding: calc(104px + env(safe-area-inset-top, 0px)) 18px 44px; }
    .game-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
    .card__body { padding: 14px; }
    .card__title { font-size: 16px; }
    .card__desc {
        font-size: var(--fs-body);
        /* 卡内文字仅 ~135px（≈9.6 字/行），两行放不下 20+ 字卖点 → 允许到 3 行；
           不覆盖 min-height，沿用基础规则的「2 行下限」，让同排卡片按钮对齐 */
        max-height: calc(3 * var(--lh-4) * 1em);
        -webkit-line-clamp: 3;
    }
    /* 小卡（约 172px 宽）里 30px 的价格数字占比过大，压回 24px */
    .card__price .val { font-size: 24px; }
    /* 按钮高度 60 → 52：三个全宽按钮竖排时能省下约 30px 首屏空间 */
    .btn { min-height: 52px; }
    /* 单列 4 张纵向堆叠太长 → 改 2 列缩短滚动 */
    .step-list { grid-template-columns: repeat(2, 1fr); }
    .safe-grid { grid-template-columns: repeat(2, 1fr); }
    .foot__inner { grid-template-columns: 1fr; gap: var(--sp-5); }
    /* 单列堆叠后居中排版阅读效率低，改为左对齐 */
    .foot__col { align-items: flex-start; text-align: left; }
    /* 悬浮回顶按钮固定在右下角，滚到底时会盖住页脚最后几行；
       给页脚多留 78px 底边距，让版权/ICP 行始终在按钮区之上 */
    /* 再加系统安全区，避免 iPhone 底部横条压住版权行 */
    .foot { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
    /* Hero 三枚按钮改 2 列网格：前两枚并排、第三枚跨满整行，
       比三枚全宽竖排（约 208px）矮一半，首屏能看到信任数据条 */
    .hero__actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-2);
    }
    .hero__actions .btn:last-child { grid-column: 1 / -1; }
    .hero__actions .btn,
    .cta__actions .btn,
    .steps__actions .btn { width: 100%; min-width: 0; }
    .steps__actions { gap: var(--sp-2); }
    .follow-band { padding: 26px 0 16px; }
    .follow-band__list { gap: var(--sp-1); }
    .follow-band__list .follow { width: calc(50% - 5px); justify-content: center; }
    .sec-head { margin-bottom: 40px; }
    .to-top { right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
    /* ≤640：卡片内宽只有 ~216px，二维码随卡片收窄，始终等比 */
    .modal__qr { width: min(210px, 100%); }
    /* 收一档卡片内边距，二维码不至于顶到边框 */
    .modal { padding: 18px; }
    .modal__card { padding: 24px 20px 22px; }
    .legal-hero { padding: 104px 0 40px; }
    .legal-hero__meta span { padding: 0 10px; }
    .legal__toc { grid-template-columns: 1fr; padding: 20px; gap: var(--sp-2) var(--sp-3); margin-bottom: 38px; }
    .legal__body h2 { margin: 40px 0 16px; font-size: 19px; }
    .legal__body h3 { font-size: 16px; }
    /* 法务长文在手机上左右留白略大于全站 18px，长段落更好读 */
    .legal .wrap, .legal-hero .wrap { padding: 0 18px; }
    .legal__body p.legal__note { padding: 16px 18px; }
    .legal__body ol, .legal__body ul { padding-left: 1.4em; }
    /* 法务第四级缩进在小屏收浅一档：序号用小一号字，缩进从 2.7em 收到 2.4em，
       避免 320–360px 机型上（1）序号与正文挤在一起 */
    .legal__body ol ol { padding-left: 2.4em; }
    .legal__body ol ol > li::before { left: -2.4em; font-size: 12px; }
}

/* 341px 及以下：回顶按钮再缩 4px 并往内收，避免遮挡页脚版权行 */
@media (max-width: 341px) {
    .to-top {
        width: 40px; height: 40px;
        right: calc(10px + env(safe-area-inset-right, 0px));
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }
}

/* 矮屏笔记本（典型 1366×768）：Hero 不再死撑 100svh，改由内容决定高度并压缩主视觉，
   否则「内容 + 信任条 + 滚动指示器」会超过一屏，指示器被挤出视口底部。
   下限 961px 与移动端断点（≤960）严格互补，中间不留缝隙也不重叠 */
@media (min-width: 961px) and (max-height: 820px) {
    .hero__stage { min-height: auto; }
    .wrap.hero__inner { padding: 132px 24px 60px; }
    .hero__brand { margin-bottom: 26px; }
    .hero__logo { width: 74px; height: 74px; }
    .hero__wordmark { height: 74px; }
    .hero__wordmark strong { font-size: 54px; }
    .hero__title { font-size: clamp(28px, 3.4vw, 44px); }
    .hero__actions { margin-top: 32px; }
    .hero__scroll { height: 26px; margin: 16px auto 20px; }
}

/* 手机横屏：视口高度很矮，同样解除整屏撑高，并让出安全区 */
@media (orientation: landscape) and (max-height: 560px) {
    .hero__stage { min-height: auto; }
    .wrap.hero__inner { padding: calc(84px + env(safe-area-inset-top, 0px)) 18px 28px; }
    .hero__brand { gap: var(--sp-2); margin-bottom: 18px; }
    .hero__logo { width: 48px; height: 48px; border-radius: 10px; }
    .hero__wordmark { height: 48px; }
    .hero__wordmark strong { font-size: 30px; }
    .hero__title { font-size: 24px; }
    .hero__actions { margin-top: 22px; }
    .hero__scroll { display: none; }
    /* 横屏视口高只有 ~400px，信任条必须再压紧一档，否则它就把首屏吃完了 */
    .trust { padding: 18px 0; }
    /* 横屏矮视口优先压缩高度：回到 4 列即 1 行；说明允许折行 */
    .trust__list { grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); }
    .trust__list li:nth-child(odd)::before { display: block; }
    .trust__list li:first-child::before { display: none; }
    .trust .num { font-size: 22px; }
    .trust__list span { font-size: var(--fs-note); letter-spacing: var(--ls-1); white-space: normal; }
    /* 横屏也不能没有回顶入口：缩到 38px 继续可用（原为 display:none） */
    .to-top { width: 38px; height: 38px; right: 12px; bottom: 12px; }
}

/* 触屏没有 hover：卡片的「上移 + 金色角标」需要等价的按压反馈 */
@media (hover: none) {
    .card, .btn, .follow { -webkit-tap-highlight-color: rgba(var(--gold-rgb), .12); }
    /* :active 只在按住的一瞬间生效，松手就没了；补 :focus-within（卡片里可聚焦的是那条拉伸链接），
       点过之后高亮会一直保留到点别处，触屏上才看得出反馈 */
    .card:active, .card:focus-within { transform: translateY(-4px); border-color: var(--line-2); }
    .card:active::before, .card:active::after,
    .card:focus-within::before, .card:focus-within::after { opacity: 1; }
    .card:active .card__media img, .card:focus-within .card__media img { transform: scale(1.04); }
    /* 安全保障 / 租号流程只有 hover 效果，触屏上点下去没有任何反馈 */
    .safe:active, .safe:focus-within { transform: translateY(-4px); border-color: var(--line-2); }
    .step:active, .step:focus-within { background: var(--ink-3); border-color: var(--line-2); }
    .to-top:active { background: rgba(var(--gold-rgb), .16); border-color: var(--gold); }
}

/* ---------------- 打印（隐私协议等长文） ---------------- */
@media print {
    .nav, .grain, .to-top, .modal, .skip-link, .follow-band, .foot__inner, .foot__rule { display: none; }
    html, body { background: #fff; color: #000; }
    .legal-hero { background: #fff; border-bottom: 1px solid #bbb; padding: 0 0 12px; }
    .legal-hero h1, .legal__body h2, .legal__body h3 { color: #000; }
    .legal__body h2 { border-left-color: #999; margin: 22px 0 8px; }
    .legal__body p, .legal__body li, .legal__body strong, .legal-hero__sub, .legal-hero__meta { color: #000; }
    .legal__body a { color: #000; border-bottom: 0; }
    .legal__body ol ol > li::before { color: #000; }
    /* 仅 .legal__note 需要 !important：其基础规则 .legal__body p.legal__note 特异性(0,2,1)高于此处(0,1,0) */
    .legal__toc, .legal__note { background: none !important; border: 1px solid #bbb !important; }
    .legal__note { border-left: 3px solid #999 !important; }
    .legal__back { display: none; }
    /* 打印后链接不可点，把外部地址印在括号里 */
    .legal__body a[href^="http"]::after { content: "（" attr(href) "）"; font-size: 11px; color: #444; }
    .foot { padding: 12px 0; }
    .foot__bar { padding-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .reveal, .js .reveal.in-view { opacity: 1; transform: none; animation: none; }
    /* 动画关掉后只剩一条静止的线，容易被当成装饰，直接隐藏 */
    .hero__scroll { display: none; }
    .hero__scroll span { animation: none; }
    .nav__links, .modal, .modal__card, .to-top, .qa__a { transition: none; }
}