/* ============================================================
   PC storefront visual refresh — scoped exclusively to .pc-body.
   Updated responsive navigation, clear type hierarchy, polished surfaces,
   modern storefront cards and accessible focus/reduced-motion states.
   ============================================================ */
body.pc-body{
  --pc-primary:#315fe8;--pc-primary-2:#5685ff;--pc-primary-3:#87a9ff;
  --pc-grad:linear-gradient(130deg,#315fe8 0%,#5685ff 57%,#87a9ff 100%);
  --pc-bg:#f5f7fb;--pc-card:#fff;--pc-text:#17233c;--pc-muted:#6f7c91;
  --pc-line:#e5eaf2;--pc-radius:16px;
  --pc-shadow:0 10px 32px rgba(25,49,91,.07);
  --pc-shadow-lg:0 22px 54px rgba(32,71,148,.14);
  color:var(--pc-text)
}
/* 整页背景：淡蓝渐变自动流动（色相保持在主蓝同一色系内缓慢位移）。
   必须挂在 <html> 上：模板自带的 style.css 会写 body.pc-body{background:...}，
   挂在 body 上会被模板那一整条背景声明覆盖掉（连 background-size 一起重置），
   动画就变成空转、页面上看不出任何流动。放在根元素上模板再怎么写也覆盖不到。
   用 background-attachment:fixed 把渐变锚定在视口上，否则页面很长时可视区只截到渐变的一小块、
   动画几乎看不见。所有区块背景都改成半透明或透明，让这层流动渐变能一路透出来。 */
html{
  background:linear-gradient(120deg,#edf3ff 0%,#e1eaff 18%,#f4f7ff 38%,#e6efff 58%,#eef4ff 78%,#f6f9ff 100%);
  background-size:220% 220%;
  background-attachment:fixed;
  animation:pcBgFlow 24s ease-in-out infinite
}
@keyframes pcBgFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
/* 用户在系统里要求降低动效时停掉整页背景漂移，只留静态渐变（颜色不变，仅不流动） */
@media (prefers-reduced-motion:reduce){
  html{animation:none}
  .pc-body .pc-header{transition:none}
  .pc-body .pc-btn,.pc-body .pc-nav-item{transition:none}
}
/* 顶部栏：下边框恒为透明（保留 1px 占位避免高度跳动），因此任何页面都不会出现分割线；
   停顶部时透明、与整页流动渐变无缝，下滑后白底 + 柔和阴影。状态由公共头部里的脚本切换。

   「透明」必须是默认状态，不能等脚本加上 .is-top 才透明：
   脚本在 <head> 之后才执行，如果默认是白底，浏览器会先把白底那一帧画出来，
   之后再淡出成透明——切页时看到的就是顶部闪一下白。
   所以：默认透明（html.pc-js 由头部最早的内联脚本标记，保证首帧就命中），
   白底只留给「没有 JS」和「已下滑（.is-stuck）」两种情形。 */
.pc-body .pc-header{background:#fff;border-bottom-color:transparent;box-shadow:none;
  transition:background .25s ease,box-shadow .25s ease}
html.pc-js .pc-body .pc-header{background:transparent;box-shadow:none}
html.pc-scrolled .pc-body .pc-header{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.pc-body .pc-header.is-top{background:transparent;box-shadow:none}
html.pc-js .pc-body .pc-header.is-stuck{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.pc-body .pc-logo-mark{border-radius:12px;box-shadow:0 8px 18px rgba(49,95,232,.22)}
.pc-body .pc-logo-name{color:#182640;letter-spacing:-.02em}
/* 导航项 hover：只把文字换成主蓝色，0.25s 过渡；不加底色、不加下划线，保持简洁 */
.pc-body .pc-nav-item{border-radius:10px;transition:color .25s ease}
.pc-body .pc-nav-item:hover{color:var(--pc-primary);background:transparent;transform:none}
.pc-body .pc-nav-item.on::after{height:2px;bottom:1px}
/* 按钮：全部 PC 前台模板统一成药丸（含窄屏覆盖） */
.pc-body .pc-btn{border-radius:999px;transition:transform .25s ease,box-shadow .25s ease,filter .25s ease,background .25s ease}
.pc-body .pc-btn-primary{background:var(--pc-grad);box-shadow:0 7px 18px rgba(49,95,232,.22)}
.pc-body .pc-btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(49,95,232,.3)}
.pc-body .pc-btn-ghost{border-color:#e1e7f2;color:#344e7e}
/* 右上角按钮（我要开店 / 商户登录）：轻微放大 + 亮度小幅提升 */
.pc-body .pc-header-actions .pc-btn{transform-origin:center}
.pc-body .pc-header-actions .pc-btn:hover{transform:scale(1.03);filter:brightness(1.06)}
.pc-body .pc-header-actions .pc-btn-primary:hover{transform:scale(1.03);filter:brightness(1.06);box-shadow:0 12px 26px rgba(49,95,232,.34)}
.pc-body .pc-hero{overflow:hidden;background:radial-gradient(ellipse at 84% 40%,rgba(116,155,255,.16),transparent 32%),linear-gradient(180deg,rgba(237,243,255,.86) 0%,rgba(247,249,253,.72) 73%,rgba(245,247,251,.5) 100%)}
.pc-body .pc-hero::before{background:radial-gradient(circle,rgba(74,120,239,.13),transparent 68%)}
.pc-body .pc-hero::after{background:radial-gradient(circle,rgba(129,159,228,.11),transparent 65%)}
.pc-body .pc-hero-copy h1{color:#17233c;letter-spacing:-.035em}
.pc-body .pc-hero-copy .pc-hero-sub{color:#66748a}
.pc-body .pc-hero-copy .pc-btn-lg{border-radius:999px}
.pc-body .pc-hero-shot{border-radius:19px;box-shadow:0 14px 34px rgba(30,58,108,.13)}
.pc-body .pc-hero-shot-cap{border:1px solid rgba(255,255,255,.75);border-radius:11px}
.pc-body .pc-section-head h2{color:#17233c;letter-spacing:-.025em}
.pc-body .pc-card{border-color:var(--pc-line);border-radius:var(--pc-radius);box-shadow:var(--pc-shadow)}
.pc-body .pc-why-card{border-color:#e7ebf3;border-radius:15px;background:linear-gradient(150deg,#fff 0%,#f7f9fd 100%);box-shadow:0 8px 25px rgba(25,49,91,.055)}
.pc-body .pc-why-card:nth-child(n){background:linear-gradient(150deg,#fff 0%,#f7f9fd 100%)}
.pc-body .pc-why-card:hover{box-shadow:var(--pc-shadow-lg)}
.pc-body .pc-why-icon{border-radius:12px}
.pc-body .pc-step{border:1px solid #e7ebf3;border-radius:13px;box-shadow:0 7px 22px rgba(25,49,91,.045)}
.pc-body .pc-footer{background:#14213c;color:#b7c3d7}
.pc-body .pc-footer-title{color:#fff}
.pc-body .pc-footer-col a{color:#bdc9dc}
.pc-body .pc-input,.pc-body .pc-select,.pc-body .pc-textarea{border-color:#e1e7f0!important;border-radius:10px!important;box-shadow:0 2px 8px rgba(23,35,60,.025)!important}
.pc-body .pc-input:focus,.pc-body .pc-select:focus,.pc-body .pc-textarea:focus{border-color:#8aa9ff!important;box-shadow:0 0 0 3px rgba(49,95,232,.1)!important;outline:0}
@media(max-width:960px){
  .pc-body .pc-header-inner{padding:12px 0}
  .pc-body .pc-nav{scrollbar-width:none}
  .pc-body .pc-nav::-webkit-scrollbar{display:none}
  .pc-body .pc-hero{overflow:hidden}
  .pc-body .pc-hero-inner{padding-top:30px}
  .pc-body .pc-hero-visual{min-height:360px}
  .pc-body .pc-hero-float{height:360px}
  .pc-body .pc-hero-copy .pc-btn-lg{border-radius:999px}
}
@media(max-width:640px){
  .pc-body .pc-container{max-width:calc(100% - 30px)}
  .pc-body .pc-header-inner{gap:9px}
  .pc-body .pc-logo-mark,.pc-body .pc-logo-img{width:35px;height:35px;border-radius:10px}
  .pc-body .pc-logo-name{font-size:16px}
  .pc-body .pc-header-actions{gap:7px}
  .pc-body .pc-header-actions .pc-btn{height:35px;padding:0 12px;border-radius:999px;font-size:12px}
  .pc-body .pc-nav{gap:2px}
  .pc-body .pc-nav-item{padding:8px 10px;font-size:13px;white-space:nowrap}
  .pc-body .pc-nav-item.on::after{left:10px;right:10px}
  .pc-body .pc-hero-inner{gap:10px;padding-top:25px}
  .pc-body .pc-hero-copy h1{font-size:30px;line-height:1.38}
  .pc-body .pc-hero-copy .pc-hero-sub{font-size:14px;line-height:1.8}
  .pc-body .pc-hero-copy .pc-btn-lg{height:45px;padding:0 22px;font-size:14px}
  .pc-body .pc-hero-visual{min-height:300px;margin-bottom:-28px}
  .pc-body .pc-hero-float{height:300px}
  .pc-body .pc-hero-shot{border-radius:13px}
  .pc-body .pc-hero-shot img{height:138px}
  .pc-body .pc-after-hero{padding-top:18px}
  .pc-body .pc-section{padding-top:30px;padding-bottom:24px}
  .pc-body .pc-section-head{margin-bottom:20px}
  .pc-body .pc-section-head h2{font-size:21px;line-height:1.4}
  .pc-body .pc-section-head p{font-size:13px}
  .pc-body .pc-why-grid{gap:10px}
  .pc-body .pc-why-card{min-height:0;padding:16px 13px;border-radius:13px}
  .pc-body .pc-why-card h3{font-size:14px}
  .pc-body .pc-why-card ul{font-size:12px}
  .pc-body .pc-step{border-radius:11px}
  .pc-body .pc-footer .pc-container{padding:32px 0 22px}
  .pc-body .pc-footer-cols{gap:18px}
}
@media(prefers-reduced-motion:reduce){
  /* body 自身的背景动画不在 `.pc-body *` 范围内，需要单独关掉 */
  body.pc-body{animation:none!important}
  .pc-body *, .pc-body *::before, .pc-body *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}