/* roulang page: index */
:root{
            --ink:#101a18;--ink-soft:#172522;--panel:#1d302b;--panel-2:#243b35;
            --paper:#f3f5ee;--white:#fffdf7;--muted:#aab8b0;--text:#eef4ed;
            --teal:#49d7a5;--teal-deep:#1a9d78;--lime:#d8f56a;--orange:#f5ad55;
            --line:rgba(211,239,224,.14);--radius:18px;--shadow:0 18px 55px rgba(7,18,15,.22);
            --max:1180px;
        }
        *{box-sizing:border-box;margin:0;padding:0}
        html{scroll-behavior:smooth}
        body{font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei","Noto Sans TC",Arial,sans-serif;background:var(--ink);color:var(--text);line-height:1.7}
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%}
        button{font:inherit;border:0;cursor:pointer}
        .container{width:min(var(--max),calc(100% - 40px));margin:auto}
        .site-header{position:sticky;top:0;z-index:20;background:rgba(16,26,24,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
        .nav-wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px}
        .brand{display:flex;align-items:center;gap:12px;min-width:max-content}
        .brand-mark{width:38px;height:38px;border-radius:11px;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-size:17px;font-weight:900;transform:rotate(-7deg)}
        .brand strong{font-size:17px;letter-spacing:-.4px}
        .brand small{display:block;color:var(--muted);font-size:11px;line-height:1.2;margin-top:2px}
        .nav-links{display:flex;align-items:center;gap:5px}
        .nav-links a{position:relative;padding:10px 13px;color:#c8d4cd;font-size:14px;border-radius:9px;transition:.25s}
        .nav-links a:hover,.nav-links a:focus,.nav-links a.active{color:var(--lime);background:rgba(216,245,106,.08)}
        .nav-links a.active:after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;background:var(--teal);border-radius:2px}
        .nav-cta,.btn-primary{background:var(--teal);color:var(--ink);font-weight:800;border-radius:10px;padding:12px 17px;transition:.25s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
        .nav-cta:hover,.btn-primary:hover{background:var(--lime);transform:translateY(-2px);box-shadow:0 8px 24px rgba(73,215,165,.2)}
        .menu-toggle{display:none;background:transparent;color:var(--white);font-size:25px;padding:8px}
        .hero{position:relative;overflow:hidden;padding:94px 0 88px;background:linear-gradient(135deg,#101a18 0%,#17342e 55%,#24433a 100%)}
        .hero:before{content:"";position:absolute;width:520px;height:520px;border:1px solid rgba(73,215,165,.18);border-radius:50%;right:-120px;top:-180px;box-shadow:0 0 0 34px rgba(73,215,165,.035),0 0 0 72px rgba(73,215,165,.025)}
        .hero:after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--teal),transparent);opacity:.5}
        .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:center}
        .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--lime);font-size:13px;font-weight:700;letter-spacing:1px;margin-bottom:20px}
        .eyebrow:before{content:"";width:25px;height:2px;background:var(--lime)}
        h1{font-size:clamp(35px,5vw,64px);line-height:1.13;letter-spacing:-2px;max-width:710px}
        .hero-copy{font-size:17px;color:#c0d0c8;max-width:625px;margin:25px 0 31px}
        .actions{display:flex;gap:13px;flex-wrap:wrap}
        .btn-secondary{border:1px solid rgba(216,245,106,.48);color:var(--lime);padding:11px 17px;border-radius:10px;font-weight:700;transition:.25s}
        .btn-secondary:hover{background:rgba(216,245,106,.1);border-color:var(--lime)}
        .hero-board{background:rgba(11,22,19,.5);border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:var(--shadow);transform:rotate(1.5deg)}
        .board-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:17px;border-bottom:1px solid var(--line);color:var(--muted);font-size:12px}
        .live-dot{color:var(--teal);display:flex;gap:6px;align-items:center}.live-dot i{width:7px;height:7px;border-radius:50%;background:var(--teal)}
        .board-title{font-size:22px;font-weight:800;margin:20px 0 5px}.board-note{color:var(--muted);font-size:13px}
        .fixture{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:16px 0;margin-top:13px;font-size:13px}
        .fixture b{font-size:15px}.fixture span{color:var(--orange);font-size:12px}
        .section{padding:88px 0}.section-light{background:var(--paper);color:var(--ink)}
        .section-head{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:32px}
        .section-kicker{color:var(--teal-deep);font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}
        h2{font-size:clamp(27px,3.5vw,41px);line-height:1.25;letter-spacing:-1px;margin-top:8px}
        .section-intro{color:#728078;max-width:510px;font-size:15px}
        .quick-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:13px}
        .quick-card{background:#fff;border:1px solid #e2e9e1;border-radius:var(--radius);padding:24px;min-height:180px;display:flex;flex-direction:column;justify-content:space-between;transition:.25s}
        .quick-card:first-child{background:var(--ink);color:var(--white);border-color:var(--ink)}
        .quick-card:hover{transform:translateY(-5px);box-shadow:0 13px 30px rgba(22,48,39,.12)}
        .icon{font-size:24px;color:var(--teal-deep);margin-bottom:20px}.quick-card:first-child .icon{color:var(--lime)}
        .quick-card h3{font-size:19px}.quick-card p{font-size:13px;color:#77847d;margin-top:7px}.quick-card:first-child p{color:#aab8b0}
        .card-link{font-size:13px;font-weight:800;color:var(--teal-deep);margin-top:20px}.quick-card:first-child .card-link{color:var(--lime)}
        .overview{background:var(--ink-soft);padding:88px 0}.overview-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:start}
        .overview h2{max-width:360px}.overview-copy{color:var(--muted);margin-top:18px;font-size:15px}
        .timeline{border-left:1px solid rgba(73,215,165,.45);padding-left:26px}
        .time-row{position:relative;display:grid;grid-template-columns:105px 1fr auto;gap:22px;align-items:center;border-bottom:1px solid var(--line);padding:18px 0}
        .time-row:before{content:"";position:absolute;left:-31px;width:9px;height:9px;background:var(--teal);border:3px solid var(--ink-soft);border-radius:50%}
        .time-row time{font-size:12px;color:var(--orange);font-weight:700}.time-row strong{font-size:15px}.time-row small{color:var(--muted);font-size:12px}.status{font-size:11px;color:var(--teal);border:1px solid rgba(73,215,165,.4);border-radius:20px;padding:3px 8px}
        .news-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}.news-feature,.news-item{background:#fff;border:1px solid #e0e8df;border-radius:var(--radius);transition:.25s}.news-feature:hover,.news-item:hover{border-color:#afd9be;box-shadow:0 12px 28px rgba(19,46,34,.09)}
        .news-feature{padding:29px}.news-feature .news-tag{margin-bottom:34px}.news-feature h3{font-size:26px;line-height:1.4;color:var(--ink);max-width:560px}.news-feature p{color:#738079;margin:14px 0 24px}
        .news-meta{display:flex;align-items:center;gap:12px;color:#8b9890;font-size:12px}.news-tag{display:inline-block;color:var(--teal-deep);background:#e5f6ed;border-radius:5px;padding:4px 8px;font-size:11px;font-weight:800}
        .news-list{display:flex;flex-direction:column;gap:10px}.news-item{padding:17px 19px}.news-item h3{color:var(--ink);font-size:15px;line-height:1.5}.news-item p{color:#7b8780;font-size:12px;margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
        .news-item .news-meta{margin-top:10px}
        .app-section{background:#dce9df;color:var(--ink);overflow:hidden}.app-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:90px;align-items:center}
        .phone-stage{height:365px;position:relative;display:grid;place-items:center}.phone{width:190px;height:350px;background:#11211d;border:7px solid #31463e;border-radius:29px;box-shadow:20px 25px 35px rgba(16,40,30,.22);padding:17px 13px;transform:rotate(-7deg)}
        .phone-notch{width:65px;height:6px;border-radius:5px;background:#4c6258;margin:0 auto 22px}.phone-label{font-size:11px;color:var(--lime);margin-bottom:8px}.phone h3{font-size:17px;color:#fff;margin-bottom:17px}.phone-line{height:44px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:#d8e8df;font-size:11px}.phone-line b{font-size:14px}.phone-line em{color:var(--orange);font-style:normal}
        .app-copy h2{color:var(--ink)}.app-copy>p{color:#5b6c62;margin:18px 0 24px;max-width:560px}.app-points{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}.app-point{background:rgba(255,255,255,.6);padding:10px 13px;border-radius:8px;font-size:13px;color:#385246}.app-point:before{content:"✓";color:var(--teal-deep);font-weight:900;margin-right:7px}
        .faq-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:75px}.faq-lead p{color:var(--muted);margin-top:16px}.faq-list{border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line);padding:19px 0}summary{cursor:pointer;list-style:none;font-weight:700;font-size:16px;display:flex;justify-content:space-between;gap:20px}summary::-webkit-details-marker{display:none}summary:after{content:"+";color:var(--lime);font-size:22px;font-weight:400;line-height:1}details[open] summary:after{content:"−"}details p{color:var(--muted);font-size:14px;padding:13px 30px 0 0}
        .cta{padding:62px 0;background:var(--lime);color:var(--ink)}.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:30px}.cta h2{max-width:680px}.cta p{margin-top:8px;color:#435448}.cta .btn-primary{background:var(--ink);color:var(--lime)}.cta .btn-primary:hover{background:#29463b}
        .site-footer{background:#0b1210;padding:55px 0 25px}.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:45px;padding-bottom:42px}.footer-brand p{color:var(--muted);font-size:13px;margin-top:16px;max-width:270px}.site-footer h3{font-size:14px;color:var(--white);margin-bottom:15px}.footer-links{display:flex;flex-direction:column;gap:9px}.footer-links a{color:var(--muted);font-size:13px;transition:.2s}.footer-links a:hover{color:var(--lime)}.responsibility{border:1px solid var(--line);padding:15px;border-radius:10px;color:var(--muted);font-size:12px}.copyright{border-top:1px solid var(--line);padding-top:21px;color:#718078;font-size:12px;display:flex;justify-content:space-between;gap:15px}
        .empty{padding:30px;color:#738079;background:#fff;border:1px dashed #b9cabc;border-radius:var(--radius);grid-column:1/-1}
        :focus-visible{outline:3px solid var(--orange);outline-offset:3px}
        @media(max-width:1024px){.nav-links{gap:0}.nav-links a{padding:9px 8px;font-size:13px}.quick-grid{grid-template-columns:repeat(2,1fr)}.hero-grid{gap:40px}.footer-grid{grid-template-columns:repeat(2,1fr)}}
        @media(max-width:768px){.container{width:min(var(--max),calc(100% - 30px))}.nav-wrap{height:68px}.menu-toggle{display:block}.nav-cta{display:none}.nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:var(--ink-soft);border-bottom:1px solid var(--line);padding:12px 15px;flex-direction:column;align-items:stretch;box-shadow:var(--shadow)}.nav-links.open{display:flex}.nav-links a{padding:14px 12px}.nav-links a.active:after{left:12px;right:auto;width:25px;bottom:7px}.hero{padding:70px 0 65px}.hero-grid,.overview-layout,.app-grid,.faq-grid{grid-template-columns:1fr;gap:38px}.hero-board{max-width:520px;transform:none}.section{padding:65px 0}.section-head{display:block}.section-intro{margin-top:12px}.news-wrap{grid-template-columns:1fr}.phone-stage{height:345px}.app-grid{gap:20px}.cta-inner{display:block}.cta .btn-primary{margin-top:22px}}
        @media(max-width:520px){h1{font-size:37px;letter-spacing:-1.4px}.hero-copy{font-size:15px}.quick-grid{grid-template-columns:1fr}.quick-card{min-height:150px}.time-row{grid-template-columns:80px 1fr;gap:8px}.time-row .status{grid-column:2;width:max-content}.news-feature{padding:22px}.news-feature h3{font-size:21px}.footer-grid{grid-template-columns:1fr 1fr;gap:30px}.footer-brand{grid-column:1/-1}.copyright{display:block}.copyright span{display:block;margin-top:7px}.actions a{width:100%}.btn-primary,.btn-secondary{min-height:48px}}

/* roulang page: article */
:root{
            --ink:#101a18;
            --ink-soft:#172522;
            --panel:#1d302b;
            --panel-2:#243b35;
            --paper:#f3f5ee;
            --white:#fffdf7;
            --muted:#aab8b0;
            --text:#eef4ed;
            --teal:#49d7a5;
            --teal-deep:#1a9d78;
            --lime:#d8f56a;
            --orange:#f5ad55;
            --line:rgba(211,239,224,.14);
            --dark-line:#dfe8e0;
            --radius:18px;
            --shadow:0 18px 55px rgba(7,18,15,.22);
            --max:1180px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei","Noto Sans TC",Arial,sans-serif;
            background:var(--ink);
            color:var(--text);
            line-height:1.75;
        }
        a{color:inherit;text-decoration:none}
        a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
        img{display:block;max-width:100%;height:auto}
        button{font:inherit;border:0;cursor:pointer}
        h1,h2,h3,p{margin-top:0}
        h1,h2,h3{line-height:1.3}
        .container{width:min(var(--max),calc(100% - 40px));margin:0 auto}
        .site-header{
            position:sticky;
            top:0;
            z-index:20;
            background:rgba(16,26,24,.94);
            backdrop-filter:blur(14px);
            border-bottom:1px solid var(--line);
        }
        .nav-wrap{
            min-height:76px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:28px;
        }
        .brand{display:flex;align-items:center;gap:12px;min-width:max-content}
        .brand-mark{
            width:38px;height:38px;border-radius:11px;
            background:var(--lime);color:var(--ink);
            display:grid;place-items:center;
            font-size:17px;font-weight:900;
            transform:rotate(-7deg);
        }
        .brand strong{font-size:17px;letter-spacing:-.4px}
        .brand small{display:block;color:var(--muted);font-size:11px;line-height:1.2;margin-top:2px}
        .nav-links{display:flex;align-items:center;gap:5px}
        .nav-links a{
            position:relative;padding:10px 13px;color:#c8d4cd;
            font-size:14px;border-radius:9px;transition:.25s;
        }
        .nav-links a:hover,.nav-links a:focus,.nav-links a.active{
            color:var(--lime);background:rgba(216,245,106,.08)
        }
        .nav-links a.active:after{
            content:"";position:absolute;left:13px;right:13px;bottom:3px;
            height:2px;background:var(--teal);border-radius:2px;
        }
        .nav-cta,.btn-primary{
            background:var(--teal);color:var(--ink);font-weight:800;
            border-radius:10px;padding:12px 17px;
            transition:.25s;display:inline-flex;align-items:center;
            justify-content:center;gap:8px;
        }
        .nav-cta:hover,.btn-primary:hover{
            background:var(--lime);transform:translateY(-2px);
            box-shadow:0 8px 24px rgba(73,215,165,.2);
        }
        .menu-toggle{
            display:none;background:transparent;color:var(--white);
            font-size:25px;padding:8px;
        }
        .article-hero{
            position:relative;
            overflow:hidden;
            padding:76px 0 72px;
            background:linear-gradient(135deg,#101a18 0%,#17342e 58%,#24433a 100%);
        }
        .article-hero:before{
            content:"";position:absolute;width:460px;height:460px;
            right:-130px;top:-230px;border:1px solid rgba(73,215,165,.18);
            border-radius:50%;
            box-shadow:0 0 0 34px rgba(73,215,165,.035),0 0 0 72px rgba(73,215,165,.025);
        }
        .breadcrumb{
            position:relative;z-index:1;
            display:flex;align-items:center;flex-wrap:wrap;gap:10px;
            color:#91a39a;font-size:13px;margin-bottom:34px;
        }
        .breadcrumb a{color:var(--teal)}
        .breadcrumb .separator{color:#62776d}
        .article-kicker{
            display:flex;align-items:center;gap:10px;
            color:var(--lime);font-size:13px;font-weight:800;
            letter-spacing:1px;margin-bottom:20px;
        }
        .article-kicker:before{
            content:"";width:25px;height:2px;background:var(--lime)
        }
        .article-hero h1{
            position:relative;z-index:1;
            max-width:900px;margin-bottom:22px;
            color:var(--white);font-size:clamp(34px,5vw,62px);
            letter-spacing:-1.5px;
        }
        .article-summary{
            position:relative;z-index:1;
            max-width:760px;color:#c0d0c8;font-size:17px;margin-bottom:27px;
        }
        .article-meta{
            position:relative;z-index:1;
            display:flex;align-items:center;flex-wrap:wrap;gap:12px;
            color:#9fb1a8;font-size:13px;
        }
        .meta-tag{
            display:inline-flex;align-items:center;
            background:rgba(73,215,165,.13);color:var(--teal);
            border:1px solid rgba(73,215,165,.23);
            padding:5px 10px;border-radius:6px;font-weight:800;
        }
        .article-shell{
            padding:76px 0 88px;
            background:var(--paper);
            color:var(--ink);
        }
        .article-layout{
            display:grid;
            grid-template-columns:minmax(0,780px) 280px;
            gap:72px;
            align-items:start;
        }
        .article-content{
            background:var(--white);
            border:1px solid #e0e8df;
            border-radius:var(--radius);
            padding:clamp(26px,5vw,58px);
            box-shadow:0 14px 38px rgba(18,45,33,.06);
            font-size:17px;
            color:#34443d;
        }
        .article-content h2{
            color:var(--ink);font-size:29px;
            margin:38px 0 16px;padding-top:8px;
        }
        .article-content h3{
            color:var(--ink);font-size:21px;margin:28px 0 12px
        }
        .article-content p{margin-bottom:19px}
        .article-content ul,.article-content ol{padding-left:24px;margin:16px 0 24px}
        .article-content li{margin:8px 0}
        .article-content a{color:var(--teal-deep);font-weight:700}
        .article-content blockquote{
            margin:28px 0;padding:20px 22px;
            border-left:4px solid var(--teal);
            background:#edf8f0;color:#50625a;
            border-radius:0 12px 12px 0;
        }
        .article-content img{border-radius:14px;margin:28px auto}
        .article-content table{
            width:100%;border-collapse:collapse;margin:25px 0;
            font-size:15px;overflow:hidden;
        }
        .article-content th,.article-content td{
            padding:12px 14px;border:1px solid #dce6de;text-align:left
        }
        .article-content th{background:#eaf3eb;color:var(--ink)}
        .article-note{
            margin:30px 0;padding:20px 22px;
            border-radius:12px;background:#fff5df;
            border:1px solid #f2d39b;color:#70552e;
        }
        .article-aside{
            position:sticky;top:102px;
            display:flex;flex-direction:column;gap:16px;
        }
        .aside-card{
            background:var(--ink-soft);border:1px solid var(--line);
            border-radius:var(--radius);padding:23px;
            box-shadow:var(--shadow);
        }
        .aside-card h2{font-size:18px;color:var(--white);margin-bottom:12px}
        .aside-card p{font-size:13px;color:var(--muted);margin-bottom:18px}
        .aside-link{
            display:flex;justify-content:space-between;align-items:center;
            gap:12px;padding:12px 0;border-bottom:1px solid var(--line);
            color:#d7e4dc;font-size:14px;transition:.2s;
        }
        .aside-link:last-child{border-bottom:0}
        .aside-link:hover{color:var(--lime);padding-left:4px}
        .article-cta{
            margin-top:28px;padding:28px;border-radius:14px;
            background:var(--ink);color:var(--white);
            display:flex;align-items:center;justify-content:space-between;
            gap:25px;
        }
        .article-cta h2{font-size:23px;margin-bottom:7px}
        .article-cta p{color:var(--muted);font-size:14px;margin:0}
        .btn-secondary{
            display:inline-flex;align-items:center;justify-content:center;
            border:1px solid rgba(216,245,106,.48);color:var(--lime);
            padding:11px 17px;border-radius:10px;font-weight:700;transition:.25s;
            white-space:nowrap;
        }
        .btn-secondary:hover{
            background:rgba(216,245,106,.1);
            border-color:var(--lime);transform:translateY(-2px)
        }
        .faq-section{padding:82px 0;background:var(--ink)}
        .section-head{
            display:flex;align-items:end;justify-content:space-between;
            gap:25px;margin-bottom:30px;
        }
        .section-kicker{
            color:var(--teal);font-size:12px;font-weight:800;
            letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;
        }
        .section-head h2{font-size:32px;margin:0;color:var(--white)}
        .section-intro{color:var(--muted);max-width:510px;font-size:15px;margin:0}
        .faq-list{border-top:1px solid var(--line)}
        .faq-item{border-bottom:1px solid var(--line)}
        .faq-question{
            width:100%;display:flex;align-items:center;justify-content:space-between;
            gap:20px;padding:21px 0;background:transparent;color:var(--white);
            text-align:left;font-weight:700;font-size:16px;
        }
        .faq-question span:last-child{
            color:var(--teal);font-size:24px;font-weight:400;transition:.25s
        }
        .faq-answer{display:none;color:var(--muted);font-size:14px;padding:0 42px 21px 0}
        .faq-item.open .faq-answer{display:block}
        .faq-item.open .faq-question span:last-child{transform:rotate(45deg);color:var(--lime)}
        .site-footer{
            background:#0b1311;color:var(--text);
            padding:62px 0 24px;border-top:1px solid var(--line);
        }
        .footer-grid{
            display:grid;grid-template-columns:1.35fr .8fr .9fr 1.15fr;
            gap:38px;padding-bottom:46px;
        }
        .footer-brand p{color:var(--muted);font-size:13px;max-width:280px;margin:18px 0 0}
        .site-footer h3{font-size:14px;color:var(--white);margin:4px 0 16px}
        .footer-links{display:flex;flex-direction:column;gap:9px}
        .footer-links a{color:var(--muted);font-size:13px;transition:.2s}
        .footer-links a:hover{color:var(--lime);padding-left:3px}
        .responsibility{
            color:#9dab9f;font-size:12px;line-height:1.8;
            padding:13px 15px;border:1px solid var(--line);
            border-radius:10px;background:rgba(255,255,255,.025)
        }
        .copyright{
            border-top:1px solid var(--line);padding-top:20px;
            display:flex;justify-content:space-between;gap:20px;
            color:#718179;font-size:12px;flex-wrap:wrap;
        }
        .empty-state{
            text-align:center;padding:54px 20px;
            background:var(--white);border:1px solid #e0e8df;
            border-radius:var(--radius);color:#63736b;
        }
        .empty-state h2{color:var(--ink);font-size:25px;margin-bottom:10px}
        @media (max-width:1024px){
            .article-layout{grid-template-columns:minmax(0,1fr) 245px;gap:35px}
            .footer-grid{grid-template-columns:1fr 1fr}
        }
        @media (max-width:768px){
            .container{width:min(var(--max),calc(100% - 30px))}
            .nav-wrap{min-height:68px}
            .menu-toggle{display:block}
            .nav-cta{display:none}
            .nav-links{
                display:none;position:absolute;top:68px;left:15px;right:15px;
                flex-direction:column;align-items:stretch;gap:3px;
                padding:12px;background:var(--ink-soft);
                border:1px solid var(--line);border-radius:14px;
                box-shadow:var(--shadow);
            }
            .nav-links.open{display:flex}
            .nav-links a{padding:13px 14px}
            .nav-links a.active:after{left:14px;right:auto;width:28px;bottom:7px}
            .article-hero{padding:55px 0 54px}
            .article-hero h1{font-size:38px}
            .article-summary{font-size:16px}
            .article-shell{padding:48px 0 58px}
            .article-layout{display:block}
            .article-aside{position:static;margin-top:24px}
            .article-content{font-size:16px;padding:26px 21px}
            .article-content h2{font-size:25px}
            .article-cta{display:block;padding:24px}
            .article-cta .btn-secondary{margin-top:20px}
            .faq-section{padding:58px 0}
            .section-head{display:block}
            .section-intro{margin-top:14px}
        }
        @media (max-width:520px){
            .brand strong{font-size:15px}
            .brand small{font-size:10px}
            .brand-mark{width:34px;height:34px}
            .article-hero h1{font-size:31px;letter-spacing:-.7px}
            .article-meta{gap:8px;font-size:12px}
            .article-content{border-radius:13px}
            .footer-grid{grid-template-columns:1fr;gap:28px}
            .copyright{display:block}
            .copyright span{display:block;margin-bottom:7px}
        }

/* roulang page: category2 */
:root{
            --ink:#101a18;
            --ink-soft:#172522;
            --panel:#1d302b;
            --panel-2:#243b35;
            --paper:#f3f5ee;
            --white:#fffdf7;
            --muted:#aab8b0;
            --text:#eef4ed;
            --teal:#49d7a5;
            --teal-deep:#1a9d78;
            --lime:#d8f56a;
            --orange:#f5ad55;
            --danger:#d78465;
            --line:rgba(211,239,224,.14);
            --line-light:#dfe8df;
            --radius:18px;
            --shadow:0 18px 55px rgba(7,18,15,.22);
            --max:1180px;
        }

        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei","Noto Sans TC",Arial,sans-serif;
            background:var(--ink);
            color:var(--text);
            line-height:1.7;
            -webkit-font-smoothing:antialiased;
        }
        a{color:inherit;text-decoration:none}
        a:focus-visible,button:focus-visible,summary:focus-visible{
            outline:3px solid var(--orange);
            outline-offset:4px;
        }
        img{display:block;max-width:100%;height:auto}
        button{font:inherit;border:0;cursor:pointer}
        h1,h2,h3,h4,p{margin-top:0}
        h1,h2,h3,h4{letter-spacing:-.035em}
        .container{width:min(var(--max),calc(100% - 40px));margin:auto}

        .site-header{
            position:sticky;
            top:0;
            z-index:20;
            background:rgba(16,26,24,.94);
            backdrop-filter:blur(14px);
            border-bottom:1px solid var(--line);
        }
        .nav-wrap{
            min-height:76px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:28px;
        }
        .brand{
            display:flex;
            align-items:center;
            gap:12px;
            min-width:max-content;
        }
        .brand-mark{
            width:38px;
            height:38px;
            border-radius:11px;
            background:var(--lime);
            color:var(--ink);
            display:grid;
            place-items:center;
            font-size:17px;
            font-weight:900;
            transform:rotate(-7deg);
        }
        .brand strong{
            display:block;
            font-size:17px;
            letter-spacing:-.4px;
            line-height:1.15;
        }
        .brand small{
            display:block;
            color:var(--muted);
            font-size:11px;
            line-height:1.2;
            margin-top:3px;
        }
        .nav-links{
            display:flex;
            align-items:center;
            gap:5px;
        }
        .nav-links a{
            position:relative;
            padding:10px 13px;
            color:#c8d4cd;
            font-size:14px;
            border-radius:9px;
            transition:.25s ease;
        }
        .nav-links a:hover,
        .nav-links a:focus,
        .nav-links a.active{
            color:var(--lime);
            background:rgba(216,245,106,.08);
        }
        .nav-links a.active:after{
            content:"";
            position:absolute;
            left:13px;
            right:13px;
            bottom:3px;
            height:2px;
            background:var(--teal);
            border-radius:2px;
        }
        .nav-cta,
        .btn-primary{
            background:var(--teal);
            color:var(--ink);
            font-weight:800;
            border-radius:10px;
            padding:12px 17px;
            transition:.25s ease;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
        }
        .nav-cta:hover,
        .btn-primary:hover{
            background:var(--lime);
            color:var(--ink);
            transform:translateY(-2px);
            box-shadow:0 8px 24px rgba(73,215,165,.2);
        }
        .menu-toggle{
            display:none;
            background:transparent;
            color:var(--white);
            font-size:25px;
            padding:8px;
            line-height:1;
        }

        .breadcrumb-bar{
            background:var(--ink-soft);
            border-bottom:1px solid var(--line);
        }
        .breadcrumb{
            margin:0;
            padding:15px 0;
            display:flex;
            align-items:center;
            gap:10px;
            color:var(--muted);
            font-size:13px;
        }
        .breadcrumb a:hover{color:var(--lime)}
        .breadcrumb .current{color:#e5eee7}
        .crumb-separator{color:#688077}

        .page-hero{
            position:relative;
            overflow:hidden;
            padding:78px 0 82px;
            background:
                linear-gradient(135deg,rgba(16,26,24,.96),rgba(23,52,46,.96)),
                repeating-linear-gradient(90deg,transparent 0 88px,rgba(73,215,165,.04) 89px,transparent 90px);
        }
        .page-hero:before{
            content:"";
            position:absolute;
            width:620px;
            height:620px;
            right:-180px;
            top:-280px;
            border:1px solid rgba(73,215,165,.2);
            border-radius:50%;
            box-shadow:
                0 0 0 35px rgba(73,215,165,.04),
                0 0 0 75px rgba(73,215,165,.025);
        }
        .page-hero:after{
            content:"";
            position:absolute;
            left:0;
            right:0;
            bottom:0;
            height:1px;
            background:linear-gradient(90deg,transparent,var(--teal),transparent);
            opacity:.55;
        }
        .hero-layout{
            position:relative;
            z-index:1;
            display:grid;
            grid-template-columns:1.05fr .95fr;
            gap:72px;
            align-items:center;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:var(--lime);
            font-size:13px;
            font-weight:800;
            letter-spacing:1px;
            margin-bottom:18px;
        }
        .eyebrow:before{
            content:"";
            width:25px;
            height:2px;
            background:var(--lime);
        }
        .page-hero h1{
            max-width:700px;
            margin-bottom:22px;
            color:var(--white);
            font-size:clamp(38px,5vw,68px);
            line-height:1.12;
        }
        .page-hero h1 em{
            color:var(--teal);
            font-style:normal;
        }
        .hero-text{
            max-width:620px;
            color:#c0d0c8;
            font-size:17px;
            line-height:1.9;
            margin-bottom:30px;
        }
        .button-row{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
        }
        .btn-secondary{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            border:1px solid rgba(216,245,106,.48);
            color:var(--lime);
            padding:11px 17px;
            border-radius:10px;
            font-weight:700;
            transition:.25s ease;
        }
        .btn-secondary:hover{
            color:var(--lime);
            background:rgba(216,245,106,.1);
            border-color:var(--lime);
            transform:translateY(-2px);
        }

        .fixture-panel{
            position:relative;
            background:rgba(11,22,19,.58);
            border:1px solid var(--line);
            border-radius:24px;
            padding:22px;
            box-shadow:var(--shadow);
        }
        .fixture-panel:before{
            content:"足球賽事資訊";
            position:absolute;
            right:22px;
            top:22px;
            color:var(--muted);
            font-size:11px;
            letter-spacing:1px;
        }
        .panel-top{
            display:flex;
            align-items:center;
            gap:9px;
            color:var(--lime);
            font-size:12px;
            font-weight:800;
            letter-spacing:.8px;
            padding-bottom:19px;
            border-bottom:1px solid var(--line);
        }
        .live-dot{
            width:8px;
            height:8px;
            border-radius:50%;
            background:var(--teal);
            box-shadow:0 0 0 5px rgba(73,215,165,.12);
        }
        .fixture-main{
            padding:28px 0 23px;
            display:grid;
            grid-template-columns:1fr auto 1fr;
            gap:15px;
            align-items:center;
            text-align:center;
        }
        .club{
            display:flex;
            flex-direction:column;
            gap:10px;
            align-items:center;
            color:var(--white);
            font-weight:800;
            font-size:15px;
        }
        .club-badge{
            width:48px;
            height:48px;
            border:1px solid rgba(73,215,165,.35);
            border-radius:15px;
            display:grid;
            place-items:center;
            color:var(--teal);
            background:rgba(73,215,165,.08);
            font-size:19px;
            font-weight:900;
        }
        .fixture-vs{
            color:var(--orange);
            font-size:12px;
            font-weight:800;
            letter-spacing:1px;
        }
        .fixture-meta{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:8px;
        }
        .meta-box{
            background:rgba(255,255,255,.045);
            border:1px solid var(--line);
            border-radius:11px;
            padding:11px 8px;
            text-align:center;
        }
        .meta-box span{
            display:block;
            color:var(--muted);
            font-size:11px;
            margin-bottom:3px;
        }
        .meta-box strong{
            color:var(--white);
            font-size:13px;
        }

        .section{padding:86px 0}
        .section-light{
            background:var(--paper);
            color:var(--ink);
        }
        .section-dark{background:var(--ink)}
        .section-head{
            display:flex;
            align-items:end;
            justify-content:space-between;
            gap:25px;
            margin-bottom:32px;
        }
        .section-head h2{
            margin:6px 0 0;
            font-size:clamp(28px,3vw,42px);
            line-height:1.2;
        }
        .section-kicker{
            color:var(--teal-deep);
            font-size:12px;
            font-weight:900;
            letter-spacing:1.5px;
            text-transform:uppercase;
        }
        .section-intro{
            color:#728078;
            max-width:510px;
            font-size:15px;
            margin:0;
        }

        .football-nav{
            display:grid;
            grid-template-columns:1.25fr 1fr 1fr 1fr;
            gap:13px;
        }
        .football-card{
            min-height:190px;
            padding:24px;
            border:1px solid #e0e8df;
            border-radius:var(--radius);
            background:#fff;
            color:var(--ink);
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            transition:.25s ease;
        }
        .football-card:first-child{
            background:var(--ink);
            color:var(--white);
            border-color:var(--ink);
        }
        .football-card:hover{
            transform:translateY(-5px);
            box-shadow:0 13px 30px rgba(22,48,39,.12);
        }
        .football-card h3{
            font-size:19px;
            margin:0 0 7px;
        }
        .football-card p{
            color:#77847d;
            font-size:13px;
            margin:0;
        }
        .football-card:first-child p{color:#aab8b0}
        .card-icon{
            width:37px;
            height:37px;
            display:grid;
            place-items:center;
            color:var(--teal-deep);
            border:1px solid #cde8d7;
            border-radius:11px;
            margin-bottom:25px;
            font-weight:900;
        }
        .football-card:first-child .card-icon{
            color:var(--lime);
            border-color:rgba(216,245,106,.35);
        }
        .card-link{
            color:var(--teal-deep);
            font-size:13px;
            font-weight:900;
            margin-top:18px;
        }
        .football-card:first-child .card-link{color:var(--lime)}

        .timeline-wrap{
            display:grid;
            grid-template-columns:.86fr 1.14fr;
            gap:70px;
            align-items:start;
        }
        .timeline-copy h2{
            font-size:clamp(28px,3vw,40px);
            line-height:1.25;
            margin-bottom:17px;
        }
        .timeline-copy p{color:var(--muted);max-width:450px}
        .note-box{
            margin-top:28px;
            padding:18px 20px;
            border-left:3px solid var(--orange);
            background:rgba(245,173,85,.08);
            color:#c6d2ca;
            font-size:13px;
        }
        .timeline{
            position:relative;
            padding-left:31px;
        }
        .timeline:before{
            content:"";
            position:absolute;
            left:3px;
            top:16px;
            bottom:16px;
            width:1px;
            background:rgba(73,215,165,.3);
        }
        .time-row{
            position:relative;
            display:grid;
            grid-template-columns:100px 1fr auto;
            gap:20px;
            align-items:center;
            padding:18px 0;
            border-bottom:1px solid var(--line);
        }
        .time-row:before{
            content:"";
            position:absolute;
            left:-32px;
            width:9px;
            height:9px;
            background:var(--teal);
            border:3px solid var(--ink-soft);
            border-radius:50%;
        }
        .time-row time{
            color:var(--orange);
            font-size:12px;
            font-weight:800;
        }
        .time-row strong{
            display:block;
            color:var(--white);
            font-size:15px;
        }
        .time-row small{
            display:block;
            color:var(--muted);
            font-size:12px;
            margin-top:3px;
        }
        .status{
            color:var(--teal);
            background:rgba(73,215,165,.1);
            border:1px solid rgba(73,215,165,.22);
            border-radius:20px;
            padding:4px 9px;
            font-size:11px;
            white-space:nowrap;
        }

        .market-section{background:var(--panel);color:var(--text)}
        .market-grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:16px;
        }
        .market-card{
            position:relative;
            padding:27px;
            min-height:205px;
            border:1px solid var(--line);
            border-radius:var(--radius);
            background:rgba(255,255,255,.035);
            transition:.25s ease;
        }
        .market-card:hover{
            background:rgba(255,255,255,.07);
            border-color:rgba(73,215,165,.4);
            transform:translateY(-4px);
        }
        .market-number{
            color:var(--orange);
            font-size:12px;
            font-weight:900;
            letter-spacing:1px;
        }
        .market-card h3{
            color:var(--white);
            font-size:20px;
            margin:24px 0 9px;
        }
        .market-card p{
            color:var(--muted);
            font-size:14px;
            margin:0;
        }
        .market-card:after{
            content:"→";
            position:absolute;
            right:24px;
            bottom:23px;
            color:var(--teal);
            font-size:20px;
        }

        .app-section{
            background:#dce9df;
            color:var(--ink);
            overflow:hidden;
        }
        .app-grid{
            display:grid;
            grid-template-columns:.82fr 1.18fr;
            gap:90px;
            align-items:center;
        }
        .phone-stage{
            height:360px;
            position:relative;
            display:grid;
            place-items:center;
        }
        .phone{
            width:205px;
            height:338px;
            border:8px solid var(--ink);
            border-radius:30px;
            background:var(--white);
            box-shadow:0 22px 45px rgba(16,26,24,.2);
            padding:14px;
            transform:rotate(-5deg);
            position:relative;
            z-index:2;
        }
        .phone:before{
            content:"";
            display:block;
            width:65px;
            height:5px;
            border-radius:5px;
            background:#31423b;
            margin:0 auto 18px;
        }
        .phone-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            color:var(--ink);
            font-size:11px;
            font-weight:900;
            margin-bottom:17px;
        }
        .phone-score{
            background:var(--ink);
            color:var(--white);
            border-radius:12px;
            padding:15px 12px;
            margin-bottom:12px;
        }
        .phone-score small{color:var(--lime);font-size:9px}
        .phone-score strong{display:block;font-size:14px;margin-top:5px}
        .phone-line{
            height:9px;
            border-radius:5px;
            background:#d8e7dc;
            margin:10px 0;
        }
        .phone-line.short{width:68%}
        .phone-line.green{background:var(--teal);width:82%}
        .phone-tabs{
            display:flex;
            justify-content:space-between;
            color:#7e8d83;
            font-size:9px;
            margin-top:20px;
        }
        .phone-tabs b{color:var(--teal-deep)}
        .phone-orbit{
            position:absolute;
            width:275px;
            height:275px;
            border:1px solid rgba(26,157,120,.23);
            border-radius:50%;
        }
        .app-copy h2{
            font-size:clamp(29px,3.5vw,46px);
            line-height:1.2;
            margin-bottom:16px;
        }
        .app-copy>p{
            color:#53645b;
            max-width:560px;
            margin-bottom:25px;
        }
        .app-points{
            display:grid;
            grid-template-columns:repeat(2,1fr);
            gap:12px;
            margin:25px 0 29px;
        }
        .app-point{
            display:flex;
            gap:10px;
            align-items:flex-start;
            color:#405149;
            font-size:13px;
        }
        .app-point b{
            flex:none;
            width:22px;
            height:22px;
            display:grid;
            place-items:center;
            color:var(--teal-deep);
            background:#c6e6d1;
            border-radius:7px;
            font-size:12px;
        }

        .faq-section{background:var(--ink-soft)}
        .faq-grid{
            display:grid;
            grid-template-columns:.72fr 1.28fr;
            gap:75px;
        }
        .faq-lead h2{
            font-size:clamp(29px,3vw,42px);
            line-height:1.2;
        }
        .faq-lead p{color:var(--muted);margin-top:16px}
        .faq-list{border-top:1px solid var(--line)}
        .faq-item{border-bottom:1px solid var(--line)}
        .faq-item summary{
            list-style:none;
            cursor:pointer;
            padding:20px 0;
            color:var(--white);
            font-weight:800;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
        }
        .faq-item summary::-webkit-details-marker{display:none}
        .faq-item summary:after{
            content:"+";
            color:var(--teal);
            font-size:23px;
            font-weight:400;
            transition:.2s ease;
        }
        .faq-item[open] summary:after{content:"−";color:var(--lime)}
        .faq-answer{
            color:var(--muted);
            font-size:14px;
            padding:0 42px 21px 0;
            max-width:760px;
        }

        .cta{
            padding:62px 0;
            background:var(--lime);
            color:var(--ink);
        }
        .cta-inner{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:35px;
        }
        .cta h2{
            margin:0 0 8px;
            font-size:clamp(28px,3vw,40px);
            line-height:1.2;
        }
        .cta p{margin:0;color:#3d5144;max-width:650px}
        .btn-dark{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            white-space:nowrap;
            background:var(--ink);
            color:var(--white);
            padding:13px 20px;
            border-radius:10px;
            font-weight:800;
            transition:.25s ease;
        }
        .btn-dark:hover{
            color:var(--lime);
            background:var(--ink-soft);
            transform:translateY(-2px);
        }

        .site-footer{
            padding:60px 0 25px;
            background:var(--ink);
            color:var(--text);
        }
        .footer-grid{
            display:grid;
            grid-template-columns:1.25fr .8fr .9fr 1fr;
            gap:42px;
            padding-bottom:42px;
            border-bottom:1px solid var(--line);
        }
        .footer-brand .brand{margin-bottom:18px}
        .footer-brand p{
            max-width:285px;
            color:var(--muted);
            font-size:13px;
            margin:0;
        }
        .site-footer h3{
            color:var(--white);
            font-size:14px;
            margin:5px 0 16px;
        }
        .footer-links{
            display:flex;
            flex-direction:column;
            align-items:flex-start;
            gap:9px;
        }
        .footer-links a{
            color:var(--muted);
            font-size:13px;
            transition:.2s ease;
        }
        .footer-links a:hover{color:var(--lime);padding-left:3px}
        .responsibility{
            color:var(--muted);
            border-left:2px solid var(--orange);
            padding-left:14px;
            font-size:12px;
        }
        .copyright{
            display:flex;
            justify-content:space-between;
            gap:20px;
            padding-top:20px;
            color:#718279;
            font-size:11px;
        }

        @media (max-width:1024px){
            .hero-layout{gap:42px}
            .nav-links a{padding-left:9px;padding-right:9px;font-size:13px}
            .nav-cta{padding:10px 13px;font-size:13px}
            .football-nav{grid-template-columns:repeat(2,1fr)}
            .timeline-wrap{gap:42px}
            .app-grid{gap:45px}
            .footer-grid{grid-template-columns:1.2fr 1fr 1fr}
            .footer-grid>div:last-child{grid-column:1/-1}
        }

        @media (max-width:768px){
            .container{width:min(var(--max),calc(100% - 32px))}
            .nav-wrap{min-height:68px}
            .menu-toggle{display:block}
            .nav-cta{display:none}
            .nav-links{
                display:none;
                position:absolute;
                top:68px;
                left:0;
                right:0;
                padding:12px 16px 18px;
                background:var(--ink-soft);
                border-bottom:1px solid var(--line);
                flex-direction:column;
                align-items:stretch;
                box-shadow:0 16px 28px rgba(0,0,0,.2);
            }
            .nav-links.open{display:flex}
            .nav-links a{padding:13px 15px}
            .nav-links a.active:after{left:15px;right:auto;width:26px;bottom:7px}
            .page-hero{padding:60px 0 64px}
            .hero-layout,
            .timeline-wrap,
            .app-grid,
            .faq-grid{grid-template-columns:1fr}
            .hero-layout{gap:45px}
            .page-hero h1{font-size:clamp(37px,10vw,55px)}
            .hero-text{font-size:16px}
            .fixture-panel{max-width:570px;margin:auto;width:100%}
            .section{padding:65px 0}
            .section-head{display:block;margin-bottom:25px}
            .section-intro{margin-top:12px}
            .football-nav{grid-template-columns:1fr 1fr}
            .timeline-copy{max-width:600px}
            .app-grid{gap:20px}
            .phone-stage{height:340px}
            .app-copy{padding-bottom:10px}
            .faq-grid{gap:30px}
            .cta-inner{display:block}
            .cta .btn-dark{margin-top:22px}
        }

        @media (max-width:520px){
            .container{width:calc(100% - 28px)}
            .brand strong{font-size:15px}
            .brand small{font-size:10px}
            .brand-mark{width:35px;height:35px}
            .breadcrumb{font-size:12px;overflow:hidden;white-space:nowrap}
            .page-hero h1{font-size:38px}
            .button-row{display:grid;grid-template-columns:1fr}
            .button-row a{width:100%}
            .fixture-main{gap:8px}
            .club{font-size:13px}
            .club-badge{width:42px;height:42px}
            .fixture-meta{grid-template-columns:1fr}
            .meta-box{display:flex;justify-content:space-between;padding:9px 12px}
            .football-nav{grid-template-columns:1fr}
            .football-card{min-height:160px}
            .market-grid{grid-template-columns:1fr}
            .market-card{min-height:180px}
            .time-row{
                grid-template-columns:74px 1fr;
                gap:12px;
            }
            .time-row .status{grid-column:2;justify-self:start}
            .time-row strong{font-size:14px}
            .app-points{grid-template-columns:1fr}
            .phone-stage{transform:scale(.9);margin:-12px 0}
            .faq-item summary{font-size:14px}
            .copyright{display:block}
            .copyright span{display:block;margin-top:6px}
        }

/* roulang page: category1 */
:root{
            --ink:#101a18;
            --ink-soft:#172522;
            --panel:#1d302b;
            --panel-2:#243b35;
            --paper:#f3f5ee;
            --white:#fffdf7;
            --muted:#aab8b0;
            --text:#eef4ed;
            --teal:#49d7a5;
            --teal-deep:#1a9d78;
            --lime:#d8f56a;
            --orange:#f5ad55;
            --line:rgba(211,239,224,.14);
            --line-dark:#dce7de;
            --radius:18px;
            --shadow:0 18px 55px rgba(7,18,15,.22);
            --max:1180px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei","Noto Sans TC",Arial,sans-serif;
            background:var(--ink);
            color:var(--text);
            line-height:1.7;
        }
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%}
        button{font:inherit;border:0;cursor:pointer}
        h1,h2,h3,h4,p{margin-top:0}
        h1,h2,h3,h4{line-height:1.25;letter-spacing:-.03em}
        .container{width:min(var(--max),calc(100% - 40px));margin:auto}
        .site-header{
            position:sticky;
            top:0;
            z-index:20;
            background:rgba(16,26,24,.93);
            backdrop-filter:blur(14px);
            border-bottom:1px solid var(--line);
        }
        .nav-wrap{
            min-height:76px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:28px;
        }
        .brand{display:flex;align-items:center;gap:12px;min-width:max-content}
        .brand-mark{
            width:38px;
            height:38px;
            border-radius:11px;
            background:var(--lime);
            color:var(--ink);
            display:grid;
            place-items:center;
            font-size:17px;
            font-weight:900;
            transform:rotate(-7deg);
        }
        .brand strong{font-size:17px;letter-spacing:-.4px}
        .brand small{display:block;color:var(--muted);font-size:11px;line-height:1.2;margin-top:2px}
        .nav-links{display:flex;align-items:center;gap:5px}
        .nav-links a{
            position:relative;
            padding:10px 13px;
            color:#c8d4cd;
            font-size:14px;
            border-radius:9px;
            transition:.25s;
        }
        .nav-links a:hover,.nav-links a:focus,.nav-links a.active{
            color:var(--lime);
            background:rgba(216,245,106,.08);
        }
        .nav-links a.active:after{
            content:"";
            position:absolute;
            left:13px;
            right:13px;
            bottom:3px;
            height:2px;
            background:var(--teal);
            border-radius:2px;
        }
        .nav-cta,.btn-primary{
            background:var(--teal);
            color:var(--ink);
            font-weight:800;
            border-radius:10px;
            padding:12px 17px;
            transition:.25s;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
        }
        .nav-cta:hover,.btn-primary:hover{
            background:var(--lime);
            transform:translateY(-2px);
            box-shadow:0 8px 24px rgba(73,215,165,.2);
        }
        .menu-toggle{
            display:none;
            background:transparent;
            color:var(--white);
            font-size:25px;
            padding:8px;
        }
        .hero{
            position:relative;
            overflow:hidden;
            padding:80px 0 74px;
            background:linear-gradient(135deg,#101a18 0%,#17342e 55%,#24433a 100%);
        }
        .hero:before{
            content:"";
            position:absolute;
            width:540px;
            height:540px;
            border:1px solid rgba(73,215,165,.18);
            border-radius:50%;
            right:-150px;
            top:-230px;
            box-shadow:0 0 0 34px rgba(73,215,165,.035),0 0 0 72px rgba(73,215,165,.025);
        }
        .hero:after{
            content:"";
            position:absolute;
            inset:auto 0 0;
            height:1px;
            background:linear-gradient(90deg,transparent,var(--teal),transparent);
            opacity:.5;
        }
        .breadcrumb{
            position:relative;
            z-index:1;
            display:flex;
            align-items:center;
            gap:10px;
            color:#9eafa5;
            font-size:13px;
            margin-bottom:36px;
        }
        .breadcrumb a:hover{color:var(--lime)}
        .breadcrumb .sep{color:#536a60}
        .hero-grid{
            position:relative;
            z-index:1;
            display:grid;
            grid-template-columns:1.1fr .9fr;
            gap:70px;
            align-items:center;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:var(--lime);
            font-size:13px;
            font-weight:700;
            letter-spacing:1px;
            margin-bottom:18px;
        }
        .eyebrow:before{
            content:"";
            width:25px;
            height:2px;
            background:var(--lime);
        }
        .hero h1{
            font-size:clamp(36px,5vw,64px);
            max-width:700px;
            margin-bottom:22px;
        }
        .hero-copy{
            font-size:17px;
            color:#c0d0c8;
            max-width:650px;
            margin:0 0 30px;
        }
        .hero-actions{display:flex;flex-wrap:wrap;gap:12px}
        .btn-secondary{
            border:1px solid rgba(216,245,106,.48);
            color:var(--lime);
            padding:11px 17px;
            border-radius:10px;
            font-weight:700;
            transition:.25s;
            display:inline-flex;
            align-items:center;
            justify-content:center;
        }
        .btn-secondary:hover{
            background:rgba(216,245,106,.1);
            border-color:var(--lime);
        }
        .signal-panel{
            background:rgba(11,22,19,.52);
            border:1px solid var(--line);
            border-radius:24px;
            padding:25px;
            box-shadow:var(--shadow);
            transform:rotate(1deg);
        }
        .signal-top{display:flex;align-items:center;justify-content:space-between;gap:15px}
        .signal-title{font-size:13px;color:#b8c9c0;font-weight:700}
        .live-dot{
            display:inline-flex;
            align-items:center;
            gap:6px;
            font-size:11px;
            color:var(--lime);
        }
        .live-dot:before{
            content:"";
            width:7px;
            height:7px;
            border-radius:50%;
            background:var(--teal);
            box-shadow:0 0 0 4px rgba(73,215,165,.12);
        }
        .signal-panel h2{font-size:27px;margin:28px 0 20px}
        .signal-list{border-top:1px solid var(--line)}
        .signal-item{
            display:grid;
            grid-template-columns:62px 1fr auto;
            gap:14px;
            align-items:center;
            padding:15px 0;
            border-bottom:1px solid var(--line);
        }
        .signal-item time{color:var(--orange);font-size:12px;font-weight:800}
        .signal-item strong{display:block;font-size:14px}
        .signal-item small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
        .signal-badge{
            color:var(--teal);
            border:1px solid rgba(73,215,165,.3);
            padding:3px 7px;
            border-radius:5px;
            font-size:10px;
            white-space:nowrap;
        }
        .section{padding:86px 0}
        .section-light{background:var(--paper);color:var(--ink)}
        .section-dark{background:var(--ink-soft)}
        .section-head{
            display:flex;
            align-items:end;
            justify-content:space-between;
            gap:25px;
            margin-bottom:32px;
        }
        .section-kicker{
            color:var(--teal-deep);
            font-size:12px;
            font-weight:800;
            letter-spacing:1.5px;
            text-transform:uppercase;
            margin-bottom:9px;
        }
        .section-head h2{font-size:clamp(27px,3vw,40px);margin-bottom:0}
        .section-intro{color:#728078;max-width:550px;font-size:15px;margin-bottom:0}
        .topic-grid{
            display:grid;
            grid-template-columns:1.15fr .85fr .85fr;
            gap:15px;
        }
        .topic-card{
            min-height:218px;
            padding:26px;
            border-radius:var(--radius);
            border:1px solid #dfe8df;
            background:#fff;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            transition:.25s;
        }
        .topic-card:first-child{
            background:var(--ink);
            border-color:var(--ink);
            color:var(--white);
        }
        .topic-card:hover{transform:translateY(-5px);box-shadow:0 14px 32px rgba(22,48,39,.12)}
        .topic-icon{
            width:42px;
            height:42px;
            border-radius:12px;
            display:grid;
            place-items:center;
            color:var(--teal-deep);
            background:#e5f6ed;
            font-weight:900;
            font-size:18px;
        }
        .topic-card:first-child .topic-icon{background:rgba(216,245,106,.12);color:var(--lime)}
        .topic-card h3{font-size:20px;margin:24px 0 7px}
        .topic-card p{font-size:13px;color:#77847d;margin:0}
        .topic-card:first-child p{color:#aab8b0}
        .card-link{font-size:13px;font-weight:800;color:var(--teal-deep);margin-top:22px}
        .topic-card:first-child .card-link{color:var(--lime)}
        .timeline-layout{
            display:grid;
            grid-template-columns:.76fr 1.24fr;
            gap:74px;
            align-items:start;
        }
        .timeline-lead h2{font-size:36px;margin-bottom:16px}
        .timeline-lead p{color:var(--muted);font-size:15px}
        .info-note{
            margin-top:28px;
            border-left:3px solid var(--orange);
            padding:13px 16px;
            background:rgba(245,173,85,.08);
            color:#c6d2ca;
            font-size:13px;
        }
        .timeline{position:relative;padding-left:31px}
        .time-row{
            position:relative;
            display:grid;
            grid-template-columns:96px 1fr auto;
            gap:22px;
            align-items:center;
            border-bottom:1px solid var(--line);
            padding:19px 0;
        }
        .time-row:before{
            content:"";
            position:absolute;
            left:-35px;
            width:9px;
            height:9px;
            background:var(--teal);
            border:3px solid var(--ink-soft);
            border-radius:50%;
        }
        .time-row time{font-size:12px;color:var(--orange);font-weight:700}
        .time-row strong{font-size:15px}
        .time-row small{color:var(--muted);font-size:12px}
        .time-row:last-child{border-bottom:0}
        .category-points{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:16px;
        }
        .point{
            padding:25px;
            background:var(--panel);
            border:1px solid var(--line);
            border-radius:var(--radius);
            transition:.25s;
        }
        .point:hover{border-color:rgba(73,215,165,.45);transform:translateY(-4px)}
        .point-number{color:var(--lime);font-size:12px;font-weight:900;letter-spacing:1px}
        .point h3{font-size:19px;margin:17px 0 9px}
        .point p{color:var(--muted);font-size:13px;margin:0}
        .reading-area{
            display:grid;
            grid-template-columns:1.15fr .85fr;
            gap:18px;
        }
        .reading-feature,.reading-list{
            border-radius:var(--radius);
            border:1px solid #dfe8df;
            background:#fff;
        }
        .reading-feature{padding:31px}
        .reading-feature .news-tag{margin-bottom:28px}
        .news-tag{
            display:inline-block;
            color:var(--teal-deep);
            background:#e5f6ed;
            border-radius:5px;
            padding:4px 8px;
            font-size:11px;
            font-weight:800;
        }
        .reading-feature h3{font-size:27px;max-width:560px}
        .reading-feature p{color:#738079;font-size:15px;margin:14px 0 22px}
        .news-meta{display:flex;align-items:center;gap:12px;color:#8b9890;font-size:12px}
        .reading-list{padding:10px}
        .reading-item{
            display:block;
            padding:18px 19px;
            border-bottom:1px solid #e5ece5;
            transition:.2s;
        }
        .reading-item:last-child{border-bottom:0}
        .reading-item:hover{background:#f5faf4}
        .reading-item h3{font-size:16px;color:var(--ink);margin:9px 0 5px}
        .reading-item p{font-size:12px;color:#7b8780;margin:0}
        .reading-item time{font-size:11px;color:#8a9890}
        .app-section{
            background:#dce9df;
            color:var(--ink);
            overflow:hidden;
        }
        .app-grid{
            display:grid;
            grid-template-columns:.82fr 1.18fr;
            gap:90px;
            align-items:center;
        }
        .phone-stage{
            height:365px;
            position:relative;
            display:grid;
            place-items:center;
        }
        .phone-stage:before,.phone-stage:after{
            content:"";
            position:absolute;
            border:1px solid rgba(26,157,120,.2);
            border-radius:50%;
        }
        .phone-stage:before{width:310px;height:310px}
        .phone-stage:after{width:410px;height:410px}
        .phone{
            position:relative;
            z-index:1;
            width:190px;
            height:350px;
            border:7px solid #15251f;
            border-radius:30px;
            background:#f7fbf2;
            box-shadow:0 20px 35px rgba(15,42,31,.2);
            padding:14px 11px;
        }
        .phone-notch{
            width:65px;
            height:16px;
            background:#15251f;
            border-radius:0 0 12px 12px;
            margin:-14px auto 18px;
        }
        .phone-bar{height:10px;width:58%;background:#b8d7bd;border-radius:5px;margin-bottom:18px}
        .phone-card{
            padding:13px;
            border-radius:12px;
            background:#17342e;
            color:#fff;
            margin-bottom:10px;
        }
        .phone-card small{font-size:8px;color:#b8d9c8}
        .phone-card strong{display:block;font-size:13px;margin-top:5px}
        .phone-lines{display:grid;gap:9px}
        .phone-lines span{
            display:block;
            height:35px;
            border-radius:9px;
            background:#e2eee2;
            position:relative;
        }
        .phone-lines span:after{
            content:"";
            position:absolute;
            left:10px;
            top:10px;
            width:48%;
            height:6px;
            border-radius:5px;
            background:#a8c5ae;
        }
        .app-copy .section-kicker{color:var(--teal-deep)}
        .app-copy h2{font-size:clamp(29px,3.5vw,44px);max-width:560px}
        .app-copy p{color:#56665d;max-width:590px}
        .app-benefits{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:12px;
            margin:25px 0 28px;
        }
        .app-benefit{
            border-top:2px solid rgba(26,157,120,.35);
            padding-top:11px;
            color:#53645b;
            font-size:13px;
        }
        .app-benefit strong{display:block;color:var(--ink);font-size:14px;margin-bottom:3px}
        .faq-section{background:var(--ink-soft)}
        .faq-grid{
            display:grid;
            grid-template-columns:.72fr 1.28fr;
            gap:75px;
        }
        .faq-lead h2{font-size:38px}
        .faq-lead p{color:var(--muted);margin-top:16px}
        .faq-list{border-top:1px solid var(--line)}
        .faq-item{border-bottom:1px solid var(--line)}
        .faq-question{
            width:100%;
            background:transparent;
            color:var(--text);
            text-align:left;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
            padding:20px 0;
            font-weight:700;
        }
        .faq-question:hover{color:var(--lime)}
        .faq-question:focus-visible,.nav-links a:focus-visible,.btn-primary:focus-visible,.btn-secondary:focus-visible,.nav-cta:focus-visible{
            outline:3px solid rgba(216,245,106,.7);
            outline-offset:3px;
        }
        .faq-symbol{
            width:26px;
            height:26px;
            border:1px solid rgba(73,215,165,.45);
            border-radius:50%;
            display:grid;
            place-items:center;
            color:var(--teal);
            flex:0 0 auto;
            transition:.25s;
        }
        .faq-answer{
            max-height:0;
            overflow:hidden;
            color:var(--muted);
            font-size:14px;
            transition:max-height .3s ease,padding .3s ease;
        }
        .faq-item.open .faq-answer{max-height:180px;padding:0 45px 19px 0}
        .faq-item.open .faq-symbol{background:var(--teal);color:var(--ink);transform:rotate(45deg)}
        .cta{
            padding:62px 0;
            background:var(--lime);
            color:var(--ink);
        }
        .cta-inner{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:35px;
        }
        .cta h2{font-size:clamp(26px,3vw,38px);margin-bottom:9px}
        .cta p{margin:0;color:#40543d;max-width:650px;font-size:15px}
        .cta .btn-primary{background:var(--ink);color:var(--lime)}
        .cta .btn-primary:hover{background:var(--teal);color:var(--ink)}
        .site-footer{background:#0c1412;padding:62px 0 25px;color:var(--text)}
        .footer-grid{
            display:grid;
            grid-template-columns:1.25fr .75fr .85fr 1fr;
            gap:35px;
            padding-bottom:44px;
        }
        .footer-brand p{color:var(--muted);font-size:13px;max-width:300px;margin:20px 0 0}
        .footer-grid h3{font-size:14px;color:var(--white);margin-bottom:16px}
        .footer-links{display:grid;gap:8px}
        .footer-links a{color:var(--muted);font-size:13px;transition:.2s}
        .footer-links a:hover{color:var(--lime);padding-left:3px}
        .responsibility{
            color:#9aaba1;
            border-left:2px solid var(--orange);
            padding-left:13px;
            font-size:12px;
            line-height:1.8;
        }
        .copyright{
            border-top:1px solid var(--line);
            padding-top:20px;
            display:flex;
            justify-content:space-between;
            gap:20px;
            color:#708078;
            font-size:11px;
        }
        @media (max-width:1024px){
            .nav-links a{padding-left:9px;padding-right:9px;font-size:13px}
            .nav-cta{padding:10px 12px;font-size:13px}
            .hero-grid,.app-grid{gap:42px}
            .timeline-layout,.faq-grid{gap:45px}
            .footer-grid{grid-template-columns:1fr 1fr}
        }
        @media (max-width:768px){
            .container{width:min(var(--max),calc(100% - 32px))}
            .nav-wrap{min-height:68px}
            .nav-cta{display:none}
            .menu-toggle{display:block}
            .nav-links{
                position:absolute;
                top:68px;
                left:16px;
                right:16px;
                display:none;
                flex-direction:column;
                align-items:stretch;
                padding:10px;
                background:#152521;
                border:1px solid var(--line);
                border-radius:14px;
                box-shadow:var(--shadow);
            }
            .nav-links.open{display:flex}
            .nav-links a{padding:13px 14px}
            .nav-links a.active:after{left:14px;right:auto;width:24px;bottom:7px}
            .hero{padding:58px 0 60px}
            .hero-grid,.timeline-layout,.app-grid,.faq-grid,.reading-area{grid-template-columns:1fr}
            .hero-grid{gap:38px}
            .hero h1{font-size:clamp(35px,9vw,52px)}
            .hero-board{max-width:520px;transform:none}
            .section{padding:63px 0}
            .section-head{display:block;margin-bottom:25px}
            .section-intro{margin-top:12px}
            .topic-grid{grid-template-columns:1fr 1fr}
            .topic-card:first-child{grid-column:span 2}
            .category-points{grid-template-columns:1fr}
            .timeline-lead h2,.faq-lead h2{font-size:31px}
            .app-grid{gap:15px}
            .phone-stage{height:345px}
            .app-benefits{grid-template-columns:1fr}
            .cta-inner{display:block}
            .cta .btn-primary{margin-top:23px}
            .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
            .copyright{display:block}
            .copyright span{display:block;margin-top:6px}
        }
        @media (max-width:520px){
            .container{width:calc(100% - 28px)}
            .brand strong{font-size:15px}
            .brand small{font-size:10px}
            .hero-actions{display:grid;grid-template-columns:1fr}
            .hero-actions a{width:100%}
            .breadcrumb{font-size:12px;margin-bottom:27px}
            .signal-panel{padding:19px}
            .signal-panel h2{font-size:23px}
            .signal-item{grid-template-columns:52px 1fr}
            .signal-badge{grid-column:2;justify-self:start;margin-top:-8px}
            .topic-grid{grid-template-columns:1fr}
            .topic-card:first-child{grid-column:auto}
            .topic-card{min-height:190px}
            .time-row{grid-template-columns:70px 1fr;gap:12px}
            .time-row small{grid-column:2}
            .reading-feature{padding:23px}
            .reading-feature h3{font-size:23px}
            .app-copy h2{font-size:31px}
            .footer-grid{grid-template-columns:1fr}
            .site-footer{padding-top:48px}
        }

/* roulang page: category3 */
:root{
            --ink:#101a18;
            --ink-soft:#172522;
            --panel:#1d302b;
            --panel-2:#243b35;
            --paper:#f3f5ee;
            --white:#fffdf7;
            --muted:#aab8b0;
            --text:#eef4ed;
            --teal:#49d7a5;
            --teal-deep:#1a9d78;
            --lime:#d8f56a;
            --orange:#f5ad55;
            --line:rgba(211,239,224,.14);
            --line-light:#e0e8df;
            --radius:18px;
            --shadow:0 18px 55px rgba(7,18,15,.22);
            --max:1180px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei","Noto Sans TC",Arial,sans-serif;
            background:var(--ink);
            color:var(--text);
            line-height:1.7;
        }
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%}
        button{font:inherit;border:0;cursor:pointer}
        :focus-visible{outline:3px solid var(--orange);outline-offset:3px}
        .container{width:min(var(--max),calc(100% - 40px));margin:auto}
        .site-header{
            position:sticky;
            top:0;
            z-index:20;
            background:rgba(16,26,24,.94);
            backdrop-filter:blur(14px);
            border-bottom:1px solid var(--line);
        }
        .nav-wrap{
            min-height:76px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:28px;
        }
        .brand{display:flex;align-items:center;gap:12px;min-width:max-content}
        .brand-mark{
            width:38px;height:38px;border-radius:11px;
            background:var(--lime);color:var(--ink);
            display:grid;place-items:center;font-size:17px;font-weight:900;
            transform:rotate(-7deg);
        }
        .brand strong{font-size:17px;letter-spacing:-.4px}
        .brand small{display:block;color:var(--muted);font-size:11px;line-height:1.2;margin-top:2px}
        .nav-links{display:flex;align-items:center;gap:5px}
        .nav-links a{
            position:relative;
            padding:10px 13px;
            color:#c8d4cd;
            font-size:14px;
            border-radius:9px;
            transition:.25s;
        }
        .nav-links a:hover,.nav-links a:focus,.nav-links a.active{
            color:var(--lime);
            background:rgba(216,245,106,.08);
        }
        .nav-links a.active:after{
            content:"";
            position:absolute;
            left:13px;right:13px;bottom:3px;
            height:2px;background:var(--teal);border-radius:2px;
        }
        .nav-cta,.btn-primary{
            background:var(--teal);
            color:var(--ink);
            font-weight:800;
            border-radius:10px;
            padding:12px 17px;
            transition:.25s;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
        }
        .nav-cta:hover,.btn-primary:hover{
            background:var(--lime);
            transform:translateY(-2px);
            box-shadow:0 8px 24px rgba(73,215,165,.2);
        }
        .menu-toggle{
            display:none;
            background:transparent;
            color:var(--white);
            font-size:25px;
            padding:8px;
        }
        .page-hero{
            position:relative;
            overflow:hidden;
            padding:76px 0 72px;
            background:
                linear-gradient(135deg,rgba(16,26,24,.97),rgba(23,52,46,.96)),
                repeating-linear-gradient(90deg,transparent 0 76px,rgba(73,215,165,.06) 77px,transparent 78px);
        }
        .page-hero:before{
            content:"";
            position:absolute;
            width:540px;height:540px;
            right:-170px;top:-260px;
            border:1px solid rgba(73,215,165,.22);
            border-radius:50%;
            box-shadow:0 0 0 34px rgba(73,215,165,.04),0 0 0 72px rgba(73,215,165,.025);
        }
        .page-hero:after{
            content:"";
            position:absolute;
            left:0;right:0;bottom:0;height:1px;
            background:linear-gradient(90deg,transparent,var(--teal),transparent);
            opacity:.55;
        }
        .hero-content{position:relative;z-index:1;max-width:810px}
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:var(--lime);
            font-size:13px;
            font-weight:700;
            letter-spacing:1px;
            margin-bottom:16px;
        }
        .eyebrow:before{content:"";width:25px;height:2px;background:var(--lime)}
        .breadcrumb{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            align-items:center;
            color:#91a39a;
            font-size:13px;
            margin-bottom:28px;
        }
        .breadcrumb a:hover{color:var(--lime)}
        .breadcrumb .sep{color:#557066}
        h1,h2,h3,p{margin-top:0}
        h1{
            margin-bottom:20px;
            color:var(--white);
            font-size:clamp(36px,5vw,66px);
            line-height:1.12;
            letter-spacing:-2px;
            max-width:780px;
        }
        h2{
            font-size:clamp(27px,3.3vw,42px);
            line-height:1.2;
            letter-spacing:-1px;
            margin-bottom:13px;
        }
        h3{line-height:1.35;margin-bottom:8px}
        .hero-copy{
            color:#c0d0c8;
            font-size:17px;
            max-width:710px;
            margin-bottom:30px;
        }
        .hero-actions{display:flex;flex-wrap:wrap;gap:12px}
        .btn-secondary{
            border:1px solid rgba(216,245,106,.48);
            color:var(--lime);
            padding:11px 17px;
            border-radius:10px;
            font-weight:700;
            transition:.25s;
            display:inline-flex;
            align-items:center;
            justify-content:center;
        }
        .btn-secondary:hover{background:rgba(216,245,106,.1);border-color:var(--lime)}
        .hero-index{
            margin-top:38px;
            display:flex;
            flex-wrap:wrap;
            gap:10px;
        }
        .hero-index span{
            color:#b8c9bf;
            border:1px solid var(--line);
            background:rgba(10,22,18,.28);
            border-radius:9px;
            padding:7px 11px;
            font-size:12px;
        }
        .section{padding:82px 0}
        .section-light{background:var(--paper);color:var(--ink)}
        .section-dark{background:var(--ink-soft)}
        .section-head{
            display:flex;
            align-items:end;
            justify-content:space-between;
            gap:25px;
            margin-bottom:31px;
        }
        .section-kicker{
            color:var(--teal-deep);
            font-size:12px;
            font-weight:800;
            letter-spacing:1.5px;
            text-transform:uppercase;
            margin-bottom:8px;
        }
        .section-intro{color:#728078;max-width:570px;font-size:15px;margin-bottom:0}
        .light-title{color:var(--white)}
        .dark-intro{color:var(--muted)}
        .basketball-layout{
            display:grid;
            grid-template-columns:1.02fr .98fr;
            gap:26px;
            align-items:stretch;
        }
        .court-card{
            min-height:330px;
            position:relative;
            overflow:hidden;
            border-radius:var(--radius);
            background:#fff;
            border:1px solid #e0e8df;
            padding:31px;
        }
        .court-card:before,.court-card:after{
            content:"";
            position:absolute;
            border:1px solid rgba(26,157,120,.19);
            border-radius:50%;
            pointer-events:none;
        }
        .court-card:before{width:300px;height:300px;right:-125px;top:-75px}
        .court-card:after{width:130px;height:130px;right:-38px;top:9px}
        .court-card .mini-label{
            color:var(--teal-deep);
            font-size:12px;
            font-weight:800;
            letter-spacing:1px;
        }
        .court-card h3{
            max-width:420px;
            color:var(--ink);
            font-size:29px;
            margin:38px 0 12px;
        }
        .court-card p{max-width:420px;color:#718078}
        .court-lines{
            position:absolute;
            right:27px;bottom:28px;
            width:180px;height:72px;
            border:1px solid #b7d9c8;
            border-radius:50%;
            opacity:.8;
        }
        .court-lines:before{
            content:"";
            position:absolute;
            left:50%;top:-1px;bottom:-1px;
            border-left:1px solid #b7d9c8;
        }
        .info-panel{
            background:var(--panel);
            border:1px solid var(--line);
            border-radius:var(--radius);
            padding:27px;
        }
        .info-panel h3{font-size:21px;color:var(--white);margin-bottom:20px}
        .info-list{display:flex;flex-direction:column}
        .info-row{
            display:grid;
            grid-template-columns:78px 1fr auto;
            gap:14px;
            align-items:center;
            padding:15px 0;
            border-bottom:1px solid var(--line);
        }
        .info-row:last-child{border-bottom:0}
        .info-row time{font-size:12px;color:var(--orange);font-weight:800}
        .info-row strong{font-size:14px;color:#edf5ee}
        .info-row small{font-size:11px;color:var(--muted);display:block}
        .status{
            color:var(--teal);
            background:rgba(73,215,165,.1);
            border:1px solid rgba(73,215,165,.2);
            padding:3px 7px;
            border-radius:5px;
            font-size:11px;
            white-space:nowrap;
        }
        .feature-grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:15px;
        }
        .feature-card{
            background:#fff;
            border:1px solid #e0e8df;
            border-radius:var(--radius);
            padding:25px;
            min-height:206px;
            transition:.25s;
        }
        .feature-card:hover{
            transform:translateY(-5px);
            border-color:#afd9be;
            box-shadow:0 13px 30px rgba(22,48,39,.1);
        }
        .feature-icon{
            width:42px;height:42px;
            display:grid;place-items:center;
            border-radius:12px;
            color:var(--teal-deep);
            background:#e5f6ed;
            font-size:20px;
            margin-bottom:23px;
        }
        .feature-card h3{font-size:18px;color:var(--ink)}
        .feature-card p{font-size:13px;color:#77847d;margin-bottom:0}
        .spotlight{
            display:grid;
            grid-template-columns:.82fr 1.18fr;
            gap:30px;
            align-items:center;
        }
        .spotlight-copy{
            background:var(--lime);
            color:var(--ink);
            border-radius:var(--radius);
            padding:32px;
            min-height:290px;
        }
        .spotlight-copy .section-kicker{color:#416753}
        .spotlight-copy h2{font-size:31px}
        .spotlight-copy p{color:#40584c}
        .spotlight-copy .btn-primary{background:var(--ink);color:var(--lime)}
        .spotlight-copy .btn-primary:hover{background:var(--teal);color:var(--ink)}
        .topic-list{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:12px;
        }
        .topic-item{
            background:#fff;
            border:1px solid #e0e8df;
            border-radius:14px;
            padding:20px;
            transition:.25s;
        }
        .topic-item:hover{border-color:#9ed0b9;box-shadow:0 10px 24px rgba(22,48,39,.08)}
        .topic-item h3{font-size:16px;color:var(--ink)}
        .topic-item p{color:#78857e;font-size:13px;margin:0}
        .topic-tag{
            display:inline-block;
            color:var(--teal-deep);
            background:#e5f6ed;
            border-radius:5px;
            padding:4px 8px;
            font-size:11px;
            font-weight:800;
            margin-bottom:14px;
        }
        .steps-wrap{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:14px;
        }
        .step{
            position:relative;
            padding:26px 24px;
            border:1px solid var(--line);
            border-radius:var(--radius);
            background:rgba(255,255,255,.035);
        }
        .step-number{
            color:var(--lime);
            font-size:13px;
            font-weight:900;
            letter-spacing:1px;
        }
        .step h3{color:var(--white);font-size:18px;margin-top:22px}
        .step p{color:var(--muted);font-size:13px;margin-bottom:0}
        .faq-grid{
            display:grid;
            grid-template-columns:.72fr 1.28fr;
            gap:75px;
        }
        .faq-lead p{color:var(--muted);margin-top:16px}
        .faq-list{border-top:1px solid var(--line)}
        .faq-item{border-bottom:1px solid var(--line)}
        .faq-question{
            width:100%;
            background:transparent;
            color:var(--white);
            display:flex;
            align-items:center;
            justify-content:space-between;
            text-align:left;
            padding:19px 0;
            font-weight:700;
            font-size:15px;
        }
        .faq-question span:last-child{
            color:var(--teal);
            font-size:22px;
            transition:.25s;
        }
        .faq-item.open .faq-question span:last-child{transform:rotate(45deg)}
        .faq-answer{
            display:none;
            color:var(--muted);
            font-size:14px;
            padding:0 35px 19px 0;
        }
        .faq-item.open .faq-answer{display:block}
        .cta{
            padding:62px 0;
            background:var(--lime);
            color:var(--ink);
        }
        .cta-inner{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:30px;
        }
        .cta h2{font-size:34px;margin-bottom:8px}
        .cta p{color:#4d6255;margin-bottom:0;max-width:650px}
        .cta .btn-primary{background:var(--ink);color:var(--lime);white-space:nowrap}
        .cta .btn-primary:hover{background:var(--teal);color:var(--ink)}
        .site-footer{
            background:#0c1513;
            padding:58px 0 22px;
            color:var(--text);
        }
        .footer-grid{
            display:grid;
            grid-template-columns:1.35fr .8fr .9fr 1fr;
            gap:35px;
            padding-bottom:40px;
        }
        .footer-brand p{color:var(--muted);font-size:13px;max-width:280px;margin:18px 0 0}
        .site-footer h3{font-size:14px;color:var(--white);margin-bottom:15px}
        .footer-links{display:flex;flex-direction:column;gap:7px}
        .footer-links a{color:var(--muted);font-size:13px;transition:.2s}
        .footer-links a:hover{color:var(--lime);padding-left:3px}
        .responsibility{
            border-left:2px solid var(--orange);
            padding-left:13px;
            color:var(--muted);
            font-size:12px;
        }
        .copyright{
            border-top:1px solid var(--line);
            padding-top:19px;
            display:flex;
            justify-content:space-between;
            gap:20px;
            color:#718078;
            font-size:11px;
        }
        @media(max-width:1024px){
            .nav-links{gap:0}
            .nav-links a{padding-left:9px;padding-right:9px;font-size:13px}
            .nav-cta{padding:10px 12px;font-size:13px}
            .hero-content{max-width:740px}
            .footer-grid{grid-template-columns:1fr 1fr}
        }
        @media(max-width:768px){
            .container{width:min(var(--max),calc(100% - 30px))}
            .nav-wrap{min-height:68px}
            .menu-toggle{display:block}
            .nav-cta{display:none}
            .nav-links{
                display:none;
                position:absolute;
                left:15px;right:15px;top:68px;
                padding:10px;
                flex-direction:column;
                align-items:stretch;
                background:#14231f;
                border:1px solid var(--line);
                border-radius:14px;
                box-shadow:var(--shadow);
            }
            .nav-links.is-open{display:flex}
            .nav-links a{padding:13px 14px}
            .nav-links a.active:after{left:14px;right:auto;width:25px;bottom:7px}
            .page-hero{padding:56px 0 58px}
            h1{letter-spacing:-1px}
            .section{padding:62px 0}
            .section-head{display:block;margin-bottom:24px}
            .section-intro{margin-top:10px}
            .basketball-layout,.spotlight,.faq-grid{grid-template-columns:1fr;gap:18px}
            .court-card{min-height:285px}
            .feature-grid,.steps-wrap{grid-template-columns:1fr}
            .topic-list{grid-template-columns:1fr}
            .faq-grid{gap:35px}
            .cta-inner{display:block}
            .cta .btn-primary{margin-top:22px}
        }
        @media(max-width:520px){
            .brand strong{font-size:15px}
            .brand small{font-size:10px}
            .brand-mark{width:35px;height:35px}
            .hero-actions{display:grid;grid-template-columns:1fr}
            .hero-actions a{width:100%}
            .hero-index{gap:7px}
            .hero-index span{font-size:11px}
            .court-card,.info-panel,.spotlight-copy{padding:23px}
            .court-card h3{font-size:25px;margin-top:30px}
            .court-lines{right:18px;bottom:18px;opacity:.55}
            .info-row{grid-template-columns:62px 1fr;gap:10px}
            .info-row .status{grid-column:2;justify-self:start}
            .copyright{display:block}
            .copyright span{display:block;margin-top:7px}
            .cta h2{font-size:28px}
        }

/* roulang page: category4 */
:root{
            --ink:#101a18;
            --ink-soft:#172522;
            --panel:#1d302b;
            --panel-2:#243b35;
            --paper:#f3f5ee;
            --white:#fffdf7;
            --muted:#aab8b0;
            --text:#eef4ed;
            --teal:#49d7a5;
            --teal-deep:#1a9d78;
            --lime:#d8f56a;
            --orange:#f5ad55;
            --line:rgba(211,239,224,.14);
            --line-light:#dce7de;
            --radius:18px;
            --shadow:0 18px 55px rgba(7,18,15,.22);
            --max:1180px;
        }

        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei","Noto Sans TC",Arial,sans-serif;
            background:var(--ink);
            color:var(--text);
            line-height:1.7;
            overflow-x:hidden;
        }
        h1,h2,h3,h4,p{margin:0}
        h1,h2,h3,h4{line-height:1.25;letter-spacing:-.025em}
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%}
        button,input,select{font:inherit}
        button{border:0;cursor:pointer}
        .container{width:min(var(--max),calc(100% - 40px));margin:0 auto}

        .site-header{
            position:sticky;
            top:0;
            z-index:30;
            background:rgba(16,26,24,.93);
            backdrop-filter:blur(14px);
            border-bottom:1px solid var(--line);
        }
        .nav-wrap{
            min-height:76px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:24px;
        }
        .brand{display:flex;align-items:center;gap:12px;min-width:max-content}
        .brand-mark{
            width:38px;
            height:38px;
            border-radius:11px;
            background:var(--lime);
            color:var(--ink);
            display:grid;
            place-items:center;
            font-size:17px;
            font-weight:900;
            transform:rotate(-7deg);
        }
        .brand strong{font-size:17px;letter-spacing:-.4px}
        .brand small{
            display:block;
            color:var(--muted);
            font-size:11px;
            line-height:1.2;
            margin-top:2px;
        }
        .nav-links{display:flex;align-items:center;gap:5px}
        .nav-links a{
            position:relative;
            padding:10px 13px;
            color:#c8d4cd;
            font-size:14px;
            border-radius:9px;
            transition:.25s ease;
        }
        .nav-links a:hover,
        .nav-links a:focus,
        .nav-links a.active{
            color:var(--lime);
            background:rgba(216,245,106,.08);
        }
        .nav-links a.active:after{
            content:"";
            position:absolute;
            left:13px;
            right:13px;
            bottom:3px;
            height:2px;
            background:var(--teal);
            border-radius:2px;
        }
        .nav-cta,.btn-primary{
            background:var(--teal);
            color:var(--ink);
            font-weight:800;
            border-radius:10px;
            padding:12px 17px;
            transition:.25s ease;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
        }
        .nav-cta:hover,.btn-primary:hover{
            background:var(--lime);
            color:var(--ink);
            transform:translateY(-2px);
            box-shadow:0 8px 24px rgba(73,215,165,.2);
        }
        .btn-secondary{
            border:1px solid rgba(216,245,106,.48);
            color:var(--lime);
            padding:11px 17px;
            border-radius:10px;
            font-weight:700;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            transition:.25s ease;
        }
        .btn-secondary:hover{
            background:rgba(216,245,106,.1);
            border-color:var(--lime);
            color:var(--lime);
        }
        .menu-toggle{
            display:none;
            background:transparent;
            color:var(--white);
            font-size:25px;
            padding:8px;
            line-height:1;
        }
        .menu-toggle:focus-visible,
        a:focus-visible,
        button:focus-visible,
        select:focus-visible{
            outline:3px solid rgba(216,245,106,.72);
            outline-offset:3px;
        }

        .breadcrumb-bar{
            background:var(--ink-soft);
            border-bottom:1px solid var(--line);
        }
        .breadcrumb{
            display:flex;
            align-items:center;
            gap:10px;
            min-height:52px;
            margin:0;
            color:#91a49a;
            font-size:13px;
        }
        .breadcrumb a{color:var(--teal)}
        .breadcrumb .separator{color:#53675e}

        .page-hero{
            position:relative;
            overflow:hidden;
            padding:78px 0 84px;
            background:
                linear-gradient(135deg,#101a18 0%,#17342e 55%,#24433a 100%);
        }
        .page-hero:before{
            content:"";
            position:absolute;
            width:570px;
            height:570px;
            right:-180px;
            top:-250px;
            border:1px solid rgba(73,215,165,.2);
            border-radius:50%;
            box-shadow:0 0 0 35px rgba(73,215,165,.04),0 0 0 75px rgba(73,215,165,.025);
        }
        .page-hero:after{
            content:"";
            position:absolute;
            left:0;
            right:0;
            bottom:0;
            height:1px;
            background:linear-gradient(90deg,transparent,var(--teal),transparent);
            opacity:.55;
        }
        .hero-layout{
            position:relative;
            z-index:1;
            display:grid;
            grid-template-columns:1.1fr .9fr;
            gap:70px;
            align-items:center;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:var(--lime);
            font-size:13px;
            font-weight:800;
            letter-spacing:1px;
            margin-bottom:18px;
        }
        .eyebrow:before{
            content:"";
            width:25px;
            height:2px;
            background:var(--lime);
        }
        .page-hero h1{
            max-width:700px;
            color:var(--white);
            font-size:clamp(38px,5vw,64px);
        }
        .hero-copy{
            max-width:650px;
            color:#c0d0c8;
            font-size:17px;
            margin:24px 0 30px;
        }
        .hero-actions{display:flex;flex-wrap:wrap;gap:12px}
        .hero-note{
            display:flex;
            flex-wrap:wrap;
            gap:10px 18px;
            margin-top:25px;
            color:#90a59a;
            font-size:12px;
        }
        .hero-note span{display:inline-flex;align-items:center;gap:7px}
        .hero-note i{
            width:7px;
            height:7px;
            display:inline-block;
            background:var(--teal);
            border-radius:50%;
        }

        .device-showcase{
            position:relative;
            min-height:360px;
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .device-glow{
            position:absolute;
            width:270px;
            height:270px;
            border-radius:50%;
            background:rgba(73,215,165,.13);
            filter:blur(4px);
        }
        .phone{
            position:relative;
            z-index:2;
            width:205px;
            height:370px;
            padding:9px;
            border:5px solid #344d45;
            border-radius:31px;
            background:#0a1412;
            box-shadow:0 24px 50px rgba(0,0,0,.3);
            transform:rotate(4deg);
        }
        .phone-screen{
            height:100%;
            overflow:hidden;
            border-radius:20px;
            background:#eef4ed;
            color:var(--ink);
        }
        .phone-top{
            display:flex;
            justify-content:space-between;
            padding:15px 13px 10px;
            background:#18352d;
            color:var(--lime);
            font-size:10px;
            font-weight:800;
        }
        .phone-title{padding:16px 14px 12px;font-size:17px;font-weight:900}
        .phone-tabs{
            display:flex;
            gap:6px;
            overflow:hidden;
            padding:0 14px 14px;
        }
        .phone-tabs span{
            white-space:nowrap;
            padding:5px 8px;
            border-radius:6px;
            background:#d8f56a;
            font-size:9px;
            font-weight:800;
        }
        .phone-match{
            margin:0 12px 9px;
            padding:12px 10px;
            border:1px solid #d6e2d8;
            border-radius:10px;
            background:#fff;
        }
        .phone-match small{display:block;color:#7a8b82;font-size:8px}
        .phone-match strong{display:block;margin-top:4px;font-size:11px}
        .phone-match em{
            display:inline-block;
            margin-top:7px;
            padding:3px 6px;
            border-radius:4px;
            color:#a05d18;
            background:#fff0d9;
            font-size:8px;
            font-style:normal;
            font-weight:800;
        }
        .floating-card{
            position:absolute;
            z-index:3;
            right:7%;
            bottom:31px;
            width:190px;
            padding:17px;
            border:1px solid rgba(211,239,224,.18);
            border-radius:15px;
            background:rgba(23,37,34,.92);
            box-shadow:var(--shadow);
        }
        .floating-card small{display:block;color:var(--muted);font-size:11px}
        .floating-card strong{display:block;color:var(--white);font-size:17px;margin:4px 0}
        .status-line{display:flex;align-items:center;gap:7px;color:var(--teal);font-size:11px}
        .status-dot{width:7px;height:7px;background:var(--teal);border-radius:50%}

        .section{padding:88px 0}
        .section-light{background:var(--paper);color:var(--ink)}
        .section-dark{background:var(--ink-soft)}
        .section-head{
            display:flex;
            align-items:end;
            justify-content:space-between;
            gap:25px;
            margin-bottom:32px;
        }
        .section-kicker{
            color:var(--teal-deep);
            font-size:12px;
            font-weight:900;
            letter-spacing:1.5px;
            text-transform:uppercase;
            margin-bottom:10px;
        }
        .section-dark .section-kicker{color:var(--teal)}
        .section-head h2{font-size:clamp(27px,3vw,42px)}
        .section-intro{max-width:540px;color:#728078;font-size:15px}
        .section-dark .section-intro{color:var(--muted)}

        .feature-grid{
            display:grid;
            grid-template-columns:1.1fr .9fr .9fr;
            gap:14px;
        }
        .feature-card{
            min-height:220px;
            padding:26px;
            border:1px solid #dfe8df;
            border-radius:var(--radius);
            background:#fff;
            transition:.25s ease;
        }
        .feature-card:first-child{
            background:var(--ink);
            color:var(--white);
            border-color:var(--ink);
        }
        .feature-card:hover{
            transform:translateY(-5px);
            box-shadow:0 15px 30px rgba(22,48,39,.11);
        }
        .feature-icon{
            width:43px;
            height:43px;
            display:grid;
            place-items:center;
            border-radius:12px;
            background:#e4f7eb;
            color:var(--teal-deep);
            font-size:20px;
            font-weight:900;
            margin-bottom:28px;
        }
        .feature-card:first-child .feature-icon{background:rgba(216,245,106,.12);color:var(--lime)}
        .feature-card h3{font-size:20px}
        .feature-card p{color:#748178;font-size:14px;margin-top:10px}
        .feature-card:first-child p{color:#aab8b0}
        .feature-link{
            display:inline-flex;
            margin-top:21px;
            color:var(--teal-deep);
            font-size:13px;
            font-weight:800;
        }
        .feature-card:first-child .feature-link{color:var(--lime)}

        .download-panel{
            display:grid;
            grid-template-columns:.92fr 1.08fr;
            gap:65px;
            align-items:center;
        }
        .download-copy h2{font-size:clamp(28px,3vw,44px)}
        .download-copy > p{max-width:590px;color:var(--muted);margin:18px 0 26px}
        .platform-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:25px 0 28px}
        .platform{
            display:flex;
            align-items:center;
            gap:11px;
            padding:13px 14px;
            border:1px solid var(--line);
            border-radius:11px;
            color:#dbe9e0;
            background:rgba(255,255,255,.025);
        }
        .platform b{font-size:14px}
        .platform span{display:block;color:var(--muted);font-size:11px}
        .platform-mark{
            width:28px;
            height:28px;
            display:grid;
            place-items:center;
            border-radius:8px;
            background:var(--teal);
            color:var(--ink);
            font-size:12px;
            font-weight:900;
        }
        .download-card{
            position:relative;
            padding:32px;
            min-height:315px;
            overflow:hidden;
            border:1px solid rgba(211,239,224,.16);
            border-radius:22px;
            background:linear-gradient(145deg,#203c34,#142620);
        }
        .download-card:after{
            content:"";
            position:absolute;
            width:220px;
            height:220px;
            right:-70px;
            top:-80px;
            border:1px solid rgba(216,245,106,.25);
            border-radius:50%;
            box-shadow:0 0 0 25px rgba(216,245,106,.035),0 0 0 52px rgba(216,245,106,.025);
        }
        .download-card h3{position:relative;z-index:1;font-size:24px;color:var(--white)}
        .download-card p{position:relative;z-index:1;max-width:410px;color:#aec0b6;font-size:14px;margin:12px 0 24px}
        .download-points{position:relative;z-index:1;display:grid;gap:12px}
        .download-points li{
            display:flex;
            align-items:flex-start;
            gap:10px;
            color:#d9e7dd;
            font-size:14px;
            list-style:none;
        }
        .download-points ul{padding:0;margin:0}
        .check{
            flex:0 0 20px;
            width:20px;
            height:20px;
            display:grid;
            place-items:center;
            margin-top:3px;
            border-radius:50%;
            background:var(--teal);
            color:var(--ink);
            font-size:12px;
            font-weight:900;
        }

        .steps-section{background:#dce9df;color:var(--ink)}
        .steps-grid{
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:14px;
        }
        .step{
            position:relative;
            padding:25px 22px;
            min-height:190px;
            border-top:3px solid var(--teal-deep);
            border-radius:0 0 14px 14px;
            background:#fff;
        }
        .step-number{
            color:var(--teal-deep);
            font-size:13px;
            font-weight:900;
            letter-spacing:1px;
        }
        .step h3{font-size:18px;margin:26px 0 9px}
        .step p{color:#718078;font-size:13px}

        .use-layout{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:16px;
        }
        .use-panel{
            padding:29px;
            border:1px solid var(--line);
            border-radius:var(--radius);
            background:var(--panel);
        }
        .use-panel h3{font-size:22px;color:var(--white);margin-bottom:14px}
        .use-panel > p{color:var(--muted);font-size:14px}
        .use-list{padding:0;margin:22px 0 0;display:grid;gap:13px}
        .use-list li{
            display:flex;
            gap:12px;
            align-items:flex-start;
            padding-top:13px;
            border-top:1px solid var(--line);
            color:#d5e2da;
            font-size:14px;
            list-style:none;
        }
        .use-list li:before{
            content:"";
            flex:0 0 7px;
            width:7px;
            height:7px;
            margin-top:9px;
            border-radius:50%;
            background:var(--orange);
        }
        .access-box{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
            margin-top:18px;
            padding:17px;
            border:1px solid rgba(73,215,165,.25);
            border-radius:12px;
            background:rgba(73,215,165,.06);
        }
        .access-box strong{display:block;color:var(--white);font-size:15px}
        .access-box span{display:block;color:var(--muted);font-size:12px;margin-top:3px}

        .faq-layout{
            display:grid;
            grid-template-columns:.7fr 1.3fr;
            gap:75px;
        }
        .faq-lead p{color:var(--muted);font-size:15px;margin-top:17px}
        .faq-list{border-top:1px solid var(--line)}
        .faq-item{border-bottom:1px solid var(--line)}
        .faq-question{
            width:100%;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
            padding:20px 0;
            color:var(--white);
            background:transparent;
            text-align:left;
            font-weight:800;
        }
        .faq-question:hover{color:var(--lime)}
        .faq-plus{
            flex:0 0 25px;
            width:25px;
            height:25px;
            display:grid;
            place-items:center;
            border:1px solid rgba(73,215,165,.45);
            border-radius:50%;
            color:var(--teal);
            font-size:18px;
            line-height:1;
            transition:.25s ease;
        }
        .faq-item.open .faq-plus{transform:rotate(45deg);background:var(--teal);color:var(--ink)}
        .faq-answer{
            display:none;
            max-width:720px;
            padding:0 45px 20px 0;
            color:var(--muted);
            font-size:14px;
        }
        .faq-item.open .faq-answer{display:block}

        .responsibility-section{
            background:var(--paper);
            color:var(--ink);
            padding:32px 0;
        }
        .responsibility-bar{
            display:flex;
            align-items:center;
            gap:17px;
            padding:19px 23px;
            border-left:4px solid var(--orange);
            border-radius:10px;
            background:#fff;
        }
        .responsibility-bar strong{font-size:15px}
        .responsibility-bar p{color:#718078;font-size:13px;margin-top:3px}

        .site-footer{
            padding:56px 0 24px;
            background:#0c1513;
            color:var(--text);
        }
        .footer-grid{
            display:grid;
            grid-template-columns:1.25fr .8fr .8fr 1fr;
            gap:38px;
            padding-bottom:38px;
            border-bottom:1px solid var(--line);
        }
        .footer-brand .brand{margin-bottom:18px}
        .footer-brand p{
            max-width:290px;
            color:var(--muted);
            font-size:13px;
        }
        .site-footer h3{
            color:var(--white);
            font-size:14px;
            margin-bottom:17px;
        }
        .footer-links{display:grid;gap:9px}
        .footer-links a{
            color:#aab8b0;
            font-size:13px;
            transition:.2s ease;
        }
        .footer-links a:hover,
        .footer-links a:focus{color:var(--lime);padding-left:3px}
        .responsibility{
            padding:14px;
            border:1px solid rgba(245,173,85,.24);
            border-radius:10px;
            color:#aebdb3;
            font-size:12px;
            line-height:1.7;
            background:rgba(245,173,85,.045);
        }
        .copyright{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
            padding-top:21px;
            color:#74857b;
            font-size:11px;
        }

        @media (max-width:1024px){
            .nav-links a{padding-left:9px;padding-right:9px;font-size:13px}
            .nav-cta{padding:11px 13px;font-size:13px}
            .hero-layout{gap:40px}
            .feature-grid{grid-template-columns:1fr 1fr}
            .feature-card:first-child{grid-column:span 2}
            .steps-grid{grid-template-columns:1fr 1fr}
            .footer-grid{grid-template-columns:1.2fr 1fr 1fr}
            .footer-grid>div:last-child{grid-column:span 3}
        }

        @media (max-width:768px){
            .container{width:min(var(--max),calc(100% - 32px))}
            .nav-wrap{min-height:68px}
            .menu-toggle{display:block}
            .nav-cta{display:none}
            .nav-links{
                position:absolute;
                top:68px;
                left:16px;
                right:16px;
                display:none;
                flex-direction:column;
                align-items:stretch;
                gap:4px;
                padding:12px;
                border:1px solid var(--line);
                border-radius:14px;
                background:rgba(23,37,34,.98);
                box-shadow:var(--shadow);
            }
            .nav-links.is-open{display:flex}
            .nav-links a{padding:13px 14px}
            .nav-links a.active:after{left:14px;right:auto;width:24px;bottom:6px}
            .nav-links:after{
                content:"下載 bet365 APP";
                display:flex;
                align-items:center;
                justify-content:center;
                min-height:45px;
                margin-top:6px;
                border-radius:9px;
                background:var(--teal);
                color:var(--ink);
                font-size:14px;
                font-weight:800;
            }
            .page-hero{padding:62px 0 65px}
            .hero-layout,
            .download-panel,
            .faq-layout,
            .use-layout{grid-template-columns:1fr;gap:36px}
            .page-hero h1{font-size:42px}
            .hero-copy{font-size:15px}
            .device-showcase{min-height:330px}
            .floating-card{right:3%;bottom:18px}
            .section{padding:64px 0}
            .section-head{display:block;margin-bottom:25px}
            .section-intro{margin-top:12px}
            .feature-grid{grid-template-columns:1fr}
            .feature-card:first-child{grid-column:auto}
            .feature-card{min-height:190px}
            .download-panel{gap:24px}
            .download-card{min-height:280px}
            .faq-layout{gap:25px}
            .faq-answer{padding-right:5px}
            .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
            .footer-grid>div:last-child{grid-column:span 2}
            .copyright{display:block}
            .copyright span{display:block}
            .copyright span+span{margin-top:7px}
        }

        @media (max-width:520px){
            .brand strong{font-size:15px}
            .brand small{font-size:10px}
            .brand-mark{width:34px;height:34px}
            .breadcrumb{font-size:12px;white-space:nowrap;overflow:hidden}
            .page-hero h1{font-size:34px}
            .hero-actions{display:grid;grid-template-columns:1fr}
            .hero-actions a{width:100%}
            .hero-note{display:grid;gap:8px}
            .phone{width:190px;height:345px}
            .floating-card{right:0;width:164px;padding:13px}
            .floating-card strong{font-size:14px}
            .platform-list{grid-template-columns:1fr}
            .download-card{padding:25px 21px}
            .steps-grid{grid-template-columns:1fr}
            .step{min-height:auto}
            .use-panel{padding:23px 19px}
            .access-box{display:block}
            .access-box .btn-secondary{width:100%;margin-top:13px}
            .footer-grid{grid-template-columns:1fr}
            .footer-grid>div:last-child{grid-column:auto}
        }

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}