/* roulang page: index */
:root {
            --ink: #171a24;
            --muted: #747b8e;
            --soft: #f6f7fb;
            --line: #e9ebf2;
            --white: #ffffff;
            --violet: #714cff;
            --violet-dark: #5434d7;
            --coral: #ff6f61;
            --mint: #41c7a2;
            --gold: #f4b84a;
            --radius: 18px;
            --shadow: 0 18px 48px rgba(27, 31, 52, .08);
            --container: 1180px;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body {
            background: var(--white);
            color: var(--ink);
            font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
            font-size: 15px;
            line-height: 1.75;
            -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; border: 0; }
        .container { width: min(calc(100% - 40px), var(--container)); margin: 0 auto; }
        .section { padding: 92px 0; }
        .section-soft { background: var(--soft); }
        .section-head {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 24px;
            margin-bottom: 34px;
        }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--violet);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            margin-bottom: 10px;
        }
        .eyebrow::before {
            content: "";
            width: 22px;
            height: 3px;
            border-radius: 3px;
            background: var(--coral);
        }
        h1, h2, h3 { line-height: 1.2; letter-spacing: 0; }
        h1 { font-size: clamp(38px, 5vw, 68px); max-width: 730px; }
        h2 { font-size: clamp(28px, 3vw, 42px); }
        h3 { font-size: 18px; }
        .section-copy { max-width: 650px; color: var(--muted); margin-top: 12px; }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 48px;
            padding: 0 23px;
            border-radius: 12px;
            font-weight: 700;
            transition: transform .25s, box-shadow .25s, background .25s;
        }
        .btn:hover { transform: translateY(-2px); }
        .btn:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(113,76,255,.28); outline-offset: 3px; }
        .btn-primary { background: var(--violet); color: var(--white); box-shadow: 0 10px 24px rgba(113,76,255,.24); }
        .btn-primary:hover { background: var(--violet-dark); box-shadow: 0 14px 30px rgba(113,76,255,.34); }
        .btn-light { color: var(--ink); background: var(--white); border: 1px solid rgba(255,255,255,.65); }
        .btn-ghost { color: var(--violet); background: #f0edff; }
        .pill {
            display: inline-flex;
            align-items: center;
            min-height: 25px;
            padding: 0 9px;
            border-radius: 7px;
            color: var(--violet);
            background: #f0edff;
            font-size: 11px;
            font-weight: 800;
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 20;
            background: rgba(255,255,255,.92);
            border-bottom: 1px solid rgba(233,235,242,.9);
            backdrop-filter: blur(16px);
        }
        .nav-wrap { min-height: 76px; display: flex; align-items: center; gap: 34px; }
        .brand { display: inline-flex; align-items: center; gap: 11px; min-width: 240px; font-weight: 900; }
        .brand-mark {
            display: grid;
            place-items: center;
            width: 39px;
            height: 39px;
            border-radius: 11px;
            color: var(--white);
            background: linear-gradient(135deg, var(--violet), var(--coral));
            font-size: 17px;
        }
        .brand-name { font-size: 16px; white-space: nowrap; }
        .main-nav { display: flex; align-items: center; gap: 5px; flex: 1; }
        .main-nav a { padding: 9px 13px; color: var(--muted); border-radius: 9px; font-size: 14px; font-weight: 700; transition: .2s; }
        .main-nav a:hover, .main-nav a.active { color: var(--violet); background: #f2efff; }
        .nav-action { white-space: nowrap; min-height: 41px; padding: 0 17px; font-size: 13px; }
        .menu-toggle { display: none; width: 42px; height: 42px; color: var(--ink); background: var(--soft); border-radius: 10px; font-size: 20px; }

        .hero {
            position: relative;
            min-height: 620px;
            display: flex;
            align-items: center;
            overflow: hidden;
            color: var(--white);
            background:
                linear-gradient(90deg, rgba(14,15,27,.88) 0%, rgba(21,20,43,.68) 42%, rgba(26,25,48,.18) 100%),
                url("https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&w=1900&q=90") center/cover;
        }
        .hero::after {
            content: "";
            position: absolute;
            inset: auto 0 0;
            height: 150px;
            background: linear-gradient(transparent, rgba(14,15,27,.45));
            pointer-events: none;
        }
        .hero-inner { position: relative; z-index: 1; padding: 92px 0 130px; }
        .hero-kicker { color: #d5ccff; font-size: 14px; font-weight: 800; margin-bottom: 22px; }
        .hero h1 span { color: #ffb4a9; }
        .hero-desc { max-width: 675px; margin: 24px 0 30px; color: rgba(255,255,255,.82); font-size: 17px; line-height: 1.9; }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
        .hero-meta { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 42px; color: rgba(255,255,255,.75); font-size: 13px; }
        .hero-meta strong { display: block; color: var(--white); font-size: 24px; line-height: 1.2; }
        .hero-meta span { display: block; }
        .countdown {
            position: absolute;
            right: 7%;
            bottom: 42px;
            z-index: 2;
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 12px 17px;
            color: var(--white);
            border: 1px solid rgba(255,255,255,.2);
            background: rgba(17,16,34,.58);
            border-radius: 12px;
            backdrop-filter: blur(12px);
            font-size: 13px;
        }
        .countdown b { color: #ffb4a9; font-size: 18px; }

        .benefits { padding: 28px 0; border-bottom: 1px solid var(--line); }
        .benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
        .benefit { display: flex; gap: 14px; align-items: flex-start; }
        .benefit-icon { flex: 0 0 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--violet); background: #f0edff; font-size: 20px; }
        .benefit h3 { font-size: 15px; margin-bottom: 3px; }
        .benefit p { color: var(--muted); font-size: 13px; line-height: 1.6; }

        .content-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
        .content-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); transition: transform .25s, box-shadow .25s; }
        .content-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
        .poster { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #ddd; }
        .poster img { height: 100%; transition: transform .5s; }
        .content-card:hover .poster img { transform: scale(1.045); }
        .poster::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(12,12,20,.58)); }
        .poster-tag { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 4px 8px; border-radius: 6px; color: var(--white); background: rgba(17,16,34,.7); font-size: 11px; font-weight: 800; }
        .play-dot { position: absolute; z-index: 1; right: 13px; bottom: 12px; display: grid; place-items: center; width: 36px; height: 36px; color: var(--white); background: var(--coral); border-radius: 50%; }
        .card-body { padding: 16px; }
        .card-title { overflow: hidden; margin-bottom: 8px; font-size: 16px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
        .card-meta { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; }
        .score { color: var(--gold); font-weight: 900; }

        .feature-band { color: var(--white); background: #171628; }
        .feature-band .section-copy { color: rgba(255,255,255,.62); }
        .feature-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: center; }
        .feature-points { display: grid; gap: 16px; margin-top: 30px; }
        .feature-point { display: flex; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
        .feature-point b { color: #ffb4a9; font-size: 19px; }
        .feature-point p { color: rgba(255,255,255,.68); font-size: 13px; }
        .mosaic { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; }
        .mosaic figure { position: relative; min-height: 180px; overflow: hidden; border-radius: 14px; }
        .mosaic figure:first-child { grid-row: span 2; min-height: 375px; }
        .mosaic img { height: 100%; }
        .mosaic figcaption { position: absolute; right: 15px; bottom: 13px; left: 15px; color: var(--white); font-weight: 700; text-shadow: 0 2px 12px #000; }

        .category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
        .category { position: relative; min-height: 180px; overflow: hidden; padding: 23px; color: var(--white); border-radius: var(--radius); }
        .category::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(22,20,45,.86), rgba(22,20,45,.18)); }
        .category-content { position: relative; z-index: 1; }
        .category h3 { margin-bottom: 9px; }
        .category p { color: rgba(255,255,255,.76); font-size: 13px; line-height: 1.7; }
        .category:nth-child(1) { background: url("https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?auto=format&fit=crop&w=700&q=80") center/cover; }
        .category:nth-child(2) { background: url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=700&q=80") center/cover; }
        .category:nth-child(3) { background: url("https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=700&q=80") center/cover; }
        .category:nth-child(4) { background: url("https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=700&q=80") center/cover; }

        .ranking-wrap { display: grid; grid-template-columns: 1fr .8fr; gap: 50px; align-items: start; }
        .ranking-list { border-top: 1px solid var(--line); }
        .ranking-item { display: grid; grid-template-columns: 42px 1fr auto auto; gap: 14px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); }
        .rank-number { color: var(--violet); font-size: 22px; font-weight: 900; }
        .rank-info strong { display: block; font-size: 15px; }
        .rank-info span { color: var(--muted); font-size: 12px; }
        .heat { color: var(--coral); font-size: 12px; font-weight: 700; }

        .quote-panel { padding: 32px; border-radius: var(--radius); background: #fff6f3; }
        .quote-panel blockquote { margin: 16px 0 20px; font-size: 21px; font-weight: 700; line-height: 1.55; }
        .quote-author { display: flex; align-items: center; gap: 11px; color: var(--muted); font-size: 13px; }
        .avatar { width: 36px; height: 36px; display: grid; place-items: center; color: var(--white); background: var(--coral); border-radius: 50%; font-weight: 800; }

        .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .news-item { display: grid; grid-template-columns: 116px 1fr; gap: 16px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 14px; transition: .2s; }
        .news-item:hover { border-color: #cfc7ff; background: #fbfaff; }
        .news-image { aspect-ratio: 1.35; overflow: hidden; border-radius: 9px; }
        .news-image img { height: 100%; }
        .news-item h3 { font-size: 15px; line-height: 1.45; }
        .news-date { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; }

        .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 880px; margin: 0 auto; }
        .compare-card { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
        .compare-card.highlight { border-color: #cfc7ff; box-shadow: var(--shadow); }
        .compare-card h3 { margin-bottom: 18px; }
        .compare-card ul { display: grid; gap: 12px; list-style: none; color: var(--muted); font-size: 14px; }
        .compare-card li::before { content: "✓"; display: inline-block; width: 25px; color: var(--mint); font-weight: 900; }
        .compare-card:not(.highlight) li::before { content: "·"; color: var(--muted); }

        .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
        details { padding: 20px 22px; border: 1px solid var(--line); border-radius: 13px; background: var(--white); }
        summary { cursor: pointer; font-weight: 800; list-style: none; }
        summary::-webkit-details-marker { display: none; }
        summary::after { content: "+"; float: right; color: var(--violet); font-size: 20px; line-height: 1; }
        details[open] summary::after { content: "−"; }
        details p { padding-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.8; }

        .conversion { padding: 72px 0; color: var(--white); background: linear-gradient(110deg, #4930bc, #714cff); }
        .conversion-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
        .conversion h2 { max-width: 620px; }
        .conversion p { max-width: 620px; margin-top: 12px; color: rgba(255,255,255,.76); }
        .conversion-form { display: flex; gap: 9px; min-width: 390px; }
        .conversion-form input { min-width: 0; width: 100%; height: 48px; padding: 0 15px; border: 0; border-radius: 11px; color: var(--ink); background: var(--white); }
        .conversion-form .btn { flex: 0 0 auto; color: var(--violet); }

        footer { color: #adb0c0; background: #171628; }
        .footer-main { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 35px; padding: 64px 0 45px; }
        footer .brand { color: var(--white); margin-bottom: 17px; }
        .footer-intro { max-width: 285px; font-size: 13px; line-height: 1.8; }
        .footer-col h3 { color: var(--white); font-size: 14px; margin-bottom: 15px; }
        .footer-col a { display: block; width: fit-content; margin: 7px 0; color: #adb0c0; font-size: 13px; transition: .2s; }
        .footer-col a:hover { color: #ffb4a9; }
        .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 12px; }

        @media (max-width: 1024px) {
            .main-nav { gap: 0; }
            .main-nav a { padding: 8px 8px; font-size: 13px; }
            .brand { min-width: 205px; }
            .content-grid { grid-template-columns: repeat(3, 1fr); }
            .category-grid { grid-template-columns: repeat(2, 1fr); }
            .feature-layout, .ranking-wrap { gap: 32px; }
        }
        @media (max-width: 768px) {
            .section { padding: 68px 0; }
            .nav-wrap { min-height: 68px; justify-content: space-between; }
            .main-nav {
                position: absolute;
                top: 68px;
                right: 20px;
                left: 20px;
                display: none;
                flex-direction: column;
                align-items: stretch;
                padding: 10px;
                border: 1px solid var(--line);
                border-radius: 13px;
                background: var(--white);
                box-shadow: var(--shadow);
            }
            .main-nav.open { display: flex; }
            .main-nav a { padding: 11px 13px; }
            .nav-action { display: none; }
            .menu-toggle { display: block; }
            .hero { min-height: 650px; }
            .hero-inner { padding: 75px 0 145px; }
            .countdown { right: 20px; bottom: 32px; left: 20px; justify-content: center; }
            .benefit-grid, .feature-layout, .ranking-wrap { grid-template-columns: 1fr; }
            .content-grid { grid-template-columns: repeat(2, 1fr); }
            .mosaic { max-width: 600px; }
            .news-grid { grid-template-columns: repeat(2, 1fr); }
            .conversion-inner { display: block; }
            .conversion-form { min-width: 0; margin-top: 25px; }
            .footer-main { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 520px) {
            .container { width: min(calc(100% - 28px), var(--container)); }
            h1 { font-size: 39px; }
            h2 { font-size: 29px; }
            .hero-desc { font-size: 15px; }
            .hero-meta { gap: 16px; }
            .content-grid, .category-grid, .news-grid, .faq-grid, .compare { grid-template-columns: 1fr; }
            .section-head { display: block; }
            .section-head .btn { margin-top: 18px; }
            .mosaic { grid-template-columns: 1fr 1fr; }
            .mosaic figure:first-child { min-height: 270px; }
            .mosaic figure { min-height: 125px; }
            .ranking-item { grid-template-columns: 32px 1fr auto; }
            .ranking-item .pill { display: none; }
            .conversion-form { display: grid; }
            .footer-main { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
            .footer-main > :first-child { grid-column: 1 / -1; }
            .footer-bottom { display: block; }
            .footer-bottom span { display: block; margin-top: 6px; }
        }