/* roulang page: index */
:root{
            --ink:#17253a;
            --muted:#65758b;
            --paper:#f5f8fc;
            --white:#ffffff;
            --line:#dce5ef;
            --blue:#2367d1;
            --blue-dark:#15458f;
            --cyan:#16a6b8;
            --soft-blue:#eaf2ff;
            --soft-cyan:#e8f8f8;
            --gold:#e7a63d;
            --shadow:0 18px 48px rgba(29,61,103,.11);
            --shadow-sm:0 8px 24px rgba(29,61,103,.08);
            --radius:18px;
            --max:1180px;
        }
        *{box-sizing:border-box;margin:0;padding:0}
        html{scroll-behavior:smooth}
        body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper);line-height:1.7;font-size:15px}
        a{color:inherit;text-decoration:none}
        img{display:block;width:100%;height:auto}
        button,input{font:inherit}
        button{cursor:pointer;border:0}
        :focus-visible{outline:3px solid rgba(35,103,209,.35);outline-offset:3px}
        .container{width:min(var(--max),calc(100% - 40px));margin:0 auto}
        .topbar{height:78px;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}
        .nav-wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:28px}
        .brand{display:flex;align-items:center;gap:12px;min-width:260px}
        .brand-mark{width:40px;height:40px;border-radius:11px;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:800;font-size:19px;box-shadow:0 8px 16px rgba(35,103,209,.25)}
        .brand strong{font-size:16px;letter-spacing:.2px;white-space:nowrap}
        .brand small{display:block;color:var(--muted);font-size:11px;line-height:1.2;margin-top:2px}
        .nav{display:flex;align-items:center;gap:6px}
        .nav a{padding:9px 13px;color:var(--muted);font-size:14px;border-radius:9px;transition:.2s ease}
        .nav a:hover,.nav a.active{color:var(--blue);background:var(--soft-blue)}
        .nav .nav-action{color:#fff;background:var(--blue);padding:10px 17px;margin-left:10px}
        .nav .nav-action:hover{background:var(--blue-dark);color:#fff}
        .menu-toggle{display:none;background:transparent;color:var(--ink);font-size:24px}
        .hero{min-height:620px;display:flex;align-items:center;position:relative;overflow:hidden;background:#dfeefa url("https://images.unsplash.com/photo-1511895426328-dc8714191300?auto=format&fit=crop&w=1800&q=88") center/cover no-repeat}
        .hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,36,68,.88) 0%,rgba(18,55,95,.7) 45%,rgba(18,55,95,.12) 100%)}
        .hero-inner{position:relative;z-index:1;color:#fff;padding:78px 0 70px}
        .eyebrow{display:inline-flex;align-items:center;gap:8px;color:#d9f5ff;font-size:13px;font-weight:700;letter-spacing:1px;margin-bottom:18px}
        .eyebrow i{width:8px;height:8px;background:#70e0dc;border-radius:50%;box-shadow:0 0 0 5px rgba(112,224,220,.18)}
        h1{font-size:clamp(38px,5.5vw,72px);line-height:1.12;letter-spacing:0;font-weight:800;max-width:720px}
        h1 em{font-style:normal;color:#79e2db}
        .hero-copy{max-width:650px;margin:22px 0 28px;color:#e5eef8;font-size:17px;line-height:1.9}
        .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
        .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:10px;font-weight:700;transition:.22s ease;border:1px solid transparent}
        .btn-primary{background:#fff;color:var(--blue)}
        .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.15)}
        .btn-secondary{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55);color:#fff}
        .btn-secondary:hover{background:rgba(255,255,255,.2)}
        .hero-signal{position:absolute;right:0;bottom:35px;background:rgba(9,31,60,.8);border:1px solid rgba(255,255,255,.2);padding:17px 20px;border-radius:14px;min-width:260px}
        .hero-signal span{display:block;color:#aad4e7;font-size:12px}
        .hero-signal b{font-size:25px;color:#fff;letter-spacing:2px}
        section{padding:84px 0}
        .section-head{max-width:700px;margin-bottom:36px}
        .section-kicker{color:var(--blue);font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:8px}
        h2{font-size:clamp(27px,3vw,40px);line-height:1.25;letter-spacing:0;margin-bottom:13px}
        .section-head p{color:var(--muted);font-size:16px;line-height:1.85}
        .live-strip{background:var(--white);border-bottom:1px solid var(--line)}
        .live-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0}
        .live-info{display:flex;align-items:center;gap:15px}
        .live-dot{background:#e65353;color:#fff;font-size:11px;font-weight:800;padding:4px 8px;border-radius:5px}
        .live-info strong{font-size:15px}
        .live-info span{display:block;color:var(--muted);font-size:13px}
        .countdown{display:flex;align-items:center;gap:15px}
        .countdown div{min-width:54px;text-align:center}
        .countdown b{display:block;color:var(--blue);font-size:22px;line-height:1.1}
        .countdown small{color:var(--muted);font-size:11px}
        .light-section{background:var(--white)}
        .pain-grid,.solution-grid,.scene-grid,.trust-grid,.topic-grid,.package-grid{display:grid;gap:18px}
        .pain-grid{grid-template-columns:repeat(3,1fr)}
        .pain-card{padding:28px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
        .pain-card .num{color:var(--blue);font-size:27px;font-weight:800}
        .pain-card h3,.solution-card h3,.scene-card h3,.topic-card h3,.package-card h3{font-size:18px;margin:8px 0}
        .pain-card p,.solution-card p,.scene-card p,.topic-card p,.package-card p{color:var(--muted);font-size:14px;line-height:1.75}
        .solution-grid{grid-template-columns:repeat(3,1fr)}
        .solution-card{padding:30px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);border-top:3px solid var(--cyan)}
        .icon-box{width:42px;height:42px;display:grid;place-items:center;background:var(--soft-cyan);color:#087d88;border-radius:12px;font-weight:800;font-size:18px}
        .scene-section{background:#edf5fb}
        .scene-grid{grid-template-columns:1.2fr .8fr .8fr}
        .scene-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
        .scene-card img{height:190px;object-fit:cover}
        .scene-card article{padding:20px}
        .scene-card.featured{grid-row:span 2}
        .scene-card.featured img{height:302px}
        .quote-section{background:var(--blue-dark);color:#fff}
        .quote-section .section-kicker{color:#8fe4df}
        .quote-section .section-head p{color:#c9d9ed}
        .trust-grid{grid-template-columns:repeat(3,1fr)}
        .quote{padding:25px;border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);background:rgba(255,255,255,.07)}
        .quote p{font-size:16px;line-height:1.8;color:#e8f1f8}
        .quote footer{margin-top:18px;color:#9ed4e4;font-size:13px}
        .topic-grid{grid-template-columns:repeat(4,1fr)}
        .topic-card{padding:24px;background:#fff;border-radius:var(--radius);border:1px solid var(--line);transition:.2s ease}
        .topic-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
        .topic-card .tag{display:inline-block;color:var(--blue);background:var(--soft-blue);padding:4px 8px;border-radius:5px;font-size:11px;font-weight:700}
        .collection{background:var(--white)}
        .collection-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
        .content-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);transition:.2s ease}
        .content-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
        .content-card img{height:145px;object-fit:cover}
        .content-body{padding:15px}
        .content-body h3{font-size:15px;line-height:1.5;margin:8px 0}
        .meta{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:12px}
        .badge{color:#fff;background:var(--blue);padding:3px 7px;border-radius:4px;font-size:10px;font-weight:800}
        .badge.green{background:#168b80}.badge.gold{background:var(--gold)}
        .more-row{text-align:center;margin-top:30px}
        .btn-outline{color:var(--blue);border:1px solid #b6cde9;background:#fff}
        .btn-outline:hover{background:var(--soft-blue);border-color:var(--blue)}
        .ranking-section{background:#f0f5fa}
        .rank-list{background:#fff;border-radius:var(--radius);border:1px solid var(--line);overflow:hidden}
        .rank-item{display:grid;grid-template-columns:50px 1fr 120px 80px 100px;align-items:center;gap:15px;padding:16px 22px;border-bottom:1px solid var(--line)}
        .rank-item:last-child{border-bottom:0}
        .rank-no{font-size:21px;font-weight:800;color:#a1afc0}
        .rank-item:first-child .rank-no,.rank-item:nth-child(2) .rank-no,.rank-item:nth-child(3) .rank-no{color:var(--blue)}
        .rank-name{font-weight:700}.rank-name small{display:block;color:var(--muted);font-weight:400;font-size:12px}
        .heat{color:#d27e22;font-weight:700}.score{font-weight:800;color:var(--blue)}
        .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
        .news-card{display:flex;gap:15px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:13px}
        .news-card img{width:100px;height:78px;object-fit:cover;border-radius:9px;flex:0 0 100px}
        .news-card h3{font-size:14px;line-height:1.5;margin-bottom:5px}
        .news-card time{font-size:12px;color:var(--muted)}
        .compare-section{background:var(--white)}
        .compare-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
        .compare-table th,.compare-table td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--line)}
        .compare-table th{background:#edf4fc;color:var(--blue);font-size:13px}
        .compare-table td{font-size:14px;color:var(--muted)}
        .compare-table td:first-child{color:var(--ink);font-weight:700;width:28%}
        .package-grid{grid-template-columns:repeat(3,1fr)}
        .package-card{padding:28px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);position:relative}
        .package-card.featured{border:2px solid var(--blue);box-shadow:var(--shadow)}
        .package-card .recommend{position:absolute;right:18px;top:18px;background:var(--blue);color:#fff;border-radius:5px;padding:4px 8px;font-size:11px}
        .price{font-size:28px;font-weight:800;color:var(--blue);margin:15px 0}
        .price small{font-size:13px;color:var(--muted);font-weight:400}
        .package-card ul{list-style:none;margin:18px 0}
        .package-card li{padding:7px 0;color:var(--muted);font-size:14px;border-bottom:1px dashed var(--line)}
        .package-card li:before{content:"✓";color:var(--cyan);font-weight:800;margin-right:8px}
        .assurance{background:var(--soft-cyan)}
        .assurance-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
        .assurance-item{padding:20px 0;border-right:1px solid #c8e5e5}
        .assurance-item:last-child{border-right:0}
        .assurance-item b{display:block;color:#087d88;font-size:20px;margin-bottom:5px}
        .assurance-item span{color:#51737a;font-size:13px}
        .faq-list{max-width:900px}
        .faq{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
        .faq button{width:100%;background:#fff;padding:19px 22px;text-align:left;color:var(--ink);font-weight:700;display:flex;justify-content:space-between;align-items:center}
        .faq button span{color:var(--blue);font-size:20px}
        .faq p{display:none;padding:0 22px 20px;color:var(--muted);font-size:14px;line-height:1.8}
        .faq.open p{display:block}
        .form-section{background:var(--blue-dark);color:#fff}
        .form-wrap{display:grid;grid-template-columns:1fr .9fr;gap:55px;align-items:center}
        .form-section .section-head p{color:#c9d9ed}
        .lead-form{background:#fff;padding:26px;border-radius:var(--radius);box-shadow:var(--shadow);color:var(--ink)}
        .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
        .field{margin-bottom:13px}
        .field label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
        .field input,.field select{width:100%;height:44px;border:1px solid var(--line);border-radius:8px;padding:0 12px;color:var(--ink);background:#fff}
        .form-note{font-size:11px;color:var(--muted);margin-top:12px;line-height:1.6}
        .lead-form .btn{width:100%;margin-top:4px}
        footer{background:#11233b;color:#c5d4e5;padding:55px 0 24px}
        .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:35px;padding-bottom:35px;border-bottom:1px solid rgba(255,255,255,.14)}
        footer .brand strong{color:#fff} footer .brand small{color:#8da7c1}
        footer h3{color:#fff;font-size:14px;margin-bottom:14px}
        footer a{display:block;color:#9eb2c9;font-size:13px;margin:8px 0}
        footer a:hover{color:#79e2db}
        .footer-desc{font-size:13px;line-height:1.8;color:#9eb2c9;margin-top:18px;max-width:280px}
        .copyright{padding-top:20px;color:#7891aa;font-size:12px;display:flex;justify-content:space-between;gap:20px}
        @media (max-width:1024px){
            .topic-grid{grid-template-columns:repeat(2,1fr)}
            .collection-grid{grid-template-columns:repeat(3,1fr)}
            .hero-signal{right:20px}
            .scene-grid{grid-template-columns:1fr 1fr}
            .scene-card.featured{grid-row:auto;grid-column:span 2}
            .scene-card.featured img{height:250px}
        }
        @media (max-width:768px){
            .container{width:min(var(--max),calc(100% - 30px))}
            .topbar{height:68px}.brand{min-width:0}.brand strong{font-size:14px}.brand small{display:none}
            .menu-toggle{display:block}
            .nav{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;padding:12px 15px 18px;border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);flex-direction:column;align-items:stretch}
            .nav.show{display:flex}.nav a{padding:11px 14px}.nav .nav-action{margin:5px 0 0}
            .hero{min-height:650px}.hero-inner{padding:70px 0}.hero-signal{position:relative;right:auto;bottom:auto;margin-top:36px;width:max-content}
            section{padding:65px 0}.pain-grid,.solution-grid,.trust-grid,.package-grid{grid-template-columns:1fr}
            .live-row{align-items:flex-start;flex-direction:column}.countdown{width:100%;justify-content:space-between}
            .scene-grid{grid-template-columns:1fr}.scene-card.featured{grid-column:auto}.scene-card img,.scene-card.featured img{height:220px}
            .collection-grid{grid-template-columns:repeat(2,1fr)}
            .rank-item{grid-template-columns:34px 1fr 65px 55px;padding:14px 12px;gap:8px}.rank-item .rank-tag{display:none}
            .news-grid{grid-template-columns:1fr 1fr}.assurance-grid{grid-template-columns:1fr 1fr}.assurance-item{border-right:0;border-bottom:1px solid #c8e5e5}
            .form-wrap{grid-template-columns:1fr;gap:25px}.footer-grid{grid-template-columns:1fr 1fr}.copyright{display:block}.copyright span{display:block;margin-top:6px}
        }
        @media (max-width:520px){
            h1{font-size:40px}.hero-copy{font-size:15px}.hero-actions .btn{width:100%}
            .topic-grid,.collection-grid,.news-grid{grid-template-columns:1fr}
            .compare-table{font-size:12px}.compare-table th,.compare-table td{padding:12px 10px}.compare-table td:first-child{width:34%}
            .form-row{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}
            .assurance-grid{grid-template-columns:1fr}
        }