/* roulang page: index */
:root {
            --primary: #7B1E3B;
            --primary-dark: #5A152A;
            --primary-light: #A1385A;
            --accent: #D4AF37;
            --accent-light: #F0D97E;
            --bg-dark: #1A1025;
            --bg-dark-light: #251830;
            --bg-light: #FAF7F2;
            --bg-cream: #F5EFE6;
            --text-dark: #2D2A26;
            --text-light: #F5F0E8;
            --text-muted: #8A7E72;
            --text-muted-light: #B8AEA0;
            --border-light: #E8E0D5;
            --border-dark: #3A2A45;
            --radius-sm: 8px;
            --radius-md: 14px;
            --radius-lg: 22px;
            --radius-xl: 32px;
            --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
            --shadow-md: 0 6px 24px rgba(0,0,0,.10);
            --shadow-lg: 0 14px 48px rgba(0,0,0,.16);
            --shadow-glow: 0 4px 32px rgba(212,175,55,.28);
            --transition: all .25s cubic-bezier(.4,0,.2,1);
            --font-sans: 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',-apple-system,sans-serif;
        }
        *{box-sizing:border-box;margin:0;padding:0}
        html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
        body{font-family:var(--font-sans);line-height:1.6;color:var(--text-dark);background:var(--bg-light);overflow-x:hidden}
        img{max-width:100%;height:auto;display:block}
        a{text-decoration:none;color:inherit;transition:var(--transition)}
        button{font-family:inherit;cursor:pointer;border:none;transition:var(--transition)}
        input,textarea{font-family:inherit;transition:var(--transition)}
        :focus-visible{outline:3px solid var(--accent);outline-offset:2px}
        .container{max-width:1200px;margin:0 auto;padding:0 20px}

        /* Header & Nav */
        .site-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(26,16,37,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(212,175,55,.18)}
        .nav-wrapper{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
        .nav-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem;letter-spacing:.02em;color:var(--text-light);white-space:nowrap}
        .nav-logo .logo-icon{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--primary-light));display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--accent);flex-shrink:0}
        .nav-logo span{font-size:.82rem;color:var(--accent);font-weight:500;letter-spacing:.08em}
        .nav-menu{display:flex;align-items:center;gap:8px;position:relative}
        .nav-link{display:flex;align-items:center;gap:6px;padding:10px 18px;border-radius:50px;font-size:.93rem;font-weight:600;color:var(--text-muted-light);transition:var(--transition)}
        .nav-link:hover,.nav-link.active{color:var(--text-light);background:rgba(123,30,59,.45)}
        .nav-link.active{color:var(--accent);background:rgba(212,175,55,.12)}
        .nav-link .chev{font-size:.65rem;transition:transform .3s}
        .nav-link:hover .chev{transform:rotate(180deg)}

        /* Mega Menu */
        .mega-panel{position:absolute;top:calc(100% + 10px);right:0;min-width:360px;background:var(--bg-dark-light);border:1px solid var(--border-dark);border-radius:var(--radius-md);padding:20px;opacity:0;visibility:hidden;transform:translateY(8px);transition:all .28s ease;box-shadow:var(--shadow-lg);z-index:100}
        .nav-menu:hover .mega-panel,.nav-link:focus+.mega-panel{opacity:1;visibility:visible;transform:translateY(0)}
        .mega-panel h4{color:var(--accent);font-size:.8rem;font-weight:700;letter-spacing:.1em;margin-bottom:12px;text-transform:uppercase}
        .mega-tags{display:flex;flex-wrap:wrap;gap:8px}
        .mega-tag{display:inline-block;padding:7px 14px;border-radius:50px;background:rgba(123,30,59,.35);color:var(--text-light);font-size:.82rem;font-weight:500;transition:var(--transition)}
        .mega-tag:hover{background:var(--primary);color:#fff;transform:translateY(-1px)}
        .mega-links{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border-dark)}
        .mega-links a{color:var(--text-muted-light);font-size:.85rem;padding:6px 10px;border-radius:6px;transition:var(--transition)}
        .mega-links a:hover{color:var(--accent);background:rgba(212,175,55,.08)}

        /* Mobile Nav */
        .mobile-toggle{display:none;background:none;color:var(--text-light);font-size:1.4rem;padding:8px;border-radius:8px}
        .mobile-toggle:hover{background:rgba(123,30,59,.4)}
        @media(max-width:768px){
            .mobile-toggle{display:block}
            .nav-menu{display:none;position:absolute;top:68px;left:0;right:0;background:rgba(26,16,37,.98);padding:12px 20px;flex-direction:column;border-bottom:1px solid var(--border-dark)}
            .nav-menu.open{display:flex}
            .mega-panel{position:static;min-width:100%;margin-top:10px;opacity:1;visibility:visible;transform:none;display:none}
            .mega-panel.show{display:block}
        }

        /* Hero */
        .hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:120px 0 60px;background:var(--bg-dark);overflow:hidden}
        .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.35}
        .hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,16,37,.55) 0%,rgba(26,16,37,.78) 55%,var(--bg-dark) 100%)}
        .hero-content{position:relative;z-index:2;width:100%}
        .flash-bar{display:inline-flex;align-items:center;gap:10px;padding:10px 20px;border-radius:50px;background:linear-gradient(90deg,var(--primary),#A1385A);color:#fff;font-size:.88rem;font-weight:600;letter-spacing:.03em;margin-bottom:28px;box-shadow:var(--shadow-glow)}
        .flash-bar .hot-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse-dot 1.2s infinite}
        @keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.5)}}
        .hero h1{font-size:clamp(1.8rem,4.5vw,3.2rem);font-weight:900;line-height:1.22;color:var(--text-light);letter-spacing:.01em;max-width:800px}
        .hero h1 .accent-text{color:var(--accent);display:block;font-size:clamp(1.2rem,2.5vw,1.7rem);font-weight:600;margin-top:6px}
        .hero-desc{font-size:1.05rem;color:var(--text-muted-light);max-width:680px;margin:22px 0 30px;line-height:1.85}
        .hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
        .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:50px;font-weight:700;font-size:.95rem;letter-spacing:.02em;transition:var(--transition)}
        .btn-primary{background:linear-gradient(135deg,var(--primary),#A1385A);color:#fff;box-shadow:0 6px 24px rgba(123,30,59,.4)}
        .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(123,30,59,.55)}
        .btn-accent{background:linear-gradient(135deg,var(--accent),#C9A836);color:#1A1025;box-shadow:0 6px 24px rgba(212,175,55,.35)}
        .btn-accent:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(212,175,55,.5)}
        .btn-outline{background:rgba(255,255,255,.06);color:var(--text-light);border:1px solid rgba(255,255,255,.22)}
        .btn-outline:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}

        /* Countdown */
        .countdown-wrap{display:flex;align-items:center;gap:12px;margin:20px 0 0;flex-wrap:wrap}
        .countdown-label{color:var(--text-muted-light);font-size:.85rem;font-weight:500}
        .countdown{display:flex;gap:8px}
        .countdown-item{display:flex;flex-direction:column;align-items:center;min-width:56px;padding:10px 8px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(212,175,55,.25)}
        .countdown-item .num{font-size:1.5rem;font-weight:800;color:var(--accent);line-height:1.1}
        .countdown-item .unit{font-size:.7rem;color:var(--text-muted-light);margin-top:2px}

        /* Hero Featured Card */
        .hero-featured{position:relative;z-index:2;margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
        .featured-main{background:rgba(255,255,255,.06);border:1px solid rgba(212,175,55,.2);border-radius:var(--radius-lg);overflow:hidden;backdrop-filter:blur(8px)}
        .featured-main img{width:100%;height:220px;object-fit:cover}
        .featured-body{padding:20px 24px}
        .featured-body .tag{display:inline-block;padding:5px 14px;border-radius:50px;background:var(--accent);color:#1A1025;font-size:.75rem;font-weight:700;margin-bottom:10px}
        .featured-body h2{font-size:1.15rem;font-weight:700;color:var(--text-light);margin-bottom:6px}
        .featured-body p{font-size:.88rem;color:var(--text-muted-light);line-height:1.7}
        .featured-side{display:flex;flex-direction:column;gap:14px}
        .featured-mini{display:flex;gap:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);padding:14px 16px;align-items:center;transition:var(--transition)}
        .featured-mini:hover{background:rgba(255,255,255,.1);border-color:rgba(212,175,55,.3);transform:translateX(4px)}
        .featured-mini img{width:64px;height:64px;border-radius:10px;object-fit:cover;flex-shrink:0}
        .featured-mini h3{font-size:.92rem;font-weight:600;color:var(--text-light);margin-bottom:3px}
        .featured-mini p{font-size:.78rem;color:var(--text-muted-light)}

        /* Sections */
        .section{padding:80px 0}
        .section-dark{background:var(--bg-dark);color:var(--text-light)}
        .section-cream{background:var(--bg-cream)}
        .section-head{margin-bottom:44px}
        .section-head .kicker{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.14em;color:var(--primary);text-transform:uppercase;margin-bottom:10px}
        .section-dark .section-head .kicker{color:var(--accent)}
        .section-head h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;letter-spacing:.01em}
        .section-head .sub{font-size:.95rem;color:var(--text-muted);max-width:620px;margin-top:12px;line-height:1.8}
        .section-dark .section-head .sub{color:var(--text-muted-light)}

        /* Cards */
        .card{background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-md);padding:26px;transition:var(--transition);box-shadow:var(--shadow-sm)}
        .card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);border-color:rgba(123,30,59,.25)}
        .card-icon{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--primary-light));display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--accent);margin-bottom:14px}
        .card h3{font-size:1.05rem;font-weight:700;margin-bottom:8px;color:var(--text-dark)}
        .card p{font-size:.88rem;color:var(--text-muted);line-height:1.75}
        .card-dark{background:var(--bg-dark-light);border-color:var(--border-dark);color:var(--text-light)}
        .card-dark:hover{border-color:rgba(212,175,55,.35);box-shadow:var(--shadow-lg)}
        .card-dark h3{color:var(--text-light)}
        .card-dark p{color:var(--text-muted-light)}

        /* Grids */
        .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
        .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
        .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

        /* Progress / Task */
        .task-item{display:flex;align-items:flex-start;gap:16px;padding:18px 20px;background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-md);transition:var(--transition)}
        .task-item:hover{box-shadow:var(--shadow-md);border-color:rgba(123,30,59,.2)}
        .task-step{width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;font-weight:800;font-size:.9rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
        .task-step.done{background:var(--accent);color:#1A1025}
        .task-info h4{font-size:.95rem;font-weight:700;margin-bottom:4px}
        .task-info p{font-size:.82rem;color:var(--text-muted);line-height:1.7}
        .task-progress{height:5px;border-radius:50px;background:var(--border-light);margin-top:10px;overflow:hidden}
        .task-progress .bar{height:100%;border-radius:50px;background:linear-gradient(90deg,var(--primary),var(--accent));transition:width .6s ease}

        /* News List */
        .news-layout{display:grid;grid-template-columns:2fr 1fr;gap:32px}
        .news-list{display:flex;flex-direction:column;gap:4px}
        .news-item{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:var(--radius-sm);transition:var(--transition);border-bottom:1px solid var(--border-light)}
        .news-item:hover{background:#fff;box-shadow:var(--shadow-sm);transform:translateX(4px)}
        .news-item .date{font-size:.75rem;color:var(--text-muted);min-width:52px;font-weight:600}
        .news-item .title{font-size:.93rem;font-weight:600;color:var(--text-dark);flex:1;line-height:1.5}
        .news-item:hover .title{color:var(--primary)}
        .news-item .badge{display:inline-block;padding:3px 10px;border-radius:50px;font-size:.7rem;font-weight:700;background:rgba(123,30,59,.08);color:var(--primary);flex-shrink:0}
        .news-side{background:#fff;border-radius:var(--radius-md);padding:22px;border:1px solid var(--border-light);box-shadow:var(--shadow-sm)}
        .news-side h3{font-size:1rem;font-weight:700;margin-bottom:16px;color:var(--text-dark)}
        .side-tag{display:inline-block;padding:7px 14px;border-radius:50px;background:var(--bg-cream);color:var(--text-dark);font-size:.82rem;margin:0 6px 8px 0;transition:var(--transition)}
        .side-tag:hover{background:var(--primary);color:#fff}
        .side-pop{margin-top:18px;padding-top:18px;border-top:1px solid var(--border-light)}
        .side-pop a{display:block;padding:10px 0;font-size:.88rem;color:var(--text-dark);border-bottom:1px dashed var(--border-light)}
        .side-pop a:hover{color:var(--primary);padding-left:6px}
        .side-pop a:last-child{border-bottom:none}

        /* CTA Form */
        .cta-box{background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-radius:var(--radius-xl);padding:48px 40px;color:#fff;position:relative;overflow:hidden}
        .cta-box::after{content:'';position:absolute;top:-40%;right:-10%;width:300px;height:300px;border-radius:50%;background:rgba(212,175,55,.15);pointer-events:none}
        .cta-box h2{font-size:clamp(1.4rem,2.5vw,1.9rem);font-weight:800;margin-bottom:12px;position:relative;z-index:1}
        .cta-box p{color:rgba(255,255,255,.78);font-size:.92rem;max-width:500px;margin-bottom:26px;line-height:1.8;position:relative;z-index:1}
        .cta-form{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
        .cta-form input{flex:1;min-width:200px;padding:14px 18px;border-radius:50px;border:2px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;font-size:.92rem}
        .cta-form input::placeholder{color:rgba(255,255,255,.55)}
        .cta-form input:focus{border-color:var(--accent);outline:none;background:rgba(255,255,255,.18)}
        .cta-form .btn{flex-shrink:0}
        .cta-privacy{margin-top:12px;font-size:.75rem;color:rgba(255,255,255,.5);position:relative;z-index:1}

        /* Trust icons */
        .trust-bar{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin-top:28px}
        .trust-item{display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:.85rem;font-weight:500}
        .trust-item i{color:var(--primary);font-size:1.1rem}

        /* Floating CTA */
        .floating-cta{position:fixed;bottom:24px;right:24px;z-index:900;display:flex;align-items:center;gap:10px;padding:14px 22px;border-radius:50px;background:linear-gradient(135deg,var(--primary),#A1385A);color:#fff;font-weight:700;font-size:.9rem;box-shadow:0 8px 32px rgba(123,30,59,.5);transition:var(--transition);opacity:0;transform:translateY(20px);pointer-events:none}
        .floating-cta.visible{opacity:1;transform:translateY(0);pointer-events:auto}
        .floating-cta:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(123,30,59,.65)}

        /* Footer */
        .site-footer{background:var(--bg-dark);color:var(--text-muted-light);padding:56px 0 28px;border-top:1px solid var(--border-dark)}
        .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:36px;margin-bottom:36px}
        .footer-brand .nav-logo{margin-bottom:14px}
        .footer-brand p{font-size:.85rem;line-height:1.8;max-width:340px}
        .footer-col h4{color:var(--text-light);font-size:.9rem;font-weight:700;margin-bottom:14px;letter-spacing:.04em}
        .footer-col a{display:block;color:var(--text-muted-light);font-size:.85rem;padding:5px 0;transition:var(--transition)}
        .footer-col a:hover{color:var(--accent);padding-left:6px}
        .footer-bottom{border-top:1px solid var(--border-dark);padding-top:22px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;font-size:.78rem;color:rgba(255,255,255,.4)}

        /* Responsive */
        @media(max-width:1024px){
            .grid-4{grid-template-columns:repeat(2,1fr)}
            .hero-featured{grid-template-columns:1fr}
            .featured-side{flex-direction:row;flex-wrap:wrap}
            .featured-mini{flex:1;min-width:240px}
        }
        @media(max-width:768px){
            .section{padding:56px 0}
            .grid-2,.grid-3{grid-template-columns:1fr}
            .news-layout{grid-template-columns:1fr}
            .footer-grid{grid-template-columns:1fr 1fr}
            .hero{padding:100px 0 48px}
            .hero-featured{margin-top:28px}
            .featured-side{flex-direction:column}
            .featured-mini{min-width:100%}
            .cta-box{padding:32px 24px}
            .floating-cta{bottom:16px;right:16px;padding:12px 18px;font-size:.82rem}
            .nav-wrapper{height:60px}
            .mobile-menu-spacer{height:60px}
        }
        @media(max-width:520px){
            .container{padding:0 16px}
            .hero h1{font-size:1.55rem}
            .hero-desc{font-size:.92rem}
            .btn{padding:12px 20px;font-size:.85rem}
            .footer-grid{grid-template-columns:1fr}
            .countdown-item{min-width:46px;padding:8px 6px}
            .countdown-item .num{font-size:1.2rem}
            .grid-4{grid-template-columns:1fr}
        }