/* roulang page: index */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--veil);color:var(--ink);font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.75;font-weight:400}
:root{
  --ink:#edf0f7;
  --mute:#98a1b6;
  --glow:#ff6b3d;
  --glow2:#7b5cff;
  --veil:#0d1018;
  --veil2:#121721;
  --line:rgba(255,255,255,.10);
  --r1:16px;
  --sh1:0 18px 42px rgba(0,0,0,.48);
  --gap:24px;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
button{font:inherit}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px}

.nfns-shell{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}

/* 顶栏 */
.nfns-top{position:sticky;top:0;z-index:60;background:rgba(11,14,21,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nfns-top-in{display:flex;align-items:center;gap:20px;min-height:70px}
.nfns-brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.nfns-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--glow),var(--glow2));color:#fff;font-size:13px;font-weight:700;letter-spacing:.02em}
.nfns-menu{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.nfns-menu::-webkit-scrollbar{display:none}
.nfns-menu a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;color:var(--mute);font-size:15px;white-space:nowrap;transition:color .2s,background .2s}
.nfns-menu a:hover{color:var(--ink);background:rgba(255,255,255,.07)}
.nfns-menu a.is-on{color:#fff;background:rgba(255,107,61,.16)}

/* 首屏 */
.nfns-hero{position:relative;isolation:isolate;padding:92px 0 84px;background:#090c12 url(/assets/images/backpic/back-1.webp) center/cover no-repeat}
.nfns-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(8,10,16,.95) 0%,rgba(8,10,16,.8) 46%,rgba(8,10,16,.42) 100%)}
.nfns-hero-in{max-width:660px}
.nfns-kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;border:1px solid rgba(255,107,61,.4);background:rgba(255,107,61,.14);color:#ffc9b2;font-size:13px;letter-spacing:.06em;margin-bottom:22px}
.nfns-h1{font-size:clamp(30px,4.8vw,50px);line-height:1.24;font-weight:800;letter-spacing:.01em}
.nfns-h1 em{font-style:normal;color:var(--glow);display:inline-block;margin-left:.2em;background:linear-gradient(120deg,#ff8a4c,#ffd08a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nfns-hero-sub{margin-top:16px;font-size:16px;color:#ffd9c9;letter-spacing:.01em}
.nfns-hero-txt{margin-top:16px;color:#b9c1d3;font-size:15px;line-height:1.85;max-width:610px}
.nfns-hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.nfns-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;border-radius:999px;border:0;cursor:pointer;font-size:16px;font-weight:700;color:#20100a;background:linear-gradient(135deg,var(--glow),#ffa14f);transition:transform .18s,box-shadow .18s}
.nfns-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(255,107,61,.34)}
.nfns-btn-ghost{background:transparent;color:var(--ink);border:1px solid rgba(255,255,255,.3);font-weight:600}
.nfns-btn-ghost:hover{border-color:rgba(255,255,255,.6);box-shadow:none}
.nfns-tip{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:28px;color:var(--mute);font-size:14px}
.nfns-tip span{display:inline-flex;align-items:center;gap:8px}
.nfns-dot{width:7px;height:7px;border-radius:50%;background:var(--glow);display:inline-block}

/* 通用板块 */
.nfns-sec{padding:64px 0;border-top:1px solid var(--line);scroll-margin-top:84px}
.nfns-sec--alt{background:var(--veil2)}
.nfns-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 26px;margin-bottom:32px}
.nfns-head h2{font-size:clamp(21px,2.6vw,28px);line-height:1.35;font-weight:700}
.nfns-head p{flex:1 1 460px;max-width:760px;color:var(--mute);font-size:15px}

/* 看点三连 */
.nfns-three{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.nfns-three article{padding:26px 24px;border-radius:var(--r1);background:linear-gradient(160deg,#171d29,#111520);border:1px solid var(--line);transition:border-color .22s,transform .22s}
.nfns-three article:hover{border-color:rgba(123,92,255,.45);transform:translateY(-3px)}
.nfns-three h3{font-size:17px;margin-bottom:10px;color:#fff}
.nfns-three p{color:var(--mute);font-size:14px;line-height:1.72}

/* 分类频道 */
.nfns-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.nfns-cat{padding:24px 22px;border-radius:var(--r1);background:#131826;border:1px solid var(--line)}
.nfns-cat h3{font-size:16px;margin-bottom:8px;color:#ffb894;font-weight:700}
.nfns-cat p{color:var(--mute);font-size:14px;line-height:1.72}

/* 卡片墙 */
.nfns-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.nfns-card{background:#131826;border:1px solid var(--line);border-radius:var(--r1);overflow:hidden;display:flex;flex-direction:column;transition:transform .22s,border-color .22s,box-shadow .22s}
.nfns-card:hover{transform:translateY(-4px);border-color:rgba(255,107,61,.45);box-shadow:var(--sh1)}
.nfns-thumb{position:relative;aspect-ratio:3/4;overflow:hidden;background:#1a2030}
.nfns-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.nfns-card:hover .nfns-thumb img{transform:scale(1.05)}
.nfns-badge{position:absolute;top:10px;left:10px;padding:4px 11px;border-radius:999px;background:rgba(9,12,18,.8);border:1px solid rgba(255,255,255,.16);color:#ffd2c0;font-size:12px;line-height:1.5}
.nfns-card-b{padding:14px 16px 18px}
.nfns-card-b h3{font-size:16px;margin-bottom:6px;font-weight:700}
.nfns-card-b p{color:var(--mute);font-size:14px;line-height:1.62}

/* 榜单 */
.nfns-rank{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 22px}
.nfns-rank li{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:12px;background:#131826;border:1px solid var(--line);min-height:56px}
.nfns-no{width:26px;flex:0 0 26px;font-weight:800;color:var(--glow);font-variant-numeric:tabular-nums}
.nfns-rank b{font-weight:600}
.nfns-tag{margin-left:auto;padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--mute);font-size:12px;white-space:nowrap}
.nfns-rank li:nth-child(-n+3) .nfns-no{color:#ffd08a}

/* 文字列表 */
.nfns-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.nfns-list li{padding:16px 18px;border-left:3px solid var(--glow2);background:#131826;border-radius:0 12px 12px 0}
.nfns-list strong{display:block;margin-bottom:4px;font-size:15px}
.nfns-list span{color:var(--mute);font-size:14px;line-height:1.68}

/* 专题 */
.nfns-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.nfns-col{padding:26px 24px;border-radius:var(--r1);background:linear-gradient(150deg,#1a1626,#12161f);border:1px solid rgba(123,92,255,.28)}
.nfns-col h3{font-size:17px;margin-bottom:10px}
.nfns-col p{color:var(--mute);font-size:14px;line-height:1.72}
.nfns-col small{display:inline-block;margin-top:14px;color:#b9a6ff;font-size:13px}

/* 资讯 */
.nfns-news{border-top:1px solid var(--line)}
.nfns-news li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;padding:16px 0;border-bottom:1px solid var(--line)}
.nfns-when{flex:0 0 68px;color:var(--glow);font-size:13px}
.nfns-news b{font-weight:500;font-size:15px}

/* 问答 */
.nfns-faq{display:grid;gap:12px;max-width:900px}
.nfns-faq details{background:#131826;border:1px solid var(--line);border-radius:12px;padding:0 18px}
.nfns-faq summary{display:flex;align-items:center;min-height:58px;cursor:pointer;font-weight:600;font-size:15px;list-style:none}
.nfns-faq summary::-webkit-details-marker{display:none}
.nfns-faq summary::after{content:"+";margin-left:auto;color:var(--glow);font-size:20px;line-height:1}
.nfns-faq details[open] summary::after{content:"−"}
.nfns-faq p{padding:0 0 18px;color:var(--mute);font-size:14px;line-height:1.78}

/* 收口 */
.nfns-cta{position:relative;isolation:isolate;padding:70px 0;text-align:center;background:#0a0d14 url(/assets/images/backpic/back-3.webp) center/cover no-repeat;border-top:1px solid var(--line)}
.nfns-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(9,12,18,.9),rgba(9,12,18,.72))}
.nfns-cta h2{font-size:clamp(22px,2.8vw,30px);margin-bottom:14px}
.nfns-cta p{max-width:640px;margin:0 auto 26px;color:#b9c1d3;font-size:15px}

/* 页脚 */
.nfns-foot{background:#080b11;border-top:1px solid var(--line);padding:52px 0 24px}
.nfns-foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.nfns-foot h4{font-size:15px;margin-bottom:14px;color:#fff}
.nfns-foot p{color:var(--mute);font-size:14px;line-height:1.8}
.nfns-foot li{margin-bottom:6px}
.nfns-foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--mute);font-size:14px;transition:color .2s}
.nfns-foot a:hover{color:var(--glow)}
.nfns-plain li{color:var(--mute);font-size:14px;line-height:2}
.nfns-copy{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;color:#6f7889;font-size:13px}

@media (max-width:1024px){
  .nfns-hero{padding:76px 0 68px}
  .nfns-grid{grid-template-columns:repeat(3,1fr);gap:18px}
  .nfns-three,.nfns-cats,.nfns-cols{grid-template-columns:repeat(2,1fr)}
  .nfns-foot-grid{grid-template-columns:1.4fr 1fr 1fr}
  .nfns-foot-grid > div:last-child{grid-column:1 / -1}
}
@media (max-width:768px){
  .nfns-top-in{min-height:62px;gap:12px}
  .nfns-brand{font-size:15px}
  .nfns-menu{margin-left:0;flex:1}
  .nfns-menu a{padding:0 12px;font-size:14px}
  .nfns-hero{padding:60px 0 54px}
  .nfns-hero-txt{font-size:14px}
  .nfns-sec{padding:48px 0}
  .nfns-head{margin-bottom:24px}
  .nfns-grid{gap:14px}
  .nfns-three,.nfns-cats,.nfns-cols,.nfns-rank,.nfns-list{grid-template-columns:1fr}
  .nfns-foot{padding:40px 0 20px}
  .nfns-foot-grid{grid-template-columns:1fr 1fr;gap:24px}
}
@media (max-width:520px){
  .nfns-shell{padding:0 16px}
  .nfns-mark{width:30px;height:30px;border-radius:9px;font-size:12px}
  .nfns-hero-btns .nfns-btn{width:100%}
  .nfns-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .nfns-card-b{padding:12px 12px 16px}
  .nfns-card-b h3{font-size:15px}
  .nfns-card-b p{font-size:13.5px}
  .nfns-badge{font-size:11px;padding:3px 9px}
  .nfns-tag{font-size:11px}
  .nfns-when{flex:0 0 auto}
  .nfns-foot-grid{grid-template-columns:1fr}
  .nfns-foot-grid > div:last-child{grid-column:auto}
}