/* roulang page: index */
:root {
            --orange: #f58a23;
            --orange-deep: #e66b1d;
            --gold: #ffc94d;
            --leaf: #78b84b;
            --leaf-light: #e8f4dc;
            --plum: #292237;
            --plum-soft: #4c425e;
            --ink: #282331;
            --muted: #756d7c;
            --paper: #fffdf8;
            --cream: #fff7e8;
            --warm: #f7f2ea;
            --line: #eadfd2;
            --white: #ffffff;
            --pink: #c44f72;
            --shadow: 0 18px 50px rgba(67, 44, 26, .09);
            --shadow-hover: 0 22px 55px rgba(67, 44, 26, .16);
            --radius-xl: 28px;
            --radius-lg: 22px;
            --radius-md: 16px;
            --container: 1240px;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            min-width: 320px;
            color: var(--ink);
            background: var(--paper);
            font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }

        body.menu-open {
            overflow: hidden;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        img {
            display: block;
            max-width: 100%;
        }

        button,
        input {
            font: inherit;
        }

        button {
            border: 0;
            cursor: pointer;
        }

        :focus-visible {
            outline: 3px solid rgba(245, 138, 35, .42);
            outline-offset: 3px;
        }

        .container {
            width: min(calc(100% - 40px), var(--container));
            margin: 0 auto;
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 50;
            border-bottom: 1px solid rgba(234, 223, 210, .8);
            background: rgba(255, 253, 248, .92);
            backdrop-filter: blur(18px);
        }

        .nav-wrap {
            min-height: 78px;
            display: flex;
            align-items: center;
            gap: 28px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            flex: 0 0 auto;
        }

        .brand-mark {
            width: 42px;
            height: 42px;
            display: grid;
            place-items: center;
            border-radius: 14px;
            color: var(--white);
            font-weight: 900;
            font-size: 13px;
            letter-spacing: 1px;
            background: linear-gradient(135deg, var(--orange), var(--gold));
            box-shadow: 0 8px 18px rgba(245, 138, 35, .28);
        }

        .brand-name {
            color: var(--plum);
            font-size: 17px;
            font-weight: 800;
            letter-spacing: .2px;
            white-space: nowrap;
        }

        .main-nav {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-left: auto;
        }

        .main-nav a {
            min-height: 42px;
            display: inline-flex;
            align-items: center;
            padding: 0 13px;
            border-radius: 12px;
            color: var(--plum-soft);
            font-size: 14px;
            font-weight: 700;
            transition: color .2s ease, background .2s ease;
        }

        .main-nav a:hover,
        .main-nav a.active {
            color: var(--orange-deep);
            background: var(--cream);
        }

        .nav-cta,
        .button-primary {
            min-height: 46px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 0 19px;
            border-radius: 14px;
            color: var(--white);
            background: linear-gradient(135deg, var(--orange), var(--orange-deep));
            box-shadow: 0 10px 22px rgba(230, 107, 29, .22);
            font-size: 14px;
            font-weight: 800;
            transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
        }

        .nav-cta:hover,
        .button-primary:hover {
            transform: translateY(-2px);
            filter: brightness(1.04);
            box-shadow: 0 14px 28px rgba(230, 107, 29, .3);
        }

        .button-secondary {
            min-height: 46px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 0 19px;
            border: 1px solid var(--line);
            border-radius: 14px;
            color: var(--plum);
            background: rgba(255, 255, 255, .78);
            font-size: 14px;
            font-weight: 800;
            transition: transform .2s ease, border-color .2s ease, background .2s ease;
        }

        .button-secondary:hover {
            transform: translateY(-2px);
            border-color: var(--orange);
            background: var(--cream);
        }

        .menu-toggle {
            display: none;
            width: 44px;
            height: 44px;
            margin-left: auto;
            border-radius: 13px;
            color: var(--plum);
            background: var(--cream);
            font-size: 22px;
        }

        .hero {
            position: relative;
            overflow: hidden;
            padding: 72px 0 64px;
            background:
                linear-gradient(90deg, rgba(255, 253, 248, .98) 0%, rgba(255, 253, 248, .9) 44%, rgba(255, 253, 248, .32) 100%),
                url('/assets/images/64b48ab4b6aa1185.jpg') center/cover no-repeat;
        }

        .hero::after {
            position: absolute;
            right: 5%;
            bottom: -110px;
            width: 320px;
            height: 320px;
            content: "";
            border-radius: 50%;
            background: rgba(120, 184, 75, .16);
            filter: blur(3px);
        }

        .hero-grid {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            align-items: center;
            gap: 64px;
        }

        .eyebrow,
        .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--orange-deep);
            font-size: 13px;
            font-weight: 900;
            letter-spacing: 1.2px;
        }

        .eyebrow::before,
        .section-kicker::before {
            width: 25px;
            height: 3px;
            content: "";
            border-radius: 5px;
            background: linear-gradient(90deg, var(--orange), var(--gold));
        }

        .hero h1 {
            max-width: 620px;
            margin-top: 17px;
            color: var(--plum);
            font-size: clamp(42px, 5.2vw, 72px);
            line-height: 1.13;
            letter-spacing: 0;
        }

        .hero h1 strong {
            color: var(--orange-deep);
            font-weight: 900;
        }

        .hero-lead {
            max-width: 620px;
            margin-top: 22px;
            color: var(--plum-soft);
            font-size: 17px;
            line-height: 1.9;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 30px;
        }

        .hero-signals {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 27px;
        }

        .signal {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-height: 35px;
            padding: 0 12px;
            border: 1px solid rgba(120, 184, 75, .28);
            border-radius: 999px;
            color: #587c38;
            background: rgba(232, 244, 220, .8);
            font-size: 12px;
            font-weight: 800;
        }

        .signal b {
            color: var(--plum);
            font-size: 14px;
        }

        .hero-collage {
            position: relative;
            min-height: 455px;
        }

        .poster {
            position: absolute;
            overflow: hidden;
            border: 7px solid rgba(255, 255, 255, .9);
            border-radius: 24px;
            background: var(--white);
            box-shadow: var(--shadow-hover);
        }

        .poster img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .poster-main {
            top: 24px;
            left: 9%;
            width: 49%;
            height: 352px;
            transform: rotate(-4deg);
        }

        .poster-side {
            top: 82px;
            right: 2%;
            width: 38%;
            height: 260px;
            transform: rotate(6deg);
        }

        .poster-bottom {
            right: 18%;
            bottom: 3px;
            width: 35%;
            height: 175px;
            transform: rotate(-2deg);
        }

        .floating-info {
            position: absolute;
            right: 10%;
            bottom: 38px;
            z-index: 3;
            width: 190px;
            padding: 15px;
            border: 1px solid rgba(255, 255, 255, .76);
            border-radius: 18px;
            color: var(--white);
            background: rgba(41, 34, 55, .91);
            box-shadow: 0 14px 30px rgba(41, 34, 55, .22);
        }

        .floating-info small {
            display: block;
            color: #d9d1df;
            font-size: 11px;
        }

        .floating-info strong {
            display: block;
            margin-top: 3px;
            font-size: 22px;
        }

        .floating-info span {
            display: inline-block;
            margin-top: 5px;
            padding: 2px 8px;
            border-radius: 999px;
            color: #fff3c7;
            background: rgba(245, 138, 35, .26);
            font-size: 11px;
        }

        section {
            padding: 86px 0;
        }

        .section-head {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 25px;
            margin-bottom: 30px;
        }

        .section-head h2 {
            margin-top: 8px;
            color: var(--plum);
            font-size: clamp(28px, 3.2vw, 42px);
            line-height: 1.25;
        }

        .section-head p {
            max-width: 590px;
            color: var(--muted);
            font-size: 15px;
        }

        .section-link {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            flex: 0 0 auto;
            color: var(--orange-deep);
            font-size: 14px;
            font-weight: 800;
        }

        .section-link:hover {
            color: var(--pink);
        }

        .benefit-section {
            padding-top: 58px;
            background: var(--warm);
        }

        .benefit-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
        }

        .benefit-card {
            position: relative;
            min-height: 210px;
            padding: 27px;
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background: var(--white);
            box-shadow: 0 8px 25px rgba(67, 44, 26, .04);
            transition: transform .25s ease, box-shadow .25s ease;
        }

        .benefit-card:hover,
        .media-card:hover,
        .category-card:hover,
        .news-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }

        .benefit-card::after {
            position: absolute;
            right: -30px;
            bottom: -45px;
            width: 130px;
            height: 130px;
            content: "";
            border-radius: 50%;
            background: var(--leaf-light);
        }

        .icon-box {
            position: relative;
            z-index: 1;
            width: 45px;
            height: 45px;
            display: grid;
            place-items: center;
            border-radius: 15px;
            color: var(--orange-deep);
            background: var(--cream);
            font-size: 21px;
        }

        .benefit-card h3 {
            position: relative;
            z-index: 1;
            margin-top: 17px;
            color: var(--plum);
            font-size: 20px;
        }

        .benefit-card p {
            position: relative;
            z-index: 1;
            margin-top: 7px;
            color: var(--muted);
            font-size: 14px;
        }

        .data-badge {
            position: relative;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            margin-top: 17px;
            padding: 4px 10px;
            border-radius: 999px;
            color: #587c38;
            background: var(--leaf-light);
            font-size: 12px;
            font-weight: 800;
        }

        .latest-section {
            background: var(--paper);
        }

        .media-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .media-card {
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background: var(--white);
            box-shadow: 0 8px 25px rgba(67, 44, 26, .04);
            transition: transform .25s ease, box-shadow .25s ease;
        }

        .cover {
            position: relative;
            aspect-ratio: 16 / 10;
            overflow: hidden;
            background: var(--warm);
        }

        .cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .35s ease, filter .35s ease;
        }

        .media-card:hover .cover img {
            transform: scale(1.04);
            filter: saturate(1.08) brightness(1.04);
        }

        .cover-label {
            position: absolute;
            top: 12px;
            left: 12px;
            padding: 3px 9px;
            border-radius: 999px;
            color: var(--white);
            background: rgba(41, 34, 55, .78);
            font-size: 11px;
            font-weight: 800;
        }

        .media-body {
            padding: 15px 16px 17px;
        }

        .media-title {
            display: -webkit-box;
            overflow: hidden;
            min-height: 28px;
            color: var(--plum);
            font-size: 16px;
            font-weight: 800;
            line-height: 1.5;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

        .media-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-top: 10px;
        }

        .tag-group {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }

        .tag {
            display: inline-flex;
            align-items: center;
            min-height: 23px;
            padding: 0 7px;
            border-radius: 7px;
            font-size: 10px;
            font-weight: 800;
        }

        .tag-hd {
            color: #287c61;
            background: #dff4e9;
        }

        .tag-blue {
            color: #805276;
            background: #f2e2ef;
        }

        .tag-update {
            color: #a96010;
            background: #fff0cb;
        }

        .tag-type {
            color: #665a78;
            background: #eeeaf5;
        }

        .rating {
            color: var(--orange-deep);
            font-size: 13px;
            font-weight: 900;
            white-space: nowrap;
        }

        .latest-more {
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }

        .popular-section {
            background: var(--cream);
        }

        .popular-layout {
            display: grid;
            grid-template-columns: 1.18fr .82fr;
            gap: 20px;
        }

        .featured-card {
            position: relative;
            min-height: 420px;
            overflow: hidden;
            border-radius: var(--radius-xl);
            background: var(--plum);
        }

        .featured-card img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: .8;
            transition: transform .4s ease;
        }

        .featured-card:hover img {
            transform: scale(1.04);
        }

        .featured-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            justify-content: end;
            padding: 34px;
            background: linear-gradient(0deg, rgba(41, 34, 55, .92), transparent 65%);
        }

        .featured-overlay h3 {
            max-width: 420px;
            color: var(--white);
            font-size: 31px;
            line-height: 1.35;
        }

        .featured-overlay p {
            max-width: 460px;
            margin-top: 9px;
            color: #e7e1ec;
            font-size: 14px;
        }

        .popular-small {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

        .popular-item {
            overflow: hidden;
            border: 1px solid rgba(234, 223, 210, .9);
            border-radius: var(--radius-md);
            background: var(--white);
        }

        .popular-item .cover {
            aspect-ratio: 1.45 / 1;
        }

        .popular-item .media-body {
            padding: 12px 13px 14px;
        }

        .popular-item .media-title {
            font-size: 14px;
        }

        .scene-section {
            background: var(--paper);
        }

        .scene-track {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            border: 1px solid var(--line);
            border-radius: var(--radius-xl);
            background: var(--white);
            box-shadow: var(--shadow);
        }

        .scene-item {
            min-height: 210px;
            padding: 29px 25px;
            border-right: 1px solid var(--line);
        }

        .scene-item:last-child {
            border-right: 0;
        }

        .scene-no {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: var(--orange-deep);
            font-size: 12px;
            font-weight: 900;
        }

        .scene-no b {
            display: grid;
            width: 36px;
            height: 36px;
            place-items: center;
            border-radius: 12px;
            color: var(--white);
            background: linear-gradient(135deg, var(--orange), var(--gold));
            font-size: 16px;
        }

        .scene-item h3 {
            margin-top: 25px;
            color: var(--plum);
            font-size: 18px;
        }

        .scene-item p {
            margin-top: 8px;
            color: var(--muted);
            font-size: 14px;
        }

        .category-section {
            background: var(--warm);
        }

        .category-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
        }

        .category-card {
            position: relative;
            min-height: 215px;
            padding: 25px;
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background: var(--white);
            transition: transform .25s ease, box-shadow .25s ease;
        }

        .category-card:nth-child(2) {
            background: #fff8e9;
        }

        .category-card:nth-child(3) {
            background: #f1f8ea;
        }

        .category-card:nth-child(4) {
            background: #f6eef5;
        }

        .category-card h3 {
            color: var(--plum);
            font-size: 20px;
        }

        .category-card p {
            margin-top: 10px;
            color: var(--muted);
            font-size: 14px;
        }

        .category-count {
            position: absolute;
            right: 20px;
            bottom: 19px;
            color: var(--orange-deep);
            font-size: 12px;
            font-weight: 900;
        }

        .rank-section {
            background: var(--plum);
        }

        .rank-section .section-kicker,
        .rank-section .section-head h2 {
            color: var(--white);
        }

        .rank-section .section-head p {
            color: #c9c1d1;
        }

        .rank-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px 18px;
        }

        .rank-item {
            display: grid;
            grid-template-columns: 45px 1fr auto auto;
            align-items: center;
            gap: 13px;
            min-height: 70px;
            padding: 10px 16px 10px 11px;
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: 15px;
            background: rgba(255, 255, 255, .065);
            transition: background .2s ease, transform .2s ease;
        }

        .rank-item:hover {
            transform: translateX(3px);
            background: rgba(255, 255, 255, .11);
        }

        .rank-number {
            display: grid;
            width: 42px;
            height: 42px;
            place-items: center;
            border-radius: 13px;
            color: #e3dce9;
            background: rgba(255, 255, 255, .1);
            font-size: 17px;
            font-weight: 900;
        }

        .rank-item:nth-child(1) .rank-number,
        .rank-item:nth-child(2) .rank-number,
        .rank-item:nth-child(3) .rank-number {
            color: var(--plum);
            background: linear-gradient(135deg, var(--gold), var(--orange));
        }

        .rank-name {
            min-width: 0;
            color: var(--white);
            font-size: 15px;
            font-weight: 800;
        }

        .rank-name small {
            display: block;
            overflow: hidden;
            color: #aaa0b5;
            font-size: 11px;
            font-weight: 500;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .rank-hot {
            color: #ffc876;
            font-size: 12px;
            white-space: nowrap;
        }

        .rank-score {
            min-width: 40px;
            color: #e9f3c8;
            font-size: 13px;
            font-weight: 800;
            text-align: right;
        }

        .signal-section {
            background: var(--paper);
        }

        .signal-grid {
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 20px;
        }

        .signal-panel {
            min-height: 260px;
            padding: 31px;
            border-radius: var(--radius-xl);
            background: linear-gradient(135deg, #fff2cf, #fffdf8);
            box-shadow: var(--shadow);
        }

        .signal-panel.dark {
            color: var(--white);
            background: linear-gradient(135deg, #4c3858, var(--plum));
        }

        .signal-panel h3 {
            font-size: 22px;
        }

        .signal-panel p {
            max-width: 530px;
            margin-top: 9px;
            color: var(--muted);
            font-size: 14px;
        }

        .signal-panel.dark p {
            color: #d6cddd;
        }

        .big-stat {
            display: flex;
            align-items: end;
            gap: 13px;
            margin-top: 30px;
        }

        .big-stat strong {
            color: var(--orange-deep);
            font-size: 54px;
            line-height: 1;
        }

        .dark .big-stat strong {
            color: var(--gold);
        }

        .big-stat span {
            padding-bottom: 4px;
            color: var(--muted);
            font-size: 13px;
        }

        .dark .big-stat span {
            color: #d6cddd;
        }

        .chip-row {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
            margin-top: 25px;
        }

        .chip {
            padding: 6px 11px;
            border-radius: 999px;
            color: var(--plum);
            background: rgba(255, 255, 255, .78);
            font-size: 12px;
            font-weight: 800;
        }

        .dark .chip {
            color: #f4e9bd;
            background: rgba(255, 255, 255, .1);
        }

        .compare-section {
            background: var(--warm);
        }

        .compare-table {
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius-xl);
            background: var(--white);
            box-shadow: var(--shadow);
        }

        .compare-row {
            display: grid;
            grid-template-columns: 1.1fr 1fr 1fr;
            align-items: center;
            min-height: 70px;
            border-bottom: 1px solid var(--line);
        }

        .compare-row:last-child {
            border-bottom: 0;
        }

        .compare-row > div {
            padding: 16px 22px;
            color: var(--muted);
            font-size: 14px;
        }

        .compare-row > div:first-child {
            color: var(--plum);
            font-weight: 800;
        }

        .compare-row.head {
            background: var(--plum);
        }

        .compare-row.head > div {
            color: var(--white);
            font-size: 13px;
            font-weight: 800;
        }

        .check {
            color: var(--leaf);
            font-size: 18px;
            font-weight: 900;
        }

        .news-section {
            background: var(--paper);
        }

        .news-layout {
            display: grid;
            grid-template-columns: .95fr 1.05fr;
            gap: 24px;
        }

        .news-feature {
            overflow: hidden;
            border-radius: var(--radius-xl);
            background: var(--plum);
        }

        .news-feature .news-image {
            aspect-ratio: 1.45 / 1;
        }

        .news-image {
            overflow: hidden;
            background: var(--warm);
        }

        .news-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .35s ease;
        }

        .news-feature:hover img,
        .news-card:hover img {
            transform: scale(1.04);
        }

        .news-feature-body {
            padding: 25px;
            color: var(--white);
        }

        .news-feature-body h3 {
            margin-top: 10px;
            font-size: 23px;
            line-height: 1.45;
        }

        .news-feature-body p {
            margin-top: 9px;
            color: #d2c9d9;
            font-size: 14px;
        }

        .news-list {
            display: grid;
            gap: 12px;
        }

        .news-card {
            display: grid;
            grid-template-columns: 132px 1fr;
            gap: 17px;
            align-items: center;
            min-height: 112px;
            padding: 10px;
            border: 1px solid var(--line);
            border-radius: 18px;
            background: var(--white);
            transition: transform .25s ease, box-shadow .25s ease;
        }

        .news-card .news-image {
            height: 90px;
            border-radius: 12px;
        }

        .news-card h3 {
            color: var(--plum);
            font-size: 15px;
            line-height: 1.5;
        }

        .news-date {
            display: inline-block;
            margin-top: 6px;
            color: var(--muted);
            font-size: 11px;
        }

        .news-type {
            display: inline-flex;
            margin-left: 7px;
            padding: 2px 7px;
            border-radius: 6px;
            color: var(--orange-deep);
            background: var(--cream);
            font-size: 10px;
            font-weight: 800;
        }

        .timeline-section {
            background: var(--cream);
        }

        .timeline {
            position: relative;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .timeline::before {
            position: absolute;
            top: 22px;
            right: 10%;
            left: 10%;
            height: 2px;
            content: "";
            background: linear-gradient(90deg, var(--orange), var(--leaf));
        }

        .timeline-item {
            position: relative;
            z-index: 1;
            padding: 0 24px 25px;
            text-align: center;
        }

        .timeline-dot {
            width: 45px;
            height: 45px;
            display: grid;
            place-items: center;
            margin: 0 auto;
            border: 7px solid var(--cream);
            border-radius: 50%;
            color: var(--white);
            background: var(--orange);
            font-size: 12px;
            font-weight: 900;
            box-shadow: 0 0 0 1px var(--orange);
        }

        .timeline-item:nth-child(2) .timeline-dot {
            background: var(--leaf);
            box-shadow: 0 0 0 1px var(--leaf);
        }

        .timeline-item:nth-child(3) .timeline-dot {
            background: var(--pink);
            box-shadow: 0 0 0 1px var(--pink);
        }

        .timeline-item h3 {
            margin-top: 22px;
            color: var(--plum);
            font-size: 19px;
        }

        .timeline-item p {
            margin-top: 7px;
            color: var(--muted);
            font-size: 14px;
        }

        .faq-section {
            background: var(--paper);
        }

        .faq-list {
            display: grid;
            gap: 12px;
            max-width: 940px;
            margin: 0 auto;
        }

        .faq-item {
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: 17px;
            background: var(--white);
        }

        .faq-question {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 19px 23px;
            color: var(--plum);
            background: transparent;
            font-size: 16px;
            font-weight: 800;
            text-align: left;
        }

        .faq-question span:last-child {
            color: var(--orange-deep);
            font-size: 24px;
            font-weight: 400;
            transition: transform .2s ease;
        }

        .faq-answer {
            display: none;
            padding: 0 23px 20px;
            color: var(--muted);
            font-size: 14px;
        }

        .faq-item.open {
            border-color: rgba(245, 138, 35, .5);
            box-shadow: 0 10px 25px rgba(245, 138, 35, .08);
        }

        .faq-item.open .faq-answer {
            display: block;
        }

        .faq-item.open .faq-question span:last-child {
            transform: rotate(45deg);
        }

        .question-section {
            padding-top: 40px;
            background: var(--warm);
        }

        .question-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px;
        }

        .question-card {
            padding: 22px;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: var(--white);
        }

        .question-card strong {
            display: block;
            color: var(--plum);
            font-size: 16px;
            line-height: 1.5;
        }

        .question-card p {
            margin-top: 8px;
            color: var(--muted);
            font-size: 13px;
        }

        .question-card a {
            display: inline-flex;
            margin-top: 13px;
            color: var(--orange-deep);
            font-size: 12px;
            font-weight: 800;
        }

        .assurance-section {
            padding: 34px 0;
            background: var(--paper);
        }

        .assurance-bar {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            padding: 20px 25px;
            border: 1px solid var(--line);
            border-radius: 20px;
            background: var(--white);
            box-shadow: 0 8px 24px rgba(67, 44, 26, .05);
        }

        .assurance-item {
            display: flex;
            align-items: center;
            gap: 11px;
            color: var(--plum);
            font-size: 13px;
            font-weight: 800;
        }

        .assurance-item b {
            display: grid;
            width: 32px;
            height: 32px;
            place-items: center;
            border-radius: 10px;
            color: var(--leaf);
            background: var(--leaf-light);
            font-size: 15px;
        }

        .site-footer {
            padding: 65px 0 95px;
            color: #d8d0df;
            background: var(--plum);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.45fr 1fr 1fr 1fr;
            gap: 45px;
        }

        .footer-brand .brand-name {
            color: var(--white);
        }

        .footer-brand p {
            max-width: 310px;
            margin-top: 17px;
            color: #b9afc2;
            font-size: 13px;
        }

        .footer-col h3 {
            color: var(--white);
            font-size: 15px;
        }

        .footer-col ul {
            display: grid;
            gap: 8px;
            margin-top: 15px;
            list-style: none;
        }

        .footer-col a {
            color: #b9afc2;
            font-size: 13px;
            transition: color .2s ease;
        }

        .footer-col a:hover {
            color: var(--gold);
        }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            margin-top: 45px;
            padding-top: 22px;
            border-top: 1px solid rgba(255, 255, 255, .12);
            color: #9d93a8;
            font-size: 12px;
        }

        .floating-cta {
            position: fixed;
            right: 20px;
            bottom: 18px;
            left: 20px;
            z-index: 40;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            max-width: 930px;
            margin: 0 auto;
            padding: 11px 13px 11px 21px;
            border: 1px solid rgba(255, 255, 255, .16);
            border-radius: 18px;
            color: var(--white);
            background: rgba(41, 34, 55, .95);
            box-shadow: 0 15px 38px rgba(41, 34, 55, .24);
            backdrop-filter: blur(12px);
        }

        .floating-cta p {
            font-size: 14px;
            font-weight: 700;
        }

        .floating-actions {
            display: flex;
            gap: 8px;
        }

        .floating-actions a {
            min-height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 14px;
            border-radius: 11px;
            color: var(--plum);
            background: var(--gold);
            font-size: 12px;
            font-weight: 900;
        }

        .floating-actions a:last-child {
            color: var(--white);
            background: rgba(255, 255, 255, .12);
        }

        @media (max-width: 1100px) {
            .main-nav a {
                padding: 0 8px;
                font-size: 13px;
            }
        }

        @media (max-width: 900px) {
            .main-nav {
                gap: 2px;
            }

            .main-nav a {
                padding: 0 7px;
                font-size: 12px;
            }

            .brand-name {
                font-size: 15px;
            }

            .nav-cta {
                padding: 0 12px;
                font-size: 12px;
            }

            .hero-grid {
                grid-template-columns: 1fr .8fr;
                gap: 25px;
            }

            .hero h1 {
                font-size: 48px;
            }

            .media-grid,
            .category-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

            .scene-track {
                grid-template-columns: repeat(2, 1fr);
            }

            .scene-item:nth-child(2) {
                border-right: 0;
            }

            .scene-item:nth-child(-n+2) {
                border-bottom: 1px solid var(--line);
            }

            .question-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 700px) {
            :root {
                --section-space: 62px;
            }

            .container {
                width: min(100% - 36px, 560px);
            }

            .site-header {
                min-height: 68px;
            }

            .header-inner {
                min-height: 68px;
            }

            .brand-mark {
                width: 39px;
                height: 39px;
                border-radius: 13px;
                font-size: 13px;
            }

            .brand-name {
                font-size: 14px;
            }

            .menu-toggle {
                display: inline-grid;
                place-items: center;
            }

            .main-nav {
                position: absolute;
                top: calc(100% + 8px);
                right: 18px;
                left: 18px;
                display: none;
                align-items: stretch;
                padding: 13px;
                border: 1px solid var(--line);
                border-radius: 18px;
                background: var(--white);
                box-shadow: var(--shadow-hover);
            }

            .main-nav.is-open {
                display: flex;
                flex-direction: column;
            }

            .main-nav a {
                min-height: 46px;
                padding: 0 13px;
                border-radius: 11px;
                font-size: 14px;
            }

            .main-nav a.active::after {
                display: none;
            }

            .header-actions .nav-cta {
                display: none;
            }

            .hero {
                padding: 48px 0 57px;
            }

            .hero-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .hero h1 {
                font-size: clamp(40px, 12vw, 54px);
            }

            .hero-copy {
                font-size: 15px;
            }

            .hero-actions {
                gap: 9px;
            }

            .hero-actions .btn {
                flex: 1;
                padding: 0 12px;
                font-size: 13px;
            }

            .hero-collage {
                min-height: 340px;
                margin: 2px 0 0;
            }

            .poster-main {
                top: 20px;
                left: 8%;
                width: 50%;
                height: 255px;
            }

            .poster-side {
                top: 55px;
                right: 3%;
                width: 38%;
                height: 200px;
            }

            .poster-bottom {
                right: 18%;
                bottom: 0;
                width: 37%;
                height: 128px;
            }

            .floating-info {
                right: 4%;
                bottom: 18px;
                width: 155px;
                padding: 12px;
            }

            .floating-info strong {
                font-size: 19px;
            }

            section {
                padding: var(--section-space) 0;
            }

            .section-head {
                align-items: start;
                flex-direction: column;
                gap: 12px;
                margin-bottom: 22px;
            }

            .section-head h2 {
                font-size: 30px;
            }

            .section-head p {
                font-size: 14px;
            }

            .benefit-section {
                padding-top: 43px;
            }

            .benefit-grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .benefit-card {
                min-height: 0;
                padding: 21px;
            }

            .media-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 12px;
            }

            .media-body {
                padding: 12px;
            }

            .media-title {
                font-size: 14px;
            }

            .media-meta {
                align-items: flex-start;
                flex-direction: column;
                gap: 7px;
            }

            .popular-layout {
                grid-template-columns: 1fr;
            }

            .featured-card {
                min-height: 330px;
            }

            .featured-overlay {
                padding: 23px;
            }

            .featured-overlay h3 {
                font-size: 25px;
            }

            .popular-small {
                gap: 11px;
            }

            .scene-track {
                grid-template-columns: 1fr;
            }

            .scene-item {
                min-height: 0;
                padding: 21px;
                border-right: 0;
                border-bottom: 1px solid var(--line);
            }

            .scene-item:nth-child(2) {
                border-bottom: 1px solid var(--line);
            }

            .scene-item:last-child {
                border-bottom: 0;
            }

            .scene-item h3 {
                margin-top: 15px;
            }

            .category-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 11px;
            }

            .category-card {
                min-height: 205px;
                padding: 19px;
            }

            .category-card h3 {
                font-size: 17px;
            }

            .category-card p {
                font-size: 13px;
            }

            .rank-list {
                grid-template-columns: 1fr;
                gap: 8px;
            }

            .rank-item {
                grid-template-columns: 39px minmax(0, 1fr) auto auto;
                gap: 9px;
                min-height: 64px;
                padding: 8px 10px;
            }

            .rank-number {
                width: 37px;
                height: 37px;
            }

            .rank-name {
                font-size: 14px;
            }

            .rank-hot {
                font-size: 11px;
            }

            .signal-grid {
                grid-template-columns: 1fr;
                gap: 13px;
            }

            .signal-panel {
                min-height: 0;
                padding: 24px;
            }

            .big-stat {
                margin-top: 23px;
            }

            .compare-table {
                border-radius: 17px;
            }

            .compare-row {
                grid-template-columns: 1fr 1fr 1fr;
                min-height: 63px;
            }

            .compare-row > div {
                padding: 12px 9px;
                font-size: 11px;
                overflow-wrap: anywhere;
            }

            .compare-row.head > div {
                font-size: 11px;
            }

            .news-layout {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .news-feature-body {
                padding: 20px;
            }

            .news-feature-body h3 {
                font-size: 20px;
            }

            .news-card {
                grid-template-columns: 100px minmax(0, 1fr);
                gap: 12px;
                min-height: 95px;
                padding: 8px;
            }

            .news-card .news-image {
                height: 78px;
            }

            .news-card h3 {
                font-size: 13px;
            }

            .timeline {
                grid-template-columns: 1fr;
                gap: 0;
            }

            .timeline::before {
                top: 20px;
                bottom: 22px;
                left: 22px;
                width: 2px;
                height: auto;
            }

            .timeline-item {
                display: grid;
                grid-template-columns: 45px 1fr;
                column-gap: 16px;
                padding: 0 0 23px;
                text-align: left;
            }

            .timeline-dot {
                grid-row: span 2;
                margin: 0;
            }

            .timeline-item h3 {
                margin-top: 3px;
            }

            .timeline-item p {
                margin-top: 4px;
            }

            .faq-question {
                padding: 17px;
                font-size: 14px;
            }

            .faq-answer {
                padding: 0 17px 17px;
                font-size: 13px;
            }

            .question-section {
                padding-top: 30px;
            }

            .question-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .question-card {
                padding: 18px;
            }

            .assurance-bar {
                grid-template-columns: repeat(2, 1fr);
                gap: 14px 10px;
                padding: 17px;
            }

            .assurance-item {
                gap: 8px;
                font-size: 12px;
            }

            .assurance-item b {
                flex: 0 0 30px;
                width: 30px;
                height: 30px;
            }

            .site-footer {
                padding: 48px 0 125px;
            }

            .footer-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 30px 20px;
            }

            .footer-brand {
                grid-column: 1 / -1;
            }

            .footer-bottom {
                flex-direction: column;
                gap: 7px;
                margin-top: 30px;
            }

            .floating-cta {
                right: 10px;
                bottom: max(9px, env(safe-area-inset-bottom));
                left: 10px;
                gap: 9px;
                padding: 9px;
                border-radius: 15px;
            }

            .floating-cta p {
                max-width: 112px;
                font-size: 11px;
                line-height: 1.4;
            }

            .floating-actions {
                flex: 1;
                gap: 6px;
            }

            .floating-actions a {
                flex: 1;
                min-height: 40px;
                padding: 0 7px;
                font-size: 11px;
                white-space: nowrap;
            }
        }

        @media (max-width: 380px) {
            .container {
                width: calc(100% - 30px);
            }

            .brand-name {
                max-width: 176px;
                font-size: 13px;
            }

            .hero-actions {
                align-items: stretch;
                flex-direction: column;
            }

            .hero-actions .btn {
                width: 100%;
            }

            .floating-cta p {
                max-width: 85px;
            }

            .floating-actions a {
                font-size: 10px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                scroll-behavior: auto !important;
                transition-duration: .01ms !important;
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
            }
        }

/* roulang page: category1 */
:root {
      --orange:#f58a23; --orange-deep:#e66b1d; --gold:#ffc94d; --leaf:#78b84b;
      --leaf-light:#e8f4dc; --plum:#292237; --plum-soft:#4c425e; --ink:#282331;
      --muted:#756d7c; --paper:#fffdf8; --cream:#fff7e8; --warm:#f7f2ea;
      --line:#eadfd2; --white:#fff; --pink:#c44f72;
      --shadow:0 18px 50px rgba(67,44,26,.09); --shadow-hover:0 22px 55px rgba(67,44,26,.16);
      --radius-xl:28px; --radius-lg:22px; --radius-md:16px; --container:1240px;
      --section-space:62px;
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth;scroll-padding-top:96px}
    body{min-width:320px;margin:0;color:var(--ink);background:var(--paper);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
    body.menu-open{overflow:hidden}
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%}
    button{font:inherit}
    button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid rgba(245,138,35,.55);outline-offset:3px}
    .container{width:min(calc(100% - 40px),var(--container));margin:0 auto}
    .site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(234,223,210,.8);background:rgba(255,253,248,.94);backdrop-filter:blur(18px)}
    .nav-wrap{min-height:78px;display:flex;align-items:center;gap:28px}
    .brand{display:inline-flex;align-items:center;gap:11px;flex:0 0 auto}
    .brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;color:var(--white);font-weight:900;font-size:13px;background:linear-gradient(135deg,var(--orange),var(--gold));box-shadow:0 8px 18px rgba(245,138,35,.28)}
    .brand-name{color:var(--plum);font-size:17px;font-weight:800;white-space:nowrap}
    .main-nav{display:flex;align-items:center;gap:5px;margin-left:auto}
    .main-nav a{min-height:42px;display:inline-flex;align-items:center;padding:0 13px;border-radius:12px;color:var(--plum-soft);font-size:14px;font-weight:700;transition:color .2s,background .2s}
    .main-nav a:hover,.main-nav a.active{color:var(--orange-deep);background:var(--cream)}
    .nav-cta,.button-primary{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 19px;border:0;border-radius:14px;color:var(--white);background:linear-gradient(135deg,var(--orange),var(--orange-deep));box-shadow:0 10px 22px rgba(230,107,29,.22);font-size:14px;font-weight:800;transition:transform .2s,box-shadow .2s,filter .2s}
    .nav-cta:hover,.button-primary:hover{transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 14px 28px rgba(230,107,29,.3)}
    .button-secondary{min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:0 19px;border:1px solid var(--line);border-radius:14px;color:var(--plum);background:rgba(255,255,255,.8);font-size:14px;font-weight:800;transition:transform .2s,border-color .2s,background .2s}
    .button-secondary:hover{transform:translateY(-2px);border-color:var(--orange);background:var(--cream)}
    .menu-toggle{display:none;width:44px;height:44px;margin-left:auto;border:0;border-radius:13px;color:var(--plum);background:var(--cream);font-size:22px;cursor:pointer}
    .hero{position:relative;overflow:hidden;padding:52px 0 48px;background:linear-gradient(90deg,rgba(255,253,248,.97) 0%,rgba(255,253,248,.90) 53%,rgba(255,253,248,.37) 100%),url('/assets/images/ee8e8a967b65cac5.jpg') center 44%/cover no-repeat}
    .hero::after{position:absolute;right:-100px;bottom:-200px;width:430px;height:430px;content:"";border-radius:50%;background:rgba(120,184,75,.13);filter:blur(4px);pointer-events:none}
    .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.04fr .96fr;align-items:center;gap:66px}
    .eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--orange-deep);font-size:13px;font-weight:900}
    .eyebrow::before,.section-kicker::before{width:8px;height:8px;content:"";border-radius:50%;background:var(--leaf);box-shadow:0 0 0 4px rgba(120,184,75,.14)}
    h1,h2,h3,p{margin-top:0}
    .hero h1{max-width:620px;margin:14px 0 12px;color:var(--plum);font-size:clamp(36px,4.3vw,58px);line-height:1.2;font-weight:900}
    .highlight{color:var(--orange-deep)}
    .hero-subtitle{margin-bottom:10px;color:var(--plum-soft);font-size:19px;font-weight:800}
    .hero-copy{max-width:565px;margin:0 0 23px;color:var(--muted);line-height:1.85}
    .hero-actions{display:flex;flex-wrap:wrap;gap:11px}
    .hero-visual{position:relative;min-height:355px;display:grid;grid-template-columns:1fr .8fr;grid-template-rows:1fr .75fr;gap:14px;padding:18px;border:1px solid rgba(255,255,255,.8);border-radius:var(--radius-xl);background:rgba(255,255,255,.58);box-shadow:var(--shadow);backdrop-filter:blur(8px)}
    .visual-image{position:relative;overflow:hidden;min-height:140px;border-radius:20px;background:var(--warm)}
    .visual-image:first-child{grid-row:span 2}
    .visual-image img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
    .visual-image::after{position:absolute;inset:35% 0 0;content:"";background:linear-gradient(transparent,rgba(41,34,55,.72))}
    .visual-label{position:absolute;z-index:1;right:14px;bottom:12px;left:14px;color:#fff;font-size:15px;font-weight:800}
    .visual-label small{display:block;color:rgba(255,255,255,.8);font-size:12px;font-weight:600}
    .floating-badge{position:absolute;z-index:2;top:8px;right:4px;padding:9px 13px;border:1px solid rgba(255,255,255,.8);border-radius:14px;background:#fff;color:var(--plum);box-shadow:var(--shadow);font-size:12px;font-weight:800}
    .floating-badge strong{color:var(--orange-deep);font-size:18px}
    main section{padding:var(--section-space) 0}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:27px}
    .section-head h2{margin:7px 0 0;color:var(--plum);font-size:30px;line-height:1.3;font-weight:900}
    .section-head p{max-width:510px;margin:0;color:var(--muted);font-size:14px}
    .overview{padding:28px 0 35px;background:#fff}
    .overview-row{display:grid;grid-template-columns:1.1fr repeat(3,1fr);align-items:center;gap:15px}
    .overview-intro h2{margin:5px 0 0;color:var(--plum);font-size:24px}
    .stat{min-height:92px;padding:15px 19px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
    .stat strong{display:block;color:var(--orange-deep);font-size:25px;line-height:1.2}
    .stat span{color:var(--muted);font-size:13px;font-weight:700}
    .catalog-section{background:var(--paper)}
    .filter-row{display:flex;flex-wrap:wrap;gap:9px;margin:-5px 0 23px}
    .filter-chip{min-height:38px;padding:0 15px;border:1px solid var(--line);border-radius:999px;color:var(--plum-soft);background:#fff;font-size:13px;font-weight:800}
    .filter-chip.is-active{border-color:transparent;color:#fff;background:var(--plum)}
    .movie-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
    .movie-card{overflow:hidden;border:1px solid rgba(234,223,210,.86);border-radius:21px;background:#fff;box-shadow:0 8px 26px rgba(67,44,26,.045);transition:transform .22s,box-shadow .22s}
    .movie-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}
    .poster{position:relative;overflow:hidden;aspect-ratio:4/5;background:linear-gradient(145deg,#f7e6d0,#e9edda)}
    .poster img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
    .movie-card:hover .poster img{transform:scale(1.025)}
    .poster-tag{position:absolute;top:12px;left:12px;padding:5px 9px;border:1px solid rgba(255,255,255,.5);border-radius:999px;color:#fff;background:rgba(41,34,55,.72);font-size:11px;font-weight:800}
    .movie-info{padding:15px 15px 16px}
    .movie-title{overflow:hidden;margin:0 0 8px;color:var(--plum);font-size:16px;font-weight:900;text-overflow:ellipsis;white-space:nowrap}
    .movie-meta{display:flex;align-items:center;justify-content:space-between;gap:7px;color:var(--muted);font-size:12px}
    .badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
    .badge{display:inline-flex;align-items:center;min-height:24px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:800;line-height:1.4}
    .badge-hd{color:#3d7130;background:var(--leaf-light)}
    .badge-blue{color:#874066;background:#f9e9f0}
    .badge-update{color:#9b5914;background:#fff0d6}
    .rating{color:#ad6416;font-weight:900}
    .list-more{display:flex;justify-content:center;margin-top:28px}
    .timeline-section{background:var(--cream)}
    .timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:var(--radius-xl);background:#fff;box-shadow:var(--shadow)}
    .timeline-item{position:relative;padding:24px 23px 22px}
    .timeline-item+.timeline-item{border-left:1px solid var(--line)}
    .timeline-date{display:inline-flex;align-items:center;gap:7px;color:var(--orange-deep);font-size:12px;font-weight:900}
    .timeline-date::before{width:8px;height:8px;content:"";border-radius:50%;background:var(--orange)}
    .timeline-item h3{margin:10px 0 5px;color:var(--plum);font-size:16px}
    .timeline-item p{margin:0;color:var(--muted);font-size:13px}
    .ranking-section{background:#fff}
    .ranking-layout{display:grid;grid-template-columns:.78fr 1.22fr;gap:48px;align-items:start}
    .ranking-aside{position:relative;overflow:hidden;min-height:350px;padding:29px;border-radius:var(--radius-xl);color:#fff;background:linear-gradient(145deg,rgba(41,34,55,.84),rgba(76,66,94,.82)),url('/assets/images/fb4f4b7070a719d2.jpg') center/cover}
    .ranking-aside .section-kicker{color:#ffd17d}
    .ranking-aside h2{max-width:320px;margin:13px 0;color:#fff;font-size:31px;line-height:1.35}
    .ranking-aside p{max-width:320px;margin:0;color:rgba(255,255,255,.76);font-size:14px}
    .ranking-aside .rank-score{display:inline-flex;align-items:baseline;gap:8px;margin-top:35px;padding:11px 15px;border:1px solid rgba(255,255,255,.22);border-radius:15px;background:rgba(255,255,255,.1)}
    .rank-score strong{color:#ffd17d;font-size:26px}
    .rank-list{border-top:1px solid var(--line)}
    .rank-row{display:grid;grid-template-columns:42px minmax(0,1fr) 75px 58px;align-items:center;gap:13px;min-height:59px;border-bottom:1px solid var(--line)}
    .rank-number{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;color:var(--muted);background:var(--warm);font-size:13px;font-weight:900}
    .rank-row:nth-child(-n+3) .rank-number{color:#fff;background:linear-gradient(135deg,var(--orange),var(--gold))}
    .rank-name{overflow:hidden;color:var(--plum);font-size:14px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
    .rank-heat,.rank-rating{color:var(--muted);font-size:12px;text-align:right}
    .rank-rating{color:var(--orange-deep);font-weight:900}
    .news-section{background:var(--warm)}
    .news-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
    .news-item{display:grid;grid-template-columns:105px 1fr;gap:14px;align-items:center;min-height:116px;padding:12px;border:1px solid rgba(234,223,210,.9);border-radius:18px;background:#fff;transition:transform .2s,box-shadow .2s}
    .news-item:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
    .news-thumb{overflow:hidden;aspect-ratio:1.25;border-radius:12px;background:#e9e2d7}
    .news-thumb img{width:100%;height:100%;object-fit:cover}
    .news-type{color:var(--orange-deep);font-size:11px;font-weight:900}
    .news-item h3{margin:4px 0 5px;color:var(--plum);font-size:14px;line-height:1.55}
    .news-item time{color:var(--muted);font-size:11px}
    .faq-section{background:#fff}
    .faq-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:48px}
    .faq-intro h2{margin:8px 0 11px;color:var(--plum);font-size:30px;line-height:1.35}
    .faq-intro p{color:var(--muted);font-size:14px}
    .faq-list{border-top:1px solid var(--line)}
    .faq-item{border-bottom:1px solid var(--line)}
    .faq-item summary{position:relative;padding:18px 38px 18px 0;color:var(--plum);font-size:15px;font-weight:850;cursor:pointer;list-style:none}
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary::after{position:absolute;right:3px;top:14px;content:"+";color:var(--orange-deep);font-size:24px;font-weight:500}
    .faq-item[open] summary::after{content:"−"}
    .faq-item[open] summary{color:var(--orange-deep)}
    .faq-answer{padding:0 20px 17px 0;color:var(--muted);font-size:14px}
    .closing-section{padding:36px 0 66px;background:var(--paper)}
    .closing-panel{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:30px 34px;border:1px solid #f3d9b8;border-radius:var(--radius-xl);background:linear-gradient(110deg,#fff5e3,#f7f5e9 58%,#eef5e7)}
    .closing-panel h2{margin:0 0 4px;color:var(--plum);font-size:24px}
    .closing-panel p{margin:0;color:var(--muted);font-size:14px}
    .closing-actions{display:flex;flex-wrap:wrap;gap:10px}
    .site-footer{padding:52px 0 19px;color:rgba(255,255,255,.76);background:var(--plum)}
    .footer-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr 1fr;gap:35px;padding-bottom:37px}
    .footer-brand .brand-name{color:#fff}
    .footer-brand p{max-width:320px;margin:17px 0 0;color:rgba(255,255,255,.63);font-size:13px}
    .footer-col h3{margin:3px 0 13px;color:#fff;font-size:14px}
    .footer-col ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
    .footer-col a{color:rgba(255,255,255,.68);font-size:13px;transition:color .2s}
    .footer-col a:hover{color:#ffd17d}
    .footer-bottom{display:flex;justify-content:space-between;gap:16px;padding-top:15px;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.5);font-size:12px}
    @media(max-width:1100px){
      .nav-wrap{gap:14px}.main-nav a{padding:0 8px;font-size:13px}.nav-cta{padding:0 13px}
      .hero-grid{gap:35px}.movie-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
      .news-list{grid-template-columns:repeat(2,minmax(0,1fr))}
    }
    @media(max-width:820px){
      :root{--section-space:48px}
      .nav-wrap{min-height:70px}.nav-cta{display:none}.menu-toggle{display:grid;place-items:center}
      .main-nav{position:fixed;top:78px;right:16px;left:16px;z-index:60;display:none;flex-direction:column;align-items:stretch;gap:5px;margin:0;padding:13px;border:1px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:var(--shadow)}
      .main-nav.is-open{display:flex}.main-nav a{min-height:48px;padding:0 15px;font-size:15px}
      .hero{padding:42px 0}.hero-grid{grid-template-columns:1fr;gap:25px}.hero-visual{min-height:300px}
      .overview-row{grid-template-columns:repeat(3,1fr)}.overview-intro{grid-column:1/-1}
      .timeline{grid-template-columns:repeat(2,1fr)}.timeline-item:nth-child(3){border-left:0;border-top:1px solid var(--line)}
      .timeline-item:nth-child(4){border-top:1px solid var(--line)}
      .ranking-layout,.faq-grid{grid-template-columns:1fr;gap:24px}
      .ranking-aside{min-height:250px}.footer-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:560px){
      .container{width:min(calc(100% - 36px),var(--container))}
      .brand-name{font-size:15px}.brand-mark{width:39px;height:39px}
      .hero h1{font-size:37px}.hero-subtitle{font-size:16px}.hero-copy{font-size:14px}
      .hero-actions .button-primary,.hero-actions .button-secondary{flex:1;padding:0 12px}
      .hero-visual{min-height:260px;gap:9px;padding:11px;border-radius:22px}
      .visual-image{border-radius:15px}.floating-badge{top:4px;right:0}
      .section-head{display:block;margin-bottom:20px}.section-head h2{font-size:25px}.section-head p{margin-top:8px}
      .overview-row{gap:9px}.stat{min-height:82px;padding:12px 10px}.stat strong{font-size:21px}.stat span{font-size:11px}
      .movie-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
      .movie-info{padding:11px}.movie-title{font-size:14px}.movie-meta{font-size:11px}
      .poster-tag{top:8px;left:8px;padding:4px 7px}
      .timeline{grid-template-columns:1fr}
      .timeline-item{padding:18px 19px}.timeline-item+.timeline-item{border-top:1px solid var(--line);border-left:0}
      .news-list{grid-template-columns:1fr;gap:10px}.news-item{grid-template-columns:92px 1fr;min-height:100px}
      .rank-row{grid-template-columns:34px minmax(0,1fr) 55px 48px;gap:8px;min-height:55px}
      .rank-heat,.rank-rating{font-size:11px}.ranking-aside h2{font-size:27px}
      .closing-panel{display:block;padding:23px 20px}.closing-panel h2{font-size:21px}
      .closing-actions{margin-top:18px}.closing-actions a{flex:1;padding:0 12px}
      .footer-grid{gap:25px 18px}.footer-brand{grid-column:1/-1}
      .footer-bottom{display:block}.footer-bottom span{display:block;margin-top:4px}
    }
    @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}