.react-landing .hero-image {
  margin: 18px 16px 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}
.react-landing .hero-image img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.react-landing .landing-spacer { flex: 1; }
.react-landing .choice-pick { animation: choice-pop .38s var(--ease-out) both; }
@keyframes choice-pop {
  0% { transform: scale(1); }
  45% { transform: scale(.96); }
  100% { transform: scale(1); }
}

.front-flow-ring-wrap{position:relative;width:210px;height:210px;margin:26px auto 0}.front-flow-ring-wrap svg{transform:rotate(-90deg)}.front-flow-ring-track{fill:none;stroke:var(--line);stroke-width:10}.front-flow-ring-fill{fill:none;stroke:var(--lime);stroke-width:10;stroke-linecap:round;stroke-dasharray:527.8;transition:stroke-dashoffset .35s linear}.front-flow-ring-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.front-flow-ring-num b{font-size:48px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.front-flow-ring-num span{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}.front-flow-steps{margin:24px 16px 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:6px 18px}.front-flow-step{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);opacity:.38;transition:opacity .3s}.front-flow-step:last-child{border-bottom:none}.front-flow-step.on{opacity:1}.front-flow-step .dot{width:24px;height:24px;border-radius:50%;border:2px solid var(--line-2);flex:none;display:grid;place-items:center;font-size:12px;color:transparent;transition:.25s var(--ease-spring)}.front-flow-step.on .dot{background:var(--lime);border-color:var(--ink);color:var(--ink)}.front-flow-step p{font-size:13.5px;font-weight:600;color:var(--ink)}.front-flow-step .tag{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase}.front-flow-step.on .tag{color:var(--good)}

.ba .pic{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;margin-bottom:10px;border:1px solid var(--line)}
.ba .no .pic{filter:saturate(.5) brightness(.96)}

.hero{position:relative;margin:0 16px;border-radius:26px 26px 0 0;padding:28px 20px 44px;overflow:hidden;background:linear-gradient(135deg,var(--lime-soft) 0%,var(--bg) 100%);border:1.5px solid var(--line);border-bottom:none}.hero svg{position:relative;z-index:1;display:block;width:100%;height:auto;max-height:180px}.hero .grain{position:absolute;inset:0;pointer-events:none;opacity:.45;background-image:radial-gradient(circle at 20% 30%,rgba(144,226,69,.35) 0,transparent 28%),radial-gradient(circle at 80% 70%,rgba(17,17,16,.06) 0,transparent 32%)}
.sheet{position:relative;z-index:2;margin:-28px 16px 0;background:var(--surface);border-radius:26px 26px 0 0;padding:26px 16px 34px;flex:1;border:1.5px solid var(--line);border-bottom:none;box-shadow:0 -10px 30px rgba(17,17,16,.06)}.sheet-title{font-size:26px;font-weight:800;line-height:1.24;letter-spacing:-.02em}.sheet-title .brand{color:var(--lime)}.sheet-lead{font-size:14px;color:var(--ink-2);line-height:1.7;margin:8px 0 22px}
.input-wrap{position:relative;margin-bottom:12px}.input-wrap .input{width:100%;margin:0;padding-left:46px;padding-right:16px}.input-wrap .input-ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none;line-height:1}.input-wrap .eye{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;background:transparent;color:var(--ink-3);cursor:pointer}.requirements{margin:6px 2px 18px}.req-item{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3);margin-top:8px}.req-item .dot{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;font-size:10px}.req-item.ok{color:var(--ink-2)}.req-item.ok .dot{background:var(--lime);border-color:var(--lime)}.req-item.ok .dot:before{content:'✓'}.bottom-cta{margin-top:auto;padding-top:8px}.bottom-cta .cta{width:100%;margin:16px 0 0}.check a,.foot a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;font-weight:700}.step2{max-height:0;overflow:hidden;opacity:0;transition:max-height .45s,opacity .35s,margin .35s;margin-bottom:0}.step2.show{max-height:140px;opacity:1;margin-bottom:12px}.error{margin-top:12px;padding:10px 13px;border-radius:12px;background:var(--bad-bg);color:var(--bad);font-size:12.5px;font-weight:600;line-height:1.5}.foot{text-align:center;margin-top:18px}.foot .note{font-size:12.5px;color:var(--ink-2);line-height:1.6}.modal.show{display:flex}.modal .box{max-width:330px;width:calc(100% - 32px)}
.plans{display:flex;flex-direction:column;gap:10px}.plan{position:relative;width:100%;min-height:74px;padding:14px 12px;display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;border:1.5px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink)}.plan.sel{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}.plan .pn,.plan .pd{display:block}.plan .pd{font-size:11px;color:var(--ink-2);margin-top:3px}.plan .price{margin-left:auto;text-align:right}.plan .save{position:absolute;right:10px;top:-9px;border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-pill);padding:3px 8px;font-size:10px;font-weight:800}.plan .radio{width:18px;height:18px;flex:none;border:2px solid var(--line-2);border-radius:50%}.plan.sel .radio{border:5px solid var(--lime);background:var(--ink)}.promo{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;margin-top:12px;padding:9px 12px;border-radius:14px;background:var(--lime);color:#111}.promo b{font-size:18px}.promo b i{font-size:22px;font-style:normal}.promo .cd{display:flex;align-items:center;gap:5px;margin-left:auto;background:rgba(17,17,16,.14);border-radius:var(--r-pill);padding:4px 9px}.promo-line{position:relative;overflow:hidden}.promo-line .pl-badge{border-radius:var(--r-pill);font-weight:800;letter-spacing:.08em}
.payment-methods{border:0;margin:14px 16px 0;padding:0}.payment-methods legend{font-size:13px;font-weight:800;margin-bottom:8px}.payment-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.payment-option{position:relative;min-height:58px;display:flex;align-items:center;gap:8px;padding:10px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;transition:border-color .15s,background .15s,transform .12s}.payment-option:active{transform:scale(.98)}.payment-option.sel{border-color:var(--ink);background:var(--lime-soft);box-shadow:0 0 0 1px var(--ink)}.payment-mark{width:28px;height:28px;display:grid;place-items:center;flex:none;border-radius:8px;font-size:17px;font-weight:900;font-family:Arial,sans-serif}.stripe-mark{background:#635bff;color:#fff}.paypal-mark{background:#0879c9;color:#fff;font-style:italic}.payment-option b,.payment-option small{display:block}.payment-option b{font-size:13px;line-height:1.2}.payment-option small{margin-top:3px;font-size:9.5px;color:var(--ink-2);white-space:nowrap}.payment-check{position:absolute;right:7px;top:6px;font-size:11px;font-weight:900;color:var(--lime);opacity:0}.payment-option.sel .payment-check{opacity:1;color:var(--ink)}
.selling-lead{margin:8px 0 0;color:var(--ink-3);font-size:12px;line-height:1.5}.selling-section-title{font-size:14px;font-weight:800;margin:0 16px 8px}.plan .price small{display:block;margin-top:3px;font-size:10px;color:var(--ink-2);font-weight:600}.plan .price s{display:none}.subscription-state{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:32px;text-align:center}.subscription-state h1{font-size:22px;line-height:1.3;margin:18px 0 8px}.subscription-state p{font-size:13px;color:var(--ink-2);line-height:1.6;margin:0}.subscription-state .cta{width:100%;margin-top:22px}.loader{width:36px;height:36px;border:4px solid var(--line);border-top-color:var(--ink);border-radius:50%;animation:subscription-spin .8s linear infinite}@keyframes subscription-spin{to{transform:rotate(360deg)}}.error-state{justify-content:flex-start;padding-top:100px}.error-state h1{margin-top:0}
html[data-theme="dark"] .hero{background:linear-gradient(135deg,rgba(144,226,69,.18) 0%,var(--bg) 100%);border-color:var(--line)}

.bottomsheet{display:none;animation:sheet-up .45s var(--ease-spring) both}
@keyframes sheet-up{from{transform:translateY(110%)}to{transform:none}}
@keyframes save-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

/* ---------- 促销动效层：立减标签 / 倒计时 / 省额徽标 / CTA 光晕 ---------- */
@keyframes promo-shine{0%{transform:translateX(-160%) skewX(-18deg)}100%{transform:translateX(360%) skewX(-18deg)}}
@keyframes promo-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes promo-glow{0%{box-shadow:0 0 0 0 rgba(144,226,69,.5)}70%{box-shadow:0 0 0 13px rgba(144,226,69,0)}100%{box-shadow:0 0 0 0 rgba(144,226,69,0)}}
@keyframes dot-blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
@keyframes num-pop{0%{transform:scale(1.3)}100%{transform:scale(1)}}

/* 顶部「立减 50%」闪光条 */
.promo{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;
  margin-top:12px;padding:9px 12px;border-radius:14px;background:var(--lime);color:#111110}
.promo-shine{position:absolute;top:-20%;bottom:-20%;width:52px;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  animation:promo-shine 2.8s ease-in-out infinite}
.promo b{position:relative;font-size:18px;font-weight:800;letter-spacing:-.01em}
.promo b i{font-style:normal;font-size:22px}
.promo .cd{position:relative;margin-left:auto;display:flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:800;background:rgba(17,17,16,.14);border-radius:var(--r-pill);
  padding:4px 9px;font-variant-numeric:tabular-nums}
.promo .cd .bdot{width:6px;height:6px;border-radius:50%;background:#111110;animation:dot-blink 1.1s ease-in-out infinite}

/* 促销码行：常驻光带 + 已锁定徽标 */
.promo-line{position:relative;overflow:hidden;display:flex;align-items:center;gap:8px;
  margin:-2px 16px 10px;padding:8px 12px;border-radius:12px;background:var(--lime);color:#111110}
.promo-line .pl-txt{position:relative;font-size:11.5px;font-weight:800;line-height:1.35}
.promo-line .pl-badge{position:relative;margin-left:auto;flex:none;background:#111110;color:var(--lime);
  font-size:9.5px;font-weight:800;letter-spacing:.08em;padding:3px 8px;border-radius:var(--r-pill)}

/* 省额徽标：全档常驻脉动，领取折扣后加强 */
.plan .save{animation:promo-pulse 2.8s ease-in-out infinite}
.plan .save.hot{background:var(--lime);color:#111110;border:1.5px solid #111110;
  animation:promo-pulse 1.1s ease-in-out infinite,promo-glow 1.6s ease-out infinite}
.plan.sel .save{animation-duration:1.7s}
/* 选中档位：价格轻微强调 */
.plan.sel .price b{color:var(--ink)}

/* CTA 呼吸光晕，吸引下单 */
.cta.main{animation:promo-glow 2.6s ease-out infinite}
.bottomsheet .cta.lime{animation:promo-glow 2.2s ease-out infinite}
@media (prefers-reduced-motion:reduce){
  .promo-shine,.promo .cd .bdot,.plan .save,.cta.main,.bottomsheet .cta.lime{animation:none}
}