/* =============================================================
   零度星锋PC装机助手ヅSVIP - 主页样式 (css/index.css)
   风格: 仿 IT 天空首页 —— 网格底 Hero + 三列产品卡片 + 核心优势 + 深色页脚
   说明: 纯 CSS 实现(无 Tailwind / FontAwesome 等第三方 CDN),
         内联 SVG 图标, 主色 #0077ff 与全站一致;
         flex/grid 响应式, 断点 960 / 640 / 480px。
   ============================================================= */

:root{
  --primary:#0077ff;        /* 主蓝(与全站一致) */
  --primary-2:#1677ff;
  --teal:#14b8a6;           /* 青(产品卡片颜色组, 参考页 teal-500) */
  --teal-line:#2dd4bf;      /* 青边框(参考页 teal-400) */
  --amber:#f59e0b;          /* 黄(备用) */
  --yellow:#eab308;         /* 黄按钮(参考页 yellow-500) */
  --yellow-line:#facc15;    /* 黄边框(参考页 yellow-400) */
  --green:#22c55e;          /* 绿按钮 */
  --green-line:#4ade80;     /* 绿边框 */
  --line:#eceef1;
  --text:#1f2937;
  --text-2:#4b5563;
  --text-3:#9ca3af;
  --light-bg:#f8faff;       /* 软件产品区背景 */
  --deep-bg:#f0f4fc;        /* 核心优势区背景 */
  --grid-line:#e8edf7;      /* Hero 网格线 */
  --font:Inter,system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px}
body{
  font-family:var(--font);color:var(--text);background:#fff;
  line-height:1.7;font-size:15px;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
img,svg{display:block;max-width:100%}

/* 通用容器 */
.container{max-width:1120px;margin:0 auto;padding:0 20px}

/* ================================================================
   品牌头(sticky 白底, 书法 logo + 完整名)
   ================================================================ */
.site-brand{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100}
.brand-inner{display:flex;align-items:center;gap:10px;max-width:1120px;margin:0 auto;padding:12px 20px;text-decoration:none}
.brand-logo{width:34px;height:34px;object-fit:contain;flex:none}
.brand-name{font-weight:800;font-size:18px;color:var(--text);letter-spacing:.5px;white-space:nowrap}

/* ================================================================
   Hero(网格底 + 居中标题 + 按钮组)
   ================================================================ */
.hero{
  background:
    linear-gradient(#e8edf7 1px,transparent 1px),
    linear-gradient(90deg,#e8edf7 1px,transparent 1px);
  background-size:24px 24px;
  padding:88px 20px 84px;
  text-align:center;
}
.hero h1{
  font-size:clamp(1.8rem,4vw,2.5rem);
  font-weight:800;letter-spacing:.5px;line-height:1.25;margin-bottom:12px;
}
.hero-tag{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(0,119,255,.08);color:var(--primary);
  border:1px solid rgba(0,119,255,.22);
  font-size:.74rem;font-weight:600;letter-spacing:.5px;
  padding:5px 14px;border-radius:999px;margin-bottom:16px;
}
.hero .hero-sub{
  max-width:680px;margin:0 auto 32px;
  color:var(--text-2);font-size:.95rem;
}
.hero .hero-sub b{color:var(--primary);font-weight:700}
.hero-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.btn{padding:9px 24px;border-radius:6px;font-size:.92rem;font-weight:500;transition:all .15s;display:inline-block}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-2)}
.btn-outline{border:1px solid var(--primary);color:var(--primary);background:#fff}
.btn-outline:hover{background:rgba(0,119,255,.06)}

/* ================================================================
   软件产品(三列卡片)
   ================================================================ */
.section-soft{background:var(--light-bg);padding:72px 0}
.section-adv{background:var(--deep-bg);padding:72px 0}
.section-head{max-width:640px;margin:0 auto 48px;text-align:center}
.section-head h2{font-size:clamp(1.4rem,2.8vw,1.8rem);font-weight:800;margin-bottom:8px}
.section-head p{color:var(--text-2);font-size:.86rem}
.section-head .tag{
  display:inline-block;background:rgba(0,119,255,.08);color:var(--primary);
  border:1px solid rgba(0,119,255,.22);
  font-size:.72rem;font-weight:600;letter-spacing:.5px;
  padding:4px 13px;border-radius:999px;margin-bottom:14px;
}

/* ================================================================
   核心优势 · 纯净无坑(0 数字承诺卡 + 双栏)
   ================================================================ */
.pure-band{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:44px}
.p-card{
  background:#fff;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.08);
  padding:22px 18px;text-align:center;border-top:4px solid var(--primary);
}
.p-card .p-num{
  font-size:2.6rem;font-weight:800;line-height:1;
  color:var(--primary);margin-bottom:6px;
}
.p-card .p-k{font-weight:600;font-size:.95rem;margin-bottom:6px}
.p-card p{font-size:.78rem;color:var(--text-2);line-height:1.6}
.pure-promise h3{font-weight:700;font-size:1.05rem;margin-bottom:18px}

.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.prod{
  background:#fff;border-radius:10px;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  display:flex;flex-direction:column;
  transition:box-shadow .2s,transform .2s;
}
.prod:hover{box-shadow:0 6px 18px rgba(0,0,0,.10);transform:translateY(-2px)}
.prod .p-top{border-top:4px solid var(--primary);padding:22px;display:flex;flex-direction:column;flex-grow:1}
.prod.t-teal .p-top{border-top-color:var(--teal-line)}
.prod.t-amber .p-top{border-top-color:var(--amber)}
.prod.t-yellow .p-top{border-top-color:var(--yellow-line)}
.prod.t-green .p-top{border-top-color:var(--green-line)}

.prod .p-title{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.prod .ic{width:22px;height:22px;color:var(--primary);flex:none}
.prod.t-teal .ic{color:var(--teal)}
.prod.t-amber .ic{color:var(--amber)}
.prod.t-yellow .ic{color:var(--yellow)}
.prod.t-green .ic{color:var(--green)}
.prod .p-name{font-weight:600;font-size:1rem}
.prod .p-sub{font-size:12px;color:var(--text-3)}
.prod .p-desc{font-size:12px;color:var(--text-2);margin:12px 0;flex-grow:1;line-height:1.7}
.prod .p-btns{display:flex;gap:8px;flex-wrap:wrap}
.prod .p-btns a{padding:6px 14px;border-radius:6px;font-size:12px;font-weight:500}
.pb-solid{background:var(--primary);color:#fff}
.pb-solid:hover{background:var(--primary-2)}
.prod.t-teal .pb-solid{background:var(--teal)}
.prod.t-amber .pb-solid{background:var(--amber)}
.prod.t-yellow .pb-solid{background:var(--yellow)}
.prod.t-green .pb-solid{background:var(--green)}
.prod.t-teal .pb-solid:hover{background:#0d9488}
.prod.t-amber .pb-solid:hover{background:#d97706}
.prod.t-yellow .pb-solid:hover{background:#ca8a04}
.prod.t-green .pb-solid:hover{background:#16a34a}
.pb-line{border:1px solid var(--line);color:var(--text-2)}
.pb-line:hover{color:var(--primary);border-color:var(--primary)}
.prod .p-meta{font-size:12px;color:var(--text-3);margin-top:14px;display:flex;align-items:center;gap:6px}
.prod .p-meta .dot{width:6px;height:6px;border-radius:50%;background:#22c55e}

/* ================================================================
   核心优势(左列表 + 右"为什么选择我们"卡片)
   ================================================================ */
.adv-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.adv-list li{list-style:none;display:flex;gap:10px;margin-bottom:22px}
.adv-list .ac{width:18px;height:18px;color:var(--primary);flex:none;margin-top:3px}
.adv-list h4{font-weight:600;font-size:.98rem}
.adv-list p{font-size:.88rem;color:var(--text-2);margin-top:4px}
.why-card{background:#fff;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.08);padding:26px}
.why-card h4{font-weight:600;margin-bottom:16px}
.why-card li{list-style:none;display:flex;gap:9px;font-size:.88rem;color:#4b5563;margin-bottom:12px;align-items:flex-start}
.why-card .bd{width:7px;height:7px;border-radius:50%;background:var(--primary);flex:none;margin-top:8px}

/* ================================================================
   页脚(深色, 同参考)
   ================================================================ */
.site-foot{background:#1f2937;color:#a7adb5;text-align:center;font-size:.82rem;padding:34px 20px;line-height:1.9}
.site-foot a{color:#9ca3af;transition:color .15s}
.site-foot a:hover{color:#fff}

/* ================================================================
   响应式
   ================================================================ */
@media(max-width:900px){
  .adv-grid{grid-template-columns:1fr;gap:32px}
  .pure-band{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .hero{padding:56px 16px 52px}
  .section-soft,.section-adv{padding:48px 0}
  .container{padding-left:16px;padding-right:16px}
  .adv-grid{gap:28px}
  .pure-band{gap:12px;margin-bottom:34px}
  .p-card{padding:16px 12px}
  .brand-inner{padding:10px 16px}
  .brand-name{font-size:16px}
}
@media(max-width:480px){
  .hero h1{font-size:1.8rem}
  .btn{width:100%;max-width:300px}
  .prod .p-btns{flex-direction:column}
  .prod .p-btns a{text-align:center}
}