/* roulang page: index */
:root {
            --ink: #172235;
            --muted: #718096;
            --soft: #f4f7fb;
            --paper: #ffffff;
            --line: #e5ebf3;
            --blue: #2764e7;
            --blue-dark: #1749b5;
            --cyan: #24b6c8;
            --navy: #10213f;
            --gold: #f0ad4e;
            --danger: #d95757;
            --radius: 18px;
            --shadow: 0 18px 46px rgba(30, 55, 92, .10);
            --shadow-sm: 0 8px 22px rgba(30, 55, 92, .08);
            --max: 1180px;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body {
            color: var(--ink);
            background: var(--paper);
            font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
            line-height: 1.7;
            -webkit-font-smoothing: antialiased;
        }
        a { color: inherit; text-decoration: none; }
        img { display: block; width: 100%; object-fit: cover; }
        button, input { font: inherit; }
        button { cursor: pointer; }
        :focus-visible { outline: 3px solid rgba(39,100,231,.28); outline-offset: 3px; }
        .container { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--blue);
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
        }
        .eyebrow::before {
            content: "";
            width: 22px;
            height: 3px;
            border-radius: 3px;
            background: var(--cyan);
        }
        h1, h2, h3 { line-height: 1.2; letter-spacing: 0; }
        h1 { font-size: clamp(38px, 5vw, 68px); }
        h2 { font-size: clamp(28px, 3vw, 42px); }
        h3 { font-size: 18px; }
        .section { padding: 98px 0; }
        .section-muted { background: var(--soft); }
        .section-dark { background: var(--navy); color: #fff; }
        .section-head {
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 28px;
            margin-bottom: 34px;
        }
        .section-head p {
            max-width: 590px;
            color: var(--muted);
            font-size: 15px;
        }
        .section-dark .section-head p { color: #b9c6db; }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 20;
            background: rgba(255,255,255,.94);
            border-bottom: 1px solid rgba(229,235,243,.9);
            backdrop-filter: blur(16px);
        }
        .nav-wrap { min-height: 76px; display: flex; align-items: center; gap: 30px; }
        .brand { display: inline-flex; align-items: center; gap: 11px; min-width: 230px; font-weight: 900; }
        .brand-mark {
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            color: #fff;
            border-radius: 11px;
            background: var(--blue);
            box-shadow: 0 8px 16px rgba(39,100,231,.25);
            font-size: 19px;
        }
        .brand-name { font-size: 16px; white-space: nowrap; }
        .main-nav { display: flex; align-items: center; gap: 7px; margin-left: auto; }
        .main-nav a {
            position: relative;
            padding: 9px 12px;
            color: #526178;
            border-radius: 9px;
            font-size: 14px;
            font-weight: 700;
            transition: .2s ease;
        }
        .main-nav a:hover, .main-nav a.active { color: var(--blue); background: #edf3ff; }
        .nav-search {
            display: flex;
            align-items: center;
            gap: 7px;
            width: 156px;
            padding: 8px 12px;
            border: 1px solid var(--line);
            border-radius: 10px;
            background: #fff;
            color: var(--muted);
        }
        .nav-search input { width: 100%; border: 0; outline: 0; color: var(--ink); font-size: 13px; }
        .nav-toggle { display: none; border: 0; background: transparent; color: var(--ink); font-size: 24px; }

        .hero {
            position: relative;
            min-height: 625px;
            display: flex;
            align-items: center;
            overflow: hidden;
            background:
                linear-gradient(90deg, rgba(12,29,63,.96) 0%, rgba(18,49,103,.88) 52%, rgba(18,49,103,.42) 100%),
                url("https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&w=1900&q=88") center/cover;
        }
        .hero::after {
            content: "";
            position: absolute;
            right: -8%;
            top: -20%;
            width: 54%;
            height: 150%;
            background: rgba(39,100,231,.82);
            clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
            opacity: .7;
        }
        .hero-content { position: relative; z-index: 1; max-width: 740px; color: #fff; padding: 70px 0; }
        .hero .eyebrow { color: #8ee4ed; }
        .hero h1 { max-width: 720px; margin: 22px 0 22px; }
        .hero h1 strong { color: #8ee4ed; font-weight: 900; }
        .hero-lead { max-width: 690px; color: #d7e2f5; font-size: 17px; line-height: 1.9; }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 46px;
            padding: 0 20px;
            border: 1px solid transparent;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 800;
            transition: .2s ease;
        }
        .btn-primary { color: #fff; background: var --blue); box-shadow: 0 9px 18px rgba(39,100,231,.28); }
        .btn-primary:hover { background: var(--blue-dark); transform: translateY(-2px); box-shadow: 0 13px 24px rgba(39,100,231,.34); }
        .btn-light { color: var(--navy); background: #fff; }
        .btn-light:hover { color: var(--blue); background: #eef5ff; transform: translateY(-2px); }
        .btn-outline { color: var(--blue); border-color: #cbd9f5; background: #fff; }
        .btn-outline:hover { color: #fff; border-color: var(--blue); background: var(--blue); }
        .hero .btn-outline { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.08); }
        .hero .btn-outline:hover { color: var(--navy); background: #fff; border-color: #fff; }

        .metric-strip { position: relative; z-index: 2; margin-top: -54px; }
        .metric-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            background: #fff;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            overflow: hidden;
        }
        .metric { padding: 27px 25px; border-right: 1px solid var(--line); }
        .metric:last-child { border-right: 0; }
        .metric strong { display: block; color: var(--blue); font-size: 31px; line-height: 1; }
        .metric span { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; }

        .rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .content-card {
            min-width: 0;
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: #fff;
            box-shadow: var(--shadow-sm);
            transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
        }
        .content-card:hover { transform: translateY(-6px); border-color: #c6d7f6; box-shadow: var(--shadow); }
        .poster { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #dbe4f0; }
        .poster img { height: 100%; transition: transform .4s ease; }
        .content-card:hover .poster img { transform: scale(1.06); }
        .poster::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(10,27,57,.65)); }
        .badge {
            position: absolute;
            left: 13px;
            top: 13px;
            z-index: 1;
            padding: 4px 8px;
            color: #fff;
            border-radius: 6px;
            background: var(--blue);
            font-size: 11px;
            font-weight: 800;
        }
        .badge.cyan { background: var(--cyan); }
        .badge.gold { background: var(--gold); }
        .card-body { padding: 17px 17px 18px; }
        .card-body h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .card-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; color: var(--muted); font-size: 12px; }
        .rating { color: #d88c22; font-weight: 800; }
        .rating::before { content: "★"; margin-right: 3px; }

        .feature-band { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
        .feature-band h2 { margin: 17px 0 18px; }
        .feature-band p { color: var(--muted); font-size: 16px; }
        .feature-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 28px; }
        .point { padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
        .point strong { display: block; margin-bottom: 5px; color: var(--ink); }
        .point span { color: var(--muted); font-size: 13px; }
        .signal-panel { padding: 29px; border-radius: 22px; background: var(--navy); box-shadow: var(--shadow); }
        .signal-panel h3 { color: #fff; font-size: 22px; }
        .signal-list { margin-top: 21px; }
        .signal-row { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.12); color: #cbd7e9; font-size: 14px; }
        .signal-row:last-child { border-bottom: 0; }
        .signal-row b { color: #fff; }

        .recommend-grid { display: grid; grid-template-columns: 1.3fr .85fr .85fr; gap: 20px; }
        .recommend-card { position: relative; min-height: 350px; overflow: hidden; border-radius: var(--radius); background: #132b51; }
        .recommend-card img { height: 100%; opacity: .82; transition: transform .4s ease; }
        .recommend-card:hover img { transform: scale(1.05); }
        .recommend-card::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(5,18,40,.95)); }
        .recommend-info { position: absolute; z-index: 1; right: 22px; bottom: 20px; left: 22px; color: #fff; }
        .recommend-info h3 { font-size: 22px; }
        .recommend-info p { margin-top: 5px; color: #c6d4e9; font-size: 13px; }

        .channel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
        .channel {
            position: relative;
            padding: 25px 22px;
            border: 1px solid var(--line);
            border-radius: 15px;
            background: #fff;
            transition: .2s ease;
        }
        .channel:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
        .channel-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 12px; color: var(--blue); background: #edf3ff; font-size: 19px; font-weight: 900; }
        .channel p { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.7; }

        .split-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 52px; align-items: start; }
        .ranking { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
        .rank-row { display: grid; grid-template-columns: 44px 1fr 90px 58px; align-items: center; gap: 14px; padding: 15px 20px; border-bottom: 1px solid var(--line); }
        .rank-row:last-child { border-bottom: 0; }
        .rank-no { color: #9aabc2; font-size: 20px; font-weight: 900; }
        .rank-row:nth-child(-n+3) .rank-no { color: var(--blue); }
        .rank-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
        .rank-tag { justify-self: start; padding: 3px 7px; color: var(--blue); border-radius: 5px; background: #edf3ff; font-size: 11px; font-weight: 700; }
        .rank-hot { color: var(--muted); font-size: 12px; }
        .rank-score { color: #d88c22; font-weight: 800; font-size: 13px; }

        .quote-panel { padding: 33px; border-radius: var(--radius); color: #fff; background: #1a5c91; }
        .quote-panel .eyebrow { color: #98eff1; }
        .quote-panel h2 { margin: 18px 0; font-size: 30px; }
        .quote-panel p { color: #d8e8f4; font-size: 14px; }
        .quote-list { margin-top: 25px; }
        .quote-list li { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.16); color: #e5f0f7; list-style: none; font-size: 14px; }
        .quote-list li::before { content: "✓"; color: #8ee4ed; font-weight: 900; }

        .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .news-item { display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: .2s ease; }
        .news-item:hover { border-color: #bdd0f2; box-shadow: var(--shadow-sm); }
        .news-thumb { aspect-ratio: 1.25; overflow: hidden; border-radius: 9px; }
        .news-thumb img { height: 100%; }
        .news-item h3 { font-size: 15px; line-height: 1.45; }
        .news-item time { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; }

        .timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 15px; }
        .timeline-item { position: relative; padding: 24px 22px 8px; border-top: 2px solid #b8c9e1; }
        .timeline-item::before { content: ""; position: absolute; top: -8px; left: 22px; width: 13px; height: 13px; border: 3px solid var(--soft); border-radius: 50%; background: var(--blue); }
        .timeline-item strong { display: block; color: var(--blue); font-size: 14px; }
        .timeline-item h3 { margin: 9px 0; }
        .timeline-item p { color: var(--muted); font-size: 13px; }

        .faq-wrap { max-width: 860px; margin: 0 auto; }
        .faq-item { border-bottom: 1px solid var(--line); }
        .faq-item summary { display: flex; justify-content: space-between; gap: 25px; padding: 22px 0; cursor: pointer; font-weight: 800; list-style: none; }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item summary::after { content: "+"; color: var(--blue); font-size: 24px; font-weight: 400; line-height: 1; }
        .faq-item[open] summary::after { content: "−"; }
        .faq-answer { max-width: 760px; padding: 0 40px 23px 0; color: var(--muted); font-size: 14px; }

        .age-note { padding: 20px 23px; border: 1px solid #f1d7b4; border-radius: 13px; color: #76552b; background: #fff9ef; font-size: 13px; }
        .closing { padding: 88px 0; color: #fff; background: #10213f; text-align: center; }
        .closing h2 { max-width: 690px; margin: 14px auto 16px; }
        .closing p { max-width: 650px; margin: 0 auto; color: #bdcbe0; }
        .closing .btn { margin-top: 26px; }

        .site-footer { padding: 62px 0 25px; color: #b8c5d8; background: #0b1830; }
        .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
        .footer-brand { color: #fff; }
        .footer-brand p { max-width: 280px; margin-top: 17px; color: #91a1ba; font-size: 13px; }
        .footer-col h3 { margin-bottom: 15px; color: #fff; font-size: 14px; }
        .footer-col a { display: block; width: fit-content; margin: 8px 0; color: #a9b8ce; font-size: 13px; transition: .2s ease; }
        .footer-col a:hover { color: #8ee4ed; transform: translateX(3px); }
        .footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); color: #8191aa; font-size: 12px; }

        @media (max-width: 1024px) {
            .container { width: min(var(--max), calc(100% - 36px)); }
            .main-nav { gap: 0; }
            .main-nav a { padding: 8px 8px; }
            .nav-search { display: none; }
            .hero { min-height: 560px; }
            .rail { grid-template-columns: repeat(3, 1fr); }
            .rail .content-card:nth-child(4) { display: none; }
            .channel-grid { grid-template-columns: repeat(2, 1fr); }
            .news-grid { grid-template-columns: repeat(2, 1fr); }
            .feature-band, .split-layout { gap: 32px; }
        }

        @media (max-width: 768px) {
            .section { padding: 72px 0; }
            .nav-wrap { min-height: 68px; }
            .brand { min-width: 0; }
            .brand-name { font-size: 14px; }
            .nav-toggle { display: block; margin-left: auto; }
            .main-nav {
                position: absolute;
                top: 68px;
                right: 18px;
                left: 18px;
                display: none;
                flex-direction: column;
                align-items: stretch;
                padding: 10px;
                border: 1px solid var(--line);
                border-radius: 13px;
                background: #fff;
                box-shadow: var(--shadow);
            }
            .main-nav.open { display: flex; }
            .main-nav a { padding: 12px 14px; }
            .hero { min-height: 590px; }
            .hero::after { width: 85%; opacity: .45; }
            .hero-content { padding: 60px 0; }
            .metric-grid { grid-template-columns: repeat(2, 1fr); }
            .metric:nth-child(2) { border-right: 0; }
            .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
            .feature-band, .split-layout { grid-template-columns: 1fr; }
            .recommend-grid { grid-template-columns: repeat(2, 1fr); }
            .recommend-card:first-child { grid-column: span 2; }
            .recommend-card { min-height: 270px; }
            .timeline { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
            .footer-grid { grid-template-columns: repeat(2, 1fr); }
            .footer-brand { grid-column: span 2; }
        }

        @media (max-width: 520px) {
            .container { width: min(var(--max), calc(100% - 28px)); }
            h1 { font-size: 39px; }
            .hero-lead { font-size: 15px; }
            .section-head { display: block; }
            .section-head p { margin-top: 13px; }
            .metric { padding: 20px 16px; }
            .metric strong { font-size: 25px; }
            .rail, .news-grid, .channel-grid, .recommend-grid { grid-template-columns: 1fr; }
            .rail .content-card:nth-child(4) { display: block; }
            .recommend-card:first-child { grid-column: auto; }
            .recommend-card { min-height: 300px; }
            .feature-points { grid-template-columns: 1fr; }
            .rank-row { grid-template-columns: 32px 1fr 48px; gap: 8px; padding: 14px 12px; }
            .rank-tag { display: none; }
            .rank-hot { display: none; }
            .news-item { grid-template-columns: 104px 1fr; }
            .timeline { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 25px 18px; }
            .footer-brand { grid-column: span 2; }
            .footer-bottom { display: block; line-height: 1.8; }
            .footer-bottom span { display: block; margin-top: 6px; }
        }

/* roulang page: category1 */
:root{
 --ink:#172235;
 --muted:#718096;
 --soft:#f4f7fb;
 --paper:#fff;
 --line:#e5ebf3;
 --blue:#2764e7;
 --blue-dark:#1749b5;
 --cyan:#24b6c8;
 --navy:#10213f;
 --gold:#f0ad4e;
 --danger:#d95757;
 --radius:18px;
 --shadow:0 18px 46px rgba(30,55,92,.10);
 --shadow-sm:0 8px 22px rgba(30,55,92,.08);
 --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--paper);font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;object-fit:cover}
button,input{font:inherit}
button{cursor:pointer}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(36px,5vw,62px);line-height:1.18;letter-spacing:0;margin-bottom:20px}
h2{font-size:clamp(26px,3vw,38px);line-height:1.25;letter-spacing:0;margin-bottom:12px}
h3{line-height:1.35}
.container{width:min(var(--max),calc(100% - 48px));margin:0 auto}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--blue);font-size:13px;font-weight:800;letter-spacing:.08em}
.eyebrow:before{content:"";width:22px;height:3px;border-radius:3px;background:var(--cyan)}
.section{padding:92px 0}
.section-muted{background:var(--soft)}
.section-dark{background:var(--navy);color:#fff}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:34px}
.section-head p{max-width:600px;margin-bottom:0;color:var(--muted);font-size:15px}
.section-dark .section-head p{color:#b9c6db}
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(229,235,243,.9);backdrop-filter:blur(16px)}
.nav-wrap{min-height:76px;display:flex;align-items:center;gap:30px}
.brand{display:inline-flex;align-items:center;gap:11px;min-width:230px;font-weight:900}
.brand-mark{width:38px;height:38px;display:grid;place-items:center;color:#fff;border-radius:11px;background:var(--blue);box-shadow:0 8px 16px rgba(39,100,231,.25);font-size:19px}
.brand-name{font-size:16px;white-space:nowrap}
.main-nav{display:flex;align-items:center;gap:7px;margin-left:auto}
.main-nav a{padding:9px 12px;color:#526178;border-radius:9px;font-size:14px;font-weight:700;transition:.2s ease}
.main-nav a:hover,.main-nav a.active{color:var(--blue);background:#edf3ff}
.nav-search{display:flex;align-items:center;gap:7px;width:156px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--muted)}
.nav-search input{width:100%;border:0;outline:0;color:var(--ink);font-size:13px}
.nav-toggle{display:none;border:0;background:transparent;color:var(--ink);font-size:24px}
.page-hero{padding:86px 0 78px;background:linear-gradient(135deg,#f5f8ff 0%,#fff 62%);border-bottom:1px solid var(--line)}
.hero-layout{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:70px}
.page-hero h1{max-width:700px}
.page-hero h1 strong{color:var(--blue)}
.hero-copy{max-width:650px;color:var(--muted);font-size:17px;line-height:1.9}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border:1px solid transparent;border-radius:10px;font-size:14px;font-weight:800;transition:.2s ease}
.btn-primary{color:#fff;background:var(--blue);box-shadow:0 9px 18px rgba(39,100,231,.28)}
.btn-primary:hover{background:var(--blue-dark);transform:translateY(-2px)}
.btn-outline{color:var(--blue);border-color:#cbd9f5;background:#fff}
.btn-outline:hover{color:#fff;border-color:var(--blue);background:var(--blue)}
.quick-panel{padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}
.quick-panel h3{margin-bottom:18px;font-size:18px}
.quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.quick-link{padding:18px 16px;border:1px solid var(--line);border-radius:12px;background:#fbfcff;transition:.2s ease}
.quick-link:hover{border-color:#b7c9f2;box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.quick-link b{display:block;margin-bottom:4px;color:var(--blue);font-size:20px}
.quick-link span{color:var(--muted);font-size:13px}
.filter-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:30px;padding:15px 18px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm)}
.filter-tabs{display:flex;flex-wrap:wrap;gap:8px}
.filter-tabs a{padding:8px 13px;border-radius:8px;color:var(--muted);font-size:13px;font-weight:700}
.filter-tabs a:hover,.filter-tabs a.active{color:var(--blue);background:#edf3ff}
.filter-note{color:var(--muted);font-size:13px;white-space:nowrap}
.media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.media-card{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm);transition:.25s ease}
.media-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.media-image{position:relative;aspect-ratio:16/10;overflow:hidden;background:#dfe7f3}
.media-image img{height:100%;transition:.35s ease}
.media-card:hover .media-image img{transform:scale(1.05)}
.media-image:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(10,25,52,.58))}
.badge{position:absolute;z-index:1;top:12px;left:12px;padding:4px 8px;border-radius:6px;color:#fff;background:var(--blue);font-size:11px;font-weight:800}
.badge.gold{background:var(--gold);color:#422b08}
.card-body{padding:16px 17px 18px}
.card-body h3{margin-bottom:8px;font-size:16px}
.card-meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px}
.rating{color:#d8891c;font-weight:800}
.matrix{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.matrix-item{padding:24px;border-top:3px solid var(--blue);background:#fff;border-radius:12px;box-shadow:var(--shadow-sm)}
.matrix-item:nth-child(2){border-color:var(--cyan)}
.matrix-item:nth-child(3){border-color:var(--gold)}
.matrix-item:nth-child(4){border-color:#8196bd}
.matrix-item h3{margin:0 0 8px;font-size:18px}
.matrix-item p{margin:0;color:var(--muted);font-size:14px}
.compare-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:start}
.compare-list{display:grid;gap:13px}
.compare-row{display:grid;grid-template-columns:1fr 90px 90px;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line);background:#fff}
.compare-row strong{font-size:14px}
.compare-row span{color:var(--muted);font-size:13px}
.compare-row .good{color:var(--blue);font-weight:800}
.milestones{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.milestone{position:relative;padding:25px;border-left:3px solid var(--cyan);background:#fff;box-shadow:var(--shadow-sm)}
.milestone b{display:block;color:var(--blue);font-size:28px;line-height:1;margin-bottom:12px}
.milestone h3{margin-bottom:7px}
.milestone p{margin:0;color:var(--muted);font-size:14px}
.news-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
.news-feature{display:grid;grid-template-columns:42% 1fr;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm)}
.news-feature img{height:100%;min-height:210px}
.news-copy{padding:26px}
.news-copy h3{margin:10px 0;font-size:22px}
.news-copy p{color:var(--muted);font-size:14px}
.news-list{display:grid;gap:12px}
.news-item{display:flex;gap:14px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff}
.news-item img{width:94px;height:70px;border-radius:8px}
.news-item h3{margin:0 0 5px;font-size:14px}
.news-item time{color:var(--muted);font-size:12px}
.guarantee{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.guarantee-item{display:flex;gap:17px;padding:24px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.06)}
.guarantee-icon{width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;border-radius:11px;color:#fff;background:var(--blue);font-weight:900}
.guarantee-item h3{margin:0 0 5px;font-size:17px}
.guarantee-item p{margin:0;color:#b9c6db;font-size:14px}
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.faq-item{padding:22px 24px;border:1px solid var(--line);border-radius:12px;background:#fff}
.faq-item h3{margin:0 0 8px;font-size:16px}
.faq-item p{margin:0;color:var(--muted);font-size:14px}
.cta-band{padding:56px 0;background:#edf3ff}
.cta-wrap{display:flex;align-items:center;justify-content:space-between;gap:30px}
.cta-wrap p{max-width:640px;margin:0;color:var(--muted)}
.site-footer{padding:64px 0 22px;color:#c6d1e2;background:var(--navy)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:42px}
.footer-brand .brand{color:#fff;margin-bottom:16px}
.footer-brand p{max-width:300px;color:#9eafc8;font-size:14px}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col h3{margin:0 0 7px;color:#fff;font-size:15px}
.footer-col a{color:#aebbd0;font-size:14px;transition:.2s ease}
.footer-col a:hover{color:#8ee4ed}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);color:#8fa1bd;font-size:12px}
:focus-visible{outline:3px solid rgba(36,182,200,.45);outline-offset:3px}
@media(max-width:1024px){
 .nav-wrap{gap:15px}.brand{min-width:auto}.brand-name{font-size:14px}
 .main-nav a{padding:8px 7px;font-size:13px}.nav-search{width:130px}
 .hero-layout{gap:35px}.media-grid{grid-template-columns:repeat(3,1fr)}
 .matrix{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
 .container{width:min(var(--max),calc(100% - 32px))}
 .nav-wrap{min-height:68px;position:relative}.nav-toggle{display:block;margin-left:auto}
 .main-nav{display:none;position:absolute;left:0;right:0;top:68px;padding:12px;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);flex-direction:column;align-items:stretch}
 .main-nav.open{display:flex}.main-nav a{text-align:center}.nav-search{display:none}
 .page-hero{padding:64px 0}.hero-layout,.compare-layout,.news-layout{grid-template-columns:1fr}
 .quick-panel{margin-top:8px}.section{padding:68px 0}
 .section-head{display:block}.section-head p{margin-top:12px}
 .media-grid{grid-template-columns:repeat(2,1fr)}.milestones{grid-template-columns:1fr}
 .guarantee,.faq-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:repeat(2,1fr)}
 .cta-wrap{display:block}.cta-wrap .btn{margin-top:20px}
}
@media(max-width:520px){
 h1{font-size:36px}.brand-name{font-size:13px}.brand-mark{width:34px;height:34px}
 .filter-bar{display:block}.filter-note{display:block;margin-top:12px}
 .media-grid,.matrix{grid-template-columns:1fr}.news-feature{display:block}.news-feature img{height:190px}
 .compare-row{grid-template-columns:1fr 70px 70px;padding:14px 10px}
 .footer-grid{grid-template-columns:1fr;gap:28px}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:7px}
}