/* roulang page: index */
:root{
  --bg:#050A14;
  --bg-2:#07111F;
  --bg-3:#0C1A2E;
  --primary:#1FD1FF;
  --primary-2:#17B8E8;
  --accent:#7CFF6B;
  --accent-2:#38E07B;
  --amber:#FFB020;
  --text:#EAF3FF;
  --text-2:#9FB3CE;
  --muted:#65758B;
  --border:rgba(255,255,255,0.12);
  --border-strong:rgba(255,255,255,0.28);
  --glass:rgba(255,255,255,0.06);
  --glass-hover:rgba(255,255,255,0.09);
  --glow:rgba(31,209,255,0.35);
  --radius-card:20px;
  --radius-btn:14px;
  --shadow-card:0 16px 40px rgba(0,0,0,0.32);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:1rem;
  line-height:1.8;
  color:var(--text);
  background-color:var(--bg);
  background-image:
    radial-gradient(900px 520px at 12% -8%, rgba(31,209,255,0.16), transparent 62%),
    radial-gradient(760px 460px at 92% 6%, rgba(124,255,107,0.10), transparent 60%),
    radial-gradient(680px 520px at 50% 108%, rgba(31,209,255,0.10), transparent 62%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.028) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.028) 0 1px, transparent 1px 64px);
  background-attachment:fixed;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;}
h1,h2,h3,h4{margin:0;font-weight:800;line-height:1.28;letter-spacing:-0.01em;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
::selection{background:rgba(31,209,255,0.34);color:#fff;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:#050A14;}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#17B8E8,#0C1A2E);border-radius:999px;border:2px solid #050A14;}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}

.container{width:100%;max-width:1240px;margin:0 auto;padding:0 16px;}
@media (min-width:768px){.container{padding:0 24px;}}
@media (min-width:1024px){.container{padding:0 32px;}}

.glass{
  background:var(--glass);
  border:1px solid var(--border);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
}
.glass-hover{transition:transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease;}
.glass-hover:hover{
  transform:translateY(-4px);
  border-color:var(--border-strong);
  background:var(--glass-hover);
  box-shadow:0 22px 52px rgba(0,0,0,0.42), 0 0 24px rgba(31,209,255,0.18);
}
.glow{box-shadow:0 0 24px var(--glow);}
.text-gradient{
  background:linear-gradient(100deg,#EAF3FF 6%,#1FD1FF 46%,#7CFF6B 96%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.num{font-family:"DIN Alternate","SF Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;letter-spacing:-0.02em;}

.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:var(--radius-btn);border:0;
  background:linear-gradient(96deg,#1FD1FF,#7CFF6B);
  color:#04121F;font-weight:700;font-size:0.95rem;
  box-shadow:0 0 22px rgba(31,209,255,0.34);
  transition:transform .22s ease, filter .22s ease, box-shadow .22s ease;
}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 0 30px rgba(31,209,255,0.52);}
.btn-primary:active{transform:scale(0.98);}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:var(--radius-btn);
  background:rgba(255,255,255,0.04);border:1px solid var(--border);
  color:var(--text);font-weight:600;font-size:0.95rem;
  transition:background .22s ease, border-color .22s ease, transform .22s ease;
}
.btn-ghost:hover{background:rgba(255,255,255,0.10);border-color:var(--border-strong);transform:translateY(-1px);}
.btn-ghost:active{transform:scale(0.98);}

.link-arrow{display:inline-flex;align-items:center;gap:6px;color:var(--primary);font-weight:600;font-size:0.9rem;transition:color .2s ease;}
.link-arrow .arw{transition:transform .22s ease;}
.link-arrow:hover{color:var(--accent);}
.link-arrow:hover .arw{transform:translateX(3px);}

.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:999px;font-size:0.75rem;font-weight:600;
  background:rgba(31,209,255,0.12);border:1px solid rgba(31,209,255,0.28);color:#9FE9FF;
}
.tag-lime{background:rgba(124,255,107,0.12);border-color:rgba(124,255,107,0.30);color:#B8FFAE;}
.tag-amber{background:rgba(255,176,32,0.12);border-color:rgba(255,176,32,0.30);color:#FFD48A;}

.section{padding:64px 0;}
@media (min-width:768px){.section{padding:92px 0;}}
@media (min-width:1024px){.section{padding:104px 0;}}

.eyebrow{font-size:0.75rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.h2{font-size:clamp(1.75rem,3.2vw,2.5rem);}
.h3{font-size:1.25rem;}
@media (min-width:768px){.h3{font-size:1.375rem;}}
.lead{color:var(--text-2);font-size:1.0625rem;line-height:1.85;}

.nav-shell{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);
  width:min(1120px,92vw);z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 16px;border-radius:999px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 14px 40px rgba(0,0,0,0.36);
}
.nav-link{
  position:relative;padding:8px 14px;border-radius:999px;
  font-size:0.9rem;font-weight:500;color:var(--text-2);
  transition:color .22s ease, background .22s ease;
}
.nav-link::after{
  content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#1FD1FF,#7CFF6B);opacity:0;transform:scaleX(.4);
  transition:opacity .26s ease, transform .26s ease;
}
.nav-link:hover{color:var(--text);background:rgba(255,255,255,0.06);}
.nav-link:hover::after{opacity:1;transform:scaleX(1);}
.nav-link.active{color:#fff;background:rgba(255,255,255,0.10);}
.nav-link.active::after{opacity:1;transform:scaleX(1);}
.mobile-panel{
  position:fixed;top:82px;left:50%;transform:translateX(-50%);
  width:min(1120px,92vw);z-index:49;
  border-radius:24px;padding:18px;
  background:rgba(7,17,31,0.94);
  border:1px solid var(--border);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 24px 60px rgba(0,0,0,0.5);
  display:none;
}
.mobile-panel.open{display:block;}
.mobile-link{display:block;padding:14px 16px;border-radius:14px;font-size:1.05rem;font-weight:600;color:var(--text);}
.mobile-link:hover,.mobile-link.active{background:rgba(255,255,255,0.08);}

.hero{
  position:relative;overflow:hidden;
  padding:132px 0 64px;
}
@media (min-width:768px){.hero{padding:160px 0 88px;}}
.hero-bg{
  position:absolute;inset:0;z-index:-1;
  background-image:url('/assets/images/backpic/back-1.png');
  background-size:cover;background-position:center;
  opacity:0.13;
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(5,10,20,0.72) 0%, rgba(5,10,20,0.90) 58%, #050A14 100%);
}
.hero-orb{
  position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;
}
.orb-a{width:380px;height:380px;top:-120px;left:-90px;background:rgba(31,209,255,0.22);}
.orb-b{width:320px;height:320px;bottom:-140px;right:-60px;background:rgba(124,255,107,0.16);}

.ring{
  --p:78;
  width:132px;height:132px;border-radius:50%;
  background:conic-gradient(#1FD1FF calc(var(--p)*1%), rgba(255,255,255,0.09) 0);
  display:grid;place-items:center;position:relative;
  box-shadow:0 0 26px rgba(31,209,255,0.28);
}
.ring::before{
  content:"";position:absolute;inset:11px;border-radius:50%;
  background:#07111F;border:1px solid rgba(255,255,255,0.08);
}
.ring span{position:relative;z-index:1;font-size:1.6rem;font-weight:800;}

.bar-track{height:8px;border-radius:999px;background:rgba(255,255,255,0.08);overflow:hidden;}
.bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#1FD1FF,#7CFF6B);}
.bar-fill-amber{background:linear-gradient(90deg,#FFB020,#7CFF6B);}

.metric-card{position:relative;overflow:hidden;padding:24px;}
.metric-card .num{font-size:clamp(2.2rem,4.4vw,3.25rem);line-height:1.05;font-weight:800;}
.progress-thin{height:2px;border-radius:2px;background:rgba(255,255,255,0.10);overflow:hidden;}
.progress-thin i{display:block;height:100%;background:linear-gradient(90deg,#1FD1FF,#7CFF6B);}

.icon-box{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:rgba(255,255,255,0.07);border:1px solid var(--border);color:var(--primary);
}

.vs-badge{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:0.9rem;letter-spacing:0.06em;color:#04121F;
  background:linear-gradient(120deg,#1FD1FF,#7CFF6B);
  box-shadow:0 0 26px rgba(31,209,255,0.45);
}

.cover-img{border-radius:16px;object-fit:cover;width:100%;}

.faq-item{border-radius:var(--radius-card);overflow:hidden;margin-bottom:14px;}
.faq-item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;font-weight:700;font-size:1.02rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .plus{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--border);color:var(--primary);font-weight:700;
  transition:transform .28s ease, background .28s ease;
}
.faq-item[open] summary{background:rgba(255,255,255,0.06);}
.faq-item[open] summary .plus{transform:rotate(45deg);background:rgba(31,209,255,0.16);}
.faq-body{padding:0 24px 22px;color:var(--text-2);line-height:1.8;}

.field{
  width:100%;padding:13px 15px;border-radius:12px;
  background:rgba(0,0,0,0.20);border:1px solid rgba(255,255,255,0.10);
  color:var(--text);transition:border-color .2s ease, box-shadow .2s ease;
}
.field::placeholder{color:rgba(159,179,206,0.60);}
.field:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(31,209,255,0.30);}
.field-label{display:block;font-size:0.82rem;font-weight:600;color:var(--text);margin-bottom:8px;}
select.field{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#9FB3CE 50%),linear-gradient(135deg,#9FB3CE 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;}
textarea.field{resize:vertical;min-height:110px;}

.footer-link{color:var(--text-2);font-size:0.9rem;transition:color .2s ease;}
.footer-link:hover{color:var(--primary);}

.to-top{
  position:fixed;right:18px;bottom:20px;z-index:40;
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:rgba(255,255,255,0.07);border:1px solid var(--border);color:var(--text);
  backdrop-filter:blur(12px);
  transition:background .22s ease, transform .22s ease;
}
.to-top:hover{background:rgba(31,209,255,0.18);transform:translateY(-3px);}

.divider{height:1px;background:linear-gradient(90deg, transparent, rgba(31,209,255,0.45), transparent);}

@media (max-width:639px){
  .nav-shell{padding:8px 12px;}
  .metric-card .num{font-size:2rem;}
  .ring{width:108px;height:108px;}
  .ring span{font-size:1.3rem;}
}

/* roulang page: article */
:root{
    --bg:#050A14;
    --bg-2:#07111F;
    --bg-3:#0C1A2E;
    --primary:#1FD1FF;
    --primary-2:#17B8E8;
    --accent:#7CFF6B;
    --accent-2:#38E07B;
    --amber:#FFB020;
    --text:#EAF3FF;
    --text-2:#9FB3CE;
    --text-3:#65758B;
    --border:rgba(255,255,255,0.12);
    --border-strong:rgba(255,255,255,0.28);
    --glass:rgba(255,255,255,0.06);
    --glass-hover:rgba(255,255,255,0.09);
    --glow:0 0 24px rgba(31,209,255,0.35);
    --shadow-card:0 16px 40px rgba(0,0,0,0.32);
    --radius-card:20px;
    --radius-btn:14px;
    --radius-pill:999px;
    --font-sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
    --font-num:"DIN Alternate","SF Mono",ui-monospace,monospace;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:var(--font-sans);
    font-size:1rem;
    line-height:1.8;
    color:var(--text);
    background-color:var(--bg);
    background-image:
      radial-gradient(900px 520px at 12% -8%, rgba(31,209,255,0.16), transparent 62%),
      radial-gradient(760px 460px at 92% 4%, rgba(124,255,107,0.10), transparent 60%),
      radial-gradient(800px 600px at 50% 110%, rgba(23,184,232,0.10), transparent 65%),
      repeating-linear-gradient(0deg, rgba(255,255,255,0.028) 0 1px, transparent 1px 64px),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.028) 0 1px, transparent 1px 64px);
    background-attachment:fixed;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  button,input,textarea,select{font:inherit;color:inherit;}
  ::selection{background:rgba(31,209,255,0.32);color:#fff;}
  :focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:8px;}
  ::-webkit-scrollbar{width:10px;height:10px;}
  ::-webkit-scrollbar-track{background:#050A14;}
  ::-webkit-scrollbar-thumb{background:rgba(31,209,255,0.28);border-radius:999px;}
  ::-webkit-scrollbar-thumb:hover{background:rgba(31,209,255,0.45);}

  .container{width:100%;max-width:1200px;margin:0 auto;padding:0 18px;}
  @media (min-width:768px){.container{padding:0 24px;}}
  @media (min-width:1024px){.container{padding:0 32px;}}

  .section{padding:64px 0;}
  @media (min-width:768px){.section{padding:88px 0;}}
  @media (min-width:1024px){.section{padding:104px 0;}}

  .nav-shell{
    position:fixed;top:12px;left:50%;transform:translateX(-50%);
    width:min(1120px,92vw);height:58px;z-index:50;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:0 14px;border-radius:var(--radius-pill);
    background:rgba(255,255,255,0.05);
    border:1px solid var(--border);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    box-shadow:0 14px 34px rgba(0,0,0,0.38);
  }
  .nav-link{
    position:relative;display:inline-flex;align-items:center;
    padding:8px 14px;border-radius:var(--radius-pill);
    font-size:0.9rem;font-weight:500;color:var(--text-2);
    transition:color .22s ease,background .22s ease;
  }
  .nav-link::after{
    content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;
    border-radius:2px;background:linear-gradient(90deg,var(--primary),var(--accent));
    transform:scaleX(0);transform-origin:left;transition:transform .26s ease;
  }
  .nav-link:hover{color:var(--text);background:rgba(255,255,255,0.06);}
  .nav-link:hover::after{transform:scaleX(1);}
  .nav-link.active{color:var(--text);font-weight:600;background:rgba(255,255,255,0.10);}
  .nav-link.active::after{transform:scaleX(1);}

  .btn-primary{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:12px 22px;border-radius:var(--radius-btn);border:0;cursor:pointer;
    background:linear-gradient(120deg,var(--primary),var(--accent));
    color:#04121F;font-weight:700;font-size:0.94rem;letter-spacing:.01em;
    box-shadow:var(--glow);
    transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;
  }
  .btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 0 34px rgba(31,209,255,0.52);}
  .btn-primary:active{transform:scale(0.98);}
  .btn-ghost{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:12px 22px;border-radius:var(--radius-btn);cursor:pointer;
    background:rgba(255,255,255,0.05);border:1px solid var(--border);
    color:var(--text);font-weight:600;font-size:0.94rem;
    transition:background .22s ease,border-color .22s ease,transform .2s ease;
  }
  .btn-ghost:hover{background:rgba(255,255,255,0.10);border-color:var(--border-strong);transform:translateY(-1px);}
  .btn-ghost:active{transform:scale(0.98);}

  .link-arrow{
    display:inline-flex;align-items:center;gap:6px;
    color:var(--primary);font-weight:600;font-size:0.9rem;
  }
  .link-arrow svg{transition:transform .22s ease;}
  .link-arrow:hover svg{transform:translateX(3px);}
  .link-arrow:hover{color:var(--accent);}

  .glass{
    background:var(--glass);
    border:1px solid var(--border);
    border-radius:var(--radius-card);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    box-shadow:var(--shadow-card);
    transition:transform .26s ease,border-color .26s ease,background .26s ease,box-shadow .26s ease;
  }
  .glass-hover:hover{
    transform:translateY(-4px);
    border-color:var(--border-strong);
    background:var(--glass-hover);
    box-shadow:0 22px 46px rgba(0,0,0,0.42),0 0 22px rgba(31,209,255,0.18);
  }
  .glow{border-color:rgba(31,209,255,0.42);box-shadow:var(--shadow-card),0 0 26px rgba(31,209,255,0.22);}

  .text-gradient{
    background:linear-gradient(100deg,var(--primary) 0%,var(--accent) 82%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .num{font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:-0.01em;}

  .badge{
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 12px;border-radius:var(--radius-pill);
    font-size:0.75rem;font-weight:600;letter-spacing:.02em;
    background:rgba(31,209,255,0.14);color:var(--primary);
    border:1px solid rgba(31,209,255,0.28);
  }
  .badge-lime{background:rgba(124,255,107,0.13);color:var(--accent);border-color:rgba(124,255,107,0.28);}
  .badge-amber{background:rgba(255,176,32,0.13);color:var(--amber);border-color:rgba(255,176,32,0.28);}
  .tag{
    display:inline-flex;align-items:center;padding:6px 14px;border-radius:var(--radius-pill);
    font-size:0.8rem;color:var(--text-2);
    background:rgba(255,255,255,0.05);border:1px solid var(--border);
    transition:color .2s ease,border-color .2s ease,background .2s ease;
  }
  .tag:hover{color:var(--text);border-color:var(--border-strong);background:rgba(255,255,255,0.09);}

  .divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.16),transparent);}

  .hero-bg{position:relative;overflow:hidden;}
  .hero-bg::before{
    content:"";position:absolute;inset:0;
    background-image:url('/assets/images/backpic/back-1.png');
    background-size:cover;background-position:center;
    opacity:0.10;filter:saturate(1.1);
  }
  .hero-bg::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(5,10,20,0.62),rgba(5,10,20,0.94) 78%,var(--bg));
  }
  .hero-bg > *{position:relative;z-index:2;}

  .article-prose{max-width:820px;margin:0 auto;font-size:1.0625rem;line-height:1.85;color:#DCE8F7;}
  .article-prose p{margin:0 0 1.25em;color:#D5E2F2;}
  .article-prose h2{
    font-size:clamp(1.4rem,2.4vw,1.7rem);font-weight:800;color:var(--text);
    letter-spacing:-0.01em;margin:2em 0 0.75em;padding-left:14px;position:relative;
  }
  .article-prose h2::before{
    content:"";position:absolute;left:0;top:0.28em;bottom:0.28em;width:4px;border-radius:4px;
    background:linear-gradient(180deg,var(--primary),var(--accent));
    box-shadow:0 0 14px rgba(31,209,255,0.55);
  }
  .article-prose h3{font-size:1.25rem;font-weight:700;color:var(--text);margin:1.5em 0 0.6em;}
  .article-prose a{color:var(--primary);border-bottom:1px solid rgba(31,209,255,0.35);transition:color .2s ease,border-color .2s ease;}
  .article-prose a:hover{color:var(--accent);border-color:rgba(124,255,107,0.5);}
  .article-prose ul,.article-prose ol{margin:0 0 1.3em;padding-left:1.3em;}
  .article-prose li{margin:0.45em 0;color:#D5E2F2;}
  .article-prose ul>li::marker{color:var(--primary);}
  .article-prose ol>li::marker{color:var(--accent);font-family:var(--font-num);}
  .article-prose blockquote{
    margin:1.6em 0;padding:14px 20px;border-left:3px solid var(--primary);
    background:rgba(31,209,255,0.06);border-radius:0 14px 14px 0;color:var(--text-2);
    box-shadow:-8px 0 22px -12px rgba(31,209,255,0.7);
  }
  .article-prose img{border-radius:16px;margin:1.5em 0;border:1px solid var(--border);}
  .article-prose figcaption{font-size:0.85rem;color:var(--text-3);text-align:center;margin-top:-0.9em;}
  .article-prose pre{
    background:#07111F;border:1px solid var(--border);border-radius:16px;
    padding:16px 18px;overflow-x:auto;font-family:var(--font-num);font-size:0.88rem;color:#B8E9FF;
  }
  .article-prose code{font-family:var(--font-num);font-size:0.9em;color:var(--accent);}
  .article-prose pre code{color:#B8E9FF;}
  .article-prose table{width:100%;border-collapse:collapse;font-size:0.92rem;margin:1.5em 0;}
  .article-prose th,.article-prose td{border:1px solid var(--border);padding:10px 14px;text-align:left;}
  .article-prose th{background:rgba(31,209,255,0.08);color:var(--text);}
  .table-scroll{overflow-x:auto;border-radius:16px;}

  .meta-item{display:inline-flex;align-items:center;gap:7px;font-size:0.85rem;color:var(--text-2);}
  .meta-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,0.28);}

  .crumb a{color:var(--text-2);transition:color .2s ease;}
  .crumb a:hover{color:var(--primary);}
  .crumb span{color:var(--text-3);}

  .footer-link{color:var(--text-2);font-size:0.9rem;transition:color .2s ease,transform .2s ease;display:inline-block;}
  .footer-link:hover{color:var(--primary);transform:translateX(2px);}

  .cover{width:100%;height:100%;object-fit:cover;border-radius:16px;}

  #mobileMenu{
    display:none;position:fixed;top:78px;left:50%;transform:translateX(-50%);
    width:min(1120px,92vw);z-index:49;padding:14px;
    border-radius:22px;background:rgba(7,17,31,0.94);
    border:1px solid var(--border);backdrop-filter:blur(18px);
    box-shadow:0 20px 44px rgba(0,0,0,0.5);
  }
  #mobileMenu.open{display:block;}
  #mobileMenu a{
    display:block;padding:12px 14px;border-radius:12px;
    color:var(--text-2);font-size:1rem;font-weight:500;
    transition:background .2s ease,color .2s ease;
  }
  #mobileMenu a:hover,#mobileMenu a.active{background:rgba(255,255,255,0.08);color:var(--text);}

  @media (max-width:639px){
    .nav-shell{top:8px;height:54px;padding:0 10px;}
    .article-prose{font-size:1rem;}
  }
  @media (prefers-reduced-motion:reduce){
    *{transition:none!important;animation:none!important;}
  }

/* roulang page: category1 */
:root{
  --bg-0:#050A14; --bg-1:#07111F; --bg-2:#0C1A2E;
  --primary:#1FD1FF; --primary-deep:#17B8E8;
  --accent:#7CFF6B; --accent-deep:#38E07B; --warn:#FFB020;
  --text-1:#EAF3FF; --text-2:#9FB3CE; --text-3:#65758B;
  --border:rgba(255,255,255,0.12);
  --border-strong:rgba(255,255,255,0.28);
  --glass:rgba(255,255,255,0.06);
  --glass-hi:rgba(255,255,255,0.09);
  --glow:rgba(31,209,255,0.35);
  --radius-card:20px; --radius-btn:14px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;padding:0;
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:1rem;line-height:1.8;
  color:var(--text-1);background:var(--bg-0);
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(1100px 620px at 12% -6%, rgba(31,209,255,0.16), transparent 62%),
    radial-gradient(900px 540px at 88% 6%, rgba(124,255,107,0.10), transparent 64%),
    linear-gradient(180deg,#050A14 0%,#07111F 46%,#050A14 100%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 72px);
  -webkit-mask-image:radial-gradient(circle at 50% 0%, #000 0%, transparent 76%);
  mask-image:radial-gradient(circle at 50% 0%, #000 0%, transparent 76%);
}
img{max-width:100%;display:block;border-radius:16px;}
a{text-decoration:none;color:inherit;}
button,input,select,textarea{font:inherit;color:inherit;}
::selection{background:rgba(31,209,255,0.32);color:#EAF3FF;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:#050A14;}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#17B8E8,#38E07B);border-radius:999px;border:2px solid #050A14;}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}

.container{width:100%;max-width:1240px;margin:0 auto;padding-left:16px;padding-right:16px;}
@media (min-width:768px){.container{padding-left:24px;padding-right:24px;}}
@media (min-width:1024px){.container{padding-left:32px;padding-right:32px;}}

.num{font-family:"DIN Alternate","SF Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;letter-spacing:-0.02em;}

/* ---------- 导航 ---------- */
.nav-shell{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);
  width:min(1120px,92vw);height:56px;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;border-radius:999px;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 12px 34px rgba(0,0,0,0.34);
}
.nav-link{
  position:relative;display:inline-flex;align-items:center;
  padding:8px 13px;border-radius:999px;
  font-size:0.9rem;color:var(--text-2);white-space:nowrap;
  transition:color .22s ease, background .22s ease;
}
.nav-link::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#1FD1FF,#7CFF6B);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.nav-link:hover{color:var(--text-1);background:rgba(255,255,255,0.07);}
.nav-link:hover::after{transform:scaleX(1);}
.nav-link.active{color:var(--text-1);background:rgba(255,255,255,0.10);}
.nav-link.active::after{transform:scaleX(0);}
.mobile-panel{
  position:fixed;top:82px;left:50%;transform:translateX(-50%);
  width:min(1120px,92vw);z-index:49;
  background:rgba(7,17,31,0.94);
  border:1px solid var(--border);border-radius:22px;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  padding:14px;box-shadow:0 20px 44px rgba(0,0,0,0.45);
}
.mobile-link{
  display:block;padding:14px 16px;border-radius:14px;
  font-size:1rem;color:var(--text-1);transition:background .2s ease;
}
.mobile-link:hover,.mobile-link.active{background:rgba(255,255,255,0.08);}

/* ---------- 通用组件 ---------- */
.glass{
  background:var(--glass);border:1px solid var(--border);
  border-radius:var(--radius-card);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 16px 40px rgba(0,0,0,0.32);
  transition:transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease;
}
.card-hover:hover{
  transform:translateY(-4px);
  border-color:var(--border-strong);
  background:var(--glass-hi);
  box-shadow:0 22px 48px rgba(0,0,0,0.42), 0 0 24px rgba(31,209,255,0.18);
}
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border:none;border-radius:var(--radius-btn);
  font-size:0.95rem;font-weight:700;color:#04121F;cursor:pointer;
  background:linear-gradient(120deg,#1FD1FF,#7CFF6B);
  box-shadow:0 0 24px rgba(31,209,255,0.35);
  transition:filter .22s ease, transform .22s ease, box-shadow .22s ease;
}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 0 34px rgba(31,209,255,0.52);}
.btn-primary:active{transform:scale(0.98);}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:var(--radius-btn);
  font-size:0.95rem;font-weight:600;color:var(--text-1);cursor:pointer;
  background:rgba(255,255,255,0.06);border:1px solid var(--border);
  transition:background .22s ease, border-color .22s ease, transform .22s ease;
}
.btn-ghost:hover{background:rgba(255,255,255,0.12);border-color:var(--border-strong);transform:translateY(-1px);}
.btn-ghost:active{transform:scale(0.98);}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;
  font-size:0.75rem;font-weight:600;letter-spacing:0.02em;
  color:#8FE9FF;background:rgba(31,209,255,0.10);
  border:1px solid rgba(31,209,255,0.28);
}
.badge-green{color:#B6FFAE;background:rgba(124,255,107,0.10);border-color:rgba(124,255,107,0.28);}
.badge-amber{color:#FFD98A;background:rgba(255,176,32,0.10);border-color:rgba(255,176,32,0.30);}
.text-gradient{
  background:linear-gradient(100deg,#1FD1FF,#7CFF6B);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.bar{height:6px;border-radius:999px;background:rgba(255,255,255,0.08);overflow:hidden;}
.bar > i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#1FD1FF,#7CFF6B);}
.bar-amber > i{background:linear-gradient(90deg,#FFB020,#7CFF6B);}
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.14),transparent);}
.link-arrow{
  display:inline-flex;align-items:center;gap:6px;
  font-size:0.875rem;font-weight:600;color:var(--primary);
  transition:color .2s ease;
}
.link-arrow .arw{transition:transform .22s ease;}
.link-arrow:hover{color:var(--accent);}
.link-arrow:hover .arw{transform:translateX(3px);}
.breadcrumb{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:0.82rem;color:var(--text-3);
}
.breadcrumb a{color:var(--text-2);transition:color .2s ease;}
.breadcrumb a:hover{color:var(--primary);}

/* ---------- 图标底 ---------- */
.icon-tile{
  display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  background:rgba(31,209,255,0.10);
  border:1px solid rgba(31,209,255,0.26);
  color:var(--primary);
}
.icon-tile-green{background:rgba(124,255,107,0.10);border-color:rgba(124,255,107,0.26);color:var(--accent);}
.icon-tile-amber{background:rgba(255,176,32,0.10);border-color:rgba(255,176,32,0.28);color:var(--warn);}

/* ---------- 列表 ---------- */
.list-check li{position:relative;padding-left:26px;margin-bottom:12px;color:var(--text-2);}
.list-check li::before{
  content:"";position:absolute;left:0;top:0.66em;width:10px;height:10px;border-radius:3px;
  background:linear-gradient(120deg,#1FD1FF,#7CFF6B);
}
.list-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 0;border-bottom:1px dashed rgba(255,255,255,0.10);
}
.list-row:last-child{border-bottom:none;}

/* ---------- FAQ ---------- */
details.faq{border-radius:18px;margin-bottom:14px;overflow:hidden;}
details.faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 22px;font-weight:600;font-size:1rem;color:var(--text-1);
}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary .plus{
  flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;
  border-radius:8px;font-size:1.05rem;line-height:1;color:var(--primary);
  background:rgba(31,209,255,0.10);border:1px solid rgba(31,209,255,0.26);
  transition:transform .26s ease, background .26s ease;
}
details.faq[open]{background:rgba(255,255,255,0.09);border-color:var(--border-strong);}
details.faq[open] summary .plus{transform:rotate(45deg);background:rgba(124,255,107,0.14);border-color:rgba(124,255,107,0.3);color:var(--accent);}
.faq-body{padding:0 22px 20px;color:var(--text-2);font-size:0.95rem;line-height:1.78;}

/* ---------- 表单 ---------- */
.field{
  width:100%;padding:12px 14px;border-radius:12px;
  background:rgba(0,0,0,0.20);border:1px solid var(--border);
  color:var(--text-1);font-size:0.95rem;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field::placeholder{color:var(--text-3);}
.field:hover{border-color:rgba(255,255,255,0.20);}
.field:focus{outline:none;border-color:var(--primary);background:rgba(0,0,0,0.28);box-shadow:0 0 0 3px rgba(31,209,255,0.30);}
.form-label{display:block;margin-bottom:8px;font-size:0.82rem;font-weight:600;color:var(--text-1);}
.checkbox{width:16px;height:16px;accent-color:#1FD1FF;}

/* ---------- 对比卡 ---------- */
.vs-badge{
  width:62px;height:62px;border-radius:999px;display:grid;place-items:center;
  font-family:"DIN Alternate","SF Mono",ui-monospace,monospace;font-weight:800;color:#04121F;
  background:linear-gradient(120deg,#1FD1FF,#7CFF6B);
  box-shadow:0 0 26px rgba(31,209,255,0.45);
}

/* ---------- 页脚 ---------- */
.footer-link{color:var(--text-2);font-size:0.875rem;transition:color .2s ease;}
.footer-link:hover{color:var(--primary);}

@media (max-width:767px){
  .nav-shell{height:54px;padding:0 12px;}
  .vs-badge{width:52px;height:52px;font-size:0.82rem;}
}

/* roulang page: category2 */
:root{
  --bg-0:#050A14;
  --bg-1:#07111F;
  --bg-2:#0C1A2E;
  --primary:#1FD1FF;
  --primary-2:#17B8E8;
  --accent:#7CFF6B;
  --accent-2:#38E07B;
  --amber:#FFB020;
  --text-1:#EAF3FF;
  --text-2:#9FB3CE;
  --text-3:#65758B;
  --border:rgba(255,255,255,0.12);
  --border-strong:rgba(255,255,255,0.28);
  --glass:rgba(255,255,255,0.06);
  --glass-2:rgba(255,255,255,0.09);
  --glow:rgba(31,209,255,0.35);
  --radius-card:20px;
  --radius-btn:14px;
  --shadow-card:0 16px 40px rgba(0,0,0,0.32);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:1rem;
  line-height:1.8;
  color:var(--text-1);
  background-color:var(--bg-0);
  background-image:
    radial-gradient(1200px 620px at 12% -12%, rgba(31,209,255,0.16), transparent 62%),
    radial-gradient(900px 520px at 92% 2%, rgba(124,255,107,0.10), transparent 58%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.026) 0 1px, transparent 1px 68px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.026) 0 1px, transparent 1px 68px);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;transition:color .22s ease, opacity .22s ease;}
img{display:block;max-width:100%;height:auto;border-radius:16px;}
button,input,select,textarea{font:inherit;color:inherit;}
h1,h2,h3,h4{letter-spacing:-0.015em;line-height:1.3;margin:0;}
p{margin:0;}
::selection{background:rgba(31,209,255,0.32);color:#fff;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:#060D18;}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#1FD1FF,#17B8E8);border-radius:999px;border:2px solid #060D18;}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}

/* 导航 */
.nav-shell{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);
  z-index:60;width:min(1120px,92vw);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:8px 16px;min-height:56px;border-radius:999px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 14px 36px rgba(0,0,0,0.36);
}
.nav-link{
  position:relative;display:inline-flex;align-items:center;
  padding:8px 14px;border-radius:999px;font-size:.9rem;font-weight:500;
  color:var(--text-2);white-space:nowrap;transition:background .24s,color .24s;
}
.nav-link::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  transform:scaleX(0);transform-origin:left;transition:transform .28s ease;
}
.nav-link:hover{color:#fff;background:rgba(255,255,255,0.07);}
.nav-link:hover::after{transform:scaleX(1);}
.nav-link.active{color:#fff;background:rgba(255,255,255,0.10);}
.nav-link.active::after{transform:scaleX(1);}
.mobile-panel{
  position:fixed;top:82px;left:50%;transform:translateX(-50%) translateY(-10px);
  width:min(1120px,92vw);z-index:55;
  background:rgba(7,17,31,0.94);border:1px solid var(--border);border-radius:24px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 22px 50px rgba(0,0,0,0.5);
  padding:18px;display:none;opacity:0;transition:opacity .26s ease,transform .26s ease;
}
.mobile-panel.open{display:block;opacity:1;transform:translateX(-50%) translateY(0);}
.mobile-panel a{display:block;padding:14px 16px;border-radius:16px;font-size:1.05rem;font-weight:600;color:var(--text-1);}
.mobile-panel a:hover{background:rgba(255,255,255,0.07);}

/* 容器 */
.container{width:100%;max-width:1240px;margin:0 auto;padding-left:16px;padding-right:16px;}
@media (min-width:768px){.container{padding-left:24px;padding-right:24px;}}
@media (min-width:1024px){.container{padding-left:32px;padding-right:32px;}}

/* 玻璃卡 */
.glass{
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow-card);
  transition:transform .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.glass-hov:hover{
  transform:translateY(-4px);
  background:var(--glass-2);
  border-color:var(--border-strong);
  box-shadow:0 22px 48px rgba(0,0,0,0.42), 0 0 24px rgba(31,209,255,0.18);
}
.glow-border{border-color:rgba(31,209,255,0.36);box-shadow:0 18px 44px rgba(0,0,0,0.4), 0 0 28px rgba(31,209,255,0.20);}

/* 按钮 */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border:none;border-radius:var(--radius-btn);
  font-weight:700;font-size:.95rem;color:#04121F;
  background:linear-gradient(120deg,#1FD1FF,#7CFF6B);
  box-shadow:0 0 24px var(--glow);
  cursor:pointer;transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 0 34px rgba(31,209,255,0.5);}
.btn-primary:active{transform:scale(.98);}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:var(--radius-btn);
  font-weight:600;font-size:.95rem;color:var(--text-1);
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.16);
  cursor:pointer;transition:background .22s ease, border-color .22s ease, transform .2s ease;
}
.btn-ghost:hover{background:rgba(255,255,255,0.11);border-color:rgba(31,209,255,0.4);transform:translateY(-1px);}
.btn-ghost:active{transform:scale(.98);}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.9rem;color:#8FE7FF;}
.link-arrow svg{transition:transform .24s ease;}
.link-arrow:hover{color:var(--accent);}
.link-arrow:hover svg{transform:translateX(2px);}

/* 标签 */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;
  font-size:.75rem;font-weight:600;letter-spacing:.02em;
  background:rgba(31,209,255,0.14);color:#9BE9FF;border:1px solid rgba(31,209,255,0.28);
}
.tag-green{background:rgba(124,255,107,0.14);color:#B9FFB0;border-color:rgba(124,255,107,0.28);}
.tag-amber{background:rgba(255,176,32,0.14);color:#FFD48A;border-color:rgba(255,176,32,0.30);}

.num{font-family:"DIN Alternate","SF Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;letter-spacing:-0.01em;}

/* Hero */
.hero-layer{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(180deg, rgba(5,10,20,0.86) 0%, rgba(7,17,31,0.93) 62%, rgba(5,10,20,0.99) 100%),
    url('/assets/images/backpic/back-2.webp');
  background-size:cover, cover;
  background-position:center top, center 28%;
  background-repeat:no-repeat, no-repeat;
}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.85rem;color:var(--text-3);}
.breadcrumb a{color:var(--text-2);}
.breadcrumb a:hover{color:var(--primary);}
.hero-title{
  font-size:clamp(2.25rem,5vw,3.75rem);
  font-weight:800;line-height:1.18;margin:16px 0 18px;
}
.text-gradient{
  background:linear-gradient(110deg,#1FD1FF 8%,#7CFF6B 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lead{font-size:1.0625rem;color:var(--text-2);max-width:640px;}

/* 比分看板 */
.scoreboard{padding:24px;border-radius:22px;}
.score-value{font-size:2.35rem;font-weight:800;}
.evt{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,0.22);border:1px solid rgba(255,255,255,0.07);font-size:.86rem;color:var(--text-2);}
.evt b{color:var(--text-1);font-weight:600;}
.bar{height:6px;border-radius:999px;background:rgba(255,255,255,0.09);overflow:hidden;}
.bar > i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#1FD1FF,#7CFF6B);}

/* 指标卡 */
.metric{padding:24px;border-radius:var(--radius-card);}
.metric-num{font-size:clamp(2.1rem,4vw,3.2rem);font-weight:800;line-height:1.1;}
.trendbar{height:2px;border-radius:2px;background:rgba(255,255,255,0.09);overflow:hidden;}
.trendbar > i{display:block;height:100%;background:linear-gradient(90deg,#7CFF6B,#1FD1FF);}
.trendbar.amber > i{background:linear-gradient(90deg,#FFB020,#1FD1FF);}

/* 服务矩阵 */
.matrix-big{padding:0;overflow:hidden;border-radius:22px;}
.matrix-big .thumb{height:210px;width:100%;object-fit:cover;border-radius:0;}
.icon-box{
  width:42px;height:42px;flex:0 0 42px;border-radius:13px;display:grid;place-items:center;
  background:rgba(31,209,255,0.12);border:1px solid rgba(31,209,255,0.24);
}

/* 流程 */
.step{position:relative;padding:24px;border-radius:var(--radius-card);}
.step-line{height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(31,209,255,0.7),rgba(124,255,107,0.5),transparent);margin-bottom:18px;}
.step-no{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:11px;
  font-family:"DIN Alternate","SF Mono",ui-monospace,monospace;font-weight:800;font-size:.95rem;
  background:linear-gradient(120deg,rgba(31,209,255,0.22),rgba(124,255,107,0.18));
  border:1px solid rgba(31,209,255,0.30);color:#BEF4FF;
}

/* 图文 */
.figure-card{padding:12px;border-radius:22px;}
.figure-card img{width:100%;height:100%;min-height:250px;object-fit:cover;border-radius:16px;}

/* FAQ */
.faq-item{border:1px solid var(--border);border-radius:18px;background:var(--glass);overflow:hidden;transition:background .26s ease,border-color .26s ease;}
.faq-item[open]{background:rgba(255,255,255,0.09);border-color:rgba(31,209,255,0.34);}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;font-weight:700;font-size:1.02rem;}
.faq-item summary::-webkit-details-marker{display:none;}
.plus{
  width:26px;height:26px;flex:0 0 26px;border-radius:999px;display:grid;place-items:center;
  background:rgba(31,209,255,0.14);color:#8FE7FF;font-size:1.05rem;line-height:1;
  transition:transform .28s ease;
}
.faq-item[open] .plus{transform:rotate(45deg);}
.faq-body{padding:0 22px 22px;color:var(--text-2);font-size:.97rem;line-height:1.8;}

/* 表单 */
.fl{display:block;font-size:.82rem;font-weight:600;color:var(--text-2);margin-bottom:8px;}
.field{
  width:100%;padding:12px 14px;border-radius:12px;
  background:rgba(0,0,0,0.20);border:1px solid rgba(255,255,255,0.10);
  color:var(--text-1);font-size:.95rem;transition:border-color .2s ease, box-shadow .2s ease;
}
.field::placeholder{color:var(--text-3);}
.field:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(31,209,255,0.30);}
.checkbox{width:16px;height:16px;accent-color:#1FD1FF;}
.form-note{font-size:.78rem;color:var(--text-3);line-height:1.7;}
.err{color:#FF8A9B;font-size:.78rem;display:none;}
.form-success{
  display:none;padding:14px 16px;border-radius:14px;font-size:.9rem;
  background:rgba(124,255,107,0.10);border:1px solid rgba(124,255,107,0.30);color:#B9FFB0;
}

/* 页脚 */
.footer-link{color:var(--text-2);font-size:.9rem;}
.footer-link:hover{color:var(--primary);}
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.16),transparent);}

.sec{padding:64px 0;}
@media (min-width:768px){.sec{padding:88px 0;}}
@media (min-width:1024px){.sec{padding:104px 0;}}
.sec-title{font-size:clamp(1.75rem,3.2vw,2.5rem);font-weight:800;line-height:1.25;}
.sec-desc{color:var(--text-2);font-size:1rem;max-width:720px;}

@media (max-width:640px){
  .scoreboard{padding:20px;}
  .score-value{font-size:1.9rem;}
  .metric{padding:20px;}
  .hero-title{margin:12px 0 14px;}
  .sec{padding:56px 0;}
}

/* roulang page: category3 */
:root{
    --bg-0:#050A14;
    --bg-1:#07111F;
    --bg-2:#0C1A2E;
    --primary:#1FD1FF;
    --primary-2:#17B8E8;
    --accent:#7CFF6B;
    --accent-2:#38E07B;
    --amber:#FFB020;
    --text-1:#EAF3FF;
    --text-2:#9FB3CE;
    --text-3:#65758B;
    --border:rgba(255,255,255,0.12);
    --border-strong:rgba(255,255,255,0.28);
    --glass:rgba(255,255,255,0.06);
    --glass-hover:rgba(255,255,255,0.09);
    --glow:rgba(31,209,255,0.35);
    --radius-card:20px;
    --radius-btn:14px;
    --radius-sm:12px;
    --shadow-card:0 16px 40px rgba(0,0,0,0.32);
    --shadow-glow:0 0 24px rgba(31,209,255,0.35);
  }

  *,*::before,*::after{ box-sizing:border-box; }

  html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

  body{
    margin:0;
    font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
    color:var(--text-1);
    background-color:var(--bg-0);
    background-image:
      radial-gradient(900px 520px at 12% -6%, rgba(31,209,255,0.16), transparent 62%),
      radial-gradient(760px 460px at 92% 4%, rgba(124,255,107,0.10), transparent 60%),
      repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 64px),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 64px),
      linear-gradient(180deg,#050A14 0%,#07111F 46%,#050A14 100%);
    background-attachment:fixed;
    line-height:1.8;
    font-size:1rem;
    overflow-x:hidden;
  }

  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }
  button,input,select,textarea{ font:inherit; color:inherit; }
  h1,h2,h3,h4{ margin:0; letter-spacing:-0.02em; font-weight:800; line-height:1.25; }
  p{ margin:0; }

  ::selection{ background:rgba(31,209,255,0.35); color:#fff; }

  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-track{ background:#050A14; }
  ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#1FD1FF,#17B8E8); border-radius:999px; border:2px solid #050A14; }

  .container{ width:100%; max-width:1240px; margin:0 auto; padding-left:16px; padding-right:16px; }
  @media (min-width:768px){ .container{ padding-left:24px; padding-right:24px; } }
  @media (min-width:1024px){ .container{ padding-left:32px; padding-right:32px; } }

  .glass{
    background:var(--glass);
    border:1px solid var(--border);
    border-radius:var(--radius-card);
    backdrop-filter:blur(14px);
    box-shadow:var(--shadow-card);
    transition:transform .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease;
  }
  .glass:hover{
    transform:translateY(-4px);
    background:var(--glass-hover);
    border-color:var(--border-strong);
  }
  .glow{ box-shadow:var(--shadow-glow), var(--shadow-card); }

  .text-gradient{
    background:linear-gradient(96deg,#EAF3FF 8%,#1FD1FF 48%,#7CFF6B 96%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  .num{ font-family:"DIN Alternate","SF Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; }

  /* 导航 */
  .nav-shell{
    position:fixed;
    top:14px;
    left:50%;
    transform:translateX(-50%);
    z-index:50;
    width:min(1120px,92vw);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:8px 16px;
    min-height:56px;
    border-radius:999px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.10);
    backdrop-filter:blur(20px);
    box-shadow:0 12px 34px rgba(0,0,0,0.35);
  }
  .nav-link{
    position:relative;
    display:inline-flex;
    align-items:center;
    padding:8px 14px;
    border-radius:999px;
    font-size:.9rem;
    font-weight:500;
    color:var(--text-2);
    transition:color .24s ease, background .24s ease;
  }
  .nav-link::after{
    content:"";
    position:absolute;
    left:14px; right:14px; bottom:4px;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,#1FD1FF,#7CFF6B);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .26s ease;
  }
  .nav-link:hover{ color:var(--text-1); background:rgba(255,255,255,0.06); }
  .nav-link:hover::after{ transform:scaleX(1); }
  .nav-link.active{ color:var(--text-1); background:rgba(255,255,255,0.10); font-weight:600; }
  .nav-link.active::after{ transform:scaleX(1); }
  .nav-link:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

  .mobile-panel{
    position:fixed;
    top:82px; left:50%;
    transform:translateX(-50%);
    width:min(1120px,92vw);
    z-index:49;
    border-radius:24px;
    background:rgba(7,17,31,0.96);
    border:1px solid var(--border);
    backdrop-filter:blur(18px);
    box-shadow:0 20px 48px rgba(0,0,0,0.5);
    padding:14px;
  }
  .mobile-panel a{
    display:block;
    padding:13px 16px;
    border-radius:14px;
    font-size:1.02rem;
    font-weight:600;
    color:var(--text-1);
  }
  .mobile-panel a:hover,
  .mobile-panel a.active{ background:rgba(255,255,255,0.08); color:var(--primary); }

  /* 按钮 */
  .btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:13px 24px;
    border-radius:var(--radius-btn);
    font-size:.95rem;
    font-weight:700;
    color:#04121F;
    background:linear-gradient(120deg,#1FD1FF,#7CFF6B);
    border:none;
    cursor:pointer;
    box-shadow:0 0 24px rgba(31,209,255,0.35);
    transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
  }
  .btn-primary:hover{ filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 0 34px rgba(31,209,255,0.5); }
  .btn-primary:active{ transform:scale(0.98); }
  .btn-primary:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

  .btn-ghost{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:13px 24px;
    border-radius:var(--radius-btn);
    font-size:.95rem;
    font-weight:600;
    color:var(--text-1);
    background:rgba(255,255,255,0.04);
    border:1px solid var(--border);
    cursor:pointer;
    transition:background .22s ease, border-color .22s ease, transform .22s ease;
  }
  .btn-ghost:hover{ background:rgba(255,255,255,0.10); border-color:var(--border-strong); transform:translateY(-1px); }
  .btn-ghost:active{ transform:scale(0.98); }
  .btn-ghost:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

  .link-arrow{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:.9rem;
    font-weight:600;
    color:var(--primary);
  }
  .link-arrow svg{ transition:transform .22s ease; }
  .link-arrow:hover svg{ transform:translateX(3px); }

  .badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 12px;
    border-radius:999px;
    font-size:.75rem;
    font-weight:600;
    letter-spacing:.02em;
    background:rgba(31,209,255,0.14);
    color:#9BE7FF;
    border:1px solid rgba(31,209,255,0.28);
  }
  .badge-lime{ background:rgba(124,255,107,0.13); color:#B9FFB0; border-color:rgba(124,255,107,0.28); }
  .badge-amber{ background:rgba(255,176,32,0.13); color:#FFD68A; border-color:rgba(255,176,32,0.3); }

  .tag{
    display:inline-flex;
    align-items:center;
    padding:6px 14px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:600;
    color:var(--text-2);
    background:rgba(255,255,255,0.05);
    border:1px solid var(--border);
    cursor:pointer;
    transition:all .22s ease;
  }
  .tag:hover{ color:var(--text-1); border-color:var(--border-strong); background:rgba(255,255,255,0.09); }
  .tag.is-on{ color:#04121F; background:linear-gradient(120deg,#1FD1FF,#7CFF6B); border-color:transparent; }

  .divider{ height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.18),transparent); }

  .section{ padding:64px 0; }
  @media (min-width:768px){ .section{ padding:92px 0; } }
  @media (min-width:1024px){ .section{ padding:104px 0; } }

  .sec-head{ max-width:720px; margin-bottom:34px; }
  .sec-head h2{ font-size:clamp(1.7rem,3vw,2.4rem); margin-top:12px; }
  .sec-head p{ margin-top:14px; color:var(--text-2); font-size:1rem; line-height:1.85; }

  .bar-track{ height:8px; border-radius:999px; background:rgba(255,255,255,0.08); overflow:hidden; }
  .bar-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg,#1FD1FF,#7CFF6B); }
  .bar-fill-amber{ height:100%; border-radius:999px; background:linear-gradient(90deg,#FFB020,#FFD68A); }
  .bar-fill-dim{ height:100%; border-radius:999px; background:rgba(159,179,206,0.55); }

  .timeline{ position:relative; padding-left:26px; }
  .timeline::before{
    content:"";
    position:absolute;
    left:7px; top:8px; bottom:8px;
    width:2px;
    background:linear-gradient(180deg,rgba(31,209,255,0.9),rgba(124,255,107,0.55),transparent);
  }
  .timeline-item{ position:relative; padding-bottom:30px; }
  .timeline-item:last-child{ padding-bottom:0; }
  .timeline-item::before{
    content:"";
    position:absolute;
    left:-26px; top:6px;
    width:16px; height:16px;
    border-radius:999px;
    background:#07111F;
    border:2px solid var(--primary);
    box-shadow:0 0 14px rgba(31,209,255,0.5);
  }

  .field-label{ display:block; font-size:.82rem; font-weight:600; color:var(--text-1); margin-bottom:8px; }
  .field{
    width:100%;
    padding:12px 14px;
    border-radius:var(--radius-sm);
    background:rgba(0,0,0,0.20);
    border:1px solid var(--border);
    color:var(--text-1);
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .field::placeholder{ color:var(--text-3); }
  .field:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(31,209,255,0.30); }
  select.field{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,#9FB3CE 50%),linear-gradient(135deg,#9FB3CE 50%,transparent 50%); background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
  .field-error{ font-size:.78rem; color:#FF8A9B; margin-top:6px; }

  details.faq{
    border-radius:18px;
    background:var(--glass);
    border:1px solid var(--border);
    padding:18px 22px;
    transition:background .24s ease, border-color .24s ease;
  }
  details.faq[open]{ background:var(--glass-hover); border-color:var(--border-strong); }
  details.faq summary{
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    font-weight:700;
    font-size:1.02rem;
  }
  details.faq summary::-webkit-details-marker{ display:none; }
  details.faq summary .plus{
    flex:0 0 auto;
    width:26px; height:26px;
    display:grid; place-items:center;
    border-radius:999px;
    background:rgba(31,209,255,0.14);
    color:var(--primary);
    font-weight:700;
    transition:transform .26s ease;
  }
  details.faq[open] summary .plus{ transform:rotate(45deg); }
  details.faq .faq-body{ margin-top:12px; color:var(--text-2); line-height:1.8; font-size:.95rem; }

  .footer-link{ font-size:.9rem; color:var(--text-2); transition:color .2s ease; }
  .footer-link:hover{ color:var(--primary); }

/* roulang page: category4 */
:root{
  --bg-0:#050A14;
  --bg-1:#07111F;
  --bg-2:#0C1A2E;
  --primary:#1FD1FF;
  --primary-2:#17B8E8;
  --accent:#7CFF6B;
  --accent-2:#38E07B;
  --gold:#FFB020;
  --text-1:#EAF3FF;
  --text-2:#9FB3CE;
  --text-3:#65758B;
  --border:rgba(255,255,255,0.12);
  --border-strong:rgba(255,255,255,0.28);
  --glass:rgba(255,255,255,0.06);
  --glass-hi:rgba(255,255,255,0.09);
  --glow:rgba(31,209,255,0.35);
  --radius-card:20px;
  --radius-btn:14px;
  --shadow-card:0 16px 40px rgba(0,0,0,0.32);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  color:var(--text-1);
  font-size:1rem;
  line-height:1.8;
  background-color:var(--bg-0);
  background-image:
    radial-gradient(900px 520px at 12% -6%, rgba(31,209,255,0.16), transparent 62%),
    radial-gradient(760px 480px at 92% 4%, rgba(124,255,107,0.10), transparent 60%),
    radial-gradient(720px 520px at 50% 102%, rgba(23,184,232,0.12), transparent 65%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.032) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.032) 0 1px, transparent 1px 64px);
  background-attachment:fixed;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;transition:color .2s ease,opacity .2s ease;}
button,input,select,textarea{font:inherit;color:inherit;}
h1,h2,h3,h4{margin:0;letter-spacing:-0.02em;line-height:1.25;font-weight:800;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
::selection{background:rgba(31,209,255,0.32);color:#fff;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:#050A14;}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#1FD1FF,#38E07B);border-radius:999px;border:2px solid #050A14;}

.container{width:100%;max-width:1240px;margin:0 auto;padding-left:16px;padding-right:16px;}
@media(min-width:768px){.container{padding-left:24px;padding-right:24px;}}
@media(min-width:1024px){.container{padding-left:32px;padding-right:32px;}}

.glass{background:var(--glass);border:1px solid var(--border);border-radius:var(--radius-card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--shadow-card);}
.glass-hover{transition:transform .28s ease,border-color .28s ease,background .28s ease,box-shadow .28s ease;}
.glass-hover:hover{transform:translateY(-4px);border-color:var(--border-strong);background:var(--glass-hi);box-shadow:0 22px 48px rgba(0,0,0,0.42),0 0 26px rgba(31,209,255,0.18);}
.glow{box-shadow:0 0 24px var(--glow);}
.text-gradient{background:linear-gradient(100deg,#1FD1FF 0%,#7CFF6B 62%,#FFB020 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.mono{font-family:"DIN Alternate","SF Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;letter-spacing:-0.01em;}
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.18),transparent);}
.section{padding-top:64px;padding-bottom:64px;}
@media(min-width:768px){.section{padding-top:88px;padding-bottom:88px;}}
@media(min-width:1024px){.section{padding-top:104px;padding-bottom:104px;}}
.section-head{max-width:760px;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:600;letter-spacing:.08em;color:var(--primary);padding:6px 14px;border-radius:999px;border:1px solid rgba(31,209,255,0.28);background:rgba(31,209,255,0.08);}
h1{font-size:clamp(2.25rem,5vw,3.75rem);}
h2{font-size:clamp(1.75rem,3.2vw,2.5rem);}
h3{font-size:clamp(1.15rem,1.6vw,1.4rem);}
.lead{color:var(--text-2);font-size:1.0625rem;line-height:1.85;}

/* 导航 */
.nav-shell{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;
  width:min(1120px,92vw);height:58px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:0 14px;border-radius:999px;
  background:rgba(255,255,255,0.05);border:1px solid var(--border);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 16px 40px rgba(0,0,0,0.36);
}
.nav-link{position:relative;display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;font-size:.9rem;font-weight:500;color:var(--text-2);transition:color .2s ease,background .2s ease;}
.nav-link::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:linear-gradient(90deg,#1FD1FF,#7CFF6B);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;}
.nav-link:hover{color:var(--text-1);background:rgba(255,255,255,0.06);}
.nav-link:hover::after{transform:scaleX(1);}
.nav-link.active{color:var(--text-1);font-weight:600;background:rgba(255,255,255,0.10);}
.nav-link:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}

.mobile-menu{
  position:fixed;top:82px;left:50%;transform:translateX(-50%);z-index:49;
  width:min(1120px,92vw);padding:12px;border-radius:24px;display:none;
  background:rgba(7,17,31,0.95);border:1px solid var(--border);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 24px 56px rgba(0,0,0,0.55);
}
.mobile-menu.open{display:block;animation:dropIn .24s ease;}
@keyframes dropIn{from{opacity:0;transform:translateX(-50%) translateY(-8px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
.mobile-menu a{display:block;padding:12px 16px;border-radius:14px;font-size:1rem;color:var(--text-2);}
.mobile-menu a:hover{background:rgba(255,255,255,0.06);color:var(--text-1);}
.mobile-menu a.active{background:rgba(255,255,255,0.10);color:var(--text-1);font-weight:600;}

/* 按钮 */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;border-radius:var(--radius-btn);border:0;cursor:pointer;
  font-size:.94rem;font-weight:700;color:#04121F;
  background:linear-gradient(120deg,#1FD1FF 0%,#7CFF6B 100%);
  box-shadow:0 0 24px var(--glow);
  transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;
}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 0 34px rgba(31,209,255,0.52);}
.btn-primary:active{transform:scale(.98);}
.btn-primary:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;border-radius:var(--radius-btn);cursor:pointer;
  font-size:.94rem;font-weight:600;color:var(--text-1);
  background:rgba(255,255,255,0.05);border:1px solid var(--border);
  transition:background .2s ease,transform .2s ease,border-color .2s ease;
}
.btn-ghost:hover{background:rgba(255,255,255,0.11);border-color:var(--border-strong);transform:translateY(-1px);}
.btn-ghost:active{transform:scale(.98);}
.btn-ghost:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;font-weight:600;color:var(--primary);}
.link-arrow svg{transition:transform .2s ease;}
.link-arrow:hover svg{transform:translateX(3px);}

/* 标签与徽章 */
.tag{display:inline-flex;align-items:center;padding:4px 12px;border-radius:999px;font-size:.75rem;font-weight:600;color:#9FE9FF;background:rgba(31,209,255,0.10);border:1px solid rgba(31,209,255,0.26);}
.tag-lime{color:#C6FFBC;background:rgba(124,255,107,0.10);border-color:rgba(124,255,107,0.26);}
.tag-amber{color:#FFD98A;background:rgba(255,176,32,0.10);border-color:rgba(255,176,32,0.26);}
.trend{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:600;}
.trend-up{color:#7CFF6B;background:rgba(124,255,107,0.12);border:1px solid rgba(124,255,107,0.28);}
.trend-mid{color:#FFD98A;background:rgba(255,176,32,0.12);border:1px solid rgba(255,176,32,0.28);}
.bar{height:3px;border-radius:999px;background:rgba(255,255,255,0.10);overflow:hidden;}
.bar > span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#1FD1FF,#7CFF6B);}
.bar-amber > span{background:linear-gradient(90deg,#FFB020,#7CFF6B);}

/* Hero */
.hero{position:relative;overflow:hidden;padding-top:128px;padding-bottom:56px;}
@media(min-width:1024px){.hero{padding-top:164px;padding-bottom:88px;}}
.hero-media{position:absolute;inset:0;z-index:0;pointer-events:none;}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:82% 22%;opacity:.11;}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(5,10,20,0.94) 0%,rgba(7,17,31,0.82) 45%,rgba(5,10,20,0.96) 100%);}
.hero-inner{position:relative;z-index:1;}
.crumb{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text-3);margin-bottom:20px;flex-wrap:wrap;}
.crumb a:hover{color:var(--primary);}
.crumb span.sep{opacity:.5;}
.panel{
  border-radius:22px;padding:24px;
  background:linear-gradient(160deg,rgba(255,255,255,0.09),rgba(255,255,255,0.03));
  border:1px solid var(--border);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 20px 48px rgba(0,0,0,0.42),0 0 26px rgba(31,209,255,0.14);
}
.quick-item{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px dashed rgba(255,255,255,0.10);}
.quick-item:last-child{border-bottom:0;padding-bottom:0;}
.dot{flex:0 0 auto;width:8px;height:8px;margin-top:9px;border-radius:50%;background:linear-gradient(120deg,#1FD1FF,#7CFF6B);box-shadow:0 0 10px rgba(31,209,255,0.6);}

/* 指标卡 */
.metric{padding:22px;border-radius:var(--radius-card);}
.metric-num{font-size:clamp(2.1rem,4vw,3.2rem);font-weight:800;line-height:1.05;}
.metric-label{font-size:.8rem;color:var(--text-3);font-weight:600;letter-spacing:.04em;}

/* 列表 */
.check-list li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;color:var(--text-2);font-size:.96rem;}
.check-list svg{flex:0 0 auto;margin-top:5px;}

/* FAQ */
details.faq{background:var(--glass);border:1px solid var(--border);border-radius:18px;overflow:hidden;transition:background .25s ease,border-color .25s ease;}
details.faq + details.faq{margin-top:12px;}
details.faq[open]{background:var(--glass-hi);border-color:rgba(31,209,255,0.30);}
details.faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 22px;font-weight:600;font-size:1rem;}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;}
.faq-plus{flex:0 0 auto;color:var(--primary);transition:transform .25s ease;margin-top:2px;}
details.faq[open] .faq-plus{transform:rotate(45deg);}
.faq-body{padding:0 22px 20px;color:var(--text-2);font-size:.95rem;line-height:1.8;}

/* 资源卡 */
.res-card{overflow:hidden;border-radius:var(--radius-card);display:flex;flex-direction:column;}
.res-card img{width:100%;height:168px;object-fit:cover;border-radius:16px;margin:12px 12px 0;width:calc(100% - 24px);}
.res-body{padding:18px 22px 22px;display:flex;flex-direction:column;flex:1;}
.res-meta{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--text-3);margin-top:auto;padding-top:14px;}

/* 表单 */
.field{
  width:100%;padding:12px 14px;border-radius:12px;font-size:.95rem;
  background:rgba(0,0,0,0.20);border:1px solid var(--border);color:var(--text-1);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.field::placeholder{color:var(--text-3);}
.field:focus{outline:none;border-color:var(--primary);background:rgba(0,0,0,0.28);box-shadow:0 0 0 3px rgba(31,209,255,0.30);}
.field-label{display:block;font-size:.82rem;font-weight:600;color:var(--text-1);margin-bottom:8px;}
.form-note{font-size:.78rem;color:var(--text-3);}
.form-ok{display:none;margin-top:16px;padding:14px 16px;border-radius:14px;font-size:.9rem;color:#C6FFBC;background:rgba(56,224,123,0.10);border:1px solid rgba(124,255,107,0.30);}
.form-ok.show{display:block;}
.err{color:#FF8A9B;font-size:.78rem;margin-top:6px;display:none;}
.err.show{display:block;}
select.field option{background:#07111F;color:#EAF3FF;}

/* 页脚 */
.footer-link{display:inline-block;font-size:.9rem;color:var(--text-2);transition:color .2s ease,transform .2s ease;}
.footer-link:hover{color:var(--primary);transform:translateX(2px);}
.footer-bottom{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:18px 0 28px;font-size:.82rem;color:var(--text-3);}
.to-top{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;font-size:.82rem;color:var(--text-2);background:rgba(255,255,255,0.05);border:1px solid var(--border);transition:all .2s ease;}
.to-top:hover{color:var(--text-1);border-color:var(--border-strong);transform:translateY(-2px);}