/* roulang page: index */
:root {
            --ink: #15233a;
            --ink-soft: #34435a;
            --muted: #718096;
            --blue: #1769d2;
            --blue-deep: #0e4fa9;
            --blue-pale: #eaf3ff;
            --teal: #147d78;
            --rose: #c75363;
            --surface: #fff;
            --canvas: #f4f7fb;
            --line: #e2e9f2;
            --line-strong: #cfdae8;
            --gold: #bd8530;
            --shadow: 0 14px 38px rgba(21, 48, 85, .08);
            --shadow-hover: 0 19px 42px rgba(21, 48, 85, .14);
            --radius: 8px;
            --radius-sm: 5px;
            --container: 1180px;
        }
        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; scroll-padding-top: 92px; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--canvas);
            font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
            font-size: 15px;
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }
        img { display: block; max-width: 100%; }
        a { color: inherit; text-decoration: none; }
        button, input { font: inherit; }
        button { cursor: pointer; }
        a:focus-visible, button:focus-visible, input:focus-visible {
            outline: 3px solid rgba(23, 105, 210, .35);
            outline-offset: 3px;
        }
        .container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
        .site-header {
            position: sticky; top: 0; z-index: 30;
            background: rgba(255,255,255,.95);
            border-bottom: 1px solid rgba(207,218,232,.85);
            backdrop-filter: blur(14px);
        }
        .nav-shell { min-height: 74px; display: flex; align-items: center; gap: 30px; }
        .brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; font-weight: 800; color: var(--ink); }
        .brand-mark {
            width: 38px; height: 38px; display: grid; place-items: center;
            border-radius: 7px; color: #fff; background: var(--blue);
            box-shadow: 0 5px 12px rgba(23,105,210,.2); font-size: 17px; font-weight: 900;
        }
        .brand-name { font-size: 15px; line-height: 1.25; max-width: 225px; }
        .main-nav { display: flex; align-items: center; gap: 5px; margin-left: auto; }
        .main-nav a {
            padding: 9px 13px; color: var(--ink-soft); font-size: 14px; font-weight: 650;
            border-radius: 5px; transition: background .18s ease, color .18s ease;
        }
        .main-nav a:hover, .main-nav a.active { color: var(--blue-deep); background: var(--blue-pale); }
        .nav-age {
            display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px;
            color: #80511e; background: #fff7e9; border: 1px solid #f0dfbd; border-radius: 5px;
            font-size: 12px; font-weight: 750; white-space: nowrap;
        }
        .age-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
        .menu-toggle {
            display: none; width: 40px; height: 40px; margin-left: auto; color: var(--ink);
            background: var(--surface); border: 1px solid var(--line-strong); border-radius: 5px;
        }
        .menu-toggle span, .menu-toggle::before, .menu-toggle::after {
            content: ""; display: block; width: 17px; height: 2px; margin: 4px auto;
            background: currentColor; transition: transform .18s ease;
        }
        .hero { padding: 26px 0 28px; }
        .hero-stage {
            min-height: 432px; position: relative; overflow: hidden; isolation: isolate;
            display: flex; align-items: flex-end; border-radius: 8px;
            background: #1d2c3c url("https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1900&q=88") center 43% / cover no-repeat;
            box-shadow: var(--shadow);
        }
        .hero-stage::before {
            content: ""; position: absolute; inset: 0; z-index: -1;
            background: linear-gradient(90deg, rgba(13,26,42,.88) 0%, rgba(15,31,49,.69) 48%, rgba(15,31,49,.18) 100%);
        }
        .hero-content { width: min(760px, 100%); padding: 52px 58px 42px; color: #fff; }
        .hero-brand { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 21px; }
        .hero-avatar {
            width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.45);
            border-radius: 6px; color: #fff; background: rgba(255,255,255,.14); font-weight: 850; font-size: 20px;
        }
        .hero-brand-name { font-size: 14px; font-weight: 750; }
        .hero-brand-note { color: rgba(255,255,255,.72); font-size: 12px; }
        .hero h1 { max-width: 690px; margin: 0; font-size: 40px; line-height: 1.28; font-weight: 850; }
        .hero h1 .highlight { color: #f2c978; }
        .hero-kicker { margin: 10px 0 0; color: rgba(255,255,255,.91); font-size: 18px; font-weight: 650; }
        .hero-copy { max-width: 680px; margin: 14px 0 0; color: rgba(255,255,255,.82); font-size: 15px; }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 22px; }
        .button {
            min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            padding: 9px 17px; border: 1px solid transparent; border-radius: 5px;
            font-weight: 750; font-size: 14px; transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
        }
        .button:hover { transform: translateY(-2px); }
        .button-primary { color: #fff; background: var(--blue); box-shadow: 0 6px 16px rgba(14,79,169,.28); }
        .button-primary:hover { background: #2b7ce4; }
        .button-ghost { color: #fff; border-color: rgba(255,255,255,.56); background: rgba(255,255,255,.08); }
        .button-ghost:hover { background: rgba(255,255,255,.18); }
        .hero-stats {
            position: absolute; top: 25px; right: 27px; display: flex; gap: 9px;
        }
        .hero-stat {
            min-width: 105px; padding: 10px 12px; color: #fff; background: rgba(15,33,52,.55);
            border: 1px solid rgba(255,255,255,.25); border-radius: 5px; backdrop-filter: blur(8px);
        }
        .hero-stat strong { display: block; font-size: 17px; line-height: 1.3; }
        .hero-stat span { color: rgba(255,255,255,.75); font-size: 11px; }
        .section { padding: 58px 0; }
        .section-white { background: var(--surface); border-top: 1px solid #edf1f6; border-bottom: 1px solid #edf1f6; }
        .section-tint { background: #edf4fc; }
        .section-dark { color: #eef5ff; background: #172a40; }
        .section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 26px; }
        .section-title { margin: 0; font-size: 27px; line-height: 1.35; font-weight: 820; }
        .section-title .accent { color: var(--blue); }
        .section-dark .section-title .accent { color: #84b8ff; }
        .section-intro { max-width: 760px; margin: 9px 0 0; color: var(--muted); font-size: 14px; }
        .section-dark .section-intro { color: #b4c5da; }
        .text-link { flex: 0 0 auto; color: var(--blue-deep); font-size: 14px; font-weight: 750; }
        .text-link:hover { color: var(--teal); }
        .metrics-band { padding: 23px 0; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
        .metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
        .metric { padding: 7px 24px; border-right: 1px solid var(--line); }
        .metric:first-child { padding-left: 0; }
        .metric:last-child { border-right: 0; }
        .metric-value { color: var(--blue-deep); font-size: 27px; font-weight: 850; line-height: 1.2; }
        .metric-label { margin-top: 4px; color: var(--muted); font-size: 13px; }
        .release-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 19px; }
        .media-card { min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 7px 22px rgba(24,48,78,.05); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
        .media-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: #c5d6eb; }
        .media-image { aspect-ratio: 16 / 10; overflow: hidden; position: relative; background: #dce6f0; }
        .media-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
        .media-card:hover .media-image img { transform: scale(1.035); }
        .image-label { position: absolute; left: 10px; top: 10px; padding: 4px 8px; color: #fff; background: rgba(17,38,62,.78); border-radius: 3px; font-size: 11px; font-weight: 750; }
        .media-body { padding: 13px 14px 14px; }
        .media-title { overflow: hidden; margin: 0; color: var(--ink); font-size: 15px; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
        .media-meta { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: 7px; color: var(--muted); font-size: 12px; }
        .rating { color: #9a6a20; font-weight: 800; white-space: nowrap; }
        .rating::before { content: "★"; margin-right: 4px; color: #d39b3b; }
        .status-badge { display: inline-block; margin-top: 10px; padding: 3px 7px; color: #155cad; background: #eaf3ff; border-radius: 3px; font-size: 11px; font-weight: 750; }
        .promo-layout { display: grid; grid-template-columns: 1fr 1.45fr; gap: 28px; align-items: stretch; }
        .promo-copy { padding: 28px 0; }
        .eyebrow { color: var(--teal); font-size: 12px; font-weight: 800; letter-spacing: .7px; }
        .promo-copy h2 { margin: 8px 0 11px; font-size: 29px; line-height: 1.35; }
        .promo-copy p { margin: 0; color: var(--muted); }
        .offer-list { display: grid; gap: 10px; align-content: center; }
        .offer-row { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 14px; padding: 15px 17px; background: #fff; border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 6px 17px rgba(24,48,78,.045); }
        .offer-number { color: var(--blue); font-weight: 850; font-size: 15px; }
        .offer-name { font-weight: 780; }
        .offer-desc { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
        .offer-tag { padding: 5px 8px; color: #8c5a1f; background: #fff4df; border-radius: 3px; font-size: 11px; font-weight: 750; white-space: nowrap; }
        .compare-table { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); }
        .compare-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
        .compare-row:last-child { border-bottom: 0; }
        .compare-row.heading { color: var(--ink-soft); background: #f6f9fd; font-size: 12px; font-weight: 800; }
        .compare-item { font-weight: 750; }
        .compare-value { color: var(--ink-soft); font-size: 13px; }
        .compare-value strong { color: var(--blue-deep); }
        .compare-note { margin: 14px 2px 0; color: var(--muted); font-size: 12px; }
        .limited-band { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 24px 28px; color: #fff; background: var(--blue-deep); border-radius: 6px; box-shadow: 0 10px 25px rgba(14,79,169,.18); }
        .limited-band h2 { margin: 0; font-size: 22px; }
        .limited-band p { margin: 5px 0 0; color: rgba(255,255,255,.8); font-size: 13px; }
        .limited-clock { display: flex; gap: 8px; }
        .clock-unit { min-width: 58px; padding: 7px 8px; text-align: center; color: #fff; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.2); border-radius: 4px; }
        .clock-unit strong { display: block; font-size: 17px; line-height: 1.25; }
        .clock-unit span { color: rgba(255,255,255,.75); font-size: 10px; }
        .popular-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
        .popular-card { display: grid; grid-template-columns: 116px 1fr; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 5px; transition: box-shadow .18s ease, transform .18s ease; }
        .popular-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
        .popular-card img { width: 116px; height: 100%; min-height: 145px; object-fit: cover; }
        .popular-copy { padding: 13px 13px 12px; }
        .popular-copy h3 { margin: 0; font-size: 14px; line-height: 1.5; }
        .popular-copy p { margin: 7px 0 8px; color: var(--muted); font-size: 12px; line-height: 1.65; }
        .category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 27px; }
        .category-item { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 21px 0; border-bottom: 1px solid var(--line); }
        .category-index { color: #91a3b8; font-family: Georgia, serif; font-size: 20px; font-weight: 700; }
        .category-item h3 { margin: 0; font-size: 16px; }
        .category-item p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
        .rank-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px; align-items: start; }
        .rank-intro { padding-top: 16px; }
        .rank-intro .section-title { font-size: 31px; }
        .rank-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.17); }
        .rank-list li { display: grid; grid-template-columns: 38px minmax(0,1fr) 82px 44px; align-items: center; gap: 10px; min-height: 48px; border-bottom: 1px solid rgba(255,255,255,.12); }
        .rank-number { color: #91a9c7; font-family: Georgia, serif; font-weight: 800; }
        .rank-list li:nth-child(-n+3) .rank-number { color: #f0c66e; }
        .rank-name { overflow: hidden; color: #f5f8fc; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
        .rank-heat { color: #aebfd2; font-size: 11px; }
        .rank-score { color: #f0c66e; font-size: 12px; font-weight: 800; text-align: right; }
        .ranking-notes { display: grid; gap: 11px; margin-top: 27px; }
        .ranking-note { padding: 14px 16px; border-left: 2px solid #70a8ec; background: rgba(255,255,255,.06); }
        .ranking-note strong { display: block; color: #f5f8fc; font-size: 13px; }
        .ranking-note span { display: block; margin-top: 3px; color: #b4c5da; font-size: 12px; }
        .reviews-grid { display: grid; grid-template-columns: 1.15fr .85fr .85fr; gap: 15px; }
        .review { min-height: 155px; padding: 19px; background: #fff; border: 1px solid var(--line); border-radius: 5px; }
        .review.featured { background: #e9f3ff; border-color: #d2e5fb; }
        .review-stars { color: #c58c31; font-size: 13px; letter-spacing: 2px; }
        .review blockquote { margin: 11px 0; color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
        .review cite { color: var(--muted); font-size: 12px; font-style: normal; }
        .trust-strip { display: grid; grid-template-columns: repeat(4,1fr); background: #fff; border: 1px solid var(--line); border-radius: 6px; }
        .trust-item { display: flex; align-items: flex-start; gap: 12px; padding: 19px 17px; border-right: 1px solid var(--line); }
        .trust-item:last-child { border-right: 0; }
        .trust-icon { width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center; color: var(--teal); background: #e7f6f3; border-radius: 5px; font-weight: 850; }
        .trust-item strong { display: block; font-size: 13px; }
        .trust-item p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
        .news-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 26px; }
        .news-item { display: grid; grid-template-columns: 105px minmax(0,1fr); gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
        .news-item img { width: 105px; height: 75px; object-fit: cover; border-radius: 4px; }
        .news-item h3 { margin: 0; font-size: 14px; line-height: 1.5; }
        .news-item time { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
        .news-item a:hover h3 { color: var(--blue-deep); }
        .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; }
        .faq-item { padding: 19px 0; border-bottom: 1px solid var(--line); }
        .faq-item h3 { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 15px; }
        .faq-item h3::before { content: "问"; width: 23px; height: 23px; flex: 0 0 auto; display: grid; place-items: center; color: var(--blue-deep); background: var(--blue-pale); border-radius: 4px; font-size: 11px; }
        .faq-item p { margin: 8px 0 0 33px; color: var(--muted); font-size: 13px; }
        .close-band { padding: 35px 0; background: #e7f0fa; border-top: 1px solid #d6e3f2; }
        .close-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
        .close-inner h2 { margin: 0; font-size: 22px; }
        .close-inner p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
        .close-inner .button { flex: 0 0 auto; }
        .site-footer { padding: 48px 0 22px; color: #d8e2ef; background: #13243a; }
        .footer-grid { display: grid; grid-template-columns: 1.55fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 33px; }
        .footer-brand { color: #fff; }
        .footer-about { max-width: 310px; margin: 14px 0 0; color: #aebed1; font-size: 12px; }
        .footer-col h3 { margin: 0 0 12px; color: #fff; font-size: 13px; }
        .footer-links { display: grid; gap: 8px; }
        .footer-links a { width: fit-content; color: #aebed1; font-size: 12px; transition: color .16s ease; }
        .footer-links a:hover { color: #fff; }
        .footer-legal { padding: 17px 0 0; border-top: 1px solid rgba(255,255,255,.13); color: #96a9bf; font-size: 11px; }
        .footer-legal-row { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
        .age-notice { color: #efc770; font-weight: 700; }
        @media (max-width: 1024px) {
            .nav-shell { gap: 16px; }
            .brand-name { max-width: 190px; font-size: 14px; }
            .main-nav a { padding-inline: 9px; }
            .hero-stage { min-height: 415px; }
            .hero-content { padding-inline: 42px; }
            .release-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
            .popular-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
            .category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
            .rank-layout { gap: 28px; }
            .trust-item { padding-inline: 12px; }
        }
        @media (max-width: 768px) {
            .container { width: min(100% - 34px, var(--container)); }
            .nav-shell { min-height: 66px; flex-wrap: wrap; gap: 0; }
            .brand-name { max-width: none; }
            .menu-toggle { display: block; }
            .nav-age { display: none; }
            .main-nav { display: none; width: 100%; margin: 0; padding: 7px 0 13px; flex-wrap: wrap; border-top: 1px solid var(--line); }
            .main-nav.is-open { display: flex; }
            .main-nav a { padding: 8px 11px; }
            .hero { padding-top: 17px; }
            .hero-stage { min-height: 485px; align-items: flex-end; background-position: 58% center; }
            .hero-stage::before { background: linear-gradient(0deg, rgba(13,26,42,.92) 0%, rgba(15,31,49,.68) 56%, rgba(15,31,49,.24) 100%); }
            .hero-content { padding: 42px 27px 28px; }
            .hero h1 { font-size: 34px; }
            .hero-stats { top: 15px; right: 15px; gap: 6px; }
            .hero-stat { min-width: 84px; padding: 8px; }
            .hero-stat strong { font-size: 15px; }
            .section { padding: 46px 0; }
            .section-head { align-items: flex-start; }
            .section-title { font-size: 24px; }
            .metrics-grid { grid-template-columns: repeat(2,1fr); gap: 13px 0; }
            .metric:nth-child(2) { border-right: 0; }
            .metric:nth-child(3) { padding-left: 0; }
            .metric-value { font-size: 24px; }
            .release-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
            .media-body { padding: 11px; }
            .media-title { font-size: 14px; }
            .promo-layout { grid-template-columns: 1fr; gap: 12px; }
            .promo-copy { padding: 0; }
            .promo-copy h2 { font-size: 25px; }
            .compare-row { grid-template-columns: 1.1fr 1fr 1fr; gap: 10px; padding: 14px; }
            .compare-row > :last-child { display: none; }
            .compare-row.heading > :last-child { display: none; }
            .limited-band { grid-template-columns: 1fr; }
            .limited-clock { justify-content: flex-start; }
            .rank-layout { grid-template-columns: 1fr; gap: 20px; }
            .rank-intro { padding-top: 0; }
            .rank-intro .section-title { font-size: 27px; }
            .ranking-notes { grid-template-columns: repeat(2,1fr); }
            .reviews-grid { grid-template-columns: 1fr 1fr; }
            .review.featured { grid-column: 1 / -1; }
            .trust-strip { grid-template-columns: 1fr 1fr; }
            .trust-item:nth-child(2) { border-right: 0; }
            .trust-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
            .news-list { grid-template-columns: 1fr; }
            .faq-grid { grid-template-columns: 1fr; }
            .close-inner { align-items: flex-start; flex-direction: column; }
            .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 27px 20px; }
            .footer-about { max-width: 270px; }
        }
        @media (max-width: 520px) {
            .container { width: calc(100% - 28px); }
            .brand-mark { width: 35px; height: 35px; }
            .brand-name { max-width: 225px; font-size: 13px; }
            .hero-stage { min-height: 515px; }
            .hero-content { padding: 48px 20px 24px; }
            .hero-brand { margin-bottom: 16px; }
            .hero h1 { font-size: 29px; }
            .hero-kicker { font-size: 16px; }
            .hero-copy { font-size: 13px; }
            .hero-stats { top: 12px; left: 16px; right: auto; }
            .hero-stat { min-width: 78px; }
            .hero-actions { gap: 8px; }
            .button { min-height: 41px; padding: 8px 12px; font-size: 13px; }
            .section { padding: 39px 0; }
            .section-head { display: block; margin-bottom: 20px; }
            .section-title { font-size: 22px; }
            .section-head .text-link { display: inline-block; margin-top: 9px; }
            .release-grid { gap: 10px; }
            .media-image { aspect-ratio: 1.32 / 1; }
            .media-meta { font-size: 11px; }
            .offer-row { grid-template-columns: 38px 1fr auto; gap: 9px; padding: 12px 11px; }
            .offer-name { font-size: 13px; }
            .offer-desc { font-size: 11px; }
            .offer-tag { font-size: 10px; padding: 4px 6px; }
            .compare-row { grid-template-columns: 1fr 1fr; padding: 12px; }
            .compare-row > :nth-child(3) { display: none; }
            .compare-row.heading > :nth-child(3) { display: none; }
            .limited-band { padding: 20px; }
            .limited-band h2 { font-size: 19px; }
            .clock-unit { min-width: 52px; }
            .popular-grid { grid-template-columns: 1fr; gap: 11px; }
            .popular-card { grid-template-columns: 105px 1fr; }
            .popular-card img { width: 105px; min-height: 132px; }
            .category-grid { grid-template-columns: 1fr; }
            .category-item { padding: 15px 0; }
            .rank-list li { grid-template-columns: 31px minmax(0,1fr) 63px 36px; gap: 6px; }
            .rank-name { font-size: 12px; }
            .rank-heat { font-size: 10px; }
            .ranking-notes { grid-template-columns: 1fr; }
            .reviews-grid { grid-template-columns: 1fr; }
            .review.featured { grid-column: auto; }
            .trust-strip { grid-template-columns: 1fr; }
            .trust-item { border-right: 0; border-bottom: 1px solid var(--line); }
            .trust-item:nth-child(2) { border-bottom: 1px solid var(--line); }
            .trust-item:last-child { border-bottom: 0; }
            .news-item { grid-template-columns: 90px minmax(0,1fr); gap: 11px; }
            .news-item img { width: 90px; height: 68px; }
            .faq-item p { margin-left: 0; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .footer-brand-col { grid-column: 1 / -1; }
            .footer-legal-row { display: block; }
            .footer-legal-row span { display: block; margin-top: 6px; }
        }

/* roulang page: category1 */
:root {
 --ink:#15233a;
 --ink-soft:#34435a;
 --muted:#718096;
 --blue:#1769d2;
 --blue-deep:#0e4fa9;
 --blue-pale:#eaf3ff;
 --teal:#147d78;
 --rose:#c75363;
 --surface:#fff;
 --canvas:#f4f7fb;
 --line:#e2e9f2;
 --line-strong:#cfdae8;
 --gold:#bd8530;
 --shadow:0 14px 38px rgba(21,48,85,.08);
 --shadow-hover:0 19px 42px rgba(21,48,85,.14);
 --radius:8px;
 --radius-sm:5px;
 --container:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;color:var(--ink);background:var(--canvas);font-family:"Noto Sans SC","Microsoft YaHei","PingFang SC",sans-serif;font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid rgba(23,105,210,.35);outline-offset:3px}
.container{width:min(var(--container),calc(100% - 48px));margin-inline:auto}
.site-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.95);border-bottom:1px solid rgba(207,218,232,.85);backdrop-filter:blur(14px)}
.nav-shell{min-height:74px;display:flex;align-items:center;gap:30px}
.brand{display:inline-flex;align-items:center;gap:11px;flex:0 0 auto;font-weight:800;color:var(--ink)}
.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:7px;color:#fff;background:var(--blue);box-shadow:0 5px 12px rgba(23,105,210,.2);font-size:17px;font-weight:900}
.brand-name{font-size:15px;line-height:1.25;max-width:225px}
.main-nav{display:flex;align-items:center;gap:5px;margin-left:auto}
.main-nav a{padding:9px 13px;color:var(--ink-soft);font-size:14px;font-weight:650;border-radius:5px;transition:background .18s ease,color .18s ease}
.main-nav a:hover,.main-nav a.active{color:var(--blue-deep);background:var(--blue-pale)}
.nav-age{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;color:#80511e;background:#fff7e9;border:1px solid #f0dfbd;border-radius:5px;font-size:12px;font-weight:750;white-space:nowrap}
.menu-toggle{display:none;width:40px;height:40px;margin-left:auto;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:5px}
.menu-toggle span,.menu-toggle::before,.menu-toggle::after{content:"";display:block;width:17px;height:2px;margin:4px auto;background:currentColor;transition:transform .18s ease}
.hero{padding:26px 0 30px}
.hero-stage{min-height:370px;position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:flex-end;border-radius:8px;background:#1d2c3c url("https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1900&q=88") center 43%/cover no-repeat;box-shadow:var(--shadow)}
.hero-stage:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(13,26,42,.9),rgba(15,31,49,.65) 50%,rgba(15,31,49,.2))}
.hero-content{width:min(760px,100%);padding:50px 58px 42px;color:#fff}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:15px;color:#f2c978;font-size:12px;font-weight:800;letter-spacing:.08em}
.eyebrow:before{content:"";width:23px;height:2px;background:#f2c978}
.hero h1{max-width:680px;margin:0;font-size:40px;line-height:1.28;font-weight:850}
.hero h1 .highlight{color:#f2c978}
.hero-kicker{margin:11px 0 0;color:rgba(255,255,255,.91);font-size:18px;font-weight:650}
.hero-copy{max-width:665px;margin:14px 0 0;color:rgba(255,255,255,.82);font-size:15px}
.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:22px}
.button{min-height:43px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 17px;border:1px solid transparent;border-radius:5px;font-weight:750;font-size:14px;transition:transform .18s ease,background .18s ease,box-shadow .18s ease}
.button:hover{transform:translateY(-2px)}
.button-primary{color:#fff;background:var(--blue);box-shadow:0 6px 16px rgba(14,79,169,.28)}
.button-primary:hover{background:#2b7ce4}
.button-ghost{color:#fff;border-color:rgba(255,255,255,.56);background:rgba(255,255,255,.08)}
.button-ghost:hover{background:rgba(255,255,255,.18)}
.hero-stats{position:absolute;top:25px;right:27px;display:flex;gap:9px}
.hero-stat{min-width:105px;padding:10px 12px;color:#fff;background:rgba(15,33,52,.55);border:1px solid rgba(255,255,255,.25);border-radius:5px;backdrop-filter:blur(8px)}
.hero-stat strong{display:block;font-size:17px;line-height:1.3}
.hero-stat span{color:rgba(255,255,255,.75);font-size:11px}
.section{padding:58px 0}
.section-white{background:var(--surface);border-top:1px solid #edf1f6;border-bottom:1px solid #edf1f6}
.section-tint{background:#edf4fc}
.section-dark{color:#eef5ff;background:#172a40}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:26px}
.section-head h2{margin:0;font-size:27px;line-height:1.3;letter-spacing:0}
.section-head p{max-width:620px;margin:7px 0 0;color:var(--muted)}
.kicker{margin:0 0 8px;color:var(--blue);font-size:12px;font-weight:850;letter-spacing:.1em}
.matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.region-card{position:relative;min-height:260px;overflow:hidden;padding:26px;color:#fff;border-radius:var(--radius);background:#24374e;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease}
.region-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.region-card:nth-child(2){background:#245b68}
.region-card:nth-child(3){background:#4b4057}
.region-card:nth-child(4){background:#36566f}
.region-card:nth-child(5){background:#5b4b3e}
.region-card:nth-child(6){background:#315b55}
.region-card:after{content:"";position:absolute;right:-32px;bottom:-38px;width:155px;height:155px;border:1px solid rgba(255,255,255,.2);border-radius:50%}
.region-code{display:inline-block;margin-bottom:28px;color:#f2c978;font-size:12px;font-weight:850;letter-spacing:.12em}
.region-card h3{margin:0;font-size:23px;line-height:1.35}
.region-card p{max-width:290px;margin:10px 0 0;color:rgba(255,255,255,.78);font-size:14px}
.region-meta{position:absolute;left:26px;bottom:22px;color:rgba(255,255,255,.72);font-size:12px}
.compare{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:stretch}
.compare-panel{padding:28px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.compare-panel h3{margin:0 0 18px;font-size:19px}
.compare-row{display:grid;grid-template-columns:135px 1fr 75px;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid #edf1f6}
.compare-row:last-child{border-bottom:0}
.compare-label{color:var(--ink-soft);font-weight:700}
.bar{height:7px;overflow:hidden;border-radius:10px;background:#edf1f6}
.bar i{display:block;height:100%;border-radius:inherit;background:var(--blue)}
.compare-value{color:var(--blue-deep);font-weight:800;text-align:right}
.signal{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.signal-item{padding:18px;background:var(--blue-pale);border-radius:6px}
.signal-item strong{display:block;color:var(--blue-deep);font-size:25px;line-height:1.2}
.signal-item span{display:block;margin-top:5px;color:var(--muted);font-size:12px}
.timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.timeline:before{content:"";position:absolute;top:18px;left:8%;right:8%;height:1px;background:var(--line-strong)}
.milestone{position:relative;padding-top:48px}
.milestone:before{content:"";position:absolute;top:10px;left:0;width:17px;height:17px;border:4px solid var(--blue-pale);border-radius:50%;background:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.milestone strong{display:block;font-size:16px}
.milestone p{margin:7px 0 0;color:var(--muted);font-size:13px}
.news-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:25px}
.news-feature{display:grid;grid-template-columns:1fr 1fr;min-height:285px;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.news-feature img{width:100%;height:100%;object-fit:cover}
.news-feature-content{padding:27px}
.news-feature-content h3{margin:0;font-size:22px;line-height:1.45}
.news-feature-content p{margin:12px 0;color:var(--muted)}
.news-list{display:grid;gap:11px}
.news-item{display:flex;gap:15px;align-items:center;padding:13px;background:#fff;border:1px solid var(--line);border-radius:6px;transition:transform .18s ease,box-shadow .18s ease}
.news-item:hover{transform:translateX(3px);box-shadow:var(--shadow)}
.news-item img{width:76px;height:60px;object-fit:cover;border-radius:4px}
.news-item h4{margin:0;font-size:14px;line-height:1.45}
.news-item time{display:block;margin-top:5px;color:var(--muted);font-size:11px}
.tag{display:inline-flex;align-items:center;padding:4px 8px;color:var(--blue-deep);background:var(--blue-pale);border-radius:4px;font-size:11px;font-weight:800}
.tag.gold{color:#80511e;background:#fff4dc}
.protection{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.protection-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.protection-icon{width:36px;height:36px;display:grid;place-items:center;margin-bottom:14px;color:#fff;background:var(--teal);border-radius:6px;font-weight:900}
.protection-card h3{margin:0;font-size:17px}
.protection-card p{margin:7px 0 0;color:var(--muted);font-size:13px}
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.faq-item{padding:20px 22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.faq-item h3{margin:0;color:var(--ink);font-size:16px}
.faq-item p{margin:8px 0 0;color:var(--muted);font-size:13px}
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:31px 34px;border-radius:var(--radius);background:var(--blue);color:#fff;box-shadow:var(--shadow)}
.cta-band h2{margin:0;font-size:24px}
.cta-band p{margin:6px 0 0;color:rgba(255,255,255,.78)}
.site-footer{padding:48px 0 20px;color:#c5d2e2;background:#172a40}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px}
.footer-brand{color:#fff}
.footer-brand .brand-mark{background:#2b7ce4}
.footer-about{max-width:330px;margin:16px 0 0;color:#a9b8ca;font-size:13px}
.footer-col h3{margin:0 0 13px;color:#fff;font-size:14px}
.footer-links{display:grid;gap:7px}
.footer-links a,.age-notice{color:#a9b8ca;font-size:13px;transition:color .18s ease}
.footer-links a:hover{color:#fff}
.age-notice{color:#f2c978}
.footer-legal{margin-top:36px;padding-top:17px;border-top:1px solid rgba(255,255,255,.14)}
.footer-legal-row{display:flex;justify-content:space-between;gap:15px;color:#8ea2b9;font-size:12px}
@media(max-width:1024px){
 .nav-shell{gap:18px}.main-nav a{padding-inline:8px}.nav-age{display:none}
 .hero-stats{right:18px}.hero-content{padding-left:38px}
 .matrix{grid-template-columns:repeat(2,1fr)}.compare,.news-layout{grid-template-columns:1fr}
}
@media(max-width:768px){
 .container{width:min(var(--container),calc(100% - 32px))}
 .menu-toggle{display:block}
 .main-nav{display:none;position:absolute;top:74px;left:16px;right:16px;padding:10px;align-items:stretch;flex-direction:column;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius)}
 .main-nav.open{display:flex}.main-nav a{padding:11px 13px}
 .hero-stage{min-height:520px}.hero-content{padding:35px 27px 29px}.hero h1{font-size:33px}
 .hero-stats{top:17px;left:17px;right:auto}.hero-stat{min-width:92px}
 .section{padding:45px 0}.section-head{display:block}.section-head p{margin-top:9px}
 .timeline{grid-template-columns:repeat(2,1fr);gap:25px}.timeline:before{display:none}
 .protection,.faq-grid{grid-template-columns:1fr}
 .news-feature{grid-template-columns:1fr}.news-feature img{height:190px}
 .footer-grid{grid-template-columns:repeat(2,1fr);gap:28px}
 .footer-legal-row{display:block}.footer-legal-row span{display:block;margin-top:7px}
}
@media(max-width:520px){
 .brand-name{max-width:170px;font-size:13px}.hero h1{font-size:29px}.hero-kicker{font-size:16px}.hero-copy{font-size:14px}
 .hero-actions .button{width:100%}.hero-stats{gap:6px}.hero-stat{min-width:83px;padding:8px}.hero-stat strong{font-size:15px}.hero-stat span{font-size:10px}
 .matrix{grid-template-columns:1fr}.region-card{min-height:225px}
 .compare-row{grid-template-columns:105px 1fr 52px;gap:8px;font-size:13px}.signal{grid-template-columns:1fr 1fr}
 .timeline{grid-template-columns:1fr}.news-feature-content{padding:22px}.cta-band{display:block;padding:25px}.cta-band .button{margin-top:17px;width:100%}
 .footer-grid{grid-template-columns:1fr}.footer-about{max-width:none}
}