/* roulang page: index */
:root {
            --coral: #ef6d51;
            --coral-dark: #d9573e;
            --apricot: #fff0e8;
            --mint: #dff5ed;
            --mint-dark: #187b68;
            --ink: #242728;
            --muted: #707876;
            --line: #e9e3de;
            --paper: #fffdfb;
            --white: #ffffff;
            --shadow: 0 16px 40px rgba(43, 38, 33, .08);
            --radius: 18px;
            --container: 1200px;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body {
            background: var(--paper);
            color: var(--ink);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
            font-size: 16px;
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }
        a { color: inherit; text-decoration: none; }
        img { display: block; max-width: 100%; }
        button, input { font: inherit; }
        button { border: 0; cursor: pointer; }
        .container { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; }
        .topline { height: 4px; background: var(--coral); }
        .site-header {
            position: sticky; top: 0; z-index: 20;
            background: rgba(255,253,251,.96);
            border-bottom: 1px solid rgba(233,227,222,.9);
            backdrop-filter: blur(12px);
        }
        .nav-wrap { min-height: 78px; display: flex; align-items: center; gap: 34px; }
        .brand { display: inline-flex; align-items: center; gap: 11px; min-width: 235px; }
        .brand-mark {
            width: 38px; height: 38px; border-radius: 12px 12px 12px 4px;
            background: var(--coral); color: white; display: grid; place-items: center;
            font-size: 18px; font-weight: 800;
        }
        .brand-text strong { display: block; font-size: 18px; line-height: 1.2; letter-spacing: 0; }
        .brand-text small { color: var(--muted); font-size: 11px; display: block; margin-top: 2px; }
        .main-nav { display: flex; align-items: center; gap: 25px; flex: 1; }
        .main-nav a { position: relative; color: #535b58; font-size: 14px; white-space: nowrap; padding: 27px 0 24px; }
        .main-nav a:hover, .main-nav a.active { color: var(--coral-dark); }
        .main-nav a.active:after, .main-nav a:hover:after {
            content: ""; position: absolute; left: 0; right: 0; bottom: 17px; height: 3px;
            border-radius: 3px; background: var(--coral);
        }
        .nav-actions { display: flex; align-items: center; gap: 10px; }
        .button {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            border-radius: 9px; padding: 11px 17px; font-weight: 700; font-size: 14px;
            transition: .2s ease; border: 1px solid transparent;
        }
        .button-primary { color: white; background: var(--coral); box-shadow: 0 7px 16px rgba(239,109,81,.2); }
        .button-primary:hover { background: var(--coral-dark); transform: translateY(-2px); }
        .button-light { color: var(--coral-dark); background: var(--apricot); }
        .button-light:hover { background: #ffe2d5; }
        .button-outline { color: var(--ink); border-color: var(--line); background: var(--white); }
        .button-outline:hover { border-color: var(--coral); color: var(--coral-dark); }
        .menu-toggle { display: none; background: transparent; color: var(--ink); font-size: 24px; padding: 5px; }
        .hero {
            min-height: 620px; display: flex; align-items: center; overflow: hidden;
            background: #fff4ed; position: relative;
        }
        .hero:before {
            content: ""; position: absolute; width: 420px; height: 420px; right: 8%; top: 70px;
            border: 1px solid rgba(239,109,81,.2); border-radius: 50%;
        }
        .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 70px; position: relative; z-index: 1; }
        .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--coral-dark); font-size: 13px; font-weight: 800; letter-spacing: 1px; margin-bottom: 18px; }
        .eyebrow:before { content: ""; width: 24px; height: 3px; border-radius: 3px; background: var(--coral); }
        h1 { font-size: clamp(40px, 5vw, 60px); line-height: 1.18; letter-spacing: 0; margin-bottom: 22px; }
        .hero-copy { color: #626967; max-width: 590px; font-size: 18px; line-height: 1.85; }
        .hero-actions { display: flex; gap: 12px; margin-top: 30px; }
        .hero-note { display: flex; gap: 20px; margin-top: 28px; color: var(--muted); font-size: 13px; }
        .hero-note span { display: flex; align-items: center; gap: 7px; }
        .hero-note i { width: 7px; height: 7px; background: var(--mint-dark); border-radius: 50%; }
        .device-stage { min-height: 430px; position: relative; display: grid; place-items: center; }
        .phone {
            width: 218px; height: 420px; background: #202b2a; border: 8px solid #18201f;
            border-radius: 30px; padding: 13px; box-shadow: 24px 28px 0 rgba(239,109,81,.18), var(--shadow);
            transform: rotate(5deg); position: relative; z-index: 2;
        }
        .phone-screen { height: 100%; border-radius: 19px; overflow: hidden; background: #fbfaf6; }
        .screen-head { background: var(--coral); color: #fff; padding: 19px 14px 22px; }
        .screen-head small { opacity: .8; font-size: 10px; }
        .screen-head strong { display: block; font-size: 19px; margin-top: 6px; }
        .screen-body { padding: 13px; }
        .screen-banner { height: 82px; border-radius: 12px; background: var(--mint); padding: 12px; color: var(--mint-dark); font-weight: 800; font-size: 12px; }
        .screen-lines { margin-top: 16px; display: grid; gap: 10px; }
        .screen-line { height: 45px; background: #fff; border: 1px solid #eee8e2; border-radius: 10px; padding: 8px; }
        .screen-line b { display: block; width: 72%; height: 7px; background: #d9dfdc; border-radius: 4px; }
        .screen-line em { display: block; width: 45%; height: 6px; margin-top: 8px; background: #eee9e4; border-radius: 4px; }
        .float-panel { position: absolute; right: 1%; bottom: 38px; width: 190px; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow); }
        .float-panel small { color: var(--muted); font-size: 11px; }
        .float-panel strong { display: block; font-size: 23px; margin: 4px 0; }
        .float-panel span { color: var(--mint-dark); font-size: 12px; font-weight: 700; }
        section { padding: 96px 0; }
        .section-head { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin-bottom: 34px; }
        .section-kicker { color: var(--coral-dark); font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; }
        h2 { font-size: 34px; line-height: 1.25; margin-top: 7px; }
        .section-intro { color: var(--muted); max-width: 550px; }
        .entry-band { background: #fff; border-bottom: 1px solid var(--line); padding: 25px 0; }
        .entry-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
        .entry { padding: 18px 15px; border-right: 1px solid var(--line); transition: .2s; }
        .entry:last-child { border: 0; }
        .entry:hover { color: var(--coral-dark); transform: translateY(-3px); }
        .entry-icon { font-size: 23px; margin-bottom: 7px; }
        .entry strong { display: block; font-size: 15px; }
        .entry small { color: var(--muted); font-size: 12px; line-height: 1.5; display: block; margin-top: 4px; }
        .experience { background: var(--paper); }
        .experience-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: center; }
        .experience h2 { max-width: 390px; }
        .experience-copy { color: var(--muted); margin-top: 18px; }
        .scene-list { display: grid; gap: 13px; }
        .scene { display: grid; grid-template-columns: 55px 1fr auto; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--line); padding: 20px; border-radius: var(--radius); transition: .2s; }
        .scene:hover { border-color: var(--coral); box-shadow: var(--shadow); }
        .scene-num { color: var(--coral); font-weight: 800; font-size: 22px; }
        .scene h3 { font-size: 18px; }
        .scene p { color: var(--muted); font-size: 14px; margin-top: 3px; }
        .arrow { color: var(--coral); font-size: 22px; }
        .download { background: var(--mint); }
        .download-grid { display: grid; grid-template-columns: 1fr .9fr; gap: 60px; align-items: center; }
        .download h2 { max-width: 450px; }
        .download-copy { color: #4d7169; margin: 16px 0 25px; }
        .download-tools { display: flex; align-items: center; gap: 20px; }
        .qr { width: 104px; height: 104px; border: 10px solid #fff; background: repeating-linear-gradient(45deg, #193f37 0 5px, #fff 5px 10px); border-radius: 8px; }
        .download-status { color: var(--mint-dark); font-size: 13px; margin-top: 14px; }
        .download-status b { color: var(--ink); }
        .app-preview { display: flex; align-items: end; justify-content: center; gap: 18px; }
        .mini-phone { width: 145px; height: 275px; border: 6px solid #173c35; border-radius: 23px; background: #fff; padding: 8px; box-shadow: 12px 16px 0 rgba(24,123,104,.13); }
        .mini-phone.tall { height: 330px; background: #fff8f2; }
        .mini-top { height: 45px; background: var(--coral); border-radius: 13px 13px 5px 5px; margin-bottom: 10px; }
        .mini-block { height: 62px; border-radius: 9px; background: #e2f3ed; margin: 8px 0; }
        .mini-block.short { height: 35px; background: #f9e4d7; }
        .steps { background: #fff; }
        .step-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .step { border-top: 3px solid var(--line); padding-top: 20px; }
        .step b { color: var(--coral); font-size: 28px; }
        .step h3 { font-size: 18px; margin: 8px 0 5px; }
        .step p { color: var(--muted); font-size: 14px; }
        .features { background: #f8f5f1; }
        .feature-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
        .feature-main { background: var(--coral); color: white; padding: 38px; border-radius: var(--radius); min-height: 280px; }
        .feature-main h3 { font-size: 27px; max-width: 320px; line-height: 1.4; }
        .feature-main p { margin-top: 18px; opacity: .88; max-width: 380px; }
        .feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .feature-item { background: white; border: 1px solid var(--line); padding: 21px; border-radius: 14px; }
        .feature-item h3 { font-size: 16px; }
        .feature-item p { color: var(--muted); font-size: 13px; margin-top: 5px; }
        .latest { background: #fff; }
        .latest-layout { display: grid; grid-template-columns: 1.12fr .88fr; gap: 25px; }
        .lead-news { background: #fff1e9; padding: 30px; border-radius: var(--radius); min-height: 260px; display: flex; flex-direction: column; justify-content: end; }
        .badge { display: inline-flex; width: fit-content; color: var(--mint-dark); background: var(--mint); border-radius: 5px; padding: 3px 9px; font-size: 12px; font-weight: 700; }
        .lead-news h3 { font-size: 25px; margin: 14px 0 8px; line-height: 1.45; }
        .news-meta { color: var(--muted); font-size: 12px; }
        .news-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
        .news-item { display: grid; grid-template-columns: 82px 1fr; gap: 17px; padding: 17px 0; border-bottom: 1px solid var(--line); }
        .news-date { color: var(--coral-dark); font-size: 13px; font-weight: 800; }
        .news-item h3 { font-size: 16px; line-height: 1.5; }
        .news-item p { color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
        .empty-state { padding: 28px; color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; }
        .activity { background: #fff8f3; }
        .activity-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
        .activity-card { background: #fff; border: 1px solid var(--line); padding: 23px; border-radius: 14px; }
        .activity-card time { color: var(--coral-dark); font-size: 12px; font-weight: 800; }
        .activity-card h3 { font-size: 18px; margin: 10px 0 5px; }
        .activity-card p { color: var(--muted); font-size: 14px; }
        .preview { background: #f5faf7; }
        .preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
        .preview-copy p { color: var(--muted); margin: 17px 0 22px; }
        .preview-tags { display: flex; flex-wrap: wrap; gap: 8px; }
        .tag { background: white; border: 1px solid #cfe8de; color: var(--mint-dark); padding: 7px 12px; border-radius: 6px; font-size: 13px; }
        .starter { background: #fff; }
        .starter-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .starter-item { padding: 26px; border: 1px solid var(--line); border-radius: 14px; }
        .starter-item span { color: var(--coral); font-size: 13px; font-weight: 800; }
        .starter-item h3 { font-size: 18px; margin: 10px 0 5px; }
        .starter-item p { color: var(--muted); font-size: 14px; }
        .safety { background: var(--apricot); }
        .safety-box { display: flex; align-items: center; gap: 25px; padding: 26px 30px; border-left: 5px solid var(--coral); background: white; border-radius: 10px; }
        .safety-box strong { font-size: 18px; }
        .safety-box p { color: var(--muted); font-size: 14px; }
        .trend { background: #fff; }
        .trend-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 20px; }
        .trend-main, .trend-side { padding: 26px; border-radius: 15px; border: 1px solid var(--line); }
        .trend-main { background: #eff8f4; }
        .trend-main h3 { font-size: 23px; margin: 13px 0 7px; }
        .trend-main p, .trend-side p { color: var(--muted); font-size: 14px; }
        .trend-side { display: grid; align-content: center; gap: 16px; }
        .trend-side a { padding-bottom: 15px; border-bottom: 1px solid var(--line); font-weight: 700; }
        .trend-side a:hover { color: var(--coral-dark); }
        .faq { background: #f8f5f1; }
        .faq-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; }
        .faq-intro p { color: var(--muted); margin-top: 15px; }
        details { border-bottom: 1px solid var(--line); padding: 18px 0; }
        summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; }
        summary:after { content: "+"; color: var(--coral); font-size: 22px; line-height: 1; }
        details[open] summary:after { content: "−"; }
        details p { color: var(--muted); font-size: 14px; padding: 10px 25px 0 0; }
        .closing { padding: 65px 0; background: var(--coral); color: white; }
        .closing-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
        .closing h2 { font-size: 30px; margin: 0; }
        .closing p { opacity: .86; margin-top: 7px; }
        .closing .button-primary { background: white; color: var(--coral-dark); box-shadow: none; }
        .closing .button-light { background: #d9573e; color: white; }
        .site-footer { background: #252b2a; color: #fff; padding: 60px 0 25px; }
        .footer-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 45px; }
        .footer-brand p { color: #a9b1ad; font-size: 14px; max-width: 280px; margin-top: 15px; }
        .site-footer h3 { font-size: 15px; margin-bottom: 15px; }
        .footer-links { display: grid; gap: 8px; }
        .footer-links a { color: #a9b1ad; font-size: 13px; }
        .footer-links a:hover { color: #fff; }
        .footer-bottom { border-top: 1px solid #3b4441; padding-top: 20px; color: #8f9994; font-size: 12px; display: flex; justify-content: space-between; gap: 20px; }
        :focus-visible { outline: 3px solid rgba(239,109,81,.35); outline-offset: 3px; }
        @media (max-width: 1024px) {
            .nav-wrap { gap: 18px; } .brand { min-width: 190px; } .main-nav { gap: 13px; }
            .main-nav a { font-size: 13px; } .nav-actions .button-light { display: none; }
            .hero-grid, .download-grid, .experience-grid, .preview-grid { gap: 40px; }
        }
        @media (max-width: 768px) {
            .container { width: min(100% - 32px, 600px); }
            .nav-wrap { min-height: 67px; justify-content: space-between; }
            .main-nav, .nav-actions { display: none; }
            .menu-toggle { display: block; }
            .brand { min-width: auto; }
            .hero { min-height: auto; padding: 70px 0 45px; }
            .hero-grid, .experience-grid, .download-grid, .preview-grid, .latest-layout, .feature-layout, .trend-grid, .faq-grid { grid-template-columns: 1fr; }
            .hero-copy { font-size: 16px; } h1 { font-size: 40px; }
            .device-stage { min-height: 390px; margin-top: 20px; }
            .entry-grid { grid-template-columns: repeat(3, 1fr); }
            .entry { border-bottom: 1px solid var(--line); border-right: 0; }
            section { padding: 68px 0; }
            .section-head { display: block; } .section-intro { margin-top: 12px; }
            .step-grid, .activity-list, .starter-list { grid-template-columns: 1fr 1fr; }
            .closing-inner { display: block; } .closing-actions { margin-top: 22px; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 520px) {
            .hero-actions, .download-tools { flex-direction: column; align-items: stretch; }
            .hero-actions .button, .download-tools .button { width: 100%; }
            .hero-note { display: block; } .hero-note span { margin-top: 7px; }
            h1 { font-size: 32px; } h2 { font-size: 28px; }
            .entry-grid { grid-template-columns: repeat(2, 1fr); }
            .scene { grid-template-columns: 38px 1fr auto; gap: 10px; padding: 16px 13px; }
            .feature-list, .step-grid, .activity-list, .starter-list { grid-template-columns: 1fr; }
            .safety-box { display: block; padding: 21px; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 25px 15px; }
            .footer-bottom { display: block; } .footer-bottom span { display: block; margin-top: 7px; }
            .float-panel { right: -4%; }
        }

/* roulang page: article */
:root {
            --coral:#ef6d51;
            --coral-dark:#d9573e;
            --apricot:#fff0e8;
            --mint:#dff5ed;
            --mint-dark:#187b68;
            --ink:#242728;
            --muted:#707876;
            --line:#e9e3de;
            --paper:#fffdfb;
            --white:#fff;
            --shadow:0 16px 40px rgba(43,38,33,.08);
            --shadow-small:0 8px 22px rgba(43,38,33,.06);
            --radius:18px;
            --container:1200px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;background:var(--paper);color:var(--ink);
            font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
            font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased
        }
        a{color:inherit;text-decoration:none;transition:.2s ease}
        a:hover{color:var(--coral-dark)}
        img{display:block;max-width:100%;height:auto}
        button,input{font:inherit}
        button{border:0;cursor:pointer}
        :focus-visible{outline:3px solid rgba(239,109,81,.35);outline-offset:3px}
        .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
        .site-header{
            position:sticky;top:0;z-index:20;background:rgba(255,253,251,.96);
            border-bottom:1px solid rgba(233,227,222,.9);backdrop-filter:blur(12px)
        }
        .nav-wrap{min-height:78px;display:flex;align-items:center;gap:30px}
        .brand{display:inline-flex;align-items:center;gap:11px;min-width:235px}
        .brand-mark{
            width:38px;height:38px;border-radius:12px 12px 12px 4px;background:var(--coral);
            color:#fff;display:grid;place-items:center;font-size:18px;font-weight:800
        }
        .brand-text strong{display:block;font-size:18px;line-height:1.2}
        .brand-text small{color:var(--muted);font-size:11px;display:block;margin-top:2px}
        .main-nav{display:flex;align-items:center;gap:24px;flex:1}
        .main-nav a{
            position:relative;color:#535b58;font-size:14px;white-space:nowrap;padding:27px 0 24px
        }
        .main-nav a:hover,.main-nav a.active{color:var(--coral-dark)}
        .main-nav a.active:after,.main-nav a:hover:after{
            content:"";position:absolute;left:0;right:0;bottom:17px;height:3px;
            border-radius:3px;background:var(--coral)
        }
        .nav-actions{display:flex;align-items:center;gap:10px}
        .button{
            display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:9px;
            padding:11px 17px;font-weight:700;font-size:14px;transition:.2s ease;
            border:1px solid transparent
        }
        .button-primary{color:#fff;background:var(--coral);box-shadow:0 7px 16px rgba(239,109,81,.2)}
        .button-primary:hover{color:#fff;background:var(--coral-dark);transform:translateY(-2px)}
        .button-light{color:var(--coral-dark);background:var(--apricot)}
        .button-light:hover{background:#ffe2d5}
        .button-outline{color:var(--ink);border-color:var(--line);background:var(--white)}
        .button-outline:hover{border-color:var(--coral);color:var(--coral-dark)}
        .menu-toggle{display:none;background:transparent;color:var(--ink);font-size:24px;padding:5px}
        .article-hero{
            padding:76px 0 62px;background:#fff4ed;border-bottom:1px solid #f5e5db
        }
        .breadcrumb{display:flex;flex-wrap:wrap;gap:9px;color:var(--muted);font-size:13px;margin-bottom:25px}
        .breadcrumb a{color:var(--mint-dark)}
        .breadcrumb span{color:#b9aaa2}
        .article-label{
            display:inline-flex;align-items:center;gap:8px;color:var(--coral-dark);
            font-size:13px;font-weight:800;letter-spacing:1px;margin-bottom:15px
        }
        .article-label:before{content:"";width:24px;height:3px;background:var(--coral);border-radius:3px}
        h1,h2,h3,p{margin-top:0}
        h1{font-size:clamp(32px,4.2vw,54px);line-height:1.25;letter-spacing:-1px;margin-bottom:20px;font-weight:800;max-width:900px}
        .article-summary{max-width:780px;color:#626967;font-size:18px;line-height:1.9;margin-bottom:24px}
        .article-meta{display:flex;flex-wrap:wrap;gap:10px 22px;color:var(--muted);font-size:13px}
        .badge{
            display:inline-flex;width:fit-content;color:var(--mint-dark);background:var(--mint);
            border-radius:5px;padding:3px 9px;font-size:12px;font-weight:700
        }
        .article-layout{
            display:grid;grid-template-columns:minmax(0,820px) 270px;gap:70px;
            align-items:start;padding:76px 0 94px
        }
        .article-content{
            min-width:0;background:var(--white);border:1px solid var(--line);
            border-radius:var(--radius);padding:clamp(25px,4vw,54px);box-shadow:var(--shadow-small)
        }
        .article-content h2{font-size:28px;line-height:1.4;margin:35px 0 15px}
        .article-content h3{font-size:21px;line-height:1.5;margin:27px 0 12px}
        .article-content p{font-size:17px;line-height:1.95;margin-bottom:20px;color:#454c49}
        .article-content ul,.article-content ol{padding-left:25px;margin:16px 0 24px;color:#454c49}
        .article-content li{padding-left:5px;margin:8px 0}
        .article-content blockquote{
            margin:28px 0;padding:18px 22px;background:var(--apricot);
            border-left:4px solid var(--coral);border-radius:8px;color:#6a5149
        }
        .article-content img{border-radius:12px;margin:25px auto}
        .article-content table{width:100%;border-collapse:collapse;margin:25px 0;font-size:14px}
        .article-content th,.article-content td{border:1px solid var(--line);padding:11px;text-align:left}
        .article-content th{background:#fff4ed;color:var(--coral-dark)}
        .not-found{text-align:center;padding:55px 20px}
        .not-found h2{margin-top:0}
        .article-side{position:sticky;top:105px;display:grid;gap:16px}
        .side-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
        .side-card h3{font-size:16px;margin-bottom:14px}
        .side-card p{font-size:13px;color:var(--muted);margin-bottom:13px}
        .side-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
        .side-list li{font-size:13px;color:#59625e;padding-bottom:10px;border-bottom:1px solid var(--line)}
        .side-list li:last-child{border:0;padding-bottom:0}
        .side-note{background:var(--mint);border-color:#c9e9dd}
        .related{padding:82px 0;background:#f8f5f1}
        .section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:30px}
        .section-kicker{color:var(--coral-dark);font-size:12px;font-weight:800;letter-spacing:1.4px}
        .section-head h2{font-size:30px;line-height:1.35;margin:6px 0 0}
        .section-intro{color:var(--muted);max-width:560px;margin:0}
        .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
        .related-card{
            background:#fff;border:1px solid var(--line);border-radius:15px;padding:24px;
            min-height:185px;display:flex;flex-direction:column;transition:.2s ease
        }
        .related-card:hover{border-color:var(--coral);box-shadow:var(--shadow-small);transform:translateY(-3px)}
        .related-card h3{font-size:18px;line-height:1.5;margin:14px 0 8px}
        .related-card p{font-size:13px;color:var(--muted);margin-bottom:13px}
        .card-more{color:var(--coral-dark);font-weight:700;font-size:13px;margin-top:auto}
        .article-cta{padding:72px 0}
        .cta-panel{
            background:var(--coral);color:#fff;border-radius:var(--radius);padding:38px 45px;
            display:flex;align-items:center;justify-content:space-between;gap:25px
        }
        .cta-panel h2{font-size:27px;line-height:1.4;margin-bottom:8px}
        .cta-panel p{margin:0;color:rgba(255,255,255,.83)}
        .cta-panel .button{background:#fff;color:var(--coral-dark)}
        .cta-panel .button:hover{background:#fff0e8}
        .site-footer{background:#242b2a;color:#e9eeeb;padding:58px 0 20px}
        .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px}
        .footer-brand .brand{min-width:0;margin-bottom:17px}
        .footer-brand p{color:#a9b1ad;font-size:13px;max-width:290px}
        .site-footer h3{font-size:14px;color:#fff;margin:5px 0 15px}
        .footer-links{display:grid;gap:8px}
        .footer-links a{color:#a9b1ad;font-size:13px}
        .footer-links a:hover{color:#fff}
        .footer-bottom{
            border-top:1px solid rgba(255,255,255,.12);margin-top:42px;padding-top:18px;
            display:flex;justify-content:space-between;gap:18px;color:#89938e;font-size:12px
        }
        @media (max-width:1024px){
            .nav-wrap{gap:18px}.brand{min-width:205px}.main-nav{gap:14px}
            .main-nav a{font-size:13px}.nav-actions .button-light{display:none}
            .article-layout{grid-template-columns:minmax(0,1fr) 235px;gap:30px}
        }
        @media (max-width:768px){
            .container{width:min(var(--container),calc(100% - 32px))}
            .nav-wrap{min-height:68px;justify-content:space-between}
            .brand{min-width:0}.brand-text small{display:none}
            .menu-toggle{display:block}
            .main-nav{
                display:none;position:absolute;left:16px;right:16px;top:68px;background:#fff;
                border:1px solid var(--line);border-radius:12px;padding:10px 18px;
                box-shadow:var(--shadow);flex-direction:column;align-items:stretch;gap:0
            }
            .main-nav.open{display:flex}
            .main-nav a{padding:10px 0;border-bottom:1px solid #f2eeea}
            .main-nav a:last-child{border-bottom:0}
            .main-nav a.active:after,.main-nav a:hover:after{display:none}
            .nav-actions{margin-left:auto}.nav-actions .button-primary{padding:9px 11px;font-size:12px}
            .article-hero{padding:48px 0 42px}
            .article-layout{display:flex;flex-direction:column;padding:45px 0 60px}
            .article-side{position:static;width:100%;grid-template-columns:1fr 1fr}
            .article-content p{font-size:16px}
            .related-grid{grid-template-columns:1fr}
            .related{padding:58px 0}
            .cta-panel{padding:28px;display:block}.cta-panel .button{margin-top:20px}
            .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
            .footer-brand{grid-column:1/-1}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:7px}
        }
        @media (max-width:520px){
            h1{font-size:30px;letter-spacing:-.5px}.article-summary{font-size:16px}
            .article-content{padding:22px 18px}.article-content h2{font-size:24px}
            .article-side{grid-template-columns:1fr}.article-meta{gap:7px 14px}
            .footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}
            .nav-actions .button-primary{display:none}
        }

/* roulang page: category1 */
:root {
            --coral: #ef6d51;
            --coral-dark: #d9573e;
            --apricot: #fff0e8;
            --mint: #dff5ed;
            --mint-dark: #187b68;
            --ink: #242728;
            --muted: #707876;
            --line: #e9e3de;
            --paper: #fffdfb;
            --white: #ffffff;
            --shadow: 0 16px 40px rgba(43, 38, 33, .08);
            --radius: 18px;
            --container: 1200px;
        }
html { scroll-behavior: smooth; }
body {
            background: var(--paper);
            color: var(--ink);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
            font-size: 16px;
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }
button { border: 0; cursor: pointer; }
.container { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; }
.site-header {
            position: sticky; top: 0; z-index: 20;
            background: rgba(255,253,251,.96);
            border-bottom: 1px solid rgba(233,227,222,.9);
            backdrop-filter: blur(12px);
        }
.nav-wrap { min-height: 78px; display: flex; align-items: center; gap: 34px; }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 235px; }
.brand-mark {
            width: 38px; height: 38px; border-radius: 12px 12px 12px 4px;
            background: var(--coral); color: white; display: grid; place-items: center;
            font-size: 18px; font-weight: 800;
        }
.brand-text strong { display: block; font-size: 18px; line-height: 1.2; letter-spacing: 0; }
.brand-text small { color: var(--muted); font-size: 11px; display: block; margin-top: 2px; }
.main-nav { display: flex; align-items: center; gap: 25px; flex: 1; }
.main-nav a { position: relative; color: #535b58; font-size: 14px; white-space: nowrap; padding: 27px 0 24px; }
.main-nav a:hover, .main-nav a.active { color: var(--coral-dark); }
.main-nav a.active:after, .main-nav a:hover:after {
            content: ""; position: absolute; left: 0; right: 0; bottom: 17px; height: 3px;
            border-radius: 3px; background: var(--coral);
        }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.button {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            border-radius: 9px; padding: 11px 17px; font-weight: 700; font-size: 14px;
            transition: .2s ease; border: 1px solid transparent;
        }
.button-primary { color: white; background: var(--coral); box-shadow: 0 7px 16px rgba(239,109,81,.2); }
.button-primary:hover { background: var(--coral-dark); transform: translateY(-2px); }
.button-light { color: var(--coral-dark); background: var(--apricot); }
.button-light:hover { background: #ffe2d5; }
.button-outline { color: var(--ink); border-color: var(--line); background: var(--white); }
.button-outline:hover { border-color: var(--coral); color: var(--coral-dark); }
.menu-toggle { display: none; background: transparent; color: var(--ink); font-size: 24px; padding: 5px; }
.hero {
            min-height: 620px; display: flex; align-items: center; overflow: hidden;
            background: #fff4ed; position: relative;
        }
.hero:before {
            content: ""; position: absolute; width: 420px; height: 420px; right: 8%; top: 70px;
            border: 1px solid rgba(239,109,81,.2); border-radius: 50%;
        }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 70px; position: relative; z-index: 1; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--coral-dark); font-size: 13px; font-weight: 800; letter-spacing: 1px; margin-bottom: 18px; }
.eyebrow:before { content: ""; width: 24px; height: 3px; border-radius: 3px; background: var(--coral); }
.hero-copy { color: #626967; max-width: 590px; font-size: 18px; line-height: 1.85; }
.hero-actions { display: flex; gap: 12px; margin-top: 30px; }
.hero-note { display: flex; gap: 20px; margin-top: 28px; color: var(--muted); font-size: 13px; }
.hero-note span { display: flex; align-items: center; gap: 7px; }
.hero-note i { width: 7px; height: 7px; background: var(--mint-dark); border-radius: 50%; }
.device-stage { min-height: 430px; position: relative; display: grid; place-items: center; }
.screen-body { padding: 13px; }
section { padding: 96px 0; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin-bottom: 34px; }
.section-kicker { color: var(--coral-dark); font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; }
.section-intro { color: var(--muted); max-width: 550px; }
.entry-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.experience-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: center; }
.scene-list { display: grid; gap: 13px; }
.arrow { color: var(--coral); font-size: 22px; }
.download-grid { display: grid; grid-template-columns: 1fr .9fr; gap: 60px; align-items: center; }
.step-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.features { background: #f8f5f1; }
.feature-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.feature-main { background: var(--coral); color: white; padding: 38px; border-radius: var(--radius); min-height: 280px; }
.feature-main h3 { font-size: 27px; max-width: 320px; line-height: 1.4; }
.feature-main p { margin-top: 18px; opacity: .88; max-width: 380px; }
.feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feature-item { background: white; border: 1px solid var(--line); padding: 21px; border-radius: 14px; }
.feature-item h3 { font-size: 16px; }
.feature-item p { color: var(--muted); font-size: 13px; margin-top: 5px; }
.lead-news { background: #fff1e9; padding: 30px; border-radius: var(--radius); min-height: 260px; display: flex; flex-direction: column; justify-content: end; }
.badge { display: inline-flex; width: fit-content; color: var(--mint-dark); background: var(--mint); border-radius: 5px; padding: 3px 9px; font-size: 12px; font-weight: 700; }
.lead-news h3 { font-size: 25px; margin: 14px 0 8px; line-height: 1.45; }
.news-meta { color: var(--muted); font-size: 12px; }
.news-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.news-item { display: grid; grid-template-columns: 1fr 2.2fr; gap: 30px; align-items: start; border-bottom: 1px solid var(--line); padding: 28px 0; }
.news-item:last-child { border-bottom: none; }
.news-item h3 { font-size: 18px; line-height: 1.5; margin-bottom: 8px; }
.news-item h3 a { color: var(--ink); }
.news-item p { color: var(--muted); line-height: 1.7; margin-bottom: 14px; }
.news-item .news-meta { margin-bottom: 12px; }
.news-item a { color: var(--coral); font-weight: 600; }
.news-item a:hover { text-decoration: underline; }
.news-item img { width: 100%; height: 180px; object-fit: cover; border-radius: 12px; }
.featured-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.announcement-list { list-style: none; padding: 0; }
.announcement-list li { padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; gap: 16px; }
.announcement-list li:last-child { border-bottom: none; }
.announcement-list li:before { content: "•"; color: var(--coral); font-size: 20px; flex-shrink: 0; }
.cta-section { background: var(--apricot); border-radius: var(--radius); padding: 60px 0; text-align: center; }
.cta-section h2 { font-size: 32px; margin-bottom: 16px; }
.cta-section p { max-width: 520px; margin: 0 auto 32px; color: var(--muted); }
.news-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.news-item { display: grid; grid-template-columns: 1fr 2.2fr; gap: 30px; align-items: start; border-bottom: 1px solid var(--line); padding: 28px 0; }
.news-item:last-child { border-bottom: none; }
.news-item h3 { font-size: 18px; line-height: 1.5; margin-bottom: 8px; }
.news-item h3 a { color: var(--ink); }
.news-item p { color: var(--muted); line-height: 1.7; margin-bottom: 14px; }
.news-item .news-meta { margin-bottom: 12px; }
.news-item a { color: var(--coral); font-weight: 600; }
.news-item a:hover { text-decoration: underline; }
@media (max-width: 768px) {
            .news-item { grid-template-columns: 1fr; gap: 16px; }
            .news-item h3 { font-size: 16px; }
        }

/* roulang page: category2 */
:root{
            --coral:#ef6d51;
            --coral-dark:#d9573e;
            --apricot:#fff0e8;
            --mint:#dff5ed;
            --mint-dark:#187b68;
            --ink:#242728;
            --muted:#707876;
            --line:#e9e3de;
            --paper:#fffdfb;
            --white:#fff;
            --shadow:0 16px 40px rgba(43,38,33,.08);
            --radius:18px;
            --container:1200px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;background:var(--paper);color:var(--ink);
            font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
            font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased
        }
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%}
        button,input{font:inherit}
        button{border:0;cursor:pointer}
        h1,h2,h3,p{margin-top:0}
        h1,h2,h3{line-height:1.3}
        h1{font-size:clamp(34px,5vw,58px);margin-bottom:22px;letter-spacing:-1px}
        h2{font-size:clamp(28px,3vw,38px);margin-bottom:14px}
        h3{font-size:19px;margin-bottom:8px}
        .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
        .site-header{
            position:sticky;top:0;z-index:20;background:rgba(255,253,251,.96);
            border-bottom:1px solid rgba(233,227,222,.9);backdrop-filter:blur(12px)
        }
        .nav-wrap{min-height:78px;display:flex;align-items:center;gap:30px}
        .brand{display:inline-flex;align-items:center;gap:11px;min-width:235px}
        .brand-mark{
            width:38px;height:38px;border-radius:12px 12px 12px 4px;background:var(--coral);
            color:#fff;display:grid;place-items:center;font-size:18px;font-weight:800
        }
        .brand-text strong{display:block;font-size:18px;line-height:1.2}
        .brand-text small{color:var(--muted);font-size:11px;display:block;margin-top:2px}
        .main-nav{display:flex;align-items:center;gap:25px;flex:1}
        .main-nav a{position:relative;color:#535b58;font-size:14px;white-space:nowrap;padding:27px 0 24px}
        .main-nav a:hover,.main-nav a.active{color:var(--coral-dark)}
        .main-nav a.active:after,.main-nav a:hover:after{
            content:"";position:absolute;left:0;right:0;bottom:17px;height:3px;
            border-radius:3px;background:var(--coral)
        }
        .nav-actions{display:flex;align-items:center;gap:10px}
        .button{
            display:inline-flex;align-items:center;justify-content:center;gap:8px;
            border-radius:9px;padding:11px 17px;font-weight:700;font-size:14px;
            transition:.2s ease;border:1px solid transparent
        }
        .button-primary{color:#fff;background:var(--coral);box-shadow:0 7px 16px rgba(239,109,81,.2)}
        .button-primary:hover{background:var(--coral-dark);transform:translateY(-2px)}
        .button-light{color:var(--coral-dark);background:var(--apricot)}
        .button-light:hover{background:#ffe2d5}
        .button-outline{color:var(--ink);border-color:var(--line);background:var(--white)}
        .button-outline:hover{border-color:var(--coral);color:var(--coral-dark)}
        .button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(239,109,81,.3);outline-offset:3px}
        .menu-toggle{display:none;background:transparent;color:var(--ink);font-size:24px;padding:5px}
        .page-hero{background:#fff4ed;padding:92px 0 82px;position:relative;overflow:hidden}
        .page-hero:after{
            content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(239,109,81,.2);
            border-radius:50%;right:7%;top:20px
        }
        .page-hero .container{position:relative;z-index:1}
        .eyebrow,.section-kicker{
            color:var(--coral-dark);font-size:12px;font-weight:800;letter-spacing:1.5px
        }
        .eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:18px}
        .eyebrow:before{content:"";width:24px;height:3px;border-radius:3px;background:var(--coral)}
        .page-intro{max-width:690px;color:#626967;font-size:18px;line-height:1.85;margin-bottom:26px}
        .meta-line{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:13px}
        section{padding:92px 0}
        .section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:34px}
        .section-intro{color:var(--muted);max-width:570px}
        .download-panel{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
        .panel-copy{max-width:560px}
        .panel-copy h2{margin-top:10px}
        .download-box{
            background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
            padding:28px;box-shadow:var(--shadow)
        }
        .status-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:20px}
        .status{display:inline-flex;align-items:center;gap:8px;color:var(--mint-dark);font-size:13px;font-weight:700}
        .status:before{content:"";width:8px;height:8px;border-radius:50%;background:#43b895}
        .download-box p{color:var(--muted);font-size:14px}
        .download-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:23px}
        .qr-device{display:flex;justify-content:center;align-items:center;min-height:330px;background:var(--mint);border-radius:var(--radius);position:relative;overflow:hidden}
        .qr-device:before,.qr-device:after{content:"";position:absolute;border:1px solid rgba(24,123,104,.2);border-radius:50%}
        .qr-device:before{width:310px;height:310px}
        .qr-device:after{width:210px;height:210px}
        .qr-placeholder{
            width:156px;height:156px;background:#fff;border:10px solid #fff;
            box-shadow:0 5px 20px rgba(24,123,104,.15);position:relative;z-index:1;
            display:grid;place-items:center;color:var(--mint-dark);font-size:13px;text-align:center
        }
        .qr-placeholder span{display:block;border:2px dashed #8ccbbb;padding:24px 12px}
        .device-tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}
        .tag{display:inline-flex;padding:5px 12px;border-radius:7px;background:var(--apricot);color:var(--coral-dark);font-size:13px;font-weight:700}
        .tag.mint{background:var(--mint);color:var(--mint-dark)}
        .compatibility{background:#f8f5f1}
        .compat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
        .compat-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:25px;transition:.2s ease}
        .compat-card:hover{border-color:var(--coral);box-shadow:var(--shadow);transform:translateY(-3px)}
        .compat-icon{width:42px;height:42px;border-radius:12px;background:var(--apricot);color:var(--coral-dark);display:grid;place-items:center;font-weight:800;margin-bottom:18px}
        .compat-card p{color:var(--muted);font-size:14px;margin-bottom:0}
        .step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
        .step{position:relative;padding:26px 22px;border-top:3px solid var(--coral);background:#fff;border:1px solid var(--line);border-top-color:var(--coral);border-radius:14px}
        .step-num{font-size:34px;font-weight:800;color:var(--coral);line-height:1;margin-bottom:20px}
        .step p{color:var(--muted);font-size:14px;margin:0}
        .preview-layout{display:grid;grid-template-columns:1fr 1.3fr;gap:55px;align-items:center}
        .preview-copy p{color:var(--muted);max-width:470px}
        .phone-row{display:flex;justify-content:center;gap:22px;align-items:end}
        .phone{
            width:160px;height:300px;border:8px solid #2d3332;border-radius:25px;background:#fff;
            box-shadow:0 13px 30px rgba(43,38,33,.13);padding:13px;position:relative
        }
        .phone.small{height:265px;transform:translateY(20px)}
        .phone-top{height:8px;width:45px;background:#2d3332;border-radius:10px;margin:0 auto 18px}
        .phone-banner{height:63px;border-radius:9px;background:var(--coral);margin-bottom:13px}
        .phone-line{height:9px;border-radius:5px;background:#ece8e4;margin:10px 0}
        .phone-line.short{width:64%}
        .phone-chip{height:38px;border-radius:8px;background:var(--mint);margin:12px 0}
        .faq-section{background:#fff4ed}
        .faq-list{max-width:850px;margin:auto}
        .faq-item{border-bottom:1px solid rgba(217,87,62,.2)}
        .faq-item summary{cursor:pointer;list-style:none;padding:21px 5px;font-weight:700;display:flex;justify-content:space-between;gap:20px}
        .faq-item summary::-webkit-details-marker{display:none}
        .faq-item summary:after{content:"＋";color:var(--coral);font-size:22px;line-height:1}
        .faq-item[open] summary:after{content:"−"}
        .faq-item p{color:var(--muted);padding:0 35px 20px 5px;margin:0;font-size:15px}
        .safety-box{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;background:var(--mint);border-radius:var(--radius);padding:28px 32px}
        .safety-mark{width:52px;height:52px;border-radius:50%;background:#fff;color:var(--mint-dark);display:grid;place-items:center;font-size:23px;font-weight:800}
        .safety-box h3{margin:0 0 4px}
        .safety-box p{color:#4f7169;margin:0;font-size:14px}
        .cta{background:#263331;color:#fff;padding:66px 0}
        .cta-wrap{display:flex;justify-content:space-between;align-items:center;gap:30px}
        .cta h2{margin:0 0 10px;color:#fff}
        .cta p{color:#bfcac5;margin:0}
        .cta .button-light{background:#fff}
        .cta .button-light:hover{background:var(--apricot)}
        .site-footer{background:#263331;color:#d5ded9;padding:66px 0 0}
        .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:42px;padding-bottom:52px}
        .footer-brand .brand{min-width:0;margin-bottom:17px}
        .footer-brand p{color:#a9b1ad;font-size:14px;max-width:270px}
        .site-footer h3{font-size:15px;color:#fff;margin:5px 0 17px}
        .footer-links{display:grid;gap:9px}
        .footer-links a{color:#a9b1ad;font-size:13px;transition:.2s}
        .footer-links a:hover{color:#fff;padding-left:3px}
        .footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:19px 0;display:flex;justify-content:space-between;gap:20px;color:#8f9c97;font-size:12px}
        @media(max-width:1024px){
            .nav-wrap{gap:18px}.brand{min-width:205px}.main-nav{gap:16px}
            .nav-actions .button-outline{display:none}.download-panel,.preview-layout{gap:35px}
        }
        @media(max-width:768px){
            .container{width:min(var(--container),calc(100% - 32px))}
            .nav-wrap{min-height:68px;justify-content:space-between}.brand{min-width:auto}
            .main-nav{display:none;position:absolute;top:68px;left:0;right:0;background:#fffdfb;padding:10px 20px 18px;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0}
            .main-nav.open{display:flex}.main-nav a{padding:12px 0}.main-nav a.active:after,.main-nav a:hover:after{bottom:5px;right:auto;width:35px}
            .nav-actions{margin-left:auto}.nav-actions .button-primary{display:none}.menu-toggle{display:block}
            section{padding:68px 0}.page-hero{padding:68px 0 60px}
            .download-panel,.preview-layout{grid-template-columns:1fr}.qr-device{min-height:270px}
            .compat-grid,.step-grid{grid-template-columns:1fr 1fr}
            .safety-box{grid-template-columns:auto 1fr}.safety-box .button{grid-column:2;justify-self:start}
            .cta-wrap{display:block}.cta .button{margin-top:22px}.footer-grid{grid-template-columns:1fr 1fr;gap:30px}
            .footer-bottom{display:block}.footer-bottom span{display:block;margin:5px 0}
        }
        @media(max-width:520px){
            h1{font-size:34px}.page-intro{font-size:16px}.section-head{display:block}
            .compat-grid,.step-grid{grid-template-columns:1fr}.phone-row{gap:10px}.phone{width:135px;height:260px}.phone.small{height:230px}
            .safety-box{display:block}.safety-mark{margin-bottom:15px}.safety-box .button{margin-top:18px}
            .footer-grid{grid-template-columns:1fr}.footer-brand{padding-bottom:5px}
        }

/* roulang page: category3 */
:root{
        --coral:#ef6d51;--coral-dark:#d9573e;--apricot:#fff0e8;--mint:#dff5ed;
        --mint-dark:#187b68;--ink:#242728;--muted:#707876;--line:#e9e3de;
        --paper:#fffdfb;--white:#fff;--shadow:0 16px 40px rgba(43,38,33,.08);
        --radius:18px;--container:1200px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
    a{color:inherit;text-decoration:none}
    a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid rgba(239,109,81,.35);outline-offset:3px}
    img{display:block;max-width:100%}
    button,input{font:inherit}
    button{border:0;cursor:pointer}
    .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
    .site-header{position:sticky;top:0;z-index:20;background:rgba(255,253,251,.96);border-bottom:1px solid rgba(233,227,222,.9);backdrop-filter:blur(12px)}
    .nav-wrap{min-height:78px;display:flex;align-items:center;gap:34px}
    .brand{display:inline-flex;align-items:center;gap:11px;min-width:235px}
    .brand-mark{width:38px;height:38px;border-radius:12px 12px 12px 4px;background:var(--coral);color:#fff;display:grid;place-items:center;font-size:18px;font-weight:800}
    .brand-text strong{display:block;font-size:18px;line-height:1.2}
    .brand-text small{color:var(--muted);font-size:11px;display:block;margin-top:2px}
    .main-nav{display:flex;align-items:center;gap:25px;flex:1}
    .main-nav a{position:relative;color:#535b58;font-size:14px;white-space:nowrap;padding:27px 0 24px}
    .main-nav a:hover,.main-nav a.active{color:var(--coral-dark)}
    .main-nav a.active:after,.main-nav a:hover:after{content:"";position:absolute;left:0;right:0;bottom:17px;height:3px;border-radius:3px;background:var(--coral)}
    .nav-actions{display:flex;align-items:center;gap:10px}
    .button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:9px;padding:11px 17px;font-weight:700;font-size:14px;transition:.2s ease;border:1px solid transparent}
    .button-primary{color:#fff;background:var(--coral);box-shadow:0 7px 16px rgba(239,109,81,.2)}
    .button-primary:hover{background:var(--coral-dark);transform:translateY(-2px)}
    .button-light{color:var(--coral-dark);background:var(--apricot)}
    .button-light:hover{background:#ffe2d5}
    .button-outline{color:var(--ink);border-color:var(--line);background:#fff}
    .button-outline:hover{border-color:var(--coral);color:var(--coral-dark)}
    .menu-toggle{display:none;background:transparent;color:var(--ink);font-size:24px;padding:5px}
    main{overflow:hidden}
    .page-hero{padding:94px 0 78px;background:#fff4ed;position:relative}
    .page-hero:after{content:"";position:absolute;width:330px;height:330px;border:1px solid rgba(239,109,81,.18);border-radius:50%;right:8%;top:45px}
    .page-hero-inner{position:relative;z-index:1;max-width:820px}
    .eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--coral-dark);font-size:12px;font-weight:800;letter-spacing:1.4px}
    .eyebrow:before{content:"";width:24px;height:3px;border-radius:3px;background:var(--coral)}
    h1,h2,h3,p{margin-top:0}
    h1{font-size:clamp(36px,5vw,60px);line-height:1.18;letter-spacing:-1.5px;margin:18px 0 22px;font-weight:800}
    h2{font-size:clamp(27px,3vw,36px);line-height:1.3;margin:10px 0 13px}
    h3{font-size:19px;line-height:1.45;margin-bottom:8px}
    .hero-copy{color:#626967;max-width:700px;font-size:18px;line-height:1.85}
    .hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
    .badge{display:inline-flex;align-items:center;width:max-content;color:var(--mint-dark);background:var(--mint);border-radius:5px;padding:4px 10px;font-size:12px;font-weight:700}
    section{padding:88px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:32px}
    .section-intro{color:var(--muted);max-width:560px}
    .scene-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px}
    .scene-main{min-height:300px;padding:36px;border-radius:var(--radius);background:var(--coral);color:#fff;position:relative;overflow:hidden}
    .scene-main:after{content:"◎";position:absolute;right:28px;bottom:-32px;font-size:190px;line-height:1;color:rgba(255,255,255,.14)}
    .scene-main p{max-width:430px;color:rgba(255,255,255,.84)}
    .scene-main .button{margin-top:20px;background:#fff;color:var(--coral-dark)}
    .scene-side{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .scene-card,.topic-card,.step,.faq-item,.phone-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:23px;transition:.2s ease}
    .scene-card:hover,.topic-card:hover,.step:hover,.phone-card:hover{border-color:var(--coral);box-shadow:var(--shadow);transform:translateY(-3px)}
    .icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--apricot);color:var(--coral-dark);font-weight:800;margin-bottom:16px}
    .scene-card p,.topic-card p,.step p{font-size:14px;color:var(--muted);margin-bottom:0}
    .content-section{background:#f8f5f1}
    .content-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:start}
    .content-list{display:grid;gap:14px}
    .content-item{display:grid;grid-template-columns:80px 1fr auto;gap:20px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;transition:.2s ease}
    .content-item:hover{border-color:var(--coral);box-shadow:var(--shadow);transform:translateX(3px)}
    .content-date{color:var(--coral-dark);font-size:13px;font-weight:800;line-height:1.35}
    .content-date small{display:block;color:var(--muted);font-weight:500;margin-top:4px}
    .content-item h3{margin:0;font-size:18px}
    .content-item p{color:var(--muted);font-size:14px;margin:5px 0 0}
    .content-arrow{color:var(--coral);font-size:23px}
    .empty-state{padding:38px 24px;text-align:center;background:#fff;border:1px dashed #d8cec7;border-radius:14px;color:var(--muted)}
    .feature-panel{background:#fff1e9;border-radius:var(--radius);padding:30px;min-height:100%}
    .feature-panel h3{font-size:24px}
    .feature-panel p{color:var(--muted)}
    .mini-list{display:grid;gap:13px;margin-top:25px}
    .mini-list div{display:flex;gap:12px;align-items:flex-start;padding-top:13px;border-top:1px solid rgba(217,87,62,.16)}
    .mini-list b{color:var(--coral-dark);font-size:13px;min-width:24px}
    .flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}
    .step-num{color:var(--coral);font-size:31px;font-weight:800;line-height:1;margin-bottom:18px}
    .step h3{font-size:17px}
    .mobile-showcase{background:var(--mint)}
    .showcase-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}
    .phone-row{display:flex;gap:16px;align-items:end;justify-content:center}
    .phone-card{width:174px;min-height:285px;padding:12px;background:#fff;box-shadow:0 12px 25px rgba(24,123,104,.11)}
    .phone-card:nth-child(2){transform:translateY(-24px)}
    .phone-top{height:24px;width:58px;border-radius:0 0 12px 12px;background:#242728;margin:0 auto 13px}
    .phone-screen{border-radius:10px;background:#fff5ef;padding:14px;min-height:220px}
    .screen-line{height:8px;border-radius:5px;background:#f4b19d;margin:10px 0}
    .screen-line.short{width:58%}
    .screen-box{height:72px;border-radius:8px;background:var(--coral);margin:16px 0 12px}
    .phone-card:nth-child(2) .screen-box{background:var(--mint-dark)}
    .showcase-copy p{color:#50736c;max-width:500px}
    .topic-grid{display:grid;grid-template-columns:1.35fr .9fr .9fr;gap:15px}
    .topic-card.large{min-height:230px;background:#fff1e9;padding:28px}
    .topic-card.large h3{font-size:24px;max-width:330px}
    .topic-card.large p{max-width:390px}
    .topic-card strong{display:block;font-size:13px;color:var(--coral-dark);margin-bottom:18px}
    .faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
    .faq-item summary{font-weight:700;cursor:pointer;list-style:none;position:relative;padding-right:25px}
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary:after{content:"＋";position:absolute;right:0;color:var(--coral);font-size:20px;line-height:1}
    .faq-item[open] summary:after{content:"－"}
    .faq-item p{color:var(--muted);font-size:14px;margin:14px 0 0}
    .cta{padding:0 0 94px}
    .cta-box{display:flex;justify-content:space-between;align-items:center;gap:25px;background:var(--ink);border-radius:var(--radius);padding:38px 44px;color:#fff}
    .cta-box h2{margin:0;font-size:29px}
    .cta-box p{color:#b9c1bd;margin:8px 0 0}
    .cta-actions{display:flex;gap:10px;flex-shrink:0}
    .site-footer{background:#242728;color:#e8eeeb;padding:66px 0 20px}
    .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
    .footer-brand p{color:#a9b1ad;max-width:280px;font-size:14px;margin-top:18px}
    .site-footer .brand{min-width:0}.site-footer h3{color:#fff;font-size:15px;margin:3px 0 17px}
    .footer-links{display:grid;gap:9px}.footer-links a{color:#a9b1ad;font-size:13px;transition:.2s}
    .footer-links a:hover{color:#fff}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #3b4240;margin-top:45px;padding-top:18px;color:#8f9994;font-size:12px}
    @media(max-width:1050px){.nav-wrap{gap:18px}.brand{min-width:205px}.main-nav{gap:15px}.nav-actions .button-light{display:none}.content-layout,.showcase-grid{grid-template-columns:1fr}.feature-panel{min-height:0}.showcase-grid{gap:35px}}
    @media(max-width:768px){
        .container{width:min(var(--container),calc(100% - 32px))}
        .nav-wrap{min-height:68px;justify-content:space-between}.menu-toggle{display:block}.main-nav,.nav-actions{display:none}
        .site-header.menu-open .main-nav{display:flex;position:absolute;left:16px;right:16px;top:68px;padding:12px 18px;flex-direction:column;align-items:stretch;gap:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
        .site-header.menu-open .main-nav a{padding:10px 0}.site-header.menu-open .main-nav a.active:after,.site-header.menu-open .main-nav a:hover:after{bottom:4px}
        .site-header.menu-open .nav-actions{display:flex;position:absolute;right:22px;top:340px}
        .brand{min-width:0}.brand-text small{font-size:10px}
        .page-hero{padding:68px 0 58px}h1{font-size:38px}
        section{padding:64px 0}.section-head{display:block;margin-bottom:24px}
        .scene-grid,.topic-grid,.faq-grid{grid-template-columns:1fr}.scene-side{grid-template-columns:1fr 1fr}.flow-grid{grid-template-columns:1fr 1fr}
        .content-item{grid-template-columns:64px 1fr}.content-arrow{display:none}
        .phone-row{gap:10px}.phone-card{width:145px}.phone-card:nth-child(2){transform:none}
        .cta-box{display:block;padding:30px 25px}.cta-actions{margin-top:22px;flex-wrap:wrap}
        .footer-grid{grid-template-columns:1fr 1fr;gap:30px}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:6px}
    }
    @media(max-width:520px){
        .nav-actions{display:none}.scene-side,.flow-grid{grid-template-columns:1fr}
        .scene-main{padding:27px}.content-item{padding:17px;gap:13px}.content-date{font-size:12px}
        .phone-row{justify-content:space-between}.phone-card{width:calc(50% - 5px);min-height:245px}.phone-card:last-child{display:none}
        .phone-screen{min-height:185px}.topic-card.large{min-height:0}
        .footer-grid{grid-template-columns:1fr}.footer-bottom{font-size:11px}
        .cta-actions .button{width:100%}
    }