/* YUEIN FOREST AUDIO — 软件生态 · 产品优先（2026-10-19）
 * 第一屏即是我们现有的软件产品：图标、名称、介绍、下载入口与真实界面截图；
 * 之后是功能亮点、更多软件（如有）与软件理念。 */

.sx { position: relative; overflow-x: clip; }

/* ---------- 产品首屏 ---------- */
.sx-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 4.4vw, 80px); align-items: center;
  min-height: min(100svh, 1000px); padding: calc(var(--nav-h) + clamp(28px, 6vh, 72px)) 0 clamp(64px, 10vh, 120px) var(--gx);
  isolation: isolate;
}
.sx-hero::before {
  content: ""; position: absolute; z-index: -1; right: -12%; top: 8%; width: 72%; aspect-ratio: 1.4; pointer-events: none;
  background: radial-gradient(closest-side, rgb(64 196 160 / .15), rgb(64 196 160 / .04) 55%, transparent 76%);
}
.sx-hero::after {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgb(var(--fg) / .035) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--fg) / .035) 1px, transparent 1px);
  background-size: 72px 72px; background-position: center;
  -webkit-mask-image: radial-gradient(60% 70% at 72% 46%, #000, transparent 75%); mask-image: radial-gradient(60% 70% at 72% 46%, #000, transparent 75%);
}
.sx-hero-copy { max-width: 580px; }
.sx-app { display: flex; align-items: center; gap: 18px; margin-top: 34px; }
.sx-icon { width: 72px; height: 72px; flex: none; border-radius: 18px; box-shadow: 0 18px 44px rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .07); }
.sx-app-id { display: grid; gap: 7px; }
.sx-app-zh { font: 300 20px/1.2 var(--serif); letter-spacing: .2em; }
.sx-app-zh em { font-style: normal; font-family: var(--sans); font-weight: 500; letter-spacing: .02em; }
.sx-app-sub { font-size: 12px; line-height: 1.5; letter-spacing: .16em; color: rgb(var(--fg) / .55); }
.sx-title {
  margin-top: 30px; font: 400 clamp(56px, 6.6vw, 112px)/.98 var(--sans); letter-spacing: -.035em;
  background: linear-gradient(180deg, #fff 20%, rgb(var(--fg) / .66)); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .06em;
}
.sx-title.is-tagline { font: 300 clamp(34px, 3.8vw, 60px)/1.26 var(--serif); letter-spacing: .06em; white-space: pre-line; background: none; color: rgb(var(--fg)); }
.sx-desc { margin-top: 26px; max-width: 32em; font-size: 15px; line-height: 1.95; letter-spacing: .07em; color: rgb(var(--fg) / .7); }
.sx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 36px; }
.sx-actions .btn svg { width: 14px; height: 14px; }
.sx-url { font: 500 11px var(--sans); letter-spacing: .22em; color: rgb(var(--fg) / .45); }
.sx-tags { display: flex; flex-wrap: wrap; row-gap: 8px; margin-top: 42px; padding-top: 22px; border-top: 1px solid rgb(var(--fg) / .1); }
.sx-tags li { display: inline-flex; align-items: center; font-size: 12.5px; letter-spacing: .14em; color: rgb(var(--fg) / .74); }
.sx-tags li + li::before { content: ""; width: 3px; height: 3px; margin: 0 14px; border-radius: 50%; background: rgb(var(--gold)); }

.sx-shot { position: relative; margin: 0 calc(-1 * clamp(48px, 9vw, 180px)) 0 0; }
.sx-window {
  overflow: hidden; border-radius: 12px; background: #121416; border: 1px solid rgb(255 255 255 / .1);
  box-shadow: 0 60px 120px rgb(0 0 0 / .7), 0 0 0 1px rgb(0 0 0 / .5), 0 0 90px rgb(64 196 160 / .07);
  transform: perspective(2200px) rotateY(-10deg) rotateX(3deg); transform-origin: left center;
  transition: transform 1.6s var(--ease);
}
.sx-shot:hover .sx-window { transform: perspective(2200px) rotateY(-4deg) rotateX(1deg); }
.sx-window-bar { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; background: linear-gradient(#1d2022, #17191b); border-bottom: 1px solid rgb(255 255 255 / .06); }
.sx-window-bar i { width: 10px; height: 10px; border-radius: 50%; background: #e0605a; opacity: .9; }
.sx-window-bar i:nth-child(2) { background: #e3b440; }
.sx-window-bar i:nth-child(3) { background: #5cc06a; }
.sx-window-bar span { margin-left: 12px; font: 500 10.5px var(--sans); letter-spacing: .12em; color: rgb(var(--fg) / .45); }
.sx-shot-img { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 824; object-fit: cover; background: #e9f3ee; transition: opacity .25s var(--ease); }
.sx-shot-img.is-swap { opacity: 0; }
.sx-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; padding-left: 4px; }
.sx-thumbs button { width: 96px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; border: 1px solid rgb(var(--fg) / .14); opacity: .55; transition: opacity .3s, border-color .3s; }
.sx-thumbs button:hover { opacity: .85; }
.sx-thumbs [aria-selected="true"] { opacity: 1; border-color: rgb(var(--gold)); }
.sx-thumbs img, .sx-thumbs .cms-placeholder { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.sx-empty { grid-column: 1 / -1; padding-right: var(--gx); }

/* ---------- 功能亮点 ---------- */
.sx-features { padding-top: clamp(84px, 13vh, 150px); }
.sx-features[hidden] { display: none; }
.sx-feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgb(var(--fg) / .08); border: 1px solid rgb(var(--fg) / .08); }
.sx-feat-grid li { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-content: start; column-gap: 18px; row-gap: 26px; padding: 36px 32px 40px; background: var(--bg); isolation: isolate; overflow: hidden; }
.sx-feat-grid li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 90% at 0% 0%, rgb(var(--gold) / .08), transparent 70%); opacity: 0; transition: opacity .7s var(--ease); }
.sx-feat-grid li:hover::before { opacity: 1; }
.sx-feat-ic { width: 34px; height: 34px; color: rgb(var(--gold)); }
.sx-feat-ic svg { width: 100%; height: 100%; stroke-width: 1.2; }
.sx-feat-grid .no { justify-self: end; align-self: start; font: 500 10.5px var(--sans); letter-spacing: .16em; color: rgb(var(--fg) / .35); font-variant-numeric: tabular-nums; }
.sx-feat-grid strong { grid-column: 1 / -1; font: 300 clamp(20px, 1.7vw, 25px)/1.3 var(--serif); font-weight: 300; letter-spacing: .1em; }
.sx-feat-grid p { grid-column: 1 / -1; margin-top: -14px; font-size: 13px; line-height: 1.85; letter-spacing: .06em; color: rgb(var(--fg) / .6); }

/* ---------- 更多软件 ---------- */
.sx-more { padding-top: clamp(84px, 13vh, 150px); }
.sx-more[hidden] { display: none; }
.sx-more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sx-card { overflow: hidden; border: 1px solid rgb(var(--fg) / .1); border-radius: 8px; background: linear-gradient(160deg, rgb(255 255 255 / .03), transparent 60%); transition: border-color .5s var(--ease); }
.sx-card:hover { border-color: rgb(var(--gold) / .45); }
.sx-card figure { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #0e0f10; }
.sx-card figure img, .sx-card figure .cms-placeholder { width: 100%; height: 100%; object-fit: cover; }
.sx-card-body { display: grid; gap: 18px; padding: 28px; }
.sx-card .sx-app { margin-top: 0; }
.sx-card .sx-icon { width: 56px; height: 56px; border-radius: 14px; }
.sx-card p { font-size: 13.5px; line-height: 1.9; letter-spacing: .06em; color: rgb(var(--fg) / .66); }
.sx-card .sx-tags { margin-top: 0; padding-top: 0; border-top: 0; }
.sx-card .sx-actions { margin-top: 4px; }

/* ---------- 软件理念 ---------- */
.sx-eco { padding-top: clamp(96px, 15vh, 180px); padding-bottom: clamp(96px, 15vh, 180px); }
.sx-eco-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px clamp(32px, 6vw, 110px); align-items: end; padding-top: 52px; border-top: 1px solid rgb(var(--fg) / .12); }
.sx-eco-in .eyebrow { grid-column: 1 / -1; }
.sx-eco-title { font: 300 clamp(32px, 3.8vw, 60px)/1.28 var(--serif); letter-spacing: .08em; white-space: pre-line; }
.sx-eco-text { max-width: 30em; font-size: 14.5px; line-height: 1.95; letter-spacing: .08em; color: rgb(var(--fg) / .64); }
.sx-eco-actions { grid-column: 2; }

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  .sx-hero { grid-template-columns: 1fr; min-height: 0; padding-right: var(--gx); }
  .sx-hero-copy { max-width: 640px; }
  .sx-shot { margin: 12px 0 0; }
  .sx-window { transform: perspective(2200px) rotateX(4deg); transform-origin: center bottom; }
  .sx-shot:hover .sx-window { transform: none; }
  .sx-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sx-eco-in { grid-template-columns: 1fr; }
  .sx-eco-actions { grid-column: auto; }
  .sx-more-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sx-app { margin-top: 26px; }
  .sx-icon { width: 60px; height: 60px; border-radius: 15px; }
  .sx-title { font-size: clamp(48px, 15vw, 64px); margin-top: 22px; }
  .sx-desc { font-size: 14px; }
  .sx-tags { gap: 8px; padding-top: 20px; }
  .sx-tags li { padding: 6px 12px; border: 1px solid rgb(var(--fg) / .14); border-radius: 999px; font-size: 12px; }
  .sx-tags li + li::before { display: none; }
  .sx-window { border-radius: 8px; }
  .sx-window-bar { height: 24px; }
  .sx-window-bar i { width: 7px; height: 7px; }
  .sx-feat-grid { grid-template-columns: 1fr; }
  .sx-feat-grid li { padding: 28px 24px 30px; row-gap: 18px; }
}