/* roulang page: index */
:root {
            --navy: #102a43;
            --blue: #2367d1;
            --blue-dark: #174da3;
            --cyan: #20a6b8;
            --ink: #172b4d;
            --muted: #6b7c93;
            --soft: #edf4fb;
            --paper: #ffffff;
            --line: #d9e4ef;
            --gold: #f0a735;
            --green: #3a9d76;
            --radius: 14px;
            --radius-sm: 9px;
            --shadow: 0 14px 38px rgba(24, 58, 94, .10);
            --shadow-hover: 0 18px 42px rgba(24, 79, 141, .18);
            --container: 1180px;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body {
            font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
            color: var(--ink);
            background: #f7fafd;
            line-height: 1.75;
            font-size: 15px;
        }
        img { display: block; width: 100%; object-fit: cover; }
        a { color: inherit; text-decoration: none; }
        button, input { font: inherit; }
        button { cursor: pointer; border: 0; }
        :focus-visible { outline: 3px solid rgba(32, 166, 184, .42); outline-offset: 3px; }
        .container { width: min(var(--container), calc(100% - 40px)); margin: 0 auto; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--blue);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
        }
        .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--cyan); }
        .section-head {
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 24px;
            margin-bottom: 28px;
        }
        .section-head h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.25; letter-spacing: 0; }
        .section-head p { max-width: 610px; color: var(--muted); font-size: 14px; }
        .section { padding: 82px 0; }
        .section-alt { background: #edf5fb; border-top: 1px solid #e1ebf4; border-bottom: 1px solid #e1ebf4; }
        .section-dark { background: var(--navy); color: #fff; }
        .section-dark .section-head p { color: #bdccdc; }
        .section-dark .eyebrow { color: #76d7df; }
        .section-dark .eyebrow::before { background: #76d7df; }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 20;
            background: rgba(255,255,255,.94);
            border-bottom: 1px solid rgba(217,228,239,.85);
            backdrop-filter: blur(14px);
        }
        .nav-wrap { min-height: 76px; display: flex; align-items: center; gap: 34px; }
        .brand { display: inline-flex; align-items: center; gap: 11px; min-width: 250px; }
        .brand-mark {
            width: 38px; height: 38px; border-radius: 10px;
            background: var(--blue); color: #fff; display: grid; place-items: center;
            font-size: 19px; font-weight: 900; box-shadow: 0 7px 17px rgba(35,103,209,.25);
        }
        .brand strong { font-size: 16px; white-space: nowrap; }
        .brand small { display: block; color: var(--muted); font-size: 11px; line-height: 1.3; }
        .nav-list { list-style: none; display: flex; align-items: center; gap: 5px; margin-left: auto; }
        .nav-list a {
            padding: 9px 12px; border-radius: 8px; color: #53677f; font-size: 13px; transition: .2s ease;
        }
        .nav-list a:hover, .nav-list a.active { color: var(--blue); background: #edf4ff; }
        .nav-cta {
            padding: 10px 16px !important; color: #fff !important; background: var(--blue);
            box-shadow: 0 7px 15px rgba(35,103,209,.20);
        }
        .nav-cta:hover { background: var(--blue-dark) !important; transform: translateY(-1px); }
        .menu-toggle { display: none; background: transparent; color: var(--navy); font-size: 24px; }

        .hero {
            position: relative;
            overflow: hidden;
            padding: 78px 0 88px;
            background:
                linear-gradient(90deg, rgba(11,39,67,.93) 0%, rgba(11,39,67,.78) 48%, rgba(11,39,67,.35) 100%),
                url("https://images.unsplash.com/photo-1528360983277-13d401cdc186?auto=format&fit=crop&w=1800&q=88") center/cover;
            color: #fff;
        }
        .hero::after { content:""; position:absolute; inset:auto 0 0; height:5px; background: var(--cyan); }
        .hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; }
        .hero-copy { max-width: 700px; }
        .hero-badge {
            display: inline-flex; padding: 7px 12px; border: 1px solid rgba(255,255,255,.3);
            border-radius: 4px; background: rgba(255,255,255,.12); font-size: 12px; color: #d9f6fa;
        }
        .hero h1 { margin: 20px 0 16px; max-width: 680px; font-size: clamp(34px, 5vw, 58px); line-height: 1.15; letter-spacing: 0; }
        .hero h1 em { color: #67e1df; font-style: normal; }
        .hero-lead { max-width: 670px; color: #d7e5ef; font-size: 16px; 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: 44px; padding: 11px 19px; border-radius: 8px; font-weight: 700;
            transition: .22s ease; border: 1px solid transparent;
        }
        .btn-primary { color: #fff; background: var(--blue); box-shadow: 0 10px 22px rgba(8,35,76,.27); }
        .btn-primary:hover { background: #3981e8; transform: translateY(-2px); }
        .btn-light { color: var(--navy); background: #fff; }
        .btn-light:hover { background: #dcf7f7; transform: translateY(-2px); }
        .hero-notes { display: flex; gap: 25px; margin-top: 32px; padding-top: 19px; border-top: 1px solid rgba(255,255,255,.22); }
        .hero-notes strong { display: block; font-size: 21px; color: #fff; }
        .hero-notes span { display: block; color: #b9cddd; font-size: 12px; }
        .hero-panel { position: relative; min-height: 300px; }
        .signal-board {
            padding: 26px; border: 1px solid rgba(255,255,255,.23); background: rgba(255,255,255,.12);
            backdrop-filter: blur(12px); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.18);
        }
        .signal-board h3 { font-size: 18px; margin-bottom: 20px; }
        .signal-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
        .signal-row:last-child { border-bottom: 0; }
        .signal-row span { color: #cae1ec; font-size: 13px; }
        .signal-row b { color: #79e2df; font-size: 20px; }

        .search-band { padding: 26px 0; background: #fff; border-bottom: 1px solid var(--line); }
        .search-line { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
        .search-line h2 { font-size: 20px; }
        .search-form { display: flex; width: min(520px, 100%); }
        .search-form input {
            width: 100%; border: 1px solid var(--line); border-right: 0; padding: 12px 15px;
            border-radius: 8px 0 0 8px; background: #f8fbfe; color: var(--ink);
        }
        .search-form button { padding: 0 20px; color: #fff; background: var(--blue); border-radius: 0 8px 8px 0; }
        .search-form button:hover { background: var(--blue-dark); }

        .coupon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
        .coupon {
            display: flex; justify-content: space-between; align-items: center; gap: 15px;
            padding: 20px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--cyan);
            border-radius: var(--radius-sm); box-shadow: 0 8px 22px rgba(30,74,109,.06);
        }
        .coupon strong { display: block; font-size: 24px; color: var(--blue); }
        .coupon span { color: var(--muted); font-size: 12px; }
        .coupon a { flex: 0 0 auto; color: var(--blue); font-size: 13px; font-weight: 700; }

        .category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
        .category-card {
            padding: 24px 22px; min-height: 190px; background: #fff; border: 1px solid var(--line);
            border-radius: var(--radius); box-shadow: var(--shadow); transition: .22s ease;
        }
        .category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: #aed0f0; }
        .category-icon { color: var(--blue); font-size: 24px; font-weight: 900; }
        .category-card h3 { margin: 15px 0 9px; font-size: 18px; }
        .category-card p { color: var(--muted); font-size: 13px; line-height: 1.75; }

        .content-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .content-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: .22s ease; }
        .content-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
        .poster { position: relative; aspect-ratio: 16/10; overflow: hidden; }
        .poster img { height: 100%; transition: .35s ease; }
        .content-card:hover .poster img { transform: scale(1.05); }
        .poster::after { content:""; position:absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(13,39,67,.48)); }
        .badge { position: absolute; z-index: 1; top: 11px; left: 11px; padding: 3px 8px; background: #fff; border-radius: 4px; color: var(--blue); font-size: 11px; font-weight: 800; }
        .card-body { padding: 16px; }
        .card-body h3 { font-size: 16px; margin-bottom: 8px; }
        .card-body p { color: var(--muted); font-size: 12px; line-height: 1.65; min-height: 40px; }
        .meta { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-top: 13px; padding-top: 12px; border-top: 1px solid #edf1f5; color: var(--muted); font-size: 12px; }
        .rating { color: var(--gold); font-weight: 800; }

        .feature-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; }
        .feature-main { position: relative; min-height: 330px; border-radius: var(--radius); overflow: hidden; color: #fff; background: #173e64; }
        .feature-main img { height: 100%; position: absolute; inset: 0; opacity: .72; }
        .feature-main::after { content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(9,28,48,.92), transparent 75%); }
        .feature-text { position: relative; z-index: 1; display: flex; height: 100%; min-height: 330px; flex-direction: column; justify-content: end; padding: 28px; }
        .feature-text h3 { font-size: 26px; margin: 10px 0; }
        .feature-text p { color: #d6e4ee; max-width: 560px; font-size: 13px; }
        .feature-side { display: grid; gap: 16px; }
        .mini-feature { display: flex; gap: 15px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); }
        .mini-feature img { width: 105px; height: 86px; border-radius: 7px; flex: 0 0 auto; }
        .mini-feature h3 { font-size: 15px; line-height: 1.45; margin-bottom: 5px; }
        .mini-feature p { color: var(--muted); font-size: 12px; line-height: 1.6; }

        .rank-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 45px; }
        .rank-item { display: grid; grid-template-columns: 37px 1fr auto; align-items: center; gap: 13px; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.13); }
        .rank-number { color: #72d9df; font-size: 21px; font-weight: 900; }
        .rank-item h3 { font-size: 15px; }
        .rank-item small { color: #adbed0; }
        .rank-score { text-align: right; color: #ffd078; font-weight: 800; }

        .news-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; }
        .news-lead { display: grid; grid-template-columns: 1fr 1fr; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
        .news-lead img { height: 100%; min-height: 260px; }
        .news-lead-body { padding: 26px; }
        .news-lead-body h3 { font-size: 22px; line-height: 1.4; margin: 12px 0; }
        .news-lead-body p { color: var(--muted); font-size: 13px; }
        .news-list { display: grid; gap: 12px; }
        .news-item { display: grid; grid-template-columns: 88px 1fr; gap: 13px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 9px; }
        .news-item img { width: 88px; height: 70px; border-radius: 6px; }
        .news-item h3 { font-size: 14px; line-height: 1.5; }
        .news-item time { display: block; color: var(--muted); font-size: 11px; margin-top: 5px; }

        .timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid #bfe1ea; }
        .timeline-item { position: relative; padding: 28px 20px 0 0; }
        .timeline-item::before { content:""; position:absolute; top:-8px; left:0; width:14px; height:14px; background:var(--cyan); border:3px solid #fff; border-radius:50%; box-shadow:0 0 0 2px #bfe1ea; }
        .timeline-item h3 { margin: 13px 0 7px; font-size: 16px; }
        .timeline-item p { color: var(--muted); font-size: 13px; }

        .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
        .trust-card { padding: 23px; background: #fff; border:1px solid var(--line); border-radius: var(--radius-sm); }
        .trust-card strong { display:block; color: var(--blue); font-size: 14px; margin-bottom: 7px; }
        .trust-card p { color: var(--muted); font-size: 13px; }

        .faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
        .faq-item { padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); }
        .faq-item h3 { font-size: 16px; margin-bottom: 8px; }
        .faq-item p { color: var(--muted); font-size: 13px; line-height: 1.8; }

        .closing { padding: 62px 0; background: #dff3f4; }
        .closing-inner { display:flex; justify-content:space-between; align-items:center; gap:25px; }
        .closing h2 { font-size: 28px; margin-bottom: 8px; }
        .closing p { color: #567180; max-width: 650px; }

        .site-footer { background: #0c2137; color: #c2d2df; padding: 54px 0 24px; }
        .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 35px; padding-bottom: 40px; }
        .footer-brand strong { display:block; color:#fff; font-size:16px; margin: 10px 0; }
        .footer-brand p { color:#9eb2c2; font-size:13px; max-width:280px; line-height:1.8; }
        .footer-col h3 { color:#fff; font-size:14px; margin-bottom:14px; }
        .footer-col a { display:block; color:#9eb2c2; font-size:13px; margin:8px 0; transition:.2s; }
        .footer-col a:hover { color:#75e0df; }
        .copyright { display:flex; justify-content:space-between; gap:15px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); color:#839bad; font-size:12px; }

        @media (max-width: 1024px) {
            .hero-grid, .feature-layout, .news-layout { grid-template-columns: 1fr; gap: 32px; }
            .hero-panel { max-width: 580px; }
            .content-grid { grid-template-columns: repeat(3, 1fr); }
            .category-grid { grid-template-columns: repeat(2, 1fr); }
            .footer-grid { grid-template-columns: 1.2fr repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            .container { width: min(100% - 30px, var(--container)); }
            .nav-wrap { min-height: 68px; }
            .brand { min-width: 0; }
            .brand strong { font-size: 14px; }
            .menu-toggle { display: block; margin-left: auto; }
            .nav-list { display:none; position:absolute; left:15px; right:15px; top:66px; padding:10px; flex-direction:column; align-items:stretch; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); }
            .nav-list.open { display:flex; }
            .nav-list a { display:block; }
            .hero { padding: 62px 0 70px; }
            .hero h1 { font-size: 40px; }
            .search-line, .section-head, .closing-inner { align-items: flex-start; flex-direction: column; }
            .search-form { width: 100%; }
            .content-grid { grid-template-columns: repeat(2, 1fr); }
            .coupon-grid, .trust-grid { grid-template-columns: 1fr; }
            .rank-layout { grid-template-columns: 1fr; }
            .timeline { grid-template-columns: repeat(2, 1fr); gap: 20px; border-top: 0; }
            .timeline-item { padding-top: 20px; border-top: 2px solid #bfe1ea; }
            .news-lead { grid-template-columns: 1fr; }
            .news-lead img { min-height: 220px; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 520px) {
            body { font-size: 14px; }
            .section { padding: 58px 0; }
            .hero h1 { font-size: 34px; }
            .hero-notes { gap: 15px; flex-wrap: wrap; }
            .content-grid, .category-grid, .faq-grid { grid-template-columns: 1fr; }
            .coupon { align-items: flex-start; }
            .feature-text { min-height: 290px; padding: 21px; }
            .feature-main { min-height: 290px; }
            .timeline { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr; gap: 25px; }
            .copyright { flex-direction: column; }
        }

/* roulang page: category1 */
:root{
 --navy:#102a43;
 --blue:#2367d1;
 --blue-dark:#174da3;
 --cyan:#20a6b8;
 --ink:#172b4d;
 --muted:#6b7c93;
 --soft:#edf4fb;
 --paper:#fff;
 --line:#d9e4ef;
 --gold:#f0a735;
 --green:#3a9d76;
 --red:#d86767;
 --radius:14px;
 --radius-sm:9px;
 --shadow:0 14px 38px rgba(24,58,94,.10);
 --shadow-hover:0 18px 42px rgba(24,79,141,.18);
 --container:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:#f7fafd;font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;font-size:15px;line-height:1.75}
img{display:block;width:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer;border:0}
.container{width:min(var(--container),calc(100% - 40px));margin:0 auto}
.site-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.95);border-bottom:1px solid rgba(217,228,239,.85);backdrop-filter:blur(14px)}
.nav-wrap{min-height:76px;display:flex;align-items:center;gap:32px}
.brand{display:inline-flex;align-items:center;gap:11px;min-width:250px}
.brand-mark{width:38px;height:38px;border-radius:10px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:19px;font-weight:900;box-shadow:0 7px 17px rgba(35,103,209,.25)}
.brand strong{font-size:16px;white-space:nowrap}
.brand small{display:block;color:var(--muted);font-size:11px;line-height:1.3}
.nav-list{list-style:none;display:flex;align-items:center;gap:5px;margin:0 0 0 auto;padding:0}
.nav-list a{display:block;padding:9px 12px;border-radius:8px;color:#53677f;font-size:13px;transition:.2s ease}
.nav-list a:hover,.nav-list a.active{color:var(--blue);background:#edf4ff}
.nav-list .nav-cta{padding:10px 16px;color:#fff;background:var(--blue);box-shadow:0 7px 15px rgba(35,103,209,.2)}
.nav-list .nav-cta:hover{color:#fff;background:var(--blue-dark);transform:translateY(-1px)}
.menu-toggle{display:none;background:transparent;color:var(--navy);font-size:24px}
.hero{position:relative;overflow:hidden;padding:78px 0 86px;background:linear-gradient(90deg,rgba(11,39,67,.94),rgba(11,39,67,.76)),url("https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?auto=format&fit=crop&w=1800&q=88") center/cover;color:#fff}
.hero:after{content:"";position:absolute;inset:auto 0 0;height:5px;background:var(--cyan)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:center}
.hero-copy{max-width:680px}
.hero-badge{display:inline-flex;padding:7px 12px;border:1px solid rgba(255,255,255,.3);border-radius:4px;background:rgba(255,255,255,.12);font-size:12px;color:#d9f6fa}
.hero h1{margin:20px 0 16px;font-size:clamp(34px,5vw,58px);line-height:1.15;font-weight:900}
.hero h1 em{font-style:normal;color:#67e1df}
.hero-lead{max-width:670px;color:#d7e5ef;font-size:16px;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:44px;padding:11px 19px;border-radius:8px;font-weight:700;transition:.22s ease;border:1px solid transparent}
.btn:focus,.nav-list a:focus,.faq-question:focus{outline:3px solid rgba(32,166,184,.35);outline-offset:3px}
.btn-primary{color:#fff;background:var(--blue);box-shadow:0 10px 22px rgba(8,35,76,.27)}
.btn-primary:hover{background:#3981e8;transform:translateY(-2px)}
.btn-light{color:var(--navy);background:#fff}
.btn-light:hover{background:#dcf7f7;transform:translateY(-2px)}
.hero-notes{display:flex;gap:28px;margin-top:32px;padding-top:19px;border-top:1px solid rgba(255,255,255,.22)}
.hero-notes strong{display:block;font-size:21px;color:#fff}
.hero-notes span{display:block;color:#b9cddd;font-size:12px}
.hero-panel{padding:25px 28px;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius);background:rgba(10,32,55,.72);box-shadow:0 20px 48px rgba(0,0,0,.18)}
.panel-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.panel-top strong{font-size:17px}
.panel-top span{color:#79e2df;font-size:12px}
.signal-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.signal-row:last-child{border-bottom:0}
.signal-row span{color:#cae1ec;font-size:13px}
.signal-row b{color:#79e2df;font-size:20px}
.section{padding:80px 0}
.section-alt{background:#edf5fb;border-top:1px solid #e1ebf4;border-bottom:1px solid #e1ebf4}
.section-dark{background:var(--navy);color:#fff}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--blue);font-size:12px;font-weight:800;letter-spacing:.08em}
.eyebrow:before{content:"";width:22px;height:2px;background:var(--cyan)}
.section-head h2{margin:8px 0 0;font-size:clamp(24px,3vw,34px);line-height:1.25}
.section-head p{max-width:610px;margin:0;color:var(--muted);font-size:14px}
.section-dark .eyebrow{color:#76d7df}
.section-dark .eyebrow:before{background:#76d7df}
.section-dark .section-head p{color:#bdccdc}
.metric-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);box-shadow:var(--shadow)}
.metric{padding:25px 24px;background:#fff}
.metric strong{display:block;color:var(--blue);font-size:31px;line-height:1.1}
.metric span{display:block;margin-top:7px;color:var(--muted);font-size:13px}
.channel-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:44px;align-items:start}
.channel-intro{padding:28px;background:var(--navy);color:#fff;border-radius:var(--radius);box-shadow:var(--shadow)}
.channel-intro h3{margin:0 0 12px;font-size:24px}
.channel-intro p{margin:0;color:#c5d5e4;font-size:14px}
.channel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.channel-card{padding:22px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;transition:.22s ease}
.channel-card:hover{border-color:#a9c8ef;box-shadow:var(--shadow-hover);transform:translateY(-3px)}
.channel-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;background:#e9f2ff;color:var(--blue);font-weight:900}
.channel-card h3{margin:15px 0 7px;font-size:17px}
.channel-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}
.channel-meta{display:flex;gap:8px;margin-top:14px;color:var(--blue);font-size:12px;font-weight:700}
.content-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.content-card{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:0 8px 24px rgba(24,58,94,.06);transition:.22s ease}
.content-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.content-card img{height:168px}
.content-body{padding:18px}
.tag{display:inline-flex;padding:4px 9px;border-radius:5px;background:#eaf3ff;color:var(--blue);font-size:11px;font-weight:800}
.content-card h3{margin:10px 0 7px;font-size:17px;line-height:1.45}
.content-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}
.card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:15px;padding-top:13px;border-top:1px solid #edf1f5;color:var(--muted);font-size:12px}
.card-foot b{color:var(--gold)}
.editorial{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:stretch}
.editorial-main{min-height:310px;padding:34px;border-radius:var(--radius);background:linear-gradient(135deg,#e4f5f5,#f4f8ff);border:1px solid #d7e8ef}
.editorial-main h3{max-width:560px;margin:14px 0;font-size:27px;line-height:1.35}
.editorial-main p{max-width:580px;color:var(--muted)}
.editorial-list{display:grid;gap:12px}
.editorial-item{display:flex;gap:15px;padding:17px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);transition:.2s}
.editorial-item:hover{border-color:#a9c8ef;box-shadow:var(--shadow)}
.editorial-item b{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:#e8f4f4;color:var(--cyan);font-size:13px}
.editorial-item h4{margin:0 0 4px;font-size:15px}
.editorial-item p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}
.rank-layout{display:grid;grid-template-columns:1fr .8fr;gap:36px}
.rank-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.rank-item{display:grid;grid-template-columns:44px 1fr auto auto;align-items:center;gap:15px;padding:15px 20px;border-bottom:1px solid #edf1f5}
.rank-item:last-child{border-bottom:0}
.rank-no{font-size:20px;font-weight:900;color:#c3d0dd}
.rank-item:first-child .rank-no,.rank-item:nth-child(2) .rank-no,.rank-item:nth-child(3) .rank-no{color:var(--blue)}
.rank-name{font-weight:700}
.rank-name small{display:block;color:var(--muted);font-size:11px;font-weight:400}
.rank-hot{color:var(--red);font-size:12px}
.rank-score{color:var(--gold);font-weight:800;font-size:13px}
.quote-panel{padding:34px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.quote-panel .quote-mark{color:var(--cyan);font-size:40px;line-height:1}
.quote-panel p{font-size:18px;line-height:1.7;margin:12px 0 24px}
.quote-panel span{color:var(--muted);font-size:13px}
.faq-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:19px 21px}
.faq-question{display:flex;justify-content:space-between;gap:18px;color:var(--ink);font-weight:800}
.faq-question:after{content:"+";color:var(--blue);font-size:20px;line-height:1}
.faq-item p{margin:10px 0 0;color:var(--muted);font-size:13px;line-height:1.75}
.cta-band{padding:45px 0;background:#e7f5f5;border-top:1px solid #d4e8e8}
.cta-wrap{display:flex;align-items:center;justify-content:space-between;gap:28px}
.cta-wrap h2{margin:0 0 8px;font-size:27px}
.cta-wrap p{margin:0;color:var(--muted)}
.site-footer{padding:56px 0 22px;background:#0d243b;color:#d9e5ef}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:34px;padding-bottom:42px}
.footer-brand strong{font-size:16px}
.footer-brand .brand-mark{display:inline-grid;vertical-align:middle;margin-right:8px}
.footer-brand p{max-width:330px;margin:17px 0 0;color:#a9bdce;font-size:13px;line-height:1.8}
.footer-col{display:flex;flex-direction:column;gap:9px}
.footer-col h3{margin:0 0 8px;color:#fff;font-size:14px}
.footer-col a{color:#a9bdce;font-size:13px;transition:.2s}
.footer-col a:hover{color:#76d7df}
.copyright{display:flex;justify-content:space-between;gap:20px;padding-top:19px;border-top:1px solid rgba(255,255,255,.13);color:#8299ad;font-size:12px}
@media(max-width:1024px){
 .nav-wrap{gap:18px}.brand{min-width:220px}.nav-list a{padding:8px 8px;font-size:12px}
 .hero-grid{gap:35px}.channel-layout,.rank-layout{grid-template-columns:1fr}.quote-panel{min-height:auto}
}
@media(max-width:768px){
 .container{width:min(var(--container),calc(100% - 30px))}
 .nav-wrap{min-height:68px}.brand{min-width:0}.brand strong{font-size:14px}.brand small{display:none}
 .menu-toggle{display:block;margin-left:auto}.nav-list{display:none;position:absolute;top:68px;left:0;right:0;padding:12px 15px;flex-direction:column;align-items:stretch;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
 .nav-list.open{display:flex}.nav-list a{padding:12px 14px}.nav-list .nav-cta{text-align:center;margin-top:4px}
 .hero{padding:60px 0 65px}.hero-grid{grid-template-columns:1fr}.hero-panel{margin-top:5px}.hero h1{font-size:42px}
 .section{padding:62px 0}.section-head{display:block}.section-head p{margin-top:12px}
 .metric-strip{grid-template-columns:repeat(2,1fr)}.content-grid{grid-template-columns:repeat(2,1fr)}
 .editorial{grid-template-columns:1fr}.faq-list{grid-template-columns:1fr}.footer-grid{grid-template-columns:1.4fr 1fr 1fr}
 .cta-wrap{display:block}.cta-wrap .btn{margin-top:22px}
}
@media(max-width:520px){
 .hero h1{font-size:35px}.hero-lead{font-size:14px}.hero-actions .btn{width:100%}.hero-notes{gap:16px}
 .metric{padding:20px 15px}.metric strong{font-size:25px}.channel-grid,.content-grid{grid-template-columns:1fr}
 .content-card img{height:200px}.rank-item{grid-template-columns:32px 1fr auto;gap:10px;padding:14px}.rank-hot{display:none}
 .footer-grid{grid-template-columns:1fr 1fr;gap:26px}.footer-brand{grid-column:1/-1}.copyright{display:block}.copyright span{display:block;margin-top:6px}
}