/* ============================================================
   易特软件 产品页（进销存商贸版）专属样式 product.css
   依赖 style.css（变量 / 按钮 / 头部导航 / 尾部 / 响应式）
   单独成文件，便于后期 CDN 加速
   ============================================================ */

/* ---------- HERO（蓝色渐变 + 真实软件截图） ---------- */
.phero{background:linear-gradient(135deg,#0f478f 0%,#1e63c9 55%,#2f86e0 100%);color:#fff;padding:56px 0 50px}
.phero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:42px;align-items:center}
.phero .eyebrow{display:inline-block;background:rgba(255,255,255,.16);padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;margin-bottom:16px}
.phero h1{font-size:clamp(27px,4vw,43px);font-weight:800;line-height:1.22}
.phero p.lead{margin:16px 0 24px;font-size:16px;opacity:.92;max-width:44ch}
.phero .actions{display:flex;gap:14px;flex-wrap:wrap}
.btn-w{background:#fff;color:var(--brand-d)}
.btn-w:hover{background:#eaf2fc}
.btn-t{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.4)}
.btn-t:hover{background:rgba(255,255,255,.24)}
.phero .trust{display:flex;gap:24px;margin-top:28px;flex-wrap:wrap}
.phero .trust b{font-size:23px;font-weight:800;display:block}
.phero .trust span{font-size:12.5px;opacity:.85}

/* ---------- 真实软件窗口外壳 ---------- */
.win{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 26px 55px -28px rgba(0,0,0,.45);border:1px solid #e3e9f2;color:#334155}
.win .bar{display:flex;align-items:center;gap:7px;padding:9px 13px;background:#eef2f7;border-bottom:1px solid #dde4ee}
.win .bar i{width:11px;height:11px;border-radius:50%;background:#cbd5e1}
.win .bar .t{margin-left:10px;font-weight:600;color:#475569;font-size:13px}
.win img{display:block;width:100%;height:auto}

/* ---------- SECTION 通用 ---------- */
.sec{padding:60px 0}
.sec-head{text-align:center;max-width:680px;margin:0 auto 38px}
.sec-head .tag{display:inline-block;color:var(--brand);font-weight:700;font-size:13px;letter-spacing:.5px}
.sec-head h2{font-size:clamp(23px,3.1vw,32px);font-weight:800;margin:10px 0;color:var(--brand-d)}
.sec-head p{color:var(--muted);font-size:15px}

/* ---------- 界面画廊 ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.gallery .g{transition:.22s}
.gallery .g:hover{transform:translateY(-5px)}
.gallery .g .win img{height:170px;object-fit:cover;object-position:top}
.gallery .cap{text-align:center;font-size:13px;font-weight:700;color:var(--brand-d);margin-top:8px}
@media(max-width:980px){.gallery{grid-template-columns:1fr 1fr}.phero .wrap{grid-template-columns:1fr}.hero-shot{display:none}}
@media(max-width:520px){.gallery{grid-template-columns:1fr}}

/* ---------- 产品概述 ---------- */
.ov{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ov .c{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.ov .c .ic{width:46px;height:46px;border-radius:12px;background:var(--brand-l);color:var(--brand);display:grid;place-items:center;font-size:22px;margin-bottom:12px}
.ov .c h3{font-size:17px;font-weight:800;color:var(--brand-d);margin-bottom:8px}
.ov .c p{font-size:14px;color:var(--muted)}
@media(max-width:820px){.ov{grid-template-columns:1fr}}

/* ---------- 模块交替展示 ---------- */
.alt{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-bottom:46px}
.alt.rev{direction:rtl}.alt.rev>*{direction:ltr}
.alt .txt h3{font-size:20px;font-weight:800;color:var(--brand-d);margin-bottom:6px}
.alt .txt .sub{color:var(--brand);font-weight:700;font-size:13px;margin-bottom:12px}
.alt .txt ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.alt .txt ul li{font-size:14.5px;color:#374151;padding-left:22px;position:relative}
.alt .txt ul li::before{content:"✓";position:absolute;left:0;top:0;color:var(--brand);font-weight:800}
.alt .shot img{border-radius:12px;box-shadow:0 24px 45px -22px rgba(15,71,143,.45);border:1px solid var(--line)}
@media(max-width:820px){.alt{grid-template-columns:1fr;gap:20px;margin-bottom:34px}}

/* ---------- 核心能力（视频演示） ---------- */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feat .f{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;display:flex;gap:13px;align-items:flex-start}
.feat .f .ic{width:38px;height:38px;border-radius:10px;background:var(--brand-l);color:var(--brand);display:grid;place-items:center;font-size:18px;flex:none}
.feat .f h4{font-size:14.5px;font-weight:700;margin-bottom:3px}
.feat .f p{font-size:13px;color:var(--muted)}
.feat .f a.v{display:inline-flex;align-items:center;gap:5px;margin-top:7px;font-size:12.5px;font-weight:700;color:var(--brand)}
@media(max-width:820px){.feat{grid-template-columns:1fr}}

/* ---------- 部署方式 ---------- */
.dep{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dep .d{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;text-align:center;box-shadow:var(--shadow)}
.dep .d .ic{font-size:30px;margin-bottom:10px}
.dep .d h3{font-size:17px;font-weight:800;color:var(--brand-d);margin-bottom:8px}
.dep .d p{font-size:13.5px;color:var(--muted)}
@media(max-width:820px){.dep{grid-template-columns:1fr}}

/* ---------- CTA ---------- */
.cta{background:linear-gradient(135deg,var(--brand-d),#2f86e0);color:#fff;text-align:center;padding:48px 22px;border-radius:18px}
.cta h2{font-size:clamp(21px,3vw,29px);font-weight:800;margin-bottom:12px}
.cta p{opacity:.9;margin-bottom:22px}
.cta .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- FAQ（GEO 直接作答） ---------- */
.faq{padding:60px 0}
.faq .sec-head{margin-bottom:36px}
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq-item{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;transition:.2s}
.faq-item:hover{box-shadow:var(--shadow)}
.faq-item summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:700;font-size:16px;color:var(--brand-d);display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:22px;color:var(--brand);font-weight:400;transition:.2s}
.faq-item[open] summary::after{content:"\2212"}
.faq-item .ans{padding:0 22px 20px;color:var(--muted);font-size:15px;line-height:1.8}