/* roulang page: index */
:root {
            --primary: #28658f;
            --primary-dark: #1d4f73;
            --primary-soft: #e8f2f8;
            --teal: #4b9a96;
            --orange: #c78347;
            --ink: #172a3a;
            --text: #3b5061;
            --muted: #718596;
            --line: #dce7ef;
            --surface: #ffffff;
            --background: #f5f8fc;
            --background-alt: #edf4f8;
            --radius: 16px;
            --radius-sm: 10px;
            --shadow: 0 12px 34px rgba(27, 71, 101, .09);
            --shadow-hover: 0 18px 42px rgba(27, 71, 101, .15);
            --container: 1200px;
            --section: 92px;
            --mobile-gap: 28px;
        }

        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--text);
            background: var(--background);
            font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
            font-size: 16px;
            line-height: 1.75;
        }
        a { color: inherit; text-decoration: none; transition: .2s ease; }
        a:hover { color: var(--primary); }
        img { display: block; max-width: 100%; object-fit: cover; }
        button, input, select, textarea { font: inherit; }
        button { cursor: pointer; }
        :focus-visible { outline: 3px solid rgba(199, 131, 71, .55); outline-offset: 3px; }
        .container { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; }
        .section { padding: var(--section) 0; }
        .section-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 36px; }
        .eyebrow {
            display: inline-flex; align-items: center; gap: 8px;
            color: var(--primary); font-size: 13px; font-weight: 700; letter-spacing: .12em;
            text-transform: uppercase;
        }
        .eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--orange); }
        h1, h2, h3, p { margin-top: 0; }
        h1, h2, h3 { color: var(--ink); line-height: 1.25; letter-spacing: -.03em; }
        h1 { font-size: clamp(38px, 5vw, 66px); margin-bottom: 22px; }
        h2 { font-size: clamp(28px, 3.2vw, 42px); margin-bottom: 14px; }
        h3 { font-size: 20px; margin-bottom: 8px; }
        .section-head p { max-width: 610px; margin: 0; color: var(--muted); }
        .top-notice {
            padding: 9px 20px; color: #526979; background: #eaf3f7;
            border-bottom: 1px solid var(--line); text-align: center; font-size: 13px;
        }

        .site-header {
            position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.96);
            border-bottom: 1px solid var(--line); backdrop-filter: blur(12px);
        }
        .nav-shell { min-height: 76px; display: flex; align-items: center; gap: 28px; }
        .brand { display: flex; align-items: center; gap: 11px; min-width: 235px; color: var(--ink); font-weight: 800; }
        .brand-mark {
            width: 34px; height: 34px; border-radius: 10px; background: var(--primary);
            position: relative; box-shadow: 5px 5px 0 var(--primary-soft);
        }
        .brand-mark::after { content: ""; position: absolute; left: 9px; top: 9px; width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; }
        .brand-name { font-size: 17px; letter-spacing: -.04em; }
        .main-nav { display: flex; align-items: center; gap: 5px; flex: 1; }
        .main-nav a { padding: 10px 13px; color: #536b7c; font-size: 14px; border-radius: 8px; }
        .main-nav a:hover, .main-nav a.active { color: var(--primary); background: var(--primary-soft); }
        .main-nav a.active { font-weight: 700; box-shadow: inset 0 -2px var(--primary); }
        .phase-nav { display: flex; gap: 6px; white-space: nowrap; }
        .chip, .badge {
            display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
            border: 1px solid var(--line); border-radius: 999px; color: var(--muted);
            background: #fff; font-size: 12px; line-height: 1.2;
        }
        .chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #aebdca; }
        .chip.active { color: var(--primary); border-color: #a9ccdf; background: var(--primary-soft); }
        .chip.active::before { background: var(--teal); box-shadow: 0 0 0 4px rgba(75,154,150,.12); }
        .header-action { padding: 10px 15px; border: 1px solid var(--line); border-radius: 9px; color: var(--primary); font-size: 13px; white-space: nowrap; }
        .header-action:hover { background: var(--primary); color: white; border-color: var(--primary); }
        .menu-toggle { display: none; border: 0; background: transparent; color: var(--ink); font-size: 24px; }

        .hero { padding: 62px 0 74px; background: linear-gradient(120deg, #f7fbfe 0%, #eef6fa 58%, #f9fbfd 100%); border-bottom: 1px solid var(--line); }
        .hero-wrap { position: relative; overflow: hidden; border: 1px solid #d8e8f1; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
        .hero-wrap::before { content: ""; position: absolute; inset: 0 0 auto auto; width: 42%; height: 100%; background: repeating-linear-gradient(90deg, transparent 0 44px, rgba(40,101,143,.045) 45px 46px); pointer-events: none; }
        .hero-content { position: relative; z-index: 1; padding: 66px 64px; }
        .hero-copy { max-width: 650px; }
        .hero-copy p { max-width: 610px; color: #5b7180; font-size: 18px; margin-bottom: 30px; }
        .hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
        .button-main, .button-ghost {
            display: inline-flex; justify-content: center; align-items: center; min-height: 46px;
            padding: 0 20px; border-radius: 9px; font-weight: 700; font-size: 14px; border: 1px solid transparent;
        }
        .button-main { color: #fff; background: var(--primary); box-shadow: 0 7px 16px rgba(40,101,143,.2); }
        .button-main:hover { color: #fff; background: var(--primary-dark); transform: translateY(-2px); }
        .button-ghost { color: var(--primary); border-color: #b9d4e3; background: #fff; }
        .button-ghost:hover { background: var(--primary-soft); border-color: var(--primary); }
        .hero-meta { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 30px; color: var(--muted); font-size: 13px; }
        .hero-meta strong { display: block; color: var(--ink); font-size: 18px; }
        .hero-panel {
            position: absolute; right: 46px; top: 42px; width: 300px; padding: 24px;
            border: 1px solid #d9e8f0; border-radius: 16px; background: rgba(255,255,255,.9);
            box-shadow: 0 14px 32px rgba(45,87,110,.11);
        }
        .panel-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
        .panel-label { color: var(--muted); font-size: 12px; }
        .panel-number { color: var(--ink); font-size: 28px; font-weight: 800; }
        .progress { height: 7px; margin: 14px 0 20px; overflow: hidden; border-radius: 99px; background: #e7eff4; }
        .progress span { display: block; width: 68%; height: 100%; background: var(--primary); border-radius: inherit; }
        .panel-row { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid #edf2f5; font-size: 13px; }
        .panel-row:last-child { border-bottom: 0; }
        .panel-row b { color: var(--ink); }

        .service-layout { display: grid; grid-template-columns: 220px 1fr; gap: 24px; }
        .service-menu { padding: 8px 0; }
        .service-menu a { display: flex; justify-content: space-between; padding: 14px 16px; border-left: 2px solid transparent; color: var(--muted); }
        .service-menu a:hover, .service-menu a.active { color: var(--primary); border-left-color: var(--primary); background: #edf5f9; }
        .service-menu small { font-size: 12px; }
        .feature-card, .mini-feature, .quote-card, .info-card, .contact-card, .faq-card, .path-card, .topic-card {
            border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
            transition: .25s ease;
        }
        .feature-card:hover, .mini-feature:hover, .topic-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
        .feature-card { padding: 30px; min-height: 270px; position: relative; overflow: hidden; }
        .feature-card::after { content: "01"; position: absolute; right: 24px; bottom: -16px; color: #edf4f8; font-size: 100px; font-weight: 900; }
        .feature-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 23px; color: var(--primary); background: var(--primary-soft); border-radius: 12px; font-weight: 800; }
        .feature-card p { max-width: 620px; color: var(--muted); }
        .mini-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
        .mini-feature { display: flex; gap: 15px; align-items: center; padding: 18px 20px; }
        .mini-feature .feature-icon { width: 34px; height: 34px; margin: 0; font-size: 13px; border-radius: 9px; }
        .mini-feature p { margin: 0; color: var(--muted); font-size: 13px; }

        .metric-band { padding: 26px 0; background: var(--primary); color: #eaf5fa; }
        .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .metric { padding: 5px 20px; border-left: 1px solid rgba(255,255,255,.24); }
        .metric:first-child { border-left: 0; }
        .metric strong { display: block; color: #fff; font-size: 27px; line-height: 1.2; }
        .metric span { color: #c7dce8; font-size: 13px; }

        .topic-layout { display: grid; grid-template-columns: 1.35fr .75fr; gap: 22px; }
        .topic-card { overflow: hidden; }
        .topic-cover { min-height: 260px; padding: 25px; display: flex; align-items: end; background: linear-gradient(135deg, #dceef5, #8eb9ca 60%, #497b9b); }
        .topic-cover.alt { min-height: 128px; background: linear-gradient(135deg, #e8eff5, #b5c9d8); }
        .topic-cover.warm { min-height: 128px; background: linear-gradient(135deg, #f2eee8, #d6b991); }
        .cover-mark { padding: 7px 11px; border-radius: 7px; color: #fff; background: rgba(23,42,58,.63); font-size: 12px; }
        .topic-body { padding: 23px 25px; }
        .topic-body p { color: var(--muted); font-size: 14px; }
        .topic-body .button-ghost { min-height: 38px; padding: 0 14px; }
        .topic-side { display: grid; gap: 16px; }
        .topic-side .topic-body { padding: 17px 20px; }
        .topic-side h3 { font-size: 17px; }

        .paths { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
        .paths::before { content: ""; position: absolute; top: 21px; left: 8%; right: 8%; height: 1px; background: #c4dae5; }
        .path-card { position: relative; padding: 54px 20px 21px; margin: 0 7px; box-shadow: none; }
        .path-dot { position: absolute; top: 12px; left: 20px; width: 19px; height: 19px; border: 5px solid var(--background); border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 1px #9fc7d8; }
        .path-card p { margin: 0; color: var(--muted); font-size: 13px; }

        .faq-contact { display: grid; grid-template-columns: 1.35fr .65fr; gap: 25px; align-items: start; }
        .accordion { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
        .accordion-item { border-bottom: 1px solid var(--line); }
        .accordion-item:last-child { border-bottom: 0; }
        .accordion-title { padding: 19px 22px; color: var(--ink); font-weight: 700; font-size: 15px; }
        .accordion-title:hover { color: var(--primary); background: #f8fbfd; }
        .accordion-content { padding: 0 22px 20px; color: var(--muted); font-size: 14px; }
        .faq-card { padding: 28px; background: var(--primary-soft); box-shadow: none; }
        .faq-card p { color: #587184; font-size: 14px; }

        .contact-section { background: var(--background-alt); }
        .contact-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 25px; }
        .contact-card { padding: 30px; }
        .contact-card p { color: var(--muted); }
        .contact-list { margin: 24px 0 0; padding: 0; list-style: none; }
        .contact-list li { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
        .contact-list strong { display: block; color: var(--ink); }
        label { display: block; margin-bottom: 6px; color: var(--ink); font-size: 13px; font-weight: 700; }
        input, select, textarea { width: 100%; border: 1px solid #cddde7; border-radius: 8px; padding: 11px 13px; color: var(--ink); background: #fbfdfe; transition: .2s; }
        input::placeholder, textarea::placeholder { color: #9aaab5; }
        input:focus, select:focus, textarea:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgba(40,101,143,.1); outline: 0; }
        textarea { min-height: 112px; resize: vertical; }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 17px; }
        .check { display: flex; align-items: center; gap: 8px; margin: 16px 0 20px; color: var(--muted); font-size: 13px; }
        .check input { width: auto; }
        .floating-bar { position: fixed; right: 22px; bottom: 20px; z-index: 15; display: flex; align-items: center; gap: 14px; padding: 11px 13px 11px 18px; border: 1px solid #c9dce6; border-radius: 12px; background: rgba(255,255,255,.96); box-shadow: var(--shadow); font-size: 13px; }
        .floating-bar .button-main { min-height: 37px; padding: 0 14px; font-size: 12px; }
        footer { padding: 54px 0 24px; background: #eaf1f5; border-top: 1px solid var(--line); }
        .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 35px; padding-bottom: 35px; }
        footer h3 { margin-bottom: 13px; font-size: 15px; }
        footer p, footer a { color: #718593; font-size: 13px; }
        footer a { display: block; margin: 7px 0; }
        footer a:hover { color: var(--primary); }
        .copyright { padding-top: 18px; border-top: 1px solid #d5e2e9; color: #81929d; font-size: 12px; }

        @media (max-width: 1024px) {
            .hero-panel { position: relative; right: auto; top: auto; width: min(100%, 360px); margin: 0 42px 38px auto; }
            .hero-content { padding: 48px 42px 0; }
            .paths { grid-template-columns: repeat(2, 1fr); gap: 15px; }
            .paths::before { display: none; }
        }
        @media (max-width: 768px) {
            :root { --section: 64px; }
            .container { width: min(100% - 32px, var(--container)); }
            .nav-shell { min-height: 64px; justify-content: space-between; }
            .brand { min-width: 0; max-width: 230px; }
            .brand-name { font-size: 14px; line-height: 1.25; }
            .menu-toggle { display: block; }
            .main-nav { display: none; position: absolute; top: 65px; left: 16px; right: 16px; padding: 10px; flex-direction: column; align-items: stretch; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
            .main-nav.is-open { display: flex; }
            .phase-nav { display: none; }
            .header-action { padding: 7px 10px; font-size: 12px; }
            .hero { padding: 28px 0 46px; }
            .hero-content { padding: 38px 25px 0; }
            .hero-panel { margin: 0 25px 25px auto; }
            .hero-copy p { font-size: 16px; }
            .service-layout, .topic-layout, .faq-contact, .contact-grid { grid-template-columns: 1fr; }
            .service-menu { display: flex; overflow-x: auto; padding-bottom: 5px; }
            .service-menu a { min-width: 145px; border-left: 0; border-bottom: 2px solid transparent; }
            .service-menu a:hover, .service-menu a.active { border-bottom-color: var(--primary); }
            .metrics { grid-template-columns: repeat(2, 1fr); }
            .metric:nth-child(3) { border-left: 0; }
            .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 25px; }
        }
        @media (max-width: 640px) {
            .section-head { display: block; margin-bottom: 25px; }
            .section-head p { margin-top: 12px; }
            .mini-row, .form-row, .paths { grid-template-columns: 1fr; }
            .topic-cover { min-height: 200px; }
            .path-card { margin: 0; }
            .floating-bar { left: 12px; right: 12px; justify-content: space-between; bottom: 12px; }
        }
        @media (max-width: 480px) {
            h1 { font-size: 35px; }
            .hero-content { padding: 30px 18px 0; }
            .hero-panel { margin: 0 18px 20px; width: auto; }
            .hero-buttons .button-main, .hero-buttons .button-ghost { width: 100%; }
            .metrics { gap: 8px; }
            .metric { padding: 8px 10px; }
            .metric strong { font-size: 22px; }
            .footer-grid { grid-template-columns: 1fr; }
            .floating-bar span { max-width: 190px; line-height: 1.35; }
        }

/* roulang page: category1 */
:root{--primary:#28658f;--primary-dark:#1d4f73;--primary-soft:#e8f2f8;--teal:#4b9a96;--orange:#c78347;--ink:#172a3a;--text:#3b5061;--muted:#718596;--line:#dce7ef;--surface:#fff;--background:#f5f8fc;--background-alt:#edf4f8;--radius:16px;--radius-sm:10px;--shadow:0 12px 34px rgba(27,71,101,.09);--shadow-hover:0 18px 42px rgba(27,71,101,.15);--container:1200px;--section:72px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--background);color:var(--text);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;font-size:16px;line-height:1.75}a{color:inherit;text-decoration:none;transition:.2s ease}a:hover{color:var(--primary)}button,input,select{font:inherit}button{cursor:pointer}.container{width:min(var(--container),calc(100% - 48px));margin:auto}.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.nav-shell{min-height:76px;display:flex;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:11px;min-width:235px;color:var(--ink);font-weight:800}.brand-mark{width:34px;height:34px;border-radius:10px;background:var(--primary);position:relative;box-shadow:5px 5px 0 var(--primary-soft)}.brand-mark:after{content:"";position:absolute;left:9px;top:9px;width:16px;height:16px;border:2px solid #fff;border-radius:50%}.brand-name{font-size:17px;letter-spacing:-.04em}.main-nav{display:flex;align-items:center;gap:5px;flex:1}.main-nav a{padding:10px 13px;color:#536b7c;font-size:14px;border-radius:8px}.main-nav a:hover,.main-nav a.active{color:var(--primary);background:var(--primary-soft)}.main-nav a.active{font-weight:700;box-shadow:inset 0 -2px var(--primary)}.phase-nav{display:flex;gap:6px;white-space:nowrap}.chip,.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:#fff;font-size:12px;line-height:1.2}.chip:before{content:"";width:6px;height:6px;border-radius:50%;background:#aebdca}.chip.active{color:var(--primary;border-color:#a9ccdf;background:var(--primary-soft)}.chip.active:before{background:var(--teal);box-shadow:0 0 0 4px rgba(75,154,150,.12)}.header-action{padding:10px 14px;border:1px solid var(--line);border-radius:9px;color:var(--primary);font-size:13px;white-space:nowrap}.header-action:hover{color:#fff;background:var(--primary);border-color:var(--primary)}.menu-toggle{display:none;border:0;background:transparent;color:var(--ink);font-size:24px}.notice{background:#eef6fa;border-bottom:1px solid #dcebf2;color:#5d7484;font-size:13px}.notice .container{padding:8px 0}.page-hero{padding:43px 0 36px;background:linear-gradient(135deg,#f8fcfe,#eaf4f9);border-bottom:1px solid var(--line)}.crumbs{display:flex;gap:9px;align-items:center;margin-bottom:17px;color:var(--muted);font-size:13px}.crumbs span{color:#a1b1bc}.hero-line{display:flex;align-items:flex-start;justify-content:space-between;gap:28px}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--primary);font-size:13px;font-weight:700;letter-spacing:.1em}.eyebrow:before{content:"";width:24px;height:2px;background:var(--orange)}h1,h2,h3,p{margin-top:0}h1{margin:9px 0 12px;color:var(--ink);font-size:clamp(30px,4vw,46px);line-height:1.22;letter-spacing:-.045em}h2{color:var(--ink);font-size:28px;line-height:1.35;letter-spacing:-.03em}.hero-copy{max-width:760px}.hero-copy p{margin-bottom:0;color:#5d7484;font-size:17px}.phase-strip{display:flex;align-items:center;gap:9px;padding:14px 16px;min-width:310px;background:#fff;border:1px solid #d8e8f1;border-radius:var(--radius-sm);box-shadow:var(--shadow)}.phase-strip small{display:block;color:var(--muted);font-size:12px}.phase-strip b{display:block;color:var(--ink);font-size:14px}.section{padding:var(--section) 0}.content-grid{display:grid;grid-template-columns:270px minmax(0,1fr);gap:30px;align-items:start}.filter-card,.feature-card,.item-card,.support-card,.cta-band{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.filter-card{position:sticky;top:98px;padding:22px}.filter-card h2{margin-bottom:16px;font-size:19px}.filter-group{padding:17px 0;border-top:1px solid #e9f0f4}.filter-group:first-of-type{border-top:0;padding-top:0}.filter-group h3{margin:0 0 10px;color:var(--ink);font-size:14px}.filter-link{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;margin:2px -10px;border-radius:8px;color:var(--muted);font-size:14px}.filter-link:hover,.filter-link.active{background:var(--primary-soft);color:var(--primary)}.filter-link.active{font-weight:700}.filter-link em{font-style:normal;font-size:12px;color:#93a4b0}.reset{width:100%;padding:10px;border:1px solid #bcd4e2;border-radius:9px;background:#fff;color:var(--primary);font-size:13px;font-weight:700}.reset:hover{background:var(--primary-soft)}.list-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:20px}.list-head h2{margin-bottom:0}.list-head p{margin:5px 0 0;color:var(--muted);font-size:14px}.search-box{display:flex;width:min(340px,100%);border:1px solid #c9dce7;border-radius:10px;overflow:hidden;background:#fff}.search-box input{min-width:0;flex:1;border:0;padding:11px 13px;outline:0;color:var(--ink)}.search-box input:focus{box-shadow:inset 0 0 0 2px #84b4cf}.search-box button{border:0;padding:0 14px;background:var(--primary);color:#fff;font-size:13px;font-weight:700}.feature-card{display:grid;grid-template-columns:180px 1fr;overflow:hidden;margin-bottom:20px}.cover{min-height:180px;background:linear-gradient(145deg,#d4e8f3,#78a8c3);position:relative}.cover:after{content:"主题";position:absolute;right:16px;bottom:14px;color:rgba(255,255,255,.8);font-size:13px;letter-spacing:.18em}.feature-body{padding:25px}.meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.badge{color:var(--primary);background:var(--primary-soft);border-color:#c9dfeb}.badge.muted{color:var(--muted);background:#fff}.feature-body h3,.item-body h3{margin:0 0 8px;color:var(--ink);font-size:22px;line-height:1.4}.feature-body p,.item-body p{margin-bottom:16px;color:var(--muted);font-size:14px}.button-main,.button-ghost{display:inline-flex;justify-content:center;align-items:center;min-height:43px;padding:0 16px;border:1px solid transparent;border-radius:9px;font-size:14px;font-weight:700}.button-main{background:var(--primary);color:#fff;box-shadow:0 7px 16px rgba(40,101,143,.18)}.button-main:hover{color:#fff;background:var(--primary-dark);transform:translateY(-2px)}.button-ghost{border-color:#bdd5e3;background:#fff;color:var(--primary)}.button-ghost:hover{background:var(--primary-soft);border-color:var(--primary)}.content-list{display:grid;gap:14px}.item-card{display:grid;grid-template-columns:126px 1fr auto;gap:19px;align-items:center;padding:14px;transition:.2s ease}.item-card:hover{transform:translateY(-3px);border-color:#b9d7e7;box-shadow:var(--shadow-hover)}.thumb{height:100px;border-radius:11px;background:linear-gradient(135deg,#e3eff5,#aac8da);position:relative;overflow:hidden}.thumb:before{content:"";position:absolute;width:70px;height:70px;right:-18px;top:-20px;border:15px solid rgba(40,101,143,.18);border-radius:50%}.item-body h3{font-size:17px}.item-body p{margin:0}.item-card .button-ghost{white-space:nowrap}.pagination{display:flex;justify-content:center;align-items:center;gap:7px;padding-top:30px}.page-num{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--muted);font-size:14px}.page-num:hover,.page-num.active{background:var(--primary);border-color:var(--primary);color:#fff}.below{padding-top:0}.support-card{display:grid;grid-template-columns:1.15fr .85fr;overflow:hidden}.support-copy{padding:30px}.support-copy h2{margin-bottom:10px}.support-copy p{color:var(--muted)}.support-side{padding:28px;background:var(--primary-soft);border-left:1px solid #d6e8f1}.support-side h3{color:var(--ink);font-size:16px}.support-side ul{padding-left:18px;margin:0;color:#567080;font-size:14px}.cta-band{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 32px;background:#f4f9fc}.cta-band h2{margin:0 0 5px;font-size:23px}.cta-band p{margin:0;color:var(--muted);font-size:14px}footer{margin-top:72px;padding:58px 0 22px;background:#eaf2f7;border-top:1px solid #d7e4eb}footer .brand{margin-bottom:0}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px}.footer-grid p{color:#647b8b;font-size:14px}.footer-grid h3{margin:0 0 13px;color:var(--ink);font-size:14px}.footer-grid>div:not(:first-child) a{display:block;margin:8px 0;color:#667d8d;font-size:14px}.footer-grid a:hover{color:var(--primary)}.copyright{margin-top:38px;padding-top:18px;border-top:1px solid #d2e0e8;color:#77909f;font-size:12px}.is-focusable:focus,button:focus,input:focus,a:focus{outline:3px solid rgba(40,101,143,.28);outline-offset:3px}@media(max-width:1024px){.nav-shell{gap:14px}.brand{min-width:205px}.phase-nav{display:none}.content-grid{grid-template-columns:230px 1fr}}@media(max-width:768px){.container{width:min(100% - 32px,var(--container))}.nav-shell{min-height:68px;flex-wrap:wrap;padding:10px 0}.brand{flex:1;min-width:0}.menu-toggle{display:block}.main-nav{display:none;order:4;width:100%;padding:8px 0;border-top:1px solid var(--line)}.main-nav.open{display:flex;flex-direction:column;align-items:stretch}.main-nav a{padding:10px}.header-action{display:none}.hero-line{display:block}.phase-strip{margin-top:22px;min-width:0}.content-grid{grid-template-columns:1fr}.filter-card{position:static}.filter-card[hidden]{display:none}.filter-toggle{display:inline-flex}.list-head{align-items:stretch;flex-direction:column}.search-box{width:100%}.support-card{grid-template-columns:1fr}.support-side{border-left:0;border-top:1px solid #d6e8f1}.footer-grid{grid-template-columns:1fr 1fr}.section{padding:54px 0}}@media(min-width:769px){.filter-toggle{display:none}}@media(max-width:640px){h1{font-size:31px}.feature-card{grid-template-columns:1fr}.cover{min-height:130px}.item-card{grid-template-columns:88px 1fr}.thumb{height:82px}.item-card .button-ghost{grid-column:2;justify-self:start}.cta-band{display:block;padding:24px}.cta-band .button-main{margin-top:16px}.footer-grid{grid-template-columns:1fr}.notice .container{font-size:12px}}@media(max-width:480px){.brand-name{font-size:15px}.page-hero{padding:30px 0}.feature-body,.support-copy,.support-side{padding:21px}.item-card{gap:12px;padding:11px}.item-body h3{font-size:16px}.item-body p{font-size:13px}.pagination{gap:4px}.page-num{width:34px;height:34px}}

/* roulang page: category2 */
:root{--primary:#28658f;--primary-dark:#1d4f73;--primary-soft:#e8f2f8;--teal:#4b9a96;--orange:#c78347;--ink:#172a3a;--text:#3b5061;--muted:#718596;--line:#dce7ef;--surface:#fff;--background:#f5f8fc;--background-alt:#edf4f8;--radius:16px;--radius-sm:10px;--shadow:0 12px 34px rgba(27,71,101,.09);--shadow-hover:0 18px 42px rgba(27,71,101,.15);--container:1200px;--section:92px;--mobile-gap:28px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--background);color:var(--text);font:16px/1.75 "PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif}a{color:inherit;text-decoration:none;transition:.2s ease}a:hover{color:var(--primary)}button,input,select,textarea{font:inherit}button{cursor:pointer}.container{width:min(var(--container),calc(100% - 48px));margin:auto}.section{padding:var(--section) 0}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:34px}.section-head h2{margin:8px 0 0;color:var(--ink);font-size:30px;line-height:1.3}.section-head p{max-width:570px;margin:0;color:var(--muted)}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--primary);font-size:13px;font-weight:800;letter-spacing:.1em}.eyebrow:before{width:24px;height:2px;background:var(--orange);content:""}.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.nav-shell{min-height:76px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;gap:11px;min-width:235px;color:var(--ink);font-weight:800}.brand-mark{position:relative;width:34px;height:34px;border-radius:10px;background:var(--primary);box-shadow:5px 5px 0 var(--primary-soft)}.brand-mark:after{position:absolute;top:9px;left:9px;width:16px;height:16px;border:2px solid #fff;border-radius:50%;content:""}.brand-name{font-size:17px;letter-spacing:-.04em}.main-nav{display:flex;flex:1;align-items:center;gap:5px}.main-nav a{padding:10px 13px;border-radius:8px;color:#536b7c;font-size:14px}.main-nav a:hover,.main-nav a.active{background:var(--primary-soft);color:var(--primary)}.main-nav a.active{box-shadow:inset 0 -2px var(--primary);font-weight:700}.phase-nav{display:flex;gap:6px;white-space:nowrap}.chip,.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);font-size:12px;line-height:1.2}.chip:before{width:6px;height:6px;border-radius:50%;background:#aebdca;content:""}.chip.active{border-color:#a9ccdf;background:var(--primary-soft);color:var(--primary)}.chip.active:before{background:var(--teal);box-shadow:0 0 0 4px rgba(75,154,150,.12)}.header-action{padding:10px 15px;border:1px solid var(--line);border-radius:9px;color:var(--primary);font-size:13px;white-space:nowrap}.header-action:hover{border-color:var(--primary);background:var(--primary);color:#fff}.menu-toggle{display:none;border:0;background:transparent;color:var(--ink);font-size:24px}.page-head{padding:32px 0 45px;background:linear-gradient(120deg,#f8fbfe,#eaf4f9);border-bottom:1px solid var(--line)}.crumbs{display:flex;align-items:center;gap:9px;margin-bottom:18px;color:var(--muted);font-size:13px}.crumbs span{color:#9baab5}.head-grid{display:grid;grid-template-columns:minmax(0,1fr) 315px;gap:38px;align-items:end}.head-grid h1{max-width:760px;margin:12px 0 14px;color:var(--ink);font-size:43px;line-height:1.2;letter-spacing:-.04em}.head-grid p{max-width:700px;margin:0;color:#5c7181;font-size:17px}.head-info{padding:19px 21px;border:1px solid #d6e6ef;border-radius:var(--radius);background:rgba(255,255,255,.85);box-shadow:var(--shadow)}.info-line{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #ebf1f5;color:var(--muted);font-size:13px}.info-line:last-child{border-bottom:0}.info-line strong{color:var(--ink)}.feature{padding:54px 0 28px}.feature-banner{position:relative;overflow:hidden;display:grid;grid-template-columns:1.06fr .94fr;min-height:330px;border:1px solid #d7e7f0;border-radius:22px;background:#fff;box-shadow:var(--shadow)}.feature-copy{z-index:1;padding:48px 52px}.feature-copy h2{max-width:500px;margin:14px 0;color:var(--ink);font-size:31px;line-height:1.3}.feature-copy p{max-width:510px;margin:0 0 25px;color:var(--muted)}.button-main,.button-ghost{display:inline-flex;min-height:46px;align-items:center;justify-content:center;padding:0 20px;border:1px solid transparent;border-radius:9px;font-size:14px;font-weight:700}.button-main{background:var(--primary);box-shadow:0 7px 16px rgba(40,101,143,.2);color:#fff}.button-main:hover{transform:translateY(-2px);background:var(--primary-dark);color:#fff}.button-ghost{border-color:#b9d4e3;background:#fff;color:var(--primary)}.button-ghost:hover{border-color:var(--primary);background:var(--primary-soft)}.feature-visual{position:relative;min-height:300px;background:linear-gradient(135deg,#eaf5fa,#d7eaf3)}.feature-visual:before{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 42px,rgba(40,101,143,.08) 43px 44px),repeating-linear-gradient(0deg,transparent 0 42px,rgba(40,101,143,.06) 43px 44px);content:""}.orbit{position:absolute;top:58px;left:18%;width:220px;height:220px;border:1px solid rgba(40,101,143,.28);border-radius:50%}.orbit:before,.orbit:after{position:absolute;border-radius:50%;background:var(--primary);content:""}.orbit:before{top:34px;right:-7px;width:14px;height:14px;box-shadow:0 0 0 7px rgba(40,101,143,.12)}.orbit:after{bottom:15px;left:16px;width:9px;height:9px;background:var(--orange)}.visual-card{position:absolute;right:32px;bottom:30px;width:214px;padding:18px;border:1px solid #d4e4ed;border-radius:14px;background:rgba(255,255,255,.92);box-shadow:var(--shadow)}.visual-card b{display:block;margin-bottom:8px;color:var(--ink);font-size:15px}.meter{height:7px;margin-top:14px;overflow:hidden;border-radius:20px;background:#dceaf1}.meter i{display:block;width:68%;height:100%;border-radius:20px;background:var(--primary)}.timeline-wrap{padding:40px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}.timeline{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.timeline:before{position:absolute;top:31px;right:14%;left:14%;height:2px;background:#d8e5ed;content:""}.time-item{position:relative;z-index:1}.time-dot{display:flex;width:64px;height:64px;align-items:center;justify-content:center;margin-bottom:17px;border:8px solid #f3f8fb;border-radius:50%;background:#c5d4de;color:#fff;font-size:13px;font-weight:800}.time-item.current .time-dot{background:var(--primary);box-shadow:0 0 0 1px #a5c9db}.time-item h3{margin:0 0 6px;color:var(--ink);font-size:19px}.time-item p{max-width:280px;margin:0 0 9px;color:var(--muted);font-size:14px}.time-item a{color:var(--primary);font-size:14px;font-weight:700}.matrix{display:grid;grid-template-columns:1.35fr .85fr;gap:22px}.index-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);transition:.25s ease}.index-card:hover{transform:translateY(-3px);border-color:#b7d3e2;box-shadow:var(--shadow-hover)}.index-card.large{min-height:340px;padding:38px;background:linear-gradient(135deg,#fff 30%,#edf6fa)}.index-card.large:after{position:absolute;right:-55px;bottom:-85px;width:250px;height:250px;border:38px solid rgba(40,101,143,.08);border-radius:50%;content:""}.index-card h3{position:relative;z-index:1;margin:16px 0 12px;color:var(--ink);font-size:27px;line-height:1.35}.index-card p{position:relative;z-index:1;max-width:550px;margin:0 0 22px;color:var(--muted)}.card-meta{display:flex;position:relative;z-index:1;flex-wrap:wrap;gap:8px}.badge.blue{border-color:#b7d6e5;background:var(--primary-soft);color:var(--primary)}.badge.orange{border-color:#edcfb0;background:#fff6ed;color:#a4642c}.small-stack{display:grid;gap:22px}.index-card.small{min-height:159px;padding:25px}.index-card.small h3{margin:10px 0 7px;font-size:19px}.index-card.small p{margin-bottom:9px;font-size:14px}.tip-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:start}.notice-card{padding:34px;border:1px solid #cfe1eb;border-radius:var(--radius);background:#eaf4f8}.notice-card h2{margin:13px 0;color:var(--ink);font-size:27px;line-height:1.35}.notice-card p{margin:0 0 20px;color:#5e7484}.notice-list{margin:0;padding:0;list-style:none}.notice-list li{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid rgba(40,101,143,.13);font-size:14px}.notice-list li:before{flex:0 0 auto;width:19px;height:19px;border-radius:50%;background:var(--primary);color:#fff;content:"✓";font-size:12px;line-height:19px;text-align:center}.accordion{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow)}.accordion-item{border-bottom:1px solid var(--line)}.accordion-item:last-child{border:0}.accordion-title{padding:19px 48px 19px 21px;border:0;background:#fff;color:var(--ink);font-weight:700}.accordion-title:hover,.accordion-title:focus{background:var(--primary-soft);color:var(--primary)}.accordion-title:before{color:var(--primary);font-size:22px}.accordion-content{border:0;background:#fbfdfe;color:var(--muted);font-size:14px}.cta-band{padding:0 0 var(--section)}.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:34px 40px;border:1px solid #c8dee9;border-radius:18px;background:#eaf4f8}.cta-inner h2{margin:7px 0 0;color:var(--ink);font-size:27px}.cta-inner p{margin:0;color:var(--muted)}footer{padding:58px 0 24px;background:#eaf1f5;border-top:1px solid var(--line)}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}.footer-grid p{max-width:310px;color:var(--muted);font-size:14px}.footer-grid h3{margin:0 0 13px;color:var(--ink);font-size:15px}.footer-grid a:not(.brand){display:block;margin:8px 0;color:var(--muted);font-size:14px}.footer-grid a:not(.brand):hover{color:var(--primary)}.copyright{margin-top:38px;padding-top:20px;border-top:1px solid #d5e1e8;color:#8091a0;font-size:13px}.age-bar{padding:9px 0;background:#f0f6f9;border-bottom:1px solid var(--line);color:#637987;font-size:13px}.age-bar .container{display:flex;justify-content:space-between;gap:20px}.age-bar strong{color:var(--primary)}.empty-note{display:none;padding:14px;border:1px dashed #b7cbd7;border-radius:var(--radius-sm);color:var(--muted);font-size:14px}.button-main:focus,.button-ghost:focus,.header-action:focus,.main-nav a:focus,.accordion-title:focus,input:focus,select:focus,textarea:focus{outline:3px solid rgba(40,101,143,.25);outline-offset:2px}.button-main:active,.button-ghost:active{transform:translateY(1px)}button:disabled{cursor:not-allowed;opacity:.5}@media(max-width:1024px){.nav-shell{gap:16px}.brand{min-width:205px}.phase-nav{display:none}.head-grid{grid-template-columns:1fr}.head-info{max-width:480px}.feature-copy{padding:40px}.feature-visual{min-height:270px}.footer-grid{gap:25px}}@media(max-width:768px){:root{--section:64px}.container{width:min(var(--container),calc(100% - 36px))}.menu-toggle{display:block;margin-left:auto}.nav-shell{position:relative;min-height:68px;flex-wrap:wrap}.main-nav{display:none;order:4;flex:0 0 100%;padding:8px 0 14px;border-top:1px solid var(--line)}.main-nav.open{display:flex;flex-direction:column;align-items:stretch}.main-nav a{padding:11px 12px}.header-action{display:none}.brand{min-width:0}.age-bar .container{display:block}.age-bar span{display:block;margin-top:3px}.head-grid h1{font-size:36px}.feature-banner{grid-template-columns:1fr}.feature-visual{min-height:235px}.timeline-wrap{padding:27px}.timeline{grid-template-columns:1fr;gap:22px}.timeline:before{top:30px;bottom:30px;left:31px;width:2px;height:auto}.time-item{padding-left:82px}.time-dot{position:absolute;top:0;left:0}.matrix,.tip-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.cta-inner{align-items:flex-start;flex-direction:column}.section-head{align-items:flex-start;flex-direction:column}.section-head h2{font-size:28px}}@media(max-width:640px){.page-head{padding:24px 0 34px}.head-grid h1{font-size:31px}.head-grid p{font-size:16px}.feature{padding-top:32px}.feature-copy{padding:31px 25px}.feature-copy h2{font-size:26px}.visual-card{right:18px;bottom:19px}.index-card.large{min-height:300px;padding:27px}.index-card h3{font-size:23px}.timeline-wrap{padding:23px}.notice-card{padding:27px}.cta-inner{padding:28px}.footer-grid{grid-template-columns:1fr;gap:22px}}@media(max-width:480px){.container{width:calc(100% - 28px)}.brand-name{font-size:15px}.brand-mark{width:31px;height:31px}.head-grid h1{font-size:28px}.feature-copy{padding:28px 21px}.feature-copy h2,.notice-card h2,.cta-inner h2{font-size:23px}.button-main,.button-ghost{width:100%}.timeline-wrap{padding:19px}.time-item{padding-left:72px}.time-dot{width:54px;height:54px;border-width:6px;font-size:12px}.timeline:before{left:26px}.index-card.large,.index-card.small{padding:22px}.copyright{font-size:12px}}