/* roulang page: index */
:root{
            --ink:#f5f7fb;
            --muted:#9ca8bd;
            --soft:#c9d2e3;
            --night:#090d18;
            --panel:#111827;
            --panel-2:#151e2f;
            --line:rgba(207,221,245,.13);
            --purple:#8d7cff;
            --cyan:#52d7df;
            --pink:#f28db8;
            --lime:#c9ed83;
            --radius:22px;
            --shadow:0 24px 70px rgba(0,0,0,.24);
            --container:min(1180px, calc(100% - 40px));
        }
        *{box-sizing:border-box;margin:0;padding:0}
        html{scroll-behavior:smooth}
        body{font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:var(--night);color:var(--ink);line-height:1.7;font-size:15px}
        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 var(--cyan);outline-offset:3px}
        .container{width:var(--container);margin:auto}
        .topbar{position:sticky;top:0;z-index:20;background:rgba(9,13,24,.86);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
        .nav{height:76px;display:flex;align-items:center;gap:34px}
        .brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.2px;white-space:nowrap}
        .brand-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--purple),var(--cyan));color:#101421;font-size:17px;box-shadow:0 8px 24px rgba(82,215,223,.2)}
        .brand-name{font-size:16px}
        .nav-links{display:flex;align-items:center;gap:24px;margin-left:auto}
        .nav-links a{color:var(--muted);font-size:14px;transition:.25s}
        .nav-links a:hover,.nav-links a.active{color:var(--ink)}
        .nav-search{width:160px;border:1px solid var(--line);border-radius:30px;background:rgba(255,255,255,.04);padding:9px 15px;color:var(--ink)}
        .nav-search::placeholder{color:#71809a}
        .nav-button{border:0;border-radius:28px;padding:10px 17px;background:var(--ink);color:#101421;font-weight:700;transition:.25s}
        .nav-button:hover{transform:translateY(-2px);background:var(--cyan)}
        .menu-toggle{display:none;background:none;border:0;color:var(--ink);font-size:24px}
        .hero{padding:72px 0 54px;overflow:hidden;background:radial-gradient(circle at 78% 10%,rgba(141,124,255,.2),transparent 32%),linear-gradient(180deg,#0b1020,#090d18)}
        .hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:55px;align-items:center}
        .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--cyan);font-size:13px;font-weight:700;margin-bottom:18px}
        .eyebrow:before{content:"";width:7px;height:7px;background:var(--cyan);border-radius:50%;box-shadow:0 0 0 6px rgba(82,215,223,.12)}
        h1{font-size:clamp(38px,5vw,68px);line-height:1.12;letter-spacing:0;font-weight:850;max-width:650px}
        h1 em{font-style:normal;color:var(--cyan)}
        .hero-lead{font-size:17px;color:var(--soft);max-width:650px;margin:24px 0 27px}
        .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
        .button{display:inline-flex;align-items:center;gap:8px;padding:13px 21px;border-radius:14px;border:1px solid var(--line);font-weight:750;transition:.25s}
        .button-primary{background:var(--cyan);color:#08121b;border-color:var(--cyan)}
        .button-secondary{background:rgba(255,255,255,.05);color:var(--ink)}
        .button:hover{transform:translateY(-3px);box-shadow:0 12px 25px rgba(0,0,0,.22)}
        .hero-note{display:flex;gap:24px;margin-top:31px;color:var(--muted);font-size:13px}
        .hero-note strong{display:block;color:var(--ink);font-size:20px;line-height:1.2}
        .stack{height:420px;position:relative}
        .stack-card{position:absolute;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:24px;box-shadow:var(--shadow)}
        .stack-card img{height:100%}
        .stack-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,7,14,.8),transparent 55%)}
        .stack-main{width:68%;height:365px;right:13%;top:20px;transform:rotate(2deg)}
        .stack-side.one{width:31%;height:220px;left:0;top:112px;transform:rotate(-8deg)}
        .stack-side.two{width:29%;height:200px;right:0;bottom:8px;transform:rotate(7deg)}
        .stack-caption{position:absolute;z-index:2;bottom:22px;left:22px;font-weight:700;font-size:19px}
        .section{padding:82px 0}
        .section.alt{background:#0d1321}
        .section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px}
        .section-kicker{color:var(--pink);font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px}
        h2{font-size:clamp(27px,3vw,40px);line-height:1.2;letter-spacing:0}
        .section-intro{max-width:590px;color:var(--muted);font-size:14px}
        .offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
        .offer{padding:25px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(141,124,255,.15),rgba(255,255,255,.035));border-radius:var(--radius);min-height:190px}
        .offer strong{font-size:29px;display:block;margin:10px 0 4px}
        .offer p{color:var(--muted);font-size:14px}
        .badge{display:inline-flex;align-items:center;border-radius:8px;padding:4px 8px;font-size:11px;font-weight:800;background:rgba(201,237,131,.14);color:var(--lime)}
        .badge.blue{background:rgba(82,215,223,.14);color:var(--cyan)}
        .badge.pink{background:rgba(242,141,184,.14);color:var(--pink)}
        .media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
        .media-card{background:var(--panel);border:1px solid var(--line);border-radius:17px;overflow:hidden;transition:.25s}
        .media-card:hover{transform:translateY(-5px);border-color:rgba(82,215,223,.5);box-shadow:0 16px 35px rgba(0,0,0,.2)}
        .media-image{height:205px;position:relative}
        .media-image img{height:100%}
        .media-image .badge{position:absolute;top:12px;left:12px;z-index:1}
        .score{position:absolute;right:12px;bottom:11px;color:var(--ink);font-weight:800;background:rgba(7,11,21,.72);padding:4px 8px;border-radius:8px;font-size:12px}
        .media-body{padding:15px 16px 17px}
        .media-title{font-size:16px;font-weight:750;margin-bottom:5px}
        .media-meta{color:var(--muted);font-size:12px}
        .compare{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
        .compare-card{padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
        .compare-card.featured{border-color:var(--purple);background:linear-gradient(160deg,rgba(141,124,255,.22),var(--panel))}
        .compare-card h3{font-size:19px;margin-bottom:15px}
        .price{font-size:31px;font-weight:800;margin-bottom:14px}
        .compare-card ul{list-style:none;color:var(--muted);font-size:13px;line-height:2}
        .compare-card li:before{content:"✓";color:var(--cyan);margin-right:8px}
        .limited{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;padding:34px;border-radius:var(--radius);background:linear-gradient(115deg,#222446,#132b35);border:1px solid rgba(82,215,223,.25)}
        .limited p{color:var(--soft);max-width:650px;margin:13px 0 20px}
        .timer{display:flex;gap:10px;justify-content:end}
        .timer b{display:grid;place-items:center;width:68px;height:72px;border-radius:14px;background:rgba(0,0,0,.25);font-size:25px}
        .timer span{display:block;font-size:10px;color:var(--muted);text-align:center;font-weight:400}
        .topics{display:grid;grid-template-columns:repeat(5,1fr);gap:15px}
        .topic{min-height:185px;padding:22px;border-radius:18px;border:1px solid var(--line);background:var(--panel-2);position:relative;overflow:hidden}
        .topic:after{content:"";position:absolute;width:80px;height:80px;right:-18px;bottom:-22px;border-radius:50%;background:rgba(82,215,223,.13)}
        .topic h3{font-size:18px;margin:18px 0 8px}
        .topic p{font-size:13px;color:var(--muted)}
        .rank-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:25px}
        .rank-list{border-top:1px solid var(--line)}
        .rank-item{display:grid;grid-template-columns:40px 1fr 80px 55px;gap:10px;align-items:center;padding:15px 5px;border-bottom:1px solid var(--line)}
        .rank-num{font-size:20px;color:var(--pink);font-weight:850}
        .rank-name{font-weight:700}
        .rank-type{color:var(--muted);font-size:12px}
        .heat{color:var(--cyan);font-size:13px}
        .rank-score{font-weight:800;text-align:right}
        .rank-feature{border-radius:var(--radius);overflow:hidden;min-height:390px;position:relative}
        .rank-feature img{height:100%;position:absolute}
        .rank-feature:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,7,14,.92),transparent 70%)}
        .rank-feature-content{position:absolute;z-index:1;bottom:25px;left:25px}
        .rank-feature-content h3{font-size:27px;margin:10px 0 4px}
        .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
        .news-item{display:grid;grid-template-columns:115px 1fr;gap:15px;align-items:center;padding:13px;border-bottom:1px solid var(--line)}
        .news-item img{height:85px;border-radius:12px}
        .news-item h3{font-size:15px;line-height:1.45;margin-bottom:7px}
        .news-item time{font-size:12px;color:var(--muted)}
        .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
        .quote{padding:25px;background:var(--panel);border-radius:var(--radius);border:1px solid var(--line)}
        .quote p{color:var(--soft);font-size:15px;margin-bottom:18px}
        .quote strong{font-size:13px}
        .quote small{display:block;color:var(--muted);margin-top:2px}
        .trust{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
        .trust-item{display:flex;gap:13px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--line)}
        .trust-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(82,215,223,.12);color:var(--cyan);font-weight:800}
        .trust h3{font-size:15px;margin-bottom:3px}
        .trust p{font-size:12px;color:var(--muted)}
        .faq{max-width:850px;margin:auto}
        details{border-bottom:1px solid var(--line);padding:20px 0}
        summary{cursor:pointer;list-style:none;font-weight:750;display:flex;justify-content:space-between;gap:20px}
        summary:after{content:"+";color:var(--cyan);font-size:22px;line-height:1}
        details[open] summary:after{content:"−"}
        details p{color:var(--muted);font-size:14px;padding:13px 30px 0 0}
        .closing{padding:54px;border-radius:var(--radius);background:linear-gradient(120deg,rgba(141,124,255,.25),rgba(82,215,223,.12));border:1px solid var(--line);text-align:center}
        .closing p{color:var(--soft);max-width:650px;margin:14px auto 23px}
        footer{padding:60px 0 26px;background:#070a12;border-top:1px solid var(--line)}
        .footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:35px;padding-bottom:42px}
        .footer-brand p{color:var(--muted);font-size:13px;max-width:270px;margin-top:14px}
        footer h3{font-size:14px;margin-bottom:15px}
        footer li{list-style:none;color:var(--muted);font-size:13px;margin:8px 0}
        footer li a:hover{color:var(--cyan)}
        .copyright{padding-top:22px;border-top:1px solid var(--line);color:#65728a;font-size:12px;display:flex;justify-content:space-between;gap:15px}
        @media(max-width:1024px){
            .nav{gap:18px}.nav-links{gap:14px}.nav-search{width:130px}
            .hero-grid{gap:30px}.media-grid{grid-template-columns:repeat(3,1fr)}.topics{grid-template-columns:repeat(3,1fr)}
            .news-grid{grid-template-columns:repeat(2,1fr)}.trust{grid-template-columns:repeat(2,1fr)}
        }
        @media(max-width:768px){
            :root{--container:calc(100% - 30px)}
            .nav-links{display:none;position:absolute;left:15px;right:15px;top:68px;padding:18px;background:#101727;border:1px solid var(--line);border-radius:16px;flex-direction:column;align-items:stretch}
            .nav-links.open{display:flex}.nav-links a{padding:7px 4px}.nav-search{width:100%}.nav-button{display:none}.menu-toggle{display:block;margin-left:auto}
            .hero{padding:53px 0 38px}.hero-grid{grid-template-columns:1fr}.stack{height:330px;order:-1}.stack-main{height:285px}
            .section{padding:60px 0}.section-head{display:block}.section-intro{margin-top:13px}
            .offer-grid,.compare{grid-template-columns:1fr}.media-grid{grid-template-columns:repeat(2,1fr)}
            .limited,.rank-wrap{grid-template-columns:1fr}.timer{justify-content:start}.rank-feature{min-height:300px}
            .topics{grid-template-columns:repeat(2,1fr)}.quotes{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}
        }
        @media(max-width:520px){
            h1{font-size:39px}.hero-lead{font-size:15px}.hero-note{gap:15px}.hero-note strong{font-size:17px}
            .media-grid,.topics,.news-grid,.trust,.footer-grid{grid-template-columns:1fr}
            .media-image{height:220px}.limited{padding:24px}.timer b{width:55px;height:62px}.rank-item{grid-template-columns:29px 1fr 55px}.rank-type{display:none}.rank-score{font-size:13px}
            .copyright{display:block}.copyright span{display:block;margin-top:6px}
        }