/* ============================================================
   万川官网 · 首页
   横幅轮播只展示已接通上架链路的平台；正文只列功能，详细解释回能力页。
   ============================================================ */

/* ── 平台主题横幅 ── */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 0;
  color: var(--text-onDark);
  background: #09143d;
}
.hero-viewport { position: relative; touch-action: pan-y; }
.hero-track { display: grid; }
.hero.is-ready .hero-viewport { overflow: hidden; }
.hero.is-ready .hero-track {
  display: flex;
  transition: transform .62s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.hero.is-ready .hero-track.is-jumping { transition: none; }
.hero-slide {
  --poster-accent: #fcd9a0;
  position: relative;
  min-height: 629px;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: 46px 0 199px;
  background:
    radial-gradient(circle at 79% 30%, rgba(255,196,95,.34), transparent 30%),
    radial-gradient(circle at 20% 90%, rgba(234,91,73,.18), transparent 32%),
    linear-gradient(120deg, #241332, #713649 56%, #b75b37);
}
.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .35;
  background-image: radial-gradient(circle, rgba(199,213,255,.34) 1.2px, transparent 1.7px);
  background-size: 18px 18px;
  mask-image: radial-gradient(ellipse 52% 88% at 77% 45%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 52% 88% at 77% 45%, #000 25%, transparent 78%);
  pointer-events: none;
}
.hero.is-ready .hero-slide { flex: 0 0 100%; }
.hero-slide--temu {
  --poster-accent: #ffe06f;
  background:
    radial-gradient(circle at 70% 86%, rgba(255,189,51,.22), transparent 36%),
    linear-gradient(110deg, #ff6f00 0%, #ff8300 56%, #ffa31a 100%);
}
.hero-slide--temu::before { opacity: .20; background-image: radial-gradient(circle, rgba(255,209,138,.58) 1.25px, transparent 1.8px); background-size: 18px 18px; }
.hero-slide--amazon { --poster-accent: #ff9900; --motif-color: rgba(255,153,0,.58); background: radial-gradient(circle at 77% 38%, rgba(50,112,151,.52), transparent 34%), radial-gradient(circle at 70% 112%, rgba(255,153,0,.10), transparent 28%), linear-gradient(120deg, #101b25, #192f43 62%, #234b67); }
.hero-slide--amazon::before { opacity: .26; background-image: repeating-radial-gradient(ellipse at 78% 48%, transparent 0 54px, rgba(32,121,174,.16) 55px 56px, transparent 57px 96px); background-size: auto; }
.hero-slide--tiktok { --poster-accent: #65e2dc; --motif-color: rgba(37,244,238,.12); --motif-soft: rgba(254,44,85,.10); background: radial-gradient(circle at 93% 19%, rgba(254,44,85,.30), transparent 29%), radial-gradient(circle at 95% 88%, rgba(37,244,238,.26), transparent 34%), #0b0b0f; }
.hero-slide--tiktok::before { opacity: .28; background-image: radial-gradient(circle, rgba(31,164,158,.18) 0 3px, transparent 4px), radial-gradient(circle, rgba(190,65,122,.14) 0 5px, transparent 6px); background-position: 0 0, 38px 27px; background-size: 78px 78px, 112px 112px; }
.hero-slide--shein { --poster-accent: #242424; --motif-color: rgba(35,35,35,.13); background: radial-gradient(ellipse 62% 118% at 106% 52%, #1b1b1b 0 58%, transparent 59%), #f7f7f5; }
.hero-slide--shein::before { opacity: .24; background-image: radial-gradient(circle, rgba(142,105,50,.18) 0 1.6px, transparent 2px), radial-gradient(circle, rgba(42,46,55,.08) 0 1px, transparent 1.5px); background-position: 0 0, 23px 19px; background-size: 46px 46px, 58px 58px; }
.hero-slide--shopee { --poster-accent: #ffe3d7; --motif-color: rgba(255,187,48,.24); background: linear-gradient(165deg, #f24d30 0%, #fb5820 48%, #ff7900 100%); }
.hero-slide--shopee::before {
  opacity: 1;
  --shopee-bubbles:
    radial-gradient(circle 164px at 8% 36%, rgba(255,147,20,.28) 0 64%, rgba(255,147,20,.18) 78%, transparent 100%),
    radial-gradient(circle 96px at 24% -2%, rgba(255,154,23,.25) 0 62%, rgba(255,154,23,.15) 78%, transparent 100%),
    radial-gradient(circle 126px at 42% 78%, rgba(255,139,12,.20) 0 64%, rgba(255,139,12,.12) 80%, transparent 100%),
    radial-gradient(circle 146px at 62% 34%, rgba(255,156,27,.25) 0 64%, rgba(255,156,27,.15) 80%, transparent 100%),
    radial-gradient(circle 104px at 79% 4%, rgba(255,168,31,.24) 0 62%, rgba(255,168,31,.14) 78%, transparent 100%),
    radial-gradient(circle 138px at 92% 70%, rgba(255,145,15,.22) 0 64%, rgba(255,145,15,.13) 80%, transparent 100%);
  background-image: var(--shopee-bubbles);
  background-size: auto;
  background-repeat: no-repeat;
  filter: none;
  mix-blend-mode: normal;
  transform: none;
  mask-image: none;
  -webkit-mask-image: none;
}
.hero-slide::after { content: ""; position: absolute; z-index: 0; pointer-events: none; }
.hero-slide--temu::after { display: none; }
.hero-slide--amazon::after { width: 430px; height: 148px; right: 4%; bottom: 132px; opacity: .80; border-bottom: 3px solid var(--motif-color); border-radius: 0 0 50% 50%; transform: rotate(-7deg); }
.hero-slide--tiktok::after { width: 178px; height: 178px; right: 22%; top: 122px; border-radius: 50%; background: var(--motif-color); box-shadow: 136px 92px 0 var(--motif-soft), 46px 188px 0 rgba(93,63,160,.07); filter: blur(1px); }
.hero-slide--shein::after { display: none; }
.hero-slide--shopee::after { display: none; }
.hero-shopee-waves { position: absolute; z-index: 1; left: 0; right: 0; bottom: 112px; width: 100%; height: 138px; fill: none; stroke: rgba(255,198,48,.34); stroke-width: 1.25; pointer-events: none; }
.hero-shopee-waves path:nth-child(n+6) { stroke: rgba(255,220,94,.22); }
.hero-platform-scene { position: absolute; z-index: 1; inset: 68px 0 0; width: 100%; height: calc(100% - 68px); overflow: visible; pointer-events: none; }
.hero-platform-scene--temu { color: rgba(255,209,138,.42); opacity: .72; }
.hero-slide-inner { position: relative; z-index: 2; width: 100%; }
.hero-copy { position: relative; z-index: 2; width: min(58%, 660px); }
.hero.is-ready .hero-copy { opacity: .3; transform: translateY(14px); transition: opacity .38s ease .1s, transform .46s ease .1s; }
.hero.is-ready .hero-slide.is-active .hero-copy { opacity: 1; transform: translateY(0); }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: #dbe4ff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
}
.hero-eyebrow::before { content: ""; width: 20px; height: 2px; border-radius: 99px; background: var(--poster-accent); }
.hero-title { max-width: 680px; color: #fff; font-size: clamp(42px, 4.1vw, 58px); line-height: 1.12; letter-spacing: -.04em; }
.hero-title span { color: var(--poster-accent); }
.hero-lede { max-width: 620px; margin-top: 20px; color: #c0ccec; font-size: 16px; line-height: 1.75; }
.hero-slide--temu .hero-title { color: #fffaf2; }
.hero-slide--temu .hero-title span { color: #ffe06f; }
.hero-slide--temu .hero-lede { color: #fff0dc; }
.hero-slide--temu .hero-eyebrow { color: #fff3c4; }
.hero-slide--amazon .hero-title { color: #fff; }
.hero-slide--amazon .hero-title span { color: #ff9900; }
.hero-slide--amazon .hero-lede { color: #c7d4e2; }
.hero-slide--amazon .hero-eyebrow { color: #ff9900; }
.hero-slide--tiktok .hero-title { color: #fff; }
.hero-slide--tiktok .hero-title span { color: #25f4ee; }
.hero-slide--tiktok .hero-lede { color: #c9fffc; }
.hero-slide--tiktok .hero-eyebrow { color: #25f4ee; }
.hero-slide--shein .hero-title, .hero-slide--shein .hero-title span { color: #171717; }
.hero-slide--shein .hero-lede { color: #555a63; }
.hero-slide--shein .hero-eyebrow { color: #171717; }
.hero-slide--shopee .hero-title { color: #fff; }
.hero-slide--shopee .hero-title span { color: #ffe3d7; }
.hero-slide--shopee .hero-lede { color: rgba(255,255,255,.84); }
.hero-slide--shopee .hero-eyebrow { color: #fff; }
.hero-actions { display: flex; margin-top: 28px; }
.hero-actions .btn { color: #fff; background: linear-gradient(135deg, #173c96, #2e69db); box-shadow: 0 12px 28px -12px rgba(23,60,150,.58); }
.hero-actions .btn:hover { background: linear-gradient(135deg, #102f7e, #255bc1); box-shadow: 0 15px 32px -13px rgba(23,60,150,.66); }
.hero-actions .btn::after { content: ""; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.hero-slide--temu .hero-actions .btn { color: #c84600; background: #fff5df; box-shadow: 0 14px 30px -15px rgba(115,34,8,.44); }
.hero-slide--temu .hero-actions .btn:hover { color: #a93800; background: #ffe9bd; box-shadow: 0 17px 34px -15px rgba(115,34,8,.52); }
.hero-slide--amazon .hero-actions .btn { color: #131e29; background: #ff9900; box-shadow: 0 14px 30px -15px rgba(0,0,0,.52); }
.hero-slide--amazon .hero-actions .btn:hover { color: #0b1117; background: #ffad33; box-shadow: 0 17px 34px -15px rgba(0,0,0,.58); }
.hero-slide--tiktok .hero-actions .btn { color: #0b0b0f; background: #25f4ee; box-shadow: 0 14px 30px -15px rgba(37,244,238,.48); }
.hero-slide--tiktok .hero-actions .btn:hover { color: #050608; background: #67fff9; box-shadow: 0 17px 34px -15px rgba(37,244,238,.58); }
.hero-slide--shein .hero-actions .btn { color: #fff; background: #171717; box-shadow: 0 14px 30px -15px rgba(0,0,0,.46); }
.hero-slide--shein .hero-actions .btn:hover { color: #fff; background: #000; box-shadow: 0 17px 34px -15px rgba(0,0,0,.54); }
.hero-slide--shopee .hero-actions .btn { color: #d94225; background: #fff; box-shadow: 0 14px 30px -15px rgba(125,31,14,.46); }
.hero-slide--shopee .hero-actions .btn:hover { color: #b8321c; background: #fff2ec; box-shadow: 0 17px 34px -15px rgba(125,31,14,.54); }

/* 三个类目汇入当前平台：右侧只讲一条发布路径，不再堆装饰卡片。 */
.hero-poster {
  position: absolute;
  z-index: 1;
  top: 84px;
  right: max(var(--gutter), calc((100vw - 1200px) / 2));
  width: min(45vw, 560px);
  height: 430px;
  pointer-events: none;
}
.hero-poster::before {
  content: "";
  position: absolute;
  width: 250px; height: 250px;
  right: -8px; top: 90px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--poster-accent) 18%, transparent), transparent 69%);
  filter: blur(2px);
}
.hero-poster::after {
  content: "";
  position: absolute;
  width: 182px; height: 2px;
  right: 12px; top: 247px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--poster-accent), rgba(207,220,255,.18), transparent);
}
.hero-poster-orbit { position: absolute; z-index: 3; left: 238px; top: 126px; width: 96px; height: 144px; border-left: 1px solid rgba(211,223,255,.34); background: transparent; }
.hero-poster-orbit::before { content: ""; position: absolute; left: 0; top: 50%; width: 96px; height: 1px; background: linear-gradient(90deg, rgba(211,223,255,.34), var(--poster-accent)); }
.hero-poster-orbit::after { content: ""; position: absolute; right: -1px; top: calc(50% - 4px); width: 7px; height: 7px; border-top: 1.5px solid var(--poster-accent); border-right: 1.5px solid var(--poster-accent); transform: rotate(45deg); }
.hero-poster > em { position: absolute; z-index: 5; right: 0; top: 143px; width: 214px; color: rgba(230,237,255,.66); font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: .20em; text-align: center; text-transform: uppercase; }
.hero-poster strong { position: absolute; z-index: 4; right: 0; top: 173px; width: 214px; padding: 0; border: 0; color: #fff; background: transparent; font-size: clamp(48px, 4.5vw, 66px); font-weight: 800; line-height: 1; letter-spacing: -.055em; text-align: center; text-shadow: 0 16px 38px rgba(0,0,0,.24); }
.hero-slide--tiktok .hero-poster strong { top: 181px; font-size: clamp(32px, 3.4vw, 46px); letter-spacing: -.04em; }
.hero-poster-products { position: absolute; z-index: 6; left: 26px; top: 105px; width: 178px; display: grid; gap: 12px; }
.hero-poster-products i { position: relative; width: 178px; height: 54px; display: block; border: 0; background: radial-gradient(circle at 23px 50%, rgba(255,255,255,.78) 0 20px, transparent 21px); box-shadow: none; font-style: normal; }
.hero-poster-products i::before { content: ""; position: absolute; left: 23px; top: 50%; width: 32px; height: 34px; background: linear-gradient(145deg, color-mix(in srgb, var(--poster-accent) 78%, white), #718bd6); transform: translate(-50%,-50%); transform-origin: center; }
.hero-poster-products i::after { content: ""; position: absolute; left: 100%; top: 50%; width: 34px; height: 1px; background: linear-gradient(90deg, rgba(211,223,255,.12), rgba(211,223,255,.34)); }
.hero-poster-products i span { position: absolute; left: 52px; right: 0; top: 50%; overflow: hidden; color: #eef3ff; font-size: 11px; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; transform: translateY(-50%); }
.hero-poster-products .category--apparel::before { width: 29px; height: 32px; clip-path: polygon(28% 0, 42% 9%, 58% 9%, 72% 0, 100% 23%, 82% 39%, 78% 100%, 22% 100%, 18% 39%, 0 23%); }
.hero-poster-products .category--home::before { width: 32px; height: 21px; border-radius: 7px 7px 4px 4px; box-shadow: inset 0 -7px 0 rgba(255,255,255,.28), -5px 5px 0 -3px #718bd6, 5px 5px 0 -3px #718bd6; }
.hero-poster-products .category--beauty::before { width: 18px; height: 31px; border-radius: 5px 5px 8px 8px; box-shadow: 0 -7px 0 -3px #718bd6, inset 0 9px 0 rgba(255,255,255,.26); }
.hero-poster-products .category--electronics::before { width: 33px; height: 23px; border: 3px solid #718bd6; border-radius: 5px; background: color-mix(in srgb, var(--poster-accent) 48%, white); box-shadow: 0 8px 0 -6px #718bd6; }
.hero-poster-products .category--outdoor::before { width: 25px; height: 33px; border-radius: 10px 10px 6px 6px; box-shadow: inset 0 10px 0 rgba(255,255,255,.22), -5px 5px 0 -3px #718bd6, 5px 5px 0 -3px #718bd6; }
.hero-poster-products .category--bag::before { width: 31px; height: 27px; border-radius: 5px 5px 8px 8px; box-shadow: inset 0 6px 0 -4px rgba(255,255,255,.58), 0 -8px 0 -6px #718bd6; }
.hero-poster-products .category--shoe::before { width: 35px; height: 19px; border-radius: 11px 5px 7px 7px; clip-path: polygon(0 38%, 35% 23%, 54% 0, 69% 49%, 100% 63%, 96% 100%, 5% 100%); }

/* 店小秘同型：轮播只动左侧内容，右侧固定试用入口。 */
.hero .hero-poster { display: none; }
.hero-trial-panel { position: absolute; z-index: 8; top: 50px; right: max(var(--gutter), calc((100vw - 1200px) / 2)); width: 372px; padding: 28px; overflow: hidden; border: 1px solid rgba(29,61,139,.12); border-radius: 22px; color: #17244d; background: rgba(255,255,255,.94); box-shadow: 0 34px 72px -36px rgba(25,45,104,.46), inset 0 1px 0 #fff; backdrop-filter: blur(18px); }
.hero-trial-panel::before { content: ""; position: absolute; right: -64px; top: -74px; width: 188px; height: 188px; border-radius: 50%; background: radial-gradient(circle, rgba(77,119,238,.13), transparent 69%); }
.hero-trial-panel > strong { position: relative; display: block; color: #15213f; font-size: 25px; line-height: 1.25; letter-spacing: -.025em; }
.hero-trial-panel > p { position: relative; margin-top: 8px; color: #69758f; font-size: 12px; line-height: 1.65; }
.hero-trial-body { position: relative; display: grid; grid-template-columns: 122px minmax(0, 1fr); align-items: center; gap: 22px; margin-top: 20px; }
.hero-trial-qr { display: grid; justify-items: center; gap: 7px; color: #53607c; font-size: 9px; line-height: 1.3; text-align: center; }
.hero-trial-qr:hover { color: #1e40af; }
.hero-trial-qr img { width: 112px; height: 112px; padding: 6px; border: 1px solid #e0e6f2; border-radius: 13px; background: #fff; box-shadow: 0 15px 28px -24px rgba(19,38,94,.44); }
.hero-trial-body ul { display: grid; gap: 14px; }
.hero-trial-body li { position: relative; padding-left: 22px; color: #354568; font-size: 12px; font-weight: 700; line-height: 1.35; }
.hero-trial-body li::before { content: ""; position: absolute; left: 0; top: 1px; width: 14px; height: 14px; border: 1px solid rgba(59,111,224,.23); border-radius: 50%; background: rgba(77,119,238,.07); }
.hero-trial-body li::after { content: ""; position: absolute; left: 4px; top: 4px; width: 6px; height: 3px; border-left: 1.5px solid #3b6fe0; border-bottom: 1.5px solid #3b6fe0; transform: rotate(-45deg); }
.hero-trial-action { width: 100%; min-height: 46px; justify-content: center; margin-top: 22px; }

.hero-carousel-controls { position: absolute; z-index: 8; left: 50%; bottom: 151px; width: auto; display: none; transform: translateX(-50%); }
.hero.is-ready .hero-carousel-controls { display: block; }
.hero-dots { width: max-content; display: flex; align-items: center; gap: 10px; background: transparent; }
.hero-dots button { position: relative; width: 34px; height: 5px; padding: 0; overflow: hidden; border: 0; border-radius: 99px; background: rgba(30,64,175,.20); cursor: pointer; transition: width .22s ease, background .22s ease; }
.hero-dots button.is-active { width: 48px; background: rgba(30,64,175,.20); }
.hero-dots button.is-active::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--moon-500); transform-origin: left; animation: carousel-progress 3.5s linear forwards; }
.hero-dots button:focus-visible { outline: 3px solid rgba(252,217,160,.48); outline-offset: 5px; }
.hero-carousel-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── 平台带与数字 ──
   两者是独立区块：平台带可以叠在轮播上，数字区始终使用页面自己的背景。 */
.home-platform-overview { position: relative; z-index: 7; margin-top: -137px; padding: 0; overflow: hidden; }
.home-proof-overview { position: relative; z-index: 7; background: var(--bg); }
.platform-band { position: relative; isolation: isolate; display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 28px; padding: 25px 0 27px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.platform-band::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: 100vw; height: 100%; background: rgba(14,25,59,.55); transform: translateX(-50%); }
.platform-band-head span, .platform-band-head a { display: block; }
.platform-band-head span { color: #fff; font-size: 15px; font-weight: 700; }
.platform-band-head a { margin-top: 7px; color: rgba(255,255,255,.78); font-size: 11px; }
.platform-band-live { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 7px; }
.platform-band-live li { min-width: 0; min-height: 39px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; border-radius: 0; background: transparent; }
.platform-band-live strong { max-width: calc(100% - 8px); overflow: hidden; color: #fff; font-size: 11.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.platform-band-live span { color: rgba(255,255,255,.72); font-size: 8px; }
.platform-band-live .platform-band-collection span { color: rgba(255,255,255,.78); }
.proof-rail { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; overflow: visible; border: 0; border-radius: 0; background: radial-gradient(circle at 17% 48%, rgba(242,180,95,.07), transparent 22%), radial-gradient(circle at 50% 48%, rgba(77,119,238,.055), transparent 22%), radial-gradient(circle at 83% 48%, rgba(59,111,224,.045), transparent 22%); box-shadow: none; }
.proof-rail::before { display: none; }
.proof-item { position: relative; z-index: 1; padding: 54px 42px 58px; border: 0; text-align: center; }
.proof-item::before { content: ""; display: block; width: 32px; height: 3px; margin: 0 auto 22px; border-radius: 99px; background: linear-gradient(90deg, var(--moon-500), var(--moon-300)); }
.proof-item:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 54px; bottom: 58px; width: 1px; background: linear-gradient(180deg, transparent, var(--border) 22%, var(--border) 78%, transparent); }
.proof-item dt { color: var(--accent); font-family: var(--font-mono); font-size: 42px; font-weight: 700; line-height: 1; }
.proof-item dt span { font-size: .58em; }
.proof-item dd { margin: 12px 0 0; color: var(--text); font-size: 14px; font-weight: 700; }
.proof-item .proof-note { margin-top: 6px; color: var(--text-muted); font-size: 12px; font-weight: 400; }

/* ── 两组功能：店小秘同型的 4 × 2 密度 ── */
.main-features { position: relative; padding-top: 84px; padding-bottom: 100px; border: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 3%, var(--bg)) 0%, color-mix(in srgb, var(--moon-300) 6%, var(--bg)) 100%); }
.main-features::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 8% 15%, rgba(77,119,238,.055), transparent 24%), radial-gradient(circle at 92% 86%, rgba(242,180,95,.07), transparent 28%); }
.main-features > .container { position: relative; z-index: 1; }
.special-features { padding-top: 112px; padding-bottom: 112px; }
.home-section-head { margin-bottom: 36px; text-align: center; }
.home-section-head .eyebrow { justify-content: center; }
.home-section-head h2 { margin-top: 12px; color: var(--text); font-size: clamp(28px, 3vw, 40px); }
.main-feature-grid, .special-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.main-feature-card { --feature-accent: #3b6fe0; position: relative; min-height: 210px; display: flex; flex-direction: column; padding: 27px 25px 23px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--feature-accent) 16%, var(--border)); border-radius: 18px; color: var(--text); background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--feature-accent) 12%, transparent), transparent 40%), color-mix(in srgb, var(--feature-accent) 3.5%, var(--bg-card)); box-shadow: none; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.main-feature-card:nth-child(2) { --feature-accent: #6a62d8; }
.main-feature-card:nth-child(3) { --feature-accent: #2d9686; }
.main-feature-card:nth-child(4) { --feature-accent: #d17b32; }
.main-feature-card:nth-child(5) { --feature-accent: #d17b32; }
.main-feature-card:nth-child(6) { --feature-accent: #3688c8; }
.main-feature-card:nth-child(7) { --feature-accent: #8b66c8; }
.main-feature-card:nth-child(8) { --feature-accent: #3a946c; }
.main-feature-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--feature-accent) 40%, var(--border)); box-shadow: 0 24px 48px -36px color-mix(in srgb, var(--feature-accent) 42%, transparent); }
.main-feature-card h3 { margin-top: 20px; font-size: 18px; line-height: 1.35; }
.main-feature-card p { margin-top: 10px; color: var(--text-muted); font-size: 13px; line-height: 1.65; }
.main-feature-card > span:last-child { margin-top: auto; padding-top: 15px; color: var(--accent); font-size: 12px; font-weight: 700; }
.main-feature-card > span:last-child::after { content: ""; width: 6px; height: 6px; display: inline-block; margin-left: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translateY(-1px) rotate(45deg); }
.feature-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.feature-icon { width: 44px; height: 44px; flex: 0 0 auto; padding: 10px; border: 1px solid color-mix(in srgb, var(--feature-accent) 22%, transparent); border-radius: 13px; color: var(--feature-accent); background: color-mix(in srgb, var(--feature-accent) 10%, var(--bg-card)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.special-feature-grid article { min-height: 164px; padding: 24px 22px; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--accent) 3.5%, var(--bg-card)); }
.special-feature-icon { width: 42px; height: 42px; padding: 10px; border-radius: 12px; color: var(--accent); background: rgba(77,119,238,.09); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.special-feature-grid h3 { margin-top: 17px; color: var(--text); font-size: 17px; }
.special-feature-grid p { margin-top: 8px; color: var(--text-muted); font-size: 12.5px; line-height: 1.62; }

/* ── 已接入平台：真实 18 家，品牌色文字而非直接嵌入官方 Logo。 ── */
.supported-platforms { padding-top: 104px; padding-bottom: 112px; background: var(--bg); }
.supported-platforms .home-section-head p { margin-top: 12px; color: var(--text-muted); font-size: 14px; }
.platform-logo-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
:root[data-review-mode] .platform-band-live { grid-template-columns: repeat(6, minmax(0, 1fr)); }
:root[data-review-mode] .platform-logo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.platform-logo-card { --platform-color: #365ca8; --platform-bg-color: var(--platform-color); min-width: 0; min-height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; padding: 18px 12px; border: 1px solid color-mix(in srgb, var(--platform-color) 14%, var(--border)); border-radius: 16px; background: color-mix(in srgb, var(--platform-bg-color) 13%, var(--bg-card)); transition: transform .18s ease, box-shadow .18s ease; }
.platform-logo-card:hover { transform: translateY(-3px); box-shadow: 0 20px 38px -32px color-mix(in srgb, var(--platform-color) 44%, transparent); }
.platform-logo-card strong { max-width: 100%; overflow: hidden; color: var(--platform-color); font-size: clamp(18px, 1.65vw, 24px); font-weight: 800; line-height: 1; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.platform-logo-card span { padding: 4px 8px; border-radius: 999px; color: color-mix(in srgb, var(--platform-color) 76%, var(--text)); background: color-mix(in srgb, var(--platform-color) 9%, transparent); font-size: 9px; font-weight: 700; }
.platform-logo-card--collection span { color: #93611b; background: rgba(242,180,95,.15); }
.platform-logo--temu { --platform-color: #ff6f00; }
.platform-logo--tiktok { --platform-color: #111; background: linear-gradient(135deg, color-mix(in srgb, #25f4ee 12%, var(--bg-card)), color-mix(in srgb, #fe2c55 10%, var(--bg-card))); }
.platform-logo--tiktok strong { text-shadow: -1px 0 #25f4ee, 1px 0 #fe2c55; }
.platform-logo--shopee { --platform-color: #ee4d2d; }
.platform-logo--amazon { --platform-color: #131e29; --platform-bg-color: #ff9900; }
.platform-logo--amazon strong::after { content: ""; width: 42px; height: 8px; display: block; margin: -2px auto 0; border-bottom: 2px solid #ff9900; border-radius: 50%; transform: rotate(-5deg); }
.platform-logo--shein { --platform-color: #111; }
.platform-logo--shein strong { letter-spacing: .12em; }
.platform-logo--aliexpress { --platform-color: #e43225; }
.platform-logo--ebay { --platform-color: #1264a3; }
.platform-logo--ebay strong, .platform-logo--coupang strong { color: transparent; background: linear-gradient(90deg, #e53238 0 25%, #0064d2 25% 50%, #f5af02 50% 75%, #86b817 75% 100%); background-clip: text; -webkit-background-clip: text; }
.platform-logo--shopify { --platform-color: #72a638; }
.platform-logo--shopify strong { font-style: italic; }
.platform-logo--dhgate { --platform-color: #aa7624; }
.platform-logo--dhgate strong { color: transparent; background: linear-gradient(90deg, #9b6b22, #d5a43b, #555); background-clip: text; -webkit-background-clip: text; }
.platform-logo--wildberries { --platform-color: #cb11ab; }
.platform-logo--wildberries strong { color: transparent; background: linear-gradient(90deg, #b800b7, #ef299f); background-clip: text; -webkit-background-clip: text; text-transform: uppercase; }
.platform-logo--ozon { --platform-color: #005bff; }
.platform-logo--ozon strong { text-transform: uppercase; letter-spacing: .04em; }
.platform-logo--coupang { --platform-color: #167f8f; }
.platform-logo--lazada { --platform-color: #6354cf; }
.platform-logo--lazada strong { color: transparent; background: linear-gradient(90deg, #6b43cb, #7f58e8, #ee5a35); background-clip: text; -webkit-background-clip: text; }
.platform-logo--walmart { --platform-color: #0071ce; }
.platform-logo--mercado { --platform-color: #2d3277; --platform-bg-color: #ffe600; }
.platform-logo--1688 { --platform-color: #ff6a00; }
.platform-logo--alibaba { --platform-color: #ff6a00; }
.platform-logo--noon { --platform-color: #1d1d1b; --platform-bg-color: #feee00; }

/* ── 深夜模式 ── */
:root[data-theme="dark"] .platform-band,
:root[data-theme="dark"] .proof-rail,
:root[data-theme="dark"] .main-feature-card,
:root[data-theme="dark"] .special-feature-grid article { border-color: rgba(157,182,255,.13); }
:root[data-theme="dark"] .platform-logo-card span { color: color-mix(in srgb, var(--platform-color) 35%, #fff); background: color-mix(in srgb, var(--platform-color) 18%, transparent); }
:root[data-theme="dark"] .platform-logo-card--collection span { color: #f3c777; background: rgba(242,180,95,.18); }
:root[data-theme="dark"] .platform-logo--tiktok strong,
:root[data-theme="dark"] .platform-logo--amazon strong,
:root[data-theme="dark"] .platform-logo--shein strong,
:root[data-theme="dark"] .platform-logo--noon strong { color: #f7f8fb; }
:root[data-theme="dark"] .platform-logo--ozon strong { color: #68a2ff; }
:root[data-theme="dark"] .platform-logo--walmart strong { color: #59b4ff; }
:root[data-theme="dark"] .platform-logo--mercado strong { color: #9aabff; }
:root[data-theme="dark"] .platform-logo--ebay strong,
:root[data-theme="dark"] .platform-logo--coupang strong { background-image: linear-gradient(90deg, #ff5a64 0 25%, #55a2ff 25% 50%, #ffd052 50% 75%, #a4d85a 75% 100%); }
:root[data-theme="dark"] .platform-logo--dhgate strong { background-image: linear-gradient(90deg, #e1ad55, #ffd06e, #d9e0ec); }
:root[data-theme="dark"] .platform-logo--lazada strong { background-image: linear-gradient(90deg, #a982ff, #c184ff, #ff8468); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .platform-logo-card span { color: color-mix(in srgb, var(--platform-color) 35%, #fff); background: color-mix(in srgb, var(--platform-color) 18%, transparent); }
  :root:not([data-theme]) .platform-logo-card--collection span { color: #f3c777; background: rgba(242,180,95,.18); }
  :root:not([data-theme]) .platform-logo--tiktok strong,
  :root:not([data-theme]) .platform-logo--amazon strong,
  :root:not([data-theme]) .platform-logo--shein strong,
  :root:not([data-theme]) .platform-logo--noon strong { color: #f7f8fb; }
  :root:not([data-theme]) .platform-logo--ozon strong { color: #68a2ff; }
  :root:not([data-theme]) .platform-logo--walmart strong { color: #59b4ff; }
  :root:not([data-theme]) .platform-logo--mercado strong { color: #9aabff; }
  :root:not([data-theme]) .platform-logo--ebay strong,
  :root:not([data-theme]) .platform-logo--coupang strong { background-image: linear-gradient(90deg, #ff5a64 0 25%, #55a2ff 25% 50%, #ffd052 50% 75%, #a4d85a 75% 100%); }
  :root:not([data-theme]) .platform-logo--dhgate strong { background-image: linear-gradient(90deg, #e1ad55, #ffd06e, #d9e0ec); }
  :root:not([data-theme]) .platform-logo--lazada strong { background-image: linear-gradient(90deg, #a982ff, #c184ff, #ff8468); }
}

@keyframes carousel-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── 响应式 ── */
@media (max-width: 1100px) {
  .hero-copy { width: 57%; }
  .hero-poster { right: -20px; width: 46vw; }
  .hero-trial-panel { right: 22px; width: 342px; padding: 24px; }
  .hero-slide--amazon::after { bottom: 72px; }
  .hero-shopee-waves { bottom: 0; }
  .hero-carousel-controls { bottom: 18px; }
  .home-platform-overview { margin-top: 0; }
  .platform-band { background: transparent; box-shadow: none; }
  .platform-band::before { background: #17244d; }
  .platform-band { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .platform-band-head { display: grid; justify-items: center; gap: 7px; text-align: center; }
  .platform-band-head a { margin-top: 0; }
  .platform-band-live { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  :root[data-review-mode] .platform-band-live { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .hero-slide { min-height: 542px; padding: 46px 0 92px; }
  .hero-copy { width: min(74%, 620px); }
  .hero-title { font-size: clamp(39px, 6.8vw, 52px); }
  .hero-poster { width: 400px; height: 300px; right: -90px; top: 248px; opacity: .48; }
  .hero-poster::before { width: 180px; height: 180px; right: -6px; top: 55px; }
  .hero-poster::after { width: 130px; height: 2px; right: 8px; top: 173px; }
  .hero-poster-orbit { left: 170px; top: 88px; width: 65px; height: 108px; }
  .hero-poster-orbit::before { width: 65px; }
  .hero-poster > em { right: 0; top: 99px; width: 150px; font-size: 7px; }
  .hero-poster strong { width: 150px; right: 0; top: 120px; padding: 0; font-size: 38px; }
  .hero-slide--tiktok .hero-poster strong { top: 126px; font-size: 28px; }
  .hero-poster-products { left: 16px; top: 72px; width: 126px; gap: 8px; }
  .hero-poster-products i { width: 126px; height: 37px; background: radial-gradient(circle at 16px 50%, rgba(255,255,255,.78) 0 14px, transparent 15px); }
  .hero-poster-products i::before { left: 16px; transform: translate(-50%,-50%) scale(.74); }
  .hero-poster-products i::after { width: 28px; }
  .hero-poster-products i span { left: 38px; font-size: 8px; }
  .hero-trial-panel { display: none; }
  .hero-platform-scene--temu { opacity: .42; }
  .main-feature-grid, .special-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root[data-review-mode] .platform-logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 660px) {
  .hero-slide--shein { background: radial-gradient(ellipse 140% 105% at 120% 122%, #1b1b1b 0 58%, transparent 59%), #f7f7f5; }
  .hero-slide { min-height: 572px; padding: 44px 0 150px; align-items: start; }
  .hero-copy { width: 100%; text-align: center; }
  .hero-eyebrow { margin-bottom: 15px; }
  .hero-title { margin: 0 auto; font-size: clamp(34px, 10.6vw, 46px); }
  .hero-lede { margin-left: auto; margin-right: auto; font-size: 14px; }
  .hero-actions { justify-content: center; margin-top: 23px; }
  .hero-actions .btn { min-width: 168px; }
  .hero-platform-scene--temu { display: none; }
  .hero-poster { width: 300px; height: 220px; right: 50%; top: auto; bottom: 32px; opacity: .38; transform: translateX(50%); }
  .hero-poster::before { width: 135px; height: 135px; right: -5px; top: 39px; }
  .hero-poster::after { width: 102px; height: 2px; right: 0; top: 127px; }
  .hero-poster-orbit { left: 126px; top: 59px; width: 43px; height: 84px; }
  .hero-poster-orbit::before { width: 43px; }
  .hero-poster > em { right: 0; top: 67px; width: 122px; font-size: 6px; }
  .hero-poster strong { width: 122px; right: 0; top: 84px; padding: 0; font-size: 29px; }
  .hero-slide--tiktok .hero-poster strong { top: 88px; font-size: 21px; }
  .hero-poster-products { left: 8px; top: 48px; width: 96px; gap: 5px; }
  .hero-poster-products i { width: 96px; height: 29px; background: radial-gradient(circle at 13px 50%, rgba(255,255,255,.78) 0 11px, transparent 12px); }
  .hero-poster-products i::before { left: 13px; transform: translate(-50%,-50%) scale(.58); }
  .hero-poster-products i::after { width: 22px; }
  .hero-poster-products i span { left: 30px; font-size: 6.5px; }
  .hero-carousel-controls { bottom: 18px; }
  .hero-dots { gap: 7px; }
  .hero-dots button { width: 22px; }
  .hero-dots button.is-active { width: 34px; }
  .platform-band { padding: 18px; }
  .platform-band-live { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root[data-review-mode] .platform-band-live { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-band-live li:last-child:nth-child(odd) { grid-column: span 2; }
  .proof-rail { grid-template-columns: minmax(0, 1fr); }
  .proof-item { padding: 36px 22px 40px; border: 0; }
  .proof-item::before { margin-bottom: 17px; }
  .proof-item:not(:last-child)::after { left: 22px; right: 22px; top: auto; bottom: 0; width: auto; height: 1px; background: linear-gradient(90deg, transparent, var(--border) 18%, var(--border) 82%, transparent); }
  .main-features, .special-features { padding-top: 86px; padding-bottom: 86px; }
  .home-section-head { margin-bottom: 30px; }
  .main-feature-grid, .special-feature-grid { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .main-feature-card { min-height: 0; }
  .special-feature-grid article { min-height: 0; }
  .platform-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  :root[data-review-mode] .platform-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-logo-card { min-height: 96px; padding: 14px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero.is-ready .hero-track,
  .hero.is-ready .hero-copy,
  .hero-dots button,
  .main-feature-card { transition: none; }
  .hero-dots button.is-active::after { animation: none; transform: scaleX(1); }
}