/* ============================================================
   「产品功能」栏目新版样式 · products.css
   适用：/products/index.php（栏目总览）、/products/planning.php（商品企划系统）
   主色沿用站点蓝 #1677FF；不可点击文字使用中性色，蓝色仅用于可点击内容
   前缀：pf-
   ============================================================ */
:root{
    --pf-primary:#1677FF;
    --pf-primary-dark:#0958D9;
    --pf-primary-deep:#004BB0;
    --pf-primary-soft:#E8F3FF;
    --pf-ink:#0F172A;
    --pf-body:#475569;
    --pf-muted:#64748B;
    --pf-line:#E6ECF5;
    --pf-soft:#F7FAFF;
    --pf-dark:#0B1220;
    --pf-green:#10B981;
    --pf-amber:#F59E0B;
    --pf-r-s:10px;
    --pf-r-m:14px;
    --pf-r-l:18px;
    --pf-shadow:0 18px 44px rgba(15,23,42,.08);
    --pf-shadow-hover:0 24px 56px rgba(15,23,42,.12);
}

.pf-wrap{max-width:1200px;margin:0 auto;padding:0 24px;}
.pf-sec{padding:84px 0;}
.pf-sec--soft{background:var(--pf-soft);border-top:1px solid var(--pf-line);border-bottom:1px solid var(--pf-line);}
.pf-sec--ink{background:var(--pf-dark);color:#E2E8F0;}

/* ===== 面包屑 ===== */
.pf-crumb{max-width:1200px;margin:0 auto;padding:22px 24px 0;font-size:.8125rem;color:var(--pf-muted);}
.pf-crumb a{color:var(--pf-muted);text-decoration:none;}
.pf-crumb a:hover{color:var(--pf-primary);}
.pf-crumb .sep{margin:0 8px;color:#CBD5E1;}
.pf-crumb .cur{color:var(--pf-ink);font-weight:600;}

/* ===== Section 头部 ===== */
.pf-head{max-width:780px;margin:0 0 52px;}
.pf-head--center{margin-left:auto;margin-right:auto;text-align:center;}
.pf-kicker{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.12em;color:var(--pf-muted);margin-bottom:12px;}
.pf-head h2{font-size:clamp(26px,2.9vw,36px);line-height:1.28;margin:0 0 14px;color:var(--pf-ink);font-weight:700;}
.pf-head p{font-size:1.0625rem;line-height:1.8;color:var(--pf-body);margin:0;}
.pf-sec--ink .pf-head h2{color:#fff;}
.pf-sec--ink .pf-head p,.pf-sec--ink .pf-kicker{color:#94A3B8;}

/* ===== 通用按钮 ===== */
.pf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;font-family:inherit;font-size:1rem;font-weight:600;border-radius:12px;padding:14px 28px;transition:background .2s,color .2s,transform .15s,box-shadow .2s,border-color .2s;}
.pf-btn-primary{background:var(--pf-primary);color:#fff;box-shadow:0 10px 24px rgba(22,119,255,.26);}
.pf-btn-primary:hover{background:var(--pf-primary-dark);transform:translateY(-2px);color:#fff;text-decoration:none;}
.pf-btn-primary:active{background:var(--pf-primary-deep);transform:translateY(0);}
.pf-btn-ghost{background:#fff;color:var(--pf-ink);border:1px solid #D7E1EE;}
.pf-btn-ghost:hover{border-color:var(--pf-primary);color:var(--pf-primary);transform:translateY(-2px);text-decoration:none;}
.pf-btn-sm{font-size:.9375rem;padding:11px 20px;border-radius:10px;}

/* ===== Hero ===== */
.pf-hero{position:relative;overflow:hidden;background:
    radial-gradient(1100px 420px at 88% -8%,rgba(22,119,255,.14),transparent 60%),
    linear-gradient(180deg,#F4F9FF 0%,#FFFFFF 62%,#F7FAFF 100%);}
.pf-hero-grid{max-width:1200px;margin:0 auto;padding:64px 24px 76px;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.pf-badge{display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:600;color:#334155;background:#fff;border:1px solid var(--pf-line);border-radius:100px;padding:7px 15px;margin-bottom:22px;}
.pf-badge svg{width:15px;height:15px;stroke:var(--pf-primary);}
.pf-hero h1{font-size:clamp(32px,3.9vw,50px);line-height:1.16;font-weight:700;color:var(--pf-ink);margin:0 0 8px;letter-spacing:-.5px;}
.pf-hero h1 em{font-style:normal;color:var(--pf-primary);}
.pf-hero .pf-slogan{font-size:1.1875rem;line-height:1.7;color:var(--pf-ink);font-weight:600;margin:0 0 16px;}
.pf-hero .pf-lead{font-size:1.0625rem;line-height:1.85;color:var(--pf-body);margin:0 0 28px;max-width:600px;}
.pf-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px;}
.pf-hero-note{display:flex;flex-wrap:wrap;gap:26px;}
.pf-hero-note span{display:block;font-size:.8125rem;color:var(--pf-muted);}
.pf-hero-note b{display:block;color:var(--pf-ink);font-size:1.125rem;font-weight:700;margin-bottom:2px;}

/* Hero 右侧看盘 mock */
.pf-mock{background:#fff;border:1px solid var(--pf-line);border-radius:var(--pf-r-l);box-shadow:0 28px 64px rgba(15,23,42,.13);overflow:hidden;}
.pf-mock-head{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid var(--pf-line);background:#FBFCFE;}
.pf-mock-head i{width:9px;height:9px;border-radius:50%;display:block;}
.pf-mock-head i:nth-child(1){background:#FF5F57;}
.pf-mock-head i:nth-child(2){background:#FFBD2E;}
.pf-mock-head i:nth-child(3){background:#28C840;}
.pf-mock-head span{margin-left:10px;font-size:.8125rem;color:#94A3B8;}
.pf-mock-head em{margin-left:auto;font-style:normal;font-size:.75rem;color:var(--pf-primary);background:var(--pf-primary-soft);padding:3px 9px;border-radius:100px;}
.pf-mock-body{padding:20px;}
.pf-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.pf-kpi{background:var(--pf-soft);border:1px solid #EDF2F9;border-radius:var(--pf-r-m);padding:13px 14px;}
.pf-kpi b{display:block;font-size:1.25rem;color:var(--pf-ink);line-height:1.3;}
.pf-kpi b.ok{color:var(--pf-green);}
.pf-kpi b.warn{color:var(--pf-amber);}
.pf-kpi span{font-size:.75rem;color:var(--pf-muted);}
.pf-bars{margin-top:16px;border:1px solid #EDF2F9;border-radius:var(--pf-r-m);padding:14px 16px;}
.pf-bar-row{display:flex;align-items:center;gap:12px;font-size:.8125rem;margin-bottom:11px;}
.pf-bar-row:last-child{margin-bottom:0;}
.pf-bar-row .lb{flex:0 0 92px;color:var(--pf-muted);}
.pf-bar-row .tk{flex:1;height:8px;border-radius:4px;background:#EDF3FA;overflow:hidden;}
.pf-bar-row .tk u{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#1677FF,#69B1FF);}
.pf-bar-row .tk u.short{background:linear-gradient(90deg,#F59E0B,#FBBF24);}
.pf-bar-row em{font-style:normal;flex:0 0 62px;text-align:right;color:#334155;font-weight:600;}
.pf-ai-tip{margin-top:16px;display:flex;gap:10px;background:var(--pf-primary-soft);border:1px solid #BEDAFF;border-radius:var(--pf-r-m);padding:12px 14px;}
.pf-ai-tip svg{width:18px;height:18px;flex:0 0 auto;margin-top:2px;stroke:var(--pf-primary);}
.pf-ai-tip p{margin:0;font-size:.8125rem;line-height:1.7;color:#1E3A5F;}
.pf-ai-tip p b{color:var(--pf-primary);}

/* ===== 阶段链路 ===== */
.pf-chain{background:#fff;border-top:1px solid var(--pf-line);}
.pf-chain-in{max-width:1200px;margin:0 auto;padding:26px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.pf-chain-t{font-size:.8125rem;color:var(--pf-muted);font-weight:600;margin-right:8px;}
.pf-chain ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.pf-chain li{font-size:.8125rem;padding:7px 13px;border-radius:100px;background:var(--pf-soft);border:1px solid var(--pf-line);color:#334155;}
.pf-chain li.cur{background:var(--pf-primary);border-color:var(--pf-primary);color:#fff;font-weight:600;}
.pf-chain .ar{color:#CBD5E1;font-weight:700;}

/* ===== 需求痛点 ===== */
.pf-pain{border:1px solid var(--pf-line);border-radius:var(--pf-r-l);background:#fff;overflow:hidden;box-shadow:var(--pf-shadow);}
.pf-pain-row{display:grid;grid-template-columns:150px 1fr 1.15fr;gap:24px;padding:22px 26px;align-items:start;}
.pf-pain-row+.pf-pain-row{border-top:1px solid var(--pf-line);}
.pf-pain-row:nth-child(even){background:#FCFDFF;}
.pf-role{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--pf-ink);font-size:.9375rem;}
.pf-role i{width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:var(--pf-primary-soft);display:flex;align-items:center;justify-content:center;}
.pf-role i svg{width:17px;height:17px;stroke:var(--pf-primary);}
.pf-pain-q{font-size:.9375rem;line-height:1.75;color:#B42318;background:#FEF3F2;border:1px solid #FECDCA;border-radius:12px;padding:12px 14px;}
.pf-pain-a{display:flex;gap:10px;font-size:.9375rem;line-height:1.75;color:#334155;}
.pf-pain-a svg{width:18px;height:18px;flex:0 0 auto;margin-top:3px;stroke:var(--pf-green);}

/* ===== 产品架构图 ===== */
.pf-arch-body{max-width:1200px;margin:0 auto;}
.pf-ph{position:relative;border:2px dashed #C9D8EE;border-radius:var(--pf-r-l);background:
    repeating-linear-gradient(45deg,#FBFDFF,#FBFDFF 12px,#F5F9FF 12px,#F5F9FF 24px);
    min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:28px;}
.pf-ph img{display:none;width:100%;height:auto;border-radius:var(--pf-r-l);}
.pf-ph.has-img{border:none;background:none;min-height:0;padding:0;}
.pf-ph.has-img img{display:block;width:auto;max-width:min(1200px,100%);height:auto;}
.pf-ph.has-img .pf-ph-fallback{display:none;}
.pf-ph-fallback{display:flex;flex-direction:column;align-items:center;gap:8px;}
.pf-ph-fallback b{color:var(--pf-ink);font-size:1rem;}
.pf-ph-fallback span{font-size:.875rem;color:var(--pf-muted);line-height:1.7;}
.pf-arch-note{margin-top:18px;text-align:center;font-size:.8125rem;color:var(--pf-muted);}
.pf-layers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px;}
.pf-layer{background:#fff;border:1px solid var(--pf-line);border-radius:var(--pf-r-l);padding:22px;}
.pf-layer .ln{display:inline-block;font-size:.75rem;font-weight:700;color:#fff;background:var(--pf-primary);border-radius:100px;padding:4px 12px;margin-bottom:14px;}
.pf-layer:nth-child(2) .ln{background:#334155;}
.pf-layer:nth-child(3) .ln{background:#0891B2;}
.pf-layer h3{font-size:1.0625rem;color:var(--pf-ink);margin:0 0 10px;}
.pf-layer ul{list-style:none;padding:0;margin:0;}
.pf-layer li{font-size:.875rem;line-height:1.8;color:var(--pf-body);padding-left:16px;position:relative;margin-bottom:4px;}
.pf-layer li::before{content:'';position:absolute;left:2px;top:.7em;width:5px;height:5px;border-radius:50%;background:#BEDAFF;}

/* ===== 核心功能 ===== */
.pf-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.pf-feat{position:relative;background:#fff;border:1px solid var(--pf-line);border-radius:var(--pf-r-l);padding:24px 22px 22px;transition:transform .22s,box-shadow .22s,border-color .22s;}
.pf-feat:hover{transform:translateY(-5px);box-shadow:var(--pf-shadow-hover);border-color:#BEDAFF;}
.pf-feat .num{font-size:.8125rem;font-weight:700;color:#94A3B8;letter-spacing:.08em;margin-bottom:12px;}
.pf-feat h3{font-size:1.0625rem;color:var(--pf-ink);margin:0 0 10px;font-weight:700;}
.pf-feat p{font-size:.875rem;line-height:1.8;color:var(--pf-body);margin:0;}
.pf-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;}
.pf-tag{font-size:.75rem;padding:4px 10px;border-radius:100px;background:#EEF2F7;color:#334155;}
.pf-feat .more{margin-top:14px;font-size:.8125rem;font-weight:600;}

/* ===== AI 专区 ===== */
.pf-ai{background:#0B1220;border-radius:26px;padding:52px 44px;position:relative;overflow:hidden;}
.pf-ai::after{content:'';position:absolute;right:-120px;top:-120px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(22,119,255,.35),transparent 70%);pointer-events:none;}
.pf-ai-head{position:relative;z-index:1;margin-bottom:34px;}
.pf-ai-head h2{font-size:clamp(24px,2.4vw,32px);color:#fff;margin:0 0 12px;font-weight:700;}
.pf-ai-head p{color:#94A3B8;font-size:1rem;line-height:1.8;margin:0;max-width:640px;}
.pf-ai-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.pf-ai-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--pf-r-l);padding:26px 22px;transition:background .22s,border-color .22s,transform .22s;}
.pf-ai-card:hover{background:rgba(255,255,255,.09);border-color:rgba(22,119,255,.55);transform:translateY(-4px);}
.pf-ai-card .kind{display:inline-block;font-size:.75rem;font-weight:700;color:#7DD3FC;border:1px solid rgba(125,211,252,.4);border-radius:100px;padding:4px 11px;margin-bottom:14px;}
.pf-ai-card h3{font-size:1.0625rem;color:#fff;margin:0 0 10px;}
.pf-ai-card p{font-size:.875rem;line-height:1.85;color:#A9B6C8;margin:0;}

/* ===== 客户证言 ===== */
.pf-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.pf-quote{background:#fff;border:1px solid var(--pf-line);border-radius:var(--pf-r-l);padding:26px 24px;display:flex;flex-direction:column;transition:box-shadow .22s,transform .22s;}
.pf-quote:hover{box-shadow:var(--pf-shadow);transform:translateY(-4px);}
.pf-quote .qm{font-size:2.25rem;line-height:1;color:#BEDAFF;font-weight:700;margin-bottom:6px;}
.pf-quote blockquote{margin:0 0 18px;font-size:.9375rem;line-height:1.85;color:#334155;}
.pf-quote .who{margin-top:auto;display:flex;align-items:center;gap:11px;padding-top:16px;border-top:1px solid var(--pf-line);}
.pf-quote .av{width:38px;height:38px;flex:0 0 auto;border-radius:50%;background:var(--pf-primary-soft);color:var(--pf-primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.875rem;}
.pf-quote .who b{display:block;font-size:.875rem;color:var(--pf-ink);}
.pf-quote .who span{display:block;font-size:.8125rem;color:var(--pf-muted);}
.pf-quote.is-hidden{display:none;}
.pf-more{text-align:center;margin-top:32px;}

/* ===== 最佳实践 ===== */
.pf-prac{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.pf-prac-c{background:#fff;border:1px solid var(--pf-line);border-radius:var(--pf-r-l);padding:26px 24px;transition:transform .22s,box-shadow .22s,border-color .22s;}
.pf-prac-c:hover{transform:translateY(-5px);box-shadow:var(--pf-shadow);border-color:#BEDAFF;}
.pf-prac-c h3{font-size:1.0625rem;color:var(--pf-ink);margin:0 0 6px;font-weight:700;}
.pf-prac-c .tip{display:block;font-size:.8125rem;color:var(--pf-primary);font-weight:600;margin-bottom:12px;}
.pf-prac-c p{font-size:.875rem;line-height:1.85;color:var(--pf-body);margin:0;}

/* ===== FAQ ===== */
.pf-faq{max-width:900px;margin:0 auto;}
.pf-faq details{background:#fff;border:1px solid var(--pf-line);border-radius:var(--pf-r-m);padding:18px 22px;margin-bottom:12px;transition:box-shadow .2s,border-color .2s;}
.pf-faq details[open]{box-shadow:var(--pf-shadow);border-color:#BEDAFF;}
.pf-faq summary{cursor:pointer;list-style:none;font-weight:600;color:var(--pf-ink);font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:14px;}
.pf-faq summary::-webkit-details-marker{display:none;}
.pf-faq summary::after{content:'+';font-size:1.375rem;color:var(--pf-primary);line-height:1;flex:0 0 auto;}
.pf-faq details[open] summary::after{content:'\2212';}
.pf-faq .pf-a{font-size:.9375rem;line-height:1.9;color:var(--pf-body);padding-top:12px;}
.pf-faq .pf-a ol{margin:8px 0 0;padding-left:20px;}
.pf-faq .pf-a ol li{margin-bottom:4px;}

/* ===== CTA 补充信任条 ===== */
.pf-trustline{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 auto 34px;padding:0 24px;max-width:1000px;}
.pf-pill{font-size:.8125rem;padding:7px 15px;border-radius:100px;background:#fff;border:1px solid var(--pf-line);color:#475569;}

/* ===== 栏目总览：软件产品 ===== */
.pf-products{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.pf-product{position:relative;display:block;background:#fff;border:1px solid var(--pf-line);border-radius:20px;padding:26px 24px;text-decoration:none;transition:transform .22s,box-shadow .22s,border-color .22s;}
.pf-product:hover{transform:translateY(-6px);box-shadow:var(--pf-shadow-hover);border-color:#BEDAFF;text-decoration:none;}
.pf-product .pf-mk{position:absolute;top:22px;right:22px;font-size:.6875rem;font-weight:700;padding:4px 10px;border-radius:100px;background:#EEF2F7;color:#64748B;}
.pf-product.hot .pf-mk{background:#FFF1E6;color:#C2410C;}
.pf-product .pf-pi{width:48px;height:48px;border-radius:14px;background:var(--pf-primary-soft);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.pf-product .pf-pi svg{width:24px;height:24px;stroke:var(--pf-primary);}
.pf-product h3{font-size:1.125rem;color:var(--pf-ink);margin:0 0 10px;font-weight:700;}
.pf-product p{font-size:.875rem;line-height:1.8;color:var(--pf-body);margin:0 0 14px;}
.pf-product .pf-go{font-size:.875rem;font-weight:600;color:var(--pf-primary);}
.pf-product.is-soon{opacity:.85;cursor:default;}
.pf-product.is-soon:hover{transform:none;box-shadow:none;border-color:var(--pf-line);}

/* ===== 栏目总览：功能模块 ===== */
.pf-mod-group+.pf-mod-group{margin-top:26px;}
.pf-mod-gt{font-size:.875rem;font-weight:700;color:var(--pf-ink);margin-bottom:12px;display:flex;align-items:center;gap:10px;}
.pf-mod-gt::after{content:'';flex:1;height:1px;background:var(--pf-line);}
.pf-mods{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.pf-mod{display:block;background:#fff;border:1px solid var(--pf-line);border-radius:12px;padding:15px 14px;text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s;}
.pf-mod:hover{border-color:#BEDAFF;transform:translateY(-3px);box-shadow:var(--pf-shadow);text-decoration:none;}
.pf-mod b{display:block;font-size:.9375rem;color:var(--pf-ink);font-weight:600;}
.pf-mod span{display:block;font-size:.75rem;color:var(--pf-muted);margin-top:4px;}
.pf-mod.is-soon{cursor:default;background:#FBFCFE;}
.pf-mod.is-soon:hover{transform:none;box-shadow:none;border-color:var(--pf-line);}
.pf-mod.is-soon b{color:#94A3B8;}

/* ===== 滚动动画 ===== */
.pf-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.pf-reveal.in{opacity:1;transform:none;}

/* ===== 响应式 ===== */
@media (max-width:1100px){
    .pf-feats{grid-template-columns:repeat(2,1fr);}
    .pf-quotes,.pf-prac,.pf-products,.pf-layers{grid-template-columns:repeat(2,1fr);}
    .pf-mods{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:900px){
    .pf-hero-grid{grid-template-columns:1fr;gap:36px;padding:48px 20px 60px;}
    .pf-ai-grid{grid-template-columns:1fr;}
    .pf-ai{padding:40px 26px;}
    .pf-mods{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:768px){
    .pf-sec{padding:60px 0;}
    .pf-wrap,.pf-crumb{padding-left:20px;padding-right:20px;}
    .pf-pain-row{grid-template-columns:1fr;gap:14px;padding:20px;}
}
@media (max-width:640px){
    .pf-feats,.pf-quotes,.pf-prac,.pf-products,.pf-layers{grid-template-columns:1fr;}
    .pf-mods{grid-template-columns:repeat(2,1fr);}
    .pf-kpis{grid-template-columns:1fr;}
    .pf-chain-in{flex-direction:column;align-items:flex-start;}
    .pf-chain .ar{display:none;}
    .pf-actions .pf-btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){
    .pf-reveal{opacity:1;transform:none;transition:none;}
}