/* YUEIN FOREST AUDIO — 内页 */

.page-hero { position: relative; padding: calc(var(--nav-h) + clamp(36px, 7vh, 90px)) var(--gx) clamp(36px, 5vh, 64px); }
.page-hero .display { margin-top: 22px; }
.page-hero .lede { margin-top: 22px; }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: end; }
.page-index { justify-self: end; display: grid; gap: 6px; justify-items: end; text-align: right; }
.page-index b { font: 300 clamp(56px, 7vw, 104px)/1 var(--serif); color: rgb(var(--gold)); letter-spacing: .02em; }
.page-index span { font: 500 10px var(--sans); letter-spacing: .3em; color: rgb(var(--fg) / .45); }
.glow { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(0); background: radial-gradient(closest-side, rgb(var(--gold) / .12), transparent 70%); }

/* =================== 音响产品 =================== */
.pv { position: relative; padding: calc(var(--nav-h) + 36px) 0 30px; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; }
.pv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: clamp(18px, 3vh, 34px); }
.pv-title { margin-top: 14px; font: 300 clamp(32px, 3.4vw, 54px)/1.15 var(--serif); letter-spacing: .08em; }
.pv-intro { max-width: 26em; font-size: 13.5px; line-height: 1.9; letter-spacing: .1em; color: rgb(var(--fg) / .58); text-align: right; }
.pv-body { display: grid; grid-template-columns: 230px minmax(0, 1fr) minmax(320px, 400px); gap: clamp(24px, 3vw, 56px); align-items: stretch; min-height: 0; }

.pv-rail { display: grid; align-content: center; gap: 2px; border-left: 1px solid rgb(var(--fg) / .1); }
.pv-tab { position: relative; display: grid; grid-template-columns: 30px 1fr; align-items: baseline; column-gap: 8px; row-gap: 2px; width: 100%; padding: 12px 0 12px 18px; text-align: left; color: rgb(var(--fg) / .5); transition: color .4s; }
.pv-tab::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 1px; background: rgb(var(--gold)); transform: scaleY(0); transition: transform .5s var(--ease); }
.pv-tab .no { font: 500 10px var(--sans); letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.pv-tab .zh { font: 300 17px/1.3 var(--serif); letter-spacing: .14em; }
.pv-tab .en { grid-column: 2; font: 500 8.5px var(--sans); letter-spacing: .26em; color: rgb(var(--fg) / .3); transition: color .4s; }
.pv-tab:hover { color: rgb(var(--fg) / .85); }
.pv-tab[aria-selected="true"] { color: rgb(var(--fg)); }
.pv-tab[aria-selected="true"]::before { transform: none; }
.pv-tab[aria-selected="true"] .no, .pv-tab[aria-selected="true"] .en { color: rgb(var(--gold)); }

.pv-stage { position: relative; display: grid; place-items: center; min-height: 420px; isolation: isolate; }
.pv-index { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: -1; font: 300 clamp(180px, 26vw, 420px)/1 var(--serif); letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px rgb(var(--gold) / .22); user-select: none; transition: opacity .5s var(--ease); }
.pv-spot { position: absolute; inset: 4% 8% 14%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 244 220 / .09), transparent 75%); }
.pv-imgs { position: relative; width: min(100%, 64vh); aspect-ratio: 1; }
.pv-imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4px;
  -webkit-mask-image: radial-gradient(closest-side at 50% 47%, #000 58%, transparent 100%); mask-image: radial-gradient(closest-side at 50% 47%, #000 58%, transparent 100%);
  opacity: 0; transform: scale(1.04) translateX(var(--from, 0)); transition: opacity .9s var(--ease), transform 1.4s var(--ease); }
.pv-imgs img.is-on { opacity: 1; transform: none; }
.pv-ctrl { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 22px; }
.pv-arrow { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgb(var(--fg) / .16); border-radius: 50%; color: rgb(var(--fg) / .75); transition: border-color .35s, color .35s, background-color .35s; }
.pv-arrow:hover { border-color: rgb(var(--gold)); color: rgb(var(--fg)); background: rgb(var(--gold) / .08); }
.pv-arrow svg { width: 16px; height: 16px; }
.pv-count { font: 500 11px var(--sans); letter-spacing: .24em; color: rgb(var(--fg) / .5); font-variant-numeric: tabular-nums; min-width: 72px; text-align: center; }
.pv-count b { font-weight: 500; color: rgb(var(--fg)); }

.pv-detail { align-self: center; display: grid; align-content: center; gap: 0; padding: 8px 0; }
.pv-detail > * { transition: opacity .45s var(--ease), transform .6s var(--ease); }
.pv-detail.is-swap > * { opacity: 0; transform: translateY(10px); transition: none; }
.pv-en { font: 500 10.5px var(--sans); letter-spacing: .32em; color: rgb(var(--gold)); }
.pv-name { margin-top: 12px; font: 300 clamp(34px, 3.2vw, 50px)/1.15 var(--serif); letter-spacing: .1em; }
.pv-line { margin-top: 10px; font: 500 12px var(--sans); letter-spacing: .2em; color: rgb(var(--fg) / .55); }
.pv-desc { margin-top: 20px; font-size: 14px; line-height: 1.95; letter-spacing: .08em; color: rgb(var(--fg) / .72); }
.pv-series { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; padding-bottom: 18px; border-bottom: 1px solid rgb(var(--fg) / .1); }
.pv-chip { height: 34px; padding: 0 16px; border: 1px solid rgb(var(--fg) / .16); border-radius: 999px; font-size: 12.5px; letter-spacing: .12em; color: rgb(var(--fg) / .7); transition: all .35s var(--ease); }
.pv-chip:hover { border-color: rgb(var(--fg) / .45); color: rgb(var(--fg)); }
.pv-chip[aria-selected="true"], .pv-chip[aria-pressed="true"] { border-color: rgb(var(--gold)); background: rgb(var(--gold) / .12); color: rgb(var(--fg)); }
.pv-tag { margin-top: 18px; font: 500 10.5px var(--sans); letter-spacing: .26em; color: rgb(var(--gold) / .9); }
.pv-sdesc { margin-top: 8px; font-size: 13.5px; line-height: 1.85; letter-spacing: .08em; color: rgb(var(--fg) / .7); }
.pv-label { margin-top: 20px; font: 500 9.5px var(--sans); letter-spacing: .3em; color: rgb(var(--fg) / .4); }
.pv-models { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pv-models .pv-chip { font-family: var(--sans); font-weight: 500; letter-spacing: .08em; }
.pv-spec { display: grid; grid-template-columns: auto 1fr; margin-top: 18px; border-top: 1px solid rgb(var(--fg) / .1); }
.pv-spec dt, .pv-spec dd { padding: 11px 0; border-bottom: 1px solid rgb(var(--fg) / .08); font-size: 13px; letter-spacing: .1em; }
.pv-spec dt { color: rgb(var(--fg) / .45); padding-right: 24px; }
.pv-spec dd { color: rgb(var(--fg) / .9); text-align: right; }
.pv-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.pv-note { margin-top: 26px; font-size: 11px; letter-spacing: .14em; color: rgb(var(--fg) / .34); }

.pv-all { padding: clamp(60px, 10vh, 120px) var(--gx) clamp(60px, 9vh, 100px); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 36px; }
.sec-title { margin-top: 14px; font: 300 clamp(28px, 2.8vw, 42px)/1.2 var(--serif); letter-spacing: .1em; }
.sec-note { font-size: 13px; letter-spacing: .1em; color: rgb(var(--fg) / .5); }
.pv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgb(var(--fg) / .08); border: 1px solid rgb(var(--fg) / .08); }
.pv-card { position: relative; display: grid; align-content: space-between; min-height: 300px; padding: 22px; background: var(--bg); overflow: hidden; text-align: left; isolation: isolate; }
.pv-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: .55; transform: scale(1.02); transition: opacity .6s var(--ease), transform 1.4s var(--ease); }
.pv-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(7 7 8 / .55), transparent 40%, rgb(7 7 8 / .85)); }
.pv-card:hover img { opacity: .85; transform: scale(1.06); }
.pv-card .no { font: 500 10px var(--sans); letter-spacing: .2em; color: rgb(var(--gold)); }
.pv-card .zh { font: 300 22px/1.3 var(--serif); letter-spacing: .12em; }
.pv-card .en { margin-top: 4px; font: 500 9px var(--sans); letter-spacing: .26em; color: rgb(var(--fg) / .5); }
.pv-card .arrow { position: absolute; right: 20px; top: 20px; width: 16px; height: 16px; color: rgb(var(--fg) / .6); transition: transform .5s var(--ease), color .4s; }
.pv-card:hover .arrow { transform: translate(3px, -3px); color: rgb(var(--fg)); }
.pv-card--wide { grid-column: span 2; }

/* =================== 案例展示 =================== */
.cs-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 var(--gx); border-top: 1px solid rgb(var(--fg) / .12); border-bottom: 1px solid rgb(var(--fg) / .12); }
.cs-tab { position: relative; display: grid; gap: 6px; padding: 22px 18px 22px 0; text-align: left; color: rgb(var(--fg) / .5); transition: color .4s; }
.cs-tab + .cs-tab { padding-left: 18px; border-left: 1px solid rgb(var(--fg) / .08); }
.cs-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: rgb(var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.cs-tab .no { font: 500 10px var(--sans); letter-spacing: .16em; }
.cs-tab .zh { font: 300 clamp(17px, 1.5vw, 22px)/1.3 var(--serif); letter-spacing: .1em; }
.cs-tab .en { font: 500 8.5px var(--sans); letter-spacing: .24em; color: rgb(var(--fg) / .3); transition: color .4s; }
.cs-tab:hover { color: rgb(var(--fg) / .85); }
.cs-tab[aria-selected="true"] { color: rgb(var(--fg)); }
.cs-tab[aria-selected="true"]::after { transform: none; }
.cs-tab[aria-selected="true"] .no, .cs-tab[aria-selected="true"] .en { color: rgb(var(--gold)); }

.cs-panel { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .9fr); gap: clamp(28px, 4vw, 72px); padding: clamp(36px, 6vh, 64px) var(--gx) clamp(60px, 10vh, 110px); align-items: center; }
.cs-map { position: relative; aspect-ratio: 16 / 10.5; border: 1px solid rgb(var(--fg) / .1); border-radius: 6px; overflow: hidden; background: radial-gradient(120% 90% at 50% 30%, #0e1012, #08090a); }
.cs-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cs-map-meta { position: absolute; left: 16px; right: 16px; top: 14px; display: flex; justify-content: space-between; font: 500 9px var(--sans); letter-spacing: .26em; color: rgb(var(--fg) / .45); pointer-events: none; }
.cs-legend { position: absolute; right: 16px; bottom: 14px; display: grid; gap: 6px; justify-items: end; font: 500 8.5px var(--sans); letter-spacing: .2em; color: rgb(var(--fg) / .45); pointer-events: none; }
.cs-legend i { display: block; width: 140px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #12161a, #1f5a5a, #c99a4a, #fff1d6); }
.cs-legend span { display: flex; justify-content: space-between; width: 140px; }
.cs-info > * { transition: opacity .45s var(--ease), transform .6s var(--ease); }
.cs-info.is-swap > * { opacity: 0; transform: translateY(10px); transition: none; }
.cs-en { font: 500 10.5px var(--sans); letter-spacing: .3em; color: rgb(var(--gold)); }
.cs-name { margin-top: 12px; font: 300 clamp(32px, 3vw, 48px)/1.2 var(--serif); letter-spacing: .1em; }
.cs-desc { margin-top: 18px; font-size: 14px; line-height: 1.95; letter-spacing: .08em; color: rgb(var(--fg) / .72); }
.cs-points { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 28px; border-top: 1px solid rgb(var(--fg) / .1); }
.cs-points li { padding: 16px 12px 0 0; display: grid; gap: 6px; }
.cs-points li + li { padding-left: 14px; border-left: 1px solid rgb(var(--fg) / .08); }
.cs-points b { font: 500 10px var(--sans); letter-spacing: .18em; color: rgb(var(--gold)); }
.cs-points span { font-size: 13px; letter-spacing: .12em; color: rgb(var(--fg) / .86); }
.cs-status { display: flex; align-items: center; gap: 12px; margin-top: 30px; padding: 14px 16px; border: 1px dashed rgb(var(--fg) / .16); border-radius: 6px; font-size: 12.5px; letter-spacing: .14em; color: rgb(var(--fg) / .6); }
.cs-status i { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--gold)); animation: blink 2.4s ease-in-out infinite; flex: none; }
@keyframes blink { 50% { opacity: .3; } }
.cs-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* =================== 软件生态 =================== */
.sw-hero { position: relative; min-height: min(92svh, 860px); display: grid; align-items: end; padding: calc(var(--nav-h) + 40px) var(--gx) clamp(48px, 8vh, 90px); overflow: hidden; }
.sw-viz { position: absolute; inset: 0; z-index: 0; }
.sw-viz canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sw-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgb(7 7 8 / .96) 0%, rgb(7 7 8 / .82) 34%, rgb(7 7 8 / .1) 70%), linear-gradient(180deg, transparent 70%, var(--bg)); }
.sw-hero-in { position: relative; z-index: 2; max-width: 620px; }
.sw-stats { display: flex; gap: 36px; margin-top: 34px; }
.sw-stats div { display: grid; gap: 4px; }
.sw-stats b { font: 300 30px/1 var(--serif); color: rgb(var(--fg)); }
.sw-stats span { font: 500 9px var(--sans); letter-spacing: .26em; color: rgb(var(--fg) / .45); }

.sw-list { padding: clamp(40px, 7vh, 80px) var(--gx) clamp(70px, 11vh, 120px); }
.sw-card { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(24px, 3vw, 44px); border: 1px solid rgb(var(--fg) / .1); border-radius: 10px; background: linear-gradient(135deg, rgb(255 255 255 / .03), rgb(255 255 255 / 0) 60%); overflow: hidden; isolation: isolate; transition: border-color .5s var(--ease), transform .7s var(--ease); }
.sw-card::before { content: ""; position: absolute; right: -10%; top: -30%; width: 70%; aspect-ratio: 1; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgb(80 190 150 / .16), transparent 70%); transition: opacity .6s; opacity: .7; }
.sw-card:hover { border-color: rgb(var(--gold) / .5); }
.sw-card:hover::before { opacity: 1; }
.sw-app { display: flex; align-items: center; gap: 18px; }
.sw-icon { width: 76px; height: 76px; border-radius: 18px; box-shadow: 0 10px 30px rgb(0 0 0 / .45); flex: none; }
.sw-app h3 { font: 300 26px/1.25 var(--serif); letter-spacing: .08em; }
.sw-app h3 em { font-style: normal; font-family: var(--sans); font-weight: 500; letter-spacing: .02em; }
.sw-app p { margin-top: 4px; font-size: 12.5px; letter-spacing: .18em; color: rgb(var(--fg) / .55); }
.sw-desc { margin-top: 24px; font-size: 14px; line-height: 1.95; letter-spacing: .08em; color: rgb(var(--fg) / .74); }
.sw-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.sw-tags span { padding: 6px 12px; border: 1px solid rgb(var(--fg) / .14); border-radius: 999px; font-size: 12px; letter-spacing: .12em; color: rgb(var(--fg) / .75); }
.sw-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgb(var(--fg) / .1); }
.sw-feats li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; letter-spacing: .1em; color: rgb(var(--fg) / .78); }
.sw-feats li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: rgb(var(--gold)); flex: none; }
.sw-go { margin-top: 28px; }
.sw-shot { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid rgb(var(--fg) / .14); box-shadow: 0 40px 80px rgb(0 0 0 / .55); background: #0d0f10; transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); transition: transform 1s var(--ease); }
.sw-card:hover .sw-shot { transform: perspective(1400px) rotateY(-2deg) rotateX(0deg) translateY(-4px); }
.sw-shot-bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: #16191b; border-bottom: 1px solid rgb(var(--fg) / .08); }
.sw-shot-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--fg) / .2); }
.sw-shot-bar span { margin-left: 10px; font: 500 9.5px var(--sans); letter-spacing: .14em; color: rgb(var(--fg) / .45); }
.sw-shot img { width: 100%; height: auto; aspect-ratio: 1440 / 824; object-fit: cover; background: #e9f3ee; }

/* =================== 关于我们 =================== */
.ab-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 90px); align-items: center; padding: calc(var(--nav-h) + clamp(40px, 8vh, 100px)) var(--gx) clamp(56px, 9vh, 110px); overflow: hidden; }
.ab-hero .display { margin-top: 22px; }
.ab-hero .lede { margin-top: 26px; }
.ab-mark { justify-self: center; position: relative; width: min(380px, 80%); font-size: clamp(14px, 1.4vw, 19px); }
.ab-mark::before { content: ""; position: absolute; inset: -40%; z-index: -1; background: radial-gradient(closest-side, rgb(var(--gold) / .14), transparent 70%); }
.ab-values { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 40px; border-top: 1px solid rgb(var(--fg) / .1); }
.ab-values li { padding: 20px 16px 0 0; }
.ab-values li + li { padding-left: 18px; border-left: 1px solid rgb(var(--fg) / .08); }
.ab-values b { display: block; font: 500 9.5px var(--sans); letter-spacing: .24em; color: rgb(var(--gold)); }
.ab-values strong { display: block; margin-top: 8px; font: 300 22px/1.3 var(--serif); font-weight: 300; letter-spacing: .16em; }
.ab-values span { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.8; letter-spacing: .08em; color: rgb(var(--fg) / .58); }

.ab-help { padding: clamp(50px, 8vh, 96px) var(--gx) clamp(70px, 11vh, 130px); border-top: 1px solid rgb(var(--fg) / .08); }
.ab-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ab-card { position: relative; display: grid; align-content: start; gap: 10px; min-height: 290px; padding: 28px 24px 26px; border: 1px solid rgb(var(--fg) / .1); border-radius: 10px; text-align: left; overflow: hidden; isolation: isolate; transition: border-color .5s var(--ease), transform .6s var(--ease), background-color .5s; }
.ab-card::before { content: ""; position: absolute; inset: auto -30% -50% -30%; height: 90%; z-index: -1; background: radial-gradient(closest-side, rgb(var(--gold) / .16), transparent 70%); opacity: 0; transition: opacity .6s var(--ease); }
.ab-card:hover, .ab-card:focus-visible { border-color: rgb(var(--gold) / .55); transform: translateY(-4px); }
.ab-card:hover::before { opacity: 1; }
.ab-card .no { font: 500 10px var(--sans); letter-spacing: .18em; color: rgb(var(--fg) / .4); }
.ab-card .ic { width: 40px; height: 40px; margin: 18px 0 8px; color: rgb(var(--gold)); }
.ab-card .ic svg { width: 100%; height: 100%; }
.ab-card .zh { font: 300 26px/1.25 var(--serif); letter-spacing: .14em; }
.ab-card .en { font: 500 9px var(--sans); letter-spacing: .28em; color: rgb(var(--fg) / .4); }
.ab-card .desc { margin-top: 6px; font-size: 13.5px; line-height: 1.8; letter-spacing: .08em; color: rgb(var(--fg) / .78); }
.ab-card .go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; font-size: 12px; letter-spacing: .2em; color: rgb(var(--gold)); }
.ab-card .go svg { width: 13px; height: 13px; transition: transform .45s var(--ease); }
.ab-card:hover .go svg { transform: translateX(4px); }

.ab-contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; margin-top: 56px; padding: clamp(24px, 3vw, 40px); border: 1px solid rgb(var(--gold) / .3); border-radius: 10px; background: linear-gradient(120deg, rgb(var(--gold) / .07), transparent 60%); }
.ab-contact h3 { font: 300 clamp(24px, 2.4vw, 34px)/1.3 var(--serif); letter-spacing: .12em; }
.ab-contact p { margin-top: 12px; font-size: 13.5px; line-height: 1.9; letter-spacing: .08em; color: rgb(var(--fg) / .65); }
.qr { display: grid; justify-items: center; gap: 10px; }
.qr img { width: 168px; height: 168px; object-fit: cover; border-radius: 8px; background: #fff; padding: 6px; }
.qr span { font-size: 11.5px; letter-spacing: .16em; color: rgb(var(--fg) / .6); }

/* 弹层 */
.sheet { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; visibility: hidden; }
.sheet.is-open { visibility: visible; }
.sheet-bg { position: absolute; inset: 0; background: rgb(4 4 5 / .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .45s var(--ease); }
.sheet.is-open .sheet-bg { opacity: 1; }
.sheet-card { position: relative; width: min(760px, 100%); max-height: calc(100svh - 48px); overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 36px; padding: clamp(26px, 3.4vw, 44px); border: 1px solid rgb(var(--gold) / .3); border-radius: 12px; background: linear-gradient(160deg, #121314, #0a0b0c); box-shadow: 0 40px 120px rgb(0 0 0 / .6); opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.sheet.is-open .sheet-card { opacity: 1; transform: none; }
.sheet-close { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgb(var(--fg) / .14); color: rgb(var(--fg) / .7); }
.sheet-close:hover { border-color: rgb(var(--fg) / .4); color: rgb(var(--fg)); }
.sheet-close svg { width: 14px; height: 14px; }
.sheet-en { font: 500 10px var(--sans); letter-spacing: .3em; color: rgb(var(--gold)); }
.sheet-title { margin-top: 10px; font: 300 32px/1.25 var(--serif); letter-spacing: .14em; }
.sheet-desc { margin-top: 12px; font-size: 14px; line-height: 1.9; letter-spacing: .08em; color: rgb(var(--fg) / .78); }
.sheet-list { display: grid; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgb(var(--fg) / .1); }
.sheet-list p { font: 500 9.5px var(--sans); letter-spacing: .28em; color: rgb(var(--fg) / .45); }
.sheet-list li { display: flex; gap: 12px; font-size: 13.5px; letter-spacing: .08em; color: rgb(var(--fg) / .82); }
.sheet-list li b { font: 500 10px/2 var(--sans); color: rgb(var(--gold)); letter-spacing: .1em; }
.sheet-note { margin-top: 20px; font-size: 12.5px; letter-spacing: .1em; color: rgb(var(--fg) / .55); }
.sheet-note em { font-style: normal; color: rgb(var(--gold)); }
.sheet .qr { align-self: center; }
.sheet .qr img { width: 190px; height: 190px; }
.qr-tip { display: none; }

/* =================== 404 =================== */
.nf { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 40px var(--gx); }
.nf-in { display: grid; justify-items: center; gap: 18px; }
.nf b { font: 300 clamp(96px, 16vw, 200px)/1 var(--serif); color: transparent; -webkit-text-stroke: 1px rgb(var(--gold) / .6); letter-spacing: .04em; }

/* =================== 响应式 =================== */
@media (max-width: 1180px) {
  .pv-body { grid-template-columns: 200px minmax(0, 1fr) 340px; }
  .pv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-feats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .page-hero-grid { grid-template-columns: 1fr; }
  .page-index { justify-self: start; justify-items: start; text-align: left; }
  .pv { min-height: 0; }
  .pv-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pv-intro { text-align: left; }
  .pv-body { grid-template-columns: 1fr; gap: 20px; }
  .pv-rail { display: flex; overflow-x: auto; gap: 8px; border-left: 0; padding-bottom: 6px; scrollbar-width: none; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gx)); padding-left: var(--gx); padding-right: var(--gx); }
  .pv-rail::-webkit-scrollbar { display: none; }
  .pv-tab { flex: none; display: flex; gap: 8px; align-items: center; width: auto; padding: 0 16px; height: 38px; border: 1px solid rgb(var(--fg) / .14); border-radius: 999px; scroll-snap-align: start; }
  .pv-tab::before { display: none; }
  .pv-tab .en { display: none; }
  .pv-tab .zh { font-size: 14px; white-space: nowrap; }
  .pv-tab[aria-selected="true"] { border-color: rgb(var(--gold)); background: rgb(var(--gold) / .1); }
  .pv-stage { min-height: 0; padding-bottom: 60px; }
  .pv-imgs { width: min(100%, 520px); }
  .pv-detail { padding: 0; }
  .cs-tabs { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0; padding: 0 var(--gx); gap: 0; }
  .cs-tabs::-webkit-scrollbar { display: none; }
  .cs-tab { flex: none; padding: 18px 18px 18px 0; }
  .cs-tab .zh { white-space: nowrap; }
  .cs-panel { grid-template-columns: 1fr; }
  .sw-card { grid-template-columns: 1fr; }
  .sw-shot { transform: none; }
  .ab-hero { grid-template-columns: 1fr; }
  .ab-mark { order: -1; width: min(240px, 60%); justify-self: start; }
  .ab-contact { grid-template-columns: 1fr; justify-items: start; }
  .sheet-card { grid-template-columns: 1fr; }
  .sheet .qr { justify-self: start; }
}
@media (max-width: 640px) {
  .pv-grid { grid-template-columns: 1fr 1fr; }
  .pv-card { min-height: 200px; padding: 16px; }
  .pv-card--wide { grid-column: span 2; }
  .pv-card .zh { font-size: 18px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cs-points { grid-template-columns: 1fr; }
  .cs-points li + li { padding-left: 0; border-left: 0; }
  .ab-grid { grid-template-columns: 1fr; }
  .ab-card { min-height: 0; }
  .ab-values { grid-template-columns: 1fr; }
  .ab-values li + li { padding-left: 0; border-left: 0; }
  .sw-feats { grid-template-columns: 1fr 1fr; }
  .sw-stats { gap: 24px; }
  .sheet { padding: 0; align-items: end; }
  .sheet-card { border-radius: 16px 16px 0 0; max-height: 92svh; transform: translateY(40px); }
  .qr-tip { display: block; }
}