/* roulang page: index */
:root{
            --ink:#211827;
            --muted:#756b79;
            --paper:#fcf9fc;
            --panel:#ffffff;
            --line:#eadfea;
            --plum:#6d285f;
            --plum-dark:#42183e;
            --rose:#d85c81;
            --gold:#efbd68;
            --soft:#f6edf5;
            --radius:24px;
            --shadow:0 18px 55px rgba(75,30,70,.11);
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;line-height:1.75;font-size:16px}
        a{color:inherit;text-decoration:none;transition:.25s ease}
        img{max-width:100%;display:block}
        button,input{font:inherit}
        .container{max-width:1180px}
        .site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(234,223,234,.9);backdrop-filter:blur(16px)}
        .navbar{min-height:78px}
        .brand{display:inline-flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.03em;color:var(--plum-dark);font-size:1.05rem}
        .brand-mark{width:38px;height:38px;border-radius:13px;background:var(--plum);color:#fff;display:grid;place-items:center;font-size:18px;box-shadow:0 8px 20px rgba(109,40,95,.22)}
        .nav-link{color:#625763!important;font-weight:600;padding:.55rem .9rem!important;border-radius:12px}
        .nav-link:hover,.nav-link.active{color:var(--plum)!important;background:var(--soft)}
        .search-box{display:flex;align-items:center;border:1px solid var(--line);background:#fff;border-radius:14px;padding:4px 6px 4px 14px;max-width:210px}
        .search-box input{width:125px;border:0;outline:0;background:transparent;font-size:14px;color:var(--ink)}
        .search-box button{border:0;background:var(--soft);color:var(--plum);width:32px;height:32px;border-radius:10px}
        .btn-main,.btn-ghost{border-radius:13px;padding:.72rem 1.15rem;font-weight:700;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px}
        .btn-main{background:var(--plum);color:#fff;box-shadow:0 10px 22px rgba(109,40,95,.2)}
        .btn-main:hover{background:var(--plum-dark);color:#fff;transform:translateY(-2px)}
        .btn-ghost{border-color:var(--line);background:#fff;color:var(--plum)}
        .btn-ghost:hover{border-color:var(--plum);background:var(--soft);color:var(--plum-dark)}
        .btn-main:focus-visible,.btn-ghost:focus-visible,.nav-link:focus-visible,input:focus-visible{outline:3px solid rgba(216,92,129,.3);outline-offset:3px}
        .hero{padding:72px 0 88px;overflow:hidden;background:radial-gradient(circle at 80% 12%,#f7dfe7 0,transparent 30%),linear-gradient(135deg,#fff 0%,#fbf3fa 100%)}
        .hero-copy{padding:28px 0}
        .eyebrow,.kicker{display:inline-flex;align-items:center;gap:8px;color:var(--plum);font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
        .eyebrow:before{content:"";width:25px;height:2px;background:var(--rose)}
        h1,h2,h3{line-height:1.2;letter-spacing:-.045em;margin:0 0 18px;font-weight:800}
        h1{font-size:clamp(2.5rem,5.2vw,5rem);max-width:650px}
        h2{font-size:clamp(2rem,3.4vw,3.15rem)}
        h3{font-size:1.22rem}
        .hero-copy p{color:var(--muted);font-size:1.08rem;max-width:610px;margin:0 0 28px}
        .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
        .hero-metrics{display:flex;gap:28px;flex-wrap:wrap}
        .metric strong{display:block;color:var(--plum-dark);font-size:1.5rem;line-height:1.2}
        .metric span{font-size:.84rem;color:var(--muted)}
        .hero-visual{position:relative;min-height:515px;padding:20px 0 0 25px}
        .cover-art{height:475px;border-radius:34px;background:linear-gradient(145deg,#3f183e 0%,#762e66 48%,#d65a7e 100%);position:relative;overflow:hidden;box-shadow:var(--shadow);transform:rotate(2.5deg)}
        .cover-art:before,.cover-art:after{content:"";position:absolute;border-radius:50%;filter:blur(1px)}
        .cover-art:before{width:310px;height:310px;right:-90px;top:-45px;background:rgba(239,189,104,.8)}
        .cover-art:after{width:250px;height:250px;left:-100px;bottom:-70px;background:rgba(255,255,255,.14)}
        .cover-content{position:absolute;inset:0;padding:34px;display:flex;flex-direction:column;justify-content:space-between;color:#fff}
        .cover-top{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;letter-spacing:.12em}
        .cover-badge{padding:7px 11px;border:1px solid rgba(255,255,255,.3);border-radius:99px;background:rgba(255,255,255,.12)}
        .cover-title{font-size:clamp(2rem,4vw,4rem);line-height:1.06;font-weight:900;max-width:380px;letter-spacing:-.06em}
        .cover-bottom{display:flex;justify-content:space-between;align-items:end;gap:20px}
        .cover-note{font-size:.85rem;color:rgba(255,255,255,.75)}
        .play-orb{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--plum);font-size:24px;box-shadow:0 12px 25px rgba(30,10,25,.2)}
        .floating-note{position:absolute;z-index:2;left:-4px;bottom:47px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 17px;box-shadow:var(--shadow);font-size:.86rem;color:var(--muted)}
        .floating-note strong{display:block;color:var(--ink);font-size:1rem}
        .section{padding:94px 0}
        .section-soft{background:var(--soft)}
        .section-head{max-width:700px;margin-bottom:42px}
        .section-head p{color:var(--muted);margin:0;max-width:650px}
        .app-strip{background:var(--plum-dark);color:#fff;padding:30px;border-radius:var(--radius);position:relative;overflow:hidden}
        .app-strip:after{content:"";position:absolute;width:220px;height:220px;border:35px solid rgba(239,189,104,.15);border-radius:50%;right:6%;top:-100px}
        .app-strip p{color:rgba(255,255,255,.7);margin:5px 0 0}
        .mini-label{font-size:.72rem;letter-spacing:.12em;color:var(--gold);font-weight:800}
        .feature-card,.category-card,.quote-card,.info-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px;height:100%;transition:.25s ease}
        .feature-card:hover,.category-card:hover,.quote-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#d8b4d2}
        .icon-box{width:48px;height:48px;border-radius:15px;background:var(--soft);color:var(--plum);display:grid;place-items:center;font-size:21px;margin-bottom:22px}
        .feature-card p,.category-card p,.quote-card p{color:var(--muted);font-size:.94rem;margin:0}
        .service-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}
        .service-list{display:grid;gap:16px}
        .service-item{display:flex;gap:17px;padding:18px 0;border-bottom:1px solid var(--line)}
        .service-item:last-child{border-bottom:0}
        .number{flex:0 0 35px;height:35px;border-radius:11px;background:var(--plum);color:#fff;display:grid;place-items:center;font-weight:800}
        .service-item h3{margin:0 0 4px;font-size:1.05rem}
        .service-item p{margin:0;color:var(--muted);font-size:.9rem}
        .category-card{padding:24px;min-height:195px;display:flex;flex-direction:column;justify-content:space-between}
        .category-card .arrow{color:var(--rose);font-size:1.3rem}
        .timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative}
        .timeline:before{content:"";position:absolute;left:8%;right:8%;top:19px;height:2px;background:#e2c9df}
        .timeline-item{position:relative;padding:55px 28px 0 0}
        .timeline-dot{position:absolute;top:10px;left:0;width:20px;height:20px;background:var(--rose);border:5px solid #f8e8ef;border-radius:50%;z-index:1}
        .timeline-item h3{font-size:1.1rem;margin-bottom:8px}
        .timeline-item p{color:var(--muted);font-size:.9rem;margin:0}
        .news-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:28px}
        .news-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px 26px}
        .news-item{display:flex;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}
        .news-item:last-child{border-bottom:0}
        .news-item a{font-weight:700}
        .news-item a:hover{color:var(--plum)}
        .news-item time{color:#a195a2;font-size:.82rem;white-space:nowrap}
        .spotlight{background:var(--plum);color:#fff;border-radius:var(--radius);padding:30px}
        .spotlight p{color:rgba(255,255,255,.72);font-size:.92rem}
        .spotlight ul{padding:0;margin:22px 0 0;list-style:none}
        .spotlight li{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.15);font-size:.9rem}
        .faq-wrap{max-width:860px}
        .accordion-item{border:1px solid var(--line)!important;border-radius:15px!important;overflow:hidden;margin-bottom:12px;background:#fff}
        .accordion-button{font-weight:700;color:var(--ink);background:#fff;padding:20px 22px;box-shadow:none!important}
        .accordion-button:not(.collapsed){color:var(--plum);background:var(--soft)}
        .accordion-body{color:var(--muted);padding:0 22px 22px}
        .cta{padding:58px 20px;background:linear-gradient(120deg,#f6e4ef,#fff5e7);border:1px solid #edd8e6;border-radius:30px;text-align:center}
        .cta p{max-width:650px;margin:0 auto 24px;color:var(--muted)}
        footer{background:#261a28;color:#fff;padding:48px 0 25px}
        footer .brand{color:#fff}
        footer p,footer a{color:rgba(255,255,255,.62);font-size:.9rem}
        footer a:hover{color:#fff}
        .footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:35px;padding-top:20px;font-size:.8rem;color:rgba(255,255,255,.45)}
        @media(max-width:991px){
            .search-box{display:none}.hero{padding-top:48px}.hero-visual{min-height:440px;margin-top:25px}.cover-art{height:410px}
            .service-layout,.news-layout{grid-template-columns:1fr;gap:35px}
        }
        @media(max-width:767px){
            .navbar{min-height:68px}.brand{font-size:.92rem}.brand-mark{width:34px;height:34px}
            .hero{padding:38px 0 55px}.hero-copy{padding:0}h1{font-size:2.65rem}
            .hero-visual{padding:12px 4px 0;min-height:390px}.cover-art{height:360px}.cover-content{padding:25px}.floating-note{left:0;bottom:20px}
            .section{padding:65px 0}.timeline{grid-template-columns:1fr;gap:25px}.timeline:before{left:9px;top:18px;bottom:18px;width:2px;height:auto;right:auto}
            .timeline-item{padding:0 0 0 48px}.timeline-dot{top:3px}
            .news-item{display:block}.news-item time{display:block;margin-top:5px}
        }
        @media(max-width:520px){
            .hero-actions .btn-main,.hero-actions .btn-ghost{width:100%}.hero-metrics{gap:18px}.cover-title{font-size:2.3rem}
            .app-strip{padding:24px}.section-head{margin-bottom:28px}.feature-card,.category-card,.quote-card{padding:22px}
        }

/* roulang page: category1 */
:root{
      --ink:#211827;--muted:#756b79;--paper:#fcf9fc;--panel:#fff;
      --line:#eadfea;--plum:#6d285f;--plum-dark:#42183e;--rose:#d85c81;
      --gold:#efbd68;--soft:#f6edf5;--radius:24px;
      --shadow:0 18px 55px rgba(75,30,70,.11)
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;font-size:16px;line-height:1.75}
    a{color:inherit;text-decoration:none;transition:.25s ease}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    .container{max-width:1180px}
    .site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);border-bottom:1px solid rgba(234,223,234,.9);backdrop-filter:blur(16px)}
    .navbar{min-height:78px}
    .brand{display:inline-flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.03em;color:var(--plum-dark);font-size:1.05rem}
    .brand-mark{width:38px;height:38px;border-radius:13px;background:var(--plum);color:#fff;display:grid;place-items:center;font-size:18px;box-shadow:0 8px 20px rgba(109,40,95,.22)}
    .nav-link{color:#625763!important;font-weight:600;padding:.55rem .9rem!important;border-radius:12px}
    .nav-link:hover,.nav-link.active{color:var(--plum)!important;background:var(--soft)}
    .search-box{display:flex;align-items:center;border:1px solid var(--line);background:#fff;border-radius:14px;padding:4px 6px 4px 14px;max-width:210px}
    .search-box input{width:125px;border:0;outline:0;background:transparent;font-size:14px;color:var(--ink)}
    .search-box button{border:0;background:var(--soft);color:var(--plum);width:32px;height:32px;border-radius:10px}
    .btn-main,.btn-ghost{border-radius:13px;padding:.72rem 1.15rem;font-weight:700;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px}
    .btn-main{background:var(--plum);color:#fff;box-shadow:0 10px 22px rgba(109,40,95,.2)}
    .btn-main:hover{background:var(--plum-dark);color:#fff;transform:translateY(-2px)}
    .btn-ghost{border-color:var(--line);background:#fff;color:var(--plum)}
    .btn-ghost:hover{border-color:var(--plum);background:var(--soft);color:var(--plum-dark)}
    .btn-main:focus-visible,.btn-ghost:focus-visible,.nav-link:focus-visible,input:focus-visible{outline:3px solid rgba(216,92,129,.3);outline-offset:3px}
    .hero{padding:72px 0 82px;overflow:hidden;background:radial-gradient(circle at 85% 15%,#f7dfe7 0,transparent 31%),linear-gradient(135deg,#fff 0%,#fbf3fa 100%)}
    .eyebrow,.kicker{display:inline-flex;align-items:center;gap:8px;color:var(--plum);font-size:.78rem;font-weight:800;letter-spacing:.12em}
    .eyebrow:before{content:"";width:25px;height:2px;background:var(--rose)}
    h1{font-size:clamp(2.4rem,5vw,4.7rem);line-height:1.1;letter-spacing:-.065em;font-weight:900;margin:18px 0}
    h2{font-weight:850;letter-spacing:-.045em}
    .hero-copy p{color:var(--muted);font-size:1.08rem;max-width:650px;margin:0 0 28px}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
    .coupon-panel{position:relative;background:var(--plum-dark);color:#fff;border-radius:30px;padding:30px;min-height:355px;box-shadow:var(--shadow);overflow:hidden}
    .coupon-panel:after{content:"";position:absolute;width:220px;height:220px;border:1px solid rgba(255,255,255,.18);border-radius:50%;right:-65px;bottom:-85px}
    .coupon-label{display:inline-flex;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:6px 12px;font-size:.8rem}
    .coupon-panel h2{font-size:2.05rem;max-width:360px;margin:34px 0 14px}
    .coupon-panel p{color:rgba(255,255,255,.7);max-width:380px}
    .coupon-code{border:1px dashed rgba(255,255,255,.42);border-radius:16px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;margin:24px 0}
    .coupon-code strong{font-size:1.1rem;letter-spacing:.08em}
    .coupon-panel .btn-main{background:var(--gold);color:#3d2631;box-shadow:none}
    .coupon-panel .btn-main:hover{background:#ffd88e;color:#3d2631}
    .section{padding:88px 0}
    .section-soft{background:var(--soft)}
    .section-head{max-width:720px;margin-bottom:40px}
    .section-head p{color:var(--muted);margin:0}
    .info-card,.feature-card,.quote-card{height:100%;padding:27px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);transition:.25s ease}
    .info-card:hover,.feature-card:hover,.quote-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#d8b4d2}
    .icon-box{width:46px;height:46px;border-radius:15px;background:var(--soft);color:var(--plum);display:grid;place-items:center;font-weight:900;font-size:1.15rem;margin-bottom:20px}
    .info-card h3,.feature-card h3{font-size:1.12rem;margin-bottom:10px}
    .info-card p,.feature-card p,.quote-card p{color:var(--muted);font-size:.94rem;margin:0}
    .topic-board{background:#fff;border:1px solid var(--line);border-radius:28px;padding:14px}
    .topic-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 20px;border-bottom:1px solid var(--line)}
    .topic-row:last-child{border-bottom:0}
    .topic-row:hover{background:var(--soft);border-radius:17px}
    .topic-row h3{font-size:1.08rem;margin:0 0 4px}
    .topic-row p{color:var(--muted);margin:0;font-size:.9rem}
    .topic-tag{color:var(--plum);background:var(--soft);border-radius:99px;padding:5px 11px;font-size:.78rem;font-weight:800;white-space:nowrap}
    .step{position:relative;padding-left:62px;min-height:88px}
    .step-number{position:absolute;left:0;top:0;width:42px;height:42px;border-radius:14px;background:var(--plum);color:#fff;display:grid;place-items:center;font-weight:800}
    .step:not(:last-child):after{content:"";position:absolute;left:20px;top:47px;width:2px;height:42px;background:#dec6da}
    .step h3{font-size:1.05rem;margin:0 0 5px}
    .step p{color:var(--muted);font-size:.92rem;margin:0}
    .quote-card{background:#fff8f0;border-color:#f1dfc7}
    .quote-mark{font-size:2.3rem;color:var(--rose);line-height:1}
    .faq-wrap{max-width:860px}
    .accordion-item{border:1px solid var(--line)!important;border-radius:15px!important;overflow:hidden;margin-bottom:12px;background:#fff}
    .accordion-button{font-weight:700;color:var(--ink);background:#fff;padding:20px 22px;box-shadow:none!important}
    .accordion-button:not(.collapsed){color:var(--plum);background:var(--soft)}
    .accordion-body{color:var(--muted);padding:0 22px 22px}
    .cta{padding:58px 25px;background:linear-gradient(120deg,#f6e4ef,#fff5e7);border:1px solid #edd8e6;border-radius:30px;text-align:center}
    .cta p{max-width:660px;margin:0 auto 24px;color:var(--muted)}
    footer{background:#261a28;color:#fff;padding:48px 0 25px}
    footer .brand{color:#fff}
    footer p,footer a{color:rgba(255,255,255,.62);font-size:.9rem}
    footer a:hover{color:#fff}
    .footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:35px;padding-top:20px;font-size:.8rem;color:rgba(255,255,255,.45)}
    @media(max-width:991px){
      .navbar{min-height:68px}.brand{font-size:.92rem}.brand-mark{width:34px;height:34px}
      .search-box{display:none}.hero{padding:52px 0 62px}.coupon-panel{margin-top:30px}
      .section{padding:66px 0}
    }
    @media(max-width:575px){
      h1{font-size:2.45rem}.hero-actions .btn-main,.hero-actions .btn-ghost{width:100%}
      .coupon-panel{padding:24px;min-height:330px}.coupon-panel h2{font-size:1.75rem}
      .topic-row{align-items:flex-start;padding:18px 12px}.topic-tag{margin-top:3px}
      .info-card,.feature-card,.quote-card{padding:22px}
    }