/* roulang page: index */
:root{
            --bg:#0c1018;
            --panel:#141b28;
            --panel-2:#192234;
            --text:#f4f6fb;
            --muted:#9ca8bb;
            --line:rgba(255,255,255,.1);
            --pink:#f276a8;
            --violet:#8c7cff;
            --cyan:#69d8df;
            --gold:#f4c66d;
            --radius:22px;
            --shadow:0 20px 55px rgba(0,0,0,.28);
            --max:1180px;
        }
        *{box-sizing:border-box;margin:0;padding:0}
        html{scroll-behavior:smooth}
        body{
            background:var(--bg);
            color:var(--text);
            font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
            line-height:1.7;
            letter-spacing:0;
        }
        a{color:inherit;text-decoration:none}
        img{display:block;width:100%;object-fit:cover}
        button,input{font:inherit}
        button{cursor:pointer}
        .container{width:min(var(--max),calc(100% - 40px));margin:0 auto}
        .topbar{
            position:sticky;top:0;z-index:20;
            background:rgba(12,16,24,.85);
            backdrop-filter:blur(18px);
            border-bottom:1px solid var(--line);
        }
        .nav{
            min-height:76px;display:flex;align-items:center;gap:28px;
        }
        .brand{display:flex;align-items:center;gap:12px;font-weight:800;white-space:nowrap}
        .brand-mark{
            width:38px;height:38px;border-radius:12px;
            display:grid;place-items:center;
            background:linear-gradient(135deg,var(--pink),var(--violet));
            color:#fff;font-size:19px;box-shadow:0 8px 24px rgba(242,118,168,.28)
        }
        .nav-links{display:flex;align-items:center;gap:6px;margin-left:auto}
        .nav-links a{
            color:var(--muted);padding:9px 13px;border-radius:10px;
            transition:.25s ease;
        }
        .nav-links a:hover,.nav-links a.active{color:#fff;background:rgba(255,255,255,.08)}
        .nav-search{
            display:flex;align-items:center;gap:8px;border:1px solid var(--line);
            border-radius:12px;padding:6px 8px;background:rgba(255,255,255,.04)
        }
        .nav-search input{
            width:120px;border:0;outline:0;color:#fff;background:transparent;font-size:13px
        }
        .nav-search button{border:0;background:transparent;color:var(--cyan);font-size:16px}
        .hero{padding:74px 0 62px;position:relative;overflow:hidden}
        .hero:before{
            content:"";position:absolute;inset:0;
            background:radial-gradient(circle at 78% 15%,rgba(140,124,255,.22),transparent 32%),
                       radial-gradient(circle at 12% 35%,rgba(242,118,168,.15),transparent 28%);
            pointer-events:none
        }
        .hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
        .eyebrow,.section-kicker{
            color:var(--cyan);font-size:13px;font-weight:800;letter-spacing:1.5px;
            text-transform:uppercase
        }
        h1{font-size:clamp(42px,6vw,76px);line-height:1.12;margin:17px 0 22px;max-width:720px}
        h1 em{font-style:normal;color:var(--pink)}
        .hero-copy{font-size:17px;color:var(--muted);max-width:680px}
        .actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px}
        .btn{
            display:inline-flex;align-items:center;justify-content:center;gap:8px;
            border:1px solid transparent;border-radius:13px;padding:13px 19px;
            font-weight:750;transition:.25s ease
        }
        .btn-primary{background:linear-gradient(100deg,var(--pink),var(--violet));color:white;box-shadow:0 12px 28px rgba(140,124,255,.25)}
        .btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08)}
        .btn-ghost{border-color:var(--line);color:#e7ebf5;background:rgba(255,255,255,.04)}
        .btn-ghost:hover{background:rgba(255,255,255,.1)}
        .hero-visual{position:relative;min-height:420px}
        .hero-image{height:420px;border-radius:30px;box-shadow:var(--shadow);border:1px solid var(--line)}
        .hero-note{
            position:absolute;right:-18px;bottom:24px;width:220px;padding:18px;
            background:rgba(20,27,40,.93);border:1px solid var(--line);
            border-radius:18px;box-shadow:var(--shadow)
        }
        .hero-note strong{display:block;font-size:25px;color:var(--gold)}
        .hero-note span{font-size:13px;color:var(--muted)}
        section{padding:76px 0;border-top:1px solid rgba(255,255,255,.055)}
        .section-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:28px}
        h2{font-size:clamp(27px,4vw,42px);line-height:1.2;margin-top:8px}
        .section-intro{color:var(--muted);max-width:610px;font-size:15px}
        .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
        .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
        .card{
            background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
            overflow:hidden;transition:.28s ease
        }
        .card:hover{transform:translateY(-5px);border-color:rgba(242,118,168,.45);box-shadow:var(--shadow)}
        .card-image{height:190px}
        .card-body{padding:19px}
        .card h3{font-size:18px;margin-bottom:8px}
        .card p{font-size:14px;color:var(--muted)}
        .meta{display:flex;gap:8px;align-items:center;margin-top:15px;color:var(--muted);font-size:12px}
        .badge{padding:4px 9px;border-radius:99px;color:#0d121a;background:var(--cyan);font-weight:800}
        .badge.pink{background:var(--pink)}
        .badge.gold{background:var(--gold)}
        .feature-band{background:linear-gradient(120deg,#161c31,#201b31);border-top:1px solid rgba(140,124,255,.2)}
        .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
        .step{padding:24px;border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:18px}
        .step-num{font-size:28px;font-weight:900;color:var(--pink);margin-bottom:12px}
        .step h3{margin-bottom:8px}
        .step p{font-size:14px;color:var(--muted)}
        .compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}
        .compare-box{padding:30px;border-radius:22px;border:1px solid var(--line);background:var(--panel)}
        .compare-box.highlight{background:linear-gradient(145deg,rgba(242,118,168,.16),rgba(140,124,255,.13));border-color:rgba(242,118,168,.35)}
        .compare-box h3{font-size:23px;margin-bottom:17px}
        .compare-box ul{list-style:none;display:grid;gap:12px;color:var(--muted)}
        .compare-box li:before{content:"•";color:var(--cyan);font-weight:900;margin-right:9px}
        .topics .card{padding:22px;min-height:180px}
        .topic-icon{font-size:27px;color:var(--gold);margin-bottom:17px}
        .ranking{display:grid;gap:10px}
        .rank-row{
            display:grid;grid-template-columns:48px 1fr 110px 72px;align-items:center;
            gap:16px;padding:15px 18px;background:var(--panel);
            border:1px solid var(--line);border-radius:14px
        }
        .rank-no{font-size:24px;font-weight:900;color:var(--pink)}
        .rank-row small{display:block;color:var(--muted)}
        .heat{color:var(--gold);font-weight:750}
        .news-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}
        .news-main{position:relative;min-height:330px;border-radius:22px;overflow:hidden}
        .news-main img{height:100%;position:absolute;inset:0}
        .news-main:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,8,14,.88),transparent 65%)}
        .news-content{position:absolute;z-index:1;left:25px;right:25px;bottom:22px}
        .news-content p{color:#cbd2df;font-size:14px;margin-top:7px}
        .news-list{display:grid;gap:10px}
        .news-item{display:flex;gap:14px;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:15px}
        .news-item img{width:92px;height:74px;border-radius:10px}
        .news-item h3{font-size:15px;line-height:1.45}
        .news-item span{display:block;color:var(--muted);font-size:12px;margin-top:5px}
        .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
        .quote{padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:20px}
        .quote p{color:#dce2ec;font-size:15px}
        .quote strong{display:block;margin-top:18px;color:var(--pink);font-size:13px}
        .faq{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
        .faq-item{padding:22px;background:var(--panel);border:1px solid var(--line);border-radius:17px}
        .faq-item h3{font-size:17px;margin-bottom:9px}
        .faq-item p{font-size:14px;color:var(--muted)}
        .cta{
            padding:50px;border-radius:27px;background:linear-gradient(115deg,#251b36,#162a36);
            border:1px solid rgba(105,216,223,.22);display:flex;align-items:center;
            justify-content:space-between;gap:25px
        }
        .cta p{color:var(--muted);margin-top:10px;max-width:650px}
        footer{padding:54px 0 24px;background:#090c13;border-top:1px solid var(--line)}
        .footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:30px;padding-bottom:38px}
        .footer-brand p{color:var(--muted);font-size:14px;max-width:300px;margin-top:13px}
        footer h3{font-size:14px;margin-bottom:13px}
        footer a{display:block;color:var(--muted);font-size:14px;margin:7px 0}
        footer a:hover{color:var(--pink)}
        .copyright{border-top:1px solid var(--line);padding-top:20px;color:#687488;font-size:12px}
        :focus-visible{outline:3px solid rgba(105,216,223,.65);outline-offset:3px}
        @media(max-width:1024px){
            .nav-links{gap:0}.nav-links a{padding:8px}
            .hero-grid{gap:28px}.grid-4{grid-template-columns:repeat(2,1fr)}
            .steps{grid-template-columns:repeat(2,1fr)}
        }
        @media(max-width:768px){
            .container{width:min(var(--max),calc(100% - 28px))}
            .nav{min-height:68px}.nav-search{display:none}
            .nav-links{overflow-x:auto;white-space:nowrap;margin-left:auto}
            .nav-links a{font-size:13px}
            .hero{padding:48px 0 42px}.hero-grid{grid-template-columns:1fr}
            .hero-visual{min-height:300px}.hero-image{height:300px}
            .hero-note{right:12px;bottom:15px;width:190px}
            section{padding:55px 0}.section-head{display:block}.section-intro{margin-top:12px}
            .grid-3,.quotes,.faq{grid-template-columns:1fr}
            .news-grid{grid-template-columns:1fr}
            .compare{grid-template-columns:1fr}
            .footer-grid{grid-template-columns:1fr 1fr}
            .cta{display:block;padding:32px}
            .cta .btn{margin-top:20px}
        }
        @media(max-width:520px){
            h1{font-size:42px}.brand{font-size:14px}.brand-mark{width:34px;height:34px}
            .nav-links a:nth-child(n+4){display:none}
            .grid-4,.steps{grid-template-columns:1fr}
            .rank-row{grid-template-columns:38px 1fr 65px;gap:10px}
            .rank-row .badge{display:none}
            .card-image{height:205px}
            .footer-grid{grid-template-columns:1fr}
        }

/* roulang page: category1 */
:root{--bg:#0c1018;--panel:#141b28;--panel-2:#192234;--text:#f4f6fb;--muted:#9ca8bb;--line:rgba(255,255,255,.1);--pink:#f276a8;--violet:#8c7cff;--cyan:#69d8df;--gold:#f4c66d;--radius:22px;--shadow:0 20px 55px rgba(0,0,0,.28);--max:1180px}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;line-height:1.7;letter-spacing:0}a{color:inherit;text-decoration:none}img{display:block;width:100%;object-fit:cover}button,input{font:inherit}button{cursor:pointer}.container{width:min(var(--max),calc(100% - 40px));margin:0 auto}
.topbar{position:sticky;top:0;z-index:20;background:rgba(12,16,24,.88);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.nav{min-height:76px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;gap:12px;font-weight:800;white-space:nowrap}.brand-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--pink),var(--violet));color:#fff;font-size:19px;box-shadow:0 8px 24px rgba(242,118,168,.28)}.nav-links{display:flex;align-items:center;gap:6px;margin-left:auto}.nav-links a{color:var(--muted);padding:9px 13px;border-radius:10px;transition:.25s}.nav-links a:hover,.nav-links a.active{color:#fff;background:rgba(255,255,255,.08)}.nav-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:6px 8px;background:rgba(255,255,255,.04)}.nav-search input{width:120px;border:0;outline:0;color:#fff;background:transparent;font-size:13px}.nav-search button{border:0;background:transparent;color:var(--cyan);font-size:16px}
main{overflow:hidden}.hero{padding:76px 0 60px;position:relative;background:radial-gradient(circle at 82% 18%,rgba(140,124,255,.2),transparent 31%),radial-gradient(circle at 8% 30%,rgba(242,118,168,.13),transparent 28%)}.hero-grid{position:relative;display:grid;grid-template-columns:1fr .9fr;gap:54px;align-items:center}.eyebrow,.section-kicker{color:var(--cyan);font-size:13px;font-weight:800;letter-spacing:1.5px}.hero h1{font-size:clamp(38px,5vw,66px);line-height:1.13;margin:16px 0 19px;max-width:680px}.hero h1 em{font-style:normal;color:var(--pink)}.hero-copy{font-size:17px;color:var(--muted);max-width:670px}.hero-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:13px;padding:13px 19px;font-weight:750;transition:.25s}.btn-primary{background:linear-gradient(100deg,var(--pink),var(--violet));color:#fff;box-shadow:0 12px 28px rgba(140,124,255,.25)}.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08)}.btn-ghost{border-color:var(--line);color:#e7ebf5;background:rgba(255,255,255,.04)}.btn-ghost:hover{background:rgba(255,255,255,.1)}.hero-visual{position:relative}.hero-image{height:410px;border-radius:30px;box-shadow:var(--shadow);border:1px solid var(--line)}.hero-note{position:absolute;right:-18px;bottom:24px;width:225px;padding:18px;background:rgba(20,27,40,.94);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.hero-note strong{display:block;font-size:25px;color:var(--gold)}.hero-note span{font-size:13px;color:var(--muted)}
section{padding:72px 0;border-top:1px solid rgba(255,255,255,.055)}.section-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:28px}.section-head h2{font-size:30px;margin-top:5px}.section-intro{color:var(--muted);max-width:610px;font-size:15px}.feature-band{background:linear-gradient(120deg,#161c31,#201b31)}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.28s}.card:hover{transform:translateY(-5px);border-color:rgba(242,118,168,.45);box-shadow:var(--shadow)}.card-image{height:190px}.card-body{padding:19px}.card h3{font-size:18px;margin-bottom:8px}.card p{font-size:14px;color:var(--muted)}.meta{display:flex;gap:8px;align-items:center;margin-top:15px;color:var(--muted);font-size:12px}.badge{padding:4px 9px;border-radius:99px;color:#0d121a;background:var(--cyan);font-weight:800}.badge.pink{background:var(--pink)}.badge.gold{background:var(--gold)}.story-list{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}.story-feature{min-height:320px;position:relative;overflow:hidden;border-radius:24px;border:1px solid var(--line)}.story-feature img{position:absolute;inset:0;height:100%}.story-feature:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,8,14,.9),transparent 68%)}.story-feature div{position:absolute;z-index:1;left:25px;right:25px;bottom:24px}.story-feature h3{font-size:25px}.story-side{display:grid;gap:12px}.story-side article{padding:19px;background:var(--panel);border:1px solid var(--line);border-radius:16px}.story-side h3{font-size:16px}.story-side p{font-size:13px;color:var(--muted);margin-top:5px}.topic-card{padding:24px;min-height:165px;background:var(--panel);border:1px solid var(--line);border-radius:18px}.topic-card b{display:flex;align-items:center;gap:10px;font-size:19px}.topic-card b:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--pink);box-shadow:0 0 15px var(--pink)}.topic-card p{color:var(--muted);font-size:14px;margin-top:12px}.rank-list{display:grid;gap:10px}.rank-row{display:grid;grid-template-columns:48px 1fr 110px 72px;align-items:center;gap:16px;padding:15px 18px;background:var(--panel);border:1px solid var(--line);border-radius:14px}.rank-no{font-size:23px;font-weight:850;color:var(--pink)}.rank-row small{display:block;color:var(--muted)}.rank-hot{color:var(--gold);font-size:13px}.news-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}.news-main{position:relative;min-height:330px;border-radius:22px;overflow:hidden}.news-main img{height:100%;position:absolute;inset:0}.news-main:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,8,14,.88),transparent 65%)}.news-main div{position:absolute;z-index:1;left:24px;bottom:22px}.news-list{display:grid;gap:10px}.news-item{display:flex;gap:14px;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:15px}.news-item img{width:92px;height:74px;border-radius:10px}.news-item h3{font-size:15px;line-height:1.45}.news-item span{display:block;color:var(--muted);font-size:12px;margin-top:5px}.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.faq-item{padding:22px;background:var(--panel);border:1px solid var(--line);border-radius:17px}.faq-item h3{font-size:17px;margin-bottom:9px}.faq-item p{font-size:14px;color:var(--muted)}.cta{padding:42px;border-radius:27px;background:linear-gradient(115deg,#251b36,#162a36);border:1px solid rgba(105,216,223,.22);display:flex;align-items:center;justify-content:space-between;gap:24px}.cta p{color:var(--muted);margin-top:7px}
footer{padding:55px 0 25px;border-top:1px solid var(--line);background:#090d14}.footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:35px}.footer-brand p{color:var(--muted);font-size:14px;max-width:330px;margin-top:16px}.footer-grid h3{font-size:15px;margin-bottom:14px}.footer-grid a:not(.brand){display:block;color:var(--muted);font-size:14px;margin:8px 0;transition:.2s}.footer-grid a:not(.brand):hover{color:var(--pink)}.copyright{border-top:1px solid var(--line);margin-top:35px;padding-top:20px;color:#718095;font-size:12px}
:focus-visible{outline:3px solid rgba(105,216,223,.7);outline-offset:3px}
@media(max-width:1024px){.nav{gap:15px}.nav-links{gap:0}.nav-links a{padding:9px 8px}.hero-grid{gap:32px}.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.container{width:min(var(--max),calc(100% - 28px))}.nav{min-height:68px;flex-wrap:wrap;padding:10px 0}.nav-links{order:3;width:100%;overflow:auto;justify-content:flex-start}.nav-search{margin-left:auto}.hero{padding:52px 0 42px}.hero-grid,.story-list,.news-grid{grid-template-columns:1fr}.hero-visual{margin-top:12px}.hero-image{height:330px}.hero-note{right:12px}.grid-3{grid-template-columns:1fr}.section-head{display:block}.section-intro{margin-top:10px}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.nav-search{display:none}.brand{font-size:15px}.hero h1{font-size:38px}.hero-copy{font-size:15px}.hero-actions .btn{width:100%}.grid-4,.faq{grid-template-columns:1fr}.rank-row{grid-template-columns:35px 1fr 58px;gap:10px}.rank-row .rank-hot{display:none}.rank-row strong{font-size:14px}.story-feature{min-height:270px}.cta{display:block;padding:28px}.cta .btn{margin-top:20px;width:100%}.footer-grid{grid-template-columns:1fr 1fr;gap:22px}.footer-brand{grid-column:1/-1}}