/* ============================================================
   蓝标订阅 · X Premium 代订
   深色单页 · 单一品牌蓝 #1d9bf0 · 纯 CSS 特效
   ============================================================ */

:root{
  --bg: #0a0a0c;
  --bg-2: #0e0e11;
  --card: #121215;
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.16);
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --dim: #6e6e78;
  --accent: #1d9bf0;
  --accent-2: #6cc1f7;
  --accent-soft: rgba(29,155,240,.14);
  --amber: #f4b740;
  --r-lg: 24px;
  --r-md: 18px;
  --font: "Space Grotesk", -apple-system, BlinkMacSystemFont, "PingFang SC",
          "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
}

/* ---------- reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; scroll-padding-top:96px }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.lock{ overflow:hidden }
a{ color:inherit; text-decoration:none }
button{ font-family:inherit; border:none; background:none; color:inherit; cursor:pointer }
input{ font-family:inherit }
[hidden]{ display:none !important }
::selection{ background:rgba(29,155,240,.35); color:#fff }
::-webkit-scrollbar{ width:10px }
::-webkit-scrollbar-thumb{ background:#232329; border-radius:8px; border:2px solid var(--bg) }
::-webkit-scrollbar-track{ background:var(--bg) }

.ic{ width:1em; height:1em; display:inline-block; flex-shrink:0 }
.container{ width:100%; max-width:1120px; margin-inline:auto; padding-inline:clamp(20px,5vw,40px) }

/* 全局细噪点，去掉"数码味" */
body::after{
  content:""; position:fixed; inset:-50%; z-index:5; pointer-events:none; opacity:.05;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 自定义光标（仅精确指针设备） */
html.cc, html.cc *{ cursor:none !important }
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; z-index:300; pointer-events:none; border-radius:50%; opacity:0 }
.cursor-dot{ width:6px; height:6px; background:var(--accent) }
.cursor-ring{ width:36px; height:36px; border:1.5px solid rgba(255,255,255,.35); transition:width .25s var(--ease), height .25s var(--ease), border-color .25s }
.cursor-ring.hov{ width:56px; height:56px; border-color:rgba(29,155,240,.85) }
@media (pointer:coarse){ .cursor-dot,.cursor-ring{ display:none } }

/* ---------- 通用组件 ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:8px; height:52px; padding:0 28px; border-radius:999px;
  font-size:15px; font-weight:600; letter-spacing:.01em;
  transition:transform .35s var(--ease), box-shadow .35s, background .25s, border-color .25s, filter .25s;
  white-space:nowrap; overflow:hidden;
}
.btn .ic{ font-size:17px }
.btn-solid{ background:var(--accent); color:#fff; box-shadow:0 10px 30px -12px rgba(29,155,240,.55) }
.btn-solid:hover{ filter:brightness(1.08); box-shadow:0 14px 36px -12px rgba(29,155,240,.7) }
.btn-ghost{ border:1px solid var(--line-2); background:rgba(255,255,255,.02); color:var(--text) }
.btn-ghost:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.28) }
.btn-sm{ height:40px; padding:0 20px; font-size:13.5px }
.btn-lg{ height:56px; padding:0 34px; font-size:16px }
/* 扫光 */
.btn-solid::after{
  content:""; position:absolute; top:0; bottom:0; width:44%; left:-60%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg); transition:left .6s var(--ease); pointer-events:none;
}
.btn-solid:hover::after{ left:130% }

.kicker{
  display:flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); font-weight:600;
}
.kicker::before{ content:""; width:24px; height:1px; background:linear-gradient(90deg,var(--accent),transparent) }
.sec{ padding-block:clamp(76px,9vw,124px); position:relative }
.sec-head{ max-width:600px; margin-bottom:clamp(40px,5vw,60px) }
.sec-head h2{ font-size:clamp(30px,4.5vw,46px); letter-spacing:-.02em; line-height:1.15; margin:14px 0 12px; font-weight:700 }
.sec-sub{ color:var(--muted); font-size:15px; line-height:1.85 }

/* 滚动浮现 */
.js .reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease) var(--rd,0s), transform .8s var(--ease) var(--rd,0s);
}
.js .reveal.in{ opacity:1; transform:none }

/* 鼠标追随光斑卡片 */
.spot{ position:relative }
.spot::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(29,155,240,.75), transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .35s; pointer-events:none;
}
.spot::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(29,155,240,.09), transparent 70%);
  opacity:0; transition:opacity .35s; pointer-events:none;
}
.spot:hover::before,.spot:hover::after{ opacity:1 }

/* ---------- 导航 ---------- */
.nav{ position:fixed; inset-inline:0; top:0; z-index:80; transition:background .35s, border-color .35s, backdrop-filter .35s; border-bottom:1px solid transparent }
.nav.scrolled{ background:rgba(10,10,12,.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom-color:var(--line) }
.nav-in{ display:flex; align-items:center; gap:32px; height:70px }
.brand{ display:flex; align-items:center; gap:11px; font-size:15.5px; font-weight:700; letter-spacing:.01em }
.brand-mark{ width:30px; height:30px; border-radius:9px; background:var(--accent); color:#fff; display:grid; place-items:center; font-size:15px; box-shadow:0 6px 18px -6px rgba(29,155,240,.6) }
.nav-links{ display:flex; gap:28px; margin-inline:auto }
.nav-links a{ font-size:14px; color:var(--muted); transition:color .25s; position:relative }
.nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1px; background:var(--accent); transition:right .3s var(--ease) }
.nav-links a:hover{ color:var(--text) }
.nav-links a:hover::after{ right:0 }

/* ---------- HERO ---------- */
.hero{ position:relative; padding-block:clamp(120px,16vh,168px) clamp(64px,8vw,104px); overflow:clip }
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 75% 62% at 62% 18%, #000 25%, transparent 74%);
  mask-image:radial-gradient(ellipse 75% 62% at 62% 18%, #000 25%, transparent 74%);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(560px circle at var(--hx,70%) var(--hy,20%), rgba(29,155,240,.08), transparent 65%);
}
.hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(40px,6vw,72px); align-items:center }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 15px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
  font-size:12.5px; color:var(--muted); letter-spacing:.02em;
}
.pulse-dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); position:relative; flex-shrink:0 }
.pulse-dot::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--accent); animation:ripple 2s ease-out infinite }
@keyframes ripple{ 0%{ transform:scale(.5); opacity:1 } 100%{ transform:scale(1.9); opacity:0 } }

.hero h1{
  font-size:clamp(46px,7.4vw,86px);
  line-height:1.08; letter-spacing:-.02em; font-weight:700;
  margin:26px 0 22px;
}
.u-draw{ position:relative; display:inline-block }
.u-draw svg{ position:absolute; left:-2%; bottom:-.14em; width:104%; height:.2em; overflow:visible }
.u-draw path{
  fill:none; stroke:var(--accent); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:draw .9s var(--ease) 1s forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0 } }
.title-check{
  width:.5em; height:.5em; color:var(--accent); vertical-align:.08em; margin-left:.08em;
  animation:pop .7s cubic-bezier(.34,1.56,.64,1) .7s backwards, bob 3.4s ease-in-out 1.6s infinite;
  filter:drop-shadow(0 4px 14px rgba(29,155,240,.5));
}
@keyframes pop{ 0%{ transform:scale(0) rotate(-28deg) } 65%{ transform:scale(1.18) rotate(4deg) } 100%{ transform:scale(1) rotate(0) } }
@keyframes bob{ 0%,100%{ translate:0 0 } 50%{ translate:0 -5px } }

.hero-sub{ color:var(--muted); font-size:clamp(15px,1.6vw,17px); line-height:1.9; max-width:44ch }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px }
.hero-stats{ display:flex; gap:clamp(28px,4.5vw,58px); margin-top:52px; flex-wrap:wrap }
.stat-n{ font-size:27px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.stat-l{ font-size:12.5px; color:var(--dim); margin-top:4px }

.hero-visual{ position:relative; display:flex; justify-content:flex-end }
.orb{
  position:absolute; width:440px; height:440px; right:-70px; top:-60px; z-index:0;
  background:radial-gradient(circle, rgba(29,155,240,.2), transparent 65%);
  filter:blur(52px); animation:orb 9s ease-in-out infinite;
}
@keyframes orb{ 0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(-24px,18px) scale(1.08) } }
.xcard-wrap{ position:relative; z-index:2; width:min(440px,100%); perspective:1000px }
.xcard{
  position:relative; aspect-ratio:1.62; border-radius:26px; padding:clamp(20px,4vw,30px);
  display:flex; flex-direction:column; justify-content:space-between;
  background:linear-gradient(150deg,#1b1b20 0%, #0c0c0e 62%);
  border:1px solid var(--line-2);
  box-shadow:0 46px 90px -28px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.07);
  transform-style:preserve-3d; will-change:transform;
}
.xcard-sheen{
  position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none;
  background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.09) 49%, rgba(255,255,255,.02) 53%, transparent 60%);
  background-size:240% 100%; background-position:135% 0;
  animation:sheen 6s ease-in-out 2s infinite;
}
@keyframes sheen{ 0%,58%{ background-position:135% 0 } 88%,100%{ background-position:-45% 0 } }
.xcard-top{ display:flex; justify-content:space-between; align-items:center }
.xcard-brand{ display:flex; align-items:center; gap:9px; font-size:12px; letter-spacing:.26em; color:var(--muted); font-weight:600 }
.xcard-brand .ic{ font-size:20px; color:var(--text) }
.xcard-tier{ font-size:11.5px; padding:5px 11px; border-radius:999px; border:1px solid var(--line-2); color:var(--muted) }
.xcard-user{ display:flex; align-items:center; gap:15px }
.avatar{
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(140deg,#2a2a31,#15151a); border:1px solid var(--line-2);
  color:var(--muted); font-size:24px; flex-shrink:0;
}
.xcard-id{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.handle{ font-size:17.5px; font-weight:600; display:flex; align-items:center; gap:7px }
.ckwrap{ position:relative; display:inline-grid; place-items:center }
.ck{ font-size:19px; color:var(--accent) }
.ckwrap::after{ content:""; position:absolute; inset:-3px; border-radius:50%; border:1.5px solid var(--accent); animation:ripple 2.4s ease-out infinite }
.xcard-sub{ font-size:12.5px; color:var(--dim) }
.xcard-bottom{ display:flex; justify-content:space-between; align-items:flex-end }
.xcard-date{ display:flex; flex-direction:column; font-size:14px; font-weight:600; letter-spacing:.04em; font-variant-numeric:tabular-nums }
.xcard-date em{ font-style:normal; font-size:9.5px; letter-spacing:.24em; color:var(--dim); font-weight:500; margin-bottom:3px }
.xcard-chip2{ font-size:11.5px; color:var(--accent-2); border:1px solid rgba(29,155,240,.35); background:var(--accent-soft); padding:5px 11px; border-radius:999px }

.chip{
  position:absolute; z-index:3; padding:10px 16px; border-radius:999px;
  background:rgba(19,19,23,.92); border:1px solid var(--line-2);
  font-size:13px; font-weight:500; backdrop-filter:blur(8px);
  box-shadow:0 14px 34px -12px rgba(0,0,0,.7);
  animation:float 5.5s ease-in-out infinite; white-space:nowrap;
}
.chip-a{ top:-20px; left:-4% }
.chip-b{ bottom:32%; right:-6%; animation-delay:1.4s }
.chip-c{ bottom:-20px; left:22%; animation-delay:2.6s }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }

/* ---------- MARQUEE ---------- */
.marquee{
  border-block:1px solid var(--line); background:var(--bg-2);
  padding-block:17px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-inner{ display:flex; width:max-content; animation:mq 32s linear infinite }
.marquee:hover .marquee-inner{ animation-play-state:paused }
@keyframes mq{ to{ transform:translateX(-50%) } }
.m-group{ display:flex; align-items:center }
.m-item{ display:flex; align-items:center; gap:26px; padding-right:26px; font-size:13.5px; color:var(--dim); letter-spacing:.08em; white-space:nowrap }
.mi-ck{ font-size:13px; color:var(--accent); opacity:.85 }

/* ---------- WHY ---------- */
.feats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.feat{
  padding:27px 23px; border-radius:var(--r-md);
  background:linear-gradient(180deg,#131316,#0e0e10);
  border:1px solid var(--line);
  transition:border-color .35s, box-shadow .35s;
}
.feat:hover{ border-color:var(--line-2); box-shadow:0 24px 50px -30px rgba(0,0,0,.8) }
.feat-ic{
  width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-2); font-size:20px; margin-bottom:18px;
}
.feat h3{ font-size:16px; font-weight:600; margin-bottom:8px }
.feat p{ font-size:13.5px; color:var(--muted); line-height:1.75 }

/* ---------- PLANS ---------- */
.plans{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:880px; margin-inline:auto; align-items:start }
.plan{
  height:100%; padding:clamp(28px,3.4vw,38px) clamp(24px,3vw,32px);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,#131316,#0e0e10);
  border:1px solid var(--line);
  transition:border-color .35s, box-shadow .35s, transform .35s var(--ease);
}
.plan:hover{ transform:translateY(-5px); border-color:var(--line-2) }
.plan.featured{
  border-color:rgba(29,155,240,.45);
  background:linear-gradient(180deg, rgba(29,155,240,.09), rgba(29,155,240,.015) 46%), linear-gradient(180deg,#131316,#0e0e10);
  box-shadow:0 34px 90px -42px rgba(29,155,240,.4);
}
.plan-tag{
  display:inline-flex; padding:6px 13px; border-radius:999px;
  font-size:12px; font-weight:600; letter-spacing:.03em;
  background:rgba(255,255,255,.05); color:var(--muted);
  border:1px solid var(--line);
}
.featured .plan-tag{ background:var(--accent-soft); color:var(--accent-2); border-color:rgba(29,155,240,.35) }
.plan h3{ font-size:24px; margin-top:16px; letter-spacing:-.01em }
.plan-sub{ font-size:13.5px; color:var(--dim); margin-top:4px }
.plan-price{ display:flex; align-items:baseline; gap:5px; margin-top:22px }
.plan-price .cur{ font-size:22px; color:var(--muted); font-weight:500 }
.plan-price .num{ font-size:clamp(46px,5.5vw,58px); font-weight:700; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums }
.plan-price .per{ font-size:14px; color:var(--dim) }
.plan-note{ font-size:13px; color:var(--accent-2); margin-top:10px }
.featured .plan-note{ color:var(--accent-2) }
.plan-feats{ list-style:none; margin-top:24px }
.plan-feats li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:14px; color:var(--muted); padding-block:10.5px;
  border-top:1px solid rgba(255,255,255,.055);
}
.plan-feats .ic{ font-size:16px; color:var(--accent); margin-top:4px }
.plan-btn{ width:100%; margin-top:24px }
.plans-note{ text-align:center; margin-top:28px; font-size:13px; color:var(--dim) }
@media (min-width:901px){ .plans > div:last-child{ margin-top:-16px } }

/* ---------- PROCESS ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.step{
  padding:28px 26px; border-radius:var(--r-md);
  border:1px solid var(--line); background:rgba(255,255,255,.015);
  transition:border-color .35s, box-shadow .35s;
}
.step:hover{ border-color:var(--line-2); box-shadow:0 24px 50px -30px rgba(0,0,0,.8) }
.step-n{
  font-size:44px; font-weight:700; line-height:1; letter-spacing:-.02em;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.28);
  display:block; margin-bottom:20px; font-family:"Space Grotesk",var(--font);
}
.step h3{ font-size:16.5px; font-weight:600; margin-bottom:8px }
.step p{ font-size:13.5px; color:var(--muted); line-height:1.75 }
.steps-note{ display:flex; align-items:center; gap:9px; margin-top:26px; font-size:13px; color:var(--dim); justify-content:center }
.steps-note i{ width:7px; height:7px; border-radius:50%; background:var(--amber); flex-shrink:0; animation:blink 2.2s ease-in-out infinite }
@keyframes blink{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

/* ---------- FAQ ---------- */
.faqs{ max-width:740px; margin-inline:auto; border-top:1px solid var(--line) }
.qa{ border-bottom:1px solid var(--line) }
.qa-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:18px;
  padding:23px 4px; font-size:16px; font-weight:600; text-align:left;
  transition:color .25s;
}
.qa-q:hover{ color:var(--accent-2) }
.qa-ic{
  width:32px; height:32px; border-radius:50%; border:1px solid var(--line-2);
  display:grid; place-items:center; font-size:14px; color:var(--muted); flex-shrink:0;
  transition:transform .45s var(--ease), background .3s, color .3s, border-color .3s;
}
.qa.open .qa-ic{ transform:rotate(45deg); background:var(--accent); border-color:var(--accent); color:#fff }
.qa-a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease) }
.qa-a p{ padding:0 44px 24px 4px; font-size:14px; color:var(--muted); line-height:1.95; max-width:62ch }

/* ---------- CTA ---------- */
.cta-sec{ padding-top:0 }
.cta{
  border-radius:28px; border:1px solid var(--line);
  padding:clamp(52px,7vw,84px) clamp(24px,5vw,60px);
  text-align:center; overflow:hidden; position:relative;
  background:radial-gradient(640px 320px at 50% -8%, rgba(29,155,240,.17), transparent 70%), #0d0d10;
}
.cta h2{ font-size:clamp(30px,5vw,50px); letter-spacing:-.02em; line-height:1.15 }
.cta p{ color:var(--muted); margin:16px auto 34px; font-size:15px }

/* ---------- FOOTER ---------- */
.footer{ border-top:1px solid var(--line); padding:44px 0 56px; background:var(--bg-2) }
.foot-top{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap }
.foot-pill{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--amber); border:1px solid rgba(244,183,64,.3); background:rgba(244,183,64,.07); padding:7px 14px; border-radius:999px }
.foot-pill i{ width:6px; height:6px; border-radius:50%; background:var(--amber); animation:blink 2.2s ease-in-out infinite }
.foot-note{ font-size:12.5px; color:var(--dim); line-height:1.8; margin-top:24px; max-width:60ch }
.foot-meta{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:18px; font-size:12.5px; color:var(--dim) }

/* ---------- MODAL ---------- */
.modal-wrap{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; visibility:hidden; transition:visibility 0s .4s }
.modal-wrap.open{ visibility:visible; transition-delay:0s }
.modal-mask{
  position:absolute; inset:0; background:rgba(7,7,9,.72);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; transition:opacity .4s;
}
.modal-wrap.open .modal-mask{ opacity:1 }
.modal{
  position:relative; width:min(464px,100%); max-height:min(88vh,780px); overflow-y:auto;
  background:#141418; border:1px solid var(--line-2); border-radius:26px;
  padding:clamp(26px,4vw,34px);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.85);
  transform:translateY(28px) scale(.97); opacity:0;
  transition:transform .45s var(--ease), opacity .35s;
}
.modal-wrap.open .modal{ transform:none; opacity:1 }
.modal::-webkit-scrollbar{ width:6px }
.modal-x{
  position:absolute; top:18px; right:18px; width:36px; height:36px;
  border-radius:50%; border:1px solid var(--line); display:grid; place-items:center;
  color:var(--muted); font-size:15px; transition:color .25s, border-color .25s, transform .3s;
}
.modal-x:hover{ color:var(--text); border-color:var(--line-2); transform:rotate(90deg) }
.m-eyebrow{ font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:600 }
.modal h3{ font-size:23px; margin:10px 0 24px; letter-spacing:-.01em }
.field{ display:block; margin-bottom:16px }
.field > span{ display:flex; align-items:baseline; gap:8px; font-size:13px; color:var(--muted); margin-bottom:8px; font-weight:500 }
.field > span em{ font-style:normal; font-size:11.5px; color:var(--dim) }
.input-wrap{
  display:flex; align-items:stretch; background:#0c0c0e;
  border:1px solid var(--line-2); border-radius:13px; overflow:hidden;
  transition:border-color .25s, box-shadow .25s;
}
.input-wrap:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3.5px var(--accent-soft) }
.input-wrap i{ font-style:normal; display:grid; place-items:center; width:42px; color:var(--dim); font-weight:600; border-right:1px solid var(--line); font-size:15px }
.input-wrap input{
  flex:1; min-width:0; height:50px; padding:0 15px; background:transparent; border:none; outline:none;
  color:var(--text); font-size:15px;
}
.input-wrap input::placeholder{ color:#52525c }
.field.error .input-wrap{ border-color:#f87171; animation:shake .4s }
.err-msg{ display:none; font-style:normal; font-size:12px; color:#f87171; margin-top:7px }
.field.error .err-msg{ display:block }
@keyframes shake{ 0%,100%{ transform:translateX(0) } 25%{ transform:translateX(-6px) } 75%{ transform:translateX(6px) } }

.m-summary{ background:#0c0c0e; border:1px solid var(--line); border-radius:15px; padding:6px 16px; margin:22px 0 }
.m-summary .row{ display:flex; align-items:center; gap:12px; padding:12.5px 0; font-size:13.5px; border-bottom:1px solid rgba(255,255,255,.055) }
.m-summary .row:last-child{ border-bottom:none }
.m-summary .row > span:first-child{ color:var(--dim) }
.m-summary b{ margin-left:auto; font-weight:600; text-align:right; font-size:13.5px }
.m-summary .total b{ font-size:19px; font-variant-numeric:tabular-nums }
.mono{ font-family:"Space Grotesk",monospace; letter-spacing:.04em }
.soon-tag{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--amber); border:1px solid rgba(244,183,64,.32); background:rgba(244,183,64,.08); padding:4px 10px; border-radius:999px; margin-left:auto }
.m-summary .total{ flex-wrap:wrap; row-gap:6px }
.m-summary .total .soon-tag{ margin-left:0 }
.btn-pay{ width:100% }
.btn-pay .spinner{
  width:17px; height:17px; border-radius:50%; flex-shrink:0;
  border:2px solid rgba(255,255,255,.3); border-top-color:#fff;
  animation:spin .7s linear infinite; display:none;
}
.btn-pay.loading{ pointer-events:none; filter:saturate(.75) }
.btn-pay.loading .spinner{ display:inline-block }
.btn-pay.loading .btn-label{ opacity:.85 }
@keyframes spin{ to{ transform:rotate(360deg) } }
.m-fine{ font-size:12px; color:var(--dim); text-align:center; margin-top:14px; line-height:1.7 }

/* 下单结果态 */
#mResult h3{ margin-top:18px }
.status-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 16px; border-radius:999px;
  background:rgba(244,183,64,.08); border:1px solid rgba(244,183,64,.32);
  color:var(--amber); font-size:13px; font-weight:600; letter-spacing:.02em;
}
.status-badge .pulse{ width:8px; height:8px; border-radius:50%; background:var(--amber); position:relative; flex-shrink:0 }
.status-badge .pulse::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--amber); animation:ripple 2s ease-out infinite }
.result-sub{ font-size:13.5px; color:var(--muted); line-height:1.85; margin:-6px 0 20px }
#mResult .btn{ width:100%; margin-top:12px }
#mResult .btn-ghost{ margin-top:0; border-color:transparent; color:var(--dim) }
#mResult .btn-ghost:hover{ color:var(--text) }

/* ---------- TOAST ---------- */
.toast{
  position:fixed; left:50%; bottom:30px; z-index:200;
  display:flex; align-items:center; gap:9px;
  background:#1c1c22; border:1px solid var(--line-2); border-radius:999px;
  padding:13px 22px; font-size:13.5px; font-weight:500;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.8);
  transform:translateX(-50%) translateY(18px); opacity:0; visibility:hidden;
  transition:transform .45s var(--ease), opacity .35s, visibility 0s .45s;
  white-space:nowrap;
}
.toast.show{ transform:translateX(-50%) translateY(0); opacity:1; visibility:visible; transition-delay:0s }
.toast .ic{ color:var(--accent); font-size:16px }

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .hero{ padding-block:clamp(104px,14vh,140px) 64px }
  .hero-grid{ grid-template-columns:1fr; gap:56px }
  .hero-visual{ justify-content:center }
  .xcard-wrap{ width:min(420px,92%) }
  .chip-a{ left:-2%; top:-16px }
  .chip-b{ right:-2%; bottom:34% }
  .chip-c{ left:6%; bottom:-16px }
  .feats{ grid-template-columns:1fr 1fr }
  .steps{ grid-template-columns:1fr; gap:12px }
  .plans{ grid-template-columns:1fr; max-width:520px }
  .plans > div:last-child{ margin-top:0 }
  .nav-links{ display:none }
  .nav-in{ justify-content:space-between }
}
@media (max-width:560px){
  html{ scroll-padding-top:84px }
  .nav-in{ height:64px }
  .chip-c{ display:none }
  .hero-stats{ gap:24px }
  .stat-n{ font-size:23px }
  .feats{ grid-template-columns:1fr 1fr; gap:12px }
  .feat{ padding:22px 18px }
  .hero-cta .btn{ flex:1; min-width:150px }
  .cta h2{ font-size:clamp(27px,7.4vw,34px) }
  .input-wrap input{ font-size:16px } /* 防止 iOS 聚焦缩放 */
  .modal-wrap{ padding:0; place-items:end stretch }
  .modal{
    width:100%; max-height:92svh; border-radius:26px 26px 0 0;
    border-left:none; border-right:none; border-bottom:none;
    padding:30px 22px calc(26px + env(safe-area-inset-bottom));
    transform:translateY(60px); opacity:1;
  }
  .modal-wrap.open .modal{ transform:none }
  .toast{ width:calc(100% - 40px); justify-content:center; white-space:normal }
  .foot-top{ flex-direction:column; align-items:flex-start }
  .foot-meta{ flex-direction:column; gap:6px }
}

/* ---------- 动效减弱 ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
  .js .reveal{ opacity:1; transform:none }
  .marquee-inner{ animation:none }
}