/* ============================================================
   栏目页 / 功能详情页 / 下载页（2026-11-03 改版）
   目的：官网横栏 = 软件竖栏的 11 个栏目，点栏目看功能排列，
        点功能开独立页面放真实截图。
   ============================================================ */

/* ---------- 11 项横栏导航 ----------
   11 个栏目的名字加起来本来就长，原来的 1200 容器放不下，
   所以顶栏单独放宽到 1320，并去掉「收藏」按钮（次要功能，挤掉的是栏目）。 */
.nav-cols .wrap{max-width:1320px;gap:14px;}
.nav-cols .nav-links{gap:2px;margin-left:4px;overflow:visible;}
.nav-cols .nav-links a{
  padding:7px 9px;font-size:13px;border-radius:8px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:4px;
}
.nav-cols .nav-links a .e{font-size:13px;line-height:1;opacity:.9;}
.nav-cols .logo{font-size:17px;flex:0 0 auto;}
.nav-cols .logo img{width:28px;height:28px;border-radius:8px;display:block;}

/* logo 换成软件那个图标（2026-11-03 老板：「官网的LOGO是软件的LOGO一样的」） */
.logo-img{
  width:30px;height:30px;border-radius:8px;display:block;
  box-shadow:0 4px 12px rgba(30,111,255,.22);
}

/* ---------- 栏目页 ---------- */
.col-hero{
  background:linear-gradient(180deg,var(--bg-blue),var(--bg) 88%);
  border-bottom:1px solid var(--line);
  padding:56px 0 44px;
  position:relative;overflow:hidden;
}
.col-hero::after{
  content:"";position:absolute;right:-160px;top:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(30,111,255,.10),transparent 70%);pointer-events:none;
}
.col-hero .crumb{
  font-size:12.5px;color:var(--muted);margin-bottom:16px;display:flex;gap:8px;align-items:center;
}
.col-hero .crumb a{color:var(--muted);}
.col-hero .crumb a:hover{color:var(--brand);}
.col-hero .eyebrow{margin-bottom:12px;}
.col-hero h1{
  font-size:clamp(27px,3.8vw,42px);line-height:1.2;font-weight:800;letter-spacing:-.015em;
  max-width:820px;
}
.col-hero .sub{color:var(--text-2);font-size:16px;margin-top:14px;max-width:760px;}
.col-hero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;align-items:center;}
.col-hero .acts .hint{font-size:13px;color:var(--muted);}

/* 栏目主截图 */
.col-shot{
  margin-top:34px;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(17,24,39,.12);background:#0b1020;
}
.col-shot img{width:100%;display:block;}

/* ---------- 痛点 ---------- */
.pain-sec{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.pain{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 22px 20px;
  position:relative;
}
.pain::before{
  content:"";position:absolute;left:22px;top:0;width:34px;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,#ef4444,#f59e0b);
}
.pain h4{font-size:15.5px;font-weight:700;margin:8px 0 8px;}
.pain p{font-size:13.8px;color:var(--muted);line-height:1.75;}

/* ---------- 卖点 ---------- */
.sell-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.sell{
  display:flex;gap:14px;padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--panel);
  transition:border-color .18s,box-shadow .18s,transform .18s var(--ease);
}
.sell:hover{border-color:var(--brand-line);box-shadow:var(--shadow-sm);transform:translateY(-2px);}
.sell .n{
  flex:0 0 30px;height:30px;border-radius:9px;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;
}
.sell h4{font-size:15.5px;font-weight:700;margin-bottom:6px;}
.sell p{font-size:13.8px;color:var(--muted);line-height:1.75;}

/* ---------- 功能卡（点进详情页） ---------- */
.item-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.item{
  display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;
}
.item:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--brand-line);}
.item .thumb{
  aspect-ratio:16/9;background:#0b1020;overflow:hidden;border-bottom:1px solid var(--line);
}
.item .thumb img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block;}
.item .body{padding:16px 18px 18px;}
.item h4{font-size:15.5px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.item h4 .go{color:var(--brand);font-size:13px;font-weight:600;opacity:0;transition:opacity .15s;}
.item:hover h4 .go{opacity:1;}
.item p{font-size:13.4px;color:var(--muted);line-height:1.7;}

/* ---------- 详情页 ---------- */
.fd-hero{
  background:linear-gradient(180deg,var(--bg-blue),var(--bg) 90%);
  border-bottom:1px solid var(--line);padding:44px 0 36px;
}
.fd-hero .crumb{font-size:12.5px;color:var(--muted);margin-bottom:16px;display:flex;gap:8px;flex-wrap:wrap;}
.fd-hero .crumb a:hover{color:var(--brand);}
.fd-hero .tag{
  display:inline-block;font-size:12px;font-weight:600;color:var(--brand);background:var(--brand-soft);
  border:1px solid var(--brand-line);border-radius:999px;padding:3px 11px;margin-bottom:14px;
}
.fd-hero h1{font-size:clamp(25px,3.4vw,38px);line-height:1.22;font-weight:800;letter-spacing:-.015em;}
.fd-hero .lead{color:var(--text-2);font-size:16px;margin-top:12px;max-width:760px;}

.fd-shot{
  margin:-18px 0 0;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 26px 64px rgba(17,24,39,.14);background:#0b1020;
}
.fd-shot img{width:100%;display:block;}
.fd-cap{font-size:12.5px;color:var(--muted);text-align:center;margin-top:12px;}

.fd-points{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px;}
.fd-point{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--panel);}
.fd-point h5{font-size:13px;color:var(--brand);font-weight:700;margin-bottom:7px;}
.fd-point p{font-size:13.6px;color:var(--muted);line-height:1.75;}

/* ---------- CTA 条 ---------- */
.cta-bar{
  background:linear-gradient(135deg,#0f172a,#1e3a8a 60%,#312e81);
  color:#fff;border-radius:18px;padding:38px 36px;
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
}
.cta-bar h3{font-size:clamp(20px,2.4vw,27px);font-weight:800;letter-spacing:-.01em;}
.cta-bar p{color:rgba(255,255,255,.72);font-size:14px;margin-top:8px;}
.cta-bar .btn{background:#fff;color:#111827;box-shadow:0 10px 26px rgba(0,0,0,.22);}
.cta-bar .btn:hover{background:#f3f6ff;}

/* ---------- 下载页 ---------- */
.dl-hero{padding:64px 0 20px;text-align:center;background:linear-gradient(180deg,var(--bg-blue),var(--bg) 92%);}
.dl-hero h1{font-size:clamp(28px,4.2vw,46px);line-height:1.18;font-weight:800;letter-spacing:-.02em;}
.dl-hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.dl-hero .lead{color:var(--muted);font-size:16.5px;margin:16px auto 0;max-width:640px;}
/* 2026-11-03 下载页「临门一脚」：四个打消顾虑的徽章 + 一句网盘说明 */
.dl-badges{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:26px;}
.dl-badges span{
  font-size:13px;font-weight:600;color:var(--brand);background:var(--panel);
  border:1px solid var(--brand-line);border-radius:999px;padding:5px 14px;
  box-shadow:0 2px 8px rgba(30,111,255,.06);
}
.dl-badges span::before{content:"✓ ";font-weight:700;}
.dl-tip{font-size:13px;color:var(--muted);margin-top:14px;line-height:1.7;}
.dl-tip b{color:var(--text-2);}
/* 邀请短链落地条（?ref=CODE 时才出现） */
.dl-ref{
  display:flex;width:fit-content;max-width:100%;
  align-items:center;gap:9px;flex-wrap:wrap;justify-content:center;
  margin:26px auto 0;padding:9px 18px;border-radius:12px;background:#fff8e8;
  border:1px solid #f3d99a;font-size:13.5px;color:#8a6410;
}
.dl-ref span{color:#a07a1c;}
.dl-ref b{
  font-family:ui-monospace,Consolas,monospace;font-size:15px;letter-spacing:.12em;
  color:#7a4f00;background:#fff;border:1px dashed #e6c473;border-radius:7px;padding:1px 8px;
}
.dl-ref button{
  font:inherit;font-size:12.5px;font-weight:700;color:#8a6410;background:#fff;
  border:1px solid #e6c473;border-radius:7px;padding:3px 10px;cursor:pointer;
}
.dl-ref button:hover{background:#fff3d6;}
.dl-ref i{font-style:normal;color:#a07a1c;font-size:12.5px;}

.dl-big{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  margin-top:30px;padding:18px 44px;border-radius:14px;
  background:var(--brand);color:#fff;font-size:18px;font-weight:700;
  box-shadow:0 16px 40px rgba(30,111,255,.32);transition:.16s;
}
.dl-big:hover{background:var(--brand-2);transform:translateY(-2px);box-shadow:0 20px 48px rgba(30,111,255,.4);}
.dl-meta{
  display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:18px;
  font-size:13px;color:var(--muted);
}
.dl-meta b{color:var(--text-2);font-weight:600;}
.dl-win{
  margin:40px auto 0;max-width:980px;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 28px 70px rgba(17,24,39,.14);background:#0b1020;
}
.dl-win img{width:100%;display:block;}

.dl-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.dl-step{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--panel);}
.dl-step .n{
  width:26px;height:26px;border-radius:8px;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:700;margin-bottom:12px;
}
.dl-step h4{font-size:15px;font-weight:700;margin-bottom:6px;}
.dl-step p{font-size:13.6px;color:var(--muted);line-height:1.75;}

.dl-faq{display:grid;gap:12px;}
.dl-faq details{
  border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:16px 20px;
}
.dl-faq summary{font-size:14.5px;font-weight:600;cursor:pointer;list-style:none;}
.dl-faq summary::-webkit-details-marker{display:none;}
.dl-faq summary::before{content:"＋";color:var(--brand);font-weight:700;margin-right:9px;}
.dl-faq details[open] summary::before{content:"－";}
.dl-faq p{font-size:13.8px;color:var(--muted);line-height:1.8;margin-top:10px;}

/* ---------- 首页栏目入口 ---------- */
.col-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.col-card{
  display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--panel);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;
}
.col-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--brand-line);}
.col-card .thumb{aspect-ratio:16/9;overflow:hidden;background:#0b1020;border-bottom:1px solid var(--line);}
.col-card .thumb img{width:100%;height:100%;object-fit:cover;object-position:top left;}
.col-card .body{padding:16px 18px 18px;flex:1;display:flex;flex-direction:column;}
.col-card h3{font-size:16px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:7px;}
.col-card p{font-size:13.4px;color:var(--muted);line-height:1.7;flex:1;}
.col-card .more{font-size:13px;color:var(--brand);font-weight:600;margin-top:12px;}

/* ---------- 响应式 ---------- */
@media(max-width:1280px){
  .nav-cols .nav-links a{padding:6px 7px;font-size:12.5px;}
  .nav-cols .nav-links a .e{display:none;}
}
@media(max-width:1080px){
  .nav-cols .nav-links{display:none;}
  .nav-cols .burger{display:flex;}
}
@media(max-width:920px){
  .pain-grid,.item-grid,.col-cards,.dl-steps,.fd-points{grid-template-columns:repeat(2,1fr);}
  .sell-grid{grid-template-columns:1fr;}
  .col-shot,.dl-win{margin-top:26px;}
  .cta-bar{padding:28px 22px;}
}
@media(max-width:600px){
  .pain-grid,.item-grid,.col-cards,.dl-steps,.fd-points{grid-template-columns:1fr;}
  .dl-big{width:100%;padding:16px 20px;font-size:16.5px;}
  .col-hero{padding:36px 0 30px;}
  .col-hero .acts .btn{width:100%;}
}
