/* roulang page: index */
:root {
            --ink: #18242b;
            --muted: #6c7779;
            --cream: #f6f4ee;
            --paper: #fffdf8;
            --sage: #dce8d8;
            --sage-deep: #547766;
            --coral: #e36e58;
            --gold: #d7a84d;
            --line: #e5e4dc;
            --shadow: 0 18px 50px rgba(41, 56, 48, .09);
            --shadow-soft: 0 8px 24px rgba(41, 56, 48, .07);
            --radius: 18px;
            --radius-sm: 11px;
            --container: 1180px;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body {
            background: var(--cream);
            color: var(--ink);
            font-family: "Noto Sans SC", "Microsoft YaHei", 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(227,110,88,.45); outline-offset: 3px; }
        .container { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--sage-deep);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
        }
        .eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--coral); }
        .section-head {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 24px;
            margin-bottom: 30px;
        }
        .section-head h2 {
            margin-top: 8px;
            font-size: clamp(26px, 3vw, 40px);
            line-height: 1.2;
            letter-spacing: 0;
        }
        .section-head p { max-width: 580px; color: var(--muted); font-size: 15px; }
        .text-link {
            color: var(--sage-deep);
            font-weight: 700;
            white-space: nowrap;
            border-bottom: 1px solid currentColor;
            transition: color .2s ease;
        }
        .text-link:hover { color: var(--coral); }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 20;
            background: rgba(246,244,238,.9);
            backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(229,228,220,.8);
        }
        .nav-wrap { min-height: 76px; display: flex; align-items: center; gap: 34px; }
        .brand { display: inline-flex; align-items: center; gap: 11px; min-width: max-content; font-weight: 900; }
        .brand-mark {
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            border-radius: 12px;
            background: var(--coral);
            color: #fff;
            font-size: 20px;
            box-shadow: 5px 5px 0 rgba(84,119,102,.22);
        }
        .brand-name { font-size: 15px; line-height: 1.2; max-width: 165px; }
        .main-nav { display: flex; align-items: center; gap: 25px; margin-left: auto; }
        .main-nav a {
            color: var(--muted);
            font-size: 14px;
            font-weight: 700;
            transition: color .2s ease;
        }
        .main-nav a:hover, .main-nav a.active { color: var(--coral); }
        .nav-badge {
            padding: 8px 13px;
            border-radius: 999px;
            color: #fff !important;
            background: var(--sage-deep);
        }
        .menu-toggle { display: none; border: 0; background: transparent; color: var(--ink); font-size: 24px; }

        .hero {
            position: relative;
            min-height: 630px;
            display: flex;
            align-items: center;
            overflow: hidden;
            background:
                linear-gradient(90deg, rgba(18,32,31,.9) 0%, rgba(18,32,31,.65) 44%, rgba(18,32,31,.18) 100%),
                url("https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&w=2000&q=88") center/cover;
            color: #fff;
        }
        .hero::after {
            content: "";
            position: absolute;
            right: 8%;
            bottom: 48px;
            width: 180px;
            height: 180px;
            border: 1px solid rgba(255,255,255,.25);
            border-radius: 50%;
        }
        .hero-content { position: relative; z-index: 1; max-width: 680px; padding: 92px 0 112px; }
        .hero .eyebrow { color: #d8e9d2; }
        .hero h1 { margin: 18px 0 17px; max-width: 650px; font-size: clamp(38px, 5vw, 70px); line-height: 1.12; letter-spacing: 0; }
        .hero h1 em { color: #f5c873; font-style: normal; }
        .hero-lead { max-width: 640px; color: rgba(255,255,255,.82); font-size: 17px; line-height: 1.9; }
        .hero-actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
        .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 48px;
            padding: 0 21px;
            border: 1px solid transparent;
            border-radius: 9px;
            font-size: 14px;
            font-weight: 800;
            transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
        }
        .button:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,.12); }
        .button-primary { background: var(--coral); color: #fff; }
        .button-secondary { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.35); }
        .hero-note { display: flex; gap: 24px; margin-top: 38px; color: rgba(255,255,255,.7); font-size: 13px; }
        .hero-note strong { display: block; color: #fff; font-size: 21px; }

        section { padding: 86px 0; }
        .trust-strip { padding: 25px 0; background: var(--paper); border-bottom: 1px solid var(--line); }
        .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .trust-item { display: flex; gap: 12px; align-items: center; }
        .trust-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--sage); color: var(--sage-deep); font-weight: 900; }
        .trust-item strong { display: block; font-size: 14px; }
        .trust-item span { color: var(--muted); font-size: 12px; }

        .latest { background: var(--paper); }
        .movie-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
        .movie-card { min-width: 0; }
        .poster-wrap { position: relative; overflow: hidden; border-radius: var(--radius-sm); aspect-ratio: 3 / 4; background: var(--sage); }
        .poster-wrap img { height: 100%; transition: transform .45s ease; }
        .movie-card:hover .poster-wrap img { transform: scale(1.05); }
        .movie-overlay { position: absolute; inset: auto 10px 10px; display: flex; justify-content: space-between; align-items: center; }
        .badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 5px; background: rgba(255,255,255,.92); color: var(--ink); font-size: 11px; font-weight: 800; }
        .score { color: #f6c969; font-size: 13px; font-weight: 900; text-shadow: 0 1px 5px rgba(0,0,0,.4); }
        .movie-info { padding-top: 12px; }
        .movie-title { font-size: 16px; font-weight: 900; }
        .movie-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; color: var(--muted); font-size: 12px; }
        .movie-meta b { color: var(--coral); font-size: 14px; }

        .feature-band { background: var(--sage); }
        .feature-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 68px; align-items: center; }
        .feature-layout h2 { margin: 12px 0 16px; font-size: clamp(28px, 4vw, 48px); line-height: 1.2; }
        .feature-layout p { color: #52645b; font-size: 16px; }
        .feature-list { display: grid; gap: 15px; }
        .feature-item { display: grid; grid-template-columns: 44px 1fr; gap: 15px; padding: 18px; background: rgba(255,255,255,.54); border: 1px solid rgba(84,119,102,.14); border-radius: var(--radius-sm); }
        .feature-item b { display: block; margin-bottom: 3px; }
        .feature-item span { color: #61726a; font-size: 13px; }
        .number { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--sage-deep); color: white; font-weight: 900; }

        .hot { background: #263c39; color: #fff; }
        .hot .section-head p { color: rgba(255,255,255,.64); }
        .hot .eyebrow { color: #d8e9d2; }
        .hot-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 22px; }
        .hot-feature { position: relative; min-height: 360px; overflow: hidden; border-radius: var(--radius); }
        .hot-feature img { height: 100%; }
        .hot-feature::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(12,22,21,.9)); }
        .hot-caption { position: absolute; z-index: 1; left: 28px; right: 28px; bottom: 25px; }
        .hot-caption h3 { font-size: 27px; }
        .hot-caption p { margin-top: 4px; color: rgba(255,255,255,.72); font-size: 13px; }
        .hot-list { display: grid; gap: 12px; }
        .hot-small { display: grid; grid-template-columns: 98px 1fr; gap: 14px; padding: 11px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; }
        .hot-small img { height: 105px; border-radius: 8px; }
        .hot-small h3 { font-size: 16px; margin-top: 8px; }
        .hot-small p { color: rgba(255,255,255,.6); font-size: 12px; line-height: 1.6; }

        .channels { background: var(--cream); }
        .channel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
        .channel-card { position: relative; min-height: 170px; padding: 23px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); transition: transform .2s ease, box-shadow .2s ease; }
        .channel-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
        .channel-card::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 110px; height: 110px; border: 1px solid var(--sage); border-radius: 50%; }
        .channel-card h3 { margin-bottom: 8px; font-size: 19px; }
        .channel-card p { color: var(--muted); font-size: 13px; line-height: 1.75; }

        .ranking { background: var(--paper); }
        .rank-layout { display: grid; grid-template-columns: 1fr .8fr; gap: 60px; }
        .rank-list { display: grid; gap: 0; }
        .rank-item { display: grid; grid-template-columns: 40px 1fr 75px 60px; align-items: center; gap: 12px; min-height: 65px; border-bottom: 1px solid var(--line); }
        .rank-no { color: var(--coral); font-size: 21px; font-weight: 900; }
        .rank-name strong { display: block; font-size: 15px; }
        .rank-name span { color: var(--muted); font-size: 11px; }
        .heat { color: var(--gold); font-size: 12px; }
        .rank-score { font-weight: 900; text-align: right; }
        .rank-note { align-self: center; padding: 30px; border-radius: var(--radius); background: var(--sage); }
        .rank-note h3 { margin: 12px 0; font-size: 25px; line-height: 1.35; }
        .rank-note p { color: #607267; font-size: 14px; }

        .news { background: #f0eee7; }
        .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .news-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
        .news-card img { aspect-ratio: 16 / 9; }
        .news-body { padding: 17px; }
        .news-date { color: var(--coral); font-size: 11px; font-weight: 800; }
        .news-body h3 { margin: 6px 0; font-size: 16px; line-height: 1.45; }
        .news-body p { color: var(--muted); font-size: 12px; }

        .editorial { background: var(--paper); }
        .editorial-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: start; }
        .editorial-copy h2 { margin: 12px 0 16px; font-size: 36px; line-height: 1.25; }
        .editorial-copy p { color: var(--muted); font-size: 15px; }
        .quote-list { display: grid; gap: 14px; }
        .quote { padding: 19px 22px; border-left: 3px solid var(--coral); background: #faf8f1; }
        .quote p { color: #43534f; font-size: 14px; }
        .quote footer { margin-top: 9px; color: var(--muted); font-size: 12px; }

        .compare { background: var(--cream); }
        .compare-table { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 860px; margin: 0 auto; }
        .compare-col { padding: 28px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); }
        .compare-col.highlight { background: #e6efe1; border-color: #c8dbc1; }
        .compare-col h3 { padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 20px; }
        .compare-col ul { list-style: none; display: grid; gap: 14px; margin-top: 18px; color: var(--muted); font-size: 14px; }
        .compare-col li::before { content: "✓"; display: inline-block; width: 24px; color: var(--sage-deep); font-weight: 900; }
        .compare-col:not(.highlight) li::before { content: "·"; color: var(--coral); }

        .faq { background: var(--paper); }
        .faq-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; }
        .faq-intro h2 { margin: 12px 0 16px; font-size: 38px; line-height: 1.25; }
        .faq-intro p { color: var(--muted); font-size: 15px; }
        .faq-list { display: grid; gap: 10px; }
        details { padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; background: #fffefa; }
        summary { cursor: pointer; list-style: none; font-weight: 800; }
        summary::-webkit-details-marker { display: none; }
        summary::after { content: "+"; float: right; color: var(--coral); font-size: 20px; line-height: 1; }
        details[open] summary::after { content: "−"; }
        details p { padding-top: 12px; color: var(--muted); font-size: 13px; }

        .closing { padding: 68px 0; background: var(--coral); color: #fff; }
        .closing-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
        .closing h2 { font-size: clamp(26px, 4vw, 42px); line-height: 1.2; }
        .closing p { max-width: 650px; margin-top: 8px; color: rgba(255,255,255,.78); font-size: 14px; }
        .closing .button { background: #fff; color: var(--coral); }

        footer { padding: 58px 0 24px; background: #1d2d2b; color: #fff; }
        .footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; padding-bottom: 45px; }
        .footer-brand p { max-width: 280px; margin-top: 14px; color: rgba(255,255,255,.6); font-size: 13px; }
        .footer-col h3 { margin-bottom: 14px; color: #d8e9d2; font-size: 14px; }
        .footer-col a { display: block; margin: 8px 0; color: rgba(255,255,255,.62); font-size: 13px; transition: color .2s ease; }
        .footer-col a:hover { color: #fff; }
        .copyright { padding-top: 20px; border-top: 1px solid rgba(255,255,255,.13); color: rgba(255,255,255,.45); font-size: 12px; }

        @media (max-width: 1024px) {
            .movie-grid { grid-template-columns: repeat(3, 1fr); }
            .channel-grid { grid-template-columns: repeat(2, 1fr); }
            .feature-layout, .rank-layout, .editorial-layout, .faq-grid { gap: 35px; }
        }
        @media (max-width: 768px) {
            .container { width: min(100% - 32px, var(--container)); }
            .nav-wrap { min-height: 68px; }
            .menu-toggle { display: block; margin-left: auto; }
            .main-nav { display: none; position: absolute; top: 68px; left: 0; right: 0; padding: 18px 20px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-soft); }
            .main-nav.open { display: grid; gap: 14px; }
            .hero { min-height: 610px; }
            .hero-content { padding: 80px 0 100px; }
            section { padding: 65px 0; }
            .trust-grid { grid-template-columns: repeat(2, 1fr); }
            .movie-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
            .feature-layout, .hot-grid, .rank-layout, .editorial-layout, .faq-grid { grid-template-columns: 1fr; }
            .hot-feature { min-height: 300px; }
            .news-grid { grid-template-columns: repeat(2, 1fr); }
            .footer-grid { grid-template-columns: repeat(2, 1fr); }
            .footer-brand { grid-column: 1 / -1; }
            .closing-inner { align-items: flex-start; flex-direction: column; }
        }
        @media (max-width: 520px) {
            .brand-name { max-width: 140px; font-size: 13px; }
            .hero h1 { font-size: 39px; }
            .hero-lead { font-size: 15px; }
            .hero-note { gap: 16px; }
            .section-head { display: block; }
            .section-head p { margin-top: 12px; }
            .section-head .text-link { display: inline-block; margin-top: 15px; }
            .trust-grid, .channel-grid, .news-grid { grid-template-columns: 1fr; }
            .rank-item { grid-template-columns: 30px 1fr 58px; }
            .rank-item .heat { display: none; }
            .compare-table { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
            .footer-brand { grid-column: 1 / -1; }
            .button { width: 100%; }
            .hero-actions { width: 100%; }
        }

/* roulang page: category1 */
:root {
      --ink:#18242b;
      --muted:#6c7779;
      --cream:#f6f4ee;
      --paper:#fffdf8;
      --sage:#dce8d8;
      --sage-deep:#547766;
      --coral:#e36e58;
      --gold:#d7a84d;
      --line:#e5e4dc;
      --shadow:0 18px 50px rgba(41,56,48,.09);
      --shadow-soft:0 8px 24px rgba(41,56,48,.07);
      --radius:18px;
      --radius-sm:11px;
      --container:1180px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--cream);color:var(--ink);font-family:"Noto Sans SC","Microsoft YaHei",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}
    .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--sage-deep);font-size:12px;font-weight:800;letter-spacing:.14em}
    .eyebrow:before{content:"";width:24px;height:2px;background:var(--coral)}
    .site-header{position:sticky;top:0;z-index:20;background:rgba(246,244,238,.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(229,228,220,.85)}
    .nav-wrap{min-height:76px;display:flex;align-items:center;gap:34px}
    .brand{display:inline-flex;align-items:center;gap:11px;min-width:max-content;font-weight:900}
    .brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--coral);color:#fff;font-size:20px;box-shadow:5px 5px 0 rgba(84,119,102,.22)}
    .brand-name{font-size:15px;line-height:1.2;max-width:165px}
    .main-nav{display:flex;align-items:center;gap:25px;margin-left:auto}
    .main-nav a{color:var(--muted);font-size:14px;font-weight:700;transition:color .2s ease}
    .main-nav a:hover,.main-nav a.active{color:var(--coral)}
    .nav-badge{padding:8px 13px;border-radius:999px;color:#fff!important;background:var(--sage-deep)}
    .menu-toggle{display:none;border:0;background:transparent;color:var(--ink);font-size:24px}
    .hero{position:relative;overflow:hidden;background:var(--sage);padding:86px 0 76px}
    .hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:74px;align-items:center}
    .hero h1{max-width:680px;margin:17px 0 18px;font-size:clamp(38px,5vw,68px);line-height:1.13;letter-spacing:0}
    .hero h1 em{color:var(--coral);font-style:normal}
    .hero-lead{max-width:620px;color:#536364;font-size:17px}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
    .button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 21px;border:1px solid transparent;border-radius:9px;font-size:14px;font-weight:800;transition:.2s ease}
    .button:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.12)}
    .button-primary{background:var(--coral);color:#fff}
    .button-light{background:var(--paper);color:var(--sage-deep);border-color:var(--line)}
    .hero-sheet{position:relative;max-width:460px;margin-left:auto;padding:28px;background:var(--paper);box-shadow:var(--shadow);transform:rotate(2deg)}
    .sheet-cover{height:250px;background:linear-gradient(120deg,rgba(18,32,31,.08),rgba(18,32,31,.6)),url("https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?auto=format&fit=crop&w=900&q=85") center/cover}
    .sheet-label{position:absolute;top:47px;left:48px;padding:7px 10px;background:var(--gold);color:#fff;font-size:11px;font-weight:900}
    .sheet-body{padding-top:19px}
    .sheet-body h2{margin:0;font-size:24px;line-height:1.3}
    .sheet-body p{margin:8px 0 0;color:var(--muted);font-size:13px}
    .sheet-list{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:17px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;font-weight:700}
    section{padding:82px 0}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:30px}
    .section-head h2{margin:8px 0 0;font-size:clamp(27px,3vw,40px);line-height:1.2}
    .section-head p{max-width:580px;margin:0;color:var(--muted);font-size:15px}
    .text-link{color:var(--sage-deep);font-weight:700;white-space:nowrap;border-bottom:1px solid currentColor}
    .text-link:hover{color:var(--coral)}
    .intro-band{background:var(--paper);border-bottom:1px solid var(--line)}
    .intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start}
    .intro-copy h2{margin:12px 0;font-size:34px;line-height:1.3}
    .intro-copy p{color:var(--muted);max-width:650px}
    .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
    .stat{padding:22px;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-sm)}
    .stat strong{display:block;color:var(--coral);font-size:31px;line-height:1.1}
    .stat span{display:block;margin-top:5px;color:var(--muted);font-size:13px}
    .channel-section{background:#edf2e9}
    .channel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .channel{min-height:190px;padding:25px;background:var(--paper);border:1px solid rgba(84,119,102,.16);border-radius:var(--radius);transition:.25s ease}
    .channel:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
    .channel-number{color:var(--coral);font-size:13px;font-weight:900}
    .channel h3{margin:12px 0 7px;font-size:21px}
    .channel p{margin:0;color:var(--muted);font-size:14px}
    .channel-foot{display:flex;justify-content:space-between;margin-top:19px;color:var(--sage-deep);font-size:12px;font-weight:800}
    .feature-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:26px}
    .feature-card{position:relative;min-height:420px;overflow:hidden;border-radius:var(--radius);background:#233b39;color:#fff}
    .feature-card img{height:100%;position:absolute;inset:0;opacity:.75}
    .feature-overlay{position:absolute;inset:0;padding:32px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(0deg,rgba(10,23,22,.9),transparent 70%)}
    .feature-overlay h3{max-width:470px;margin:9px 0;font-size:32px;line-height:1.25}
    .feature-overlay p{max-width:490px;margin:0;color:rgba(255,255,255,.78);font-size:14px}
    .feature-side{display:grid;gap:18px}
    .mini-feature{display:grid;grid-template-columns:140px 1fr;min-height:128px;overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm)}
    .mini-feature img{height:100%}
    .mini-feature div{padding:17px}
    .mini-feature h3{margin:0 0 6px;font-size:17px}
    .mini-feature p{margin:0;color:var(--muted);font-size:12px}
    .movie-section{background:var(--paper)}
    .movie-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
    .movie-card{min-width:0}
    .poster-wrap{position:relative;aspect-ratio:3/4.15;overflow:hidden;border-radius:var(--radius-sm);background:var(--sage)}
    .poster-wrap img{height:100%;transition:transform .45s ease}
    .movie-card:hover .poster-wrap img{transform:scale(1.05)}
    .badge{position:absolute;left:10px;top:10px;display:inline-flex;padding:4px 8px;border-radius:5px;background:rgba(255,255,255,.92);color:var(--ink);font-size:11px;font-weight:800}
    .movie-title{margin-top:12px;font-size:16px;font-weight:900}
    .movie-meta{display:flex;justify-content:space-between;align-items:center;margin-top:4px;color:var(--muted);font-size:12px}
    .movie-meta b{color:var(--coral);font-size:14px}
    .ranking-section{background:#263a37;color:#fff}
    .ranking-section .eyebrow{color:#d8e9d2}
    .ranking-section .section-head p{color:rgba(255,255,255,.66)}
    .ranking-list{display:grid;grid-template-columns:1fr 1fr;column-gap:54px;border-top:1px solid rgba(255,255,255,.17)}
    .rank-item{display:grid;grid-template-columns:44px 1fr auto auto;align-items:center;gap:14px;min-height:70px;border-bottom:1px solid rgba(255,255,255,.13)}
    .rank-no{color:#f5c873;font-size:20px;font-weight:900}
    .rank-name{font-weight:800}
    .rank-tag{padding:4px 8px;border:1px solid rgba(255,255,255,.25);border-radius:5px;color:rgba(255,255,255,.7);font-size:11px}
    .rank-score{color:#f5c873;font-weight:900}
    .news-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:28px}
    .news-main{overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
    .news-main img{height:275px}
    .news-main div{padding:23px}
    .news-main h3{margin:7px 0;font-size:25px;line-height:1.3}
    .news-main p,.news-item p{margin:0;color:var(--muted);font-size:13px}
    .news-list{display:grid;gap:14px}
    .news-item{display:grid;grid-template-columns:105px 1fr;gap:15px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line)}
    .news-item img{height:82px;border-radius:9px}
    .news-item h3{margin:0 0 4px;font-size:15px;line-height:1.4}
    .news-date{color:var(--coral);font-size:11px;font-weight:800}
    .faq-section{background:var(--sage)}
    .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
    .faq-item{padding:21px 23px;background:var(--paper);border-radius:var(--radius-sm);border:1px solid rgba(84,119,102,.16)}
    .faq-item h3{margin:0 0 8px;font-size:16px}
    .faq-item p{margin:0;color:var(--muted);font-size:13px}
    .cta{padding:56px 0;background:var(--coral);color:#fff}
    .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
    .cta h2{margin:0;font-size:32px;line-height:1.3}
    .cta p{margin:8px 0 0;color:rgba(255,255,255,.8)}
    .cta .button{background:#fff;color:var(--coral)}
    footer{padding:60px 0 25px;background:#182b2a;color:#fff}
    .footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px}
    .footer-brand p{max-width:290px;margin:18px 0 0;color:rgba(255,255,255,.62);font-size:13px}
    .footer-col{display:flex;flex-direction:column;gap:9px}
    .footer-col h3{margin:0 0 9px;color:#f5c873;font-size:14px}
    .footer-col a{color:rgba(255,255,255,.68);font-size:13px}
    .footer-col a:hover{color:#fff}
    .copyright{margin-top:43px;padding-top:18px;border-top:1px solid rgba(255,255,255,.13);color:rgba(255,255,255,.48);font-size:12px}
    :focus-visible{outline:3px solid rgba(227,110,88,.45);outline-offset:3px}
    @media(max-width:1024px){
      .main-nav{gap:15px}
      .hero-grid,.intro-grid,.feature-layout,.news-layout{gap:35px}
      .movie-grid{grid-template-columns:repeat(3,1fr)}
      .channel-grid{grid-template-columns:repeat(2,1fr)}
      .footer-grid{grid-template-columns:1.4fr repeat(3,1fr);gap:24px}
    }
    @media(max-width:768px){
      .container{width:min(var(--container),calc(100% - 32px))}
      .nav-wrap{min-height:68px}
      .menu-toggle{display:block;margin-left:auto}
      .main-nav{display:none;position:absolute;left:16px;right:16px;top:68px;flex-direction:column;align-items:stretch;gap:0;padding:10px;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
      .main-nav.open{display:flex}
      .main-nav a{padding:11px 13px}
      .hero{padding:65px 0}
      .hero-grid,.intro-grid,.feature-layout,.news-layout{grid-template-columns:1fr}
      .hero-sheet{margin:5px auto 0;transform:none}
      section{padding:62px 0}
      .section-head{display:block}
      .section-head p{margin-top:12px}
      .movie-grid{grid-template-columns:repeat(2,1fr);gap:18px}
      .ranking-list{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr 1fr}
      .footer-brand{grid-column:1/-1}
      .cta-inner{display:block}
      .cta .button{margin-top:20px}
    }
    @media(max-width:520px){
      .brand-name{font-size:13px;max-width:140px}
      .hero h1{font-size:39px}
      .hero-lead{font-size:15px}
      .hero-actions .button{width:100%}
      .channel-grid,.faq-grid,.stats{grid-template-columns:1fr}
      .movie-grid{gap:14px}
      .movie-title{font-size:14px}
      .feature-overlay{padding:22px}
      .feature-overlay h3{font-size:25px}
      .mini-feature{grid-template-columns:105px 1fr}
      .rank-item{grid-template-columns:32px 1fr auto}
      .rank-tag{display:none}
      .footer-grid{grid-template-columns:1fr}
      .footer-brand{grid-column:auto}
    }