/* roulang page: index */
:root{
            --bg:#0D0B14;
            --bg-soft:#12101E;
            --bg-card:rgba(255,255,255,0.05);
            --bg-card-hover:rgba(255,255,255,0.09);
            --glass-bg:rgba(255,255,255,0.06);
            --glass-border:rgba(255,255,255,0.10);
            --brand-start:#D9467A;
            --brand-mid:#6D28D9;
            --brand-end:#312E81;
            --gold:#F5B14C;
            --green:#34D399;
            --text-strong:#F8F5FF;
            --text-main:#D7D0E8;
            --text-sub:#9A92B8;
            --text-muted:#6B6488;
            --radius-lg:28px;
            --radius-md:18px;
            --radius-sm:14px;
            --radius-xs:8px;
            --shadow-card:0 8px 24px rgba(0,0,0,0.35);
            --shadow-hover:0 16px 42px rgba(112,42,175,0.28);
            --transition:0.25s ease;
            --font-sans:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
            --font-num:"Inter","Roboto Mono",sans-serif;
        }
        *{box-sizing:border-box;margin:0;padding:0}
        html{scroll-behavior:smooth}
        body{
            font-family:var(--font-sans);
            background:var(--bg);
            color:var(--text-main);
            line-height:1.7;
            font-size:16px;
            -webkit-font-smoothing:antialiased;
            -moz-osx-font-smoothing:grayscale;
        }
        a{text-decoration:none;color:inherit}
        img{display:block;max-width:100%;height:auto}
        button,input{font-family:inherit;font-size:inherit}
        button{cursor:pointer;background:none;border:none}
        ul,ol{list-style:none}
        .container{max-width:1200px;margin:0 auto;padding:0 24px}
        .section{padding:80px 0;position:relative}
        .section-alt{background:rgba(255,255,255,0.02);border-top:1px solid rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.06)}
        .section-head{max-width:720px;margin-bottom:40px}
        .section-head.center{margin-left:auto;margin-right:auto;text-align:center}
        .section-tag{
            display:inline-block;
            padding:6px 14px;
            border-radius:999px;
            background:linear-gradient(135deg,rgba(217,70,122,0.16),rgba(109,40,217,0.16));
            border:1px solid rgba(217,70,122,0.35);
            color:var(--brand-start);
            font-size:0.8rem;
            font-weight:600;
            letter-spacing:0.02em;
            margin-bottom:16px;
        }
        .section-title{
            font-size:2rem;
            font-weight:800;
            line-height:1.3;
            color:var(--text-strong);
            margin-bottom:14px;
        }
        .section-desc{
            font-size:1rem;
            color:var(--text-sub);
            line-height:1.8;
        }
        .gradient-text{
            background:linear-gradient(135deg,var(--brand-start),var(--brand-mid),var(--brand-end));
            -webkit-background-clip:text;
            background-clip:text;
            -webkit-text-fill-color:transparent;
        }
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            padding:12px 26px;
            border-radius:999px;
            font-weight:600;
            font-size:0.95rem;
            transition:filter 0.2s ease,transform 0.2s ease,background 0.2s ease,border-color 0.2s ease;
            white-space:nowrap;
            line-height:1.2;
        }
        .btn:hover{transform:translateY(-2px)}
        .btn:active{transform:translateY(0) scale(0.98)}
        .btn:focus-visible{outline:3px solid rgba(217,70,122,0.45);outline-offset:2px}
        .gradient-btn{
            background:linear-gradient(135deg,var(--brand-start),var(--brand-mid),var(--brand-end));
            color:#fff;
            border:none;
        }
        .gradient-btn:hover{filter:brightness(1.1)}
        .outline-btn{
            background:transparent;
            border:1px solid rgba(255,255,255,0.25);
            color:var(--text-strong);
        }
        .outline-btn:hover{
            border-color:var(--brand-start);
            background:rgba(217,70,122,0.08);
        }
        .text-btn{
            background:none;
            border:none;
            padding:0;
            color:var(--brand-start);
            font-weight:600;
            display:inline-flex;
            align-items:center;
            gap:6px;
            border-bottom:2px solid transparent;
            transition:border-color 0.2s ease,color 0.2s;
        }
        .text-btn:hover{
            border-bottom-color:var(--brand-start);
            color:var(--brand-mid);
        }
        /* Header / Nav */
        .site-header{
            position:absolute;
            top:0;left:0;width:100%;
            z-index:1000;
            padding:20px 0;
            transition:background 0.3s ease,padding 0.2s ease,box-shadow 0.3s ease,border-color 0.3s;
            border-bottom:1px solid transparent;
        }
        .site-header.scrolled{
            position:fixed;
            background:rgba(13,11,20,0.96);
            backdrop-filter:blur(18px) saturate(140%);
            -webkit-backdrop-filter:blur(18px) saturate(140%);
            padding:10px 0;
            border-bottom:1px solid rgba(255,255,255,0.10);
            box-shadow:0 8px 24px rgba(0,0,0,0.35);
        }
        .nav-wrap{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
        }
        .logo{
            font-size:1.4rem;
            font-weight:800;
            line-height:1.2;
            color:var(--text-strong);
            background:linear-gradient(135deg,var(--brand-start),var(--brand-mid),var(--brand-end));
            -webkit-background-clip:text;
            background-clip:text;
            -webkit-text-fill-color:transparent;
            white-space:nowrap;
        }
        .main-nav{
            display:flex;
            align-items:center;
            gap:28px;
        }
        .main-nav a{
            color:var(--text-strong);
            font-size:0.95rem;
            font-weight:500;
            padding-bottom:4px;
            position:relative;
            border-bottom:2px solid transparent;
            transition:color 0.2s ease,border-color 0.2s;
        }
        .main-nav a::after{
            content:"";
            position:absolute;
            left:0;bottom:-2px;
            width:0;height:2px;
            background:linear-gradient(135deg,var(--brand-start),var(--brand-mid),var(--brand-end));
            transition:width 0.25s ease;
        }
        .main-nav a:hover,
        .main-nav a.active{
            color:var(--brand-start);
        }
        .main-nav a.active::after,
        .main-nav a:hover::after{
            width:100%;
        }
        .nav-actions{
            display:flex;
            align-items:center;
            gap:12px;
        }
        .icon-btn{
            width:42px;height:42px;
            border-radius:999px;
            background:rgba(255,255,255,0.06);
            border:1px solid rgba(255,255,255,0.10);
            color:var(--text-strong);
            display:flex;
            align-items:center;
            justify-content:center;
            transition:background 0.2s,border-color 0.2s,transform 0.2s;
        }
        .icon-btn:hover{
            background:rgba(255,255,255,0.12);
            border-color:var(--brand-start);
            transform:translateY(-1px);
        }
        .search-icon{
            display:inline-block;
            width:14px;height:14px;
            border:2px solid currentColor;
            border-radius:50%;
            position:relative;
        }
        .search-icon::after{
            content:"";
            position:absolute;
            width:2px;height:6px;
            background:currentColor;
            bottom:-5px;right:-3px;
            transform:rotate(-45deg);
        }
        .menu-toggle{
            display:none;
            flex-direction:column;
            gap:5px;
            width:42px;height:42px;
            border-radius:999px;
            background:rgba(255,255,255,0.06);
            border:1px solid rgba(255,255,255,0.10);
            align-items:center;
            justify-content:center;
        }
        .menu-toggle span{
            display:block;
            width:18px;height:2px;
            background:var(--text-strong);
            border-radius:2px;
            transition:0.3s;
        }
        .search-bar{
            max-height:0;
            overflow:hidden;
            transition:max-height 0.3s ease,padding 0.3s ease;
            padding:0 24px;
            background:rgba(13,11,20,0.96);
            backdrop-filter:blur(18px) saturate(140%);
        }
        .search-bar.open{
            max-height:80px;
            padding:14px 24px;
            border-top:1px solid rgba(255,255,255,0.08);
        }
        .search-bar input{
            width:100%;
            padding:12px 20px;
            border-radius:999px;
            background:rgba(255,255,255,0.06);
            border:1px solid rgba(255,255,255,0.10);
            color:var(--text-strong);
            outline:none;
            transition:border-color 0.25s;
        }
        .search-bar input::placeholder{color:var(--text-muted)}
        .search-bar input:focus{border-color:var(--brand-start)}
        /* Hero */
        .hero-zone{
            min-height:92vh;
            display:flex;
            align-items:center;
            background:
                linear-gradient(135deg,rgba(13,11,20,0.95) 0%,rgba(49,46,129,0.65) 55%,rgba(13,11,20,0.85) 100%),
                url('/assets/images/1005252a1e6c02c6.webp') center/cover no-repeat;
            position:relative;
            padding:160px 0 70px;
            border-bottom:1px solid rgba(255,255,255,0.06);
        }
        .hero-inner{
            display:grid;
            grid-template-columns:1.1fr 0.9fr;
            gap:50px;
            align-items:center;
        }
        .hero-tag{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:7px 16px;
            border-radius:999px;
            background:rgba(255,255,255,0.06);
            border:1px solid rgba(255,255,255,0.14);
            color:var(--text-sub);
            font-size:0.85rem;
            font-weight:500;
            margin-bottom:18px;
        }
        .hero-tag .dot{
            width:8px;height:8px;border-radius:50%;
            background:var(--green);
            box-shadow:0 0 0 4px rgba(52,211,153,0.15);
        }
        .hero-title{
            font-size:2.75rem;
            font-weight:800;
            line-height:1.2;
            color:var(--text-strong);
            margin-bottom:22px;
            letter-spacing:-0.01em;
        }
        .hero-desc{
            font-size:1.05rem;
            color:var(--text-sub);
            line-height:1.85;
            margin-bottom:30px;
            max-width:580px;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:14px;
            margin-bottom:26px;
        }
        .hero-note{
            font-size:0.85rem;
            color:var(--text-muted);
            display:flex;
            align-items:center;
            gap:8px;
        }
        .hero-note span{color:var(--green);font-weight:600}
        .hero-visual{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:16px;
        }
        .hero-stat-card{
            background:rgba(255,255,255,0.06);
            backdrop-filter:blur(18px) saturate(140%);
            border:1px solid rgba(255,255,255,0.10);
            border-radius:var(--radius-md);
            padding:26px 22px;
            color:var(--text-strong);
            box-shadow:var(--shadow-card);
        }
        .hero-stat-card .stat-number{
            font-family:var(--font-num);
            font-size:2.3rem;
            font-weight:800;
            background:linear-gradient(135deg,var(--gold),#FFD68A);
            -webkit-background-clip:text;
            background-clip:text;
            -webkit-text-fill-color:transparent;
            line-height:1;
            margin-bottom:10px;
        }
        .hero-stat-card .stat-label{font-size:0.9rem;color:var(--text-sub)}
        .hero-stat-card.highlight{
            border-color:rgba(217,70,122,0.5);
            background:linear-gradient(135deg,rgba(217,70,122,0.12),rgba(109,40,217,0.10));
        }
        .scroll-indicator{
            position:absolute;
            bottom:28px;
            left:50%;
            transform:translateX(-50%);
            color:var(--text-muted);
            font-size:0.8rem;
            display:flex;
            flex-direction:column;
            align-items:center;
            gap:6px;
            transition:opacity 0.3s;
        }
        .scroll-indicator:hover{opacity:0.6}
        .scroll-indicator .line{
            width:1px;height:36px;
            background:linear-gradient(to bottom,rgba(255,255,255,0.5),rgba(255,255,255,0.05));
        }
        /* Stats strip */
        .stats-strip{
            background:rgba(255,255,255,0.02);
            border-bottom:1px solid rgba(255,255,255,0.06);
            padding:28px 0;
        }
        .stats-grid{
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:16px;
        }
        .data-badge{
            background:var(--glass-bg);
            border:1px solid rgba(255,255,255,0.10);
            border-radius:var(--radius-sm);
            padding:18px 20px;
            position:relative;
            overflow:hidden;
        }
        .data-badge::before{
            content:"";
            position:absolute;
            left:0;top:0;bottom:0;
            width:4px;
            background:linear-gradient(180deg,var(--brand-start),var(--brand-mid),var(--brand-end));
        }
        .data-badge .stat-number{
            font-family:var(--font-num);
            font-size:1.9rem;
            font-weight:800;
            color:var(--gold);
            line-height:1.2;
            margin-bottom:6px;
        }
        .data-badge .stat-label{
            font-size:0.85rem;
            color:var(--text-sub);
        }
        /* Features */
        .features-grid{
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:20px;
        }
        .feature-card{
            background:var(--glass-bg);
            border:1px solid rgba(255,255,255,0.10);
            border-radius:var(--radius-md);
            padding:28px 24px;
            position:relative;
            overflow:hidden;
            transition:transform 0.25s ease,box-shadow 0.25s ease,background 0.25s;
        }
        .feature-card::before{
            content:"";
            position:absolute;
            left:0;top:0;right:0;
            height:4px;
            background:linear-gradient(135deg,var(--brand-start),var(--brand-mid),var(--brand-end));
            opacity:0;
            transition:opacity 0.25s;
        }
        .feature-card:hover{
            transform:translateY(-5px);
            background:var(--bg-card-hover);
            box-shadow:var(--shadow-hover);
        }
        .feature-card:hover::before{opacity:1}
        .feature-icon{
            width:48px;height:48px;
            border-radius:var(--radius-sm);
            background:linear-gradient(135deg,rgba(217,70,122,0.14),rgba(109,40,217,0.14));
            display:flex;
            align-items:center;
            justify-content:center;
            margin-bottom:18px;
            color:var(--brand-start);
        }
        .feature-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8}
        .feature-card h3{
            font-size:1.05rem;
            font-weight:700;
            color:var(--text-strong);
            margin-bottom:10px;
        }
        .feature-card p{
            font-size:0.9rem;
            color:var(--text-sub);
            line-height:1.75;
        }
        /* Scenarios bento */
        .scenarios-bento{
            display:grid;
            grid-template-columns:repeat(2,1fr);
            gap:22px;
        }
        .scenario-card{
            position:relative;
            border-radius:var(--radius-lg);
            overflow:hidden;
            min-height:260px;
            display:flex;
            align-items:flex-end;
            background:var(--bg-card);
            border:1px solid rgba(255,255,255,0.10);
            transition:transform 0.3s ease,box-shadow 0.3s;
            box-shadow:var(--shadow-card);
        }
        .scenario-card:hover{
            transform:translateY(-6px);
            box-shadow:var(--shadow-hover);
        }
        .scenario-card img{
            position:absolute;
            top:0;left:0;width:100%;height:100%;
            object-fit:cover;
            opacity:0.75;
            transition:transform 0.5s ease;
        }
        .scenario-card:hover img{transform:scale(1.05)}
        .scenario-overlay{
            position:relative;
            z-index:1;
            padding:28px;
            width:100%;
            background:linear-gradient(0deg,rgba(13,11,20,0.95) 0%,rgba(13,11,20,0.55) 60%,transparent 100%);
            border-radius:0 0 var(--radius-lg) var(--radius-lg);
        }
        .scenario-card h3{
            font-size:1.4rem;
            font-weight:800;
            color:var(--text-strong);
            margin-bottom:8px;
        }
        .scenario-card p{
            font-size:0.9rem;
            color:var(--text-sub);
            max-width:420px;
        }
        /* Steps timeline */
        .steps-layout{
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:20px;
            position:relative;
        }
        .step-item{
            background:rgba(255,255,255,0.04);
            border:1px solid rgba(255,255,255,0.08);
            border-radius:var(--radius-md);
            padding:28px 24px;
            position:relative;
            transition:background 0.25s,border-color 0.25s;
        }
        .step-item:hover{
            background:rgba(255,255,255,0.08);
            border-color:rgba(217,70,122,0.4);
        }
        .step-number{
            font-family:var(--font-num);
            font-size:2.8rem;
            font-weight:800;
            background:linear-gradient(135deg,var(--brand-start),var(--brand-mid),var(--brand-end));
            -webkit-background-clip:text;
            background-clip:text;
            -webkit-text-fill-color:transparent;
            line-height:1;
            margin-bottom:18px;
        }
        .step-item h3{
            font-size:1.05rem;
            color:var(--text-strong);
            font-weight:700;
            margin-bottom:10px;
        }
        .step-item p{
            font-size:0.9rem;
            color:var(--text-sub);
        }
        /* Demo */
        .demo-track{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:20px;
        }
        .demo-card{
            background:var(--glass-bg);
            border:1px solid rgba(255,255,255,0.10);
            border-radius:var(--radius-md);
            overflow:hidden;
            transition:transform 0.25s,box-shadow 0.25s;
            box-shadow:var(--shadow-card);
        }
        .demo-card:hover{
            transform:translateY(-5px);
            box-shadow:var(--shadow-hover);
        }
        .demo-card .demo-img{
            aspect-ratio:4/3;
            background:var(--bg-soft);
            overflow:hidden;
            position:relative;
        }
        .demo-card img{
            width:100%;height:100%;
            object-fit:cover;
            transition:transform 0.4s ease;
        }
        .demo-card:hover img{transform:scale(1.04)}
        .demo-card .demo-info{
            padding:18px 20px;
        }
        .demo-card h3{
            font-size:1rem;
            font-weight:700;
            color:var(--text-strong);
            margin-bottom:6px;
        }
        .demo-card p{
            font-size:0.85rem;
            color:var(--text-sub);
        }
        /* Cases */
        .cases-grid{
            display:grid;
            grid-template-columns:repeat(2,1fr);
            gap:22px;
        }
        .case-card{
            background:var(--glass-bg);
            border:1px solid rgba(255,255,255,0.10);
            border-radius:var(--radius-lg);
            overflow:hidden;
            display:flex;
            flex-direction:column;
            transition:transform 0.25s,box-shadow 0.25s;
            box-shadow:var(--shadow-card);
        }
        .case-card:hover{
            transform:translateY(-5px);
            box-shadow:var(--shadow-hover);
        }
        .case-card .case-img{
            aspect-ratio:16/9;
            background:var(--bg-soft);
            overflow:hidden;
        }
        .case-card .case-img img{
            width:100%;height:100%;
            object-fit:cover;
            transition:transform 0.4s;
        }
        .case-card:hover .case-img img{transform:scale(1.04)}
        .case-body{
            padding:26px;
            flex:1;
            display:flex;
            flex-direction:column;
        }
        .case-body h3{
            font-size:1.3rem;
            font-weight:800;
            color:var(--text-strong);
            margin-bottom:12px;
        }
        .case-body p{
            font-size:0.95rem;
            color:var(--text-sub);
            margin-bottom:20px;
            flex:1;
        }
        .case-metrics{
            display:flex;
            gap:20px;
            margin-bottom:20px;
        }
        .case-metric .metric-value{
            font-family:var(--font-num);
            font-size:1.6rem;
            font-weight:800;
            color:var(--gold);
            line-height:1.2;
        }
        .case-metric .metric-label{
            font-size:0.8rem;
            color:var(--text-muted);
        }
        .case-body .text-btn{
            align-self:flex-start;
        }
        /* Testimonials */
        .testimonials-grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:20px;
        }
        .testimonial-card{
            background:var(--glass-bg);
            border:1px solid rgba(255,255,255,0.10);
            border-radius:var(--radius-md);
            padding:26px;
            position:relative;
            transition:background 0.25s,transform 0.25s,box-shadow 0.25s;
        }
        .testimonial-card:hover{
            background:var(--bg-card-hover);
            transform:translateY(-4px);
            box-shadow:var(--shadow-hover);
        }
        .testimonial-quote{
            font-size:1.6rem;
            color:var(--brand-start);
            font-weight:800;
            line-height:0.8;
            margin-bottom:12px;
        }
        .testimonial-stars{
            display:flex;
            gap:3px;
            margin-bottom:12px;
        }
        .testimonial-stars span{
            color:var(--gold);
            font-size:0.9rem;
        }
        .testimonial-card p{
            font-size:0.92rem;
            color:var(--text-main);
            line-height:1.75;
            margin-bottom:16px;
        }
        .testimonial-user{
            font-size:0.8rem;
            color:var(--text-muted);
            font-weight:500;
        }
        /* Pricing */
        .pricing-grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:22px;
            align-items:stretch;
        }
        .price-card{
            background:var(--glass-bg);
            border:1px solid rgba(255,255,255,0.10);
            border-radius:var(--radius-lg);
            padding:32px 28px;
            display:flex;
            flex-direction:column;
            transition:transform 0.25s,box-shadow 0.25s,border-color 0.25s;
            box-shadow:var(--shadow-card);
            position:relative;
        }
        .price-card:hover{
            transform:translateY(-8px);
            box-shadow:var(--shadow-hover);
            border-color:rgba(217,70,122,0.4);
        }
        .price-card.featured{
            border:1px solid transparent;
            background:
                linear-gradient(rgba(13,11,20,0.9),rgba(13,11,20,0.9)) padding-box,
                linear-gradient(135deg,var(--brand-start),var(--brand-mid),var(--brand-end)) border-box;
            box-shadow:0 22px 50px rgba(112,42,175,0.25);
        }
        .price-card h3{
            font-size:1.2rem;
            font-weight:800;
            color:var(--text-strong);
            margin-bottom:10px;
        }
        .price-card .price-amount{
            font-family:var(--font-num);
            font-size:2.8rem;
            font-weight:800;
            color:var(--gold);
            line-height:1.1;
            margin-bottom:18px;
        }
        .price-card .price-amount small{
            font-size:1rem;
            color:var(--text-muted);
            font-weight:500;
        }
        .price-features{
            display:flex;
            flex-direction:column;
            gap:12px;
            margin-bottom:28px;
            flex:1;
        }
        .price-features li{
            display:flex;
            align-items:center;
            gap:10px;
            font-size:0.9rem;
            color:var(--text-sub);
        }
        .price-features li::before{
            content:"✓";
            color:var(--green);
            font-weight:700;
            flex-shrink:0;
        }
        .price-card .outline-btn,
        .price-card .gradient-btn{
            align-self:stretch;
            justify-content:center;
        }
        /* Reviews carousel */
        .reviews-wrap{
            position:relative;
        }
        .reviews-track{
            display:flex;
            gap:16px;
            overflow-x:auto;
            scroll-snap-type:x mandatory;
            padding-bottom:12px;
            scrollbar-width:thin;
            scrollbar-color:rgba(255,255,255,0.2) transparent;
        }
        .reviews-track::-webkit-scrollbar{height:6px}
        .reviews-track::-webkit-scrollbar-track{background:transparent}
        .reviews-track::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border-radius:999px}
        .review-item{
            flex:0 0 340px;
            scroll-snap-align:start;
            background:rgba(255,255,255,0.04);
            border:1px solid rgba(255,255,255,0.08);
            border-radius:var(--radius-md);
            padding:20px;
            display:flex;
            flex-direction:column;
            gap:10px;
            transition:background 0.25s,border-color 0.25s;
        }
        .review-item:hover{
            background:rgba(255,255,255,0.08);
            border-color:rgba(217,70,122,0.35);
        }
        .review-meta{
            display:flex;
            align-items:center;
            justify-content:space-between;
        }
        .review-source{
            font-size:0.85rem;
            color:var(--brand-start);
            font-weight:600;
        }
        .review-date{
            font-size:0.8rem;
            color:var(--text-muted);
        }
        .review-item p{
            font-size:0.9rem;
            color:var(--text-main);
            line-height:1.7;
        }
        .reviews-nav{
            display:flex;
            gap:10px;
            margin-top:16px;
        }
        .reviews-nav .icon-btn{
            width:42px;height:42px;
        }
        /* News */
        .news-grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:22px;
        }
        .news-card{
            background:var(--glass-bg);
            border:1px solid rgba(255,255,255,0.10);
            border-radius:var(--radius-md);
            overflow:hidden;
            display:flex;
            flex-direction:column;
            transition:transform 0.25s,box-shadow 0.25s,background 0.25s;
            box-shadow:var(--shadow-card);
        }
        .news-card:hover{
            transform:translateY(-5px);
            box-shadow:var(--shadow-hover);
            background:var(--bg-card-hover);
        }
        .news-card .news-thumb{
            aspect-ratio:16/9;
            background:var(--bg-soft);
            overflow:hidden;
            display:block;
        }
        .news-card .news-thumb img{
            width:100%;height:100%;
            object-fit:cover;
            transition:transform 0.4s;
        }
        .news-card:hover .news-thumb img{transform:scale(1.04)}
        .news-body{
            padding:20px;
            display:flex;
            flex-direction:column;
            gap:10px;
            flex:1;
        }
        .news-tag{
            align-self:flex-start;
            padding:3px 10px;
            border-radius:999px;
            background:rgba(217,70,122,0.12);
            border:1px solid rgba(217,70,122,0.35);
            color:var(--brand-start);
            font-size:0.75rem;
            font-weight:600;
        }
        .news-body h3{
            font-size:1rem;
            font-weight:700;
            color:var(--text-strong);
            line-height:1.5;
        }
        .news-body h3 a{color:inherit;transition:color 0.2s}
        .news-body h3 a:hover{color:var(--brand-start)}
        .news-body p{
            font-size:0.88rem;
            color:var(--text-sub);
            line-height:1.65;
            display:-webkit-box;
            -webkit-line-clamp:3;
            -webkit-box-orient:vertical;
            overflow:hidden;
        }
        .news-body time{
            font-size:0.78rem;
            color:var(--text-muted);
            margin-top:auto;
        }
        .empty-news{
            text-align:center;
            padding:60px 20px;
            background:rgba(255,255,255,0.03);
            border:1px dashed rgba(255,255,255,0.15);
            border-radius:var(--radius-lg);
            color:var(--text-sub);
            font-size:1rem;
        }
        /* CTA Band */
        .cta-band{
            position:relative;
            border-radius:var(--radius-lg);
            padding:64px 24px;
            text-align:center;
            background:
                linear-gradient(135deg,rgba(217,70,122,0.25),rgba(109,40,217,0.25),rgba(49,46,129,0.35)),
                url('/assets/images/d776e297396e1b9a.webp') center/cover no-repeat;
            box-shadow:var(--shadow-hover);
            border:1px solid rgba(255,255,255,0.12);
            overflow:hidden;
        }
        .cta-band::after{
            content:"";
            position:absolute;
            inset:0;
            background:rgba(13,11,20,0.35);
            z-index:0;
        }
        .cta-band .container{
            position:relative;
            z-index:1;
        }
        .cta-band h2{
            font-size:2rem;
            font-weight:800;
            color:var(--text-strong);
            margin-bottom:16px;
        }
        .cta-band p{
            color:var(--text-sub);
            font-size:1rem;
            margin-bottom:28px;
            max-width:600px;
            margin-left:auto;
            margin-right:auto;
        }
        .cta-band .gradient-btn{
            background:linear-gradient(135deg,var(--gold),#FFD68A);
            color:#1a1025;
            font-weight:700;
        }
        /* Security */
        .security-grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:18px;
        }
        .security-card{
            background:rgba(255,255,255,0.04);
            border:1px solid rgba(255,255,255,0.08);
            border-radius:var(--radius-sm);
            padding:22px 20px;
            display:flex;
            gap:14px;
            align-items:flex-start;
            transition:background 0.25s,border-color 0.25s;
        }
        .security-card:hover{
            background:rgba(255,255,255,0.08);
            border-color:rgba(52,211,153,0.35);
        }
        .security-icon{
            flex-shrink:0;
            width:36px;height:36px;
            border-radius:var(--radius-xs);
            background:rgba(52,211,153,0.12);
            color:var(--green);
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .security-card h3{
            font-size:1rem;
            font-weight:700;
            color:var(--text-strong);
            margin-bottom:6px;
        }
        .security-card p{
            font-size:0.85rem;
            color:var(--text-sub);
            line-height:1.6;
        }
        /* FAQ */
        .faq-list{
            max-width:800px;
            margin:0 auto;
        }
        .faq-item{
            border:1px solid rgba(255,255,255,0.08);
            border-radius:var(--radius-md);
            background:rgba(255,255,255,0.03);
            margin-bottom:12px;
            overflow:hidden;
            transition:border-color 0.25s,background 0.25s;
        }
        .faq-item.active{
            border-color:rgba(217,70,122,0.4);
            background:rgba(255,255,255,0.05);
        }
        .faq-question{
            width:100%;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:14px;
            padding:18px 22px;
            color:var(--text-strong);
            font-size:1rem;
            font-weight:700;
            text-align:left;
            border-bottom:1px solid transparent;
            transition:color 0.25s;
        }
        .faq-item.active .faq-question{
            color:var(--brand-start);
            border-bottom-color:rgba(255,255,255,0.06);
        }
        .faq-icon{
            flex-shrink:0;
            width:22px;height:22px;
            position:relative;
            transition:transform 0.3s ease;
        }
        .faq-item.active .faq-icon{transform:rotate(45deg)}
        .faq-icon::before,
        .faq-icon::after{
            content:"";
            position:absolute;
            background:var(--text-strong);
            border-radius:2px;
        }
        .faq-item.active .faq-icon::before,
        .faq-item.active .faq-icon::after{background:var(--brand-start)}
        .faq-icon::before{
            width:100%;height:2px;
            left:0;top:50%;
            transform:translateY(-50%);
        }
        .faq-icon::after{
            width:2px;height:100%;
            left:50%;top:0;
            transform:translateX(-50%);
        }
        .faq-answer{
            max-height:0;
            overflow:hidden;
            transition:max-height 0.3s ease,padding 0.3s ease;
            padding:0 22px;
            color:var(--text-sub);
            font-size:0.9rem;
            line-height:1.75;
        }
        .faq-item.active .faq-answer{
            max-height:160px;
            padding:16px 22px 20px;
        }
        /* Footer */
        .site-footer{
            background:#0A0810;
            border-top:1px solid rgba(255,255,255,0.06);
            padding:56px 0 0;
            margin-top:0;
        }
        .footer-grid{
            display:grid;
            grid-template-columns:1.2fr 1fr 1fr 1fr 1fr;
            gap:30px;
            padding-bottom:40px;
        }
        .footer-brand p{
            margin-top:14px;
            font-size:0.85rem;
            color:var(--text-muted);
            line-height:1.7;
            max-width:260px;
        }
        .footer-col h4{
            font-size:0.9rem;
            font-weight:700;
            color:var(--text-strong);
            margin-bottom:16px;
        }
        .footer-col ul{
            display:flex;
            flex-direction:column;
            gap:10px;
        }
        .footer-col a{
            color:var(--text-sub);
            font-size:0.85rem;
            transition:color 0.2s;
        }
        .footer-col a:hover{
            color:var(--brand-start);
        }
        .footer-bottom{
            border-top:1px solid rgba(255,255,255,0.06);
            padding:18px 0;
            display:flex;
            justify-content:space-between;
            align-items:center;
            flex-wrap:wrap;
            gap:10px;
        }
        .footer-bottom p{
            font-size:0.8rem;
            color:var(--text-muted);
        }
        /* Responsive */
        @media (max-width:1024px){
            .main-nav{display:none}
            .menu-toggle{display:flex}
            .hero-inner{grid-template-columns:1fr;gap:40px}
            .hero-visual{grid-template-columns:repeat(2,1fr)}
            .features-grid{grid-template-columns:repeat(2,1fr)}
            .steps-layout{grid-template-columns:repeat(2,1fr)}
            .demo-track{grid-template-columns:repeat(2,1fr)}
            .news-grid{grid-template-columns:repeat(2,1fr)}
            .pricing-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
            .footer-grid{grid-template-columns:1fr 1fr 1fr}
        }
        @media (max-width:768px){
            .section{padding:56px 0}
            .hero-zone{min-height:auto;padding:130px 0 60px}
            .hero-title{font-size:2rem}
            .hero-desc{font-size:0.95rem}
            .stats-grid{grid-template-columns:repeat(2,1fr)}
            .features-grid{grid-template-columns:1fr}
            .scenarios-bento{grid-template-columns:1fr}
            .scenario-card{min-height:220px}
            .steps-layout{grid-template-columns:1fr}
            .demo-track{grid-template-columns:1fr}
            .cases-grid{grid-template-columns:1fr}
            .testimonials-grid{grid-template-columns:1fr}
            .pricing-grid{grid-template-columns:1fr}
            .review-item{flex:0 0 280px}
            .news-grid{grid-template-columns:1fr}
            .security-grid{grid-template-columns:1fr}
            .footer-grid{grid-template-columns:1fr 1fr}
            .nav-cta{display:none}
        }
        @media (max-width:520px){
            .footer-grid{grid-template-columns:1fr}
            .hero-actions{flex-direction:column;align-items:stretch}
            .hero-actions .btn{width:100%;justify-content:center}
            .hero-visual{grid-template-columns:1fr}
            .reviews-nav{justify-content:center}
        }
        @media (min-width:1025px){
            .main-nav{display:flex}
            .menu-toggle{display:none}
        }

/* roulang page: article */
:root{
    --bg:#0D0B14;
    --bg-soft:#12101E;
    --bg-card:rgba(255,255,255,0.05);
    --bg-card-hover:rgba(255,255,255,0.09);
    --glass-bg:rgba(255,255,255,0.06);
    --glass-border:rgba(255,255,255,0.10);
    --brand-start:#D9467A;
    --brand-mid:#6D28D9;
    --brand-end:#312E81;
    --gold:#F5B14C;
    --green:#34D399;
    --text-strong:#F8F5FF;
    --text-main:#D7D0E8;
    --text-sub:#9A92B8;
    --text-muted:#6B6488;
    --radius-lg:28px;
    --radius-md:18px;
    --radius-sm:14px;
    --radius-xs:8px;
    --shadow-card:0 8px 24px rgba(0,0,0,0.35);
    --shadow-hover:0 16px 42px rgba(112,42,175,0.28);
    --transition:0.25s ease;
    --font-sans:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
    --font-num:"Inter","Roboto Mono",sans-serif;
}
html{scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
    font-family:var(--font-sans);
    background:var(--bg);
    color:var(--text-main);
    line-height:1.7;
    font-size:16px;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%;height:auto}
button,input{font-family:inherit;font-size:inherit}
button{cursor:pointer;background:none;border:none}
ul,ol{list-style:none}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.narrow-container{max-width:860px;margin:0 auto;padding:0 24px}
.article-container{max-width:800px;margin:0 auto;padding:0 24px}
.section{padding:80px 0;position:relative}
.section-alt{background:rgba(255,255,255,0.02);border-top:1px solid rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.06)}
.section-head{max-width:720px;margin-bottom:40px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-tag{
    display:inline-block;
    padding:6px 14px;
    border-radius:999px;
    background:linear-gradient(135deg,rgba(217,70,122,0.16),rgba(109,40,217,0.16));
    border:1px solid rgba(217,70,122,0.35);
    color:var(--brand-start);
    font-size:0.8rem;
    font-weight:600;
    letter-spacing:0.02em;
    margin-bottom:16px;
}
.section-title{
    font-size:2rem;
    font-weight:800;
    line-height:1.3;
    color:var(--text-strong);
    margin-bottom:14px;
}
.section-desc{
    font-size:1rem;
    color:var(--text-sub);
    line-height:1.8;
}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 26px;
    border-radius:999px;
    font-weight:600;
    font-size:0.95rem;
    transition:filter 0.2s ease,transform 0.2s ease,background 0.2s ease,border-color 0.2s ease;
    white-space:nowrap;
    line-height:1.2;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(0.98)}
.btn:focus-visible{outline:3px solid rgba(217,70,122,0.45);outline-offset:2px}
.gradient-btn{
    background:linear-gradient(135deg,var(--brand-start),var(--brand-mid),var(--brand-end));
    color:#fff;
    border:none;
}
.gradient-btn:hover{filter:brightness(1.1)}
.outline-btn{
    background:transparent;
    border:1px solid rgba(255,255,255,0.25);
    color:var(--text-strong);
}
.outline-btn:hover{
    border-color:var(--brand-start);
    background:rgba(217,70,122,0.08);
}
.text-btn{
    background:none;
    border:none;
    padding:0;
    color:var(--brand-start);
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:6px;
    border-bottom:2px solid transparent;
    transition:border-color 0.2s ease,color 0.2s;
}
.text-btn:hover{
    border-bottom-color:var(--brand-start);
    color:var(--brand-mid);
}
/* Header / Nav */
.site-header{
    position:sticky;
    top:0;left:0;width:100%;
    z-index:1000;
    padding:16px 0;
    background:rgba(13,11,20,0.96);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    border-bottom:1px solid rgba(255,255,255,0.10);
    box-shadow:0 8px 24px rgba(0,0,0,0.35);
    transition:padding 0.2s ease,background 0.3s ease;
}
.nav-wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}
.logo{
    font-size:1.4rem;
    font-weight:800;
    line-height:1.2;
    color:var(--text-strong);
    background:linear-gradient(135deg,var(--brand-start),var(--brand-mid),var(--brand-end));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    white-space:nowrap;
}
.main-nav{
    display:flex;
    align-items:center;
    gap:28px;
}
.main-nav a{
    color:var(--text-strong);
    font-size:0.95rem;
    font-weight:500;
    padding-bottom:4px;
    position:relative;
    border-bottom:2px solid transparent;
    transition:color 0.2s ease,border-color 0.2s;
}
.main-nav a:hover{color:var(--brand-start)}
.main-nav a.active{
    border-bottom-color:var(--brand-start);
    color:var(--brand-start);
}
.main-nav a::after{
    content:"";
    position:absolute;
    left:0;bottom:-2px;
    width:0;height:2px;
    background:linear-gradient(135deg,var(--brand-start),var(--brand-mid),var(--brand-end));
    transition:width 0.25s ease;
}
.main-nav a:hover::after{width:100%}
.main-nav a.active::after{width:100%}
.nav-actions{
    display:flex;
    align-items:center;
    gap:14px;
}
.search-toggle{
    width:36px;height:36px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    color:var(--text-main);
    transition:background 0.25s,border-color 0.25s,color 0.25s;
}
.search-toggle:hover{
    background:rgba(217,70,122,0.15);
    border-color:var(--brand-start);
    color:var(--brand-start);
}
.search-panel{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    padding:16px 24px;
    background:rgba(13,11,20,0.98);
    border-bottom:1px solid var(--glass-border);
    box-shadow:0 12px 32px rgba(0,0,0,0.45);
    transform:translateY(-10px);
    opacity:0;
    pointer-events:none;
    transition:transform 0.25s ease,opacity 0.25s ease;
    z-index:999;
}
.search-panel.open{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
}
.search-panel input{
    width:100%;
    padding:12px 18px;
    border-radius:999px;
    border:1px solid var(--glass-border);
    background:var(--bg-card);
    color:var(--text-strong);
    font-size:0.95rem;
    outline:none;
    transition:border-color 0.25s;
}
.search-panel input::placeholder{color:var(--text-muted)}
.search-panel input:focus{
    border-color:var(--brand-mid);
}
.hamburger{
    display:none;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
    padding:6px;
    border-radius:6px;
    transition:background 0.2s;
}
.hamburger:hover{background:var(--glass-bg)}
.hamburger span{
    display:block;
    width:24px;
    height:2px;
    background:var(--text-strong);
    border-radius:2px;
    transition:transform 0.3s ease,opacity 0.3s;
}
.mobile-menu{
    display:none;
    position:fixed;
    top:60px;
    left:0;
    width:100%;
    height:calc(100vh - 60px);
    background:rgba(13,11,20,0.97);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    z-index:999;
    padding:32px 28px;
    flex-direction:column;
    gap:12px;
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform 0.3s ease;
}
.mobile-menu.open{transform:translateX(0);display:flex}
.mobile-menu a{
    color:var(--text-strong);
    font-size:1.1rem;
    font-weight:600;
    padding:14px 16px;
    border-radius:10px;
    transition:background 0.2s,color 0.2s;
}
.mobile-menu a:hover{
    background:rgba(217,70,122,0.12);
    color:var(--brand-start);
}
.mobile-menu .menu-divider{
    height:1px;
    background:var(--glass-border);
    margin:8px 0;
}
.mobile-menu .menu-label{
    font-size:0.8rem;
    color:var(--text-muted);
    letter-spacing:0.05em;
    text-transform:uppercase;
    padding:0 16px;
}
/* Breadcrumb */
.breadcrumb-nav{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    font-size:0.9rem;
    color:var(--text-sub);
    margin-bottom:24px;
}
.breadcrumb-nav a{
    color:var(--text-sub);
    transition:color 0.2s;
}
.breadcrumb-nav a:hover{color:var(--brand-start)}
.breadcrumb-nav .sep{
    color:var(--text-muted);
}
.breadcrumb-nav .current{
    color:var(--text-strong);
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:280px;
}
/* Article Hero */
.article-hero{
    padding:60px 0 40px;
    position:relative;
    background:
        radial-gradient(ellipse at 30% 20%,rgba(217,70,122,0.12),transparent 55%),
        radial-gradient(ellipse at 70% 0%,rgba(109,40,217,0.12),transparent 50%),
        var(--bg);
}
.article-hero::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background:url('/assets/images/1005252a1e6c02c6.webp') center/cover no-repeat;
    opacity:0.12;
    z-index:0;
}
.article-hero .article-hero-inner{
    position:relative;
    z-index:1;
}
.article-tag-row{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
    flex-wrap:wrap;
}
.article-cat-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 14px;
    border-radius:8px;
    background:linear-gradient(135deg,rgba(217,70,122,0.18),rgba(109,40,217,0.18));
    border:1px solid rgba(217,70,122,0.35);
    color:var(--brand-start);
    font-size:0.8rem;
    font-weight:600;
}
.article-read-time{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:0.85rem;
    color:var(--text-sub);
}
.article-read-time .icon{
    color:var(--green);
}
.article-hero h1{
    font-size:2.2rem;
    font-weight:800;
    line-height:1.3;
    color:var(--text-strong);
    margin-bottom:16px;
    max-width:800px;
}
.article-meta{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    font-size:0.9rem;
    color:var(--text-sub);
}
.article-meta span{
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.article-meta .dot{
    width:4px;height:4px;
    border-radius:50%;
    background:var(--text-muted);
    display:inline-block;
}
/* Article Body */
.article-body{
    font-size:1.05rem;
    line-height:1.9;
    color:var(--text-main);
    padding:40px 0;
}
.article-body p{
    margin-bottom:1.2em;
}
.article-body h2{
    font-size:1.5rem;
    font-weight:700;
    color:var(--text-strong);
    margin:2em 0 0.8em;
    padding-left:14px;
    border-left:4px solid var(--brand-start);
}
.article-body h3{
    font-size:1.2rem;
    font-weight:600;
    color:var(--text-strong);
    margin:1.6em 0 0.6em;
}
.article-body ul,.article-body ol{
    margin:0 0 1.2em 1.5em;
}
.article-body ul li{
    position:relative;
    padding-left:18px;
    margin-bottom:0.6em;
}
.article-body ul li::before{
    content:"";
    position:absolute;
    left:0;top:10px;
    width:6px;height:6px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--brand-start),var(--brand-mid));
}
.article-body ol li{
    position:relative;
    padding-left:8px;
    margin-bottom:0.6em;
}
.article-body blockquote{
    margin:24px 0;
    padding:20px 24px;
    border-left:4px solid var(--brand-mid);
    background:rgba(109,40,217,0.10);
    border-radius:0 12px 12px 0;
    color:var(--text-sub);
    font-style:italic;
}
.article-body img{
    border-radius:16px;
    margin:24px 0;
    border:1px solid var(--glass-border);
}
.article-body a{
    color:var(--brand-start);
    border-bottom:1px solid rgba(217,70,122,0.4);
    transition:border-color 0.2s,color 0.2s;
}
.article-body a:hover{
    color:var(--brand-mid);
    border-bottom-color:var(--brand-mid);
}
/* Article Demo Image Card */
.article-demo-section{
    padding:32px 0;
}
.article-demo-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}
.article-demo-card{
    border-radius:var(--radius-md);
    overflow:hidden;
    background:var(--bg-card);
    border:1px solid var(--glass-border);
    transition:box-shadow 0.3s,transform 0.3s;
}
.article-demo-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-hover);
}
.article-demo-card img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
}
.article-demo-card .demo-caption{
    padding:16px 18px;
    font-size:0.9rem;
    color:var(--text-sub);
    text-align:center;
}
/* Interactive Media Card */
.media-interactive{
    padding:40px 0;
}
.media-interactive .glass-card{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    padding:28px;
    border-radius:var(--radius-lg);
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}
.media-interactive .glass-card img{
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    border-radius:var(--radius-md);
}
.media-interactive .media-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:8px;
}
.media-interactive h2{
    font-size:1.35rem;
    font-weight:700;
    color:var(--text-strong);
}
.media-interactive p{
    color:var(--text-sub);
    font-size:0.95rem;
}
/* Related */
.related-section{
    padding:48px 0;
    background:rgba(255,255,255,0.02);
    border-top:1px solid rgba(255,255,255,0.06);
    border-bottom:1px solid rgba(255,255,255,0.06);
}
.related-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}
.related-card{
    background:var(--bg-card);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-md);
    overflow:hidden;
    transition:transform 0.25s,box-shadow 0.25s,background 0.25s;
}
.related-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-hover);
    background:var(--bg-card-hover);
}
.related-card img{
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
}
.related-card .related-body{
    padding:16px;
}
.related-card h3{
    font-size:0.95rem;
    font-weight:600;
    color:var(--text-strong);
    margin-bottom:6px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    line-height:1.5;
}
.related-card p{
    font-size:0.85rem;
    color:var(--text-sub);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin-bottom:8px;
}
.related-card time{
    font-size:0.75rem;
    color:var(--text-muted);
}
/* Back Entry */
.back-entry-section{
    padding:40px 0;
    text-align:center;
}
.back-entry-section .btn{
    min-width:220px;
}
/* Bottom CTA */
.article-cta{
    padding:64px 0;
    text-align:center;
    background:linear-gradient(135deg,rgba(217,70,122,0.15),rgba(109,40,217,0.15),rgba(49,46,129,0.2));
    border-radius:var(--radius-lg);
    margin:48px auto;
    max-width:800px;
    position:relative;
    overflow:hidden;
    border:1px solid rgba(217,70,122,0.25);
}
.article-cta::before{
    content:"";
    position:absolute;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    background:radial-gradient(circle at 30% 30%,rgba(217,70,122,0.18),transparent 50%),
               radial-gradient(circle at 70% 70%,rgba(109,40,217,0.18),transparent 50%);
    z-index:0;
}
.article-cta .container{
    position:relative;
    z-index:1;
}
.article-cta h2{
    font-size:1.8rem;
    font-weight:800;
    color:var(--text-strong);
    margin-bottom:12px;
}
.article-cta p{
    color:var(--text-sub);
    margin-bottom:24px;
}
/* Empty State */
.empty-state{
    padding:80px 24px;
    text-align:center;
    border-radius:var(--radius-lg);
    background:rgba(52,211,153,0.05);
    border:1px solid rgba(52,211,153,0.2);
}
.empty-state h2{
    font-size:1.5rem;
    color:var(--text-strong);
    margin-bottom:12px;
}
.empty-state p{
    color:var(--text-sub);
    margin-bottom:24px;
}
/* Footer */
.site-footer{
    background:#0A0810;
    border-top:1px solid rgba(255,255,255,0.08);
    padding:60px 0 30px;
}
.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr 1fr;
    gap:36px;
    margin-bottom:36px;
}
.footer-brand .logo{
    margin-bottom:14px;
    display:inline-block;
}
.footer-brand p{
    color:var(--text-sub);
    font-size:0.9rem;
    max-width:300px;
}
.footer-col h4{
    color:var(--text-strong);
    font-size:0.95rem;
    font-weight:600;
    margin-bottom:16px;
}
.footer-col ul li{
    margin-bottom:10px;
}
.footer-col ul li a{
    color:var(--text-sub);
    font-size:0.9rem;
    transition:color 0.2s;
}
.footer-col ul li a:hover{color:var(--brand-start)}
.footer-bottom{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:12px;
    padding-top:24px;
    border-top:1px solid var(--glass-border);
}
.footer-bottom p{
    color:var(--text-muted);
    font-size:0.85rem;
}
/* Responsive */
@media (max-width:1024px){
    .related-grid{grid-template-columns:repeat(2,1fr)}
    .footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
    .main-nav{display:none}
    .nav-actions .gradient-btn{display:none}
    .hamburger{display:flex}
    .mobile-menu{display:flex}
    .section{padding:56px 0}
    .section-title{font-size:1.5rem}
    .article-hero h1{font-size:1.7rem}
    .article-demo-grid{grid-template-columns:1fr}
    .media-interactive .glass-card{grid-template-columns:1fr}
    .related-grid{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr}
    .footer-bottom{flex-direction:column;text-align:center}
    .article-hero{padding:40px 0 28px}
    .breadcrumb-nav .current{max-width:160px}
}
@media (max-width:520px){
    .container{padding:0 16px}
    .narrow-container{padding:0 16px}
    .article-container{padding:0 16px}
    .article-hero h1{font-size:1.45rem}
    .article-body{font-size:1rem}
    .article-cta h2{font-size:1.4rem}
    .article-meta{flex-direction:column;gap:8px}
}

/* roulang page: category1 */
:root{
            --bg:#0D0B14;
            --bg-soft:#12101E;
            --bg-card:rgba(255,255,255,0.05);
            --bg-card-hover:rgba(255,255,255,0.09);
            --glass-bg:rgba(255,255,255,0.06);
            --glass-border:rgba(255,255,255,0.10);
            --brand-start:#D9467A;
            --brand-mid:#6D28D9;
            --brand-end:#312E81;
            --gold:#F5B14C;
            --green:#34D399;
            --text-strong:#F8F5FF;
            --text-main:#D7D0E8;
            --text-sub:#9A92B8;
            --text-muted:#6B6488;
            --radius-lg:28px;
            --radius-md:18px;
            --radius-sm:14px;
            --radius-xs:8px;
            --shadow-card:0 8px 24px rgba(0,0,0,0.35);
            --shadow-hover:0 16px 42px rgba(112,42,175,0.28);
            --transition:0.25s ease;
            --font-sans:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
            --font-num:"Inter","Roboto Mono",sans-serif;
        }
        *{box-sizing:border-box;margin:0;padding:0}
        html{scroll-behavior:smooth}
        body{
            font-family:var(--font-sans);
            background:var(--bg);
            color:var(--text-main);
            line-height:1.7;
            font-size:16px;
            -webkit-font-smoothing:antialiased;
            -moz-osx-font-smoothing:grayscale;
        }
        a{text-decoration:none;color:inherit}
        img{display:block;max-width:100%;height:auto}
        button,input{font-family:inherit;font-size:inherit}
        button{cursor:pointer;background:none;border:none}
        .container{max-width:1200px;margin:0 auto;padding:0 24px}
        .section{padding:80px 0;position:relative}
        .section-alt{background:rgba(255,255,255,0.02);border-top:1px solid rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.06)}
        .section-head{max-width:720px;margin-bottom:40px}
        .section-head.center{margin-left:auto;margin-right:auto;text-align:center}
        .section-tag{
            display:inline-block;
            padding:6px 14px;
            border-radius:999px;
            background:linear-gradient(135deg,rgba(217,70,122,0.16),rgba(109,40,217,0.16));
            border:1px solid rgba(217,70,122,0.35);
            color:var(--brand-start);
            font-size:0.8rem;
            font-weight:600;
            letter-spacing:0.02em;
            margin-bottom:16px;
        }
        .section-title{
            font-size:2rem;
            font-weight:800;
            line-height:1.3;
            color:var(--text-strong);
            margin-bottom:14px;
        }
        .section-desc{
            font-size:1rem;
            color:var(--text-sub);
            line-height:1.8;
        }
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            padding:12px 26px;
            border-radius:999px;
            font-weight:600;
            font-size:0.95rem;
            transition:filter 0.2s ease,transform 0.2s ease,background 0.2s ease,border-color 0.2s ease;
            white-space:nowrap;
            line-height:1.2;
        }
        .btn:hover{transform:translateY(-2px)}
        .btn:active{transform:translateY(0) scale(0.98)}
        .btn:focus-visible{outline:3px solid rgba(217,70,122,0.45);outline-offset:2px}
        .gradient-btn{
            background:linear-gradient(135deg,var(--brand-start),var(--brand-mid),var(--brand-end));
            color:#fff;
            border:none;
        }
        .gradient-btn:hover{filter:brightness(1.1)}
        .outline-btn{
            background:transparent;
            border:1px solid rgba(255,255,255,0.25);
            color:var(--text-strong);
        }
        .outline-btn:hover{
            border-color:var(--brand-start);
            background:rgba(217,70,122,0.08);
        }
        .text-btn{
            background:none;
            border:none;
            padding:0;
            color:var(--brand-start);
            font-weight:600;
            display:inline-flex;
            align-items:center;
            gap:6px;
            border-bottom:2px solid transparent;
            transition:border-color 0.2s ease,color 0.2s;
        }
        .text-btn:hover{
            border-bottom-color:var(--brand-start);
            color:var(--brand-mid);
        }
        /* Header / Nav */
        .site-header{
            position:absolute;
            top:0;left:0;width:100%;
            z-index:1000;
            padding:20px 0;
            transition:background 0.3s ease,padding 0.2s ease,box-shadow 0.3s ease,border-color 0.3s;
            border-bottom:1px solid transparent;
        }
        .site-header.scrolled{
            position:fixed;
            background:rgba(13,11,20,0.96);
            backdrop-filter:blur(18px) saturate(140%);
            -webkit-backdrop-filter:blur(18px) saturate(140%);
            padding:10px 0;
            border-bottom:1px solid rgba(255,255,255,0.10);
            box-shadow:0 8px 24px rgba(0,0,0,0.35);
        }
        .nav-wrap{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
        }
        .logo{
            font-size:1.4rem;
            font-weight:800;
            line-height:1.2;
            color:var(--text-strong);
            background:linear-gradient(135deg,var(--brand-start),var(--brand-mid),var(--brand-end));
            -webkit-background-clip:text;
            background-clip:text;
            -webkit-text-fill-color:transparent;
            white-space:nowrap;
        }
        .main-nav{
            display:flex;
            align-items:center;
            gap:28px;
        }
        .main-nav a{
            color:var(--text-strong);
            font-size:0.95rem;
            font-weight:500;
            padding-bottom:4px;
            position:relative;
            border-bottom:2px solid transparent;
            transition:color 0.2s ease,border-color 0.2s;
        }
        .main-nav a::after{
            content:"";
            position:absolute;
            left:0;bottom:-2px;
            width:0;height:2px;
            background:linear-gradient(135deg,var(--brand-start),var(--brand-mid),var(--brand-end));
            transition:width 0.25s ease;
        }
        .main-nav a:hover{color:var(--brand-start)}
        .main-nav a:hover::after{width:100%}
        .main-nav a.active{
            color:var(--brand-start);
            border-bottom-color:transparent;
        }
        .main-nav a.active::after{width:100%}
        .nav-actions{
            display:flex;
            align-items:center;
            gap:14px;
        }
        .search-toggle{
            width:40px;height:40px;
            border-radius:50%;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            color:var(--text-strong);
            background:var(--glass-bg);
            border:1px solid var(--glass-border);
            transition:background 0.2s,color 0.2s;
        }
        .search-toggle:hover{background:rgba(217,70,122,0.12);color:var(--brand-start)}
        .search-bar{
            position:absolute;
            top:100%;
            right:24px;
            width:0;
            overflow:hidden;
            background:rgba(13,11,20,0.96);
            border:1px solid var(--glass-border);
            border-radius:999px;
            transition:width 0.25s ease,opacity 0.25s ease;
            opacity:0;
            display:flex;
            align-items:center;
            padding:0 16px;
        }
        .search-bar.open{
            width:320px;
            opacity:1;
        }
        .search-bar input{
            flex:1;
            background:none;
            border:none;
            color:var(--text-strong);
            padding:10px 0;
            outline:none;
        }
        .search-bar input::placeholder{color:var(--text-muted)}
        .hamburger{
            display:none;
            flex-direction:column;
            gap:5px;
            width:40px;height:40px;
            border-radius:8px;
            background:var(--glass-bg);
            border:1px solid var(--glass-border);
            align-items:center;
            justify-content:center;
        }
        .hamburger span{
            display:block;
            width:20px;height:2px;
            background:var(--text-strong);
            border-radius:2px;
        }
        .mobile-menu{
            display:none;
            position:fixed;
            inset:0;
            background:rgba(13,11,20,0.98);
            z-index:999;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            gap:24px;
        }
        .mobile-menu.open{display:flex}
        .mobile-menu a{
            font-size:1.2rem;
            color:var(--text-strong);
            font-weight:600;
        }
        .mobile-menu a.active{color:var(--brand-start)}
        /* Page Hero */
        .page-hero{
            padding-top:140px;
            padding-bottom:60px;
            background:radial-gradient(circle at 20% 20%, rgba(217,70,122,0.15), transparent 40%),
                       radial-gradient(circle at 80% 40%, rgba(109,40,217,0.15), transparent 45%),
                       var(--bg);
            border-bottom:1px solid rgba(255,255,255,0.06);
        }
        .breadcrumb{
            display:flex;
            align-items:center;
            gap:8px;
            font-size:0.85rem;
            color:var(--text-sub);
            margin-bottom:20px;
        }
        .breadcrumb a:hover{color:var(--brand-start)}
        .breadcrumb .current{color:var(--text-strong);font-weight:600}
        .page-hero h1{
            font-size:2.4rem;
            font-weight:800;
            line-height:1.2;
            color:var(--text-strong);
            margin-bottom:16px;
            background:linear-gradient(135deg,var(--text-strong),var(--brand-mid));
            -webkit-background-clip:text;
            background-clip:text;
            -webkit-text-fill-color:transparent;
        }
        .page-hero-desc{
            font-size:1.05rem;
            color:var(--text-sub);
            max-width:720px;
            line-height:1.8;
        }
        /* Filter Bar */
        .filter-bar{
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            gap:14px;
            background:var(--glass-bg);
            border:1px solid var(--glass-border);
            backdrop-filter:blur(18px);
            border-radius:var(--radius-md);
            padding:16px 20px;
        }
        .filter-chips{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
        }
        .chip{
            padding:6px 16px;
            border-radius:999px;
            background:transparent;
            border:1px solid rgba(255,255,255,0.15);
            color:var(--text-sub);
            font-size:0.85rem;
            transition:all 0.2s;
        }
        .chip:hover{border-color:var(--brand-start);color:var(--text-strong)}
        .chip.active{
            background:linear-gradient(135deg,var(--brand-start),var(--brand-mid));
            border-color:transparent;
            color:#fff;
            font-weight:600;
        }
        .sort-select{
            margin-left:auto;
            background:rgba(255,255,255,0.08);
            border:1px solid var(--glass-border);
            color:var(--text-strong);
            padding:8px 16px;
            border-radius:999px;
            outline:none;
            font-size:0.85rem;
        }
        .sort-select option{background:#1a1725;color:var(--text-strong)}
        /* Card Grid */
        .grid-3{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:24px;
        }
        .content-card{
            background:var(--bg-card);
            border:1px solid var(--glass-border);
            border-radius:var(--radius-md);
            overflow:hidden;
            transition:transform var(--transition),box-shadow var(--transition),background var(--transition);
            box-shadow:var(--shadow-card);
        }
        .content-card:hover{
            transform:translateY(-4px);
            box-shadow:var(--shadow-hover);
            background:var(--bg-card-hover);
        }
        .content-card .card-img{
            aspect-ratio:16/9;
            overflow:hidden;
            position:relative;
        }
        .content-card .card-img img{
            width:100%;height:100%;
            object-fit:cover;
            transition:transform 0.5s ease;
        }
        .content-card:hover .card-img img{transform:scale(1.05)}
        .content-card .card-body{
            padding:20px;
        }
        .content-card .card-title{
            font-size:1.1rem;
            font-weight:600;
            color:var(--text-strong);
            margin-bottom:8px;
            line-height:1.4;
        }
        .content-card .card-desc{
            font-size:0.9rem;
            color:var(--text-sub);
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;
            margin-bottom:12px;
        }
        .badge{
            display:inline-block;
            padding:4px 10px;
            border-radius:var(--radius-xs);
            font-size:0.75rem;
            font-weight:600;
            background:rgba(217,70,122,0.15);
            color:var(--brand-start);
            border:1px solid rgba(217,70,122,0.35);
        }
        .badge.gold{
            background:rgba(245,177,76,0.12);
            color:var(--gold);
            border-color:rgba(245,177,76,0.35);
        }
        .badge.green{
            background:rgba(52,211,153,0.12);
            color:var(--green);
            border-color:rgba(52,211,153,0.35);
        }
        /* Data Strip */
        .data-strip{
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:20px;
        }
        .data-badge{
            background:var(--glass-bg);
            border:1px solid var(--glass-border);
            border-radius:var(--radius-sm);
            padding:20px;
            display:flex;
            align-items:center;
            gap:14px;
            transition:background var(--transition);
        }
        .data-badge:hover{background:var(--bg-card-hover)}
        .data-badge::before{
            content:"";
            width:4px;
            height:40px;
            background:linear-gradient(135deg,var(--brand-start),var(--brand-mid),var(--brand-end));
            border-radius:4px;
        }
        .data-number{
            font-family:var(--font-num);
            font-size:1.8rem;
            font-weight:700;
            color:var(--gold);
            line-height:1.2;
        }
        .data-label{
            font-size:0.85rem;
            color:var(--text-sub);
        }
        /* Feature Big Cards */
        .grid-2{
            display:grid;
            grid-template-columns:repeat(2,1fr);
            gap:24px;
        }
        .feature-big-card{
            position:relative;
            border-radius:var(--radius-lg);
            overflow:hidden;
            min-height:200px;
            display:flex;
            align-items:flex-end;
            background:var(--bg-soft);
            border:1px solid var(--glass-border);
            text-decoration:none;
            transition:transform var(--transition),box-shadow var(--transition);
        }
        .feature-big-card:hover{
            transform:translateY(-4px);
            box-shadow:var(--shadow-hover);
        }
        .feature-big-card img{
            position:absolute;
            top:0;left:0;width:100%;height:100%;
            object-fit:cover;
            opacity:0.45;
            transition:transform 0.5s ease,opacity 0.3s;
        }
        .feature-big-card:hover img{transform:scale(1.03);opacity:0.6}
        .feature-big-card .feature-content{
            position:relative;
            z-index:2;
            padding:24px;
        }
        .feature-big-card .feature-title{
            font-size:1.4rem;
            font-weight:700;
            color:#fff;
            margin-bottom:6px;
        }
        .feature-big-card .feature-desc{
            color:rgba(255,255,255,0.8);
            font-size:0.9rem;
        }
        /* Steps */
        .steps-grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:24px;
        }
        .step-item{
            background:var(--bg-card);
            border:1px solid var(--glass-border);
            border-radius:var(--radius-md);
            padding:28px;
            position:relative;
            transition:background var(--transition);
        }
        .step-item:hover{background:var(--bg-card-hover)}
        .step-num{
            font-family:var(--font-num);
            font-size:2.2rem;
            font-weight:700;
            background:linear-gradient(135deg,var(--brand-start),var(--brand-mid));
            -webkit-background-clip:text;
            background-clip:text;
            -webkit-text-fill-color:transparent;
            line-height:1;
            margin-bottom:16px;
        }
        .step-title{
            font-size:1.2rem;
            font-weight:600;
            color:var(--text-strong);
            margin-bottom:10px;
        }
        .step-desc{
            font-size:0.9rem;
            color:var(--text-sub);
            line-height:1.7;
        }
        /* FAQ */
        .faq-list{
            display:flex;
            flex-direction:column;
            gap:12px;
        }
        .faq-item{
            background:var(--bg-card);
            border:1px solid var(--glass-border);
            border-radius:var(--radius-sm);
            overflow:hidden;
            transition:border-color var(--transition);
        }
        .faq-item.active{
            border-color:rgba(217,70,122,0.4);
        }
        .faq-question{
            width:100%;
            text-align:left;
            padding:20px 24px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            color:var(--text-strong);
            font-weight:600;
            font-size:1rem;
            background:none;
        }
        .faq-question .faq-icon{
            font-size:1.4rem;
            color:var(--brand-start);
            transition:transform 0.3s;
        }
        .faq-item.active .faq-icon{transform:rotate(45deg)}
        .faq-answer{
            max-height:0;
            overflow:hidden;
            transition:max-height 0.3s ease;
            color:var(--text-sub);
            font-size:0.95rem;
            line-height:1.8;
            padding:0 24px;
        }
        .faq-item.active .faq-answer{
            max-height:300px;
            padding-bottom:20px;
        }
        /* CTA */
        .cta-banner{
            background:linear-gradient(135deg,rgba(217,70,122,0.15),rgba(109,40,217,0.15)),var(--bg-soft);
            border:1px solid var(--glass-border);
            border-radius:var(--radius-lg);
            padding:56px 40px;
            text-align:center;
        }
        .cta-banner h2{
            font-size:2rem;
            font-weight:800;
            color:var(--text-strong);
            margin-bottom:12px;
        }
        .cta-banner p{
            color:var(--text-sub);
            margin-bottom:24px;
            font-size:1rem;
        }
        /* Footer */
        .site-footer{
            background:#0A0810;
            border-top:1px solid rgba(255,255,255,0.08);
            padding:60px 0 30px;
            margin-top:0;
        }
        .footer-grid{
            display:grid;
            grid-template-columns:2fr 1fr 1fr 1fr 1fr;
            gap:40px;
            margin-bottom:40px;
        }
        .footer-brand .logo{
            font-size:1.3rem;
            margin-bottom:12px;
            display:inline-block;
        }
        .footer-brand p{
            font-size:0.9rem;
            color:var(--text-sub);
            line-height:1.7;
        }
        .footer-col h4{
            font-size:0.95rem;
            color:var(--text-strong);
            margin-bottom:16px;
            font-weight:600;
        }
        .footer-col ul{
            list-style:none;
            display:flex;
            flex-direction:column;
            gap:10px;
        }
        .footer-col a{
            color:var(--text-sub);
            font-size:0.9rem;
            transition:color 0.2s;
        }
        .footer-col a:hover{color:var(--brand-start)}
        .footer-bottom{
            border-top:1px solid rgba(255,255,255,0.06);
            padding-top:24px;
            display:flex;
            justify-content:space-between;
            flex-wrap:wrap;
            gap:12px;
            font-size:0.85rem;
            color:var(--text-muted);
        }
        /* Responsive */
        @media (max-width: 1024px){
            .main-nav{display:none}
            .hamburger{display:flex}
            .grid-3{grid-template-columns:repeat(2,1fr)}
            .data-strip{grid-template-columns:repeat(2,1fr)}
            .steps-grid{grid-template-columns:1fr}
            .footer-grid{grid-template-columns:1fr 1fr}
        }
        @media (max-width: 768px){
            .section{padding:56px 0}
            .page-hero{padding-top:100px;padding-bottom:40px}
            .page-hero h1{font-size:1.8rem}
            .grid-3{grid-template-columns:1fr}
            .grid-2{grid-template-columns:1fr}
            .data-strip{grid-template-columns:1fr 1fr}
            .cta-banner{padding:40px 20px}
            .footer-grid{grid-template-columns:1fr}
            .search-bar.open{width:calc(100vw - 48px)}
            .filter-bar{flex-direction:column;align-items:stretch}
            .sort-select{margin-left:0}
        }
        @media (max-width: 520px){
            .data-strip{grid-template-columns:1fr}
            .container{padding:0 16px}
        }