/* ============================================================
   元健康悦 · 明亮紫罗兰主题（body.purple 作用域，仅 questionnaire.html 引用）
   色板（整体提亮版）：
   主紫 #8B5CF6 · 亮紫 #A98CFF · 浅紫 #D8CCFF · 深紫罗兰 #3B2678
   引入顺序：site.css 之后加载，覆盖赤金墨默认值
   ============================================================ */

/* ---- 横幅：紫罗兰旗面 ---- */
.purple .band .flag-base {
  background:
    radial-gradient(92% 72% at 16% 6%, rgba(220,208,255,.34) 0%, rgba(220,208,255,0) 58%),
    linear-gradient(180deg, #A98CFF 0%, #8B5CF6 44%, #6D3EE8 100%);
}
.purple .band .flag-cloth {
  background: linear-gradient(103deg,
    #B79EFF 0%, #8B5CF6 9%, #7048E0 16%, #A98CFF 24%, #8B5CF6 33%, #6A40DC 42%,
    #B79EFF 52%, #8B5CF6 62%, #7048E0 71%, #A98CFF 80%, #8B5CF6 89%, #6A3ED8 100%);
}
.purple .band .flag-cloth.b {
  background: linear-gradient(64deg,
    #6A40DC 0%, #A98CFF 22%, #7A50EC 45%, #A98CFF 68%, #683CD4 88%, #8B5CF6 100%);
}
.purple .band .shade {
  background:
    radial-gradient(52% 96% at 4% 54%, rgba(30,12,72,.42) 0%, rgba(30,12,72,0) 70%),
    linear-gradient(180deg, rgba(30,12,72,.26) 0%, rgba(30,12,72,0) 132px);
}
.purple .band .fade-ink { background: linear-gradient(to bottom, rgba(59,38,120,0) 0%, #3B2678 100%); }
.purple .band .crumb { color: rgba(240,234,255,.9); }
.purple .band .band-facts i { background: #D8CCFF; }
.purple .band .star.glow { filter: drop-shadow(0 0 14px rgba(216,204,255,.62)); }

/* ---- 导航与 Logo（紫盘白星白字） ---- */
.purple .logo { background: rgba(38,20,84,.42); box-shadow: inset 0 0 0 1px rgba(255,255,255,.34); }
.purple .logo .wm {
  background: linear-gradient(168deg, #FFFFFF 0%, #F5F0FF 40%, #D8CCFF 68%, #FFFFFF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 3px rgba(16,4,50,.45)) drop-shadow(0 0 12px rgba(255,255,255,.2));
}
.purple .logo .wm::after {
  background: linear-gradient(108deg,
    rgba(255,255,255,0) 34%, rgba(228,216,255,.78) 47%, rgba(255,255,255,.10) 56%, rgba(255,255,255,0) 68%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.purple .logo .wm-sub { color: rgba(255,255,255,.7); }
.purple .nav .links a { color: rgba(255,255,255,.86); }
.purple .nav .links a:hover { color: #D8CCFF; transform: translateY(-1.5px); }
.purple .nav .links a.on { color: #FFFFFF; }
.purple .nav .links a::after {
  background: linear-gradient(90deg, #EBE2FF, #C4AEFF);
  box-shadow: 0 0 10px rgba(216,204,255,.7);
}
.purple .nav .links a::before {
  background: linear-gradient(90deg, rgba(235,226,255,0), #C4AEFF 32%, #EBE2FF 58%, rgba(235,226,255,0));
  box-shadow: 0 0 12px rgba(216,204,255,.8);
}
.purple .nav-fixed {
  background: rgba(58,36,120,.92);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.2), 0 12px 32px rgba(28,8,70,.4);
}

/* ---- 深紫罗兰板块（原「墨」） ---- */
.purple .s-ink { background: #3B2678; }
.purple .s-ink .head h3 { color: #F8F5FF; }
.purple .s-ink .head p { color: #CBBDEB; }
.purple .s-ink .sub-h h4 { color: #D8CCFF; }
.purple .s-ink .sub-h p { color: #CBBDEB; }
.purple .kicker { color: #D8CCFF; }
.purple .kicker::before { background: linear-gradient(90deg, rgba(216,204,255,.2), #D8CCFF); }
.purple .s-red .kicker { color: #F5F0FF; }
.purple .feat { background: #4A3291; }
.purple .feat h5 { color: #D8CCFF; }
.purple .feat h5 svg { stroke: #D8CCFF; }
.purple .feat p { color: #DCD2F2; }
.purple .card { background: #4A3291; }
.purple .card h4 { color: #D8CCFF; }
.purple .card p { color: #DCD2F2; }
.purple .card p b { color: #EFE8FF; }
.purple .stat { background: #4A3291; }
.purple .stat b { color: #D8CCFF; }
.purple .stat span { color: #CBBDEB; }
.purple .tbl { background: #4A3291; }
.purple .tbl th { background: rgba(255,255,255,.14); color: #E8DEFF; }
.purple .tbl td { color: #DCD2F2; border-top-color: rgba(255,255,255,.14); }
.purple .tbl td:first-child { color: #F8F5FF; }
.purple .tags span { color: #E8DEFF; border-color: rgba(216,204,255,.5); background: rgba(216,204,255,.1); }
.purple .pull { background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(216,204,255,.3); border-left-color: #D8CCFF; }
.purple .pull p { color: #F8F5FF; }
.purple .pull p em { color: #D8CCFF; }
.purple .demo-note { color: rgba(203,189,235,.9); }
.purple .wecom-strip { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(216,204,255,.3); }
.purple .wecom-brand b { color: #F8F5FF; }
.purple .wecom-strip > span { color: #D8CCFF; }
.purple .wecom-strip p { color: rgba(255,255,255,.82); }
.purple .wecom-strip p i { background: #D8CCFF; }

/* ---- 主紫板块（原「红」） ---- */
.purple .s-red { background: #8B5CF6; }
.purple .s-red::before {
  background:
    radial-gradient(92% 58% at 50% -4%, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(130% 88% at 50% 116%, rgba(74,38,160,.4) 0%, rgba(74,38,160,0) 60%);
}
.purple .s-red .head h3 { color: #FFFFFF; }
.purple .s-red .head p { color: rgba(255,255,255,.9); }
.purple .s-red .feat { background: rgba(74,38,160,.34); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); }
.purple .s-red .feat h5 { color: #FFFFFF; }
.purple .s-red .feat h5 svg { stroke: #EBE2FF; }
.purple .s-red .feat p { color: rgba(255,255,255,.88); }
.purple .s-red .card { background: rgba(74,38,160,.34); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); }
.purple .s-red .card h4 { color: #FFFFFF; }
.purple .s-red .card p { color: rgba(255,255,255,.88); }
.purple .s-red .card p b { color: #F5F0FF; }
.purple .s-red .tags span { color: #FFFFFF; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.14); }
.purple .s-red .stat { background: rgba(74,38,160,.34); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); }
.purple .s-red .stat b { color: #FFFFFF; }
.purple .s-red .stat span { color: rgba(255,255,255,.84); }

/* ---- 问卷示例墙 ---- */
.purple .shot { background: #4A3291; }
.purple .shot h5 { color: #D8CCFF; }
.purple .shot p { color: #CBBDEB; }
.purple .shot .pic { background: #FFFFFF; }

/* ---- 痛点板块：左配图 + 右 3 行 × 2 列 ---- */
.purple .pain-wrap { display: grid; grid-template-columns: 400px 1fr; gap: 40px; margin-top: 44px; align-items: stretch; }
.purple .pain-fig { margin: 0; border-radius: 18px; overflow: hidden; position: relative;
  background: #4A3291; box-shadow: 0 24px 56px rgba(40,16,96,.4); }
.purple .pain-fig img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top; }
.purple .pain-fig figcaption { position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 18px 14px; font-size: 13.5px; line-height: 1.6;
  color: rgba(255,255,255,.94);
  background: linear-gradient(180deg, rgba(59,38,120,0) 0%, rgba(59,38,120,.84) 62%, rgba(59,38,120,.94) 100%); }
.purple .pain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.purple .pain-grid .feat { padding: 15px 19px 13px; display: flex; flex-direction: column; }
.purple .pain-grid .feat h5 { font-size: 16.5px; display: flex; align-items: center; gap: 9px; line-height: 1.3; }
.purple .pain-grid .no { flex: none; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: #FFD9C4; background: rgba(255,90,60,.28); box-shadow: inset 0 0 0 1px rgba(255,180,150,.6);
  border-radius: 6px; padding: 1px 6px; }
.purple .pain-grid .feat p { font-size: 13.5px; margin-top: 6px; line-height: 1.65; }
.purple .pain-grid .cost { display: block; margin-top: auto; padding-top: 8px;
  font-size: 13.5px; font-weight: 700; color: #FFC7A8; letter-spacing: .01em; }
.purple .pain-grid .cost::before { content: "⚠ "; font-size: 12px; }
.purple .pain-grid .feat:hover { box-shadow: inset 0 0 0 1px rgba(255,180,150,.6); }

/* ---- 页脚 ---- */
.purple .foot { background: #2C1B60; }
.purple .foot .desc { color: rgba(255,255,255,.66); }
.purple .foot-legal { border-top-color: rgba(255,255,255,.16); }
.purple .foot-legal .copy a { color: #D8CCFF; }
.purple .foot-legal .copy a:hover { color: #EBE2FF; }
.purple .foot-qr .qr-box { color: #5A3AC0; }