/* ═══════ 科幻 Hero ═══════ */
/* 与更新动态同一套做法：100vw 出血铺满屏幕宽度，裁剪放在 html/body，
   内容容器不裁剪，否则宽屏下出血会被裁回 .wrap 宽度；
   左右内边距按 .wrap 内容区动态计算，文字/终端窗仍与下方栏目左对齐 */
html,body{overflow-x:clip}
.sf-hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);
  overflow:hidden;color:#eaf0ff;
  background:linear-gradient(135deg,#0b1030 0%,#141a4a 45%,#1d1250 100%);
  padding:clamp(48px,5vw,72px) max(24px,calc((100vw - 1412px)/2)) clamp(44px,4.6vw,66px);
  box-shadow:0 24px 70px rgba(20,30,90,.35)}
.sf-hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(560px 360px at 82% 18%,rgba(124,77,255,.42),transparent 70%),
    radial-gradient(480px 320px at 12% 85%,rgba(34,211,238,.25),transparent 70%),
    radial-gradient(300px 220px at 45% 40%,rgba(59,130,246,.18),transparent 70%)}
.sf-stars,.sf-stars2{position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%,#fff,transparent 60%),
    radial-gradient(1px 1px at 34% 68%,rgba(255,255,255,.85),transparent 60%),
    radial-gradient(1.6px 1.6px at 58% 14%,#cfe3ff,transparent 60%),
    radial-gradient(1px 1px at 72% 48%,rgba(255,255,255,.9),transparent 60%),
    radial-gradient(1.3px 1.3px at 88% 76%,#ffe9c9,transparent 60%),
    radial-gradient(1px 1px at 22% 88%,rgba(255,255,255,.7),transparent 60%),
    radial-gradient(1.2px 1.2px at 46% 34%,#fff,transparent 60%),
    radial-gradient(1px 1px at 66% 88%,rgba(207,227,255,.8),transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 28%,#fff,transparent 60%),
    radial-gradient(1px 1px at 6% 56%,rgba(255,255,255,.8),transparent 60%);
  background-size:640px 640px;animation:sf-twinkle 4.5s ease-in-out infinite}
.sf-stars2{background-size:420px 420px;animation-delay:-2.2s;opacity:.6}
@keyframes sf-twinkle{0%,100%{opacity:.55}50%{opacity:1}}
/* 网格地平线 */
.sf-grid{position:absolute;left:-20%;right:-20%;bottom:-6%;height:46%;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(125,211,252,.16) 0 1px,transparent 1px 70px),
    repeating-linear-gradient(0deg,rgba(125,211,252,.16) 0 1px,transparent 1px 46px);
  transform:perspective(620px) rotateX(58deg);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 32%,transparent 96%);
          mask-image:linear-gradient(180deg,transparent 0,#000 32%,transparent 96%)}
.sf-orb{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none;opacity:.85}
.sf-orb.o1{width:14px;height:14px;left:14%;top:30%;background:#7dd3fc;box-shadow:0 0 18px 4px rgba(125,211,252,.65);animation:sf-float 7s ease-in-out infinite}
.sf-orb.o2{width:9px;height:9px;left:38%;top:64%;background:#c084fc;box-shadow:0 0 14px 3px rgba(192,132,252,.6);animation:sf-float 9s ease-in-out -3s infinite}
.sf-orb.o3{width:11px;height:11px;right:12%;bottom:20%;background:#34d399;box-shadow:0 0 16px 4px rgba(52,211,153,.55);animation:sf-float 8s ease-in-out -5s infinite}
@keyframes sf-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-26px)}}
.sf-inner{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;z-index:2}
.sf-badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:1px;
  color:#9ee7ff;border:1px solid rgba(125,211,252,.4);background:rgba(125,211,252,.08);
  padding:7px 16px;border-radius:999px;margin-bottom:22px}
.sf-badge i{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 8px 2px rgba(52,211,153,.8);animation:sf-blink 1.6s infinite}
@keyframes sf-blink{0%,100%{opacity:1}50%{opacity:.35}}
.sf-title{margin:0;font-size:46px;line-height:1.18;font-weight:800;letter-spacing:1px;
  background:linear-gradient(92deg,#e6f2ff 0%,#7dd3fc 42%,#a78bfa 78%,#f0abfc 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 24px rgba(125,140,255,.45))}
.sf-sub{margin:18px 0 0;font-size:16.5px;color:#aeb9e8;line-height:1.9}
.sf-sub b{color:#eaf0ff;font-weight:600}
.sf-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.sf-chip{font-size:12px;font-family:ui-monospace,Consolas,monospace;color:#8fd7ff;
  border:1px solid rgba(125,211,252,.28);background:rgba(13,20,50,.5);padding:5px 12px;border-radius:8px}
.sf-actions{display:flex;gap:16px;align-items:center;margin-top:34px;flex-wrap:wrap}
.sf-btn{position:relative;display:inline-flex;align-items:center;gap:8px;padding:14px 34px;border-radius:999px;
  font-size:15.5px;font-weight:700;color:#fff;text-decoration:none;overflow:hidden;
  background:linear-gradient(92deg,#2563eb,#7c3aed 60%,#c026d3);
  box-shadow:0 8px 30px rgba(124,58,237,.5);transition:transform .2s,box-shadow .2s}
.sf-btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(124,58,237,.7);color:#fff}
.sf-btn::after{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  animation:sf-sheen 3.2s ease-in-out infinite}
@keyframes sf-sheen{0%{left:-80%}55%,100%{left:130%}}
.sf-btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:13px 30px;border-radius:999px;
  font-size:15px;color:#bcd0ff;border:1px solid rgba(140,160,255,.4);background:rgba(255,255,255,.04);
  transition:background .2s,color .2s}
.sf-btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}
/* 玻璃代码窗 */
.sf-code{position:relative;background:rgba(10,16,42,.55);border:1px solid rgba(130,150,255,.22);
  border-radius:18px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 30px 60px rgba(0,0,10,.45),inset 0 1px 0 rgba(255,255,255,.08);
  animation:sf-hover 6s ease-in-out infinite}
@keyframes sf-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.sf-code::before{content:'';position:absolute;inset:-1px;border-radius:18px;padding:1px;pointer-events:none;
  background:linear-gradient(120deg,rgba(125,211,252,.55),transparent 30%,transparent 65%,rgba(192,132,252,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.sf-code-head{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid rgba(130,150,255,.15)}
.sf-code-head i{width:11px;height:11px;border-radius:50%}
.sf-code-head i:nth-child(1){background:#ff5f57}.sf-code-head i:nth-child(2){background:#febc2e}.sf-code-head i:nth-child(3){background:#28c840}
.sf-code-head span{margin-left:8px;font-size:11.5px;color:#7c89b8;font-family:ui-monospace,Consolas,monospace}
.sf-code-body{padding:18px 20px;font-family:ui-monospace,Consolas,'Courier New',monospace;font-size:13px;line-height:2.05;min-height:196px}
.sf-code-body .ln{display:block;white-space:pre;color:#9fb0e8}
.sf-code-body .k{color:#c792ea}.sf-code-body .s{color:#a5e2a5}.sf-code-body .f{color:#7dd3fc}.sf-code-body .c{color:#5a6a9e}.sf-code-body .n{color:#ffcb6b}
.sf-cursor{display:inline-block;width:8px;height:15px;background:#7dd3fc;vertical-align:-2px;animation:sf-blink 1s steps(1) infinite}
.sf-code-foot{display:flex;gap:18px;padding:12px 20px;border-top:1px solid rgba(130,150,255,.15);font-size:11.5px;color:#8ea0d8;font-family:ui-monospace,Consolas,monospace}
.sf-code-foot b{color:#34d399}
/* ═══════ 特性卡：流光玻璃（横向布局 + 序号水印） ═══════ */
.hp-feats .card.feature{position:relative;overflow:hidden;border:1px solid transparent;
  display:flex;align-items:center;gap:15px;padding:22px 20px;min-height:112px;
  background:linear-gradient(var(--card,#fff),var(--card,#fff)) padding-box,
             linear-gradient(135deg,rgba(99,132,255,.45),rgba(168,120,255,.28) 55%,rgba(236,72,153,.22)) border-box;
  border-radius:16px;transition:transform .25s,box-shadow .25s}
.hp-feats .card.feature::before{content:'';position:absolute;top:0;left:18%;right:18%;height:3px;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,#4d7dff,#a855f7,#ec4899);opacity:.9}
.hp-feats .card.feature::after{content:'';position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(90,120,255,.08),transparent);transition:left .55s}
.hp-feats .card.feature:hover{transform:translateY(-7px);box-shadow:0 22px 48px rgba(70,90,220,.20)}
.hp-feats .card.feature:hover::after{left:130%}
.hp-feats .card.feature .icon{width:56px;height:56px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:26px;flex:none;
  box-shadow:0 10px 22px rgba(60,80,220,.30);transition:transform .25s}
.hp-feats .card.feature:hover .icon{transform:scale(1.1) rotate(-4deg)}
.hp-feats .card.feature .fx-body{flex:1;min-width:0}
.hp-feats .card.feature h3{font-size:16.5px;margin:0}
.hp-feats .card.feature p{font-size:13px;color:var(--muted);margin:6px 0 0;line-height:1.7}
.hp-feats .card.feature .fx-num{position:absolute;right:14px;top:10px;font-size:38px;font-weight:900;line-height:1;
  letter-spacing:1px;pointer-events:none;user-select:none;
  background:linear-gradient(135deg,rgba(99,132,255,.16),rgba(168,120,255,.10));
  -webkit-background-clip:text;background-clip:text;color:transparent;transition:.25s}
.hp-feats .card.feature:hover .fx-num{background:linear-gradient(135deg,rgba(99,132,255,.34),rgba(168,120,255,.22));
  -webkit-background-clip:text;background-clip:text;transform:translateY(-2px)}
/* ═══════ 栏目标题：渐变竖条 ═══════ */
.hp-home .hp-sec-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.hp-home .hp-sec-head h2{font-size:23px;font-weight:800;margin:0;position:relative;padding-left:16px;line-height:1.3}
.hp-home .hp-sec-head h2::before{content:'';position:absolute;left:0;top:5px;bottom:5px;width:5px;border-radius:3px;
  background:linear-gradient(180deg,#4d7dff,#a855f7);box-shadow:0 4px 12px rgba(90,90,240,.4)}
.hp-home .hp-sec-head h2::after{display:none}
.hp-home .hp-sec-head p{margin:0;font-size:13.5px}
/* ═══════ 产品卡 ═══════ */
.hp-home .grid.grid-3 > .card{height:100%}
.hp-home .hp-prod{display:flex;flex-direction:column;border-radius:16px;position:relative;overflow:hidden;
  transition:transform .25s,box-shadow .25s,border-color .25s}
.hp-home .hp-prod-top{height:3px;background:linear-gradient(90deg,#4d7dff,#a855f7,#ec4899)}
.hp-home .hp-prod:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(80,90,220,.18);border-color:rgba(99,132,255,.5)}
.hp-home .hp-prod .hp-prod-body{padding:20px 20px 18px;display:flex;flex-direction:column;flex:1}
.hp-home .hp-prod-tags{margin-bottom:12px}
.hp-home .hp-prod-tags .tag{border-radius:999px;padding:3px 12px;font-size:11.5px;font-weight:600;
  border:1px solid rgba(99,132,255,.28);background:rgba(99,132,255,.07);color:#4d6bdf}
.hp-home .hp-prod-tags .tag-free{background:rgba(39,174,96,.08);border-color:rgba(39,174,96,.3);color:#1e9e56}
.hp-home .hp-prod-tags .tag-pay{background:rgba(230,126,34,.07);border-color:rgba(230,126,34,.32);color:#c96a15}
.hp-home .hp-prod h3{font-size:16.5px;transition:color .2s}
.hp-home .hp-prod p{font-size:13.5px;line-height:1.75;color:var(--muted);margin-top:8px;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hp-home .hp-prod .hp-prod-foot{margin-top:14px;padding-top:14px;border-top:1px dashed var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.hp-home .hp-prod .price{font-size:21px;font-weight:800;
  background:linear-gradient(92deg,#e74c3c,#c026d3);-webkit-background-clip:text;background-clip:text;color:transparent}
.hp-home .hp-prod .price.free{background:linear-gradient(92deg,#059669,#10b981);-webkit-background-clip:text;background-clip:text}
.hp-home .hp-prod .hp-prod-foot .btn-primary{border-radius:999px;padding:8px 20px;font-size:13px;font-weight:600;
  background:linear-gradient(92deg,#2563eb,#7c3aed);box-shadow:0 6px 18px rgba(90,80,230,.35);transition:transform .2s,box-shadow .2s}
.hp-home .hp-prod .hp-prod-foot .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(90,80,230,.5)}
/* ═══════ 文档卡 ═══════ */
.hp-home .hp-doc{display:flex;flex-direction:column;border-radius:16px;transition:transform .25s,box-shadow .25s,border-color .25s;position:relative;overflow:hidden}
.hp-home .hp-doc::before{content:'';position:absolute;top:0;left:18%;right:18%;height:3px;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,#22d3ee,#4d7dff);opacity:0;transition:opacity .25s}
.hp-home .hp-doc:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(60,110,220,.16);border-color:rgba(99,160,255,.5)}
.hp-home .hp-doc:hover::before{opacity:1}
.hp-home .hp-doc .tag{border-radius:999px;padding:3px 12px;font-size:11.5px;border:1px solid rgba(34,160,220,.28);background:rgba(34,160,220,.07);color:#1d84b5;align-self:flex-start}
.hp-home .hp-doc h3{margin-top:8px}
.hp-home .hp-doc p{font-size:13.5px;line-height:1.75;flex:1;margin-bottom:10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* ═══════ 资讯/社区面板 ═══════ */
.hp-home .hp-panel{border-radius:16px;padding:20px 22px;transition:box-shadow .25s}
.hp-home .hp-panel:hover{box-shadow:0 16px 40px rgba(60,90,200,.12)}
.hp-home .hp-panel-head h3{font-size:16.5px;position:relative;padding-left:14px}
.hp-home .hp-panel-head h3::before{content:'';position:absolute;left:0;top:3px;bottom:3px;width:4px;border-radius:2px;
  background:linear-gradient(180deg,#4d7dff,#a855f7)}
.hp-home .hp-row{padding:12px 0}
.hp-home .hp-row strong{font-size:14.5px;transition:color .2s}
@media (max-width:900px){
  .sf-hero{padding:44px 24px 40px}
  .sf-inner{grid-template-columns:1fr;gap:34px}
  .sf-title{font-size:32px}
  .sf-sub{font-size:14.5px}
  .sf-code{max-width:100%}
  .sf-btn{padding:12px 26px;font-size:14.5px}
  .hp-feats .card.feature{padding:20px 16px 16px}
  .hp-home .hp-sec-head{gap:10px}
  .hp-home .hp-sec-head h2{font-size:19px}
}