/* ==========================================================
   模块产品页样式（html/store/*.html）
   依赖 css/style.css —— 沿用 Win11 Fluent 风格与品牌蓝变量
   ========================================================== */

/* ---------- 面包屑 ---------- */
.crumb{
  font-size:13.5px; color:var(--ink-3); padding:14px 0 0;
}
.crumb a{ color:var(--ink-2); }
.crumb a:hover{ color:var(--brand-deep); }
.crumb span{ color:var(--brand-deep); font-weight:600; }

/* ---------- Hero ---------- */
.mhero{ padding:34px 0 10px; }
.mhero-in{ display:flex; gap:40px; flex-wrap:wrap; align-items:flex-start; }
.mhero-txt{ flex:1 1 480px; min-width:290px; }
.mhero h1{ font-size:36px; line-height:1.25; font-weight:700; margin:16px 0 10px; }
.mpos{ font-size:17px; color:var(--brand-deep); font-weight:600; margin-bottom:12px; }
.mhero .lead{ font-size:15.5px; color:var(--ink-2); max-width:600px; }
.mhero-btns{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; }

/* 价格卡 */
.pricecard{
  flex:0 1 300px; min-width:260px;
  background:var(--card); backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.7); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow);
}
.pricecard h4{ font-size:14px; color:var(--ink-3); font-weight:600; margin-bottom:14px; }
.pc-price{
  display:flex; align-items:baseline; gap:8px; padding:10px 0;
  border-bottom:1px dashed var(--line);
}
.pc-price:last-of-type{ border-bottom:none; }
.pc-price b{ font-size:28px; color:var(--brand-deep); font-weight:700; }
.pc-price span{ font-size:13px; color:var(--ink-3); }
.pc-price.free b{ color:#1e8e3e; }
.pc-link{
  display:inline-block; margin-top:14px; font-size:13.5px;
  color:var(--brand-deep); font-weight:600;
}
.pc-link:hover{ text-decoration:underline; }

/* ---------- 痛点 ---------- */
.pain-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.pain{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--card); backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.7); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow);
}
.pain .pn{
  flex:none; width:24px; height:24px; border-radius:7px; font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  background:rgba(61,166,247,.14); color:var(--brand-deep);
}
.pain p{ font-size:14.5px; color:var(--ink-2); }

/* ---------- 核心功能 ---------- */
.func-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.func{
  background:var(--card); backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.7); border-radius:var(--radius);
  padding:22px 20px; box-shadow:var(--shadow);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.func:hover{ transform:translateY(-5px); box-shadow:var(--shadow-hover); border-color:rgba(61,166,247,.45); }
.func h4{ font-size:16px; font-weight:650; margin-bottom:8px; position:relative; padding-left:14px; }
.func h4::before{
  content:""; position:absolute; left:0; top:8px; width:5px; height:14px; border-radius:3px;
  background:linear-gradient(180deg,var(--brand),var(--brand-deep));
}
.func p{ font-size:14px; color:var(--ink-2); }

/* ---------- 适用场景 ---------- */
.scene-box{
  background:var(--card); backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.7); border-radius:var(--radius);
  padding:28px 26px; box-shadow:var(--shadow); text-align:center;
}
.scene-tags{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:16px; }
.stag{
  padding:7px 18px; border-radius:999px; font-size:14px; font-weight:600;
  background:var(--brand-light); color:var(--brand-deep); border:1px solid rgba(61,166,247,.25);
}
.scene-desc{ font-size:14.5px; color:var(--ink-2); }

/* ---------- 相关模块 ---------- */
.rel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.rel{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--card); backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.7); border-radius:var(--radius);
  padding:20px 22px; box-shadow:var(--shadow);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.rel:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:rgba(61,166,247,.45); }
.rel h4{ font-size:16px; font-weight:650; }
.rel span{ font-size:13.5px; color:var(--brand-deep); font-weight:600; white-space:nowrap; }

/* ---------- FAQ 折叠 ---------- */
.faq-list{ max-width:900px; margin:0 auto; }
.faq{
  background:var(--card); backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.7); border-radius:var(--radius);
  margin-bottom:12px; box-shadow:var(--shadow); overflow:hidden;
}
.faq .q{
  display:flex; align-items:center; gap:12px; padding:16px 20px; cursor:pointer; user-select:none;
}
.faq .q span{
  flex:none; width:22px; height:22px; border-radius:6px; font-size:12.5px; font-weight:700;
  background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center;
}
.faq .q h4{ font-size:15.5px; font-weight:600; flex:1; }
.faq .q i{
  flex:none; width:9px; height:9px; border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg); transition:transform .25s; margin-right:4px;
}
.faq.open .q i{ transform:rotate(-135deg); }
.faq .a{ display:none; padding:0 20px 18px 54px; }
.faq .a p{ font-size:14.5px; color:var(--ink-2); }
.faq.open .a{ display:block; }

/* ---------- 响应式 ---------- */
@media (max-width:1000px){
  .func-grid,.rel-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  .mhero h1{ font-size:27px; }
  .pain-grid,.func-grid,.rel-grid{ grid-template-columns:1fr; }
  .pricecard{ flex:1 1 100%; }
  .faq .a{ padding-left:20px; }
}