/* roulang page: index */
:root{--blue:#2563eb;--navy:#172554;--cyan:#0891b2;--orange:#f59e0b;--mist:#f7faff;--line:#dbe7f5;--text:#172554;--muted:#64748b;--radius:16px}
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--mist);color:var(--text);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;line-height:1.7}
    a{text-decoration:none;color:inherit}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    :focus-visible{outline:3px solid rgba(37,99,235,.36);outline-offset:3px}
    .site-shell{overflow:hidden}
    .grid-field{background-image:linear-gradient(rgba(37,99,235,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.055) 1px,transparent 1px);background-size:28px 28px}
    .cut-corner{clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%)}
    .nav-link{position:relative;color:#475569;transition:color .2s ease}
    .nav-link:hover,.nav-link.active{color:var(--blue)}
    .nav-link.active:after{content:"";position:absolute;left:0;right:0;bottom:-18px;height:2px;background:var(--blue);border-radius:4px}
    .btn-primary,.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:11px;font-weight:700;transition:all .2s ease}
    .btn-primary{background:var(--blue);color:#fff;border:1px solid var(--blue);box-shadow:0 8px 16px rgba(37,99,235,.18)}
    .btn-primary:hover{background:#1d4ed8;transform:translateY(-2px);box-shadow:0 12px 23px rgba(37,99,235,.25)}
    .btn-primary:active,.btn-secondary:active{transform:translateY(0)}
    .btn-secondary{background:#fff;color:var(--blue);border:1px solid #b9d3fa}
    .btn-secondary:hover{background:#eff6ff;border-color:var(--blue);transform:translateY(-2px)}
    .panel-card{border:1px solid var(--line);background:#fff;border-radius:var(--radius);box-shadow:0 14px 38px rgba(30,64,175,.07),0 3px 10px rgba(15,23,42,.035);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
    .panel-card:hover{transform:translateY(-3px);border-color:#9bc0f8;box-shadow:0 20px 45px rgba(30,64,175,.12),0 6px 14px rgba(15,23,42,.06)}
    .metric-number{font-variant-numeric:tabular-nums}
    .progress-track{height:7px;border-radius:999px;background:#e7effa;overflow:hidden}
    .progress-value{height:100%;border-radius:inherit;background:linear-gradient(90deg,#2563eb,#0891b2)}
    .faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
    .faq-answer>div{overflow:hidden}
    .faq-item.open .faq-answer{grid-template-rows:1fr}
    .faq-item.open .faq-button{background:#eff6ff;border-color:#93c5fd}
    .faq-item.open .faq-icon{transform:rotate(45deg);color:var(--blue)}
    .faq-icon{transition:transform .2s ease}
    .input-field{width:100%;border:1px solid #cbdcf1;border-radius:10px;background:#fff;color:var(--text);padding:.78rem .9rem;transition:border-color .2s ease,box-shadow .2s ease}
    .input-field:hover{border-color:#93c5fd}
    .input-field:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.11)}
    .mobile-menu{max-height:0;opacity:0;overflow:hidden;transition:max-height .25s ease,opacity .2s ease}
    .mobile-menu.show{max-height:340px;opacity:1}
    .back-top{opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s ease}
    .back-top.show{opacity:1;visibility:visible;transform:translateY(0)}
    @media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
    @media (max-width:767px){.nav-link.active:after{display:none}.metric-card:nth-child(3){border-left:0}.metric-card:nth-child(4){border-left:0}}

/* roulang page: category2 */
:root{--blue:#2563eb;--navy:#172554;--cyan:#0891b2;--orange:#f59e0b;--mist:#f7faff;--line:#dbe7f5;--text:#172554;--muted:#64748b;--radius:16px}
    html{scroll-behavior:smooth}
    *{box-sizing:border-box}
    body{margin:0;background:var(--mist);color:var(--text);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;line-height:1.7}
    a{text-decoration:none;color:inherit}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    .grid-field{background-image:linear-gradient(rgba(37,99,235,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.055) 1px,transparent 1px);background-size:28px 28px}
    .cut-corner{clip-path:polygon(0 0,88% 0,100% 18%,100% 100%,12% 100%,0 82%)}
    .nav-link{position:relative;color:#475569;transition:color .2s ease}
    .nav-link:hover,.nav-link.active{color:var(--blue)}
    .nav-link.active:after{content:"";position:absolute;left:0;right:0;bottom:-18px;height:2px;background:var(--blue);border-radius:4px}
    .btn-primary,.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:11px;font-weight:700;transition:all .2s ease}
    .btn-primary{background:var(--blue);color:#fff;border:1px solid var(--blue);box-shadow:0 8px 16px rgba(37,99,235,.18)}
    .btn-primary:hover{background:#1d4ed8;transform:translateY(-2px);box-shadow:0 12px 23px rgba(37,99,235,.25)}
    .btn-primary:active,.btn-secondary:active{transform:translateY(0)}
    .btn-secondary{background:#fff;color:var(--blue);border:1px solid #b9d3fa}
    .btn-secondary:hover{background:#eff6ff;border-color:var(--blue);transform:translateY(-2px)}
    .panel-card{border:1px solid var(--line);background:#fff;border-radius:var(--radius);box-shadow:0 14px 38px rgba(30,64,175,.07),0 3px 10px rgba(15,23,42,.035);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
    .panel-card:hover{transform:translateY(-3px);border-color:#9bc0f8;box-shadow:0 20px 45px rgba(30,64,175,.12),0 6px 14px rgba(15,23,42,.06)}
    .timeline-line{background:linear-gradient(var(--blue),#bfdbfe);width:2px}
    .metric-bar{height:7px;border-radius:99px;background:#e5eefb;overflow:hidden}
    .metric-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),#38bdf8)}
    .mobile-menu{max-height:0;opacity:0;overflow:hidden;transition:max-height .25s ease,opacity .2s ease}
    .mobile-menu.show{max-height:340px;opacity:1}
    .input-field{width:100%;border:1px solid #cbdcf1;border-radius:10px;background:#fff;color:var(--text);padding:.78rem .9rem;transition:border-color .2s ease,box-shadow .2s ease}
    .input-field:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.11)}
    :focus-visible{outline:3px solid rgba(37,99,235,.35);outline-offset:3px}
    @media(max-width:767px){.nav-link.active:after{display:none}}
    @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* roulang page: category1 */
:root{--blue:#2563eb;--navy:#172554;--cyan:#0891b2;--orange:#f59e0b;--mist:#f7faff;--line:#dbe7f5;--text:#172554;--muted:#64748b;--radius:16px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--mist);color:var(--text);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;line-height:1.7}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.grid-field{background-image:linear-gradient(rgba(37,99,235,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.055) 1px,transparent 1px);background-size:28px 28px}
.cut-corner{clip-path:polygon(0 0,88% 0,100% 16%,100% 100%,12% 100%,0 84%)}
.nav-link{position:relative;color:#475569;transition:color .2s ease}
.nav-link:hover,.nav-link.active{color:var(--blue)}
.nav-link.active:after{content:"";position:absolute;left:0;right:0;bottom:-18px;height:2px;background:var(--blue);border-radius:4px}
.btn-primary,.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:11px;font-weight:700;transition:all .2s ease}
.btn-primary{background:var(--blue);color:#fff;border:1px solid var(--blue);box-shadow:0 8px 16px rgba(37,99,235,.18)}
.btn-primary:hover{background:#1d4ed8;transform:translateY(-2px);box-shadow:0 12px 23px rgba(37,99,235,.25)}
.btn-primary:active,.btn-secondary:active{transform:translateY(0)}
.btn-secondary{background:#fff;color:var(--blue);border:1px solid #b9d3fa}
.btn-secondary:hover{background:#eff6ff;border-color:var(--blue);transform:translateY(-2px)}
.panel-card{border:1px solid var(--line);background:#fff;border-radius:var(--radius);box-shadow:0 14px 38px rgba(30,64,175,.07),0 3px 10px rgba(15,23,42,.035);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.panel-card:hover{transform:translateY(-3px);border-color:#9bc0f8;box-shadow:0 20px 45px rgba(30,64,175,.12),0 6px 14px rgba(15,23,42,.06)}
.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.faq-answer>div{overflow:hidden}
.faq-item.open .faq-answer{grid-template-rows:1fr}
.faq-item.open .faq-button{background:#eff6ff;border-color:#93c5fd}
.faq-item.open .faq-icon{transform:rotate(45deg);color:var(--blue)}
.faq-icon{transition:transform .2s ease}
.input-field{width:100%;border:1px solid #cbdcf1;border-radius:10px;background:#fff;color:var(--text);padding:.78rem .9rem;transition:border-color .2s ease,box-shadow .2s ease}
.input-field:hover{border-color:#93c5fd}
.input-field:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.11)}
.mobile-menu{max-height:0;opacity:0;overflow:hidden;transition:max-height .25s ease,opacity .2s ease}
.mobile-menu.show{max-height:340px;opacity:1}
.filter-check{appearance:none;width:18px;height:18px;border:1px solid #b7cce7;border-radius:5px;background:#fff;display:grid;place-content:center;transition:.2s}
.filter-check:checked{background:var(--blue);border-color:var(--blue)}
.filter-check:checked:after{content:"";width:8px;height:4px;border-left:2px solid white;border-bottom:2px solid white;transform:rotate(-45deg) translateY(-1px)}
.filter-chip{cursor:pointer;display:inline-flex;align-items:center;border:1px solid #d7e4f4;border-radius:999px;padding:.38rem .72rem;background:#fff;color:#52627a;font-size:.8rem;font-weight:700;transition:.2s}
.filter-chip:hover,.filter-chip.selected{color:#1d4ed8;background:#eff6ff;border-color:#93c5fd}
.result-card{position:relative;overflow:hidden}
.result-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#bfdbfe;transition:.2s}
.result-card:hover:before{background:var(--blue)}
.status-dot{width:8px;height:8px;border-radius:999px;background:#0891b2;display:inline-block;box-shadow:0 0 0 4px rgba(8,145,178,.1)}
.timeline-line{background:linear-gradient(180deg,#bfdbfe 0%,#dbeafe 70%,transparent 100%)}
.page-btn{display:inline-flex;height:40px;min-width:40px;align-items:center;justify-content:center;border:1px solid #d9e5f4;border-radius:10px;background:#fff;color:#52627a;font-size:.875rem;font-weight:700;transition:.2s}
.page-btn:hover{border-color:#93c5fd;background:#eff6ff;color:#2563eb}
.page-btn.current{background:#2563eb;border-color:#2563eb;color:#fff}
:focus-visible{outline:3px solid rgba(37,99,235,.3);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media (max-width:1023px){.nav-link.active:after{display:none}}