/* roulang page: index */
:root{
      --ink:#111827;
      --muted:#657083;
      --paper:#f5f7fb;
      --surface:#ffffff;
      --navy:#0c1b38;
      --navy-2:#132a50;
      --cyan:#28d5d1;
      --orange:#ff815b;
      --line:#e3e8f1;
      --soft:#eef3f8;
      --radius-xl:30px;
      --radius-lg:22px;
      --radius-md:15px;
      --shadow:0 18px 55px rgba(22,37,68,.10);
      --shadow-sm:0 8px 26px rgba(22,37,68,.07);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;color:var(--ink);background:var(--paper);font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;line-height:1.75;font-size:15px}
    a{color:inherit;text-decoration:none;transition:.25s ease}
    a:hover{color:var(--orange)}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(40,213,209,.45);outline-offset:3px}
    .container{max-width:1180px;margin:0 auto;padding:0 24px}
    .topbar{height:78px;display:flex;align-items:center;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(227,232,241,.9);position:sticky;top:0;z-index:20;backdrop-filter:blur(16px)}
    .nav-shell{display:flex;align-items:center;gap:28px;width:100%}
    .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.04em;font-size:21px;white-space:nowrap}
    .brand-mark{width:34px;height:34px;border-radius:12px;background:var(--navy);display:grid;place-items:center;color:var(--cyan);font-size:16px;box-shadow:0 6px 14px rgba(12,27,56,.22)}
    .nav-links{display:flex;align-items:center;gap:4px;flex:1}
    .nav-links a{padding:9px 12px;border-radius:10px;color:#5e6878;font-size:14px;white-space:nowrap}
    .nav-links a:hover,.nav-links a.active{background:#edf7f7;color:var(--navy);font-weight:700}
    .command-search{display:flex;align-items:center;width:200px;height:39px;background:#f4f6fa;border:1px solid var(--line);border-radius:11px;padding:0 12px;color:#8993a4;gap:8px}
    .command-search span{font-size:13px;flex:1}
    .key{font-size:11px;padding:1px 5px;border:1px solid #d9dfeb;border-radius:5px;color:#8e99a9;background:#fff}
    .nav-cta,.btn-primary{border:0;background:var(--navy);color:#fff;border-radius:11px;padding:11px 17px;font-weight:700;box-shadow:0 8px 18px rgba(12,27,56,.18)}
    .nav-cta:hover,.btn-primary:hover{background:#1a3969;color:#fff;transform:translateY(-2px)}
    .menu-toggle{display:none;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px}
    .hero{min-height:650px;display:flex;align-items:center;position:relative;overflow:hidden;background:var(--navy);color:#fff;background-image:linear-gradient(90deg,rgba(7,19,42,.95) 5%,rgba(7,19,42,.72) 48%,rgba(7,19,42,.48)),url("/assets/images/backpic/back-1.webp");background-size:cover;background-position:center}
    .hero:after{content:"";position:absolute;width:440px;height:440px;border:1px solid rgba(40,213,209,.25);border-radius:50%;right:-120px;top:-90px;box-shadow:0 0 0 50px rgba(40,213,209,.04),0 0 0 100px rgba(40,213,209,.025)}
    .hero-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:54px;align-items:center;position:relative;z-index:1}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--cyan);font-size:12px;letter-spacing:.14em;font-weight:800;text-transform:uppercase}
    .eyebrow:before{content:"";width:22px;height:2px;background:var(--orange)}
    h1{font-size:clamp(42px,5vw,72px);line-height:1.08;letter-spacing:-.07em;margin:19px 0 22px;max-width:650px}
    .hero-copy{font-size:17px;color:#d4dced;max-width:590px;line-height:1.9}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
    .btn-light{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.24);color:#fff;border-radius:11px;padding:11px 18px;background:rgba(255,255,255,.09);font-weight:700}
    .btn-light:hover{background:#fff;color:var(--navy)}
    .hero-points{display:flex;gap:24px;margin-top:35px;flex-wrap:wrap}
    .point{display:flex;gap:10px;align-items:center;color:#dce4f1;font-size:13px}
    .point strong{font-size:24px;color:#fff;display:block;line-height:1}
    .stage{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:26px;padding:14px;box-shadow:0 20px 80px rgba(0,0,0,.2);transform:rotate(1deg)}
    .stage-screen{min-height:380px;border-radius:18px;overflow:hidden;position:relative;background:#162d55 url("/assets/images/coverpic/cover-4.webp") center/cover}
    .stage-screen:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,18,40,.85),transparent 65%)}
    .stage-head,.stage-foot{position:absolute;z-index:1;left:22px;right:22px;display:flex;justify-content:space-between;align-items:center}
    .stage-head{top:20px}.stage-foot{bottom:22px;align-items:end}
    .live{background:var(--orange);color:white;padding:4px 9px;border-radius:6px;font-size:11px;font-weight:800}
    .stage-title{font-size:29px;font-weight:800;line-height:1.2;max-width:300px}
    .stage-meta{font-size:12px;color:#c8d3e4;margin-top:7px}
    .section{padding:88px 0}
    .section-tight{padding:64px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:31px}
    .section-kicker{color:var(--orange);font-size:12px;font-weight:800;letter-spacing:.14em}
    h2{font-size:clamp(28px,3vw,44px);line-height:1.2;letter-spacing:-.055em;margin:7px 0 0}
    .section-intro{max-width:510px;color:var(--muted);margin:8px 0 0}
    .text-link{color:var(--navy);font-weight:800;font-size:14px;white-space:nowrap}
    .text-link:after{content:" ↗";color:var(--orange)}
    .category-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
    .category-card{min-height:145px;padding:20px 17px;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-md);position:relative;overflow:hidden}
    .category-card:hover{transform:translateY(-5px);border-color:var(--cyan);box-shadow:var(--shadow-sm)}
    .category-number{font-size:12px;color:var(--orange);font-weight:800}
    .category-card h3{font-size:17px;margin:30px 0 5px;letter-spacing:-.03em}
    .category-card p{font-size:12px;color:var(--muted);line-height:1.55;margin:0}
    .category-card:after{content:"";width:58px;height:58px;border-radius:50%;background:#edf9f8;position:absolute;right:-20px;top:-20px}
    .metric-band{background:var(--navy);color:#fff;border-radius:var(--radius-xl);padding:36px 40px;box-shadow:var(--shadow)}
    .metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
    .metric{border-left:1px solid rgba(255,255,255,.2);padding-left:24px}
    .metric:first-child{border-left:0}
    .metric strong{font-size:38px;letter-spacing:-.06em;display:block;color:var(--cyan)}
    .metric span{font-size:13px;color:#c7d2e6}
    .split{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center}
    .visual-card{border-radius:var(--radius-xl);overflow:hidden;min-height:440px;background:#dce8ed;position:relative;box-shadow:var(--shadow)}
    .visual-card img{width:100%;height:100%;min-height:440px;object-fit:cover}
    .visual-caption{position:absolute;left:24px;right:24px;bottom:22px;padding:18px;border-radius:16px;background:rgba(10,24,51,.78);color:white;backdrop-filter:blur(8px)}
    .visual-caption strong{font-size:19px;display:block}.visual-caption span{font-size:12px;color:#ced8e7}
    .feature-list{display:grid;gap:18px;margin-top:26px}
    .feature-item{display:grid;grid-template-columns:42px 1fr;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line)}
    .feature-icon{width:42px;height:42px;border-radius:13px;background:#e8f8f7;color:#0c7779;display:grid;place-items:center;font-weight:800}
    .feature-item h3{font-size:18px;margin:0 0 3px}.feature-item p{margin:0;color:var(--muted);font-size:14px}
    .dark-panel{background:#eaf0f6;padding:74px 0}
    .matrix{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}
    .matrix-main,.matrix-side{border-radius:var(--radius-lg);overflow:hidden;position:relative;min-height:340px}
    .matrix-main{background:var(--navy);color:#fff;padding:34px}
    .matrix-main:after{content:"";position:absolute;right:-40px;bottom:-90px;width:290px;height:290px;border:40px solid rgba(40,213,209,.13);border-radius:50%}
    .matrix-main h3{font-size:31px;max-width:370px;line-height:1.25;letter-spacing:-.05em}
    .matrix-main p{color:#becbe0;max-width:440px}
    .matrix-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}.matrix-tags span{padding:7px 11px;border:1px solid rgba(255,255,255,.2);border-radius:8px;font-size:12px;color:#d5e1ed}
    .matrix-side{background:#fff;padding:28px;border:1px solid var(--line)}
    .matrix-side h3{font-size:22px;margin:0 0 13px}.matrix-side ul{list-style:none;padding:0;margin:0}.matrix-side li{padding:11px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:13px}.matrix-side li b{color:var(--navy)}
    .focus-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:15px}
    .focus-card{border-radius:var(--radius-lg);overflow:hidden;min-height:235px;position:relative;background:var(--navy);color:#fff}
    .focus-card:first-child{grid-row:span 2;min-height:485px}
    .focus-card img{width:100%;height:100%;object-fit:cover;opacity:.72;transition:.35s}
    .focus-card:hover img{transform:scale(1.06);opacity:.88}
    .focus-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,17,39,.9),transparent 68%)}
    .focus-content{position:absolute;z-index:1;left:22px;right:20px;bottom:19px}.focus-content small{color:var(--cyan);font-weight:800}.focus-content h3{font-size:21px;line-height:1.25;margin:5px 0}
    .focus-content p{font-size:12px;color:#d1d9e6;margin:0}
    .data-table{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
    .data-row{display:grid;grid-template-columns:1.3fr .8fr .8fr .8fr;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line);gap:10px}
    .data-row:last-child{border-bottom:0}.data-row.head{background:#f4f7fa;color:#758095;font-size:12px;font-weight:800}.data-row strong{font-size:15px}.data-row span{color:var(--muted);font-size:13px}.trend{color:#0a9d8f!important;font-weight:800}
    .news-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:22px}
    .news-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
    .news-item{display:grid;grid-template-columns:86px 1fr auto;gap:17px;padding:20px 22px;border-bottom:1px solid var(--line);align-items:center}.news-item:last-child{border-bottom:0}
    .news-date{font-size:12px;color:var(--orange);font-weight:800}.news-item h3{font-size:16px;margin:0 0 4px;line-height:1.4}.news-item p{font-size:12px;color:var(--muted);margin:0;line-height:1.6}.more{font-size:12px;color:var(--navy);font-weight:800;white-space:nowrap}
    .news-recommend{background:var(--navy);border-radius:var(--radius-lg);color:#fff;padding:28px;position:relative;overflow:hidden}.news-recommend:before{content:"";position:absolute;width:180px;height:180px;border:1px solid rgba(40,213,209,.3);border-radius:50%;right:-55px;top:-40px}.news-recommend h3{font-size:24px;position:relative}.news-recommend p{color:#bcc9dd;position:relative;font-size:14px}.recommend-list{position:relative;margin-top:28px}.recommend-list div{padding:13px 0;border-top:1px solid rgba(255,255,255,.16);font-size:13px;color:#e1e8f2}
    .comparison{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.compare-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:27px;position:relative}.compare-card.featured{background:#152b52;color:#fff;border-color:#152b52;transform:translateY(-10px);box-shadow:var(--shadow)}.compare-card h3{font-size:20px}.compare-card p{font-size:13px;color:var(--muted)}.featured p{color:#c6d3e4}.compare-card ul{list-style:none;padding:0;margin:21px 0}.compare-card li{padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}.featured li{border-color:rgba(255,255,255,.14);color:#dce6f2}.compare-card li:before{content:"✓";color:var(--orange);font-weight:900;margin-right:8px}.compare-btn{display:block;text-align:center;padding:10px;border-radius:10px;border:1px solid var(--line);font-weight:700;font-size:13px}.featured .compare-btn{background:var(--cyan);border-color:var(--cyan);color:var(--navy)}
    .review-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:24px;align-items:stretch}.review-score{background:var(--orange);color:#fff;border-radius:var(--radius-lg);padding:31px}.review-score strong{display:block;font-size:64px;line-height:1;letter-spacing:-.08em}.stars{letter-spacing:4px;margin:15px 0}.review-score p{font-size:13px;opacity:.9}.review-list{display:grid;grid-template-columns:1fr 1fr;gap:13px}.review{background:#fff;border:1px solid var(--line);border-radius:16px;padding:21px}.review p{font-size:14px;margin:0 0 13px}.review small{color:var(--muted)}
    .download-panel{background:linear-gradient(120deg,#dff8f5,#eef2ff);border-radius:var(--radius-xl);padding:48px;display:flex;align-items:center;justify-content:space-between;gap:35px;border:1px solid #d7e8ec}.download-panel h2{max-width:560px}.download-panel p{color:var(--muted);max-width:580px}.download-actions{display:flex;gap:10px;flex-wrap:wrap}.outline-btn{border:1px solid #b7c7d7;color:var(--navy);border-radius:11px;padding:11px 17px;font-weight:700;background:#fff}.outline-btn:hover{background:var(--navy);color:#fff}
    .brand-story{display:grid;grid-template-columns:1fr 1fr;gap:45px}.brand-story p{color:var(--muted);font-size:16px;line-height:2}.story-note{border-left:3px solid var(--cyan);padding:4px 0 4px 22px;color:var(--navy);font-weight:700;font-size:20px;line-height:1.5}
    .process{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.process-card{padding:22px;border-top:3px solid var(--cyan);background:#fff;border-radius:0 0 16px 16px;box-shadow:var(--shadow-sm)}.process-card b{font-size:12px;color:var(--orange)}.process-card h3{font-size:17px;margin:13px 0 5px}.process-card p{margin:0;color:var(--muted);font-size:13px}
    .faq-wrap{display:grid;grid-template-columns:.7fr 1.3fr;gap:42px}.faq-wrap>div>p{color:var(--muted)}.accordion-item{border:0;border-bottom:1px solid var(--line);background:transparent}.accordion-button{background:transparent!important;box-shadow:none!important;color:var(--ink);font-weight:700;padding:18px 0}.accordion-body{padding:0 30px 18px 0;color:var(--muted);font-size:14px}
    .cta{background:var(--navy);color:#fff;border-radius:var(--radius-xl);padding:49px 55px;display:flex;align-items:center;justify-content:space-between;gap:25px}.cta h2{max-width:620px}.cta p{color:#c9d4e5;max-width:600px}.cta .btn-primary{background:var(--cyan);color:var(--navy);box-shadow:none}.cta .btn-primary:hover{background:#8cf1e8}
    footer{background:#08152d;color:#dbe4ef;padding:52px 0 23px}.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:35px;padding-bottom:42px;border-bottom:1px solid rgba(255,255,255,.12)}footer .brand{color:#fff}footer p{color:#9aaac0;font-size:13px;max-width:310px}footer h3{font-size:14px;color:#fff;margin:5px 0 15px}footer ul{list-style:none;padding:0;margin:0}footer li{margin:7px 0;color:#9aaac0;font-size:13px}footer li a:hover{color:var(--cyan)}.copyright{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;padding-top:20px;color:#8899b1;font-size:12px}
    @media(max-width:1024px){.nav-links{gap:0}.command-search{width:150px}.hero-grid{gap:30px}.category-grid{grid-template-columns:repeat(3,1fr)}.section{padding:70px 0}}
    @media(max-width:768px){.topbar{height:68px}.nav-shell{gap:12px}.menu-toggle{display:block;margin-left:auto}.nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;padding:12px 24px 18px;border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);flex-direction:column;align-items:stretch}.nav-links.open{display:flex}.nav-links a{padding:11px}.command-search,.nav-cta{display:none}.hero{min-height:auto;padding:82px 0}.hero-grid{grid-template-columns:1fr}.stage{margin-top:10px}.split,.matrix,.news-layout,.review-layout,.faq-wrap,.brand-story{grid-template-columns:1fr}.metric-grid{grid-template-columns:repeat(2,1fr);gap:25px}.metric:nth-child(3){border-left:0;padding-left:0}.focus-grid{grid-template-columns:1fr 1fr}.focus-card:first-child{grid-row:auto;min-height:300px;grid-column:span 2}.comparison{grid-template-columns:1fr}.compare-card.featured{transform:none}.process{grid-template-columns:1fr 1fr}.download-panel,.cta{padding:35px 28px;display:block}.download-actions{margin-top:23px}.footer-grid{grid-template-columns:1fr 1fr}}
    @media(max-width:520px){.container{padding:0 18px}h1{font-size:42px}.hero-copy{font-size:15px}.hero-points{gap:15px}.point strong{font-size:20px}.category-grid{grid-template-columns:1fr 1fr}.metric-band{padding:26px 21px}.metric{padding-left:14px}.metric strong{font-size:29px}.metric span{font-size:11px}.section{padding:55px 0}.section-head{display:block}.section-head .text-link{display:inline-block;margin-top:13px}.visual-card,.visual-card img{min-height:340px}.focus-grid{grid-template-columns:1fr}.focus-card:first-child{grid-column:auto}.news-item{grid-template-columns:1fr;gap:4px}.news-item .more{display:inline-block;margin-top:8px}.review-list{grid-template-columns:1fr}.process{grid-template-columns:1fr}.download-panel,.cta{border-radius:22px;padding:28px 22px}.cta h2{font-size:30px}.footer-grid{grid-template-columns:1fr 1fr;gap:24px}.footer-grid>div:first-child{grid-column:span 2}}

/* roulang page: category3 */
:root{
      --ink:#111827;
      --muted:#657083;
      --paper:#f5f7fb;
      --surface:#ffffff;
      --navy:#0c1b38;
      --navy-2:#132a50;
      --cyan:#28d5d1;
      --orange:#ff815b;
      --line:#e3e8f1;
      --soft:#eef3f8;
      --radius-xl:30px;
      --radius-lg:22px;
      --radius-md:15px;
      --shadow:0 18px 55px rgba(22,37,68,.10);
      --shadow-sm:0 8px 26px rgba(22,37,68,.07);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;color:var(--ink);background:var(--paper);font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;line-height:1.75;font-size:15px}
    a{color:inherit;text-decoration:none;transition:.25s ease}
    a:hover{color:var(--orange)}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(40,213,209,.45);outline-offset:3px}
    .container{max-width:1180px;margin:0 auto;padding:0 24px}
    .topbar{height:78px;display:flex;align-items:center;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(227,232,241,.9);position:sticky;top:0;z-index:20;backdrop-filter:blur(16px)}
    .nav-shell{display:flex;align-items:center;gap:28px;width:100%}
    .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.04em;font-size:21px;white-space:nowrap}
    .brand-mark{width:34px;height:34px;border-radius:12px;background:var(--navy);display:grid;place-items:center;color:var(--cyan);font-size:16px;box-shadow:0 6px 14px rgba(12,27,56,.22)}
    .nav-links{display:flex;align-items:center;gap:4px;flex:1}
    .nav-links a{padding:9px 12px;border-radius:10px;color:#5e6878;font-size:14px;white-space:nowrap}
    .nav-links a:hover,.nav-links a.active{background:#edf7f7;color:var(--navy);font-weight:700}
    .command-search{display:flex;align-items:center;width:200px;height:39px;background:#f4f6fa;border:1px solid var(--line);border-radius:11px;padding:0 12px;color:#8993a4;gap:8px}
    .command-search span{font-size:13px;flex:1}
    .nav-cta,.btn-primary{border:0;background:var(--navy);color:#fff;border-radius:11px;padding:11px 17px;font-weight:700;box-shadow:0 8px 18px rgba(12,27,56,.18)}
    .nav-cta:hover,.btn-primary:hover{background:#1a3969;color:#fff;transform:translateY(-2px)}
    .menu-toggle{display:none;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px}
    h1,h2,h3,h4,p{margin-top:0}
    h1,h2,h3{letter-spacing:-.045em}
    h1{font-size:clamp(38px,5vw,66px);line-height:1.08;font-weight:850}
    h2{font-size:clamp(28px,3.2vw,44px);line-height:1.18;font-weight:820}
    h3{font-size:19px;line-height:1.35}
    .hero-inner{min-height:555px;display:flex;align-items:center;position:relative;overflow:hidden;background:var(--navy);color:#fff;background-image:linear-gradient(90deg,rgba(7,19,42,.96),rgba(7,19,42,.72)),url("/assets/images/backpic/back-2.webp");background-size:cover;background-position:center}
    .hero-inner:after{content:"";position:absolute;width:390px;height:390px;border:1px solid rgba(40,213,209,.25);border-radius:50%;right:-100px;top:-120px;box-shadow:0 0 0 50px rgba(40,213,209,.04),0 0 0 100px rgba(40,213,209,.025)}
    .hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:62px;align-items:center;position:relative;z-index:1}
    .eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--cyan);font-size:12px;letter-spacing:.14em;font-weight:800}
    .eyebrow:before,.section-kicker:before{content:"";width:22px;height:2px;background:var(--orange)}
    .hero-copy{font-size:17px;color:#d4dced;max-width:570px;line-height:1.9}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
    .btn-light{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.24);color:#fff;border-radius:11px;padding:11px 18px;background:rgba(255,255,255,.09);font-weight:700}
    .btn-light:hover{background:#fff;color:var(--navy)}
    .hero-note{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px;color:#b9c7dc;font-size:13px}
    .hero-note strong{display:block;color:#fff;font-size:20px;line-height:1.2}
    .dashboard{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:26px;padding:15px;box-shadow:0 20px 80px rgba(0,0,0,.23);transform:rotate(1deg)}
    .dashboard-window{background:#f5f8fc;color:var(--ink);border-radius:18px;padding:20px;min-height:360px}
    .dash-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:14px}
    .dash-label{font-weight:800;font-size:16px}
    .live-dot{display:inline-flex;align-items:center;gap:6px;color:#0c7779;font-size:12px;font-weight:700}
    .live-dot:before{content:"";width:7px;height:7px;background:var(--cyan);border-radius:50%;box-shadow:0 0 0 4px rgba(40,213,209,.16)}
    .dash-filter{font-size:12px;color:var(--muted);background:#fff;border:1px solid var(--line);padding:6px 10px;border-radius:8px}
    .player-row{display:grid;grid-template-columns:34px 1fr 70px 75px;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #e8edf3}
    .player-row:last-child{border-bottom:0}
    .rank{font-weight:800;color:var(--orange)}
    .avatar{width:34px;height:34px;border-radius:12px;object-fit:cover}
    .player-name{font-weight:750;font-size:14px}
    .player-team{font-size:11px;color:var(--muted)}
    .stat{text-align:right;font-weight:800;font-size:15px}
    .stat small{display:block;font-size:10px;color:var(--muted);font-weight:500}
    .trend{color:#0d8e89;font-size:12px;text-align:right;font-weight:700}
    .section{padding:88px 0}
    .section-tight{padding:62px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px}
    .section-kicker{color:var(--orange)}
    .section-intro{max-width:530px;color:var(--muted);margin:8px 0 0}
    .text-link{color:var(--navy);font-weight:800;font-size:14px;white-space:nowrap}
    .text-link:after{content:" ↗";color:var(--orange)}
    .metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
    .metric{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:24px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
    .metric:after{content:"";position:absolute;right:-25px;bottom:-35px;width:100px;height:100px;border:16px solid #e9f7f6;border-radius:50%}
    .metric strong{font-size:34px;line-height:1;color:var(--navy);display:block;margin-bottom:8px}
    .metric span{font-size:13px;color:var(--muted)}
    .metric em{display:block;color:#0d8e89;font-size:12px;font-style:normal;margin-top:12px;font-weight:700}
    .matrix{display:grid;grid-template-columns:1.05fr .95fr;gap:20px}
    .matrix-main,.matrix-side{border-radius:var(--radius-lg);overflow:hidden;position:relative}
    .matrix-main{background:var(--navy);color:#fff;padding:36px;min-height:360px}
    .matrix-main:after{content:"";position:absolute;right:-50px;bottom:-100px;width:300px;height:300px;border:40px solid rgba(40,213,209,.13);border-radius:50%}
    .matrix-main p{color:#bdc9dc;max-width:475px}
    .bar-list{display:grid;gap:16px;margin-top:25px;position:relative;z-index:1}
    .bar-item{display:grid;grid-template-columns:94px 1fr 46px;gap:10px;align-items:center;font-size:12px;color:#d4dced}
    .bar-track{height:8px;background:rgba(255,255,255,.12);border-radius:20px;overflow:hidden}
    .bar-track i{height:100%;display:block;background:var(--cyan);border-radius:20px}
    .bar-item:nth-child(2) .bar-track i{background:#8ee7c5}
    .bar-item:nth-child(3) .bar-track i{background:var(--orange)}
    .bar-item:nth-child(4) .bar-track i{background:#9eb8ee}
    .bar-item b{text-align:right;color:#fff}
    .matrix-side{background:#fff;border:1px solid var(--line);padding:30px}
    .matrix-side img{height:155px;width:100%;object-fit:cover;border-radius:16px;margin-bottom:20px}
    .matrix-side p{color:var(--muted);font-size:14px}
    .check-list{padding:0;margin:20px 0 0;list-style:none;display:grid;gap:11px}
    .check-list li{display:flex;gap:10px;align-items:flex-start;color:#465267;font-size:14px}
    .check-list li:before{content:"✓";width:21px;height:21px;flex:0 0 21px;display:grid;place-items:center;background:#e6f8f6;color:#087d79;border-radius:7px;font-size:12px;font-weight:800}
    .split{display:grid;grid-template-columns:.88fr 1.12fr;gap:54px;align-items:center}
    .photo-card{border-radius:var(--radius-xl);overflow:hidden;min-height:430px;position:relative;box-shadow:var(--shadow);background:#dce8ed}
    .photo-card img{width:100%;height:100%;min-height:430px;object-fit:cover}
    .photo-caption{position:absolute;bottom:0;left:0;right:0;padding:28px;color:#fff;background:linear-gradient(transparent,rgba(7,18,40,.9));font-weight:750}
    .feature-list{display:grid;gap:18px;margin-top:25px}
    .feature-item{display:grid;grid-template-columns:42px 1fr;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line)}
    .feature-icon{width:42px;height:42px;border-radius:13px;background:#e8f8f7;color:#0c7779;display:grid;place-items:center;font-weight:800}
    .feature-item h3{font-size:18px;margin:0 0 3px}
    .feature-item p{margin:0;color:var(--muted);font-size:14px}
    .comparison{background:#edf2f7}
    .compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
    .compare-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px}
    .compare-card.highlight{background:var(--navy);color:#fff;border-color:var(--navy)}
    .compare-card p{color:var(--muted)}
    .compare-card.highlight p{color:#c3cee0}
    .compare-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
    .badge{display:inline-flex;padding:5px 9px;border-radius:999px;background:#e8f8f7;color:#0d7779;font-size:11px;font-weight:800}
    .highlight .badge{background:rgba(40,213,209,.16);color:var(--cyan)}
    .compare-stat{display:flex;align-items:end;gap:9px;margin:20px 0}
    .compare-stat strong{font-size:42px;line-height:1}
    .compare-stat span{font-size:12px;color:var(--muted)}
    .highlight .compare-stat span{color:#bfcade}
    .mini-bars{display:grid;gap:12px}
    .mini-bars div{display:grid;grid-template-columns:78px 1fr 34px;gap:9px;align-items:center;font-size:12px}
    .mini-bars i{height:7px;border-radius:9px;background:#dfe7ee;overflow:hidden}
    .mini-bars i:after{content:"";height:100%;display:block;width:75%;background:var(--orange);border-radius:9px}
    .highlight .mini-bars i{background:rgba(255,255,255,.12)}
    .highlight .mini-bars i:after{background:var(--cyan)}
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
    .step{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:24px;position:relative}
    .step-number{width:34px;height:34px;border-radius:11px;background:var(--navy);color:var(--cyan);display:grid;place-items:center;font-weight:800;margin-bottom:23px}
    .step:not(:last-child):after{content:"→";position:absolute;right:-19px;top:32px;color:var(--orange);font-size:23px;font-weight:700;z-index:2}
    .step p{font-size:13px;color:var(--muted);margin:0}
    .scenario-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}
    .scenario-main{min-height:300px;border-radius:var(--radius-xl);padding:34px;color:#fff;background:linear-gradient(135deg,rgba(12,27,56,.96),rgba(19,42,80,.83)),url("/assets/images/coverpic/cover-8.webp") center/cover}
    .scenario-main p{max-width:580px;color:#c5d1e3}
    .scenario-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}
    .scenario-tags span{padding:8px 12px;border:1px solid rgba(255,255,255,.2);border-radius:999px;color:#e7edf5;font-size:12px}
    .scenario-side{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px}
    .scenario-side h3{margin-bottom:16px}
    .scenario-side li{padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
    .scenario-side li:last-child{border:0}
    .quote{display:grid;grid-template-columns:1fr 1fr;gap:20px}
    .quote-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:29px}
    .quote-mark{font-size:40px;color:var(--orange);line-height:.7;font-family:Georgia,serif}
    .quote-card p{font-size:16px;line-height:1.85;margin:18px 0;color:#354257}
    .quote-card small{color:var(--muted)}
    .faq-wrap{max-width:850px;margin:0 auto}
    .accordion-item{border:1px solid var(--line)!important;border-radius:14px!important;overflow:hidden;margin-bottom:12px;background:#fff}
    .accordion-button{font-weight:750;color:var(--ink);background:#fff;box-shadow:none!important;padding:19px 22px}
    .accordion-button:not(.collapsed){color:var(--navy);background:#f4fbfb}
    .accordion-body{color:var(--muted);font-size:14px;padding:0 22px 20px}
    .cta{padding:58px 0;background:var(--navy);color:#fff;position:relative;overflow:hidden}
    .cta:after{content:"";position:absolute;width:300px;height:300px;border:35px solid rgba(40,213,209,.12);border-radius:50%;right:-70px;top:-120px}
    .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;z-index:1}
    .cta p{color:#c1cde0;max-width:610px;margin-bottom:0}
    .cta .btn-primary{background:var(--cyan);color:var(--navy);box-shadow:none}
    .cta .btn-primary:hover{background:#8ee7e1;color:var(--navy)}
    footer{background:#09152c;color:#b6c3d6;padding:54px 0 22px}
    .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:38px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12)}
    footer .brand{color:#fff}
    footer .brand-mark{background:#fff;color:var(--navy)}
    footer p{font-size:13px;max-width:280px;color:#9dabc0}
    footer h3{font-size:14px;color:#fff;letter-spacing:0;margin-bottom:14px}
    footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:13px}
    footer li a{color:#9dabc0}
    footer li a:hover{color:var(--cyan)}
    .copyright{display:flex;flex-wrap:wrap;gap:15px;justify-content:space-between;padding-top:20px;color:#8f9caf;font-size:12px}
    .copyright a{color:#aeb9c9}
    .soft-bg{background:#eef3f8}
    @media(max-width:1100px){
      .nav-shell{gap:14px}.nav-links a{padding:8px 8px;font-size:13px}.command-search{width:150px}
    }
    @media(max-width:900px){
      .hero-grid,.matrix,.split,.scenario-grid{grid-template-columns:1fr}
      .hero-inner{padding:82px 0}.dashboard{max-width:650px;margin:0 auto}
      .metric-grid{grid-template-columns:repeat(2,1fr)}
      .steps{grid-template-columns:repeat(2,1fr)}
      .step:not(:last-child):after{display:none}
      .nav-links{display:none;position:absolute;top:77px;left:0;right:0;padding:14px 24px;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);flex-direction:column;align-items:stretch}
      .nav-links.show{display:flex}.nav-links a{padding:12px 14px}
      .command-search{margin-left:auto}.menu-toggle{display:block}
    }
    @media(max-width:650px){
      .container{padding:0 18px}
      .topbar{height:70px}.nav-shell{gap:9px}.brand{font-size:18px}.brand-mark{width:31px;height:31px}
      .command-search{display:none}.nav-cta{padding:9px 11px;font-size:12px}.menu-toggle{padding:6px 9px}
      .hero-inner{min-height:0;padding:66px 0 72px}.hero-grid{gap:38px}.hero-copy{font-size:15px}
      h1{font-size:40px}.hero-note{gap:15px}.dashboard{transform:none;padding:10px}.dashboard-window{padding:15px;min-height:320px}
      .player-row{grid-template-columns:27px 1fr 58px 57px;gap:7px}.player-name{font-size:12px}
      .section{padding:62px 0}.section-tight{padding:48px 0}.section-head{display:block;margin-bottom:24px}.section-head .text-link{display:inline-block;margin-top:15px}
      .metric-grid,.compare-grid,.quote{grid-template-columns:1fr}.metric{padding:20px}
      .matrix-main,.matrix-side,.scenario-main,.scenario-side,.compare-card,.quote-card{padding:23px}
      .photo-card,.photo-card img{min-height:330px}.steps{grid-template-columns:1fr}
      .cta-inner{display:block}.cta .btn-primary{margin-top:22px}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-grid>div:first-child{grid-column:1/-1}
      .copyright{display:block}.copyright span{display:block;margin-bottom:8px}
    }

/* roulang page: category2 */
:root{
      --ink:#111827;
      --muted:#657083;
      --paper:#f5f7fb;
      --surface:#ffffff;
      --navy:#0c1b38;
      --navy-2:#132a50;
      --cyan:#28d5d1;
      --orange:#ff815b;
      --line:#e3e8f1;
      --soft:#eef3f8;
      --radius-xl:30px;
      --radius-lg:22px;
      --radius-md:15px;
      --shadow:0 18px 55px rgba(22,37,68,.10);
      --shadow-sm:0 8px 26px rgba(22,37,68,.07);
    }
    html{scroll-behavior:smooth}
    *{box-sizing:border-box}
    body{margin:0;color:var(--ink);background:var(--paper);font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;line-height:1.75;font-size:15px}
    a{color:inherit;text-decoration:none;transition:.25s ease}
    a:hover{color:var(--orange)}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(40,213,209,.45);outline-offset:3px}
    .container{max-width:1180px;margin:0 auto;padding:0 24px}
    .topbar{height:78px;display:flex;align-items:center;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(227,232,241,.9);position:sticky;top:0;z-index:20;backdrop-filter:blur(16px)}
    .nav-shell{display:flex;align-items:center;gap:28px;width:100%}
    .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.04em;font-size:21px;white-space:nowrap}
    .brand-mark{width:34px;height:34px;border-radius:12px;background:var(--navy);display:grid;place-items:center;color:var(--cyan);font-size:16px;box-shadow:0 6px 14px rgba(12,27,56,.22)}
    .nav-links{display:flex;align-items:center;gap:4px;flex:1}
    .nav-links a{padding:9px 12px;border-radius:10px;color:#5e6878;font-size:14px;white-space:nowrap}
    .nav-links a:hover,.nav-links a.active{background:#edf7f7;color:var(--navy);font-weight:700}
    .command-search{display:flex;align-items:center;width:200px;height:39px;background:#f4f6fa;border:1px solid var(--line);border-radius:11px;padding:0 12px;color:#8993a4;gap:8px}
    .command-search span{font-size:13px;flex:1}
    .nav-cta,.btn-primary{border:0;background:var(--navy);color:#fff;border-radius:11px;padding:11px 17px;font-weight:700;box-shadow:0 8px 18px rgba(12,27,56,.18)}
    .nav-cta:hover,.btn-primary:hover{background:#1a3969;color:#fff;transform:translateY(-2px)}
    .menu-toggle{display:none;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px}
    .hero{min-height:570px;display:flex;align-items:center;position:relative;overflow:hidden;background:var(--navy);color:#fff;background-image:linear-gradient(90deg,rgba(7,19,42,.96) 6%,rgba(7,19,42,.76) 48%,rgba(7,19,42,.45)),url("/assets/images/backpic/back-2.webp");background-size:cover;background-position:center}
    .hero:after{content:"";position:absolute;width:430px;height:430px;border:1px solid rgba(40,213,209,.25);border-radius:50%;right:-130px;top:-100px;box-shadow:0 0 0 50px rgba(40,213,209,.04),0 0 0 100px rgba(40,213,209,.025)}
    .hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:54px;align-items:center;position:relative;z-index:1}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--cyan);font-size:12px;letter-spacing:.14em;font-weight:800}
    .eyebrow:before{content:"";width:22px;height:2px;background:var(--orange)}
    h1,h2,h3{letter-spacing:-.045em;line-height:1.25}
    h1{font-size:clamp(40px,5vw,68px);margin:18px 0 18px;font-weight:850}
    h2{font-size:clamp(28px,3.2vw,42px);font-weight:850;margin:0}
    .hero-copy{font-size:17px;color:#d4dced;max-width:570px;line-height:1.9}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
    .btn-light{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.24);color:#fff;border-radius:11px;padding:11px 18px;background:rgba(255,255,255,.09);font-weight:700}
    .btn-light:hover{background:#fff;color:var(--navy)}
    .hero-points{display:flex;gap:24px;margin-top:30px;flex-wrap:wrap}
    .hero-points strong{display:block;font-size:22px;color:#fff}
    .hero-points span{font-size:12px;color:#aebbd0}
    .flash-card{background:#fff;color:var(--ink);border-radius:26px;padding:14px;box-shadow:0 25px 70px rgba(0,0,0,.28);transform:rotate(1deg)}
    .flash-image{height:270px;border-radius:18px;overflow:hidden;position:relative;background:#162d55}
    .flash-image img{height:100%;width:100%;object-fit:cover}
    .flash-image:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,18,40,.85),transparent 65%)}
    .flash-badge{position:absolute;top:17px;left:17px;z-index:1;background:var(--orange);color:#fff;padding:6px 10px;border-radius:8px;font-size:12px;font-weight:800}
    .flash-caption{position:absolute;bottom:17px;left:20px;right:20px;z-index:1;color:#fff}
    .flash-caption h3{font-size:25px;margin:0 0 5px}
    .flash-caption p{margin:0;color:#d5ddeb;font-size:13px}
    .flash-body{display:flex;justify-content:space-between;align-items:center;padding:18px 7px 5px;gap:15px}
    .count-label{font-size:12px;color:var(--muted)}
    .countdown{display:flex;gap:5px;margin-top:3px}
    .countdown b{background:#edf7f7;color:#0c7779;border-radius:7px;padding:3px 6px;font-size:16px}
    .section{padding:82px 0}
    .section-tight{padding:58px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px}
    .section-kicker{color:var(--orange);font-size:12px;font-weight:800;letter-spacing:.14em}
    .section-intro{max-width:550px;color:var(--muted);margin:8px 0 0}
    .text-link{color:var(--navy);font-weight:800;font-size:14px;white-space:nowrap}
    .text-link:after{content:" ↗";color:var(--orange)}
    .metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
    .metric{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:25px 22px;position:relative;overflow:hidden}
    .metric:after{content:"";position:absolute;width:70px;height:70px;border-radius:50%;background:#edf9f8;right:-25px;top:-25px}
    .metric strong{font-size:34px;display:block;color:var(--navy);letter-spacing:-.06em}
    .metric span{font-size:13px;color:var(--muted)}
    .metric small{display:block;margin-top:10px;color:#0c7779;font-weight:700}
    .feature-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:stretch}
    .visual-card{border-radius:var(--radius-xl);overflow:hidden;min-height:410px;background:#dce8ed;position:relative;box-shadow:var(--shadow)}
    .visual-card img{width:100%;height:100%;min-height:410px;object-fit:cover}
    .visual-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,18,40,.75),transparent 66%)}
    .visual-label{position:absolute;z-index:1;left:28px;bottom:25px;color:#fff}
    .visual-label strong{font-size:25px;display:block}
    .visual-label span{font-size:13px;color:#ccd8e8}
    .feature-list{display:grid;gap:18px;margin-top:25px}
    .feature-item{display:grid;grid-template-columns:42px 1fr;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line)}
    .feature-icon{width:42px;height:42px;border-radius:13px;background:#e8f8f7;color:#0c7779;display:grid;place-items:center;font-weight:800}
    .feature-item h3{font-size:18px;margin:0 0 3px}
    .feature-item p{margin:0;color:var(--muted);font-size:14px}
    .match-zone{background:var(--navy);color:#fff;border-radius:var(--radius-xl);padding:38px;position:relative;overflow:hidden}
    .match-zone:before{content:"FOOTBALL";position:absolute;right:-20px;top:23px;color:rgba(255,255,255,.04);font-size:90px;font-weight:900;letter-spacing:.08em}
    .match-top{display:flex;justify-content:space-between;align-items:center;gap:20px;position:relative;z-index:1}
    .live-tag{background:#153d50;color:var(--cyan);border:1px solid rgba(40,213,209,.28);padding:7px 11px;border-radius:8px;font-size:12px;font-weight:800}
    .match-date{font-size:13px;color:#aebbd0}
    .teams{display:grid;grid-template-columns:1fr 130px 1fr;align-items:center;text-align:center;gap:20px;margin:40px 0 30px;position:relative;z-index:1}
    .team-name{font-size:22px;font-weight:800}
    .team-note{color:#aebbd0;font-size:12px}
    .score{font-size:48px;font-weight:900;letter-spacing:-.08em}
    .score small{font-size:14px;color:#9eabc0;display:block;letter-spacing:0}
    .match-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid rgba(255,255,255,.14);padding-top:20px;color:#bfccde;font-size:13px;position:relative;z-index:1}
    .matrix{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
    .matrix-main,.matrix-side{border-radius:var(--radius-lg);overflow:hidden;position:relative;min-height:325px}
    .matrix-main{background:var(--navy);color:#fff;padding:34px}
    .matrix-main:after{content:"";position:absolute;right:-40px;bottom:-90px;width:290px;height:290px;border:40px solid rgba(40,213,209,.13);border-radius:50%}
    .matrix-main h3{font-size:27px;max-width:390px;margin:12px 0}
    .matrix-main p{color:#c5d1e1;max-width:420px}
    .matrix-list{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:23px;position:relative;z-index:1}
    .matrix-list span{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);padding:10px 12px;border-radius:10px;font-size:13px}
    .matrix-side{background:#fff;border:1px solid var(--line);padding:27px}
    .matrix-side h3{font-size:22px;margin:0 0 18px}
    .signal{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:14px 0}
    .signal:last-child{border-bottom:0}
    .signal b{font-size:20px;color:var(--navy)}
    .signal span{font-size:12px;color:var(--muted)}
    .timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
    .timeline-item{padding:25px 22px 10px;border-right:1px solid var(--line);position:relative}
    .timeline-item:last-child{border-right:0}
    .timeline-item:before{content:"";width:11px;height:11px;border-radius:50%;background:var(--orange);position:absolute;top:-6px;left:22px;box-shadow:0 0 0 5px var(--paper)}
    .timeline-item time{color:var(--orange);font-weight:800;font-size:13px}
    .timeline-item h3{font-size:18px;margin:10px 0 6px}
    .timeline-item p{color:var(--muted);font-size:13px;margin:0}
    .content-band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .story-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:45px;align-items:center}
    .story-image{border-radius:var(--radius-lg);overflow:hidden;height:350px}
    .story-image img{width:100%;height:100%;object-fit:cover}
    .story-copy p{color:var(--muted);font-size:16px;line-height:1.95}
    .quote{border-left:3px solid var(--cyan);padding:13px 0 13px 18px;color:var(--navy);font-weight:700;margin-top:22px}
    .comparison{display:grid;grid-template-columns:1fr 1fr;gap:18px}
    .compare-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:27px}
    .compare-card.dark{background:var(--navy);color:#fff;border-color:var(--navy)}
    .compare-card h3{font-size:22px;margin:0 0 18px}
    .compare-row{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--line)}
    .dark .compare-row{border-color:rgba(255,255,255,.14)}
    .compare-row span{color:var(--muted);font-size:13px}
    .dark .compare-row span{color:#b4c1d4}
    .compare-row strong{color:#0c7779}
    .dark .compare-row strong{color:var(--cyan)}
    .faq-wrap{max-width:850px;margin:0 auto}
    .accordion-item{border:1px solid var(--line)!important;border-radius:14px!important;margin-bottom:11px;overflow:hidden;background:#fff}
    .accordion-button{font-weight:750;color:var(--navy);background:#fff;padding:19px 21px;box-shadow:none!important}
    .accordion-button:not(.collapsed){background:#edf7f7;color:#0c7779}
    .accordion-body{color:var(--muted);padding:0 21px 20px;line-height:1.85}
    .cta{background:var(--navy);color:#fff;border-radius:var(--radius-xl);padding:42px;display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center;overflow:hidden;position:relative}
    .cta:after{content:"";width:260px;height:260px;border:35px solid rgba(40,213,209,.12);border-radius:50%;position:absolute;right:-60px;bottom:-110px}
    .cta h2{max-width:510px}
    .cta p{color:#c3cfdf;max-width:530px}
    .contact-form{display:grid;grid-template-columns:1fr auto;gap:10px;position:relative;z-index:1}
    .contact-form input{height:48px;border:0;border-radius:11px;padding:0 16px;background:#fff;color:var(--ink)}
    .contact-form button{border:0;border-radius:11px;background:var(--cyan);color:var(--navy);padding:0 20px;font-weight:800}
    .form-note{font-size:12px;color:#96a8c1;margin-top:10px}
    footer{background:#fff;border-top:1px solid var(--line);padding:58px 0 20px}
    .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px}
    footer p{color:var(--muted);font-size:13px;max-width:280px}
    footer h3{font-size:15px;margin:5px 0 14px}
    footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
    footer li{color:var(--muted);font-size:13px}
    footer li a:hover{color:var(--orange)}
    .copyright{border-top:1px solid var(--line);margin-top:40px;padding-top:18px;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;color:#8993a4;font-size:12px}
    .copyright a{color:#657083}
    @media(max-width:1100px){
      .nav-shell{gap:15px}.nav-links a{padding:8px 8px;font-size:13px}.command-search{width:145px}
    }
    @media(max-width:900px){
      .hero-grid,.feature-layout,.story-grid,.matrix,.cta{grid-template-columns:1fr}
      .hero{padding:80px 0}.flash-card{max-width:650px;width:100%;margin:auto}
      .metric-grid{grid-template-columns:repeat(2,1fr)}
      .timeline{grid-template-columns:repeat(2,1fr);border-top:0}
      .timeline-item{border-top:1px solid var(--line);padding-top:23px}
      .timeline-item:nth-child(2){border-right:0}
      .timeline-item:before{top:-6px}
      .footer-grid{grid-template-columns:1.4fr 1fr 1fr}
      .footer-grid>div:last-child{grid-column:2}
    }
    @media(max-width:768px){
      .topbar{height:70px}.menu-toggle{display:block;margin-left:auto}.command-search,.nav-cta{display:none}
      .nav-links{display:none;position:absolute;top:70px;left:0;right:0;padding:12px 24px;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);flex-direction:column;align-items:stretch}
      .nav-links.open{display:flex}.nav-links a{padding:12px 14px}
      .hero-grid{gap:35px}.hero{min-height:auto;padding:74px 0}
      .teams{grid-template-columns:1fr 90px 1fr;gap:8px}.team-name{font-size:17px}.score{font-size:38px}
      .match-zone{padding:25px 20px}.section{padding:64px 0}
      .comparison{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}
      .footer-grid>div:last-child{grid-column:auto}
    }
    @media(max-width:520px){
      .container{padding:0 18px}.brand{font-size:19px}.brand-mark{width:31px;height:31px}
      h1{font-size:39px}.hero-copy{font-size:15px}.hero-points{gap:17px}
      .metric-grid{grid-template-columns:1fr 1fr;gap:10px}.metric{padding:18px 14px}.metric strong{font-size:28px}
      .flash-image{height:220px}.flash-body{align-items:flex-start;flex-direction:column}
      .match-top,.match-bottom{align-items:flex-start;flex-direction:column}.teams{margin:27px 0}
      .matrix-list{grid-template-columns:1fr}.timeline{grid-template-columns:1fr}
      .timeline-item{border-right:0}.story-image{height:260px}.cta{padding:28px 22px}
      .contact-form{grid-template-columns:1fr}.contact-form button{height:47px}
      .footer-grid{grid-template-columns:1fr}.copyright{display:grid}
    }

/* roulang page: category4 */
:root{
      --ink:#111827;--muted:#657083;--paper:#f5f7fb;--surface:#fff;
      --navy:#0c1b38;--navy-2:#132a50;--cyan:#28d5d1;--orange:#ff815b;
      --line:#e3e8f1;--soft:#eef3f8;--radius-xl:30px;--radius-lg:22px;
      --radius-md:15px;--shadow:0 18px 55px rgba(22,37,68,.10);
      --shadow-sm:0 8px 26px rgba(22,37,68,.07)
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;color:var(--ink);background:var(--paper);font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;line-height:1.75;font-size:15px}
    a{color:inherit;text-decoration:none;transition:.25s ease}
    a:hover{color:var(--orange)}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(40,213,209,.45);outline-offset:3px}
    .container{max-width:1180px;margin:0 auto;padding:0 24px}
    .topbar{height:78px;display:flex;align-items:center;background:rgba(255,255,255,.95);border-bottom:1px solid rgba(227,232,241,.9);position:sticky;top:0;z-index:20;backdrop-filter:blur(16px)}
    .nav-shell{display:flex;align-items:center;gap:24px;width:100%}
    .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.04em;font-size:21px;white-space:nowrap}
    .brand-mark{width:34px;height:34px;border-radius:12px;background:var(--navy);display:grid;place-items:center;color:var(--cyan);font-size:16px;box-shadow:0 6px 14px rgba(12,27,56,.22)}
    .nav-links{display:flex;align-items:center;gap:3px;flex:1}
    .nav-links a{padding:9px 11px;border-radius:10px;color:#5e6878;font-size:14px;white-space:nowrap}
    .nav-links a:hover,.nav-links a.active{background:#edf7f7;color:var(--navy);font-weight:700}
    .command-search{display:flex;align-items:center;width:190px;height:39px;background:#f4f6fa;border:1px solid var(--line);border-radius:11px;padding:0 12px;color:#8993a4;gap:8px}
    .command-search span{font-size:13px;flex:1}
    .nav-cta,.btn-primary{border:0;background:var(--navy);color:#fff;border-radius:11px;padding:11px 17px;font-weight:700;box-shadow:0 8px 18px rgba(12,27,56,.18)}
    .nav-cta:hover,.btn-primary:hover{background:#1a3969;color:#fff;transform:translateY(-2px)}
    .menu-toggle{display:none;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px}
    .page-banner{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:76px 0 82px;background-image:linear-gradient(90deg,rgba(7,19,42,.94),rgba(7,19,42,.65)),url("/assets/images/backpic/back-2.webp");background-size:cover;background-position:center}
    .page-banner:after{content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(40,213,209,.24);border-radius:50%;right:-110px;top:-170px;box-shadow:0 0 0 48px rgba(40,213,209,.04),0 0 0 96px rgba(40,213,209,.025)}
    .banner-content{position:relative;z-index:1;max-width:760px}
    .eyebrow,.section-kicker{color:var(--cyan);font-size:12px;letter-spacing:.14em;font-weight:800}
    .eyebrow:before{content:"";display:inline-block;width:22px;height:2px;background:var(--orange);vertical-align:middle;margin-right:9px}
    h1{font-size:clamp(38px,6vw,70px);line-height:1.12;letter-spacing:-.065em;margin:17px 0 18px;font-weight:850}
    h2{font-size:clamp(28px,4vw,43px);line-height:1.2;letter-spacing:-.055em;margin:7px 0 0;font-weight:820}
    h3{font-size:18px;line-height:1.35}
    .banner-content p{color:#d6e0ef;font-size:17px;max-width:680px;margin:0}
    .banner-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
    .btn-light{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:11px;padding:11px 18px;background:rgba(255,255,255,.09);font-weight:700}
    .btn-light:hover{background:#fff;color:var(--navy)}
    .section{padding:78px 0}.section-tight{padding:55px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px}
    .section-kicker{color:var(--orange)}
    .section-intro{max-width:535px;color:var(--muted);margin:8px 0 0}
    .metrics{margin-top:-30px;position:relative;z-index:2}
    .metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
    .metric{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:22px 20px;box-shadow:var(--shadow-sm)}
    .metric strong{display:block;color:var(--navy);font-size:30px;line-height:1.1;letter-spacing:-.05em}
    .metric span{display:block;color:var(--muted);font-size:13px;margin-top:7px}
    .feature-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}
    .visual-card{border-radius:var(--radius-xl);overflow:hidden;min-height:430px;background:#dce8ed;box-shadow:var(--shadow);position:relative}
    .visual-card img{width:100%;height:100%;min-height:430px;object-fit:cover}
    .visual-card figcaption{position:absolute;left:22px;right:22px;bottom:20px;color:#fff;font-weight:700;font-size:19px;text-shadow:0 2px 14px #07132a}
    .feature-list{display:grid;gap:18px}
    .feature-item{display:grid;grid-template-columns:42px 1fr;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line)}
    .feature-icon{width:42px;height:42px;border-radius:13px;background:#e8f8f7;color:#0c7779;display:grid;place-items:center;font-weight:800}
    .feature-item h3{margin:0 0 4px}.feature-item p{margin:0;color:var(--muted);font-size:14px}
    .dark-section{background:var(--navy);color:#fff}
    .dark-section .section-intro{color:#bac8dc}
    .dark-section .section-kicker{color:var(--cyan)}
    .matrix{display:grid;grid-template-columns:1.25fr .75fr;gap:16px}
    .matrix-main,.matrix-side{border-radius:var(--radius-lg);min-height:300px;padding:32px;position:relative;overflow:hidden}
    .matrix-main{background:#142d55}.matrix-side{background:#203d68}
    .matrix-main:after{content:"";position:absolute;right:-70px;bottom:-150px;width:350px;height:350px;border:45px solid rgba(40,213,209,.13);border-radius:50%}
    .matrix h3{font-size:28px;max-width:420px;position:relative;z-index:1}.matrix p{color:#c8d4e5;max-width:470px;position:relative;z-index:1}
    .matrix-list{display:grid;gap:12px;margin-top:26px;position:relative;z-index:1}
    .matrix-list span{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:9px;color:#e7eef8}
    .score{font-size:48px;font-weight:800;color:var(--cyan);line-height:1}
    .score small{font-size:14px;color:#c9d5e5;font-weight:400}
    .scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .scene{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:25px;min-height:188px;transition:.25s}
    .scene:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm);border-color:var(--cyan)}
    .tag{display:inline-flex;background:#fff1ed;color:#c45439;border-radius:20px;padding:4px 10px;font-size:12px;font-weight:700}
    .scene h3{margin:18px 0 7px}.scene p{color:var(--muted);font-size:14px;margin:0}
    .timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);padding-top:24px}
    .step{padding:0 22px 0 0;position:relative}.step:not(:last-child){border-right:1px solid var(--line);margin-right:22px}
    .step-num{color:var(--orange);font-weight:850;font-size:13px;letter-spacing:.1em}.step h3{margin:10px 0 6px}.step p{color:var(--muted);font-size:14px;margin:0}
    .comparison{display:grid;grid-template-columns:1fr 1fr;gap:18px}
    .compare-card{border-radius:var(--radius-lg);padding:29px;background:var(--surface);border:1px solid var(--line)}
    .compare-card.highlight{background:#eaf9f8;border-color:#b8eeeb}
    .compare-card h3{margin-top:0}.compare-card ul{padding:0;margin:20px 0 0;list-style:none}
    .compare-card li{padding:10px 0;border-bottom:1px solid var(--line);color:var(--muted)}
    .compare-card li:before{content:"✓";color:#128b8b;font-weight:800;margin-right:10px}
    .quote-band{background:#fff;border-left:5px solid var(--orange);border-radius:0 var(--radius-lg) var(--radius-lg) 0;padding:28px 32px;box-shadow:var(--shadow-sm);font-size:20px;font-weight:700;letter-spacing:-.02em}
    .quote-band span{display:block;color:var(--muted);font-size:13px;font-weight:400;margin-top:10px}
    .faq-wrap{max-width:900px;margin:auto}.accordion-item{border:1px solid var(--line)!important;border-radius:13px!important;margin-bottom:11px;overflow:hidden;background:#fff}
    .accordion-button{font-weight:750;color:var(--ink);background:#fff;padding:18px 20px;box-shadow:none!important}
    .accordion-button:not(.collapsed){color:var(--navy);background:#edf8f7}.accordion-body{color:var(--muted);padding:0 20px 19px}
    .cta{background:var(--orange);color:#fff;border-radius:var(--radius-xl);padding:42px 48px;display:flex;align-items:center;justify-content:space-between;gap:25px}
    .cta h2{font-size:34px;margin:0}.cta p{margin:8px 0 0;color:#fff1ed}.cta .btn-light{background:#fff;color:#b64830;border:0}
    footer{background:#09152c;color:#c5d0df;padding:52px 0 23px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
    footer .brand{color:#fff}footer .brand-mark{background:#fff;color:var(--navy)}footer p{font-size:13px;max-width:280px;color:#9cabc0}
    footer h3{color:#fff;font-size:14px;margin:0 0 13px}footer ul{list-style:none;padding:0;margin:0;display:grid;gap:7px;font-size:13px}footer a{color:#aebbd0}footer a:hover{color:var(--cyan)}
    .copyright{border-top:1px solid rgba(255,255,255,.13);margin-top:38px;padding-top:18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:#8d9bb0}
    @media(max-width:1100px){.nav-links a{padding:8px 7px;font-size:13px}.command-search{width:145px}.nav-shell{gap:13px}}
    @media(max-width:900px){.nav-links,.command-search{display:none}.menu-toggle{display:block;margin-left:auto}.nav-shell.open .nav-links{display:flex;position:absolute;left:0;right:0;top:77px;background:#fff;border-bottom:1px solid var(--line);padding:12px 24px;overflow-x:auto}.feature-layout,.matrix{grid-template-columns:1fr}.metric-grid{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:650px){.container{padding:0 18px}.page-banner{padding:58px 0 66px}.section{padding:58px 0}.section-head{display:block}.section-head .section-intro{margin-top:12px}.scene-grid,.comparison{grid-template-columns:1fr}.timeline{grid-template-columns:1fr;gap:24px}.step:not(:last-child){border-right:0;border-bottom:1px solid var(--line);padding-bottom:20px;margin-right:0}.cta{display:block;padding:30px 25px}.cta h2{font-size:28px}.cta .btn-light{margin-top:20px}.footer-grid{grid-template-columns:1fr 1fr}.copyright{display:block}.copyright span{display:block;margin-bottom:8px}}
    @media(max-width:420px){.metric-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.banner-actions a{width:100%}}

/* roulang page: category5 */
:root{
      --ink:#111827;
      --muted:#657083;
      --paper:#f5f7fb;
      --surface:#fff;
      --navy:#0c1b38;
      --navy-2:#132a50;
      --cyan:#28d5d1;
      --orange:#ff815b;
      --line:#e3e8f1;
      --soft:#eef3f8;
      --radius-xl:30px;
      --radius-lg:22px;
      --radius-md:15px;
      --shadow:0 18px 55px rgba(22,37,68,.10);
      --shadow-sm:0 8px 26px rgba(22,37,68,.07);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;color:var(--ink);background:var(--paper);font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-size:15px;line-height:1.75}
    a{color:inherit;text-decoration:none;transition:.25s ease}
    a:hover{color:var(--orange)}
    img{display:block;max-width:100%}
    button,input{font:inherit}
    button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(40,213,209,.45);outline-offset:3px}
    .container{width:100%;max-width:1180px;margin:0 auto;padding:0 24px}
    .topbar{height:78px;display:flex;align-items:center;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(227,232,241,.9);position:sticky;top:0;z-index:20;backdrop-filter:blur(16px)}
    .nav-shell{display:flex;align-items:center;gap:25px;width:100%}
    .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.04em;font-size:21px;white-space:nowrap}
    .brand-mark{width:34px;height:34px;border-radius:12px;background:var(--navy);display:grid;place-items:center;color:var(--cyan);font-size:16px;box-shadow:0 6px 14px rgba(12,27,56,.22)}
    .nav-links{display:flex;align-items:center;gap:3px;flex:1}
    .nav-links a{padding:9px 11px;border-radius:10px;color:#5e6878;font-size:14px;white-space:nowrap}
    .nav-links a:hover,.nav-links a.active{background:#edf7f7;color:var(--navy);font-weight:700}
    .command-search{display:flex;align-items:center;width:188px;height:39px;background:#f4f6fa;border:1px solid var(--line);border-radius:11px;padding:0 12px;color:#8993a4;gap:8px}
    .command-search span{font-size:13px;flex:1}
    .command-search kbd{font-size:11px;color:#9aa4b3;background:#fff;border:1px solid var(--line);border-radius:5px;padding:1px 5px}
    .nav-cta,.btn-primary{border:0;background:var(--navy);color:#fff;border-radius:11px;padding:11px 17px;font-weight:700;box-shadow:0 8px 18px rgba(12,27,56,.18)}
    .nav-cta:hover,.btn-primary:hover{background:#1a3969;color:#fff;transform:translateY(-2px)}
    .menu-toggle{display:none;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px;color:var(--navy)}
    .hero-inner{min-height:570px;display:flex;align-items:center;position:relative;overflow:hidden;background:var(--navy);color:#fff;background-image:linear-gradient(90deg,rgba(7,19,42,.96) 7%,rgba(7,19,42,.78) 48%,rgba(7,19,42,.34)),url("/assets/images/backpic/back-2.webp");background-size:cover;background-position:center}
    .hero-inner:after{content:"";position:absolute;width:410px;height:410px;border:1px solid rgba(40,213,209,.26);border-radius:50%;right:-110px;top:-105px;box-shadow:0 0 0 45px rgba(40,213,209,.04),0 0 0 90px rgba(40,213,209,.025)}
    .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center;position:relative;z-index:1}
    .eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--cyan);font-size:12px;letter-spacing:.14em;font-weight:800}
    .eyebrow:before,.section-kicker:before{content:"";width:22px;height:2px;background:var(--orange)}
    h1,h2,h3{letter-spacing:-.045em;line-height:1.22}
    h1{font-size:clamp(40px,5vw,67px);max-width:640px;margin:18px 0 20px}
    .hero-copy{font-size:17px;color:#d4dced;max-width:595px;line-height:1.9;margin:0}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
    .btn-light{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.24);color:#fff;border-radius:11px;padding:11px 18px;background:rgba(255,255,255,.09);font-weight:700}
    .btn-light:hover{background:#fff;color:var(--navy)}
    .hot-badge{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,129,91,.45);background:rgba(255,129,91,.13);color:#ffd3c6;border-radius:999px;padding:6px 11px;font-size:12px;font-weight:700}
    .poster-frame{padding:13px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:27px;box-shadow:0 20px 80px rgba(0,0,0,.28);transform:rotate(1.5deg)}
    .poster{height:385px;border-radius:18px;overflow:hidden;position:relative;background:url("/assets/images/coverpic/cover-8.webp") center/cover}
    .poster:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,18,40,.9),transparent 62%)}
    .poster-top,.poster-bottom{position:absolute;z-index:1;left:22px;right:22px;display:flex;justify-content:space-between;align-items:center}
    .poster-top{top:19px}.poster-bottom{bottom:21px;align-items:end}
    .poster-title{font-size:29px;font-weight:800;line-height:1.2;max-width:280px}
    .poster-meta{font-size:12px;color:#c8d3e4;margin-top:7px}
    .live-dot{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#fff}
    .live-dot:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px rgba(255,129,91,.18)}
    .section{padding:82px 0}
    .section-tight{padding:58px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px}
    .section-head h2{font-size:clamp(28px,3vw,42px);margin:9px 0 0}
    .section-intro{max-width:520px;color:var(--muted);margin:8px 0 0}
    .text-link{color:var(--navy);font-weight:800;font-size:14px;white-space:nowrap}
    .text-link:after{content:" ↗";color:var(--orange)}
    .metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
    .metric{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:23px 21px;box-shadow:var(--shadow-sm)}
    .metric strong{display:block;color:var(--navy);font-size:32px;letter-spacing:-.06em}
    .metric span{color:var(--muted);font-size:13px}
    .metric small{display:block;color:#159b98;margin-top:8px;font-weight:700}
    .dark-band{background:var(--navy);color:#fff}
    .dark-band .section-intro{color:#aebbd0}
    .service-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:26px;align-items:stretch}
    .service-lead{border-radius:var(--radius-xl);min-height:390px;padding:34px;background:var(--navy-2) url("/assets/images/coverpic/cover-9.webp") center/cover;position:relative;overflow:hidden}
    .service-lead:after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(12,27,56,.9),rgba(12,27,56,.38))}
    .service-lead>*{position:relative;z-index:1}
    .service-lead h2{font-size:34px;max-width:340px;margin:16px 0}
    .service-lead p{color:#c7d3e6;max-width:350px}
    .service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
    .service-card{background:#fff;color:var(--ink);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:23px;transition:.25s ease}
    .service-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
    .service-icon{width:39px;height:39px;border-radius:12px;background:#e8f8f7;color:#0b7778;display:grid;place-items:center;font-weight:800;margin-bottom:17px}
    .service-card h3{font-size:18px;margin:0 0 7px}.service-card p{font-size:13px;color:var(--muted);margin:0}
    .split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
    .split img{width:100%;height:410px;object-fit:cover;border-radius:var(--radius-xl);box-shadow:var(--shadow)}
    .feature-list{display:grid;gap:18px;margin-top:25px}
    .feature-item{display:grid;grid-template-columns:42px 1fr;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line)}
    .feature-icon{width:42px;height:42px;border-radius:13px;background:#e8f8f7;color:#0c7779;display:grid;place-items:center;font-weight:800}
    .feature-item h3{font-size:18px;margin:0 0 3px}.feature-item p{margin:0;color:var(--muted);font-size:14px}
    .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
    .flow:before{content:"";position:absolute;top:31px;left:9%;right:9%;height:1px;background:#cbd9e7}
    .flow-step{position:relative;text-align:center;padding:0 15px}
    .flow-number{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;background:#fff;border:7px solid #e7f6f5;color:var(--navy);font-size:18px;font-weight:800;box-shadow:0 6px 18px rgba(12,27,56,.08)}
    .flow-step h3{font-size:17px;margin:0 0 7px}.flow-step p{font-size:13px;color:var(--muted);margin:0}
    .compare-layout{display:grid;grid-template-columns:1.08fr .92fr;gap:24px}
    .compare-panel,.schedule-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-sm)}
    .compare-panel h2,.schedule-panel h2{font-size:27px;margin:0 0 9px}
    .compare-panel>p,.schedule-panel>p{color:var(--muted);margin:0 0 22px}
    .compare-row{display:grid;grid-template-columns:1.25fr .9fr .9fr;gap:10px;padding:15px 0;border-bottom:1px solid var(--line);font-size:14px}
    .compare-row:first-of-type{background:#f4f9fa;border-radius:10px;padding:11px 10px;color:var(--navy);font-weight:800;border:0}
    .compare-row span:not(:first-child){text-align:right;color:#237f80;font-weight:700}
    .schedule-item{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}
    .schedule-item:last-child{border-bottom:0}
    .schedule-time{color:var(--orange);font-weight:800;font-size:13px;white-space:nowrap}
    .schedule-item strong{display:block;font-size:15px}.schedule-item small{color:var(--muted)}
    .tag{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;background:#eef7f7;color:#177c7c;font-size:11px;font-weight:800;white-space:nowrap}
    .insight-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
    .insight-main{min-height:350px;border-radius:var(--radius-xl);overflow:hidden;position:relative;background:url("/assets/images/coverpic/cover-10.webp") center/cover;color:#fff;padding:31px;display:flex;align-items:end}
    .insight-main:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,18,40,.92),rgba(7,18,40,.08))}
    .insight-main div{position:relative;z-index:1}.insight-main h2{font-size:31px;max-width:480px;margin:11px 0}.insight-main p{color:#d8e0ed;max-width:520px;margin:0}
    .insight-side{display:grid;gap:14px}
    .insight-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}
    .insight-card h3{font-size:18px;margin:11px 0 6px}.insight-card p{font-size:13px;color:var(--muted);margin:0}
    .quote{background:#e9f8f7;border-radius:var(--radius-xl);padding:33px 38px;display:flex;align-items:center;gap:28px}
    .quote-mark{font-size:60px;color:#65c9c3;font-family:Georgia;line-height:1}
    .quote p{font-size:21px;color:var(--navy);font-weight:700;line-height:1.55;margin:0}.quote small{display:block;color:var(--muted);font-size:13px;margin-top:9px}
    .faq-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:30px;align-items:start}
    .faq-grid h2{font-size:35px;margin:10px 0}.faq-grid>div>p{color:var(--muted)}
    .accordion-item{border:1px solid var(--line)!important;border-radius:13px!important;overflow:hidden;margin-bottom:10px;background:#fff}
    .accordion-button{font-weight:700;color:var(--navy);background:#fff;padding:18px 20px;box-shadow:none!important}
    .accordion-button:not(.collapsed){color:var(--navy);background:#eef8f7}
    .accordion-body{color:var(--muted);font-size:14px;padding:0 20px 19px;background:#eef8f7}
    .cta{padding:55px 0;background:linear-gradient(105deg,var(--navy),#193d6c);color:#fff}
    .cta-box{display:flex;justify-content:space-between;align-items:center;gap:30px}
    .cta h2{font-size:34px;margin:0 0 9px}.cta p{color:#c8d5e7;margin:0;max-width:650px}
    .cta .btn-primary{background:var(--cyan);color:var(--navy);box-shadow:none}.cta .btn-primary:hover{background:#7be8e3;color:var(--navy)}
    footer{background:#08152d;color:#dce5f1;padding:56px 0 22px}
    footer .brand{color:#fff}footer p{color:#9eacc1;font-size:13px;max-width:280px}
    .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px}
    footer h3{font-size:14px;color:#fff;margin:4px 0 15px;letter-spacing:0}
    footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
    footer li a{color:#9eacc1;font-size:13px}footer li a:hover{color:var(--cyan)}
    .copyright{border-top:1px solid rgba(255,255,255,.12);margin-top:35px;padding-top:18px;display:flex;flex-wrap:wrap;gap:10px 25px;color:#8493aa;font-size:12px}
    .copyright a{color:#b4c1d2}.copyright a:hover{color:var(--cyan)}
    @media(max-width:1100px){.nav-shell{gap:13px}.nav-links a{padding:8px 7px;font-size:13px}.command-search{width:150px}.hero-grid{gap:35px}}
    @media(max-width:900px){.nav-links{position:absolute;display:none;left:20px;right:20px;top:70px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.nav-links.show{display:flex}.nav-links a{padding:12px 14px}.command-search{display:none}.menu-toggle{display:block;margin-left:auto}.nav-cta{display:none}.hero-grid,.service-layout,.split,.compare-layout,.insight-grid,.faq-grid{grid-template-columns:1fr}.hero-inner{padding:75px 0}.poster-frame{max-width:550px;margin:0 auto}.service-lead{min-height:300px}.metrics{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:600px){.container{padding:0 18px}.topbar{height:70px}.brand{font-size:19px}.hero-inner{min-height:auto;padding:66px 0}.hero-copy{font-size:15px}.poster{height:330px}.poster-title{font-size:24px}.section{padding:60px 0}.section-tight{padding:43px 0}.section-head{display:block}.section-head .text-link{display:inline-block;margin-top:14px}.metrics,.service-grid{grid-template-columns:1fr}.metric strong{font-size:28px}.flow{grid-template-columns:1fr 1fr;gap:29px 5px}.flow:before{display:none}.flow-step{padding:0 5px}.flow-number{width:55px;height:55px}.compare-panel,.schedule-panel{padding:20px 17px}.compare-row{font-size:12px;grid-template-columns:1.1fr .9fr .9fr}.insight-main{min-height:310px;padding:24px}.insight-main h2{font-size:26px}.quote{display:block;padding:25px}.quote-mark{font-size:43px}.quote p{font-size:18px}.cta-box{display:block}.cta h2{font-size:28px}.cta .btn-primary{display:inline-flex;margin-top:22px}.footer-grid{grid-template-columns:1fr 1fr;gap:27px 18px}.copyright{display:block}.copyright span{display:block;margin-bottom:8px}}

/* roulang page: category6 */
:root{
      --ink:#111827;
      --muted:#657083;
      --paper:#f5f7fb;
      --surface:#ffffff;
      --navy:#0c1b38;
      --navy-2:#132a50;
      --cyan:#28d5d1;
      --orange:#ff815b;
      --line:#e3e8f1;
      --soft:#eef3f8;
      --radius-xl:30px;
      --radius-lg:22px;
      --radius-md:15px;
      --shadow:0 18px 55px rgba(22,37,68,.10);
      --shadow-sm:0 8px 26px rgba(22,37,68,.07);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;color:var(--ink);background:var(--paper);font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;line-height:1.75;font-size:15px}
    a{color:inherit;text-decoration:none;transition:.25s ease}
    a:hover{color:var(--orange)}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(40,213,209,.45);outline-offset:3px}
    .container{max-width:1180px;margin:0 auto;padding:0 24px}
    .topbar{height:78px;display:flex;align-items:center;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(227,232,241,.9);position:sticky;top:0;z-index:20;backdrop-filter:blur(16px)}
    .nav-shell{display:flex;align-items:center;gap:28px;width:100%}
    .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.04em;font-size:21px;white-space:nowrap}
    .brand-mark{width:34px;height:34px;border-radius:12px;background:var(--navy);display:grid;place-items:center;color:var(--cyan);font-size:16px;box-shadow:0 6px 14px rgba(12,27,56,.22)}
    .nav-links{display:flex;align-items:center;gap:4px;flex:1}
    .nav-links a{padding:9px 12px;border-radius:10px;color:#5e6878;font-size:14px;white-space:nowrap}
    .nav-links a:hover,.nav-links a.active{background:#edf7f7;color:var(--navy);font-weight:700}
    .command-search{display:flex;align-items:center;width:200px;height:39px;background:#f4f6fa;border:1px solid var(--line);border-radius:11px;padding:0 12px;color:#8993a4;gap:8px}
    .command-search span{font-size:13px;flex:1}
    .nav-cta,.btn-primary{border:0;background:var(--navy);color:#fff;border-radius:11px;padding:11px 17px;font-weight:700;box-shadow:0 8px 18px rgba(12,27,56,.18)}
    .nav-cta:hover,.btn-primary:hover{background:#1a3969;color:#fff;transform:translateY(-2px)}
    .menu-toggle{display:none;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px}
    .page-banner{position:relative;min-height:430px;display:flex;align-items:center;color:#fff;overflow:hidden;background:var(--navy);background-image:linear-gradient(90deg,rgba(7,19,42,.96),rgba(7,19,42,.69)),url("/assets/images/backpic/back-3.webp");background-size:cover;background-position:center}
    .page-banner:before{content:"";position:absolute;width:500px;height:500px;border:1px solid rgba(40,213,209,.27);border-radius:50%;right:-140px;top:-180px;box-shadow:0 0 0 60px rgba(40,213,209,.04),0 0 0 120px rgba(40,213,209,.025)}
    .banner-inner{position:relative;z-index:1;max-width:760px}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--cyan);font-size:12px;letter-spacing:.14em;font-weight:800;text-transform:uppercase}
    .eyebrow:before{content:"";width:22px;height:2px;background:var(--orange)}
    h1{font-size:clamp(38px,5vw,66px);line-height:1.12;letter-spacing:-.06em;margin:18px 0 20px;font-weight:850}
    h2{font-size:clamp(28px,3vw,42px);line-height:1.2;letter-spacing:-.05em;margin:0 0 12px}
    h3{letter-spacing:-.03em}
    .banner-copy{color:#d6e0ef;max-width:690px;font-size:17px;line-height:1.9;margin:0}
    .banner-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
    .btn-light{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.24);color:#fff;border-radius:11px;padding:11px 18px;background:rgba(255,255,255,.09);font-weight:700}
    .btn-light:hover{background:#fff;color:var(--navy)}
    .section{padding:82px 0}
    .section-tight{padding:58px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px}
    .section-kicker{color:var(--orange);font-size:12px;font-weight:800;letter-spacing:.14em}
    .section-intro{max-width:570px;color:var(--muted);margin:8px 0 0}
    .text-link{color:var(--navy);font-weight:800;font-size:14px;white-space:nowrap}
    .text-link:after{content:" ↗";color:var(--orange)}
    .metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
    .metric{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:23px;box-shadow:var(--shadow-sm)}
    .metric strong{display:block;color:var(--navy);font-size:31px;line-height:1;margin-bottom:8px}
    .metric span{color:var(--muted);font-size:13px}
    .metric em{font-style:normal;color:var(--orange);font-size:12px;display:block;margin-top:10px}
    .feature-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:stretch}
    .visual-card{border-radius:var(--radius-xl);overflow:hidden;min-height:420px;background:#dce8ed;position:relative;box-shadow:var(--shadow)}
    .visual-card img{width:100%;height:100%;min-height:420px;object-fit:cover}
    .visual-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,18,40,.8),transparent 62%)}
    .visual-caption{position:absolute;z-index:1;left:28px;right:28px;bottom:25px;color:#fff}
    .visual-caption small{color:var(--cyan);font-weight:800}
    .visual-caption h3{font-size:25px;margin:8px 0 0}
    .feature-list{display:grid;gap:17px}
    .feature-item{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:0 0 17px;border-bottom:1px solid var(--line)}
    .feature-icon{width:44px;height:44px;border-radius:13px;background:#e8f8f7;color:#0c7779;display:grid;place-items:center;font-weight:800}
    .feature-item h3{font-size:18px;margin:0 0 3px}
    .feature-item p{margin:0;color:var(--muted);font-size:14px}
    .dark-panel{background:var(--navy);color:#fff;border-radius:var(--radius-xl);padding:40px;position:relative;overflow:hidden}
    .dark-panel:after{content:"";position:absolute;right:-90px;bottom:-170px;width:380px;height:380px;border:65px solid rgba(40,213,209,.12);border-radius:50%}
    .dark-panel p{color:#c6d3e5;max-width:680px}
    .topic-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:17px;margin-top:28px;position:relative;z-index:1}
    .topic-box{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-md);padding:22px}
    .topic-box strong{font-size:25px;color:var(--cyan);display:block}
    .topic-box span{font-size:13px;color:#ced9e9}
    .story-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:18px}
    .story-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
    .story-card img{height:220px;width:100%;object-fit:cover}
    .story-card.large img{height:300px}
    .story-body{padding:23px}
    .story-body h3{margin:10px 0 8px;font-size:22px}
    .story-body p{color:var(--muted);margin:0;font-size:14px}
    .tag{display:inline-flex;align-items:center;padding:5px 9px;border-radius:99px;background:#edf7f7;color:#147276;font-size:12px;font-weight:800}
    .side-stack{display:grid;gap:18px}
    .mini-story{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px}
    .mini-story h3{font-size:18px;margin:10px 0 6px}
    .mini-story p{color:var(--muted);font-size:13px;margin:0}
    .timeline{position:relative;max-width:850px;margin:10px auto 0;padding-left:32px}
    .timeline:before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:#c9e5e5}
    .timeline-item{position:relative;padding:0 0 28px}
    .timeline-item:before{content:"";position:absolute;left:-31px;top:7px;width:16px;height:16px;border-radius:50%;background:var(--cyan);border:4px solid var(--paper);box-shadow:0 0 0 1px #9edbd9}
    .timeline-item time{font-size:12px;color:var(--orange);font-weight:800}
    .timeline-item h3{font-size:19px;margin:4px 0}
    .timeline-item p{color:var(--muted);margin:0;font-size:14px}
    .quote-section{background:#eaf4f5}
    .quote-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:35px;align-items:center}
    .quote-mark{font-size:110px;color:var(--cyan);line-height:.6;font-family:Georgia,serif}
    blockquote{font-size:25px;line-height:1.55;letter-spacing:-.04em;margin:0;color:var(--navy);font-weight:700}
    .quote-source{color:var(--muted);margin-top:16px;font-size:14px}
    .faq-list{max-width:850px;margin:auto}
    .accordion-item{border:1px solid var(--line)!important;background:var(--surface);border-radius:14px!important;margin-bottom:10px;overflow:hidden}
    .accordion-button{font-weight:700;color:var(--navy);background:#fff;padding:20px 22px}
    .accordion-button:not(.collapsed){color:var(--navy);background:#edf7f7;box-shadow:none}
    .accordion-button:focus{box-shadow:0 0 0 3px rgba(40,213,209,.2)}
    .accordion-body{color:var(--muted);padding:0 22px 20px;background:#fff}
    .cta{background:var(--orange);border-radius:var(--radius-xl);padding:42px 46px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:25px}
    .cta h2{margin:0 0 8px;font-size:34px}
    .cta p{margin:0;color:#fff2ed;max-width:650px}
    .cta .btn-light{background:#fff;color:#a9462e;border-color:#fff}
    .cta .btn-light:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
    .contact-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-sm)}
    .form-control{border:1px solid var(--line);border-radius:11px;padding:12px 14px}
    .form-control:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(40,213,209,.13)}
    footer{background:#09162f;color:#cad5e4;padding:58px 0 24px}
    footer .brand{color:#fff}
    footer .brand-mark{background:#fff;color:#0c1b38}
    footer p{color:#93a4bd;max-width:280px;font-size:13px}
    .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px;padding-bottom:35px}
    footer h3{color:#fff;font-size:15px;margin:2px 0 16px}
    footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:13px}
    footer li a{color:#9eacc0}
    footer li a:hover{color:var(--cyan)}
    .copyright{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;color:#8293ad;font-size:12px}
    .copyright a{color:#b8c6d8}
    @media(max-width:1100px){
      .nav-shell{gap:14px}.nav-links a{padding:8px 7px;font-size:13px}.command-search{width:150px}
    }
    @media(max-width:900px){
      .nav-links{display:none;position:absolute;left:18px;right:18px;top:70px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}
      .nav-links.show{display:flex}.nav-links a{padding:11px 14px}.menu-toggle{display:block;margin-left:auto}.command-search{display:none}
      .feature-layout,.story-grid,.quote-layout{grid-template-columns:1fr}.metric-grid{grid-template-columns:repeat(2,1fr)}
      .visual-card{min-height:350px}.visual-card img{min-height:350px}
    }
    @media(max-width:600px){
      .container{padding:0 17px}.topbar{height:70px}.brand{font-size:19px}
      .nav-cta{padding:9px 12px;font-size:13px}.page-banner{min-height:520px}.banner-copy{font-size:15px}
      .section{padding:60px 0}.section-head{display:block}.section-head .text-link{display:inline-block;margin-top:14px}
      .metric-grid{grid-template-columns:1fr 1fr;gap:10px}.metric{padding:17px}.metric strong{font-size:25px}
      .dark-panel{padding:27px 22px}.topic-grid{grid-template-columns:1fr}
      .story-card.large img,.story-card img{height:205px}.story-body{padding:19px}
      .cta{display:block;padding:30px 24px}.cta h2{font-size:28px}.cta .btn-light{margin-top:23px}
      .footer-grid{grid-template-columns:1fr 1fr;gap:26px}.copyright{display:block}.copyright span{display:block;margin-bottom:7px}
    }

/* roulang page: category1 */
:root{
      --ink:#111827;
      --muted:#657083;
      --paper:#f5f7fb;
      --surface:#fff;
      --navy:#0c1b38;
      --navy-2:#132a50;
      --cyan:#28d5d1;
      --orange:#ff815b;
      --line:#e3e8f1;
      --soft:#eef3f8;
      --radius-xl:30px;
      --radius-lg:22px;
      --radius-md:15px;
      --shadow:0 18px 55px rgba(22,37,68,.10);
      --shadow-sm:0 8px 26px rgba(22,37,68,.07);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;color:var(--ink);background:var(--paper);font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;line-height:1.75;font-size:15px}
    a{color:inherit;text-decoration:none;transition:.25s ease}
    a:hover{color:var(--orange)}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(40,213,209,.45);outline-offset:3px}
    .container{max-width:1180px;margin:0 auto;padding:0 24px}
    .topbar{height:78px;display:flex;align-items:center;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(227,232,241,.9);position:sticky;top:0;z-index:20;backdrop-filter:blur(16px)}
    .nav-shell{display:flex;align-items:center;gap:28px;width:100%}
    .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.04em;font-size:21px;white-space:nowrap}
    .brand-mark{width:34px;height:34px;border-radius:12px;background:var(--navy);display:grid;place-items:center;color:var(--cyan);font-size:16px;box-shadow:0 6px 14px rgba(12,27,56,.22)}
    .nav-links{display:flex;align-items:center;gap:4px;flex:1}
    .nav-links a{padding:9px 12px;border-radius:10px;color:#5e6878;font-size:14px;white-space:nowrap}
    .nav-links a:hover,.nav-links a.active{background:#edf7f7;color:var(--navy);font-weight:700}
    .command-search{display:flex;align-items:center;width:200px;height:39px;background:#f4f6fa;border:1px solid var(--line);border-radius:11px;padding:0 12px;color:#8993a4;gap:8px}
    .command-search span{font-size:13px;flex:1}
    .nav-cta,.btn-primary{border:0;background:var(--navy);color:#fff;border-radius:11px;padding:11px 17px;font-weight:700;box-shadow:0 8px 18px rgba(12,27,56,.18)}
    .nav-cta:hover,.btn-primary:hover{background:#1a3969;color:#fff;transform:translateY(-2px)}
    .menu-toggle{display:none;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px}
    .hero-inner{position:relative;min-height:620px;display:flex;align-items:center;background:var(--navy);color:#fff;overflow:hidden}
    .hero-inner:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,19,42,.96) 6%,rgba(7,19,42,.76) 48%,rgba(7,19,42,.35)),url("/assets/images/backpic/back-2.webp") center/cover}
    .hero-inner:after{content:"";position:absolute;width:450px;height:450px;border:1px solid rgba(40,213,209,.25);border-radius:50%;right:-150px;top:-120px;box-shadow:0 0 0 50px rgba(40,213,209,.04),0 0 0 105px rgba(40,213,209,.025)}
    .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.05fr;gap:58px;align-items:center;width:100%}
    .eyebrow,.section-kicker{color:var(--orange);font-size:12px;font-weight:800;letter-spacing:.14em}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--cyan)}
    .eyebrow:before{content:"";width:22px;height:2px;background:var(--orange)}
    h1,h2,h3{letter-spacing:-.045em;line-height:1.2}
    h1{font-size:clamp(42px,5vw,68px);margin:18px 0 20px;max-width:640px}
    h2{font-size:clamp(28px,3.2vw,43px);margin:10px 0}
    h3{font-size:19px;margin:0 0 10px}
    .hero-copy{font-size:17px;color:#d4dced;max-width:580px;line-height:1.9}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
    .btn-light{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.24);color:#fff;border-radius:11px;padding:11px 18px;background:rgba(255,255,255,.09);font-weight:700}
    .btn-light:hover{background:#fff;color:var(--navy)}
    .video-panel{position:relative;border:1px solid rgba(255,255,255,.22);padding:14px;border-radius:27px;background:rgba(255,255,255,.1);box-shadow:0 25px 80px rgba(0,0,0,.28);transform:rotate(1deg)}
    .video-frame{height:385px;border-radius:18px;overflow:hidden;position:relative;background:url("/assets/images/coverpic/cover-4.webp") center/cover}
    .video-frame:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,18,40,.92),rgba(7,18,40,.08) 68%)}
    .video-label,.video-info{position:absolute;z-index:1;left:22px;right:22px}
    .video-label{top:20px;display:flex;justify-content:space-between;font-size:12px;color:#dce7f5}
    .video-info{bottom:23px}
    .video-info strong{display:block;font-size:26px;line-height:1.25}
    .play-button{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);width:66px;height:66px;border:0;border-radius:50%;background:var(--cyan);color:var(--navy);font-size:23px;box-shadow:0 0 0 12px rgba(40,213,209,.16);transition:.25s}
    .play-button:hover{transform:translate(-50%,-50%) scale(1.08);background:#fff}
    .section{padding:82px 0}
    .section-tight{padding:60px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px}
    .section-intro{max-width:560px;color:var(--muted);margin:8px 0 0}
    .text-link{color:var(--navy);font-weight:800;font-size:14px;white-space:nowrap}
    .text-link:after{content:" ↗";color:var(--orange)}
    .metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
    .metric{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:25px 23px;box-shadow:var(--shadow-sm)}
    .metric strong{display:block;font-size:34px;color:var(--navy);letter-spacing:-.06em}
    .metric span{color:var(--muted);font-size:13px}
    .metric small{display:block;color:#1e9f9c;margin-top:9px}
    .split{display:grid;grid-template-columns:.86fr 1.14fr;gap:54px;align-items:center}
    .image-card{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow);min-height:420px}
    .image-card img{width:100%;height:100%;min-height:420px;object-fit:cover}
    .feature-list{display:grid;gap:15px;margin-top:25px}
    .feature-item{display:grid;grid-template-columns:42px 1fr;gap:14px;padding:17px 0;border-top:1px solid var(--line)}
    .feature-icon{width:38px;height:38px;border-radius:12px;background:#e7f8f7;color:#168c8a;display:grid;place-items:center;font-weight:800}
    .feature-item p{margin:0;color:var(--muted)}
    .dark-section{background:var(--navy);color:#fff}
    .dark-section .section-intro{color:#b9c7dd}
    .matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
    .matrix-card{padding:25px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);min-height:205px;transition:.25s}
    .matrix-card:hover{background:rgba(255,255,255,.14);transform:translateY(-5px)}
    .matrix-card .number{color:var(--cyan);font-size:12px;font-weight:800;letter-spacing:.12em;margin-bottom:27px}
    .matrix-card p{color:#c1cde0;margin:0;font-size:14px}
    .compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}
    .compare-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px}
    .compare-card.highlight{background:#edfbfa;border-color:#a9e8e4}
    .compare-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
    .tag{display:inline-flex;padding:5px 9px;border-radius:8px;background:#f1f3f7;color:var(--muted);font-size:12px}
    .highlight .tag{background:#c8f2ef;color:#087b79}
    .progress-line{margin:16px 0}
    .progress-line div{display:flex;justify-content:space-between;font-size:13px;margin-bottom:7px}
    .bar{height:8px;background:#e9edf3;border-radius:20px;overflow:hidden}
    .bar span{display:block;height:100%;background:var(--orange);border-radius:20px}
    .highlight .bar span{background:var(--cyan)}
    .topic-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:18px}
    .topic-main,.topic-side{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
    .topic-main{display:grid;grid-template-columns:1fr 1fr}
    .topic-main img{width:100%;height:100%;min-height:300px;object-fit:cover}
    .topic-copy{padding:30px}
    .topic-copy p,.topic-side p{color:var(--muted)}
    .topic-side{padding:28px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(145deg,#fff,#edf8f7)}
    .score-list{display:grid;gap:10px;margin-top:18px}
    .score-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
    .score-row b{color:var(--navy)}
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff}
    .step{padding:27px 22px;min-height:180px;border-right:1px solid var(--line)}
    .step:last-child{border-right:0}
    .step-num{font-size:32px;color:var(--cyan);font-weight:800;line-height:1;margin-bottom:27px}
    .step p{color:var(--muted);font-size:14px;margin:0}
    .quote-panel{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:center;background:#fff;border-radius:var(--radius-xl);padding:42px 48px;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
    .quote-panel blockquote{font-size:25px;line-height:1.5;font-weight:700;margin:0;color:var(--navy)}
    .quote-panel cite{display:block;color:var(--muted);font-size:13px;font-style:normal;margin-top:18px}
    .faq-wrap{max-width:880px;margin:auto}
    .accordion-item{border:1px solid var(--line)!important;border-radius:13px!important;margin-bottom:11px;overflow:hidden}
    .accordion-button{font-weight:700;color:var(--navy);background:#fff!important;box-shadow:none!important;padding:19px 22px}
    .accordion-button:not(.collapsed){color:#128b88}
    .accordion-body{color:var(--muted);padding:0 22px 21px;background:#fff}
    .cta{background:var(--navy-2);color:#fff;border-radius:var(--radius-xl);padding:50px 58px;display:flex;justify-content:space-between;align-items:center;gap:30px;overflow:hidden;position:relative}
    .cta:after{content:"";position:absolute;width:240px;height:240px;border:1px solid rgba(40,213,209,.24);border-radius:50%;right:-70px;top:-100px}
    .cta h2{max-width:650px;margin:0}
    .cta p{color:#c7d3e5;max-width:610px;margin:14px 0 0}
    .cta .btn-primary{background:var(--cyan);color:var(--navy);position:relative;z-index:1}
    footer{background:#09152c;color:#d9e1ef;padding:58px 0 22px}
    footer .brand{color:#fff}
    footer p{color:#95a6bf;max-width:300px;font-size:13px}
    .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr .9fr;gap:35px;padding-bottom:42px}
    footer h3{font-size:14px;color:#fff;letter-spacing:0;margin:5px 0 15px}
    footer ul{list-style:none;padding:0;margin:0}
    footer li{margin:8px 0;color:#95a6bf;font-size:13px}
    footer li a:hover{color:var(--cyan)}
    .copyright{border-top:1px solid rgba(255,255,255,.12);padding-top:19px;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;color:#8495ae;font-size:12px}
    .copyright a{color:#b8c6d9}
    .modal-content{border:0;border-radius:22px;overflow:hidden}
    .modal-body{background:var(--navy);color:#fff;padding:0}
    .modal-body img{width:100%;height:400px;object-fit:cover;opacity:.82}
    .modal-caption{padding:24px 27px}
    @media (max-width:1024px){
      .nav-shell{gap:15px}.nav-links a{padding:8px 8px;font-size:13px}.command-search{width:155px}
      .hero-grid,.split{gap:34px}.metric-grid{grid-template-columns:repeat(2,1fr)}
      .topic-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:768px){
      .topbar{height:70px}.menu-toggle{display:block;margin-left:auto}
      .command-search,.nav-cta{display:none}.nav-links{display:none;position:absolute;top:70px;left:0;right:0;padding:14px 24px;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);flex-direction:column;align-items:stretch}
      .nav-links.show{display:flex}.nav-links a{padding:11px 12px}
      .hero-inner{min-height:auto;padding:75px 0}.hero-grid,.split,.quote-panel{grid-template-columns:1fr}
      .video-panel{transform:none}.video-frame{height:320px}.section{padding:65px 0}
      .matrix{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:repeat(2,1fr)}
      .step:nth-child(2){border-right:0}.step:nth-child(-n+2){border-bottom:1px solid var(--line)}
      .topic-main{grid-template-columns:1fr}.topic-main img{min-height:230px}.cta{padding:38px 28px;display:block}
      .cta .btn-primary{margin-top:24px}.quote-panel{padding:30px}
    }
    @media (max-width:520px){
      .container{padding:0 18px}h1{font-size:39px}.hero-copy{font-size:15px}
      .metric-grid,.matrix,.steps,.footer-grid{grid-template-columns:1fr}.section-head{display:block}.section-head .text-link{display:inline-block;margin-top:12px}
      .step{border-right:0!important;border-bottom:1px solid var(--line)}.step:last-child{border-bottom:0}
      .video-frame{height:260px}.video-info strong{font-size:21px}.copyright{display:block}.copyright span{display:block;margin-bottom:8px}
    }