/* roulang page: index */
:root{--blue:#165dba;--blue-dark:#0b3b78;--cyan:#1aa6a6;--ink:#15263d;--muted:#66758a;--bg:#f5f8fc;--line:#dce5ef;--white:#fff;--accent:#e8793f;--radius:14px;--shadow:0 12px 34px rgba(24,67,112,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;line-height:1.75}a{color:inherit;text-decoration:none;transition:.2s ease}img{display:block;width:100%;object-fit:cover}button,input,select{font:inherit}button:focus,input:focus,select:focus,a:focus{outline:3px solid rgba(22,93,186,.25);outline-offset:3px}.container{width:min(1180px,calc(100% - 40px));margin:auto}.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-wrap{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font-size:21px;font-weight:800;color:var(--blue-dark);white-space:nowrap}.brand span{color:var(--accent)}.main-nav{display:flex;align-items:center;gap:8px}.main-nav a{padding:10px 15px;border-radius:9px;color:#53657b;font-size:14px}.main-nav a:hover,.main-nav a.active{background:#edf4fc;color:var(--blue);font-weight:700}.nav-search{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}.nav-search input{width:145px;border:0;padding:8px 10px;color:var(--ink)}.nav-search button{border:0;background:var(--blue);color:#fff;padding:8px 12px;cursor:pointer}.menu-toggle{display:none;background:#edf4fc;border:0;border-radius:8px;padding:8px 12px;color:var(--blue);font-size:20px}.hero{position:relative;min-height:570px;display:flex;align-items:center;overflow:hidden;color:#fff;background:#0d3265 url("https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&w=1900&q=90") center/cover}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,31,66,.94),rgba(10,51,105,.73) 52%,rgba(8,33,67,.35))}.hero-content{position:relative;z-index:1;width:min(1180px,calc(100% - 40px));margin:auto;padding:85px 0}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:#bfe5ff;font-size:13px;letter-spacing:.08em;margin-bottom:18px}.eyebrow:before{content:"";width:28px;height:2px;background:var(--accent)}h1{font-size:clamp(38px,5vw,68px);line-height:1.15;max-width:760px;margin:0 0 22px;font-weight:800;letter-spacing:0}.hero-copy{max-width:700px;color:#e2edf9;font-size:17px;margin:0 0 32px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 20px;border-radius:9px;border:1px solid transparent;font-weight:700;cursor:pointer}.button.primary{background:var(--accent);color:#fff}.button.primary:hover{background:#d66029;transform:translateY(-2px)}.button.light{background:#fff;color:var(--blue-dark)}.button.light:hover{background:#eaf3ff}.button.outline{border-color:#a9c9e8;color:var(--blue);background:#fff}.button.outline:hover{border-color:var(--blue);background:#edf5ff}.hero-strip{position:absolute;bottom:0;left:0;right:0;background:rgba(5,26,57,.78);padding:16px 0}.hero-facts{display:flex;gap:36px;color:#d9e7f5}.hero-facts strong{display:block;color:#fff;font-size:22px}.hero-facts span{font-size:12px;color:#b8ccdf}.section{padding:82px 0}.section.alt{background:#edf4fb}.section.white{background:#fff}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:30px}.section-heading h2{margin:0;font-size:30px;line-height:1.25;color:var(--blue-dark)}.section-heading p{max-width:620px;margin:0;color:var(--muted);font-size:15px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}.stat strong{font-size:35px;color:var(--blue-dark);display:block}.stat span{font-size:14px;color:var(--muted)}.matrix{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:18px}.feature-panel{min-height:240px;border-radius:var(--radius);padding:28px;color:#fff;background:var(--blue-dark);position:relative;overflow:hidden}.feature-panel:after{content:"";position:absolute;width:180px;height:180px;border:28px solid rgba(255,255,255,.1);border-radius:50%;right:-50px;bottom:-65px}.feature-panel h3{position:relative;z-index:1;margin:0 0 12px;font-size:23px}.feature-panel p{position:relative;z-index:1;color:#dbeafb;font-size:14px}.feature-panel.secondary{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow)}.feature-panel.secondary p{color:var(--muted)}.icon-line{font-size:27px;color:var(--accent);margin-bottom:20px}.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}.compare-box{padding:28px;border-radius:var(--radius);border:1px solid var(--line);background:#fff}.compare-box.highlight{border-color:#b8d5f2;background:#f0f7ff}.compare-box h3{margin:0 0 15px;font-size:20px;color:var(--blue-dark)}.compare-box ul{list-style:none;margin:0;padding:0}.compare-box li{padding:10px 0;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}.compare-box li:before{content:"✓";color:var(--cyan);font-weight:800;margin-right:9px}.timeline{position:relative;margin-top:16px}.timeline:before{content:"";position:absolute;left:17px;top:8px;bottom:8px;width:2px;background:#c8dced}.timeline-item{display:grid;grid-template-columns:36px 1fr;gap:18px;position:relative;padding-bottom:24px}.timeline-dot{width:36px;height:36px;border-radius:50%;background:var(--blue);border:7px solid #dcecfb;z-index:1}.timeline-item h3{margin:0 0 4px;font-size:18px;color:var(--blue-dark)}.timeline-item p{margin:0;color:var(--muted);font-size:14px}.news-list{border-top:1px solid var(--line)}.news-row{display:grid;grid-template-columns:150px 1fr auto;gap:22px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}.news-row img{height:92px;border-radius:10px}.news-row h3{font-size:18px;margin:0 0 5px;color:var(--blue-dark)}.news-row p{margin:0;color:var(--muted);font-size:14px}.news-tag,.badge{display:inline-block;padding:4px 9px;border-radius:5px;font-size:12px;color:#167878;background:#e4f7f5;margin-bottom:6px}.badge.orange{color:#aa4d20;background:#fff0e9}.assurance{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.assurance-item{padding:24px 0;border-top:3px solid var(--blue)}.assurance-item h3{margin:0 0 8px;color:var(--blue-dark);font-size:18px}.assurance-item p{margin:0;color:var(--muted);font-size:14px}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.quick-item{background:#fff;padding:22px;border-left:4px solid var(--accent);box-shadow:var(--shadow)}.quick-item h3{font-size:17px;margin:0 0 8px;color:var(--blue-dark)}.quick-item p{font-size:14px;margin:0;color:var(--muted)}.faq-list{max-width:900px;margin:auto}.faq-list details{background:#fff;border:1px solid var(--line);margin-bottom:10px;border-radius:9px}.faq-list summary{cursor:pointer;padding:17px 20px;font-weight:700;color:var(--blue-dark);list-style:none}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:"+";float:right;color:var(--blue);font-size:21px}.faq-list details[open] summary:after{content:"−"}.faq-answer{padding:0 20px 18px;color:var(--muted);font-size:14px}.feedback{background:var(--blue-dark);color:#fff}.feedback .section-heading h2{color:#fff}.feedback .section-heading p{color:#c9dcf0}.feedback-form{display:grid;grid-template-columns:1fr 1fr 180px;gap:12px}.feedback-form input,.feedback-form select{height:48px;border:0;border-radius:8px;padding:0 14px;background:#fff}.feedback-note{font-size:12px;color:#a9c6e1;margin-top:12px}.special-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}.special-main{min-height:260px;border-radius:var(--radius);padding:30px;background:#142d52 url("https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1100&q=85") center/cover;color:#fff;position:relative;overflow:hidden}.special-main:before{content:"";position:absolute;inset:0;background:rgba(10,34,68,.68)}.special-main>*{position:relative}.special-main h3{font-size:28px;margin:70px 0 8px}.special-main p{color:#e5eef8;font-size:14px}.update-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.update-table th,.update-table td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line);font-size:14px}.update-table th{background:#edf5fc;color:var(--blue-dark)}.update-table td{color:var(--muted)}.category-links{display:flex;gap:10px;flex-wrap:wrap}.category-links a{padding:13px 18px;border:1px solid #b9d2e9;border-radius:8px;background:#fff;color:var(--blue-dark);font-weight:700}.category-links a:hover{border-color:var(--blue);background:#edf5ff}.recommend-list{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.recommend{background:#fff;border:1px solid var(--line);border-radius:11px;overflow:hidden;box-shadow:0 5px 20px rgba(24,67,112,.06)}.recommend img{height:150px}.recommend div{padding:15px}.recommend h3{margin:0 0 5px;font-size:16px;color:var(--blue-dark)}.recommend p{margin:0;color:var(--muted);font-size:13px}.site-footer{background:#10243e;color:#c2d2e3;padding:55px 0 25px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}.footer-brand{color:#fff;font-size:22px;font-weight:800}.footer-brand span{color:#ff9868}.site-footer h3{color:#fff;font-size:15px;margin:0 0 12px}.site-footer a{display:block;font-size:13px;margin:7px 0;color:#b8cbe0}.site-footer a:hover{color:#fff}.copyright{border-top:1px solid rgba(255,255,255,.14);margin-top:35px;padding-top:18px;font-size:12px;color:#91a8c0}
@media(max-width:1024px){.matrix{grid-template-columns:1fr 1fr}.matrix .feature-panel:first-child{grid-column:1/-1}.recommend-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.container,.hero-content{width:min(100% - 30px,620px)}.nav-wrap{min-height:65px}.menu-toggle{display:block}.main-nav{display:none;position:absolute;left:15px;right:15px;top:72px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);padding:10px;flex-direction:column;align-items:stretch}.main-nav.open{display:flex}.nav-search{display:none}.main-nav a{padding:12px}.hero{min-height:640px}.hero-content{padding:70px 0 130px}.hero-facts{gap:16px;flex-wrap:wrap}.stats-grid,.assurance,.quick-grid{grid-template-columns:1fr 1fr}.section{padding:62px 0}.section-heading{display:block}.section-heading p{margin-top:12px}.news-row{grid-template-columns:105px 1fr}.news-row .button{grid-column:2;justify-self:start}.feedback-form{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.special-grid{grid-template-columns:1fr}}
@media(max-width:520px){.brand{font-size:17px}.hero h1{font-size:38px}.hero-copy{font-size:15px}.stats-grid,.matrix,.compare,.assurance,.quick-grid,.footer-grid{grid-template-columns:1fr}.matrix .feature-panel:first-child{grid-column:auto}.news-row{grid-template-columns:1fr}.news-row img{height:170px}.news-row .button{grid-column:auto}.recommend-list{grid-template-columns:1fr 1fr}.recommend img{height:125px}.section-heading h2{font-size:25px}.hero-facts strong{font-size:18px}}

/* roulang page: category1 */
:root {
            --blue: #165dba;
            --blue-dark: #0b3b78;
            --cyan: #1aa6a6;
            --ink: #15263d;
            --muted: #66758a;
            --bg: #f5f8fc;
            --line: #dce5ef;
            --white: #fff;
            --accent: #e8793f;
            --radius: 14px;
            --shadow: 0 12px 34px rgba(24, 67, 112, .10);
            --shadow-small: 0 5px 18px rgba(24, 67, 112, .08);
            --green: #27846a;
        }

        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; scroll-padding-top: 96px; }
        body {
            margin: 0;
            background: var(--bg);
            color: var(--ink);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            font-size: 15px;
            line-height: 1.75;
        }
        a { color: inherit; text-decoration: none; transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
        img { display: block; width: 100%; object-fit: cover; }
        button, input, select { font: inherit; }
        button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible {
            outline: 3px solid rgba(22, 93, 186, .28);
            outline-offset: 3px;
        }
        .container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
        .site-header {
            position: sticky;
            top: 0;
            z-index: 20;
            background: rgba(255, 255, 255, .97);
            border-bottom: 1px solid var(--line);
            box-shadow: 0 3px 16px rgba(24, 67, 112, .035);
            backdrop-filter: blur(12px);
        }
        .nav-wrap { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
        .brand { color: var(--blue-dark); font-size: 21px; line-height: 1.25; font-weight: 800; white-space: nowrap; }
        .brand span, .footer-brand span { color: var(--accent); }
        .main-nav { display: flex; align-items: center; gap: 5px; }
        .main-nav a { padding: 9px 13px; border-radius: 8px; color: #53657b; font-size: 14px; }
        .main-nav a:hover, .main-nav a.active { background: #edf4fc; color: var(--blue); font-weight: 700; }
        .menu-toggle {
            display: none;
            align-items: center;
            justify-content: center;
            min-width: 42px;
            min-height: 42px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #fff;
            color: var(--blue-dark);
            cursor: pointer;
        }

        .page-intro {
            padding: 38px 0 35px;
            background: #fff;
            border-bottom: 1px solid var(--line);
        }
        .breadcrumbs { display: flex; align-items: center; gap: 9px; margin: 0 0 17px; color: #8592a3; font-size: 13px; }
        .breadcrumbs a { color: var(--blue); }
        .breadcrumbs a:hover { color: var(--blue-dark); text-decoration: underline; }
        .intro-layout { display: grid; grid-template-columns: minmax(0, 1fr) 245px; align-items: end; gap: 42px; }
        .intro-copy { max-width: 790px; }
        .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 9px; color: var(--cyan); font-size: 13px; font-weight: 700; }
        .eyebrow::before { content: ""; width: 20px; height: 2px; background: var(--accent); }
        h1 { margin: 0 0 12px; color: var(--blue-dark); font-size: 38px; line-height: 1.28; font-weight: 800; }
        .intro-copy p { max-width: 760px; margin: 0; color: var(--muted); font-size: 15px; }
        .intro-note { padding: 16px 18px; border-left: 3px solid var(--cyan); background: #f0f8fa; color: #476475; font-size: 13px; }
        .intro-note strong { display: block; margin-bottom: 3px; color: var(--blue-dark); font-size: 15px; }

        .section { padding: 55px 0; }
        .section.white { background: #fff; }
        .section.alt { background: #edf4fb; }
        .section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 24px; }
        .section-heading h2 { margin: 0; color: var(--blue-dark); font-size: 25px; line-height: 1.35; font-weight: 750; }
        .section-heading p { max-width: 590px; margin: 0; color: var(--muted); font-size: 14px; }
        .section-kicker { display: block; margin-bottom: 5px; color: var(--cyan); font-size: 12px; font-weight: 700; }

        .filter-bar {
            display: grid;
            grid-template-columns: minmax(220px, 1fr) auto auto;
            gap: 12px;
            align-items: end;
            padding: 18px;
            border: 1px solid var(--line);
            border-radius: 10px;
            background: var(--white);
            box-shadow: var(--shadow-small);
        }
        .field label { display: block; margin-bottom: 5px; color: #45566b; font-size: 12px; font-weight: 700; }
        .field input, .field select {
            width: 100%;
            height: 44px;
            margin: 0;
            padding: 0 12px;
            border: 1px solid #ced9e5;
            border-radius: 7px;
            background: #fff;
            color: var(--ink);
            box-shadow: none;
            font-size: 14px;
        }
        .field input::placeholder { color: #9aa6b5; }
        .filter-bar .button { min-height: 44px; }
        .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 42px;
            padding: 9px 17px;
            border: 1px solid transparent;
            border-radius: 8px;
            font-weight: 700;
            cursor: pointer;
        }
        .button.primary { background: var(--blue); color: #fff; }
        .button.primary:hover { background: var(--blue-dark); box-shadow: 0 6px 16px rgba(22, 93, 186, .2); transform: translateY(-1px); }
        .button.outline { border-color: #b7cce1; background: #fff; color: var(--blue); }
        .button.outline:hover { border-color: var(--blue); background: #edf5ff; }
        .filter-meta { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 17px; color: var(--muted); font-size: 13px; }
        .filter-meta strong { color: var(--ink); }

        .entry-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
        .entry-card {
            overflow: hidden;
            border: 1px solid #e1e8f0;
            border-radius: 10px;
            background: #fff;
            box-shadow: var(--shadow-small);
            transition: transform .2s ease, box-shadow .2s ease;
        }
        .entry-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
        .entry-image { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #dce8f1; }
        .entry-image img { height: 100%; transition: transform .35s ease; }
        .entry-card:hover .entry-image img { transform: scale(1.035); }
        .image-mark {
            position: absolute;
            left: 12px;
            bottom: 12px;
            padding: 4px 9px;
            border: 1px solid rgba(255,255,255,.45);
            border-radius: 5px;
            background: rgba(11, 59, 120, .78);
            color: #fff;
            font-size: 11px;
        }
        .entry-body { padding: 17px 18px 18px; }
        .entry-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
        .tag { display: inline-flex; align-items: center; min-height: 23px; padding: 2px 8px; border-radius: 4px; background: #e4f7f5; color: #167878; font-size: 11px; font-weight: 700; }
        .tag.orange { background: #fff0e9; color: #aa4d20; }
        .entry-status { color: #78879a; font-size: 11px; }
        .entry-body h3 { margin: 0 0 7px; color: var(--blue-dark); font-size: 18px; line-height: 1.4; }
        .entry-body p { min-height: 48px; margin: 0 0 13px; color: var(--muted); font-size: 13px; line-height: 1.7; }
        .entry-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 11px; border-top: 1px solid #edf1f5; color: #78879a; font-size: 12px; }
        .entry-foot a { color: var(--blue); font-weight: 700; white-space: nowrap; }
        .entry-foot a:hover { color: var(--blue-dark); }
        .empty-state { display: none; padding: 35px 20px; border: 1px dashed #bdcddd; border-radius: 9px; background: #fff; color: var(--muted); text-align: center; }
        .pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 28px; }
        .page-number, .page-arrow {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 40px;
            height: 40px;
            border: 1px solid var(--line);
            border-radius: 7px;
            background: #fff;
            color: #53657b;
            font-size: 13px;
        }
        .page-number.current { border-color: var(--blue); background: var(--blue); color: #fff; font-weight: 700; }
        .page-arrow:hover, .page-number:not(.current):hover { border-color: #9bb9d8; color: var(--blue); }
        .pagination-note { margin: 13px 0 0; color: #7c8998; text-align: center; font-size: 12px; }

        .updates-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 52px; align-items: start; }
        .updates-lead { padding-right: 18px; }
        .updates-lead h2 { margin: 0 0 12px; color: var(--blue-dark); font-size: 27px; line-height: 1.35; }
        .updates-lead p { margin: 0; color: var(--muted); font-size: 14px; }
        .timeline { border-left: 1px solid #bfd1e3; padding-left: 25px; }
        .timeline-item { position: relative; padding: 0 0 23px; }
        .timeline-item:last-child { padding-bottom: 0; }
        .timeline-item::before {
            content: "";
            position: absolute;
            top: 7px;
            left: -31px;
            width: 11px;
            height: 11px;
            border: 3px solid #fff;
            border-radius: 50%;
            background: var(--cyan);
            box-shadow: 0 0 0 1px var(--cyan);
        }
        .timeline-date { color: var(--accent); font-size: 11px; font-weight: 700; }
        .timeline-item h3 { margin: 3px 0 2px; color: var(--blue-dark); font-size: 16px; }
        .timeline-item p { margin: 0; color: var(--muted); font-size: 13px; }

        .popular-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 38px; align-items: start; }
        .popular-list { border-top: 1px solid var(--line); }
        .popular-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 15px; padding: 15px 0; border-bottom: 1px solid var(--line); }
        .rank { color: #a9b7c7; font-size: 23px; font-weight: 800; line-height: 1; }
        .popular-row:nth-child(-n+2) .rank { color: var(--accent); }
        .popular-row h3 { margin: 0 0 3px; color: var(--blue-dark); font-size: 15px; }
        .popular-row p { margin: 0; color: var(--muted); font-size: 12px; }
        .popular-row a { color: var(--blue); font-size: 12px; font-weight: 700; white-space: nowrap; }
        .popular-row a:hover { color: var(--blue-dark); }
        .side-note { padding: 21px; border-radius: 9px; background: #e8f4f5; }
        .side-note .note-index { color: var(--cyan); font-size: 12px; font-weight: 700; }
        .side-note h3 { margin: 5px 0 8px; color: var(--blue-dark); font-size: 18px; }
        .side-note p { margin: 0; color: #587080; font-size: 13px; }

        .guide-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 55px; align-items: center; }
        .guide-copy h2 { margin: 0 0 12px; color: var(--blue-dark); font-size: 26px; }
        .guide-copy p { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
        .guide-copy p:last-child { margin-bottom: 0; }
        .guide-aside { padding: 20px 22px; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: var(--shadow-small); }
        .guide-aside strong { display: block; margin-bottom: 9px; color: var(--blue-dark); font-size: 14px; }
        .guide-aside ul { margin: 0; padding-left: 19px; color: var(--muted); font-size: 13px; }
        .guide-aside li + li { margin-top: 5px; }

        .faq-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 50px; align-items: start; }
        .faq-intro h2 { margin: 0 0 10px; color: var(--blue-dark); font-size: 25px; line-height: 1.4; }
        .faq-intro p { margin: 0; color: var(--muted); font-size: 14px; }
        .faq-list details { margin-bottom: 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
        .faq-list summary { position: relative; padding: 15px 42px 15px 17px; color: var(--blue-dark); font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; }
        .faq-list summary::-webkit-details-marker { display: none; }
        .faq-list summary::after { content: "+"; position: absolute; top: 11px; right: 16px; color: var(--blue); font-size: 21px; font-weight: 400; }
        .faq-list details[open] summary::after { content: "−"; }
        .faq-answer { padding: 0 17px 16px; color: var(--muted); font-size: 13px; }

        .feedback-band { padding: 37px 0; background: var(--blue-dark); color: #fff; }
        .feedback-layout { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
        .feedback-copy h2 { margin: 0 0 4px; color: #fff; font-size: 22px; }
        .feedback-copy p { margin: 0; color: #c9dcf0; font-size: 13px; }
        .feedback-band .button { flex: 0 0 auto; background: var(--accent); color: #fff; }
        .feedback-band .button:hover { background: #d66029; transform: translateY(-1px); }

        .site-footer { padding: 45px 0 20px; background: #fff; border-top: 1px solid var(--line); }
        .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 45px; padding-bottom: 30px; }
        .footer-brand { margin-bottom: 9px; color: var(--blue-dark); font-size: 21px; font-weight: 800; }
        .footer-grid p { max-width: 360px; margin: 0; color: var(--muted); font-size: 13px; }
        .footer-grid h3 { margin: 3px 0 12px; color: var(--ink); font-size: 14px; }
        .footer-grid a:not(.footer-brand) { display: block; width: fit-content; margin: 5px 0; color: var(--muted); font-size: 13px; }
        .footer-grid a:hover { color: var(--blue); }
        .copyright { padding-top: 16px; border-top: 1px solid #e9eef4; color: #8491a0; font-size: 12px; }

        @media (max-width: 1024px) {
            .nav-wrap { gap: 12px; }
            .main-nav a { padding-inline: 9px; font-size: 13px; }
            .entry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .updates-layout { gap: 32px; }
            .popular-layout { grid-template-columns: minmax(0, 1fr) 245px; gap: 26px; }
        }
        @media (max-width: 768px) {
            .container { width: min(100% - 32px, 620px); }
            .nav-wrap { min-height: 68px; position: relative; }
            .brand { font-size: 19px; }
            .menu-toggle { display: inline-flex; }
            .main-nav {
                display: none;
                position: absolute;
                top: calc(100% + 1px);
                left: -16px;
                right: -16px;
                padding: 10px 16px 14px;
                border-bottom: 1px solid var(--line);
                background: #fff;
                box-shadow: 0 10px 18px rgba(24, 67, 112, .08);
            }
            .main-nav.is-open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .main-nav a { padding: 10px 12px; }
            .page-intro { padding: 29px 0 27px; }
            .intro-layout { grid-template-columns: 1fr; gap: 18px; }
            .intro-note { max-width: 440px; }
            h1 { font-size: 32px; }
            .section { padding: 43px 0; }
            .section-heading { align-items: start; flex-direction: column; gap: 8px; }
            .section-heading h2 { font-size: 22px; }
            .filter-bar { grid-template-columns: 1fr 1fr; }
            .field.search-field { grid-column: 1 / -1; }
            .entry-grid { gap: 14px; }
            .updates-layout, .popular-layout, .guide-grid, .faq-layout { grid-template-columns: 1fr; gap: 26px; }
            .updates-lead { padding: 0; }
            .popular-layout { gap: 22px; }
            .side-note { max-width: none; }
            .guide-aside { max-width: 460px; }
            .feedback-layout { align-items: flex-start; flex-direction: column; }
            .footer-grid { grid-template-columns: 1.3fr 1fr; gap: 25px; }
            .footer-grid > div:first-child { grid-column: 1 / -1; }
        }
        @media (max-width: 520px) {
            .container { width: calc(100% - 28px); }
            .main-nav { left: -14px; right: -14px; }
            .intro-layout { gap: 14px; }
            h1 { font-size: 28px; }
            .intro-copy p { font-size: 14px; }
            .section { padding: 36px 0; }
            .filter-bar { grid-template-columns: 1fr; padding: 14px; }
            .field.search-field { grid-column: auto; }
            .filter-bar .button { width: 100%; }
            .filter-meta { align-items: flex-start; flex-direction: column; gap: 4px; }
            .entry-grid { grid-template-columns: 1fr; }
            .entry-image { aspect-ratio: 16 / 9; }
            .entry-body p { min-height: 0; }
            .popular-row { grid-template-columns: 33px minmax(0, 1fr); gap: 11px; }
            .popular-row > a { grid-column: 2; justify-self: start; }
            .pagination { gap: 6px; }
            .page-number, .page-arrow { min-width: 36px; height: 36px; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px 14px; }
            .footer-grid > div:first-child { grid-column: 1 / -1; }
            .copyright { overflow-wrap: anywhere; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
        }