/* ============================================================
   趣打卡 FunDaka — 子页面共用样式（功能/价格/案例/FAQ/关于）
   依赖 style.css 的变量与按钮组件
   ============================================================ */

/* ---------- 子页头部 ---------- */
.sub-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 249, 243, 0.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.sub-header .header-inner { display: flex; align-items: center; gap: 24px; height: 66px; }
.sub-nav { display: flex; gap: 2px; margin-left: 8px; flex: 1; }
.sub-nav a {
  padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 600;
  color: var(--ink-2); transition: all 0.18s ease;
}
.sub-nav a:hover { color: var(--primary); background: var(--primary-soft); }
.sub-nav a.active { color: var(--primary); background: var(--primary-soft); }
.sub-header .header-actions { display: flex; gap: 10px; align-items: center; }

/* ---------- 子页 Hero ---------- */
.sub-hero {
  position: relative; overflow: hidden; padding: 84px 0 64px;
  background:
    radial-gradient(560px 380px at 14% 0%, rgba(255, 138, 80, 0.16), transparent 60%),
    radial-gradient(480px 380px at 88% 100%, rgba(155, 108, 240, 0.12), transparent 60%),
    var(--paper);
  text-align: center;
}
.sub-hero .wrap { position: relative; }
.sub-hero h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -0.015em; }
.sub-hero .sub { max-width: 640px; margin: 14px auto 0; color: var(--muted); font-size: 15px; }
.sub-hero .crumbs { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-bottom: 16px; }
.sub-hero .crumbs a { color: var(--primary); }
.sub-hero .crumbs a:hover { text-decoration: underline; }

/* ---------- 子页主体 ---------- */
.sub-section { padding: 72px 0; scroll-margin-top: 74px; }
.sub-section.alt { background: var(--paper-2); }
.sub-sec-head { text-align: center; max-width: 700px; margin: 0 auto 44px; }
.sub-sec-head h2 { font-size: clamp(24px, 3.2vw, 32px); font-weight: 800; }
.sub-sec-head .sub { margin-top: 12px; color: var(--muted); font-size: 14.5px; }

/* 迷你图标卡 */
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mini-card {
  background: #fff; border-radius: var(--radius); padding: 26px 24px;
  box-shadow: var(--ring); transition: all 0.22s ease;
}
.mini-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.mini-card .m-icon {
  width: 46px; height: 46px; border-radius: 14px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.mini-card .m-icon svg { width: 21px; height: 21px; }
.mini-card h3 { font-size: 16px; font-weight: 800; margin-bottom: 7px; }
.mini-card p { font-size: 13px; color: var(--muted); line-height: 1.75; }

/* 说明条 */
.explain-card {
  max-width: 860px; margin: 44px auto 0; background: #fff;
  border-radius: var(--radius-lg); box-shadow: var(--ring); padding: 28px 32px;
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start;
}
.explain-card .e-emoji { font-size: 38px; }
.explain-card h3 { font-size: 16.5px; font-weight: 800; margin-bottom: 8px; }
.explain-card p { font-size: 13.5px; color: var(--muted); line-height: 1.85; }
.explain-card b { color: var(--ink-2); }

/* 价格表 */
.pricing-table { max-width: 860px; margin: 0 auto; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--ring); overflow: hidden; }
.pricing-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pricing-table th {
  text-align: left; background: var(--paper-2); padding: 14px 24px;
  font-size: 12.5px; color: var(--muted); font-weight: 700;
}
.pricing-table td { padding: 13px 24px; border-top: 1px solid var(--paper-2); }
.pricing-table td b { color: var(--primary); }
.pricing-table .t-note { font-size: 12px; color: var(--muted); padding: 12px 24px; border-top: 1px solid var(--paper-2); background: var(--paper); }

/* 内嵌计价器 */
.calc-embed {
  max-width: 640px; margin: 0 auto; background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 30px 32px 26px;
}
.calc-embed h3 { font-size: 18px; font-weight: 800; text-align: center; }
.calc-embed .ce-sub { text-align: center; font-size: 12.5px; color: var(--muted); margin: 6px 0 22px; }
.calc-embed .calc-field { margin-bottom: 18px; }
.calc-embed .calc-field label { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 700; margin-bottom: 8px; }
.calc-embed .calc-field label b { color: var(--primary); }
.calc-embed input[type="range"] {
  width: 100%; accent-color: var(--primary); cursor: pointer;
  /* 22px 在手机上太细、滑块不好拖 —— 价格计算器是转化关键页面，加高到 36px
     并把原生滑块放大。触摸目标至少 36px 才好点。 */
  height: 36px; margin: 0;
}
@media (max-width: 640px) {
  .calc-embed input[type="range"] { height: 44px; }
  .calc-embed input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; }
}
.calc-embed input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; }
.calc-embed .calc-lines { background: var(--paper-2); border-radius: 14px; padding: 14px 18px; font-size: 13.5px; }
.calc-embed .calc-line { display: flex; justify-content: space-between; padding: 5px 0; }
.calc-embed .calc-line.disc { color: #1E9E63; }
.calc-embed .calc-total { display: flex; justify-content: space-between; align-items: center; font-size: 14.5px; font-weight: 800; padding: 16px 2px 20px; }
.calc-embed .calc-total b { font-size: 30px; color: var(--primary); }

/* 案例筛选 */
.case-filters { display: flex; justify-content: center; gap: 10px; margin-bottom: 34px; flex-wrap: wrap; }
.case-filters button {
  padding: 9px 22px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  background: #fff; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line);
  transition: all 0.2s;
}
.case-filters button.active { background: var(--primary-grad); color: #fff; box-shadow: 0 8px 20px rgba(255, 90, 31, 0.3); }
.case-card.c-hidden { display: none; }

/* 案例详情弹层 */
.case-detail-mask {
  position: fixed; inset: 0; z-index: 90; background: rgba(20, 16, 30, 0.6);
  display: none; align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(3px);
}
.case-detail-mask.show { display: flex; }
.case-detail {
  width: 100%; max-width: 620px; max-height: 86vh; overflow-y: auto;
  background: #fff; border-radius: 24px; padding: 30px 30px 26px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45); animation: calcIn 0.25s ease;
}
.case-detail h3 { font-size: 20px; font-weight: 800; }
.case-detail .cd-client { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.case-detail .cd-block { margin-top: 18px; }
.case-detail .cd-block h4 { font-size: 13.5px; font-weight: 800; margin-bottom: 8px; color: var(--primary); }
.case-detail .cd-block p { font-size: 13.5px; color: var(--ink-2); line-height: 1.8; }
.case-detail .cd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.case-detail .cd-stat { background: var(--paper-2); border-radius: 12px; padding: 12px; text-align: center; }
.case-detail .cd-stat b { display: block; font-size: 19px; font-weight: 800; color: var(--primary); }
.case-detail .cd-stat span { font-size: 11px; color: var(--muted); font-weight: 600; }
.case-detail .modal-actions { display: flex; gap: 10px; margin-top: 24px; }
.case-detail .modal-actions .btn { flex: 1; }
.case-detail .cd-close {
  float: right; width: 34px; height: 34px; border-radius: 10px;
  background: var(--paper-2); font-size: 16px; font-weight: 800; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.case-detail .cd-close:hover { color: var(--primary); }

/* FAQ 分组 */
.faq-group { max-width: 760px; margin: 0 auto 18px; }
.faq-group .fg-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; margin: 34px 0 12px; }
.faq-group .fg-title .g-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 5px var(--primary-soft); }

/* 关于页 */
.about-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.about-value {
  background: #fff; border-radius: var(--radius); padding: 28px 26px;
  box-shadow: var(--ring); text-align: center;
}
.about-value .v-emoji { font-size: 40px; margin-bottom: 14px; }
.about-value h3 { font-size: 16.5px; font-weight: 800; margin-bottom: 8px; }
.about-value p { font-size: 13px; color: var(--muted); line-height: 1.75; }
.about-contact { max-width: 860px; margin: 0 auto; }
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.contact-item {
  background: #fff; border-radius: var(--radius); padding: 24px;
  box-shadow: var(--ring); text-align: center;
}
.contact-item .c-emoji { font-size: 30px; margin-bottom: 10px; }
.contact-item h4 { font-size: 14px; font-weight: 800; }
.contact-item p { font-size: 13px; color: var(--muted); margin-top: 6px; word-break: break-all; }
.legal-block {
  max-width: 860px; margin: 44px auto 0; background: #fff; border-radius: var(--radius);
  box-shadow: var(--ring); padding: 26px 30px; font-size: 12.5px; color: var(--muted); line-height: 2;
}
.legal-block h3 { font-size: 14px; color: var(--ink-2); margin-bottom: 6px; }

/* ---------- 子页页脚 ---------- */
.sub-footer { background: var(--dark); color: rgba(255, 255, 255, 0.6); padding: 44px 0 30px; }
.sub-footer .f-inner {
  display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: center; justify-content: space-between;
  padding-bottom: 26px; border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.sub-footer .links { display: flex; flex-wrap: wrap; gap: 20px; }
.sub-footer .links a { font-size: 13px; }
.sub-footer .links a:hover { color: #fff; }
.sub-footer .copy { padding-top: 22px; font-size: 12px; color: rgba(255, 255, 255, 0.4); text-align: center; }

/* ---------- 回到顶部 ---------- */
.back-top {
  position: fixed; right: 26px; bottom: 90px; z-index: 45;
  width: 46px; height: 46px; border-radius: 14px;
  background: #fff; color: var(--ink-2); box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: all 0.3s ease; border: 1px solid var(--line);
}
.back-top.show { opacity: 1; transform: none; pointer-events: auto; }
.back-top:hover { color: var(--primary); }
.back-top svg { width: 18px; height: 18px; }

/* ---------- 响应式 ---------- */
.sub-nav { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.sub-nav::-webkit-scrollbar { display: none; }
.sub-nav a { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 1024px) {
  .mini-grid { grid-template-columns: repeat(2, 1fr); }
  .sub-nav { order: 3; width: 100%; flex: none; }
  .sub-header .header-inner { flex-wrap: wrap; height: auto; padding: 8px 0 6px; gap: 6px 16px; }
  .sub-header .header-actions { margin-left: auto; }
  .about-values, .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .mini-grid { grid-template-columns: 1fr; }
  .sub-section { padding: 56px 0; }
  .explain-card { grid-template-columns: 1fr; }
  .case-detail .cd-stats { grid-template-columns: 1fr; }
  .sub-header .btn-ghost { display: none; }
  /* 手机上让导航换行，不要横向滚动。
     原来 6 个导航项在 390px 下差 26px，最后一项「关于我们」被切断成「关于」——
     看起来像页面坏了，而且用户不知道那里可以滑。
     换行后全部可见可点。 */
  .sub-nav { flex-wrap: wrap; overflow-x: visible; gap: 2px 4px; margin-left: 0; }
  .sub-nav a { padding: 7px 9px; font-size: 13px; }
}