/* roulang page: index */
:root{
      --ink:#f5f3ef;--muted:#a9adb8;--deep:#10131c;--panel:#181c28;--panel2:#202535;
      --line:rgba(255,255,255,.11);--accent:#ffb35c;--accent2:#ed6c74;--light:#fffaf2;
      --shadow:0 18px 50px rgba(0,0,0,.25);--radius:22px;--max:1180px;
    }
    *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--deep);color:var(--ink);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;line-height:1.8;font-size:16px}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button,input{font:inherit}.container{width:min(calc(100% - 40px),var(--max));margin:auto}
    .topline{height:4px;background:linear-gradient(90deg,var(--accent2),var(--accent),#ffe0a5)}
    header{position:relative;background:rgba(16,19,28,.94);border-bottom:1px solid var(--line);z-index:10}.brand-row{display:flex;align-items:center;justify-content:space-between;min-height:76px}.brand{display:flex;gap:13px;align-items:center;font-size:21px;font-weight:800;letter-spacing:.02em}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--accent);color:#171923;font-size:18px;box-shadow:0 8px 20px rgba(255,179,92,.22)}.nav-actions{display:flex;align-items:center;gap:12px}.nav-link{padding:9px 17px;border-radius:999px;color:var(--muted);transition:.25s}.nav-link:hover,.nav-link.active{background:rgba(255,179,92,.12);color:var(--accent)}.nav-cta{padding:10px 18px;border:1px solid rgba(255,179,92,.5);color:var(--accent);border-radius:999px;font-weight:700}.channel-bar{border-top:1px solid var(--line);overflow:auto;white-space:nowrap}.channel-inner{display:flex;gap:10px;padding:13px 0}.channel-tag{font-size:13px;color:#c7cad1;padding:6px 13px;border:1px solid var(--line);border-radius:999px;transition:.2s}.channel-tag:hover,.channel-tag.active{border-color:var(--accent);color:var(--accent);background:rgba(255,179,92,.08)}
    .hero{position:relative;min-height:570px;display:flex;align-items:flex-end;overflow:hidden;background:radial-gradient(circle at 75% 28%,rgba(237,108,116,.28),transparent 31%),radial-gradient(circle at 15% 80%,rgba(255,179,92,.13),transparent 30%),#111521}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,19,28,.98) 0%,rgba(16,19,28,.76) 45%,rgba(16,19,28,.2) 100%)}.hero-art{position:absolute;right:7%;top:13%;width:390px;height:390px;border:1px solid rgba(255,255,255,.1);border-radius:48% 52% 55% 45%;transform:rotate(-17deg);background:linear-gradient(145deg,rgba(255,179,92,.2),rgba(237,108,116,.08));box-shadow:0 0 100px rgba(237,108,116,.12)}.hero-art:after{content:"中文字幕 · 私密 · 顺畅";position:absolute;inset:95px 40px;display:grid;place-items:center;text-align:center;color:var(--accent);font-size:23px;font-weight:800;letter-spacing:.1em;border:1px solid rgba(255,179,92,.35);border-radius:28px;transform:rotate(17deg)}.hero-content{position:relative;padding:88px 0 76px;max-width:690px}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.eyebrow:before{content:"";width:24px;height:2px;background:var(--accent)}h1,h2,h3{margin:0;color:var(--ink);line-height:1.25;letter-spacing:-.035em}h1{font-size:clamp(42px,6vw,76px);margin:20px 0 23px}.hero p{color:#d2d3d7;font-size:18px;max-width:650px;margin:0 0 30px}.actions{display:flex;flex-wrap:wrap;gap:13px}.button{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;padding:13px 22px;font-weight:800;transition:.25s;border:1px solid transparent}.button.primary{background:var(--accent);color:#171923;box-shadow:0 10px 25px rgba(255,179,92,.2)}.button.primary:hover{background:#ffd08a;transform:translateY(-2px)}.button.ghost{border-color:var(--line);color:var(--ink)}.button.ghost:hover{border-color:var(--accent);color:var(--accent)}.hero-meta{display:flex;gap:26px;margin-top:38px;color:var(--muted);font-size:13px}.hero-meta strong{display:block;color:var(--light);font-size:21px}
    section{padding:88px 0}.section-head{display:flex;justify-content:space-between;gap:25px;align-items:end;margin-bottom:34px}.section-head h2{font-size:clamp(28px,4vw,44px)}.section-head p{max-width:520px;margin:0;color:var(--muted)}.warm{background:var(--light);color:#202331}.warm h2,.warm h3{color:#202331}.warm .section-head p{color:#646875}
    .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.step{padding:28px;background:#fff;border:1px solid #eee7dc;border-radius:var(--radius);position:relative}.step-num{color:var(--accent2);font-size:13px;font-weight:900;letter-spacing:.1em}.step h3{margin:13px 0 8px;font-size:21px}.step p{margin:0;color:#666b78;font-size:14px}
    .compare{background:#151925}.compare-grid{display:grid;grid-template-columns:1fr 1.08fr 1fr;gap:16px;align-items:stretch}.plan{padding:30px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);display:flex;flex-direction:column}.plan.featured{border-color:var(--accent);background:linear-gradient(150deg,#282433,#1c202d);box-shadow:var(--shadow);transform:translateY(-12px)}.plan-label{font-size:13px;color:var(--accent);font-weight:800}.plan h3{font-size:25px;margin:13px 0 4px}.plan .price{font-size:34px;font-weight:900;margin-bottom:22px}.plan .price small{font-size:13px;color:var(--muted);font-weight:400}.plan ul{list-style:none;margin:0 0 25px;padding:0;color:var(--muted);font-size:14px;flex:1}.plan li{padding:9px 0;border-bottom:1px solid var(--line)}.plan li:before{content:"✓";color:var(--accent);margin-right:9px}.plan .button{width:100%}
    .assurance{padding:24px 0;background:#0c0f17;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.assurance-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.assurance-item{display:flex;gap:12px;align-items:center;color:#d8d9df;font-size:14px}.assurance-icon{width:38px;height:38px;flex:none;border-radius:12px;background:rgba(255,179,92,.12);display:grid;place-items:center;color:var(--accent);font-weight:900}
    .news-layout{display:grid;grid-template-columns:1.35fr .65fr;gap:22px}.news-list,.feature-note{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);overflow:hidden}.news-item{display:flex;justify-content:space-between;gap:20px;padding:21px 25px;border-bottom:1px solid var(--line);transition:.2s}.news-item:last-child{border:0}.news-item:hover{background:var(--panel2)}.news-item strong{font-size:16px}.news-item span{color:var(--muted);font-size:13px;white-space:nowrap}.feature-note{padding:30px;background:linear-gradient(145deg,#28202a,#1b202c)}.feature-note h3{font-size:25px;margin:13px 0}.feature-note p{color:var(--muted);font-size:14px}.mini-tag{display:inline-block;color:var(--accent);font-size:12px;padding:5px 10px;border:1px solid rgba(255,179,92,.4);border-radius:999px}
    .faq{background:#f5f1e9;color:#232532}.faq h2{color:#232532}.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.faq-item{background:#fff;border-radius:16px;padding:22px 24px;border:1px solid #ebe5da}.faq-item h3{font-size:17px;margin-bottom:9px}.faq-item p{margin:0;color:#686c78;font-size:14px}
    .limited{padding:70px 0;background:linear-gradient(115deg,#ef787b,#c95b70);text-align:center}.limited h2{font-size:clamp(30px,4vw,49px)}.limited p{max-width:620px;margin:17px auto 26px;color:#fff1ec}.limited .button.primary{background:#fff;color:#a34a5a}.limited .button.primary:hover{background:#fff4dc}
    footer{padding:50px 0 25px;background:#0c0f17;color:var(--muted)}.footer-top{display:flex;justify-content:space-between;gap:35px;padding-bottom:38px;border-bottom:1px solid var(--line)}.footer-brand{max-width:330px}.footer-brand .brand{color:var(--ink);margin-bottom:15px}.footer-brand p{font-size:13px;margin:0}.footer-links{display:flex;gap:17px;align-items:center;font-size:13px}.footer-links a:hover{color:var(--accent)}.copyright{display:flex;justify-content:space-between;gap:15px;padding-top:20px;font-size:12px}
    a:focus-visible,.button:focus-visible{outline:3px solid #fff;outline-offset:3px}@media(max-width:900px){.hero-art{right:-100px;opacity:.55}.compare-grid{grid-template-columns:1fr}.plan.featured{transform:none}.assurance-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.container{width:min(calc(100% - 28px),var(--max))}.brand-row{min-height:66px}.brand{font-size:17px}.nav-actions .nav-link{display:none}.nav-cta{font-size:13px;padding:8px 12px}.hero{min-height:600px}.hero-content{padding:76px 0 60px}.hero p{font-size:16px}.hero-meta{gap:15px;flex-wrap:wrap}section{padding:62px 0}.section-head{display:block}.section-head p{margin-top:13px}.steps,.faq-grid,.news-layout{grid-template-columns:1fr}.news-item{padding:18px}.footer-top,.copyright{display:block}.footer-links{margin-top:25px;flex-wrap:wrap}.copyright span{display:block;margin-top:8px}.hero-art{width:270px;height:270px;top:16%;right:-80px}.hero-art:after{inset:64px 24px;font-size:15px}.assurance-grid{grid-template-columns:1fr 1fr;gap:13px}.assurance-item{font-size:12px}.assurance-icon{width:32px;height:32px}}@media(max-width:420px){h1{font-size:39px}.actions .button{width:100%}.assurance-grid{grid-template-columns:1fr}.channel-inner{padding:10px 0}}

/* roulang page: category1 */
:root{
            --ink:#f5f3ef;
            --muted:#a9adb8;
            --deep:#10131c;
            --panel:#181c28;
            --panel2:#202535;
            --line:rgba(255,255,255,.11);
            --accent:#ffb35c;
            --accent2:#ed6c74;
            --light:#fffaf2;
            --cream:#f5f1e9;
            --dark-text:#232532;
            --shadow:0 18px 50px rgba(0,0,0,.25);
            --radius:22px;
            --max:1180px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            background:var(--deep);
            color:var(--ink);
            font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
            font-size:16px;
            line-height:1.8;
        }
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%}
        button,input{font:inherit}
        h1,h2,h3,p{margin-top:0}
        h1,h2,h3{line-height:1.25;letter-spacing:-.025em}
        .container{width:min(calc(100% - 40px),var(--max));margin:0 auto}
        header{
            position:relative;
            z-index:10;
            background:rgba(16,19,28,.96);
            border-bottom:1px solid var(--line);
        }
        .brand-row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            min-height:76px;
        }
        .brand{
            display:flex;
            align-items:center;
            gap:13px;
            font-size:21px;
            font-weight:800;
            letter-spacing:.02em;
            white-space:nowrap;
        }
        .brand-mark{
            display:grid;
            place-items:center;
            width:38px;
            height:38px;
            border-radius:12px;
            background:var(--accent);
            color:#171923;
            font-size:18px;
            box-shadow:0 8px 20px rgba(255,179,92,.22);
        }
        .nav-actions{display:flex;align-items:center;gap:12px}
        .nav-link,.nav-cta{
            transition:background .25s,color .25s,border-color .25s,transform .25s;
        }
        .nav-link{
            padding:9px 17px;
            border-radius:999px;
            color:var(--muted);
        }
        .nav-link:hover,.nav-link.active{
            background:rgba(255,179,92,.12);
            color:var(--accent);
        }
        .nav-cta{
            padding:10px 18px;
            border:1px solid rgba(255,179,92,.5);
            border-radius:999px;
            color:var(--accent);
            font-weight:700;
        }
        .nav-cta:hover{
            background:var(--accent);
            color:#171923;
            transform:translateY(-2px);
        }
        .channel-bar{
            border-top:1px solid rgba(255,255,255,.06);
            background:#141823;
        }
        .channel-inner{
            display:flex;
            align-items:center;
            gap:10px;
            min-height:48px;
            overflow-x:auto;
            scrollbar-width:none;
        }
        .channel-inner::-webkit-scrollbar{display:none}
        .channel-tag{
            flex:0 0 auto;
            padding:5px 13px;
            border:1px solid var(--line);
            border-radius:999px;
            color:#c7cad1;
            font-size:13px;
            transition:.2s;
        }
        .channel-tag:hover,.channel-tag.active{
            border-color:var(--accent);
            color:var(--accent);
            background:rgba(255,179,92,.08);
        }
        .sub-hero{
            position:relative;
            overflow:hidden;
            background:
                radial-gradient(circle at 84% 25%,rgba(237,108,116,.22),transparent 28%),
                linear-gradient(110deg,#171b28 0%,#111521 72%);
            border-bottom:1px solid var(--line);
        }
        .sub-hero:after{
            content:"字幕";
            position:absolute;
            right:8%;
            top:50%;
            transform:translateY(-50%) rotate(-8deg);
            color:rgba(255,179,92,.08);
            font-size:clamp(100px,18vw,230px);
            font-weight:900;
            line-height:1;
            pointer-events:none;
        }
        .sub-hero-inner{
            position:relative;
            z-index:1;
            display:grid;
            grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
            gap:60px;
            align-items:center;
            min-height:390px;
            padding:66px 0;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            margin-bottom:18px;
            color:var(--accent);
            font-size:13px;
            font-weight:800;
            letter-spacing:.12em;
        }
        .eyebrow:before{
            content:"";
            width:24px;
            height:2px;
            background:var(--accent);
        }
        .sub-hero h1{
            max-width:740px;
            margin-bottom:20px;
            color:var(--light);
            font-size:clamp(36px,5vw,64px);
        }
        .sub-hero p{
            max-width:650px;
            margin-bottom:0;
            color:#d2d3d7;
            font-size:18px;
        }
        .status-panel{
            padding:25px;
            border:1px solid rgba(255,255,255,.13);
            border-radius:var(--radius);
            background:rgba(32,37,53,.72);
            box-shadow:var(--shadow);
            backdrop-filter:blur(10px);
        }
        .panel-kicker{
            color:var(--accent);
            font-size:12px;
            font-weight:800;
            letter-spacing:.1em;
        }
        .status-panel h2{
            margin:9px 0 15px;
            font-size:25px;
        }
        .status-line{
            display:flex;
            justify-content:space-between;
            gap:16px;
            padding:12px 0;
            border-top:1px solid var(--line);
            color:var(--muted);
            font-size:14px;
        }
        .status-line strong{color:var(--ink);font-weight:700}
        section{padding:84px 0}
        .section-head{
            display:flex;
            align-items:end;
            justify-content:space-between;
            gap:30px;
            margin-bottom:34px;
        }
        .section-head h2{
            max-width:580px;
            margin:0;
            color:var(--light);
            font-size:clamp(28px,4vw,44px);
        }
        .section-head p{
            max-width:470px;
            margin:0;
            color:var(--muted);
        }
        .pain-solution{
            display:grid;
            grid-template-columns:.82fr 1.18fr;
            gap:18px;
        }
        .dark-card,.solution-card,.quote-card,.process-card{
            border:1px solid var(--line);
            border-radius:var(--radius);
            background:var(--panel);
        }
        .dark-card{padding:30px}
        .dark-card h3,.solution-card h3{font-size:24px;margin:13px 0 12px}
        .dark-card p,.solution-card p{color:var(--muted);font-size:14px}
        .solution-card{
            padding:30px;
            background:linear-gradient(145deg,#252533,#1a202d);
        }
        .mini-tag{
            display:inline-block;
            padding:5px 10px;
            border:1px solid rgba(255,179,92,.4);
            border-radius:999px;
            color:var(--accent);
            font-size:12px;
        }
        .check-list{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:12px 20px;
            margin:24px 0 0;
            padding:0;
            list-style:none;
        }
        .check-list li{
            position:relative;
            padding-left:25px;
            color:#d8d9df;
            font-size:14px;
        }
        .check-list li:before{
            content:"✓";
            position:absolute;
            left:0;
            top:1px;
            color:var(--accent);
            font-weight:900;
        }
        .features-section{background:var(--cream);color:var(--dark-text)}
        .features-section .section-head h2{color:var(--dark-text)}
        .features-section .section-head p{color:#686c78}
        .feature-grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:16px;
        }
        .feature-card{
            min-height:210px;
            padding:26px;
            border:1px solid #e7dfd2;
            border-radius:20px;
            background:#fff;
            transition:transform .25s,box-shadow .25s;
        }
        .feature-card:hover{transform:translateY(-5px);box-shadow:0 15px 35px rgba(75,60,40,.12)}
        .feature-number{
            display:inline-grid;
            place-items:center;
            width:34px;
            height:34px;
            margin-bottom:20px;
            border-radius:10px;
            background:#fff0d8;
            color:#ad6730;
            font-size:13px;
            font-weight:800;
        }
        .feature-card h3{margin-bottom:9px;font-size:19px}
        .feature-card p{margin:0;color:#686c78;font-size:14px}
        .flow-section{background:#151a26}
        .flow-layout{
            display:grid;
            grid-template-columns:.7fr 1.3fr;
            gap:45px;
            align-items:start;
        }
        .flow-intro p{color:var(--muted)}
        .flow-list{border-top:1px solid var(--line)}
        .flow-item{
            display:grid;
            grid-template-columns:58px 1fr;
            gap:20px;
            padding:23px 0;
            border-bottom:1px solid var(--line);
        }
        .flow-index{color:var(--accent);font-size:20px;font-weight:800}
        .flow-item h3{margin:0 0 6px;font-size:18px}
        .flow-item p{margin:0;color:var(--muted);font-size:14px}
        .evidence{
            display:grid;
            grid-template-columns:1.1fr .9fr;
            gap:18px;
        }
        .quote-card{
            padding:34px;
            background:linear-gradient(140deg,#282332,#1c202d);
        }
        .quote-mark{color:var(--accent);font-size:48px;line-height:.8}
        blockquote{
            margin:16px 0 25px;
            color:#eeeae3;
            font-size:21px;
            line-height:1.65;
        }
        .quote-author{color:var(--muted);font-size:13px}
        .metric-panel{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:1px;
            overflow:hidden;
            border:1px solid var(--line);
            border-radius:var(--radius);
            background:var(--line);
        }
        .metric{
            padding:27px 22px;
            background:var(--panel);
        }
        .metric strong{display:block;color:var(--accent);font-size:31px;line-height:1.2}
        .metric span{color:var(--muted);font-size:13px}
        .faq{
            background:var(--cream);
            color:var(--dark-text);
        }
        .faq h2{color:var(--dark-text)}
        .faq-grid{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:14px;
        }
        .faq-item{
            padding:22px 24px;
            border:1px solid #ebe5da;
            border-radius:16px;
            background:#fff;
        }
        .faq-item h3{margin-bottom:9px;font-size:17px}
        .faq-item p{margin:0;color:#686c78;font-size:14px}
        .limited{
            padding:70px 0;
            background:linear-gradient(110deg,#8c4356,#b35f63);
        }
        .limited-inner{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:30px;
        }
        .limited h2{margin-bottom:10px;color:#fff8ef;font-size:clamp(28px,4vw,42px)}
        .limited p{max-width:650px;margin:0;color:#f7dfe0}
        .button{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:13px 22px;
            border:1px solid transparent;
            border-radius:12px;
            font-weight:800;
            transition:.25s;
        }
        .button.primary{background:#fff;color:#a34a5a;box-shadow:0 10px 25px rgba(0,0,0,.12)}
        .button.primary:hover{background:#fff4dc;transform:translateY(-2px)}
        .button.ghost{border-color:var(--line);color:var(--ink)}
        .button.ghost:hover{border-color:var(--accent);color:var(--accent)}
        footer{padding:50px 0 25px;background:#0c0f17;color:var(--muted)}
        .footer-top{
            display:flex;
            justify-content:space-between;
            gap:35px;
            padding-bottom:38px;
            border-bottom:1px solid var(--line);
        }
        .footer-brand{max-width:330px}
        .footer-brand .brand{margin-bottom:15px;color:var(--ink)}
        .footer-brand p{margin:0;font-size:13px}
        .footer-links{display:flex;align-items:center;gap:17px;font-size:13px}
        .footer-links a:hover{color:var(--accent)}
        .copyright{
            display:flex;
            justify-content:space-between;
            gap:15px;
            padding-top:20px;
            font-size:12px;
        }
        a:focus-visible,.button:focus-visible{outline:3px solid #fff;outline-offset:3px}
        @media (max-width:1024px){
            .sub-hero-inner{gap:30px}
            .feature-grid{grid-template-columns:repeat(2,1fr)}
        }
        @media (max-width:768px){
            .container{width:min(calc(100% - 28px),var(--max))}
            .brand-row{min-height:66px}
            .brand{font-size:17px}
            .nav-actions .nav-link{display:none}
            .nav-cta{padding:8px 12px;font-size:13px}
            .sub-hero-inner,.pain-solution,.flow-layout,.evidence{grid-template-columns:1fr}
            .sub-hero-inner{min-height:auto;padding:58px 0}
            .sub-hero:after{right:-4%;top:19%;font-size:150px}
            .sub-hero p{font-size:16px}
            section{padding:62px 0}
            .section-head{display:block}
            .section-head p{margin-top:13px}
            .check-list,.faq-grid{grid-template-columns:1fr}
            .feature-grid{grid-template-columns:1fr}
            .limited-inner{display:block}
            .limited .button{margin-top:25px}
            .footer-top,.copyright{display:block}
            .footer-links{margin-top:25px;flex-wrap:wrap}
            .copyright span{display:block;margin-top:8px}
        }
        @media (max-width:520px){
            .brand{gap:8px;font-size:15px}
            .brand-mark{width:34px;height:34px;border-radius:10px}
            .sub-hero h1{font-size:36px}
            .status-panel,.dark-card,.solution-card,.quote-card{padding:23px}
            .metric-panel{grid-template-columns:1fr}
            blockquote{font-size:18px}
        }