/* ============================================================
   视界号 SHIJIEHAO · 自媒体入驻页（join.html）专属样式
   仅由 join.html 引用，不影响其它页面
   设计基调：编辑式 Hero + Bento 权益网格 + 对比表 + 时间线流程
   全部颜色引用全局变量，自动适配暗色主题
   ============================================================ */

/* ---------------- 页面级排版 ---------------- */
.j-sec{padding:88px 0}
.j-sec.alt{background:var(--surface);padding:82px 0}
.j-sec.tight{padding-top:0}

.j-head{max-width:760px;margin:0 auto 48px;text-align:center}
.j-head.left{margin-left:0;text-align:left}
.j-kicker{
  display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 15px;
  border-radius:999px;background:var(--brand-soft);color:var(--brand);
  font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}
.j-kicker .d{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 1.8s infinite}
.j-title{
  font-size:38px;line-height:1.32;letter-spacing:-.8px;margin:18px 0 14px;
}
.j-title em{font-style:normal;color:var(--brand)}
.j-sub{color:var(--ink-3);font-size:15px;line-height:2.05;margin:0}
.j-sub b{color:var(--ink);font-weight:700}

/* ---------------- 按钮 ---------------- */
.j-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:52px;padding:0 30px;border-radius:999px;font-size:15px;font-weight:700;
  transition:transform .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease),color .25s var(--ease);
  white-space:nowrap;cursor:pointer;
}
.j-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;flex:none}
.j-btn.sm{height:44px;padding:0 22px;font-size:13.5px}
.j-btn-brand{background:var(--brand);color:#fff;box-shadow:0 12px 30px rgba(30,94,255,.34)}
.j-btn-brand:hover{background:var(--brand-dark);transform:translateY(-3px);box-shadow:0 18px 38px rgba(30,94,255,.42)}
.j-btn-light{background:#fff;color:var(--brand);box-shadow:0 12px 30px rgba(8,17,38,.28)}
.j-btn-light:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(8,17,38,.36)}
.j-btn-line{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.32)}
.j-btn-line:hover{background:rgba(255,255,255,.2);transform:translateY(-3px)}
.j-btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.j-btn-ghost:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-3px)}
.j-btn .arw{transition:transform .25s var(--ease)}
.j-btn:hover .arw{transform:translateX(4px)}

/* ============================================================
   ① Hero
   ============================================================ */
.j-hero{
  position:relative;overflow:hidden;color:#fff;padding:86px 0 96px;
  background:
    radial-gradient(1100px 620px at 84% -12%,rgba(59,130,246,.42),transparent 62%),
    radial-gradient(820px 520px at 6% 112%,rgba(255,90,31,.22),transparent 60%),
    linear-gradient(133deg,#0a1428 0%,#122249 56%,#1b3a86 100%);
}
.j-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(900px 520px at 78% 18%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(900px 520px at 78% 18%,#000 0%,transparent 72%);
}
.j-hero-in{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center}
.j-hero-copy{min-width:0}

.j-hero-badge{
  display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 16px;
  border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  font-size:12.5px;font-weight:700;letter-spacing:.02em;backdrop-filter:blur(10px);
}
.j-hero-badge .d{width:7px;height:7px;border-radius:50%;background:#5cf2a5;box-shadow:0 0 0 4px rgba(92,242,165,.18);animation:pulse 1.8s infinite}
.j-hero h1{
  font-size:clamp(34px,4.1vw,54px);line-height:1.28;letter-spacing:-1.6px;
  margin:22px 0 20px;font-weight:800;
}
.j-hero h1 em{
  font-style:normal;position:relative;color:#8ab4ff;
}
.j-hero h1 .grad{
  background:linear-gradient(100deg,#8ab4ff 0%,#ffd08a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.j-hero .lead{
  color:rgba(255,255,255,.78);font-size:16px;line-height:2.1;max-width:560px;margin:0 0 32px;
}
.j-hero .lead b{color:#fff;font-weight:700}
.j-hero-cta{display:flex;gap:14px;flex-wrap:wrap}

.j-hero-proof{display:flex;align-items:center;gap:16px;margin-top:36px;flex-wrap:wrap}
.j-ava-stack{display:flex}
.j-ava-stack img{
  width:38px;height:38px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(255,255,255,.85);margin-left:-11px;
}
.j-ava-stack img:first-child{margin-left:0}
.j-ava-stack .more{
  width:38px;height:38px;border-radius:50%;margin-left:-11px;background:rgba(255,255,255,.16);
  border:2px solid rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;
}
.j-proof-txt{font-size:13px;color:rgba(255,255,255,.72);line-height:1.8}
.j-proof-txt b{color:#fff;font-size:14.5px;display:block}
.j-proof-sep{width:1px;height:34px;background:rgba(255,255,255,.18)}
.j-proof-mini{display:flex;gap:26px}
.j-proof-mini div b{display:block;font-size:19px;color:#fff;letter-spacing:-.4px;line-height:1.35}
.j-proof-mini div span{font-size:11.5px;color:rgba(255,255,255,.6);letter-spacing:.05em}

/* --- Hero 视觉：创作者数据面板 --- */
.j-visual{position:relative}
.j-panel{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  border-radius:22px;padding:22px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 34px 80px rgba(4,10,26,.45);
}
.j-panel-top{display:flex;align-items:center;gap:13px}
.j-panel-top .ava{width:52px;height:52px;border-radius:15px;object-fit:cover;flex:none}
.j-panel-top .who{flex:1;min-width:0}
.j-panel-top .who b{display:flex;align-items:center;gap:7px;font-size:15.5px;color:#fff;line-height:1.4}
.j-panel-top .who span{font-size:11.5px;color:rgba(255,255,255,.62);letter-spacing:.04em}
.j-v{
  display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  border-radius:50%;background:var(--gold);color:#3b2703;font-size:9.5px;font-weight:800;flex:none;
}
.j-follow{
  height:32px;padding:0 16px;border-radius:999px;background:#fff;color:#122249;
  font-size:12.5px;font-weight:800;display:inline-flex;align-items:center;flex:none;
}
.j-chart{margin:20px 0 6px}
.j-chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.j-chart-head span{font-size:11.5px;color:rgba(255,255,255,.62);letter-spacing:.08em}
.j-chart-head b{font-size:13px;color:#7dffb8;display:flex;align-items:center;gap:5px}
.j-chart svg{width:100%;height:96px;display:block;overflow:visible}
.j-chart-note{margin:4px 0 0;font-size:11.5px;line-height:1.7;color:rgba(255,255,255,.55)}
.j-panel-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.j-panel-stats div{
  background:rgba(255,255,255,.09);border-radius:13px;padding:13px 12px;text-align:center;
}
.j-panel-stats b{display:block;font-size:17px;color:#fff;letter-spacing:-.4px;line-height:1.4}
.j-panel-stats span{font-size:10.5px;color:rgba(255,255,255,.6);letter-spacing:.06em}

.j-float{
  position:absolute;background:#fff;color:var(--ink);border-radius:14px;
  padding:11px 15px;display:flex;align-items:center;gap:11px;
  box-shadow:0 22px 50px rgba(4,10,26,.36);animation:jfloat 7s ease-in-out infinite;
}
.j-float .ic{
  width:34px;height:34px;border-radius:10px;background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.j-float .ic svg{width:17px;height:17px;stroke:var(--brand);fill:none;stroke-width:2}
.j-float b{display:block;font-size:14.5px;line-height:1.35;letter-spacing:-.2px}
.j-float span{font-size:10.5px;color:var(--ink-4);letter-spacing:.04em}
.j-f1{left:-26px;top:-22px}
.j-f2{right:-18px;top:38%;animation-delay:-2.4s}
.j-f3{left:-14px;bottom:-24px;animation-delay:-4.6s}
@keyframes jfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}

/* ============================================================
   ② 内容领域滚动条
   ============================================================ */
.j-marquee{
  background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding:17px 0;position:relative;
}
.j-marquee::before,.j-marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none;
}
.j-marquee::before{left:0;background:linear-gradient(90deg,var(--surface),transparent)}
.j-marquee::after{right:0;background:linear-gradient(270deg,var(--surface),transparent)}
.j-marq-track{display:flex;width:max-content;animation:jmarq 34s linear infinite}
.j-marquee:hover .j-marq-track{animation-play-state:paused}
.j-marq-group{display:flex;align-items:center;gap:38px;padding-right:38px}
.j-marq-item{
  display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;
  color:var(--ink-2);white-space:nowrap;
}
.j-marq-item i{
  width:5px;height:5px;border-radius:50%;background:var(--brand);flex:none;
}
.j-marq-item.hot i{background:var(--accent)}
@keyframes jmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   ③ 平台数据带
   ============================================================ */
.j-stats-wrap{padding:76px 0}
.j-stats{
  position:relative;overflow:hidden;border-radius:24px;padding:52px 46px;
  background:
    radial-gradient(620px 320px at 88% -20%,rgba(59,130,246,.4),transparent 68%),
    linear-gradient(120deg,#0c1730 0%,#12224a 48%,#1b3a86 100%);
}
.j-stats::after{
  content:"";position:absolute;width:380px;height:380px;left:-130px;bottom:-220px;
  background:radial-gradient(circle,rgba(255,90,31,.22),transparent 70%);
}
.j-stats-in{position:relative;display:grid;grid-template-columns:1.25fr repeat(4,1fr);gap:26px;align-items:center}
.j-stats-lead h2{color:#fff;font-size:27px;line-height:1.55;letter-spacing:-.5px;margin:0}
.j-stats-lead p{color:rgba(255,255,255,.62);font-size:13px;line-height:1.95;margin:13px 0 0}
.j-stat{text-align:center;padding-left:22px;border-left:1px solid rgba(255,255,255,.13)}
.j-stat b{display:block;font-size:37px;color:#fff;letter-spacing:-1.4px;line-height:1.2;font-weight:800}
.j-stat b i{font-style:normal;font-size:16px;margin-left:3px;color:rgba(255,255,255,.62);letter-spacing:0}
.j-stat span{color:rgba(255,255,255,.58);font-size:12.5px;letter-spacing:.09em}

/* ============================================================
   ④ Bento 权益网格
   ============================================================ */
.j-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(196px,auto);gap:18px}
.j-cell{
  position:relative;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);border-radius:22px;padding:28px;
  display:flex;flex-direction:column;transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .38s var(--ease);
}
.j-cell:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg);border-color:transparent}
.j-cell.s2{grid-column:span 2}
.j-cell.r2{grid-row:span 2}
.j-cell .ic{
  width:50px;height:50px;border-radius:15px;background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;flex:none;margin-bottom:17px;
}
.j-cell .ic svg{width:23px;height:23px;stroke:var(--brand);fill:none;stroke-width:1.9}
.j-cell h3{font-size:18.5px;letter-spacing:-.3px;margin-bottom:10px}
.j-cell p{color:var(--ink-3);font-size:13.4px;line-height:2.05;margin:0}
.j-tag-float{
  position:absolute;right:22px;top:22px;height:27px;padding:0 12px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:800;
  display:inline-flex;align-items:center;letter-spacing:.04em;
}
.j-cell.dark{
  background:linear-gradient(140deg,#101d3c 0%,#1b3568 100%);border-color:transparent;color:#fff;
}
.j-cell.dark h3{color:#fff}
.j-cell.dark p{color:rgba(255,255,255,.7)}
.j-cell.dark .ic{background:rgba(255,255,255,.14)}
.j-cell.dark .ic svg{stroke:#8ab4ff}

/* 大格：独立号主页 —— 内嵌迷你主页 */
.j-mini{
  margin-top:auto;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  border-radius:16px;padding:15px;display:flex;align-items:center;gap:13px;
}
.j-mini img{width:46px;height:46px;border-radius:13px;object-fit:cover;flex:none}
.j-mini .m-who{flex:1;min-width:0}
.j-mini .m-who b{display:flex;align-items:center;gap:6px;font-size:13.5px;color:#fff}
.j-mini .m-who span{font-size:10.5px;color:rgba(255,255,255,.6)}
.j-mini .m-tags{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.j-mini .m-tags i{
  font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.05em;
  padding:2.5px 8px;border-radius:999px;background:rgba(255,255,255,.13);color:rgba(255,255,255,.8);
}
.j-mini .m-btn{
  height:29px;padding:0 13px;border-radius:999px;background:#fff;color:#122249;
  font-size:11px;font-weight:800;display:inline-flex;align-items:center;flex:none;
}

/* 数据看板格：迷你柱状图 */
.j-bars{display:flex;align-items:flex-end;gap:9px;height:76px;margin-top:auto}
.j-bars i{
  flex:1;border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg,var(--brand),#7ea8ff);opacity:.9;
}
.j-cell.dark .j-bars i{background:linear-gradient(180deg,#5b8cff,#8ab4ff)}

/* 商业变现格：收益条目 */
.j-money{display:flex;flex-direction:column;gap:9px;margin-top:auto}
.j-money div{
  display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-3);
}
.j-money div b{margin-left:auto;color:var(--ink);font-size:12.5px;font-weight:800}
.j-money .track{flex:1;height:5px;border-radius:999px;background:var(--bg-2);overflow:hidden;max-width:96px}
.j-money .track i{display:block;height:100%;border-radius:999px;background:var(--brand)}

/* 创作者社群格：头像堆叠 */
.j-people{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:18px}
.j-people .stack{display:flex;flex:none}
.j-people .stack img{
  width:34px;height:34px;border-radius:50%;object-fit:cover;
  border:2px solid var(--surface);margin-left:-10px;
}
.j-people .stack img:first-child{margin-left:0}
.j-people .stack .more{
  width:34px;height:34px;border-radius:50%;margin-left:-10px;flex:none;
  background:var(--brand-soft);color:var(--brand);border:2px solid var(--surface);
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;
}
.j-people .lbl{font-size:11.5px;color:var(--ink-4);line-height:1.7}
.j-people .lbl b{display:block;color:var(--ink);font-size:13px;letter-spacing:-.1px}

/* ============================================================
   ⑤ 对比表
   ============================================================ */
.j-compare{
  border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--surface);
}
.j-crow{display:grid;grid-template-columns:1.15fr 1fr 1fr;align-items:stretch;border-bottom:1px solid var(--line-2)}
.j-crow:last-child{border-bottom:none}
.j-crow>div{padding:19px 26px;display:flex;align-items:center;gap:11px;font-size:13.6px;line-height:1.85}
.j-crow.head>div{padding:17px 26px;font-size:13px;font-weight:800;letter-spacing:.06em;background:var(--bg-2);color:var(--ink-2)}
.j-crow .k{font-weight:700;color:var(--ink)}
.j-crow .other{color:var(--ink-4)}
.j-crow .ours{
  color:var(--ink);font-weight:600;
  background:linear-gradient(90deg,var(--brand-soft),transparent 92%);
}
.j-crow.head .ours{background:var(--brand);color:#fff;justify-content:center}
.j-crow.head .other{justify-content:center;color:var(--ink-3)}
.j-ico-yes,.j-ico-no{
  width:21px;height:21px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
}
.j-ico-yes{background:var(--brand);color:#fff}
.j-ico-no{background:var(--bg-2);color:var(--ink-4)}
.j-ico-yes svg,.j-ico-no svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.6}

/* ============================================================
   ⑥ 适合谁（Tabs）
   ============================================================ */
.j-tabs{display:flex;gap:11px;flex-wrap:wrap;justify-content:center;margin-bottom:34px}
.j-tab{
  height:45px;padding:0 25px;border-radius:999px;background:var(--surface);
  border:1px solid var(--line);color:var(--ink-2);font-size:14px;font-weight:700;
  transition:.25s var(--ease);
}
.j-tab:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.j-tab.on{background:var(--ink);color:var(--bg);border-color:var(--ink);transform:translateY(-2px)}
html[data-theme="dark"] .j-tab.on{background:var(--brand);color:#fff;border-color:var(--brand)}

.j-who-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
.j-who-list{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:36px 34px}
.j-who-list h3{font-size:23px;letter-spacing:-.4px;margin-bottom:12px}
.j-who-list>p{color:var(--ink-3);font-size:13.8px;line-height:2.05;margin:0 0 22px}
.j-check{display:flex;flex-direction:column;gap:13px;margin-bottom:28px}
.j-check li{display:flex;align-items:flex-start;gap:11px;font-size:13.8px;line-height:1.85;color:var(--ink-2)}
.j-check li svg{width:18px;height:18px;stroke:var(--brand);fill:none;stroke-width:2.4;flex:none;margin-top:3px}
.j-check li b{color:var(--ink)}
.j-who-foot{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-top:22px;border-top:1px dashed var(--line);
}
.j-who-foot .note{font-size:12.3px;color:var(--ink-4);line-height:1.8}

.j-who-visual{
  position:relative;border-radius:22px;overflow:hidden;min-height:430px;display:flex;align-items:flex-end;
}
.j-who-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.j-who-visual .ov{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,20,42,.06) 32%,rgba(10,20,42,.9) 100%);
}
.j-who-visual .txt{position:relative;z-index:2;padding:32px;color:#fff;width:100%}
.j-who-visual .txt h4{font-size:19px;line-height:1.6;margin-bottom:9px}
.j-who-visual .txt p{font-size:13px;line-height:1.95;color:rgba(255,255,255,.76);margin:0}
.j-who-visual .chips{display:flex;gap:9px;margin-top:18px;flex-wrap:wrap}
.j-who-visual .chips i{
  font-style:normal;height:28px;padding:0 13px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);
  color:#fff;font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;
  backdrop-filter:blur(8px);
}

/* ============================================================
   ⑦ 入驻流程时间线
   ============================================================ */
.j-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-bottom:34px}
.j-step{position:relative;padding-top:62px}
.j-step .n{
  position:absolute;left:0;top:0;width:46px;height:46px;border-radius:15px;
  background:var(--brand);color:#fff;font-size:16px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 26px rgba(30,94,255,.3);
}
.j-step::before{
  content:"";position:absolute;top:23px;left:60px;right:12px;height:2px;
  background:repeating-linear-gradient(90deg,var(--line) 0 7px,transparent 7px 14px);
}
.j-step:last-child::before{display:none}
.j-step .dur{
  display:inline-flex;align-items:center;gap:6px;height:25px;padding:0 11px;
  border-radius:999px;background:var(--bg-2);color:var(--ink-4);
  font-size:11px;font-weight:700;letter-spacing:.04em;margin-bottom:11px;
}
.j-step h4{font-size:17px;letter-spacing:-.2px;margin-bottom:9px}
.j-step p{color:var(--ink-3);font-size:13.2px;line-height:2.05;margin:0}

.j-flow-note{
  display:grid;grid-template-columns:1.4fr 1fr;gap:26px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:30px 32px;
}
.j-flow-note h4{font-size:17px;margin-bottom:9px}
.j-flow-note p{color:var(--ink-3);font-size:13.2px;line-height:2.05;margin:0}
.j-doc-list{display:flex;flex-wrap:wrap;gap:9px}
.j-doc-list i{
  font-style:normal;height:32px;padding:0 14px;border-radius:999px;
  background:var(--bg-2);color:var(--ink-2);font-size:12px;font-weight:700;
  display:inline-flex;align-items:center;gap:7px;
}
.j-doc-list i svg{width:13px;height:13px;stroke:var(--brand);fill:none;stroke-width:2.2}

/* ============================================================
   ⑧ 创作者说
   ============================================================ */
.j-voices{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.j-voice{
  background:var(--surface);border:1px solid var(--line);border-radius:22px;
  padding:30px 28px;display:flex;flex-direction:column;gap:18px;
  transition:transform .38s var(--ease),box-shadow .38s var(--ease);
}
.j-voice:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg)}
a.j-voice{color:inherit;text-decoration:none}
.j-quote{
  font-size:38px;line-height:1;color:var(--brand);opacity:.24;font-weight:800;
  font-family:Georgia,serif;
}
.j-voice p{font-size:14px;line-height:2.1;color:var(--ink-2);margin:0;flex:1}
.j-voice-who{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--line-2)}
.j-voice-who img{width:44px;height:44px;border-radius:13px;object-fit:cover;flex:none}
.j-voice-who .info{flex:1;min-width:0}
.j-voice-who .info b{display:flex;align-items:center;gap:6px;font-size:14px;line-height:1.5}
.j-voice-who .info span{font-size:11.5px;color:var(--ink-4);letter-spacing:.04em}
.j-voice-metric{
  height:29px;padding:0 12px;border-radius:999px;background:var(--brand-soft);
  color:var(--brand);font-size:11.5px;font-weight:800;display:inline-flex;align-items:center;flex:none;
}

/* ============================================================
   ⑨ FAQ
   ============================================================ */
.j-faq-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:48px;align-items:start}
.j-faq-aside{position:sticky;top:26px}
.j-faq-aside .j-title{font-size:31px;margin-top:16px}
.j-faq-contact{
  margin-top:26px;background:var(--surface);border:1px solid var(--line);
  border-radius:20px;padding:26px 24px;
}
.j-faq-contact .ic{
  width:44px;height:44px;border-radius:13px;background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.j-faq-contact .ic svg{width:20px;height:20px;stroke:var(--brand);fill:none;stroke-width:2}
.j-faq-contact h4{font-size:15.5px;margin-bottom:8px}
.j-faq-contact p{color:var(--ink-3);font-size:12.8px;line-height:2;margin:0 0 17px}

.j-faq-list{display:flex;flex-direction:column;gap:14px}
.j-faq-item{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  margin-bottom:13px;overflow:hidden;transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.j-faq-item.open{border-color:var(--brand);box-shadow:var(--shadow)}
.j-faq-q{
  width:100%;display:flex;align-items:center;gap:16px;padding:21px 24px;text-align:left;
  font-size:15.2px;font-weight:700;color:var(--ink);line-height:1.65;
}
.j-faq-q .idx{
  font-size:11.5px;font-weight:800;color:var(--ink-4);letter-spacing:.1em;flex:none;
}
.j-faq-q .ic{
  margin-left:auto;width:28px;height:28px;border-radius:50%;background:var(--bg-2);
  display:flex;align-items:center;justify-content:center;flex:none;
  transition:transform .32s var(--ease),background .32s var(--ease),color .32s var(--ease);
}
.j-faq-q .ic svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4}
.j-faq-item.open .j-faq-q .ic{transform:rotate(45deg);background:var(--brand);color:#fff}
.j-faq-a{max-height:0;overflow:hidden;transition:max-height .38s var(--ease)}
.j-faq-a p{
  padding:0 24px 23px 24px;margin:0;color:var(--ink-3);
  font-size:13.6px;line-height:2.15;
}

/* ============================================================
   ⑩ 收尾 CTA
   ============================================================ */
.j-cta-wrap{padding:0 0 88px}
.j-cta{
  position:relative;overflow:hidden;border-radius:26px;padding:72px 56px;color:#fff;
  background:
    radial-gradient(720px 380px at 88% 0%,rgba(255,90,31,.32),transparent 62%),
    linear-gradient(118deg,#0d1c3e 0%,#173072 52%,#22479f 100%);
}
.j-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(680px 420px at 20% 100%,#000 0%,transparent 76%);
  -webkit-mask-image:radial-gradient(680px 420px at 20% 100%,#000 0%,transparent 76%);
}
.j-cta-in{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.j-cta h2{font-size:34px;line-height:1.48;letter-spacing:-.8px;margin:0 0 15px}
.j-cta h2 em{font-style:normal;color:#ffd08a}
.j-cta p{color:rgba(255,255,255,.74);font-size:14.5px;line-height:2.1;margin:0 0 30px;max-width:520px}
.j-cta-btns{display:flex;gap:13px;flex-wrap:wrap}
.j-cta-side{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  border-radius:20px;padding:28px 26px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.j-cta-side h4{font-size:13px;letter-spacing:.12em;color:rgba(255,255,255,.62);margin-bottom:18px;text-transform:uppercase}
.j-cta-side li{
  display:flex;align-items:center;gap:11px;font-size:13.4px;color:#fff;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.12);line-height:1.7;
}
.j-cta-side li:last-child{border-bottom:none;padding-bottom:0}
.j-cta-side li svg{width:17px;height:17px;stroke:#7dffb8;fill:none;stroke-width:2.5;flex:none}

/* ============================================================
   响应式
   ============================================================ */
@media(max-width:1180px){
  .j-bento{grid-template-columns:repeat(2,1fr)}
  .j-cell.r2{grid-row:span 1}
  .j-stats-in{grid-template-columns:1fr 1fr;gap:22px}
  .j-stats-lead{grid-column:1/-1}
  .j-stat{border-left:none;padding-left:0}
}
@media(max-width:1080px){
  .j-hero-in{grid-template-columns:1fr;gap:52px}
  .j-visual{max-width:560px;margin:0 auto;width:100%}
  .j-f1{left:-8px}
  .j-f3{left:-8px}
  .j-cta-in{grid-template-columns:1fr}
  .j-faq-grid{grid-template-columns:1fr;gap:32px}
  .j-faq-aside{position:static}
  .j-flow{grid-template-columns:repeat(2,1fr);gap:30px 26px}
  .j-step:nth-child(2)::before{display:none}
}
@media(max-width:900px){
  .j-who-grid{grid-template-columns:1fr}
  .j-who-visual{min-height:320px}
  .j-voices{grid-template-columns:1fr}
  .j-flow-note{grid-template-columns:1fr;gap:20px}
}
@media(max-width:820px){
  .j-sec{padding:62px 0}
  .j-sec.alt{padding:58px 0}
  .j-title{font-size:29px;letter-spacing:-.5px}
  .j-hero{padding:62px 0 72px}
  .j-hero h1{font-size:33px;letter-spacing:-1px}
  .j-hero .lead{font-size:14.5px}
  .j-compare{border-radius:18px}
  .j-crow{grid-template-columns:1fr}
  .j-crow>div{padding:13px 20px}
  .j-crow.head{display:none}
  .j-crow .k{background:var(--bg-2);font-size:12.5px}
  .j-crow .other::before{content:"传统平台 · ";color:var(--ink-4);font-weight:700;flex:none}
  .j-crow .ours::before{content:"视界号 · ";color:var(--brand);font-weight:800;flex:none}
  .j-cta{padding:48px 26px}
  .j-cta h2{font-size:25px}
  .j-stats{padding:38px 26px}
  .j-stats-lead h2{font-size:22px}
  .j-stat b{font-size:29px}
}
@media(max-width:560px){
  .j-bento{grid-template-columns:1fr}
  .j-cell.s2{grid-column:span 1}
  .j-flow{grid-template-columns:1fr;gap:28px}
  .j-step::before{display:none}
  .j-stats-in{grid-template-columns:1fr 1fr;gap:18px}
  .j-proof-sep,.j-proof-mini{display:none}
  .j-hero-cta .j-btn{width:100%}
  .j-cta-btns .j-btn{width:100%}
  .j-float{display:none}
  .j-panel{padding:18px}
  .j-who-list{padding:26px 22px}
}