/* roulang page: index */
:root {
            --navy: #102a43;
            --navy-deep: #081c2d;
            --blue: #2377c9;
            --cyan: #2aa7b8;
            --sky: #eaf5fb;
            --ink: #17324d;
            --muted: #6c8092;
            --line: #dce8ef;
            --paper: #ffffff;
            --soft: #f5f9fb;
            --gold: #f2b84b;
            --red: #d85d69;
            --radius: 16px;
            --shadow: 0 16px 42px rgba(18, 60, 92, .10);
            --shadow-sm: 0 8px 24px rgba(18, 60, 92, .08);
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body {
            background: var(--soft);
            color: var(--ink);
            font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
            line-height: 1.75;
            font-size: 15px;
        }
        a { color: inherit; text-decoration: none; }
        img { display: block; width: 100%; object-fit: cover; }
        button, input { font: inherit; }
        button { border: 0; cursor: pointer; }
        :focus-visible { outline: 3px solid rgba(42, 167, 184, .45); outline-offset: 3px; }
        .container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
        .topline { height: 4px; background: linear-gradient(90deg, var(--navy), var(--blue), var(--cyan)); }
        header {
            position: sticky;
            top: 0;
            z-index: 20;
            background: rgba(255,255,255,.94);
            border-bottom: 1px solid rgba(220,232,239,.9);
            backdrop-filter: blur(16px);
        }
        .nav {
            min-height: 76px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 28px;
        }
        .brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
        .brand-mark {
            width: 42px; height: 42px; border-radius: 12px;
            display: grid; place-items: center;
            color: #fff; font-weight: 800; font-size: 18px;
            background: var(--navy);
            box-shadow: 0 8px 16px rgba(16,42,67,.2);
        }
        .brand-text { font-size: 18px; font-weight: 800; color: var(--navy); white-space: nowrap; }
        .brand-text small { display: block; color: var(--muted); font-size: 10px; letter-spacing: 1px; font-weight: 600; line-height: 1.2; }
        .nav-links { display: flex; align-items: center; gap: 28px; }
        .nav-links a { color: var(--muted); font-weight: 650; transition: color .2s ease; }
        .nav-links a:hover, .nav-links a.active { color: var(--blue); }
        .nav-guard {
            display: inline-flex; align-items: center; gap: 7px;
            padding: 9px 14px; color: var(--navy); background: var(--sky);
            border: 1px solid #cfe5ef; border-radius: 10px; font-size: 13px; font-weight: 700;
        }
        .hero {
            position: relative; overflow: hidden;
            padding: 76px 0 68px;
            background:
                linear-gradient(90deg, rgba(8,28,45,.96) 0%, rgba(8,28,45,.82) 48%, rgba(8,28,45,.28) 100%),
                url("https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?auto=format&fit=crop&w=1800&q=88") center/cover;
            color: #fff;
        }
        .hero-content { max-width: 680px; }
        .eyebrow, .section-kicker {
            color: var(--cyan); text-transform: uppercase; letter-spacing: 2px;
            font-size: 12px; font-weight: 800;
        }
        .hero h1 { margin-top: 14px; font-size: clamp(34px, 5vw, 64px); line-height: 1.14; letter-spacing: 0; }
        .hero h1 em { color: #63d3d4; font-style: normal; }
        .hero-lead { margin-top: 20px; max-width: 650px; color: rgba(255,255,255,.84); font-size: 17px; line-height: 1.9; }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; }
        .btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            min-height: 48px; padding: 0 21px; border-radius: 10px;
            font-weight: 800; transition: transform .2s, box-shadow .2s, background .2s;
        }
        .btn:hover { transform: translateY(-2px); }
        .btn-primary { color: var(--navy); background: #72d8d3; box-shadow: 0 10px 24px rgba(0,0,0,.18); }
        .btn-primary:hover { background: #92e7df; }
        .btn-light { color: #fff; border: 1px solid rgba(255,255,255,.34); background: rgba(255,255,255,.08); }
        .btn-light:hover { background: rgba(255,255,255,.16); }
        .hero-note { margin-top: 27px; color: rgba(255,255,255,.62); font-size: 13px; }
        section { padding: 76px 0; }
        .section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
        .section-head h2 { margin-top: 6px; color: var(--navy); font-size: clamp(25px, 3vw, 35px); line-height: 1.25; }
        .section-head p { max-width: 620px; color: var(--muted); }
        .text-link { color: var(--blue); font-weight: 800; white-space: nowrap; }
        .text-link:hover { color: var(--cyan); }
        .value-band { background: var(--paper); border-bottom: 1px solid var(--line); }
        .value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .value-item { padding: 25px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
        .value-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--blue); font-weight: 800; }
        .value-item h3 { margin: 17px 0 8px; color: var(--navy); font-size: 19px; }
        .value-item p, .feature p, .category p, .trust-copy { color: var(--muted); }
        .feature-stage { background: var(--sky); }
        .feature-layout { display: grid; grid-template-columns: 1.08fr .92fr; gap: 42px; align-items: center; }
        .feature-image { min-height: 420px; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
        .feature-image img { height: 100%; }
        .feature-copy h2 { margin: 8px 0 16px; color: var(--navy); font-size: 36px; line-height: 1.3; }
        .feature-copy > p { color: var(--muted); font-size: 16px; }
        .feature-list { margin-top: 22px; display: grid; gap: 13px; }
        .feature-list li { list-style: none; padding-left: 30px; position: relative; color: var(--ink); }
        .feature-list li::before { content: "✓"; position: absolute; left: 0; top: 2px; color: var(--cyan); font-weight: 900; }
        .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: steps; }
        .step { position: relative; padding: 28px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
        .step::before { counter-increment: steps; content: "0" counter(steps); color: #c9e1ea; font-size: 42px; line-height: 1; font-weight: 900; }
        .step h3 { margin: 14px 0 8px; color: var(--navy); }
        .step p { color: var(--muted); }
        .content-section { background: #fff; }
        .poster-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .poster-card { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
        .poster-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
        .poster-image { height: 224px; position: relative; }
        .poster-image img { height: 100%; }
        .badge { position: absolute; left: 11px; top: 11px; padding: 3px 8px; border-radius: 6px; color: #fff; background: rgba(16,42,67,.82); font-size: 11px; font-weight: 800; }
        .badge.hot { background: var(--red); }
        .poster-info { padding: 15px; }
        .poster-info h3 { color: var(--navy); font-size: 16px; line-height: 1.4; }
        .meta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; color: var(--muted); font-size: 12px; }
        .score { color: #c38313; font-weight: 800; }
        .wide-card { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
        .wide-card .poster-card { display: grid; grid-template-columns: 42% 1fr; }
        .wide-card .poster-image { height: 100%; min-height: 180px; }
        .wide-card .poster-info { align-self: center; }
        .category-band { background: var(--navy); color: #fff; }
        .category-band .section-head h2 { color: #fff; }
        .category-band .section-head p { color: rgba(255,255,255,.68); }
        .category-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
        .category { min-height: 190px; padding: 23px 19px; border: 1px solid rgba(255,255,255,.15); border-radius: 14px; background: rgba(255,255,255,.06); transition: background .2s, transform .2s; }
        .category:hover { transform: translateY(-4px); background: rgba(255,255,255,.12); }
        .category strong { display: block; margin-bottom: 15px; color: #73d9d5; font-size: 18px; }
        .category p { color: rgba(255,255,255,.68); font-size: 13px; line-height: 1.7; }
        .ranking-layout { display: grid; grid-template-columns: 1fr .9fr; gap: 44px; align-items: start; }
        .ranking-list { border-top: 1px solid var(--line); }
        .ranking-item { display: grid; grid-template-columns: 42px 1fr auto auto; gap: 15px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
        .rank-num { color: var(--blue); font-size: 20px; font-weight: 900; }
        .ranking-item h3 { color: var(--navy); font-size: 16px; }
        .ranking-item small { color: var(--muted); }
        .heat { color: var(--red); font-size: 13px; font-weight: 800; }
        .trust-panel { padding: 34px; color: #fff; border-radius: 18px; background: linear-gradient(135deg, #123b5a, #176985); box-shadow: var(--shadow); }
        .trust-panel h3 { margin-bottom: 15px; font-size: 25px; }
        .trust-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 27px; }
        .trust-stats strong { display: block; color: #76dfd8; font-size: 28px; }
        .trust-stats span { color: rgba(255,255,255,.68); font-size: 12px; }
        .news-section { background: var(--soft); }
        .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .news-card { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 13px; transition: box-shadow .2s; }
        .news-card:hover { box-shadow: var(--shadow-sm); }
        .news-card img { height: 92px; border-radius: 9px; }
        .news-card h3 { color: var(--navy); font-size: 15px; line-height: 1.5; }
        .news-card time { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; }
        .faq-section { background: #fff; }
        .faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
        .faq-item { padding: 23px; border: 1px solid var(--line); border-radius: 13px; }
        .faq-item h3 { margin-bottom: 9px; color: var(--navy); font-size: 17px; }
        .faq-item p { color: var(--muted); font-size: 14px; }
        .final-cta { padding: 54px 0; background: #dff3f5; border-top: 1px solid #c9e8eb; }
        .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
        .cta-inner h2 { color: var(--navy); font-size: 30px; line-height: 1.35; }
        .cta-inner p { margin-top: 8px; color: var(--muted); }
        footer { padding: 54px 0 24px; color: rgba(255,255,255,.68); background: var(--navy-deep); }
        .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 35px; padding-bottom: 40px; }
        .footer-brand { color: #fff; font-size: 19px; font-weight: 800; }
        .footer-grid h3 { margin-bottom: 13px; color: #fff; font-size: 15px; }
        .footer-grid a { display: block; margin: 7px 0; color: rgba(255,255,255,.62); font-size: 13px; transition: color .2s; }
        .footer-grid a:hover { color: #72d8d3; }
        .footer-note { max-width: 310px; margin-top: 11px; font-size: 13px; line-height: 1.8; }
        .copyright { padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.45); font-size: 12px; }
        @media (max-width: 1024px) {
            .poster-grid { grid-template-columns: repeat(3, 1fr); }
            .category-grid { grid-template-columns: repeat(3, 1fr); }
            .news-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            .container { width: min(100% - 30px, 620px); }
            .nav { min-height: 68px; gap: 14px; }
            .brand-text { font-size: 15px; }
            .nav-links { gap: 14px; font-size: 13px; }
            .nav-guard { display: none; }
            .hero { padding: 58px 0 54px; background-position: 65% center; }
            .hero h1 { font-size: 38px; }
            .hero-lead { font-size: 15px; }
            section { padding: 56px 0; }
            .section-head, .cta-inner { display: block; }
            .section-head p { margin-top: 12px; }
            .section-head .text-link { display: inline-block; margin-top: 13px; }
            .value-grid, .steps, .feature-layout, .ranking-layout { grid-template-columns: 1fr; }
            .feature-image { min-height: 300px; }
            .poster-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
            .poster-image { height: 190px; }
            .wide-card { grid-template-columns: 1fr; gap: 14px; }
            .category-grid { grid-template-columns: repeat(2, 1fr); }
            .trust-panel { margin-top: 5px; }
            .cta-inner .btn { margin-top: 20px; }
            .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
        }
        @media (max-width: 520px) {
            .nav-links a:nth-child(2) { display: none; }
            .brand-mark { width: 36px; height: 36px; font-size: 15px; }
            .hero h1 { font-size: 31px; }
            .hero-actions .btn { width: 100%; }
            .poster-grid, .category-grid, .news-grid, .faq-grid { grid-template-columns: 1fr; }
            .poster-image { height: 235px; }
            .ranking-item { grid-template-columns: 32px 1fr auto; gap: 10px; }
            .ranking-item .heat { grid-column: 2 / 3; }
            .ranking-item .score { grid-column: 3 / 4; grid-row: 1 / 3; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .footer-grid > div:first-child { grid-column: 1 / -1; }
        }

/* roulang page: category1 */
:root{
  --navy:#102a43;--navy-deep:#081c2d;--blue:#2377c9;--cyan:#2aa7b8;
  --sky:#eaf5fb;--ink:#17324d;--muted:#6c8092;--line:#dce8ef;
  --paper:#fff;--soft:#f5f9fb;--gold:#f2b84b;--red:#d85d69;
  --radius:16px;--shadow:0 16px 42px rgba(18,60,92,.10);
  --shadow-sm:0 8px 24px rgba(18,60,92,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--soft);color:var(--ink);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;font-size:15px;line-height:1.75}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;object-fit:cover}
button,input{font:inherit}
button{border:0;cursor:pointer}
.container{width:min(1180px,calc(100% - 40px));margin:0 auto}
header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.95);border-bottom:1px solid rgba(220,232,239,.9);backdrop-filter:blur(16px)}
.nav{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px;background:var(--navy);box-shadow:0 8px 16px rgba(16,42,67,.2)}
.brand-text{font-size:18px;font-weight:800;color:var(--navy);white-space:nowrap}
.brand-text small{display:block;color:var(--muted);font-size:10px;letter-spacing:1px;font-weight:600;line-height:1.2}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{color:var(--muted);font-weight:650;transition:color .2s ease}
.nav-links a:hover,.nav-links a.active{color:var(--blue)}
.nav-guard{display:inline-flex;align-items:center;padding:9px 14px;color:var(--navy);background:var(--sky);border:1px solid #cfe5ef;border-radius:10px;font-size:13px;font-weight:700;white-space:nowrap}
.hero{padding:76px 0 68px;background:linear-gradient(90deg,rgba(8,28,45,.96),rgba(8,28,45,.82) 48%,rgba(8,28,45,.32)),url("https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?auto=format&fit=crop&w=1800&q=88") center/cover;color:#fff}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.eyebrow,.section-kicker{color:var(--cyan);text-transform:uppercase;letter-spacing:2px;font-size:12px;font-weight:800}
.hero h1{margin-top:14px;font-size:clamp(34px,5vw,62px);line-height:1.14;letter-spacing:0}
.hero h1 em{color:#63d3d4;font-style:normal}
.hero-lead{margin-top:20px;max-width:650px;color:rgba(255,255,255,.84);font-size:17px;line-height:1.9}
.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 21px;border-radius:10px;font-weight:800;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible,.nav-links a:focus-visible,.text-link:focus-visible{outline:3px solid #72d8d3;outline-offset:3px}
.btn-primary{color:var(--navy);background:#72d8d3;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.btn-primary:hover{background:#92e7df}
.btn-light{color:#fff;border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.08)}
.btn-light:hover{background:rgba(255,255,255,.16)}
.hero-note{margin-top:27px;color:rgba(255,255,255,.62);font-size:13px}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.compare-panel{position:relative;min-height:355px;overflow:hidden;border:1px solid rgba(255,255,255,.25);border-radius:18px;background:#173b54;box-shadow:0 18px 40px rgba(0,0,0,.2)}
.compare-panel img{height:355px;opacity:.82}
.compare-panel:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,28,45,.8),transparent 60%)}
.compare-label{position:absolute;left:16px;bottom:15px;z-index:2;color:#fff;font-weight:800}
.compare-label small{display:block;color:#a9d9de;font-size:11px;letter-spacing:1px}
section{padding:76px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:30px}
.section-head h2{margin-top:6px;color:var(--navy);font-size:clamp(25px,3vw,35px);line-height:1.25}
.section-head p{max-width:620px;color:var(--muted)}
.text-link{color:var(--blue);font-weight:800;white-space:nowrap}
.text-link:hover{color:var(--cyan)}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.value-item{padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm)}
.value-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;color:var(--blue);background:var(--sky);font-weight:900;font-size:20px}
.value-item h3{margin:17px 0 8px;color:var(--navy);font-size:19px}
.value-item p{color:var(--muted)}
.feature-stage{background:var(--sky)}
.feature-layout{display:grid;grid-template-columns:1.08fr .92fr;gap:42px;align-items:center}
.feature-image{min-height:420px;overflow:hidden;border-radius:20px;box-shadow:var(--shadow)}
.feature-image img{height:420px}
.feature-copy h2{margin:8px 0 16px;color:var(--navy);font-size:36px;line-height:1.3}
.feature-copy>p{color:var(--muted);font-size:16px}
.feature-list{margin-top:22px;display:grid;gap:13px}
.feature-list li{list-style:none;padding-left:30px;position:relative;color:var(--ink)}
.feature-list li:before{content:"✓";position:absolute;left:0;top:2px;color:var(--cyan);font-weight:900}
.content-section{background:#fff}
.poster-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.poster-card{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.poster-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.poster-image{height:225px;position:relative;overflow:hidden}
.poster-image img{height:100%;transition:transform .4s}
.poster-card:hover .poster-image img{transform:scale(1.04)}
.badge{position:absolute;left:11px;top:11px;padding:3px 8px;border-radius:6px;color:#fff;background:rgba(16,42,67,.82);font-size:11px;font-weight:800}
.badge.hot{background:var(--red)}
.poster-body{padding:16px}
.poster-body h3{color:var(--navy);font-size:17px;line-height:1.4}
.meta-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;color:var(--muted);font-size:12px}
.rating{color:#b47a16;font-weight:800}
.category-band{background:#f9fcfd}
.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.category{padding:23px;background:#fff;border:1px solid var(--line);border-radius:14px;transition:border-color .2s,box-shadow .2s}
.category:hover{border-color:#9bcbd5;box-shadow:var(--shadow-sm)}
.category h3{color:var(--navy);font-size:18px;margin-bottom:8px}
.category p{color:var(--muted);font-size:14px}
.category-count{display:inline-block;margin-top:15px;color:var(--blue);font-size:12px;font-weight:800}
.editorial{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
.editorial-copy{padding-top:8px}
.editorial-copy h2{margin:8px 0 15px;color:var(--navy);font-size:34px;line-height:1.3}
.editorial-copy p{color:var(--muted);font-size:16px}
.quote{margin-top:25px;padding:18px 22px;border-left:4px solid var(--cyan);background:var(--sky);color:var(--navy);font-weight:700}
.editorial-list{display:grid;gap:14px}
.editorial-item{display:flex;gap:15px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:12px}
.editorial-item img{width:96px;height:72px;border-radius:9px;flex:0 0 96px}
.editorial-item h3{color:var(--navy);font-size:15px;line-height:1.45}
.editorial-item time{display:block;margin-top:5px;color:var(--muted);font-size:12px}
.ranking-section{background:var(--navy-deep);color:#fff}
.ranking-section .section-head h2{color:#fff}
.ranking-section .section-head p{color:rgba(255,255,255,.65)}
.ranking-list{display:grid;grid-template-columns:1fr 1fr;gap:12px 34px}
.rank-item{display:grid;grid-template-columns:42px 1fr auto auto;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.12)}
.rank-number{color:#72d8d3;font-size:20px;font-weight:800;font-style:italic}
.rank-name{font-weight:750}
.rank-type{padding:3px 8px;border:1px solid rgba(114,216,211,.4);border-radius:5px;color:#a8e9e5;font-size:11px}
.rank-score{color:#f2c969;font-weight:800;font-size:13px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.faq-item{padding:22px 24px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm)}
.faq-item h3{color:var(--navy);font-size:16px;line-height:1.5}
.faq-item p{margin-top:8px;color:var(--muted);font-size:14px}
.cta-band{padding:55px 0;background:var(--sky)}
.cta-box{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:34px 38px;border-radius:18px;background:var(--navy);box-shadow:var(--shadow)}
.cta-box h2{color:#fff;font-size:29px;line-height:1.35}
.cta-box p{margin-top:8px;color:rgba(255,255,255,.68)}
footer{padding:54px 0 22px;background:#fff;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
.footer-brand{color:var(--navy);font-size:20px;font-weight:850}
.footer-note{max-width:310px;margin-top:12px;color:var(--muted);font-size:13px}
.footer-grid h3{margin-bottom:12px;color:var(--navy);font-size:14px}
.footer-grid a{display:block;margin:7px 0;color:var(--muted);font-size:13px;transition:color .2s}
.footer-grid a:hover{color:var(--blue)}
.copyright{margin-top:38px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
@media(max-width:1024px){
 .nav{gap:16px}.nav-links{gap:16px}.nav-guard{display:none}
 .hero-grid,.feature-layout,.editorial{gap:28px}
 .poster-grid{grid-template-columns:repeat(3,1fr)}
 .category-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
 .container{width:min(100% - 28px,620px)}
 .nav{min-height:68px}.brand-text{font-size:16px}.brand-text small{font-size:9px}
 .nav-links{max-width:46vw;overflow-x:auto;white-space:nowrap;gap:17px;padding-bottom:2px}
 .nav-links a{font-size:13px}
 .hero{padding:58px 0 52px}.hero-grid{grid-template-columns:1fr}
 .hero h1{font-size:42px}.hero-lead{font-size:15px}
 .compare{max-width:560px}.compare-panel,.compare-panel img{min-height:270px;height:270px}
 section{padding:58px 0}.section-head{display:block;margin-bottom:24px}.section-head p{margin-top:9px}
 .value-grid{grid-template-columns:1fr}.feature-layout,.editorial{grid-template-columns:1fr}
 .feature-image,.feature-image img{min-height:300px;height:300px}
 .feature-copy h2,.editorial-copy h2{font-size:29px}
 .poster-grid{grid-template-columns:repeat(2,1fr);gap:14px}.poster-image{height:205px}
 .ranking-list,.faq-grid{grid-template-columns:1fr}
 .cta-box{display:block;padding:28px 24px}.cta-box .btn{margin-top:20px}
 .footer-grid{grid-template-columns:1fr 1fr;gap:26px}
}
@media(max-width:520px){
 .container{width:calc(100% - 24px)}
 .brand{gap:8px}.brand-mark{width:36px;height:36px;border-radius:10px;font-size:16px}.brand-text{font-size:14px}
 .nav-links{max-width:39vw;gap:13px}.nav-links a{font-size:12px}
 .hero h1{font-size:35px}.hero-actions .btn{width:100%}
 .compare{gap:8px}.compare-panel,.compare-panel img{min-height:210px;height:210px}.compare-label{left:10px;bottom:9px;font-size:12px}
 .poster-grid{grid-template-columns:1fr 1fr}.poster-image{height:165px}.poster-body{padding:12px}.poster-body h3{font-size:15px}
 .category-grid{grid-template-columns:1fr}.ranking-list{gap:0}.rank-item{grid-template-columns:32px 1fr auto;gap:9px}.rank-type{display:none}
 .editorial-item img{width:82px;height:64px;flex-basis:82px}.footer-grid{grid-template-columns:1fr}
}