/* roulang page: index */
:root{
  --bg:#070C16;
  --bg-main:#0B1524;
  --rail-bg:#101C30;
  --blue:#2D7CF6;
  --neon:#2BFFD9;
  --amber:#FDB022;
  --danger:#F36380;
  --white-1:#F5F7FF;
  --white-2:#C6D0E8;
  --white-3:#7182A9;
  --disabled:#46608B;
  --line:rgba(255,255,255,.08);
  --line-soft:rgba(255,255,255,.05);
  --glass:rgba(21,42,78,.42);
  --glass-deep:rgba(18,32,58,.55);
  --radius-lg:18px;
  --radius-md:12px;
  --radius-sm:10px;
  --shadow-card:0 10px 30px rgba(3,8,18,.35);
  --shadow-hover:0 18px 40px rgba(45,124,246,.16);
  --font-default:"Inter","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--white-2);
  font-family:var(--font-default);
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
body.nav-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea,select{font-family:inherit;font-size:1rem}
button{cursor:pointer}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,p{margin:0;font-weight:400}
h1,h2,h3,.h1,.h2,.h3{font-weight:800;color:var(--white-1);line-height:1.18;letter-spacing:-.01em}
strong{font-weight:700}
::selection{background:rgba(43,255,217,.22);color:#fff}
:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
.skip-link{position:absolute;left:-999px;top:-999px;z-index:200}
.skip-link:focus{left:12px;top:12px;background:#fff;color:#000;padding:8px 14px;border-radius:8px}

/* 容器 */
.app-wrap{min-height:100vh}
.container{max-width:1320px;margin:0 auto;padding-left:clamp(20px,4vw,48px);padding-right:clamp(20px,4vw,48px)}
.section{padding:104px 0;position:relative;border-bottom:1px solid var(--line-soft)}
.section.is-dark{background:linear-gradient(180deg,rgba(6,11,20,.5),rgba(9,17,29,.2))}
.section-stack{gap:32px;margin-top:38px;display:grid}
.section-head{display:flex;flex-direction:column;gap:12px;max-width:860px}
.section-head.has-aside{max-width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.sec-kicker{display:inline-flex;align-items:center;gap:12px;color:var(--neon);font-size:13px;letter-spacing:.16em;font-weight:600;text-transform:uppercase}
.sec-kicker::before{content:"";width:22px;height:1px;background:rgba(43,255,217,.45)}
.section-title{font-size:clamp(26px,3.3vw,40px);margin-top:2px}
.section-lead{color:var(--white-3);font-size:16px;max-width:720px}
.anchor{scroll-margin-top:100px}

/* 左侧导航壳 */
.left-rail{
  position:fixed;
  top:0;bottom:0;left:0;
  width:248px;
  background:var(--rail-bg);
  border-right:1px solid rgba(255,255,255,.05);
  z-index:120;
  display:flex;
  flex-direction:column;
  box-shadow:8px 0 28px rgba(2,6,14,.28);
}
.rail-inner{display:flex;flex-direction:column;height:100%;padding:26px 16px 20px;overflow-y:auto;overscroll-behavior:contain}
.brand-logo{display:flex;align-items:center;gap:12px;padding:0 10px;margin-bottom:30px}
.logo-mark{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;color:var(--neon);background:linear-gradient(145deg,rgba(43,255,217,.22),rgba(45,124,246,.12));border:1px solid rgba(43,255,217,.28);box-shadow:0 0 28px rgba(43,255,217,.08)}
.logo-mark svg{width:22px;height:22px}
.brand-logo strong{font-size:19px;font-weight:800;color:var(--white-1);letter-spacing:.03em;white-space:nowrap}
.brand-logo span{display:block;font-size:11px;color:var(--white-3);letter-spacing:.12em;margin-top:2px}
.rail-nav{border-top:1px solid var(--line-soft);padding-top:18px;display:flex;flex-direction:column;gap:4px}
.nav-label{font-size:12px;color:var(--disabled);letter-spacing:.13em;padding:0 12px;margin-bottom:8px;font-weight:600}
.nav-item{
  display:flex;align-items:center;gap:12px;
  min-height:46px;padding:0 12px;
  border-radius:10px;
  color:rgba(230,238,255,.72);
  font-size:15px;font-weight:500;
  border-left:3px solid transparent;
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
  position:relative;
}
.nav-item svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none;opacity:.75}
.nav-item:hover{color:#fff;background:rgba(255,255,255,.045)}
.nav-item.is-active{color:#fff;border-left-color:var(--neon);background:linear-gradient(90deg,rgba(43,255,217,.10),rgba(43,255,217,.015));box-shadow:inset 0 0 18px rgba(43,255,217,.025)}
.nav-item.is-active svg{opacity:1;filter:drop-shadow(0 0 6px rgba(43,255,217,.35))}
.rail-bottom{margin-top:auto;display:grid;gap:12px;padding-top:24px}
.rail-note{font-size:12px;color:var(--white-3);line-height:1.7;padding:0 6px}
.rail-login-btn{
  width:100%;height:44px;border:0;border-radius:10px;
  background:var(--neon);color:#081426;font-weight:700;font-size:15px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 0 24px rgba(43,255,217,.25);
  transition:background .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
}
.rail-login-btn:hover{background:#5AFFF0;transform:translateY(-2px);box-shadow:0 10px 28px rgba(43,255,217,.3)}
.rail-login-btn svg{width:16px;height:16px;stroke:currentColor}
.rail-ghost{
  width:100%;min-height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.22);
  background:transparent;color:#fff;font-size:13px;display:flex;justify-content:center;align-items:center;gap:7px;
  transition:border-color .2s,border-color .2s,background .2s;
}
.rail-ghost:hover{border-color:var(--neon);color:var(--neon)}

/* 移动顶栏 */
.mobile-topbar{
  position:fixed;top:0;right:0;left:0;height:68px;z-index:110;
  display:none;align-items:center;justify-content:space-between;
  padding:0 18px;background:rgba(16,27,47,.9);backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.mobile-topbar .brand-logo{margin:0}
.mobile-actions{display:flex;align-items:center;gap:12px}
.mobile-login{color:var(--neon);font-size:14px;font-weight:600;padding:6px 10px;border-radius:8px}
.mobile-login:hover{background:rgba(43,255,217,.1)}
.menu-button{
  width:42px;height:42px;border-radius:10px;border:1px solid var(--line-soft);
  background:rgba(255,255,255,.04);color:#fff;display:grid;place-items:center;
}
.menu-button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.menu-mask{position:fixed;inset:0;background:rgba(2,6,12,.62);backdrop-filter:blur(4px);z-index:115;opacity:0;pointer-events:none;transition:opacity .3s}
body.nav-open .menu-mask{opacity:1;pointer-events:auto}
body.nav-open .left-rail{transform:translateX(0)}

/* 主内容 */
.main-wrap{margin-left:248px;min-height:100vh}
.main-content{position:relative}

/* 通用按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 22px;border-radius:var(--radius-sm);
  font-size:15px;font-weight:700;line-height:1;white-space:nowrap;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease);
}
.btn-primary{
  background:var(--neon);color:#081426;
  box-shadow:0 0 24px rgba(43,255,217,.22);
}
.btn-primary:hover{background:#5AFFF0;transform:translateY(-2px);box-shadow:0 12px 32px rgba(43,255,217,.3)}
.btn-ghost{border:1px solid rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--neon);color:var(--neon);transform:translateY(-2px)}
.btn-blue{background:rgba(45,124,246,.18);border:1px solid rgba(45,124,246,.4);color:#fff}
.btn-blue:hover{background:rgba(45,124,246,.28)}
.btn-sm{min-height:38px;padding:0 16px;font-size:14px}
.btn-block{width:100%}

/* Hero */
.hero-wall{
  position:relative;
  min-height:94vh;
  overflow:hidden;
  display:flex;
  background:#050B15;
}
.hero-bg-img{
  position:absolute;inset:0;
  background-image:url("/assets/images/backpic/back-1.png");
  background-position:center 30%;
  background-size:cover;
  background-repeat:no-repeat;
}
.hero-scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(960px 500px at 4% 0%,rgba(43,255,217,.1),transparent 55%),
    radial-gradient(820px 420px at 98% 10%,rgba(45,124,246,.16),transparent 55%),
    linear-gradient(90deg,rgba(4,9,18,.94) 0%,rgba(5,11,21,.84) 48%,rgba(7,13,25,.72) 100%);
}
.hero-bg-img::after{content:"";position:absolute;inset:0;background:rgba(4,8,16,.3)}
.hero-container{position:relative;z-index:2;width:min(1320px,92vw);margin:0 auto;padding:88px clamp(0,4vw,48px);display:grid;grid-template-columns:minmax(0,62fr) minmax(0,38fr);align-items:center;gap:clamp(28px,4vw,56px)}
.hero-copy{padding-right:clamp(0,2vw,20px)}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:rgba(230,238,255,.9);font-size:13px;letter-spacing:.08em;
  padding:7px 14px;border-radius:999px;margin-bottom:24px;backdrop-filter:blur(10px);
}
.hero-eyebrow svg{width:15px;height:15px;stroke:var(--neon);fill:none}
.hero-eyebrow span{color:#fff;font-weight:600}
.hero-title{font-size:clamp(38px,5.2vw,68px);font-weight:800;color:#fff;line-height:1.1;letter-spacing:-.02em;max-width:10em;text-shadow:0 4px 28px rgba(0,0,0,.3)}
.hero-title .dot{color:var(--neon)}
.hero-lead{margin-top:22px;font-size:clamp(16px,1.2vw,20px);color:#D4E0F5;max-width:560px;line-height:1.8}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:34px}
.hero-trust{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08)}
.trust-item{display:flex;align-items:center;gap:8px;color:rgba(211,225,245,.72);font-size:13px}
.trust-item svg{width:15px;height:15px;stroke:var(--neon);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-scroll{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.5);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:2;font-size:11px;letter-spacing:.22em}
.hero-scroll svg{width:18px;height:24px;stroke:rgba(43,255,217,.8);fill:none;stroke-width:1.6;animation:scrollPulse 1.8s infinite}
@keyframes scrollPulse{0%{transform:translateY(0);opacity:.5}50%{transform:translateY(7px);opacity:1}100%{transform:translateY(0);opacity:.5}}

/* Hero preview */
.hero-preview{position:relative}
.preview-window{
  background:var(--glass-deep);backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);
  box-shadow:0 30px 90px rgba(4,10,22,.6);
  overflow:hidden;
  position:relative;
}
.preview-window::before{content:"";position:absolute;inset:0;padding:1px;border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.24),transparent 40%);pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.preview-chrome{display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-bottom:1px solid var(--line-soft)}
.chrome-dot{width:11px;height:11px;border-radius:50%}
.chrome-dot.red{background:#f36380}
.chrome-dot.yellow{background:var(--amber)}
.chrome-dot.green{background:var(--neon)}
.chrome-address{margin-left:12px;color:rgba(218,230,248,.5);font-size:12px;background:rgba(255,255,255,.06);border-radius:8px;padding:4px 14px;flex:1;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preview-shot{padding:14px}
.preview-shot img{border-radius:12px;width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--line)}
.preview-float{
  position:absolute;right:-16px;bottom:-18px;
  background:rgba(17,33,60,.74);backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(43,255,217,.22);border-radius:14px;
  box-shadow:0 20px 55px rgba(2,5,15,.55);
  padding:14px 18px;display:flex;align-items:center;gap:12px;
}
.preview-float .up-blue{font-size:24px;font-weight:800;color:var(--neon);line-height:1}
.preview-float small{display:block;color:#88A0C8;font-size:11px;line-height:1.4;margin-top:2px}

/* 玻璃卡 */
.glass-card{
  background:var(--glass);backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
}

/* 演示区 */
.console-stage{position:relative}
.demo-wrap{
  margin-top:48px;background:radial-gradient(1200px 420px at 30% 0%,rgba(45,124,246,.14),transparent 60%),rgba(10,18,33,.3);
  border:1px solid rgba(255,255,255,.05);border-radius:22px;padding:clamp(20px,4vw,34px);
}
.browser-shell{
  background:#0a1322;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-card);
}
.browser-bar{height:46px;padding:0 16px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.045);border-bottom:1px solid var(--line-soft)}
.browser-bar .dot{width:10px;height:10px;border-radius:50%}
.browser-bar .dot:nth-child(1){background:#f36380}
.browser-bar .dot:nth-child(2){background:#fdb022}
.browser-bar .dot:nth-child(3){background:#2bffd9}
.browser-body{display:grid;grid-template-columns:1.25fr .95fr;gap:0}
.browser-shot img{width:100%;height:100%;object-fit:cover;min-height:300px}
.shot-side{padding:clamp(20px,3vw,34px);display:flex;flex-direction:column;justify-content:center;gap:18px}
.side-type{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--neon);background:rgba(43,255,217,.1);border:1px solid rgba(43,255,217,.18);padding:5px 12px;border-radius:999px;width:max-content}
.side-title{font-size:clamp(19px,2vw,25px);color:#fff;font-weight:700;line-height:1.4}
.side-labels{display:flex;flex-wrap:wrap;gap:9px}
.side-label{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(21,42,78,.45);color:#B9C8E8;font-size:13px}
.side-label strong{color:#fff;font-weight:600}
.console-flowlist{display:grid;gap:0;margin-top:26px}
.flow-step{display:flex;gap:16px;align-items:flex-start;padding:16px 2px;border-bottom:1px solid var(--line-soft)}
.flow-step:last-child{border-bottom:0}
.flow-index{width:26px;height:26px;flex:none;border-radius:8px;background:rgba(43,255,217,.1);border:1px solid rgba(43,255,217,.2);color:var(--neon);font-size:13px;font-weight:700;display:grid;place-items:center;margin-top:3px}
.flow-title{color:#fff;font-weight:600;font-size:15px}
.flow-desc{color:var(--white-3);font-size:14px;line-height:1.65;margin-top:4px;max-width:650px}

/* 证据区 */
.evidence-band{
  margin-bottom:46px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:30px 0;display:grid;grid-template-columns:repeat(3,1fr);
}
.evidence-num{font-size:clamp(52px,6vw,78px);font-weight:800;color:transparent;-webkit-text-stroke:2px rgba(43,255,217,.74);line-height:1;text-shadow:0 0 28px rgba(43,255,217,.16)}
.evidence-num.pale{color:rgba(43,255,217,.2);-webkit-text-stroke:2px rgba(43,255,217,.28);text-shadow:none}
.evidence-item{padding:8px 20px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.evidence-item:first-child{padding-left:0}
.evidence-item:last-child{border-right:0;padding-right:0}
.evidence-title{font-size:15px;color:#fff;font-weight:700}
.evidence-text{font-size:13px;color:var(--white-3);line-height:1.7}
.evidence-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;margin-top:18px}
.timeline{display:flex;flex-direction:column;gap:0;position:relative;padding-left:26px}
.timeline::before{content:"";position:absolute;left:6px;top:4px;bottom:10px;width:1px;background:linear-gradient(180deg,rgba(43,255,217,.4),rgba(255,255,255,.06))}
.timeline-item{position:relative;padding:0 0 28px}
.timeline-item::before{content:"";position:absolute;left:-25px;top:8px;width:11px;height:11px;border-radius:50%;background:var(--neon);box-shadow:0 0 16px rgba(43,255,217,.7);border:2px solid #0B1524}
.timeline-date{color:var(--neon);font-size:13px;letter-spacing:.1em;font-weight:600}
.timeline-title{color:#fff;font-size:16px;font-weight:700;margin:3px 0 4px}
.timeline-desc{color:var(--white-3);font-size:14px;max-width:470px}
.accredit-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;height:max-content}
.accredit-card{
  background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:22px 20px;transition:transform .2s var(--ease),border-color .2s;
}
.accredit-card:hover{transform:translateY(-3px);border-color:rgba(43,255,217,.3)}
.accredit-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;border:1px solid rgba(45,124,246,.3);background:rgba(45,124,246,.08);color:#6FA6FF;margin-bottom:12px}
.accredit-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.accredit-title{font-size:15px;font-weight:700;color:#fff}
.accredit-desc{font-size:13px;color:var(--white-3);line-height:1.6;margin-top:5px}

/* 资讯 */
.news-panel{background:rgba(12,21,38,.42);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-lg);padding:clamp(16px,2.6vw,28px);margin-top:44px}
.news-list{display:flex;flex-direction:column}
.news-row{border-bottom:1px solid rgba(255,255,255,.055)}
.news-row:last-child{border-bottom:0}
.news-row-link{
  display:grid;grid-template-columns:170px 1fr 34px;gap:20px;align-items:center;
  padding:20px 12px;border-radius:12px;
  transition:transform .25s var(--ease),background .25s var(--ease);
}
.news-row-link:hover{background:rgba(43,255,217,.035);transform:translateX(4px)}
.news-row-link:hover .news-arrow{opacity:1;color:var(--neon)}
.news-date{color:var(--white-3);font-size:13px;font-variant-numeric:tabular-nums}
.news-title{display:block;color:#fff;font-size:16px;font-weight:600}
.news-summary{display:block;color:var(--white-3);font-size:14px;line-height:1.6;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:760px}
.news-arrow{opacity:0;transition:opacity .25s;font-size:22px;font-style:normal;color:#7A92C0}
.news-empty{
  min-height:150px;border:1px dashed rgba(255,255,255,.16);background:rgba(255,255,255,.02);
  border-radius:14px;display:grid;place-items:center;color:var(--white-3);font-size:15px;letter-spacing:.02em;
}

/* 服务方案 */
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:end}
.plan-card{
  background:rgba(20,34,58,.5);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:34px 28px;height:100%;display:flex;flex-direction:column;position:relative;overflow:hidden;
  box-shadow:var(--shadow-card);transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.plan-card:hover{transform:translateY(-5px);border-color:rgba(43,255,217,.28);box-shadow:var(--shadow-hover)}
.plan-card.is-featured{
  background:rgba(17,38,61,.7);border-color:rgba(43,255,217,.32);
  transform:scale(1.03);box-shadow:0 28px 80px rgba(4,10,22,.6),0 0 60px rgba(43,255,217,.08);
}
.plan-card.is-featured:hover{transform:scale(1.035) translateY(-5px)}
.plan-name{font-size:13px;letter-spacing:.16em;color:var(--white-3);font-weight:600;text-transform:uppercase;margin-bottom:10px}
.plan-card.is-featured .plan-name{color:var(--neon)}
.plan-title{font-size:22px;font-weight:800;color:#fff;margin-bottom:8px}
.plan-brief{font-size:14px;line-height:1.75;color:var(--white-3);margin-bottom:20px}
.plan-list{display:grid;gap:10px;margin-bottom:24px;border-top:1px solid var(--line);padding-top:22px}
.plan-list li{display:flex;gap:9px;font-size:14px;color:#AFC0DD;line-height:1.6}
.plan-list svg{width:16px;height:16px;flex:none;stroke:var(--neon);fill:none;stroke-width:2;margin-top:4px}
.plan-actions{margin-top:auto}
.plan-tag{position:absolute;right:16px;top:16px;font-size:12px;color:var(--neon);border:1px solid rgba(43,255,217,.2);background:rgba(43,255,217,.07);border-radius:999px;padding:3px 10px}

/* FAQ */
.faq-column{max-width:960px;margin-top:40px}
.faq-item{border-bottom:1px solid rgba(255,255,255,.09)}
.faq-item:first-child{border-top:1px solid rgba(255,255,255,.06)}
.faq-toggle{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;
  background:transparent;border:0;padding:22px 4px;text-align:left;
}
.faq-question{font-size:17px;color:#fff;font-weight:600;max-width:75ch}
.faq-icon{flex:none;width:26px;height:26px;position:relative;display:inline-block;transition:transform .28s var(--ease)}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;background:var(--neon);border-radius:3px;transition:transform .25s var(--ease)}
.faq-icon::before{width:12px;height:1.5px;top:12px;left:7px}
.faq-icon::after{width:1.5px;height:12px;top:7px;left:12px}
.faq-item.is-open .faq-icon{transform:rotate(45deg)}
.faq-answer{height:0;overflow:hidden;opacity:0;transition:height .3s ease,opacity .25s ease}
.faq-answer-inner{padding:0 4px 24px;color:var(--white-3);font-size:15px;line-height:1.8;max-width:820px}
.faq-item.is-open .faq-answer{height:auto;opacity:1}
.faq-item.is-open .faq-question{color:var(--neon)}

/* CTA */
.cta-wrap{margin:96px 0 0}
.cta-inner{
  border-radius:22px;padding:clamp(28px,5vw,60px);
  background:radial-gradient(800px 300px at 20% 0%,rgba(45,124,246,.2),transparent 60%),rgba(13,30,56,.44);
  border:1px solid rgba(255,255,255,.1);overflow:hidden;position:relative;
}
.cta-inner::before{
  content:"";position:absolute;left:-70px;top:-110px;width:320px;height:320px;border-radius:50%;
  background:rgba(43,255,217,.13);filter:blur(80px);pointer-events:none;
}
.cta-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center;position:relative}
.cta-title{font-size:clamp(26px,3.4vw,42px);color:#fff;font-weight:800;line-height:1.3}
.cta-copy{color:#AFC4E4;margin-top:16px;max-width:600px}
.cta-buttons{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.cta-metrics{display:grid;gap:0;border-left:1px solid var(--line);padding-left:40px}
.cta-metric{display:flex;align-items:center;gap:14px;padding:8px 0;color:#D7E3F6;font-size:15px}
.cta-metric span{width:7px;height:7px;border-radius:50%;background:var(--neon);box-shadow:0 0 12px rgba(43,255,217,.6);flex:none}
.cta-metric small{display:block;color:var(--white-3);font-size:13px;line-height:1.6;margin-top:1px}
.metric-stack{display:flex;flex-direction:column}

/* 页脚 */
.site-footer{background:rgba(6,11,20,.75);border-top:1px solid rgba(255,255,255,.06);padding:56px 0 26px}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .9fr;gap:44px;padding-bottom:36px}
.footer-brand{font-size:20px;color:#fff;font-weight:800;display:flex;align-items:center;gap:12px}
.footer-brand .logo-mark{margin:0}
.footer-desc{color:var(--white-3);font-size:14px;margin-top:18px;max-width:340px;line-height:1.8}
.footer-title{font-size:14px;color:#fff;font-weight:700;letter-spacing:.06em;margin-bottom:18px}
.footer-links{display:grid;gap:10px}
.footer-links a{color:var(--white-3);font-size:14px;transition:color .2s;line-height:1.5;width:max-content}
.footer-links a:hover{color:var(--neon)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.05);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--white-3);font-size:13px}
.footer-meta{display:flex;gap:16px;flex-wrap:wrap}

/* 浮动 */
.float-cta{
  position:fixed;right:34px;bottom:34px;z-index:90;
  display:flex;align-items:center;gap:10px;
  background:#081426;border:1px solid rgba(43,255,217,.3);color:#fff;
  border-radius:999px;padding:8px 9px;
  box-shadow:0 0 28px rgba(43,255,217,.16);
  opacity:0;transform:translateY(20px);pointer-events:none;
  transition:opacity .3s,transform .3s,background .3s,border-color .3s;
  font-size:14px;font-weight:500;
}
.float-cta.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}
.float-cta:hover{border-color:var(--neon);background:#11263e}
.float-cta .float-circle{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--neon);flex:none}
.float-cta .float-circle svg{width:18px;height:18px;stroke:#081426;fill:none;stroke-width:2}
.float-cta .float-label{padding-right:10px;font-weight:700;color:#fff}
.float-top{position:fixed;right:34px;bottom:86px;z-index:89;width:42px;height:42px;border-radius:12px;background:rgba(30,58,92,.8);border:1px solid var(--line);color:#fff;display:grid;place-items:center;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .25s,transform .25s}
.float-top.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}
.float-top svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.float-top:hover{border-color:var(--neon);color:var(--neon)}

/* Foundation 默认覆盖 */
.button,.top-bar,.menu,.accordion-title{margin:0;padding:0;font-family:inherit}
button.button{margin:0;font-family:inherit}
.accordion-title{background:transparent;border:0;color:inherit;font-size:inherit;line-height:inherit}
.accordion-title:hover,.accordion-title:focus{background:transparent;color:inherit}
.accordion-item{border:0}
.accordion-content{border:0;background:transparent;color:inherit;padding:0}

/* 移动响应 */
@media (max-width:1023px){
  .left-rail{
    transform:translateX(-102%);width:284px;
    transition:transform .3s var(--ease);
    box-shadow:24px 0 55px rgba(0,0,0,.4);
  }
  .mobile-topbar{display:flex}
  .main-wrap{margin-left:0;padding-top:68px}
  .hero-container{padding:64px 24px 96px;grid-template-columns:1fr}
  .preview-window{max-width:620px;margin:0 auto}
  .hero-copy{padding-right:0}
  .hero-scroll{left:24px;transform:none}
  .evidence-band{grid-template-columns:1fr 1fr 1fr}
  .section{padding:72px 0}
  .cta-grid{grid-template-columns:1fr}
  .cta-metrics{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:18px}
}
@media (max-width:860px){
  .browser-body{grid-template-columns:1fr}
  .browser-shot img{min-height:230px}
  .evidence-grid{grid-template-columns:1fr}
  .plans-grid{grid-template-columns:1fr;max-width:580px;margin-inline:auto}
  .plan-card.is-featured{transform:none}
  .plan-card.is-featured:hover{transform:translateY(-4px)}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .section-title{letter-spacing:-.01em}
}
@media (max-width:640px){
  .section{padding:60px 0}
  .evidence-band{grid-template-columns:1fr;row-gap:22px}
  .evidence-item{border-right:0;border-bottom:1px solid var(--line);padding:16px 0}
  .evidence-item:last-child{border-bottom:0}
  .accredit-grid{grid-template-columns:1fr}
  .news-row-link{grid-template-columns:1fr;gap:6px;padding:18px 8px}
  .news-date{font-size:12px}
  .news-summary{white-space:normal}
  .news-arrow{display:none}
  .hero-actions{flex-direction:column;align-items:stretch}
  .btn{width:100%}
  .hero-title{font-size:36px}
  .preview-float{position:static;margin-top:12px}
  .float-cta{right:16px;bottom:16px}
  .float-top{right:16px;bottom:68px}
  .footer-bottom{flex-direction:column}
  .faq-question{font-size:15px}
}

/* roulang page: article */
:root{
  --bg-deep:#070C16;
  --bg-main:#0B1524;
  --rail-bg:rgba(16,28,48,.86);
  --glass:rgba(21,42,78,.42);
  --glass-strong:rgba(18,32,58,.72);
  --line-card:rgba(255,255,255,.08);
  --line-soft:rgba(255,255,255,.06);
  --head:#F5F7FF;
  --copy:#C6D0E8;
  --muted:#7182A9;
  --disabled:#46608B;
  --cyan:#2BFFD9;
  --cyan-deep:#0EC6AC;
  --cyan-glow:rgba(43,255,217,.32);
  --blue:#2D7CF6;
  --amber:#FDB022;
  --danger:#F36380;
  --radius-card:18px;
  --radius-btn:10px;
  --radius-input:12px;
  --shadow-card:0 10px 30px rgba(3,8,18,.35);
  --shadow-hover:0 18px 40px rgba(45,124,246,.16);
  --font:"Inter","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",-apple-system,BlinkMacSystemFont,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);background:var(--bg-deep);color:var(--copy);line-height:1.8;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--font);font-weight:800;color:var(--head);line-height:1.2;margin:0}
p{margin:0}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}
.container{max-width:1440px;margin:0 auto;padding-left:40px;padding-right:40px;width:100%}
::selection{background:rgba(43,255,217,.24);color:#fff}

/* ====== App Shell ====== */
.site-shell{min-height:100vh;background:var(--bg-deep)}
.rail{
  position:fixed;top:0;left:0;bottom:0;width:248px;z-index:80;
  background:
    linear-gradient(180deg,rgba(18,30,52,.92),rgba(9,16,30,.98)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0,rgba(255,255,255,.02) 1px,transparent 1px,transparent 40px);
  border-right:1px solid rgba(255,255,255,.04);
  display:flex;flex-direction:column;padding:26px 18px 22px;backdrop-filter:blur(18px);
}
.rail-brand{display:flex;align-items:center;gap:10px;padding:4px 10px 26px;border-bottom:1px solid rgba(255,255,255,.06)}
.brand-logo{width:42px;height:42px;border-radius:13px;background:rgba(43,255,217,.08);border:1px solid rgba(43,255,217,.18);display:flex;align-items:center;justify-content:center;color:var(--cyan);flex:0 0 42px}
.brand-logo svg{width:23px;height:23px}
.rail-brand-text{display:flex;flex-direction:column;line-height:1.2}
.rail-brand-text strong{color:var(--head);font-size:21px;font-weight:800;letter-spacing:.5px}
.rail-brand-text span{font-size:12px;color:var(--muted);margin-top:3px;letter-spacing:1.6px}
.nav-label{font-size:11px;color:var(--disabled);text-transform:uppercase;letter-spacing:2px;padding:0 10px;margin:22px 0 10px}
.rail-nav{display:flex;flex-direction:column;gap:4px;flex:1 1 auto}
.nav-item{display:flex;align-items:center;gap:12px;padding:13px 12px;border-radius:12px;color:#B9C6E2;font-size:15px;font-weight:600;position:relative;transition:background .25s ease,color .25s ease,transform .25s ease;border:1px solid transparent}
.nav-item svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 20px;opacity:.8}
.nav-item:hover{background:rgba(45,124,246,.1);color:#fff;transform:translateX(2px)}
.nav-item.is-active{background:rgba(23,48,84,.72);color:#fff;border-color:rgba(43,255,217,.14);box-shadow:inset 0 0 0 1px rgba(43,255,217,.04)}
.nav-item.is-active::before{content:"";position:absolute;left:-1px;top:26%;height:48%;width:3px;border-radius:8px;background:var(--cyan);box-shadow:0 0 10px var(--cyan-glow)}
.rail-login{margin-top:20px;width:100%}
.btn-rail{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;background:linear-gradient(90deg,rgba(43,255,217,.14),rgba(45,124,246,.1));color:var(--cyan);border:1px solid rgba(43,255,217,.3);border-radius:var(--radius-btn);font-weight:700;font-size:14px;transition:.25s}
.btn-rail svg{width:17px;height:17px}
.btn-rail:hover{background:linear-gradient(90deg,rgba(43,255,217,.24),rgba(45,124,246,.2));color:#fff;box-shadow:0 0 28px rgba(43,255,217,.24)}
.stage{min-height:100vh;margin-left:248px;position:relative}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(1100px 440px at 80% -6%,rgba(45,124,246,.11),transparent 60%),
  radial-gradient(700px 380px at 30% 15%,rgba(43,255,217,.04),transparent 60%);}
.stage > *{position:relative;z-index:1}
.topbar{display:none}
.drawer-backdrop,.drawer{display:none}

/* ====== Article Hero ====== */
.article-hero{
  padding:74px 0 36px;
  background:
    linear-gradient(115deg,rgba(5,10,22,.82) 0%,rgba(9,18,34,.66) 100%),
    url('/assets/images/backpic/back-1.png') center right / cover no-repeat;
  border-bottom:1px solid rgba(255,255,255,.04);
  position:relative;overflow:hidden;
}
.article-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(700px 240px at 70% 0,rgba(43,255,217,.06),transparent 65%)}
.article-inner{max-width:920px;margin:0 auto;padding:0 32px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:14px;color:var(--muted);margin-bottom:24px}
.crumbs a{color:#9AA9C7;transition:color .2s}
.crumbs a:hover{color:var(--cyan)}
.crumb-sep{opacity:.4;color:var(--disabled)}
.crumbs .current{color:var(--copy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(43,255,217,.09);border:1px solid rgba(43,255,217,.18);color:var(--cyan);font-size:12px;font-weight:700;letter-spacing:1.4px;padding:7px 15px;border-radius:999px;margin-bottom:20px}
.hero-kicker svg{width:14px;height:14px}
.article-hero h1{font-size:clamp(30px,4vw,46px);line-height:1.18;font-weight:800;color:var(--head);margin-bottom:20px;letter-spacing:-.4px}
.article-hero h1 .title-accent{border-bottom:3px solid rgba(43,255,217,.3)}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;font-size:14px;color:var(--muted);margin-top:16px}
.meta-cell{display:inline-flex;align-items:center;gap:7px}
.meta-cell svg{width:16px;height:16px;opacity:.7}
.meta-cell .chapter-tag{background:rgba(45,124,246,.15);border:1px solid rgba(45,124,246,.24);color:#9ABCFA;border-radius:999px;padding:3px 13px;font-size:13px;font-weight:600}

/* ====== Article body ====== */
.article-read{padding:64px 0 36px}
.article-read-inner{max-width:920px;margin:0 auto;padding:0 32px}
.article-panel{background:var(--glass-strong);border:1px solid var(--line-card);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:46px 56px 48px;backdrop-filter:blur(22px) saturate(140%);position:relative;overflow:hidden}
.article-panel::before{content:"";position:absolute;top:0;left:32px;right:32px;height:1px;background:linear-gradient(90deg,transparent,rgba(43,255,217,.28),transparent)}
.article-body{max-width:760px;margin:0 auto;font-size:16.5px;color:var(--copy);line-height:1.85}
.article-body > *:first-child{margin-top:0}
.article-body p{margin:0 0 24px;color:#CBD5EA;letter-spacing:.2px}
.article-body h2{color:var(--head);font-size:26px;font-weight:800;margin:48px 0 18px;letter-spacing:-.1px;border-bottom:1px solid rgba(43,255,217,.12);padding-bottom:14px;position:relative}
.article-body h2::after{content:"";position:absolute;left:0;bottom:-1px;width:66px;height:2px;background:linear-gradient(90deg,var(--cyan),transparent);border-radius:9px}
.article-body h3{color:#DFE7FB;font-size:20px;font-weight:700;margin:36px 0 14px}
.article-body h4{color:var(--head);font-size:17px;font-weight:700;margin:26px 0 12px}
.article-body ul,.article-body ol{margin:0 0 26px;padding-left:24px;color:#C4CFE5}
.article-body li{margin-bottom:10px}
.article-body li::marker{color:var(--cyan)}
.article-body blockquote{border-left:3px solid var(--cyan);background:rgba(16,32,58,.62);margin:30px 0;padding:20px 26px;border-radius:0 14px 14px 0;color:#DCE4F5;font-size:16px;line-height:1.85}
.article-body blockquote p{margin:0 0 8px}
.article-body blockquote p:last-child{margin:0}
.article-body a{color:var(--cyan);text-decoration:underline;text-decoration-color:rgba(43,255,217,.32);text-underline-offset:5px;transition:.2s}
.article-body a:hover{text-decoration-color:var(--cyan)}
.article-body img{border-radius:16px;border:1px solid var(--line-card);margin:28px 0 10px;box-shadow:var(--shadow-card)}
.article-body figure{margin:28px 0}
.article-body figure img{margin:0 0 8px}
.article-body figcaption{font-size:13px;color:var(--muted);text-align:center;padding-top:10px}
.article-body code{background:rgba(45,60,96,.8);padding:3px 9px;border-radius:7px;font-size:.9em;color:#CDE3FF;font-family:ui-monospace,'SF Mono','Cascadia Code',Consolas,monospace}
.article-body pre{background:rgba(8,14,28,.9);border:1px solid var(--line-card);border-radius:14px;padding:20px;overflow:auto;margin:24px 0;color:#D7E2FF;line-height:1.7}
.article-body pre code{background:transparent;padding:0;color:inherit}
.article-body hr{border:none;border-top:1px solid rgba(255,255,255,.08);margin:46px 0}
.article-body table{border-collapse:collapse;width:100%;margin:24px 0;font-size:15px}
.article-body th{background:rgba(45,124,246,.09);color:#E7EBFF;font-weight:700;text-align:left;padding:12px 16px;border:1px solid rgba(255,255,255,.08)}
.article-body td{padding:12px 16px;border:1px solid rgba(255,255,255,.06);color:#B8C5DF}

/* missing */
.article-missing{padding:8px 0 20px}
.missing-message{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:6px 0 8px}
.missing-message .txt{color:var(--copy);font-size:18px;font-weight:600}
.missing-message .btn-back{display:inline-flex;align-items:center;gap:9px;background:rgba(43,255,217,.1);border:1px solid rgba(43,255,217,.3);color:var(--cyan);padding:10px 22px;border-radius:999px;font-weight:700;font-size:14px;transition:.25s}
.missing-message .btn-back:hover{background:var(--cyan);color:#04101A}

/* ====== Article lower / read more ====== */
.article-guide{padding:44px 0 80px}
.article-guide-inner{max-width:920px;margin:0 auto;padding:0 32px}
.guide-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}
.guide-head h2{font-size:clamp(23px,3vw,31px);color:var(--head);margin-bottom:6px}
.guide-head p{color:var(--muted);font-size:14px}
.guide-cta{display:inline-flex;align-items:center;gap:7px;background:rgba(45,124,246,.08);border:1px solid rgba(45,124,246,.2);color:#9ABCFA;padding:7px 17px;border-radius:999px;font-size:13px;font-weight:600;transition:.2s;white-space:nowrap}
.guide-cta:hover{background:rgba(45,124,246,.2);color:#fff;border-color:rgba(45,124,246,.42)}
.guide-grid{counter-reset:rgx;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:30px}
.guide-card{background:linear-gradient(165deg,rgba(20,36,68,.55),rgba(11,20,38,.82));border:1px solid var(--line-card);border-radius:var(--radius-card);padding:26px 24px 24px;position:relative;box-shadow:var(--shadow-card);transition:.28s;overflow:hidden}
.guide-card::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(43,255,217,.24),transparent)}
.guide-card:hover{transform:translateY(-4px);border-color:rgba(43,255,217,.22);box-shadow:var(--shadow-hover)}
.guide-card-num{font-size:12px;color:var(--cyan);font-weight:800;letter-spacing:1.2px;margin-bottom:18px;display:inline-flex;align-items:center;gap:6px}
.guide-card h3{font-size:18px;color:var(--head);line-height:1.35;margin-bottom:12px;font-weight:800}
.guide-card p{font-size:14px;line-height:1.75;color:#8FA1C4;margin-bottom:20px}
.guide-card-link{font-size:13px;font-weight:700;color:var(--cyan);display:inline-flex;gap:5px;align-items:center;opacity:.8;transition:opacity .2s}
.guide-card:hover .guide-card-link{opacity:1;gap:9px}
.guide-card-link svg{width:15px;height:15px}
.back-category{display:inline-flex;align-items:center;gap:10px;color:#9AA9C7;font-weight:600;font-size:15px;transition:.25s;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:5px}
.back-category:hover{color:var(--cyan);border-bottom-color:var(--cyan)}
.back-category svg{width:17px;height:17px;transition:transform .2s}
.back-category:hover svg{transform:translateX(-4px)}

/* ====== Footer ====== */
.site-footer{background:#080D17;border-top:1px solid rgba(255,255,255,.05);padding:54px 0 24px;position:relative;z-index:5}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px;padding-bottom:34px}
.footer-brand{display:flex;align-items:center;gap:10px;color:var(--head);font-size:22px;font-weight:800;margin-bottom:16px}
.logo-mark{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;border:1px solid rgba(43,255,217,.25);background:rgba(43,255,217,.06);color:var(--cyan)}
.logo-mark svg{width:21px;height:21px}
.footer-desc{font-size:14px;line-height:1.8;color:var(--muted);max-width:420px}
.footer-title{font-size:14px;color:var(--head);font-weight:700;margin-bottom:16px;letter-spacing:.4px}
.footer-links{display:flex;flex-direction:column;gap:11px}
.footer-links a{color:var(--muted);font-size:14px;transition:.2s}
.footer-links a:hover{color:var(--cyan)}
.footer-bottom{display:flex;justify-content:space-between;gap:18px;align-items:center;border-top:1px solid rgba(255,255,255,.05);padding-top:24px;font-size:13px;color:#5A6B8D;flex-wrap:wrap}
.footer-meta{display:inline-flex;gap:18px;font-size:12px;color:#425779}

/* ====== Back to top / float ====== */
.back-top{position:fixed;right:30px;bottom:30px;width:50px;height:50px;border-radius:50%;background:rgba(15,28,52,.78);border:1px solid rgba(43,255,217,.32);color:var(--cyan);display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(10px);z-index:70;box-shadow:0 8px 30px rgba(3,8,18,.45);transition:.25s;transform:translateY(12px);opacity:0;pointer-events:none}
.back-top.show{transform:translateY(0);opacity:1;pointer-events:auto}
.back-top svg{width:20px;height:20px}
.back-top:hover{background:var(--cyan);color:#031019;box-shadow:0 0 30px var(--cyan-glow)}

/* ====== Loading fade ====== */
.fade-up{opacity:0;transform:translateY(24px);animation:fadeUp .7s forwards}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* ====== ≤1024 : mobile header ====== */
@media screen and (max-width:1023.98px){
  .rail{display:none}
  .stage{margin-left:0}
  .topbar{display:flex;position:fixed;top:0;left:0;right:0;height:68px;z-index:90;background:rgba(8,15,28,.82);backdrop-filter:blur(18px) saturate(150%);border-bottom:1px solid rgba(255,255,255,.06);align-items:center}
  .topbar-inner{display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 20px;height:100%}
  .topbar-brand{display:flex;align-items:center;gap:7px;color:var(--head);font-size:19px;font-weight:800}
  .topbar-brand .mini-mark{width:34px;height:34px;border-radius:10px;color:var(--cyan);display:flex;align-items:center;justify-content:center;background:rgba(43,255,217,.08);border:1px solid rgba(43,255,217,.2)}
  .topbar-brand .mini-mark svg{width:19px;height:19px}
  .topbar-right{display:flex;align-items:center;gap:8px}
  .topbar-login{font-size:14px;font-weight:600;color:var(--cyan);padding:8px 14px;border:1px solid rgba(43,255,217,.3);border-radius:999px;background:rgba(43,255,217,.07);transition:.2s}
  .topbar-login:active{background:var(--cyan);color:#071017}
  .menu-toggle{width:40px;height:40px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.02);display:flex;align-items:center;justify-content:center;cursor:pointer}
  .menu-toggle svg{width:20px;height:20px;color:var(--copy)}
  .drawer-backdrop{display:block;position:fixed;inset:0;background:rgba(2,6,15,.56);backdrop-filter:blur(6px);z-index:100;opacity:0;pointer-events:none;transition:.3s}
  .drawer-backdrop.show{opacity:1;pointer-events:auto}
  .drawer{display:flex;flex-direction:column;position:fixed;top:0;right:0;width:312px;height:100vh;z-index:110;background:#0B1524;border-left:1px solid rgba(255,255,255,.06);box-shadow:-14px 0 42px rgba(0,0,0,.45);transform:translateX(106%);transition:transform .34s cubic-bezier(.22,.9,.32,1);justify-content:flex-start;padding:22px 18px}
  .drawer.open{transform:translateX(0)}
  .drawer-brand{display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.06);padding:0 8px 20px;color:var(--head);font-size:20px;font-weight:800}
  .drawer-brand .logo-mark{width:38px;height:38px}
  .drawer-nav{display:flex;flex-direction:column;gap:5px;margin-top:18px}
  .drawer-nav .nav-item.is-active{background:rgba(24,52,92,.6)}
  .drawer-login{margin-top:auto;padding-top:20px}
  .btn-drawer-login{display:flex;align-items:center;justify-content:center;height:48px;border-radius:var(--radius-btn);background:var(--cyan);font-weight:800;color:#031019;gap:8px;font-size:15px}
 }

/* ====== small tablet / phone ====== */
@media screen and (max-width:767.98px){
  .container{padding-left:18px;padding-right:18px}
  .article-hero{padding:52px 0 26px}
  .article-inner,.article-read-inner,.article-guide-inner{padding:0 18px}
  .article-panel{padding:28px 20px 34px;border-radius:15px}
  .article-body{font-size:16px}
  .article-body h2{font-size:22px}
  .article-body h3{font-size:18px}
  .guide-grid{grid-template-columns:1fr;gap:18px}
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .guarantee-strip{flex-wrap:wrap}
  .article-read{padding:42px 0 26px}
  .article-guide{padding:26px 0 56px}
  .back-top{right:16px;bottom:24px;width:44px;height:44px}
  .crumbs .current{max-width:150px}
}
@media screen and (max-width:520px){
  .article-hero h1{font-size:28px}
  .article-meta{gap:8px 14px}
  .article-panel{padding:24px 16px 28px}
  .guide-head{flex-direction:column;align-items:flex-start}
  .footer-links{flex-direction:column}
}

/* roulang page: category2 */
:root {
            --page-bg: #070c16;
            --content-bg: #0b1524;
            --rail-bg: rgba(16, 28, 48, 0.94);
            --primary-blue: #2d7cf6;
            --accent-cyan: #2bffd9;
            --amber: #fdb022;
            --danger: #f36380;
            --title-color: #f5f7ff;
            --body-color: #c6d0e8;
            --muted: #7182a9;
            --disabled: #46608b;
            --line-weak: rgba(255, 255, 255, 0.08);
            --card-bg: rgba(21, 42, 78, 0.42);
            --card-blur: rgba(18, 32, 58, 0.55);
            --radius-card: 18px;
            --radius-btn: 10px;
            --radius-tag: 999px;
            --radius-input: 12px;
            --shadow-1: 0 10px 30px rgba(3, 8, 18, 0.35);
            --shadow-2: 0 18px 40px rgba(45, 124, 246, 0.16);
            --space-section: 104px;
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
            background: var(--page-bg);
            color: var(--body-color);
            line-height: 1.8;
            font-size: 16px;
            letter-spacing: 0.01em;
            scroll-padding-top: 80px;
        }

        body.is-locked {
            overflow: hidden;
        }

        img {
            max-width: 100%;
            display: block;
        }

        a {
            color: inherit;
            text-decoration: none;
            transition: color 0.25s;
        }

        button {
            font: inherit;
            border: none;
            outline: none;
            cursor: pointer;
            background: none;
            color: inherit;
        }

        input,
        textarea {
            font: inherit;
        }

        .container {
            max-width: 1440px;
            margin: 0 auto;
            padding: 0 32px;
        }

        @media (max-width: 640px) {
            .container {
                padding: 0 20px;
            }
        }

        h1,
        h2,
        h3,
        h4,
        h5 {
            font-weight: 800;
            color: var(--title-color);
            line-height: 1.2;
            text-wrap: balance;
        }

        h1 {
            font-size: clamp(38px, 5vw, 64px);
        }

        h2 {
            font-size: clamp(26px, 3.3vw, 40px);
        }

        p {
            margin: 0;
        }

        a:focus-visible,
        button:focus-visible {
            outline: 2px solid var(--accent-cyan);
            outline-offset: 2px;
        }

        .page-shell {
            display: flex;
            min-height: 100vh;
            background: var(--page-bg);
            position: relative;
        }

        .page-shell::before {
            content: "";
            position: fixed;
            inset: 0;
            background:
                radial-gradient(ellipse 90% 50% at 80% 10%, rgba(45, 124, 246, 0.08), transparent 60%),
                radial-gradient(ellipse 70% 40% at 55% 50%, rgba(43, 255, 217, 0.025), transparent 60%);
            pointer-events: none;
            z-index: 0;
        }

        /* Left rail */
        .app-rail {
            width: 248px;
            flex: 0 0 248px;
            background: var(--rail-bg);
            border-right: 1px solid rgba(255, 255, 255, 0.045);
            backdrop-filter: blur(18px) saturate(140%);
            display: flex;
            flex-direction: column;
            padding: 28px 18px;
            position: sticky;
            top: 0;
            height: 100vh;
            z-index: 20;
        }

        .brand-wrap {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0 8px 26px;
        }

        .brand-logo {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--title-color);
            font-size: 22px;
            font-weight: 800;
            white-space: nowrap;
            letter-spacing: 0.01em;
        }

        .brand-logo .logo-glyph {
            width: 30px;
            height: 30px;
            border: 1px solid rgba(43, 255, 217, 0.55);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent-cyan);
            flex: 0 0 30px;
        }

        .brand-logo .logo-glyph svg {
            width: 17px;
            height: 17px;
        }

        .nav-label {
            font-size: 12px;
            letter-spacing: 0.18em;
            color: var(--disabled);
            padding: 8px 12px 8px;
            text-transform: uppercase;
        }

        .rail-nav {
            display: flex;
            flex-direction: column;
            gap: 4px;
            flex: 1;
        }

        .rail-nav .nav-item {
            display: flex;
            align-items: center;
            gap: 12px;
            border-radius: 12px;
            color: var(--muted);
            font-weight: 500;
            font-size: 15px;
            padding: 12px 16px;
            line-height: 1.4;
            position: relative;
            transition: background 0.2s, color 0.2s;
        }

        .rail-nav .nav-item svg {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .rail-nav .nav-item:hover {
            background: rgba(255, 255, 255, 0.04);
            color: #dbe3ff;
        }

        .rail-nav .nav-item.is-active {
            background: linear-gradient(90deg, rgba(45, 124, 246, 0.18), rgba(45, 124, 246, 0.02));
            color: #fff;
            font-weight: 600;
            box-shadow: inset 2px 0 0 var(--accent-cyan);
        }

        .rail-cta {
            margin-top: auto;
        }

        .rail-cta .btn-login-rail {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            width: 100%;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: #e7ecfb;
            padding: 11px 14px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
            transition: border-color 0.2s, background 0.2s;
        }

        .rail-cta .btn-login-rail i {
            font-size: 14px;
            color: var(--accent-cyan);
        }

        .rail-cta .btn-login-rail:hover {
            border-color: rgba(43, 255, 217, 0.45);
            background: rgba(43, 255, 217, 0.06);
        }

        /* Main area */
        .content-zone {
            flex: 1;
            min-width: 0;
            position: relative;
            background:
                linear-gradient(90deg, rgba(11, 21, 36, 0.95) 0%, #0b1524 45%, rgba(11, 21, 36, 1) 100%);
            z-index: 1;
        }

        .main-column {
            padding: 0 44px;
            max-width: 1024px;
            margin: 0 auto;
        }

        @media (max-width: 1200px) {
            .main-column {
                padding: 0 32px;
                max-width: 920px;
            }
        }

        /* Top bar mobile */
        .topbar-mobile {
            display: none;
            height: 68px;
            align-items: center;
            justify-content: space-between;
            padding: 0 22px;
            background: rgba(8, 13, 24, 0.86);
            backdrop-filter: blur(18px);
            position: sticky;
            top: 0;
            z-index: 80;
        }

        .topbar-mobile .brand-logo {
            font-size: 19px;
        }

        .topbar-mobile .brand-logo .logo-glyph {
            width: 26px;
            height: 26px;
            border-radius: 6px;
        }

        .topbar-mobile .brand-logo .logo-glyph svg {
            width: 14px;
            height: 14px;
        }

        .mobile-login {
            font-size: 14px;
            font-weight: 600;
            color: var(--accent-cyan);
        }

        .mobile-drawer-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            color: var(--title-color);
            background: rgba(255, 255, 255, 0.06);
            font-size: 22px;
        }

        /* Drawer */
        .drawer-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(3, 6, 12, 0.55);
            backdrop-filter: blur(4px);
            z-index: 90;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.28s;
        }

        .drawer-backdrop.is-show {
            opacity: 1;
            pointer-events: auto;
        }

        .drawer-panel {
            position: fixed;
            top: 0;
            right: 0;
            width: 290px;
            height: 100%;
            background: #0b1424;
            border-left: 1px solid rgba(255, 255, 255, 0.06);
            padding: 28px 22px;
            transform: translateX(100%);
            transition: transform 0.28s ease;
            z-index: 100;
            display: flex;
            flex-direction: column;
        }

        .drawer-panel.is-open {
            transform: translateX(0);
        }

        .drawer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 24px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            margin-bottom: 20px;
        }

        .drawer-close {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            font-size: 18px;
            color: var(--muted);
            background: rgba(255, 255, 255, 0.06);
        }

        .drawer-close:hover {
            color: #fff;
        }

        .drawer-nav {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .drawer-nav .nav-item {
            display: flex;
            align-items: center;
            gap: 12px;
            border-radius: 12px;
            color: var(--muted);
            font-weight: 500;
            padding: 12px 16px;
            font-size: 15px;
        }

        .drawer-nav .nav-item svg {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.7;
        }

        .drawer-nav .nav-item.is-active {
            background: rgba(45, 124, 246, 0.2);
            color: #fff;
        }

        .drawer-panel .rail-cta {
            margin-top: auto;
        }

        /* Section spacing */
        .category-section {
            padding: 60px 0;
        }

        .section-pad {
            padding: 104px 0;
        }

        @media (max-width: 640px) {
            .section-pad {
                padding: 64px 0;
            }
        }

        /* Badge */
        .section-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(43, 255, 217, 0.08);
            border: 1px solid rgba(43, 255, 217, 0.22);
            color: var(--accent-cyan);
            font-size: 13px;
            font-weight: 600;
            padding: 6px 14px;
            border-radius: var(--radius-tag);
            margin-bottom: 16px;
            letter-spacing: 0.05em;
        }

        .section-header {
            margin-bottom: 32px;
        }

        .section-header h2 {
            margin-bottom: 12px;
        }

        .section-header .desc {
            color: var(--muted);
            max-width: 640px;
            font-size: 15.5px;
        }

        /* Breadcrumb */
        .breadcrumb {
            font-size: 13px;
            color: var(--muted);
            margin-bottom: 38px;
            display: flex;
            flex-wrap: wrap;
            row-gap: 6px;
        }

        .breadcrumb a {
            color: var(--muted);
        }

        .breadcrumb a:hover {
            color: var(--accent-cyan);
        }

        .breadcrumb span.separator {
            margin: 0 9px;
            color: var(--disabled);
        }

        .breadcrumb .current {
            color: var(--body-color);
        }

        /* Buttons */
        .btn-main {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            background: var(--accent-cyan);
            color: #081426;
            border-radius: var(--radius-btn);
            padding: 13px 24px;
            font-size: 15px;
            font-weight: 700;
            border: 1px solid transparent;
            transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 0 24px rgba(34, 255, 205, 0.32);
            line-height: 1.3;
        }

        .btn-main:hover {
            background: #5afff0;
            transform: translateY(-2px);
        }

        .btn-ghost {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.25);
            color: var(--title-color);
            border-radius: var(--radius-btn);
            padding: 13px 24px;
            font-size: 15px;
            font-weight: 600;
            transition: border-color 0.2s, color 0.2s, background 0.2s;
            line-height: 1.3;
        }

        .btn-ghost:hover {
            border-color: var(--accent-cyan);
            color: var(--accent-cyan);
        }

        .btn-blue {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            background: rgba(45, 124, 246, 0.2);
            border: 1px solid rgba(45, 124, 246, 0.4);
            color: #dbe6ff;
            border-radius: var(--radius-btn);
            padding: 11px 22px;
            font-size: 15px;
            font-weight: 600;
            transition: background 0.25s, transform 0.2s;
        }

        .btn-blue:hover {
            background: rgba(45, 124, 246, 0.32);
            color: #fff;
            transform: translateY(-1px);
        }

        /* Page hero block */
        .research-hero {
            position: relative;
            padding: 48px 0 0;
            margin-bottom: 20px;
        }

        .research-hero .main-title {
            font-size: clamp(38px, 4.6vw, 58px);
            display: flex;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 0 14px;
        }

        .research-hero .title-subfix {
            color: var(--accent-cyan);
        }

        .research-hero .hero-summary {
            max-width: 720px;
            font-size: 17px;
            line-height: 1.8;
            color: var(--body-color);
            margin: 12px 0 0;
        }

        /* Divider */
        .divider-wrap {
            display: flex;
            align-items: center;
            gap: 16px;
            margin: 40px 0 38px;
        }

        .divider-wrap::before {
            content: "";
            height: 1px;
            background: rgba(255, 255, 255, 0.1);
            flex: 1;
        }

        .divider-wrap::after {
            content: "";
            height: 1px;
            background: rgba(255, 255, 255, 0.1);
            flex: 1;
        }

        .divider-badge {
            font-size: 13px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--muted);
        }

        /* Cover card */
        .glass-card {
            background: var(--card-bg);
            border-radius: var(--radius-card);
            border: 1px solid rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(14px) saturate(130%);
            box-shadow: var(--shadow-1);
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.2s;
        }

        .glass-card:hover {
            box-shadow: var(--shadow-1), var(--shadow-2);
            border-color: rgba(255, 255, 255, 0.13);
        }

        /* Image banner */
        .feature-banner {
            position: relative;
            overflow: hidden;
            height: clamp(260px, 34vw, 420px);
            border-radius: var(--radius-card);
            margin-bottom: 28px;
            background-image: url('/assets/images/backpic/back-2.webp');
            background-size: cover;
            background-position: center;
        }

        .feature-banner::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(7, 12, 22, 0.82) 10%, rgba(7, 12, 22, 0.45) 70%, rgba(7, 12, 22, 0.62));
            z-index: 1;
        }

        .feature-banner .banner-overlay-text {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 62%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 30px 34px;
            z-index: 2;
        }

        .feature-banner .banner-overlay-text h2 {
            color: #fff;
            font-size: clamp(20px, 2.6vw, 30px);
            margin-bottom: 10px;
        }

        .feature-banner .banner-overlay-text p {
            font-size: 14px;
            color: rgba(214, 224, 246, 0.9);
            max-width: 420px;
        }

        /* Data strip */
        .data-strip {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            margin: 44px 0 36px;
        }

        .data-strip .data-item {
            background: var(--card-bg);
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: 16px;
            padding: 22px 10px;
            text-align: center;
        }

        .data-item .data-value {
            font-size: 30px;
            font-weight: 800;
            color: var(--accent-cyan);
            line-height: 1.2;
            text-shadow: 0 0 20px rgba(43, 255, 217, 0.2);
        }

        .data-item .data-label {
            font-size: 13px;
            color: var(--muted);
            margin-top: 6px;
        }

        @media (max-width: 768px) {
            .data-strip {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Big topic banner */
        .topic-lead {
            display: grid;
            grid-template-columns: 1.1fr 1fr;
            gap: 28px;
            align-items: center;
            margin: 38px 0 44px;
        }

        .topic-lead .topic-image {
            border-radius: var(--radius-card);
            overflow: hidden;
            height: 230px;
        }

        .topic-lead .topic-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .topic-lead .topic-copy h3 {
            font-size: clamp(20px, 2vw, 26px);
            margin-bottom: 14px;
        }

        .topic-lead .topic-copy p {
            font-size: 15px;
            color: var(--body-color);
            line-height: 1.8;
            margin-bottom: 10px;
        }

        .tag-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 15px;
        }

        .mini-tag {
            display: inline-flex;
            padding: 4px 12px;
            background: rgba(45, 124, 246, 0.14);
            border: 1px solid rgba(45, 124, 246, 0.25);
            border-radius: var(--radius-tag);
            color: #aac7ff;
            font-size: 12.5px;
            font-weight: 500;
        }

        /* Research resource list */
        .resource-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 28px;
        }

        @media (max-width: 768px) {
            .resource-grid {
                grid-template-columns: 1fr;
            }
        }

        .resource-card {
            background: var(--card-bg);
            border-radius: var(--radius-card);
            border: 1px solid rgba(255, 255, 255, 0.08);
            backface-visibility: hidden;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: var(--shadow-1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .resource-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-1), var(--shadow-2);
        }

        .resource-card .thumb {
            height: 180px;
            overflow: hidden;
            position: relative;
            background: linear-gradient(140deg, rgba(20, 36, 64, 0.8), rgba(10, 16, 28, 0.9));
        }

        .resource-card .thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.88;
            transition: transform 0.35s ease;
        }

        .resource-card:hover .thumb img {
            transform: scale(1.04);
        }

        .resource-card .card-body {
            padding: 22px 24px 24px;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .resource-card .card-body .tag-small {
            background: rgba(43, 255, 217, 0.08);
            color: var(--accent-cyan);
            border-radius: var(--radius-tag);
            padding: 3px 12px;
            font-size: 12px;
            width: fit-content;
            margin-bottom: 12px;
            font-weight: 600;
        }

        .resource-card .card-body h3 {
            font-size: 18px;
            line-height: 1.4;
            margin-bottom: 10px;
            color: var(--title-color);
            font-weight: 700;
        }

        .resource-card .card-body p {
            font-size: 14.5px;
            color: var(--muted);
            line-height: 1.7;
            margin-bottom: 14px;
        }

        .resource-card .card-foot {
            margin-top: auto;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13.5px;
            color: var(--body-color);
            font-weight: 600;
        }

        .resource-card .card-foot i {
            color: var(--accent-cyan);
            font-size: 13px;
        }

        /* Process steps */
        .research-steps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px;
            margin: 30px 0;
        }

        .step-card {
            background: rgba(21, 42, 78, 0.38);
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: 18px;
            padding: 28px 24px;
            position: relative;
        }

        .step-card .step-number {
            font-size: 42px;
            font-weight: 800;
            color: rgba(43, 255, 217, 0.14);
            position: absolute;
            top: 18px;
            right: 22px;
            letter-spacing: -0.02em;
            line-height: 1;
        }

        .step-card h3 {
            font-size: 18px;
            margin: 10px 0 10px;
            color: var(--title-color);
            font-weight: 700;
        }

        .step-card p {
            font-size: 14px;
            line-height: 1.7;
            color: var(--muted);
        }

        @media (max-width: 768px) {
            .research-steps {
                grid-template-columns: 1fr;
            }
        }

        /* Glance highlight */
        .glance-wrap {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 26px;
        }

        @media (max-width: 640px) {
            .glance-wrap {
                grid-template-columns: 1fr;
            }
        }

        .glance-block {
            background: linear-gradient(135deg, rgba(16, 32, 58, 0.8), rgba(10, 18, 32, 0.65));
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: var(--radius-card);
            padding: 28px 28px;
        }

        .glance-block .glance-title {
            display: flex;
            gap: 12px;
            align-items: center;
            margin-bottom: 10px;
            font-weight: 700;
            font-size: 17px;
            color: var(--title-color);
        }

        .glance-block .glance-title i {
            color: var(--accent-cyan);
            font-size: 18px;
        }

        .glance-block p {
            font-size: 14.5px;
            color: var(--muted);
            line-height: 1.75;
        }

        /* FAQ */
        .faq-list {
            list-style: none;
        }

        .faq-item {
            border-bottom: 1px solid rgba(198, 208, 232, 0.12);
        }

        .faq-item:first-child {
            border-top: 1px solid rgba(198, 208, 232, 0.12);
        }

        .faq-item .faq-q {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            padding: 22px 4px;
            width: 100%;
            text-align: left;
            color: var(--title-color);
            font-weight: 600;
            font-size: 16px;
            cursor: pointer;
            transition: color 0.2s;
        }

        .faq-item .faq-q:hover {
            color: var(--accent-cyan);
        }

        .faq-item .faq-q .faq-ind {
            position: relative;
            width: 16px;
            height: 16px;
            flex: 0 0 16px;
            transition: transform 0.3s ease;
        }

        .faq-item .faq-q .faq-ind::before,
        .faq-item .faq-q .faq-ind::after {
            content: "";
            position: absolute;
            background: currentColor;
            border-radius: 2px;
        }

        .faq-item .faq-q .faq-ind::before {
            width: 14px;
            height: 2px;
            left: 1px;
            top: 7px;
        }

        .faq-item .faq-q .faq-ind::after {
            width: 2px;
            height: 14px;
            left: 7px;
            top: 1px;
            transition: opacity 0.2s;
        }

        .faq-item.is-open .faq-q .faq-ind {
            transform: rotate(45deg);
        }

        .faq-item.is-open .faq-q .faq-ind::after {
            opacity: 0;
        }

        .faq-item .faq-a {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.28s ease;
        }

        .faq-item.is-open .faq-a {
            max-height: 300px;
        }

        .faq-item .faq-a p {
            color: var(--muted);
            padding: 0 34px 24px 4px;
            font-size: 15px;
            line-height: 1.8;
        }

        /* CTA banner */
        .cta-block {
            margin-top: 56px;
            background: linear-gradient(115deg, rgba(18, 42, 82, 0.7) 0%, rgba(10, 23, 42, 0.6) 40%, rgba(8, 16, 28, 0.8) 100%),
                url('/assets/images/backpic/back-3.png');
            background-size: cover;
            background-position: center;
            border-radius: var(--radius-card);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 40px 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            flex-wrap: wrap;
        }

        .cta-block h3 {
            font-size: clamp(20px, 2.2vw, 26px);
        }

        .cta-block .cta-desc {
            font-size: 15px;
            color: var(--muted);
            margin-top: 6px;
            max-width: 500px;
        }

        .cta-block .btn-main {
            white-space: nowrap;
        }

        /* Footer */
        .site-footer {
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            padding: 48px 0 24px;
            margin-top: 60px;
            background: transparent;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            gap: 40px;
        }

        .footer-grid .footer-brand {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 800;
            font-size: 19px;
            color: var(--title-color);
            margin-bottom: 12px;
        }

        .footer-brand .logo-mark {
            color: var(--accent-cyan);
            display: flex;
        }

        .footer-brand .logo-mark svg {
            width: 24px;
            height: 24px;
        }

        .footer-desc {
            color: var(--muted);
            font-size: 14px;
            line-height: 1.8;
            max-width: 360px;
        }

        .footer-title {
            color: #fff;
            font-weight: 600;
            font-size: 15px;
            margin-bottom: 12px;
        }

        .footer-links {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .footer-links a {
            color: var(--muted);
            font-size: 14px;
        }

        .footer-links a:hover {
            color: var(--accent-cyan);
        }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12.5px;
            color: var(--disabled);
            padding: 28px 0 6px;
            margin-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            flex-wrap: wrap;
            gap: 8px;
        }

        .footer-meta {
            display: inline-flex;
            align-items: center;
            gap: 12px;
        }

        .footer-meta span+span {
            padding-left: 12px;
            border-left: 1px solid rgba(255, 255, 255, 0.1);
        }

        @media (max-width: 900px) {
            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 28px;
            }
            .footer-grid>div:first-child {
                grid-column: span 2;
            }
        }

        /* Scroll to top */
        .scroll-top {
            position: fixed;
            right: 28px;
            bottom: 120px;
            width: 48px;
            height: 48px;
            background: rgba(16, 28, 48, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: var(--accent-cyan);
            backdrop-filter: blur(12px);
            z-index: 30;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s, visibility 0.3s;
            box-shadow: var(--shadow-1);
        }

        .scroll-top.is-visible {
            opacity: 1;
            visibility: visible;
        }

        .scroll-top:hover {
            border-color: rgba(43, 255, 217, 0.6);
            color: var(--accent-cyan);
        }

        /* Rail collapse at 1024 */
        @media (max-width: 1023px) {
            .app-rail {
                display: none;
            }
            .topbar-mobile {
                display: flex;
            }
            .page-shell {
                display: block;
            }
            .content-zone {
                width: 100%;
            }
        }

        @media (min-width: 1024px) {
            .topbar-mobile,
            .drawer-panel,
            .drawer-backdrop {
                display: none;
            }
        }

        @media (max-width: 900px) {
            .topic-lead {
                grid-template-columns: 1fr;
            }
            .topic-lead .topic-image {
                height: 200px;
            }
        }

        @media (max-width: 639px) {
            .category-section {
                padding: 36px 0 44px;
            }
            .main-column {
                padding: 0 20px;
            }
            .cta-block {
                padding: 28px 22px;
            }
            .section-header .desc {
                font-size: 14px;
            }
            .research-hero .main-title {
                font-size: clamp(30px, 8vw, 38px);
            }
            .research-hero .hero-summary {
                font-size: 15px;
            }
            .divider-wrap {
                margin: 28px 0 26px;
            }
            .topic-lead .topic-copy p {
                font-size: 14px;
            }
            .resource-card .card-body {
                padding: 18px;
            }
        }

/* roulang page: category1 */
:root {
      --bg-base: #070C16;
      --bg-panel: #0B1524;
      --bg-rail: #101C30;
      --glass: rgba(21, 42, 78, 0.42);
      --glass-strong: rgba(18, 32, 58, 0.55);
      --stroke: rgba(255, 255, 255, 0.08);
      --primary: #2D7CF6;
      --accent: #2BFFD9;
      --amber: #FDB022;
      --danger: #F36380;
      --heading: #F5F7FF;
      --body: #C6D0E8;
      --muted: #7182A9;
      --disabled: #46608B;
      --radius-card: 18px;
      --radius-btn: 12px;
      --shadow-card: 0 10px 30px rgba(3, 8, 18, 0.35);
      --shadow-hover: 0 18px 40px rgba(45, 124, 246, 0.16);
      --font: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
    }

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

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 110px;
    }

    body {
      margin: 0;
      background: var(--bg-base);
      color: var(--body);
      font-family: var(--font);
      line-height: 1.75;
      font-size: 16px;
      -webkit-font-smoothing: antialiased;
    }

    body.menu-open {
      overflow: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    ul,
    ol {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    img {
      max-width: 100%;
      height: auto;
      display: block;
      border: 0;
    }

    button {
      font-family: inherit;
      border: 0;
      background: none;
      color: inherit;
      cursor: pointer;
    }

    figure {
      margin: 0;
    }

    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
    }

    .skip-link {
      position: fixed;
      left: 16px;
      top: -80px;
      z-index: 999;
      background: var(--accent);
      color: #081426;
      padding: 10px 16px;
      border-radius: 10px;
      font-weight: 700;
      transition: top .2s ease;
    }

    .skip-link:focus {
      top: 16px;
    }

    .mobile-topbar {
      display: none;
    }

    .site-rail {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: 248px;
      z-index: 80;
      display: flex;
      flex-direction: column;
      padding: 26px 0 22px;
      background: linear-gradient(180deg, #0E1B30 0%, #0A1426 100%);
      border-right: 1px solid rgba(255, 255, 255, 0.06);
      box-shadow: 10px 0 30px rgba(3, 8, 18, 0.24);
    }

    .rail-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 20px;
      margin-bottom: 26px;
      min-height: 40px;
    }

    .logo-mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      flex: none;
      border-radius: 10px;
      color: var(--accent);
      background: linear-gradient(135deg, rgba(45, 124, 246, 0.28), rgba(43, 255, 217, 0.08));
      border: 1px solid rgba(43, 255, 217, 0.24);
    }

    .logo-mark svg {
      width: 20px;
      height: 20px;
    }

    .brand-text {
      font-size: 20px;
      font-weight: 800;
      color: var(--heading);
      letter-spacing: 0.03em;
    }

    .site-rail .brand-text {
      font-size: 21px;
    }

    .rail-nav {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 0 12px;
    }

    .nav-label {
      font-size: 12px;
      letter-spacing: 0.14em;
      color: var(--disabled);
      margin: 0 0 8px;
      padding-left: 12px;
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 11px;
      min-height: 46px;
      padding: 0 12px;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 600;
      color: var(--muted);
      border: 1px solid transparent;
      transition: background .22s ease, color .22s ease, border-color .22s ease;
      position: relative;
    }

    .nav-item svg {
      width: 20px;
      height: 20px;
      flex: none;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .nav-item:hover {
      background: rgba(255, 255, 255, 0.04);
      color: var(--heading);
    }

    .nav-item.is-active {
      background: linear-gradient(90deg, rgba(43, 255, 217, 0.1), rgba(45, 124, 246, 0.04));
      color: #ffffff;
      border-color: rgba(255, 255, 255, 0.05);
    }

    .nav-item.is-active::before {
      content: '';
      position: absolute;
      left: -12px;
      top: 9px;
      bottom: 9px;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: var(--accent);
      box-shadow: 0 0 14px rgba(43, 255, 217, 0.55);
    }

    .rail-login {
      margin-top: auto;
      padding: 0 18px;
    }

    .rail-login-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      width: 100%;
      min-height: 44px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      background: rgba(255, 255, 255, 0.04);
      color: #f5f7ff;
      font-size: 14px;
      font-weight: 700;
      transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
    }

    .rail-login-btn svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .rail-login-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
      box-shadow: 0 0 18px rgba(43, 255, 217, 0.12);
    }

    .menu-mask {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 79;
      background: rgba(3, 6, 12, 0.72);
      border: 0;
      backdrop-filter: blur(4px);
    }

    .site-shell {
      min-height: 100vh;
      margin-left: 248px;
      background:
        radial-gradient(circle at 88% 4%, rgba(45, 124, 246, 0.14), transparent 24%),
        radial-gradient(circle at 12% 60%, rgba(43, 255, 217, 0.04), transparent 26%),
        linear-gradient(180deg, #0B1524 0%, #070C16 55%, #0B1524 100%);
      overflow-x: clip;
      position: relative;
    }

    .site-main {
      position: relative;
      background-image: radial-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px);
      background-size: 30px 30px;
    }

    .container {
      max-width: 1400px;
      margin-left: auto;
      margin-right: auto;
      padding-left: clamp(22px, 4vw, 52px);
      padding-right: clamp(22px, 4vw, 52px);
    }

    [id] {
      scroll-margin-top: 100px;
    }

    .page-hero {
      position: relative;
      isolation: isolate;
      display: flex;
      align-items: center;
      min-height: 640px;
      overflow: hidden;
      padding: clamp(66px, 8vw, 118px) 0 72px;
      background-image: url('/assets/images/backpic/back-1.png');
      background-size: cover;
      background-position: center 30%;
    }

    .page-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        radial-gradient(650px at 80% 8%, rgba(45, 124, 246, 0.3), transparent 52%),
        linear-gradient(90deg, rgba(7, 12, 22, 0.98) 15%, rgba(7, 12, 22, 0.82) 54%, rgba(7, 12, 22, 0.44) 100%),
        linear-gradient(180deg, rgba(7, 12, 22, 0.25), rgba(7, 12, 22, 0.78) 100%);
    }

    .page-hero-content {
      width: 100%;
    }

    .crumb {
      display: flex;
      align-items: center;
      font-size: 13px;
      color: var(--disabled);
      margin-bottom: 22px;
    }

    .crumb ol {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }

    .crumb li+li::before {
      content: '/';
      margin-right: 8px;
      color: #38547a;
    }

    .crumb a:hover {
      color: var(--accent);
    }

    .crumb .crumb-current {
      color: var(--muted);
    }

    .section-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: var(--accent);
      text-transform: none;
      background: rgba(43, 255, 217, 0.08);
      border: 1px solid rgba(43, 255, 217, 0.18);
      padding: 6px 12px;
      border-radius: 999px;
      margin-bottom: 18px;
    }

    .section-tag::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 10px rgba(43, 255, 217, 0.8);
    }

    .hero-title {
      font-size: clamp(38px, 6.4vw, 64px);
      line-height: 1.1;
      font-weight: 800;
      color: var(--heading);
      letter-spacing: -0.03em;
      margin: 18px 0 20px;
      max-width: 860px;
    }

    .hero-lead {
      max-width: 720px;
      font-size: 17px;
      line-height: 1.9;
      color: var(--body);
      margin: 0 0 32px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-bottom: 34px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 48px;
      padding: 0 25px;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 700;
      line-height: 1;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
    }

    .btn-primary {
      background: var(--accent);
      color: #081426;
      box-shadow: 0 0 24px rgba(43, 255, 217, 0.28);
    }

    .btn-primary:hover {
      background: #5affed;
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(43, 255, 217, 0.2);
    }

    .btn-secondary {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.26);
      color: var(--heading);
    }

    .btn-secondary:hover {
      border-color: var(--accent);
      color: var(--accent);
      transform: translateY(-2px);
    }

    .hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 18px 32px;
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      max-width: 760px;
    }

    .hero-meta-item {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: var(--body);
    }

    .hero-meta-item svg {
      width: 17px;
      height: 17px;
      stroke: var(--accent);
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .section {
      padding: clamp(74px, 8vw, 110px) 0;
      position: relative;
    }

    .section-head {
      max-width: 830px;
      margin-bottom: 48px;
    }

    .section-title {
      font-size: clamp(28px, 3.4vw, 42px);
      line-height: 1.18;
      font-weight: 800;
      color: var(--heading);
      margin: 4px 0 16px;
      letter-spacing: -0.02em;
    }

    .section-lead {
      font-size: 16px;
      line-height: 1.9;
      color: var(--muted);
      margin: 0;
      max-width: 720px;
    }

    .curriculum-section {
      border-top: 1px solid rgba(255, 255, 255, 0.045);
    }

    .curriculum-wrap {
      display: grid;
      grid-template-columns: 286px minmax(0, 1fr);
      gap: clamp(32px, 5vw, 84px);
      align-items: start;
    }

    .chapter-track {
      position: sticky;
      top: 110px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 22px;
      border-radius: var(--radius-card);
      background: rgba(18, 32, 58, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.07);
      box-shadow: var(--shadow-card);
    }

    .track-caption {
      font-size: 12px;
      letter-spacing: 0.12em;
      color: var(--disabled);
      margin: 0 0 10px;
      padding: 0 4px;
    }

    .chapter-link {
      display: flex;
      align-items: center;
      gap: 13px;
      width: 100%;
      min-height: 50px;
      padding: 0 14px;
      border-radius: 12px;
      text-align: left;
      color: var(--muted);
      background: transparent;
      border: 1px solid transparent;
      font-size: 15px;
      font-weight: 600;
      transition: all .24s ease;
    }

    .chapter-link span:first-child {
      font-size: 12px;
      font-weight: 800;
      color: var(--disabled);
      letter-spacing: 0.08em;
    }

    .chapter-link.is-active {
      background: rgba(43, 255, 217, 0.08);
      border-color: rgba(43, 255, 217, 0.14);
      color: var(--heading);
    }

    .chapter-link.is-active span:first-child {
      color: var(--accent);
    }

    .chapter-link:hover {
      color: var(--heading);
      background: rgba(255, 255, 255, 0.04);
    }

    .course-stack {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .course-item {
      border-radius: var(--radius-card);
      background: rgba(16, 30, 56, 0.54);
      border: 1px solid rgba(255, 255, 255, 0.07);
      box-shadow: var(--shadow-card);
      overflow: hidden;
      transition: border-color .25s ease, box-shadow .25s ease;
    }

    .course-item.is-open {
      border-color: rgba(43, 255, 217, 0.2);
      box-shadow: 0 18px 40px rgba(45, 124, 246, 0.13);
    }

    .course-head {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 18px;
      align-items: center;
      width: 100%;
      padding: 22px 24px;
      text-align: left;
      background: transparent;
      transition: background .25s ease;
    }

    .course-head:hover {
      background: rgba(255, 255, 255, 0.025);
    }

    .course-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border-radius: 14px;
      font-size: 15px;
      font-weight: 800;
      color: var(--accent);
      background: rgba(43, 255, 217, 0.08);
      border: 1px solid rgba(43, 255, 217, 0.15);
    }

    .course-title {
      font-size: 19px;
      font-weight: 800;
      color: var(--heading);
      margin-bottom: 6px;
    }

    .course-summary {
      font-size: 14px;
      color: var(--muted);
      margin: 0;
      line-height: 1.6;
    }

    .course-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      color: var(--accent);
      transition: transform .3s ease;
    }

    .course-toggle svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
    }

    .course-item.is-open .course-toggle {
      transform: rotate(45deg);
    }

    .course-body {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .45s cubic-bezier(.3, 0, .2, 1);
    }

    .course-item.is-open .course-body {
      grid-template-rows: 1fr;
    }

    .course-body-inner {
      overflow: hidden;
      min-height: 0;
    }

    .course-pair {
      display: grid;
      grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
      gap: 28px;
      align-items: center;
      padding: 8px 24px 26px;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .course-thumb {
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .course-thumb img {
      width: 100%;
      height: 220px;
      object-fit: cover;
    }

    .course-desc h3 {
      font-size: 18px;
      color: var(--heading);
      margin: 0 0 10px;
    }

    .course-desc p {
      color: var(--body);
      font-size: 15px;
      line-height: 1.85;
      margin: 0 0 18px;
    }

    .dot-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .dot-list li {
      position: relative;
      padding-left: 24px;
      font-size: 14px;
      color: var(--muted);
    }

    .dot-list li::before {
      content: '';
      position: absolute;
      left: 3px;
      top: 0.65em;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 8px rgba(43, 255, 217, 0.7);
    }

    .flow-section,
    .scene-section,
    .point-section,
    .faq-section,
    .cta-section {
      border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .flow-list {
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      gap: 26px;
    }

    .flow-list li {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 16px;
    }

    .flow-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 12px;
      background: rgba(45, 124, 246, 0.12);
      border: 1px solid rgba(45, 124, 246, 0.22);
      color: #aed0ff;
      font-weight: 800;
      font-size: 14px;
    }

    .flow-list h3 {
      font-size: 17px;
      font-weight: 800;
      color: var(--heading);
      margin: 0 0 6px;
    }

    .flow-list p {
      margin: 0;
      font-size: 15px;
      line-height: 1.8;
      color: var(--muted);
    }

    .flow-figure {
      padding: 12px;
      background: var(--glass);
      border: 1px solid var(--stroke);
      border-radius: var(--radius-card);
      box-shadow: var(--shadow-card);
      backdrop-filter: blur(18px) saturate(140%);
    }

    .flow-figure img {
      width: 100%;
      border-radius: 14px;
      object-fit: cover;
      max-height: 520px;
    }

    .flow-figure figcaption {
      padding: 16px 8px 8px;
      font-size: 13px;
      color: var(--muted);
      text-align: center;
    }

    .scene-cover-card {
      border-radius: var(--radius-card);
      overflow: hidden;
      background: var(--glass);
      border: 1px solid var(--stroke);
      box-shadow: var(--shadow-card);
    }

    .scene-cover-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      min-height: 360px;
    }

    .scene-list {
      display: flex;
      flex-direction: column;
      gap: 22px;
      margin-top: 26px;
    }

    .scene-list li {
      border-left: 2px solid rgba(43, 255, 217, 0.4);
      padding: 2px 0 4px 18px;
    }

    .scene-list strong {
      display: block;
      font-size: 17px;
      font-weight: 800;
      color: var(--heading);
      margin-bottom: 4px;
    }

    .scene-list p {
      margin: 0;
      font-size: 15px;
      line-height: 1.8;
      color: var(--muted);
    }

    .point-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px 32px;
      margin-top: 36px;
    }

    .point-item {
      padding: 22px;
      border-radius: 16px;
      background: rgba(21, 42, 78, 0.34);
      border: 1px solid rgba(255, 255, 255, 0.06);
      transition: border-color .25s ease, background .25s ease;
    }

    .point-item:hover {
      background: rgba(21, 42, 78, 0.5);
      border-color: rgba(43, 255, 217, 0.16);
    }

    .point-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 11px;
      color: var(--accent);
      background: rgba(43, 255, 217, 0.08);
      border: 1px solid rgba(43, 255, 217, 0.14);
      margin-bottom: 16px;
    }

    .point-icon svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .point-item h3 {
      font-size: 17px;
      font-weight: 800;
      color: var(--heading);
      margin: 0 0 6px;
    }

    .point-item p {
      margin: 0;
      font-size: 14px;
      line-height: 1.75;
      color: var(--muted);
    }

    .faq-inner {
      max-width: 860px;
      margin-left: auto;
      margin-right: auto;
    }

    .faq-section .section-head {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

    .faq-item {
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .faq-item summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 24px 8px;
      font-size: 16px;
      font-weight: 700;
      color: var(--heading);
      cursor: pointer;
      list-style: none;
      transition: color .2s ease;
    }

    .faq-item summary:hover {
      color: var(--accent);
    }

    .faq-item summary::-webkit-details-marker {
      display: none;
    }

    .faq-icon {
      position: relative;
      width: 22px;
      height: 22px;
      flex: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
      transition: transform .28s ease;
    }

    .faq-icon::before,
    .faq-icon::after {
      content: '';
      position: absolute;
      background: currentColor;
      border-radius: 4px;
    }

    .faq-icon::before {
      width: 18px;
      height: 2px;
    }

    .faq-icon::after {
      width: 2px;
      height: 18px;
    }

    .faq-item[open] .faq-icon {
      transform: rotate(45deg);
    }

    .faq-item .faq-answer {
      padding: 0 8px 24px;
      margin: -8px 0 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.85;
      max-width: 780px;
    }

    .cta-card {
      position: relative;
      overflow: hidden;
      border-radius: 24px;
      padding: clamp(40px, 6vw, 68px);
      background:
        radial-gradient(600px 200px at 15% 10%, rgba(45, 124, 246, 0.18), transparent 70%),
        radial-gradient(500px 260px at 100% 100%, rgba(43, 255, 217, 0.08), transparent 60%),
        rgba(16, 30, 56, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.09);
      box-shadow: var(--shadow-card);
    }

    .cta-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url('/assets/images/backpic/back-3.png');
      background-size: cover;
      background-position: center;
      opacity: 0.1;
      mix-blend-mode: soft-light;
    }

    .cta-card>* {
      position: relative;
      z-index: 1;
    }

    .cta-card .section-title {
      margin-bottom: 12px;
    }

    .cta-card .section-lead {
      max-width: 640px;
      margin-bottom: 28px;
    }

    .site-footer {
      border-top: 1px solid rgba(255, 255, 255, 0.07);
      padding: 68px 0 40px;
      background: rgba(5, 9, 17, 0.66);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.6fr 0.9fr 1fr;
      gap: clamp(30px, 5vw, 80px);
      margin-bottom: 44px;
    }

    .footer-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--heading);
      font-weight: 800;
      font-size: 19px;
      margin: 0 0 14px;
    }

    .footer-desc {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.9;
      max-width: 440px;
      margin: 0;
    }

    .footer-title {
      color: var(--heading);
      font-size: 15px;
      font-weight: 800;
      margin: 4px 0 16px;
    }

    .footer-links {
      display: flex;
      flex-direction: column;
      gap: 11px;
      font-size: 14px;
      color: var(--muted);
    }

    .footer-links a {
      width: fit-content;
      transition: color .2s ease;
    }

    .footer-links a:hover {
      color: var(--accent);
    }

    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      padding-top: 26px;
      font-size: 12px;
      color: var(--disabled);
    }

    .footer-meta {
      display: flex;
      gap: 14px;
    }

    .to-top {
      position: fixed;
      right: 24px;
      bottom: 26px;
      z-index: 70;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #081426;
      background: var(--accent);
      box-shadow: 0 0 18px rgba(43, 255, 217, 0.36);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    }

    .to-top svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .to-top.is-shown {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
    }

    .to-top:hover {
      transform: translateY(-3px);
      background: #5affed;
    }

    @media (max-width: 1023px) {
      .site-rail {
        transform: translateX(-105%);
        width: 284px;
        transition: transform .28s cubic-bezier(.3, 0, .2, 1);
        box-shadow: 18px 0 40px rgba(3, 6, 12, 0.45);
      }

      body.menu-open .site-rail {
        transform: translateX(0);
      }

      .menu-mask {
        display: block;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .28s ease, visibility .28s ease;
      }

      body.menu-open .menu-mask {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }

      .site-shell {
        margin-left: 0;
      }

      .mobile-topbar {
        position: sticky;
        top: 0;
        z-index: 65;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 68px;
        padding: 0 16px;
        background: rgba(7, 12, 22, 0.88);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(20px) saturate(140%);
      }

      .mobile-brand {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        color: var(--heading);
        font-size: 18px;
        font-weight: 800;
      }

      .mobile-brand .logo-mark {
        width: 32px;
        height: 32px;
      }

      .mobile-actions {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .mobile-login {
        font-size: 14px;
        font-weight: 700;
        color: #eef3ff;
        padding: 8px 12px;
        border-radius: 10px;
      }

      .mobile-login:hover {
        color: var(--accent);
      }

      .mobile-menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        color: var(--heading);
        border: 1px solid rgba(255, 255, 255, 0.09);
        background: rgba(255, 255, 255, 0.04);
      }

      .mobile-menu-btn svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
      }

      .curriculum-wrap {
        grid-template-columns: 1fr;
      }

      .chapter-track {
        position: relative;
        top: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 16px;
      }

      .track-caption {
        grid-column: 1 / -1;
      }

      .page-hero {
        min-height: 520px;
      }

      .cta-card {
        padding: 32px 26px;
      }

      .point-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 720px) {
      body {
        font-size: 15px;
      }

      .page-hero {
        min-height: 500px;
        padding-top: 56px;
      }

      .page-hero::before {
        background:
          linear-gradient(90deg, rgba(7, 12, 22, 0.96) 20%, rgba(7, 12, 22, 0.82) 100%),
          linear-gradient(180deg, rgba(7, 12, 22, 0.4), rgba(7, 12, 22, 0.82));
      }

      .hero-title {
        font-size: 34px;
        letter-spacing: -0.02em;
      }

      .hero-lead {
        font-size: 15px;
      }

      .hero-actions .btn {
        width: 100%;
      }

      .section-tag {
        font-size: 12px;
      }

      .course-pair {
        grid-template-columns: 1fr;
        padding: 4px 16px 20px;
      }

      .course-head {
        grid-template-columns: 1fr auto;
        padding: 18px 16px;
        gap: 14px;
      }

      .course-num {
        width: 42px;
        height: 42px;
        font-size: 14px;
      }

      .course-title {
        font-size: 17px;
      }

      .course-summary {
        font-size: 13px;
      }

      .chapter-track {
        grid-template-columns: 1fr 1fr;
        padding: 12px;
      }

      .chapter-link {
        min-height: 44px;
        padding: 8px;
        font-size: 14px;
      }

      .flow-list li {
        grid-template-columns: 36px minmax(0, 1fr);
      }

      .point-grid {
        gap: 14px;
      }

      .scene-cover-card img {
        min-height: 220px;
      }

      .footer-grid {
        grid-template-columns: 1fr;
        gap: 26px;
      }

      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
      }

      .faq-item summary {
        padding: 18px 2px;
        font-size: 15px;
      }

      .cta-card {
        padding: 28px 20px;
        border-radius: 18px;
      }

      .cta-card .btn {
        width: 100%;
      }
    }

    @media (max-width: 420px) {
      .chapter-track {
        grid-template-columns: 1fr;
      }
    }

/* roulang page: category3 */
:root {
      --page-bg: #070C16;
      --body-bg: #0A1322;
      --rail-bg: rgba(13, 20, 36, .88);
      --card-bg: rgba(21, 42, 78, .42);
      --card-solid: rgba(17, 31, 56, .88);
      --blue: #2D7CF6;
      --cyan: #2BFFD9;
      --amber: #FDB022;
      --danger: #F36380;
      --title: #F5F7FF;
      --text: #C6D0E8;
      --muted: #7182A9;
      --disabled: #46608B;
      --border: rgba(255, 255, 255, .08);
      --white: #fff;
      --radius-lg: 18px;
      --radius-md: 12px;
      --radius-sm: 10px;
      --shadow: 0 10px 30px rgba(3, 8, 18, .35);
      --shadow-hover: 0 18px 40px rgba(45, 124, 246, .16);
      --rail-width: 248px;
      --topbar-height: 68px;
      --ease: cubic-bezier(.2, .7, .2, 1);
    }

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

    html {
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
      scroll-padding-top: 90px;
    }

    body {
      margin: 0;
      background: var(--page-bg);
      color: var(--text);
      font-family: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
      font-size: 16px;
      line-height: 1.8;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    body.drawer-open {
      overflow: hidden;
    }

    img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button {
      font-family: inherit;
      border: 0;
      background: transparent;
      cursor: pointer;
    }

    ul,
    ol {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    p {
      margin: 0 0 1.2rem;
    }

    h1,
    h2,
    h3,
    h4 {
      margin: 0;
      color: var(--title);
      font-weight: 800;
      line-height: 1.15;
    }

    svg {
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    ::selection {
      background: rgba(43, 255, 217, .24);
      color: #fff;
    }

    .container {
      position: relative;
      z-index: 2;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 clamp(20px, 4vw, 48px);
    }

    .site-main {
      margin-left: var(--rail-width);
      position: relative;
      background:
        radial-gradient(900px 460px at 92% -4%, rgba(45, 124, 246, .14), transparent 62%),
        radial-gradient(980px 520px at 0% 50%, rgba(43, 255, 217, .04), transparent 55%),
        linear-gradient(148deg, #0B1524 0%, var(--page-bg) 46%, #0A1322 100%);
    }

    .main-content {
      min-height: 76vh;
      overflow: hidden;
    }

    .site-rail {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: var(--rail-width);
      z-index: 120;
      background: var(--rail-bg);
      backdrop-filter: blur(18px) saturate(130%);
      -webkit-backdrop-filter: blur(18px) saturate(130%);
      border-right: 1px solid rgba(255, 255, 255, .06);
    }

    .rail-inner {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 28px 16px 20px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 0 10px;
      min-height: 40px;
      color: var(--title);
      font-weight: 800;
      letter-spacing: .02em;
    }

    .brand:hover {
      color: #fff;
    }

    .logo-mark {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      color: var(--cyan);
      background: rgba(21, 42, 78, .4);
      border: 1px solid rgba(43, 255, 217, .34);
      box-shadow: 0 0 18px rgba(43, 255, 217, .08);
      flex: 0 0 auto;
    }

    .logo-mark svg {
      width: 24px;
      height: 24px;
      stroke-width: 1.7;
    }

    .brand-main {
      display: flex;
      flex-direction: column;
      line-height: 1.1;
      font-size: 20px;
      white-space: nowrap;
    }

    .brand-main small {
      margin-top: 3px;
      font-size: 11px;
      font-weight: 500;
      color: var(--muted);
      letter-spacing: .06em;
    }

    .rail-nav {
      margin-top: 42px;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .nav-label {
      font-size: 12px;
      color: var(--disabled);
      padding: 0 12px;
      margin-bottom: 10px;
      letter-spacing: .08em;
    }

    .nav-item {
      display: flex;
      align-items: center;
      padding: 11px 12px;
      border-radius: 12px;
      font-size: 15px;
      color: rgba(230, 238, 255, .74);
      border-left: 3px solid transparent;
      transition: background .25s var(--ease), color .25s var(--ease);
    }

    .nav-item:hover {
      color: #fff;
      background: rgba(45, 124, 246, .13);
    }

    .nav-item:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 1px;
    }

    .nav-item.is-active {
      color: #fff;
      background: linear-gradient(90deg, rgba(45, 124, 246, .22), rgba(45, 124, 246, .02));
      border-left-color: var(--cyan);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 28px rgba(43, 255, 217, .06);
      font-weight: 700;
    }

    .nav-item svg {
      width: 21px;
      height: 21px;
      margin-right: 12px;
      flex: 0 0 auto;
    }

    .rail-footer {
      margin-top: auto;
      padding: 0 4px;
    }

    .rail-login {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      height: 44px;
      width: 100%;
      background: rgba(43, 255, 217, .1);
      border: 1px solid rgba(43, 255, 217, .3);
      color: var(--cyan);
      font-weight: 700;
      font-size: 15px;
      border-radius: 12px;
      transition: all .25s var(--ease);
    }

    .rail-login:hover {
      background: rgba(43, 255, 217, .2);
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 0 22px rgba(43, 255, 217, .18);
    }

    .rail-login svg {
      width: 18px;
      height: 18px;
    }

    .rail-hint {
      text-align: center;
      font-size: 12px;
      color: var(--disabled);
      margin: 10px 0 0;
      line-height: 1.4;
    }

    .mobile-topbar {
      display: none;
    }

    .drawer-backdrop {
      display: none;
    }

    .mobile-drawer {
      display: none;
    }

    .eyebrow,
    .kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--cyan);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .12em;
      margin-bottom: 16px;
    }

    .eyebrow::before {
      content: "";
      width: 18px;
      height: 2px;
      background: var(--cyan);
      border-radius: 99px;
      box-shadow: 0 0 12px rgba(43, 255, 217, .6);
    }

    .section {
      padding: 104px 0;
    }

    .section-head {
      max-width: 880px;
      margin-bottom: 44px;
    }

    .section-head.center {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

    .section-head h2 {
      font-size: clamp(26px, 3.3vw, 40px);
      letter-spacing: .02em;
    }

    .section-head .section-lead {
      color: var(--text);
      max-width: 760px;
      margin-top: 16px;
      font-size: 16px;
    }

    .section-head.center .section-lead {
      margin-left: auto;
      margin-right: auto;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      height: 48px;
      padding: 0 24px;
      border-radius: var(--radius-md);
      border: 1px solid transparent;
      font-size: 15px;
      font-weight: 700;
      line-height: 1;
      transition: all .28s var(--ease);
      white-space: nowrap;
    }

    .btn:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 2px;
    }

    .btn-primary {
      color: #081426;
      background: var(--cyan);
      box-shadow: 0 0 24px rgba(43, 255, 217, .28);
    }

    .btn-primary:hover {
      background: #5AFFF0;
      transform: translateY(-2px);
      box-shadow: 0 0 34px rgba(43, 255, 217, .36);
      color: #05101F;
    }

    .btn-primary:active {
      transform: translateY(0);
    }

    .btn-secondary {
      color: #fff;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .24);
    }

    .btn-secondary:hover {
      border-color: var(--cyan);
      color: var(--cyan);
      background: rgba(43, 255, 217, .06);
      transform: translateY(-2px);
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-top: 30px;
    }

    .research-hero {
      position: relative;
      min-height: 78vh;
      display: flex;
      align-items: center;
      padding: clamp(70px, 10vh, 124px) 0;
      background-position: center 28%;
      background-size: cover;
    }

    .research-hero .container {
      z-index: 2;
    }

    .research-hero h1 {
      max-width: 960px;
      font-weight: 800;
      font-size: clamp(34px, 5vw, 58px);
      line-height: 1.1;
      margin: 18px 0 22px;
      letter-spacing: .01em;
    }

    .hero-lead {
      max-width: 650px;
      color: var(--text);
      font-size: 18px;
      line-height: 1.8;
      margin: 0;
    }

    .breadcrumb {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 13px;
      margin-bottom: 20px;
    }

    .breadcrumb a:hover {
      color: var(--cyan);
    }

    .breadcrumb .current {
      color: rgba(255, 255, 255, .85);
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(780px 520px at 87% 20%, rgba(45, 124, 246, .28), transparent 58%),
        linear-gradient(90deg, rgba(7, 12, 22, .94) 0%, rgba(7, 12, 22, .82) 42%, rgba(7, 12, 22, .62) 100%);
    }

    .hero-trust {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 32px;
      margin-top: 40px;
      color: rgba(255, 255, 255, .76);
      font-size: 14px;
    }

    .hero-trust li {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .hero-trust li::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 10px rgba(43, 255, 217, .7);
    }

    .intro-section {
      padding-top: 120px;
      padding-bottom: 80px;
    }

    .intro-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
      gap: clamp(28px, 5vw, 64px);
      align-items: center;
    }

    .cover-figure {
      margin: 0;
      position: relative;
    }

    .cover-figure img {
      width: 100%;
      border-radius: 22px;
      object-fit: cover;
      aspect-ratio: 4 / 3;
      border: 1px solid rgba(255, 255, 255, .08);
      box-shadow: 0 18px 50px rgba(0, 0, 0, .4);
    }

    .fig-note {
      display: inline-flex;
      margin-top: 14px;
      padding: 6px 14px;
      gap: 8px;
      align-items: center;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 12px;
      color: var(--muted);
      backdrop-filter: blur(10px);
    }

    .fig-note::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--cyan);
    }

    .intro-copy p {
      color: var(--text);
      margin-bottom: 20px;
    }

    .check-list {
      margin: 24px 0 30px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px 22px;
    }

    .check-list li {
      position: relative;
      padding-left: 28px;
      font-size: 15px;
      color: var(--title);
    }

    .check-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 4px;
      width: 18px;
      height: 18px;
      border: 1px solid rgba(43, 255, 217, .48);
      border-radius: 6px;
      background: rgba(43, 255, 217, .1);
    }

    .check-list li.is-checked::after {
      content: "";
      position: absolute;
      left: 4px;
      top: 10px;
      width: 9px;
      height: 5px;
      border-left: 2px solid var(--cyan);
      border-bottom: 2px solid var(--cyan);
      transform: rotate(-45deg);
    }

    .resource-section {
      background:
        linear-gradient(180deg, rgba(7, 12, 22, .72), rgba(7, 12, 22, .96)),
        radial-gradient(700px 360px at 90% 10%, rgba(45, 124, 246, .12), transparent 60%);
      border-top: 1px solid rgba(255, 255, 255, .05);
      border-bottom: 1px solid rgba(255, 255, 255, .05);
    }

    .resource-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
    }

    .resource-item {
      position: relative;
      display: block;
      padding: 24px 24px 22px;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: var(--shadow);
      transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
    }

    .resource-item:hover {
      transform: translateY(-5px);
      border-color: rgba(43, 255, 217, .32);
      box-shadow: var(--shadow-hover);
    }

    .resource-item:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 3px;
    }

    .resource-topline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }

    .resource-kind {
      padding: 3px 12px;
      border-radius: 999px;
      font-size: 12px;
      color: var(--cyan);
      background: rgba(43, 255, 217, .1);
      border: 1px solid rgba(43, 255, 217, .2);
    }

    .resource-icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      color: #fff;
      background: rgba(45, 124, 246, .17);
      border: 1px solid rgba(45, 124, 246, .24);
    }

    .resource-icon svg {
      width: 22px;
      height: 22px;
    }

    .resource-item h3 {
      font-size: 19px;
      margin-bottom: 7px;
      line-height: 1.3;
    }

    .resource-item p {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.7;
      margin: 0 0 16px;
    }

    .resource-item .res-more {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 700;
      color: var(--title);
      transition: color .25s var(--ease), gap .25s var(--ease);
    }

    .resource-item:hover .res-more {
      color: var(--cyan);
      gap: 10px;
    }

    .res-more svg {
      width: 17px;
      height: 17px;
    }

    .metrics-band {
      position: relative;
      padding: 62px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .06);
      background: rgba(13, 21, 38, .55);
      backdrop-filter: blur(12px);
    }

    .metrics-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 26px;
    }

    .metric-item {
      text-align: center;
      padding: 8px 12px;
      border-right: 1px solid rgba(255, 255, 255, .07);
    }

    .metric-item:last-child {
      border-right: 0;
    }

    .metric-item strong {
      display: block;
      font-size: clamp(38px, 4vw, 54px);
      font-weight: 800;
      color: var(--cyan);
      line-height: 1;
      text-shadow: 0 0 28px rgba(43, 255, 217, .34);
    }

    .metric-item span {
      display: inline-block;
      margin-top: 14px;
      color: var(--muted);
      font-size: 14px;
    }

    .workflow-section {
      background:
        radial-gradient(760px 420px at 18% 0%, rgba(45, 124, 246, .12), transparent 58%),
        linear-gradient(180deg, rgba(7, 12, 22, .2), rgba(7, 12, 22, .08));
    }

    .step-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 24px;
      margin-top: 18px;
    }

    .step-item {
      position: relative;
      padding: 28px 26px 26px;
      min-height: 220px;
      background: rgba(21, 42, 78, .34);
      border: 1px solid var(--border);
      border-radius: 20px;
      transition: all .3s var(--ease);
    }

    .step-item:hover {
      background: rgba(21, 42, 78, .6);
      transform: translateY(-5px);
      box-shadow: var(--shadow);
    }

    .step-num {
      font-size: 14px;
      font-weight: 800;
      color: var(--cyan);
      margin-bottom: 18px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      letter-spacing: .06em;
    }

    .step-num::before {
      content: "";
      width: 22px;
      height: 1px;
      background: rgba(43, 255, 217, .5);
    }

    .step-item h3 {
      font-size: 18px;
      margin-bottom: 10px;
    }

    .step-item p {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.75;
      margin: 0;
    }

    .faq-section {
      padding: 100px 0 84px;
    }

    .faq-wrap {
      max-width: 820px;
    }

    .faq-item {
      border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .faq-item:first-child {
      border-top: 1px solid rgba(255, 255, 255, .1);
    }

    .faq-q {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 22px 4px;
      color: var(--title);
      font-weight: 700;
      font-size: 16px;
      text-align: left;
      transition: color .25s var(--ease);
    }

    .faq-q:hover {
      color: var(--cyan);
    }

    .faq-icon {
      position: relative;
      width: 20px;
      height: 20px;
      flex: 0 0 auto;
    }

    .faq-icon::before,
    .faq-icon::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 20px;
      height: 2px;
      background: var(--cyan);
      transform: translate(-50%, -50%);
      transition: opacity .3s var(--ease), transform .35s var(--ease);
    }

    .faq-icon::after {
      transform: translate(-50%, -50%) rotate(90deg);
    }

    .faq-item.is-open .faq-icon::after {
      transform: translate(-50%, -50%) rotate(0deg);
      opacity: 0;
    }

    .faq-a {
      display: none;
      padding: 0 44px 24px 4px;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.8;
    }

    .faq-item.is-open .faq-a {
      display: block;
      animation: fadeDown .35s var(--ease);
    }

    @keyframes fadeDown {
      from {
        opacity: 0;
        transform: translateY(-8px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .cta-section {
      padding: 30px 0 110px;
    }

    .cta-card {
      background: linear-gradient(135deg, rgba(22, 35, 64, .92), rgba(21, 42, 78, .5));
      border: 1px solid rgba(255, 255, 255, .1);
      box-shadow: 0 18px 60px rgba(0, 0, 0, .46);
      border-radius: 26px;
      padding: clamp(32px, 5vw, 56px);
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 36px;
      position: relative;
      overflow: hidden;
    }

    .cta-card::after {
      content: "";
      position: absolute;
      width: 380px;
      height: 380px;
      right: -110px;
      top: -160px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(43, 255, 217, .15), transparent 68%);
      pointer-events: none;
    }

    .cta-card h2 {
      font-size: clamp(24px, 3vw, 34px);
      color: #fff;
      margin-bottom: 12px;
    }

    .cta-card p {
      color: var(--text);
      font-size: 15px;
      margin: 0;
      max-width: 620px;
    }

    .cta-actions {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-top: 20px;
    }

    .site-footer {
      background: rgba(6, 11, 21, .85);
      border-top: 1px solid rgba(255, 255, 255, .06);
      padding: 62px 0 24px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr;
      gap: 44px;
      padding-bottom: 34px;
      border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .footer-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 18px;
      font-weight: 800;
      color: var(--title);
      margin-bottom: 16px;
    }

    .footer-desc {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.8;
      margin-bottom: 0;
      max-width: 420px;
    }

    .footer-title {
      font-size: 14px;
      color: #fff;
      font-weight: 700;
      margin-bottom: 20px;
      letter-spacing: .02em;
    }

    .footer-links {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .footer-links a {
      color: var(--muted);
      font-size: 14px;
      transition: all .25s var(--ease);
    }

    .footer-links a:hover {
      color: var(--cyan);
      padding-left: 4px;
    }

    .footer-bottom {
      padding-top: 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      color: var(--disabled);
      font-size: 13px;
    }

    .footer-bottom .footer-meta {
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .to-top {
      position: fixed;
      right: 28px;
      bottom: 90px;
      z-index: 90;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: rgba(21, 42, 78, .88);
      border: 1px solid rgba(43, 255, 217, .4);
      color: var(--cyan);
      cursor: pointer;
      box-shadow: 0 0 24px rgba(43, 255, 217, .13), var(--shadow);
      opacity: 0;
      visibility: hidden;
      transform: translateY(14px);
      transition: all .3s var(--ease);
    }

    .to-top.is-visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .to-top:hover {
      background: rgba(21, 42, 78, 1);
      color: #fff;
      box-shadow: 0 0 30px rgba(43, 255, 217, .22), var(--shadow-hover);
    }

    .to-top svg {
      width: 21px;
      height: 21px;
    }

    @media (max-width: 1023px) {
      .site-rail {
        display: none;
      }

      .site-main {
        margin-left: 0;
        padding-top: var(--topbar-height);
      }

      .mobile-topbar {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--topbar-height);
        z-index: 110;
        align-items: center;
        justify-content: space-between;
        padding: 0 18px;
        background: rgba(9, 16, 30, .9);
        backdrop-filter: blur(18px);
        border-bottom: 1px solid rgba(255, 255, 255, .06);
      }

      .brand.compact {
        padding: 0;
      }

      .brand.compact .brand-main {
        font-size: 19px;
      }

      .topbar-login {
        color: var(--cyan);
        font-size: 14px;
        font-weight: 700;
        padding: 7px 12px;
        border-radius: 8px;
        border: 1px solid rgba(43, 255, 217, .28);
      }

      .drawer-toggle {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        color: #fff;
        margin-left: 14px;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 10px;
        background: rgba(255, 255, 255, .04);
      }

      .drawer-toggle svg {
        width: 22px;
        height: 22px;
      }

      .drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 130;
        background: rgba(3, 8, 18, .6);
        backdrop-filter: blur(4px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s var(--ease), visibility .3s var(--ease);
      }

      .mobile-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        width: min(330px, 86vw);
        z-index: 140;
        background: linear-gradient(180deg, #0D1629, #0A1220);
        border-left: 1px solid rgba(255, 255, 255, .08);
        padding: 20px 18px 26px;
        transform: translateX(105%);
        transition: transform .38s var(--ease);
        overflow-y: auto;
      }

      body.drawer-open .mobile-drawer {
        transform: translateX(0);
      }

      body.drawer-open .drawer-backdrop {
        opacity: 1;
        visibility: visible;
      }

      .drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 36px;
      }

      .drawer-close {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        color: var(--muted);
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 10px;
      }

      .drawer-close svg {
        width: 20px;
        height: 20px;
      }

      .mobile-drawer .drawer-nav {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .mobile-drawer .nav-item {
        border-left: 3px solid transparent;
        border-radius: 12px;
      }

      .mobile-drawer .nav-item.is-active {
        border-left-color: var(--cyan);
      }

      .drawer-login {
        margin-top: 24px;
      }
    }

    @media (max-width: 900px) {
      .intro-layout {
        grid-template-columns: 1fr;
      }

      .intro-layout .cover-figure {
        order: 0;
      }

      .intro-layout .intro-copy {
        order: 1;
      }

      .resource-grid {
        grid-template-columns: 1fr;
        gap: 18px;
      }

      .step-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
      }

      .metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 12px;
      }

      .metric-item:nth-child(2) {
        border-right: 0;
      }

      .cta-card {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .cta-actions {
        flex-direction: row;
        flex-wrap: wrap;
      }
    }

    @media (max-width: 767px) {
      .section {
        padding: 76px 0;
      }

      .section-head {
        margin-bottom: 30px;
      }

      .research-hero {
        min-height: 86vh;
        padding: 62px 0 50px;
      }

      .research-hero h1 {
        font-size: clamp(30px, 8vw, 40px);
      }

      .hero-lead {
        font-size: 16px;
      }

      .hero-trust {
        gap: 10px 18px;
      }

      .check-list {
        grid-template-columns: 1fr;
      }

      .resource-item {
        padding: 22px 18px 20px;
      }

      .cta-card,
      .cta-section {
        padding: 24px;
      }

      .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
      }

      .cta-actions .btn {
        width: 100%;
      }

      .to-top {
        right: 16px;
        bottom: 82px;
        width: 44px;
        height: 44px;
      }
    }

    @media (max-width: 480px) {
      .step-grid {
        grid-template-columns: 1fr;
      }

      .metrics-grid {
        grid-template-columns: 1fr;
      }

      .metric-item {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
        padding-bottom: 18px;
      }

      .metric-item:last-child {
        border-bottom: 0;
      }

      .hero-actions .btn {
        width: 100%;
      }
    }