/* roulang page: index */
:root{
            --bg:#090d12;
            --bg-soft:#101720;
            --bg-panel:#141d28;
            --bg-panel-2:#172231;
            --text:#edf2fb;
            --muted:#9aa7bd;
            --line:rgba(255,255,255,.09);
            --line-2:rgba(255,255,255,.14);
            --accent:#16e7c1;
            --accent-2:#b05cff;
            --accent-3:#ff9e4d;
            --danger:#ff6b8a;
            --success:#4be38f;
            --shadow:0 18px 60px rgba(0,0,0,.34);
            --shadow-soft:0 10px 30px rgba(0,0,0,.22);
            --radius:22px;
            --radius-sm:16px;
            --nav-h:82px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
            color:var(--text);
            line-height:1.7;
            background:
                radial-gradient(circle at 20% 10%, rgba(22,231,193,.11), transparent 24%),
                radial-gradient(circle at 80% 0%, rgba(176,92,255,.10), transparent 22%),
                radial-gradient(circle at 70% 75%, rgba(255,158,77,.08), transparent 18%),
                linear-gradient(180deg, #080c11 0%, #0b1118 45%, #090d12 100%);
            min-height:100vh;
            overflow-x:hidden;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background-image:
                linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
            background-size:44px 44px;
            mask-image: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.15) 60%, transparent 100%);
            opacity:.35;
            z-index:-1;
        }
        a{color:inherit;text-decoration:none}
        a:hover{color:inherit}
        img{max-width:100%;display:block}
        button,input,select,textarea{font:inherit}
        .container-xxl{position:relative}
        .section{
            position:relative;
            padding:84px 0;
        }
        .section.tight{
            padding-top:56px;
            padding-bottom:56px;
        }
        .section-title{
            font-size:clamp(1.55rem,2vw,2.2rem);
            font-weight:800;
            letter-spacing:.01em;
            margin:0 0 10px;
        }
        .section-lead{
            margin:0;
            color:var(--muted);
            max-width:70ch;
            font-size:1rem;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:.5rem;
            padding:.38rem .78rem;
            border-radius:999px;
            border:1px solid rgba(22,231,193,.28);
            background:rgba(22,231,193,.08);
            color:#c9fff2;
            font-size:.82rem;
            letter-spacing:.04em;
            text-transform:none;
        }
        .eyebrow::before{
            content:"";
            width:.42rem;
            height:.42rem;
            border-radius:50%;
            background:var(--accent);
            box-shadow:0 0 0 6px rgba(22,231,193,.12);
        }
        .subtle-line{
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
        }
        .site-header{
            position:fixed;
            top:0;
            left:0;
            right:0;
            z-index:1030;
            padding:14px 0;
            transition:all .25s ease;
        }
        .site-header.scrolled{
            padding:8px 0;
        }
        .nav-shell{
            border:1px solid rgba(255,255,255,.08);
            background:rgba(11,16,23,.70);
            backdrop-filter: blur(18px);
            border-radius:22px;
            box-shadow:var(--shadow-soft);
            padding:.7rem 1rem;
            transition:all .25s ease;
        }
        .site-header.scrolled .nav-shell{
            background:rgba(9,13,18,.84);
            border-color:rgba(255,255,255,.12);
            box-shadow:0 16px 38px rgba(0,0,0,.42);
        }
        .navbar{
            padding:0;
        }
        .navbar-brand{
            display:flex;
            align-items:center;
            gap:.75rem;
            color:var(--text);
            margin-right:1rem;
            font-weight:800;
            letter-spacing:.02em;
            min-width:0;
        }
        .brand-mark{
            width:2.65rem;
            height:2.65rem;
            border-radius:18px;
            background:
                linear-gradient(145deg, rgba(22,231,193,.96), rgba(176,92,255,.92));
            box-shadow:0 0 0 6px rgba(22,231,193,.08), 0 16px 28px rgba(22,231,193,.18);
            position:relative;
            flex:0 0 auto;
        }
        .brand-mark::before,
        .brand-mark::after{
            content:"";
            position:absolute;
            inset:50% auto auto 50%;
            transform:translate(-50%,-50%);
            border-radius:999px;
            background:rgba(9,13,18,.18);
        }
        .brand-mark::before{
            width:1.18rem;
            height:1.18rem;
            box-shadow:0 0 0 10px rgba(255,255,255,.08);
        }
        .brand-mark::after{
            width:.36rem;
            height:.36rem;
            background:#fff;
            box-shadow:0 0 18px rgba(255,255,255,.5);
        }
        .brand-text{
            display:flex;
            flex-direction:column;
            line-height:1.1;
            min-width:0;
        }
        .brand-text strong{
            font-size:1rem;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .brand-text span{
            color:var(--muted);
            font-size:.76rem;
            margin-top:.25rem;
        }
        .nav-links{
            display:flex;
            align-items:center;
            justify-content:center;
            gap:.65rem;
        }
        .nav-links a{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:.74rem 1rem;
            border-radius:999px;
            border:1px solid transparent;
            color:#d8e1ef;
            font-size:.95rem;
            font-weight:650;
            transition:all .2s ease;
            background:transparent;
        }
        .nav-links a:hover,
        .nav-links a:focus{
            color:#fff;
            border-color:rgba(22,231,193,.22);
            background:rgba(22,231,193,.08);
            transform:translateY(-1px);
            outline:none;
        }
        .nav-links a.active{
            color:#071015;
            background:linear-gradient(135deg, var(--accent), #7ff4df);
            box-shadow:0 10px 24px rgba(22,231,193,.22);
        }
        .nav-tools{
            display:flex;
            align-items:center;
            justify-content:flex-end;
            gap:.7rem;
        }
        .search-inline{
            display:flex;
            align-items:center;
            min-width:min(340px, 100%);
            border:1px solid rgba(255,255,255,.09);
            border-radius:999px;
            background:rgba(255,255,255,.03);
            overflow:hidden;
            transition:all .2s ease;
        }
        .search-inline:focus-within{
            border-color:rgba(22,231,193,.32);
            box-shadow:0 0 0 4px rgba(22,231,193,.08);
            background:rgba(255,255,255,.05);
        }
        .search-inline input{
            border:0;
            outline:none;
            background:transparent;
            color:var(--text);
            padding:.78rem 1rem;
            width:100%;
            font-size:.92rem;
        }
        .search-inline input::placeholder{color:#7f8aa0}
        .search-inline button{
            border:0;
            padding:.78rem 1.12rem;
            color:#03110d;
            font-weight:700;
            background:linear-gradient(135deg, var(--accent), #92ffe5);
            transition:all .2s ease;
        }
        .search-inline button:hover{
            filter:brightness(1.03);
        }
        .btn-brand,
        .btn-brand-outline{
            border-radius:999px;
            padding:.82rem 1.2rem;
            font-weight:700;
            border:1px solid transparent;
            transition:all .22s ease;
        }
        .btn-brand{
            color:#05110e;
            background:linear-gradient(135deg, var(--accent), #9cf7e8);
            box-shadow:0 16px 30px rgba(22,231,193,.22);
        }
        .btn-brand:hover,
        .btn-brand:focus{
            color:#05110e;
            transform:translateY(-2px);
            box-shadow:0 18px 38px rgba(22,231,193,.28);
        }
        .btn-brand-outline{
            color:#eaf7f3;
            border-color:rgba(22,231,193,.25);
            background:rgba(22,231,193,.07);
        }
        .btn-brand-outline:hover,
        .btn-brand-outline:focus{
            color:#ffffff;
            border-color:rgba(22,231,193,.48);
            background:rgba(22,231,193,.12);
            transform:translateY(-2px);
        }
        .btn-soft{
            border-radius:999px;
            padding:.82rem 1.2rem;
            color:#dfe8f7;
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.08);
            font-weight:650;
            transition:all .22s ease;
        }
        .btn-soft:hover,
        .btn-soft:focus{
            color:#fff;
            background:rgba(255,255,255,.07);
            border-color:rgba(255,255,255,.16);
            transform:translateY(-2px);
        }
        .navbar-toggler{
            border:1px solid rgba(255,255,255,.12);
            background:rgba(255,255,255,.04);
            border-radius:14px;
            padding:.62rem .72rem;
            box-shadow:none !important;
        }
        .navbar-toggler:focus{
            box-shadow:0 0 0 .2rem rgba(22,231,193,.15) !important;
        }
        .navbar-toggler-icon{
            filter:invert(1) brightness(1.2);
        }
        .offcanvas{
            background:
                linear-gradient(180deg, rgba(12,17,25,.98), rgba(9,13,18,.98));
            color:var(--text);
            border-left:1px solid rgba(255,255,255,.08);
        }
        .offcanvas-header{
            border-bottom:1px solid rgba(255,255,255,.08);
        }
        .offcanvas-body{
            display:flex;
            flex-direction:column;
            gap:1rem;
        }
        .mobile-nav a{
            display:flex;
            align-items:center;
            justify-content:space-between;
            padding:1rem 1rem;
            border-radius:16px;
            background:rgba(255,255,255,.03);
            border:1px solid rgba(255,255,255,.06);
            color:#e5edf9;
            font-weight:650;
            transition:all .2s ease;
            margin-bottom:.75rem;
        }
        .mobile-nav a:hover,
        .mobile-nav a.active{
            background:rgba(22,231,193,.09);
            border-color:rgba(22,231,193,.2);
        }
        .mobile-search{
            display:flex;
            gap:.6rem;
        }
        .mobile-search input{
            flex:1;
            border-radius:16px;
            border:1px solid rgba(255,255,255,.1);
            background:rgba(255,255,255,.04);
            color:var(--text);
            padding:.86rem 1rem;
            outline:none;
        }
        .mobile-search input:focus{
            border-color:rgba(22,231,193,.28);
            box-shadow:0 0 0 4px rgba(22,231,193,.08);
        }
        .hero{
            padding:clamp(7.5rem, 10vw, 10rem) 0 1rem;
        }
        .hero-shell{
            position:relative;
            overflow:hidden;
            border-radius:28px;
            border:1px solid rgba(255,255,255,.10);
            background:
                linear-gradient(160deg, rgba(18,26,36,.96), rgba(12,17,25,.96)),
                radial-gradient(circle at top left, rgba(22,231,193,.16), transparent 30%),
                radial-gradient(circle at top right, rgba(176,92,255,.16), transparent 28%);
            box-shadow:var(--shadow);
            padding:clamp(1.2rem, 2vw, 2rem);
        }
        .hero-shell::before{
            content:"";
            position:absolute;
            inset:auto -20% -38% auto;
            width:22rem;
            height:22rem;
            background:radial-gradient(circle, rgba(22,231,193,.16), transparent 66%);
            filter:blur(12px);
            pointer-events:none;
        }
        .hero-shell::after{
            content:"";
            position:absolute;
            inset:-18% auto auto -16%;
            width:18rem;
            height:18rem;
            background:radial-gradient(circle, rgba(176,92,255,.14), transparent 62%);
            filter:blur(10px);
            pointer-events:none;
        }
        .hero-copy{
            position:relative;
            z-index:1;
        }
        .hero-title{
            font-size:clamp(2.4rem, 5vw, 4.5rem);
            line-height:1.06;
            letter-spacing:-.02em;
            font-weight:900;
            margin:.9rem 0 1rem;
        }
        .hero-title .accent{
            background:linear-gradient(90deg, #eafaf6, #93fff0 28%, #d0adff 68%, #ffffff);
            -webkit-background-clip:text;
            background-clip:text;
            color:transparent;
        }
        .hero-subtitle{
            max-width:60ch;
            color:#c7d2e3;
            font-size:1.03rem;
            margin:0 0 1.4rem;
        }
        .hero-badges{
            display:flex;
            flex-wrap:wrap;
            gap:.65rem;
            margin-bottom:1.5rem;
        }
        .badge-soft{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            padding:.55rem .82rem;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.09);
            background:rgba(255,255,255,.04);
            color:#e2eaf8;
            font-size:.88rem;
        }
        .badge-soft .dot{
            width:.45rem;
            height:.45rem;
            border-radius:50%;
            background:var(--accent);
            box-shadow:0 0 0 6px rgba(22,231,193,.12);
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:.8rem;
            align-items:center;
            margin-bottom:1.45rem;
        }
        .hero-note{
            display:flex;
            flex-wrap:wrap;
            gap:1rem;
            color:var(--muted);
            font-size:.92rem;
            margin:0;
        }
        .hero-note span{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
        }
        .hero-note b{
            color:#fff;
        }
        .hero-panel{
            position:relative;
            z-index:1;
            border-radius:24px;
            border:1px solid rgba(255,255,255,.08);
            background:
                linear-gradient(180deg, rgba(19,27,38,.96), rgba(15,21,31,.94));
            padding:1.2rem;
            box-shadow:var(--shadow-soft);
        }
        .panel-head{
            display:flex;
            justify-content:space-between;
            align-items:flex-start;
            gap:1rem;
            margin-bottom:1rem;
        }
        .panel-title{
            margin:0;
            font-size:1.02rem;
            font-weight:800;
        }
        .panel-sub{
            margin:.2rem 0 0;
            color:var(--muted);
            font-size:.88rem;
        }
        .join-count{
            text-align:right;
        }
        .join-count strong{
            display:block;
            font-size:1.8rem;
            line-height:1;
            color:#fff;
        }
        .join-count span{
            color:var(--muted);
            font-size:.82rem;
        }
        .progress-wrap{
            margin-top:1rem;
        }
        .progress-label{
            display:flex;
            justify-content:space-between;
            align-items:center;
            color:#d9e3f4;
            font-size:.88rem;
            margin-bottom:.55rem;
        }
        .progress{
            height:12px;
            border-radius:999px;
            background:rgba(255,255,255,.06);
            overflow:hidden;
        }
        .progress-bar{
            border-radius:999px;
            background:linear-gradient(90deg, var(--accent), #9ff9ea);
            box-shadow:0 8px 18px rgba(22,231,193,.18);
        }
        .mini-grid{
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:.8rem;
            margin-top:1rem;
        }
        .mini-card{
            padding:.95rem;
            border-radius:18px;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.03);
        }
        .mini-card small{
            color:var(--muted);
            display:block;
            margin-bottom:.25rem;
        }
        .mini-card strong{
            font-size:1.18rem;
            display:block;
            margin-bottom:.15rem;
        }
        .mini-card span{
            color:#c6d2e3;
            font-size:.84rem;
        }
        .floating-chip{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            position:absolute;
            z-index:2;
            top:1rem;
            right:1rem;
            padding:.55rem .8rem;
            border-radius:999px;
            background:rgba(9,13,18,.82);
            border:1px solid rgba(255,255,255,.08);
            color:#fff;
            box-shadow:var(--shadow-soft);
            font-size:.85rem;
        }
        .floating-chip i{
            width:.45rem;
            height:.45rem;
            border-radius:50%;
            background:var(--success);
            box-shadow:0 0 0 6px rgba(75,227,143,.12);
            display:inline-block;
        }
        .metric-grid{
            display:grid;
            grid-template-columns:repeat(4,minmax(0,1fr));
            gap:1rem;
        }
        .metric-card{
            position:relative;
            overflow:hidden;
            border-radius:var(--radius);
            border:1px solid rgba(255,255,255,.08);
            background:
                linear-gradient(180deg, rgba(19,27,38,.95), rgba(14,20,29,.94));
            box-shadow:var(--shadow-soft);
            padding:1.2rem;
            min-height:170px;
            transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
        }
        .metric-card:hover{
            transform:translateY(-4px);
            border-color:rgba(22,231,193,.24);
            box-shadow:0 18px 42px rgba(0,0,0,.35);
        }
        .metric-card::after{
            content:"";
            position:absolute;
            inset:auto -2rem -2.4rem auto;
            width:7rem;
            height:7rem;
            border-radius:50%;
            background:radial-gradient(circle, rgba(22,231,193,.12), transparent 68%);
        }
        .metric-num{
            font-size:2rem;
            font-weight:900;
            letter-spacing:-.03em;
            margin-bottom:.2rem;
        }
        .metric-label{
            color:#e6eefc;
            font-weight:700;
            margin-bottom:.45rem;
        }
        .metric-desc{
            color:var(--muted);
            margin:0;
            font-size:.92rem;
        }
        .metric-trend{
            position:absolute;
            top:1rem;
            right:1rem;
            padding:.35rem .6rem;
            border-radius:999px;
            background:rgba(22,231,193,.12);
            color:#bfffee;
            border:1px solid rgba(22,231,193,.18);
            font-size:.78rem;
            font-weight:700;
        }
        .panel-card{
            border-radius:24px;
            border:1px solid rgba(255,255,255,.08);
            background:
                linear-gradient(180deg, rgba(19,27,38,.95), rgba(13,18,26,.95));
            box-shadow:var(--shadow-soft);
            padding:1.2rem;
            height:100%;
        }
        .panel-card h3{
            font-size:1.1rem;
            margin:0 0 .35rem;
            font-weight:800;
        }
        .panel-card p{
            color:var(--muted);
            margin:0;
        }
        .matrix-grid{
            display:grid;
            grid-template-columns:repeat(12,minmax(0,1fr));
            gap:1rem;
        }
        .matrix-grid .matrix-item:nth-child(1){grid-column:span 5;}
        .matrix-grid .matrix-item:nth-child(2){grid-column:span 7;}
        .matrix-grid .matrix-item:nth-child(3){grid-column:span 4;}
        .matrix-grid .matrix-item:nth-child(4){grid-column:span 4;}
        .matrix-grid .matrix-item:nth-child(5){grid-column:span 4;}
        .matrix-card{
            position:relative;
            height:100%;
            border-radius:24px;
            border:1px solid rgba(255,255,255,.08);
            background:
                linear-gradient(160deg, rgba(20,29,41,.98), rgba(14,19,28,.96));
            padding:1.25rem;
            box-shadow:var(--shadow-soft);
            overflow:hidden;
            transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
        }
        .matrix-card:hover{
            transform:translateY(-4px);
            border-color:rgba(176,92,255,.24);
            box-shadow:0 18px 42px rgba(0,0,0,.34);
        }
        .matrix-card .tag{
            display:inline-flex;
            align-items:center;
            gap:.35rem;
            padding:.34rem .62rem;
            border-radius:999px;
            background:rgba(176,92,255,.10);
            border:1px solid rgba(176,92,255,.18);
            color:#e7d4ff;
            font-size:.78rem;
            font-weight:700;
            margin-bottom:.85rem;
        }
        .matrix-card h3{
            font-size:1.12rem;
            font-weight:800;
            margin:0 0 .55rem;
        }
        .matrix-card p{
            color:var(--muted);
            margin:0;
            font-size:.96rem;
        }
        .matrix-card .index{
            position:absolute;
            right:1rem;
            bottom:1rem;
            font-size:2.6rem;
            font-weight:900;
            color:rgba(255,255,255,.05);
            line-height:1;
        }
        .compare-grid{
            display:grid;
            grid-template-columns:1.1fr .9fr;
            gap:1rem;
        }
        .compare-board,
        .news-board,
        .progress-board,
        .faq-board,
        .form-board{
            border-radius:28px;
            border:1px solid rgba(255,255,255,.08);
            background:
                linear-gradient(180deg, rgba(19,27,38,.96), rgba(13,18,27,.96));
            box-shadow:var(--shadow-soft);
        }
        .compare-board{
            padding:1.25rem;
        }
        .compare-list{
            display:grid;
            gap:.9rem;
            margin-top:1rem;
        }
        .compare-item{
            padding:1rem 1rem .95rem;
            border-radius:20px;
            background:rgba(255,255,255,.03);
            border:1px solid rgba(255,255,255,.06);
        }
        .compare-top{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:1rem;
            margin-bottom:.5rem;
        }
        .compare-top strong{
            font-size:1rem;
        }
        .compare-score{
            color:#dffdf4;
            font-weight:800;
        }
        .score-track{
            width:100%;
            height:12px;
            border-radius:999px;
            background:rgba(255,255,255,.06);
            overflow:hidden;
            margin-bottom:.55rem;
        }
        .score-fill{
            height:100%;
            border-radius:999px;
            background:linear-gradient(90deg, var(--accent-2), var(--accent));
        }
        .compare-item p{
            margin:0;
            color:var(--muted);
            font-size:.94rem;
        }
        .compare-side{
            padding:1.25rem;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            gap:1rem;
        }
        .side-pills{
            display:flex;
            flex-wrap:wrap;
            gap:.6rem;
        }
        .side-pill{
            padding:.5rem .75rem;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.04);
            color:#dfe8f7;
            font-size:.85rem;
        }
        .side-card{
            border-radius:22px;
            border:1px solid rgba(255,255,255,.07);
            background:rgba(255,255,255,.03);
            padding:1rem;
        }
        .side-card strong{
            display:block;
            margin-bottom:.35rem;
            font-size:1.02rem;
        }
        .side-card p{
            margin:0;
            color:var(--muted);
            font-size:.94rem;
        }
        .news-board{
            padding:1.25rem;
        }
        .news-layout{
            display:grid;
            grid-template-columns:1.15fr .85fr;
            gap:1rem;
            align-items:start;
        }
        .news-list{
            display:grid;
            gap:.8rem;
        }
        .news-item{
            display:block;
            padding:1rem 1.05rem;
            border-radius:18px;
            border:1px solid rgba(255,255,255,.06);
            background:rgba(255,255,255,.03);
            transition:all .22s ease;
        }
        .news-item:hover{
            transform:translateY(-3px);
            border-color:rgba(22,231,193,.18);
            background:rgba(22,231,193,.05);
        }
        .news-item strong{
            display:block;
            font-size:1rem;
            margin-bottom:.35rem;
        }
        .news-item span{
            color:var(--muted);
            font-size:.86rem;
        }
        .news-side{
            display:grid;
            gap:.8rem;
        }
        .summary-card{
            border-radius:20px;
            border:1px solid rgba(255,255,255,.07);
            background:rgba(255,255,255,.03);
            padding:1rem;
        }
        .summary-card h3{
            margin:0 0 .45rem;
            font-size:1.02rem;
            font-weight:800;
        }
        .summary-card p{
            margin:0 0 .8rem;
            color:var(--muted);
            font-size:.94rem;
        }
        .tag-cloud{
            display:flex;
            flex-wrap:wrap;
            gap:.5rem;
        }
        .tag-cloud .tag{
            padding:.45rem .7rem;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.04);
            color:#e4ebf9;
            font-size:.84rem;
        }
        .progress-board{
            padding:1.25rem;
        }
        .progress-layout{
            display:grid;
            grid-template-columns:1fr .95fr;
            gap:1rem;
            align-items:start;
        }
        .timeline{
            display:grid;
            gap:.9rem;
            margin-top:1rem;
        }
        .timeline-item{
            display:grid;
            grid-template-columns:auto 1fr;
            gap:.9rem;
            align-items:start;
            padding:1rem;
            border-radius:20px;
            border:1px solid rgba(255,255,255,.06);
            background:rgba(255,255,255,.03);
        }
        .timeline-step{
            width:3rem;
            height:3rem;
            border-radius:16px;
            display:flex;
            align-items:center;
            justify-content:center;
            font-weight:900;
            background:linear-gradient(135deg, rgba(22,231,193,.18), rgba(176,92,255,.18));
            border:1px solid rgba(255,255,255,.08);
            color:#fff;
            flex:0 0 auto;
        }
        .timeline-item h3{
            margin:0 0 .25rem;
            font-size:1rem;
            font-weight:800;
        }
        .timeline-item p{
            margin:0;
            color:var(--muted);
            font-size:.93rem;
        }
        .guarantee-grid{
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:.85rem;
        }
        .guarantee-card{
            border-radius:20px;
            border:1px solid rgba(255,255,255,.06);
            background:rgba(255,255,255,.03);
            padding:1rem;
            min-height:118px;
        }
        .guarantee-icon{
            width:2.25rem;
            height:2.25rem;
            border-radius:14px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            background:rgba(22,231,193,.11);
            color:#bfffee;
            border:1px solid rgba(22,231,193,.16);
            margin-bottom:.7rem;
            font-weight:900;
        }
        .guarantee-card h3{
            margin:0 0 .3rem;
            font-size:.99rem;
            font-weight:800;
        }
        .guarantee-card p{
            margin:0;
            color:var(--muted);
            font-size:.92rem;
        }
        .faq-board{
            padding:1.25rem;
        }
        .accordion{
            --bs-accordion-bg: transparent;
            --bs-accordion-border-color: rgba(255,255,255,.08);
            --bs-accordion-border-width: 0;
            --bs-accordion-btn-padding-x: 1rem;
            --bs-accordion-btn-padding-y: 1rem;
            --bs-accordion-btn-bg: rgba(255,255,255,.03);
            --bs-accordion-btn-color: #edf2fb;
            --bs-accordion-btn-focus-box-shadow: none;
            --bs-accordion-active-color: #fff;
            --bs-accordion-active-bg: rgba(22,231,193,.08);
            --bs-accordion-body-padding-x: 1rem;
            --bs-accordion-body-padding-y: 0 1rem 1rem;
        }
        .accordion-item{
            border:1px solid rgba(255,255,255,.07);
            background:rgba(255,255,255,.03);
            border-radius:18px;
            overflow:hidden;
            margin-bottom:.85rem;
        }
        .accordion-button{
            background:transparent !important;
            color:var(--text) !important;
            box-shadow:none !important;
            font-weight:750;
        }
        .accordion-button::after{
            filter:invert(1) brightness(1.4);
        }
        .accordion-body{
            color:#cad6e5;
            padding-top:0;
        }
        .form-board{
            padding:1.25rem;
        }
        .form-panel{
            display:grid;
            grid-template-columns:.95fr 1.05fr;
            gap:1rem;
        }
        .form-rail{
            border-radius:24px;
            padding:1.2rem;
            background:
                linear-gradient(160deg, rgba(22,231,193,.08), rgba(176,92,255,.08)),
                rgba(255,255,255,.03);
            border:1px solid rgba(255,255,255,.07);
        }
        .form-rail h3,
        .form-card h3{
            margin:0 0 .45rem;
            font-size:1.08rem;
            font-weight:850;
        }
        .form-rail p,
        .form-card p{
            margin:0;
            color:var(--muted);
            font-size:.94rem;
        }
        .form-metrics{
            display:grid;
            gap:.8rem;
            margin-top:1rem;
        }
        .form-metric{
            display:flex;
            align-items:flex-start;
            gap:.75rem;
            padding:.9rem;
            border-radius:18px;
            background:rgba(255,255,255,.03);
            border:1px solid rgba(255,255,255,.06);
        }
        .form-metric .icon{
            width:2rem;
            height:2rem;
            flex:0 0 auto;
            border-radius:12px;
            display:flex;
            align-items:center;
            justify-content:center;
            background:rgba(22,231,193,.12);
            color:#bfffee;
            font-weight:900;
        }
        .form-metric strong{
            display:block;
            margin-bottom:.15rem;
            font-size:.96rem;
        }
        .form-metric span{
            color:var(--muted);
            font-size:.88rem;
        }
        .form-card{
            padding:1.2rem;
            border-radius:24px;
            background:rgba(255,255,255,.03);
            border:1px solid rgba(255,255,255,.06);
        }
        .form-label{
            color:#e8effb;
            font-weight:650;
            margin-bottom:.45rem;
        }
        .form-control,
        .form-select{
            background:rgba(9,13,18,.65);
            border:1px solid rgba(255,255,255,.08);
            color:var(--text);
            border-radius:16px;
            padding:.85rem 1rem;
            box-shadow:none !important;
        }
        .form-control::placeholder{
            color:#7f8aa0;
        }
        .form-control:focus,
        .form-select:focus{
            border-color:rgba(22,231,193,.32);
            background:rgba(9,13,18,.78);
            color:#fff;
        }
        .form-text-muted{
            color:var(--muted);
            font-size:.85rem;
        }
        .form-status{
            min-height:1.5rem;
            color:#c9fff2;
            font-size:.92rem;
            margin-top:.4rem;
        }
        .site-footer{
            padding:26px 0 34px;
            border-top:1px solid rgba(255,255,255,.08);
            background:linear-gradient(180deg, rgba(9,13,18,.25), rgba(9,13,18,.62));
        }
        .footer-shell{
            border-radius:26px;
            border:1px solid rgba(255,255,255,.06);
            background:rgba(255,255,255,.03);
            padding:1.2rem;
        }
        .footer-brand{
            display:flex;
            align-items:center;
            gap:.8rem;
        }
        .footer-brand strong{
            font-size:1rem;
        }
        .footer-brand p{
            margin:.2rem 0 0;
            color:var(--muted);
            font-size:.88rem;
        }
        .footer-links{
            display:flex;
            flex-wrap:wrap;
            gap:.8rem;
            justify-content:flex-end;
        }
        .footer-links a{
            color:#d7e0ef;
            padding:.25rem 0;
            border-bottom:1px solid transparent;
            transition:all .2s ease;
        }
        .footer-links a:hover{
            color:#fff;
            border-bottom-color:rgba(22,231,193,.48);
        }
        .footer-note{
            margin-top:1rem;
            padding-top:1rem;
            border-top:1px solid rgba(255,255,255,.08);
            color:var(--muted);
            font-size:.86rem;
            display:flex;
            flex-wrap:wrap;
            gap:.85rem 1.2rem;
            justify-content:space-between;
        }
        .footer-note span{
            display:inline-flex;
            align-items:center;
            gap:.35rem;
        }
        .scroll-top{
            position:fixed;
            right:1rem;
            bottom:1rem;
            width:3rem;
            height:3rem;
            border-radius:50%;
            border:1px solid rgba(255,255,255,.09);
            background:rgba(9,13,18,.86);
            color:#fff;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            box-shadow:var(--shadow-soft);
            opacity:0;
            visibility:hidden;
            transform:translateY(10px);
            transition:all .22s ease;
            z-index:1020;
        }
        .scroll-top.show{
            opacity:1;
            visibility:visible;
            transform:translateY(0);
        }
        .scroll-top:hover{
            background:rgba(22,231,193,.12);
            border-color:rgba(22,231,193,.22);
            color:#fff;
        }
        .text-muted-custom{color:var(--muted)!important}
        .badge-line{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            padding:.36rem .7rem;
            border-radius:999px;
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.06);
            color:#dfe8f7;
            font-size:.8rem;
        }
        .badge-line .tiny-dot{
            width:.38rem;
            height:.38rem;
            border-radius:50%;
            background:var(--accent-3);
            box-shadow:0 0 0 6px rgba(255,158,77,.1);
        }
        .mobile-only{display:none}
        @media (max-width: 1199.98px){
            .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
            .matrix-grid .matrix-item:nth-child(1),
            .matrix-grid .matrix-item:nth-child(2),
            .matrix-grid .matrix-item:nth-child(3),
            .matrix-grid .matrix-item:nth-child(4),
            .matrix-grid .matrix-item:nth-child(5){grid-column:span 6;}
            .compare-grid,
            .news-layout,
            .progress-layout,
            .form-panel{grid-template-columns:1fr}
            .search-inline{min-width:260px}
        }
        @media (max-width: 991.98px){
            .nav-links,.nav-tools .search-inline{display:none}
            .mobile-only{display:inline-flex}
            .hero{padding-top:7rem}
            .hero-shell{border-radius:24px}
            .hero-title{font-size:clamp(2.2rem, 8vw, 3.4rem)}
            .mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
            .metric-grid,
            .guarantee-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
        }
        @media (max-width: 767.98px){
            .section{padding:66px 0}
            .site-header{padding:10px 0}
            .nav-shell{padding:.6rem .8rem;border-radius:18px}
            .hero{padding-top:6.4rem}
            .hero-shell{padding:1rem}
            .hero-actions{flex-direction:column;align-items:stretch}
            .hero-actions .btn{width:100%}
            .mini-grid,
            .metric-grid,
            .guarantee-grid{grid-template-columns:1fr}
            .matrix-grid{gap:.85rem}
            .matrix-grid .matrix-item:nth-child(1),
            .matrix-grid .matrix-item:nth-child(2),
            .matrix-grid .matrix-item:nth-child(3),
            .matrix-grid .matrix-item:nth-child(4),
            .matrix-grid .matrix-item:nth-child(5){grid-column:span 12}
            .footer-links{justify-content:flex-start}
            .footer-note{flex-direction:column;align-items:flex-start}
            .panel-head{flex-direction:column}
            .join-count{text-align:left}
        }
        @media (max-width: 575.98px){
            .section{padding:56px 0}
            .hero-title{font-size:2.05rem}
            .hero-subtitle{font-size:.98rem}
            .brand-text strong{font-size:.92rem}
            .brand-text span{font-size:.72rem}
            .floating-chip{position:static;display:inline-flex;margin-bottom:.9rem}
            .search-inline{min-width:0}
            .site-footer{padding-bottom:24px}
        }
        :focus-visible{
            outline:3px solid rgba(22,231,193,.35);
            outline-offset:2px;
        }

/* roulang page: category1 */
:root{
  --bg:#0b0f14;
  --bg-2:#10171f;
  --panel:#121b25;
  --panel-2:#182432;
  --line:rgba(157, 182, 198, .18);
  --line-strong:rgba(157, 182, 198, .28);
  --text:#eef5fb;
  --muted:#9fb0bf;
  --muted-2:#748596;
  --brand:#42e8d0;
  --brand-2:#28c7ff;
  --accent:#c45bff;
  --warning:#ffb257;
  --success:#7cf29c;
  --danger:#ff6d7a;
  --shadow:0 20px 50px rgba(0,0,0,.35);
  --shadow-soft:0 10px 24px rgba(0,0,0,.22);
  --radius:20px;
  --radius-sm:14px;
  --radius-xs:10px;
  --container:1320px;
  --gap:1.25rem;
  --transition:.22s ease;
}

*,
*::before,
*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 15% 15%, rgba(66,232,208,.10), transparent 24%),
    radial-gradient(circle at 85% 10%, rgba(196,91,255,.10), transparent 20%),
    radial-gradient(circle at 80% 80%, rgba(40,199,255,.08), transparent 22%),
    linear-gradient(180deg, #0b0f14 0%, #0d131a 35%, #0b0f14 100%);
  line-height:1.7;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.22) 55%, rgba(0,0,0,0));
  opacity:.32;
  z-index:0;
}

a{color:inherit;text-decoration:none;transition:color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition)}
a:hover{color:var(--brand)}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
::selection{background:rgba(66,232,208,.26);color:#fff}

.container-xxl{
  position:relative;
  z-index:1;
  max-width:var(--container);
}

.site-header{
  position:sticky;
  top:0;
  z-index:1030;
  background:rgba(11,15,20,.76);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background var(--transition), box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.site-header.is-scrolled{
  background:rgba(9,13,18,.92);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  border-bottom-color:rgba(255,255,255,.09);
}

.nav-shell{
  padding:.9rem 0;
  transition:padding var(--transition);
}
.site-header.is-scrolled .nav-shell{padding:.55rem 0}

.navbar{
  padding:0;
  gap:1rem;
}
.navbar-brand{
  display:flex;
  align-items:center;
  gap:.9rem;
  min-width:0;
}
.brand-mark{
  width:2.7rem;
  height:2.7rem;
  border-radius:16px;
  position:relative;
  flex:0 0 auto;
  background:
    linear-gradient(145deg, rgba(66,232,208,.95), rgba(40,199,255,.72) 45%, rgba(196,91,255,.88));
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 12px 30px rgba(66,232,208,.18);
}
.brand-mark::after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.45);
  transform:skewX(-8deg);
  opacity:.9;
}
.brand-text{
  display:flex;
  flex-direction:column;
  gap:.05rem;
  min-width:0;
}
.brand-text strong{
  font-size:1.02rem;
  letter-spacing:.02em;
  line-height:1.2;
}
.brand-text span{
  font-size:.78rem;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.navbar-collapse{
  align-items:center;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.35rem;
  border:1px solid rgba(255,255,255,.06);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.nav-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.55rem;
  padding:.55rem 1rem;
  border-radius:999px;
  color:var(--muted);
  font-weight:600;
  font-size:.94rem;
  border:1px solid transparent;
}
.nav-links a:hover{
  color:#fff;
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.07);
  transform:translateY(-1px);
}
.nav-links a.active,
.nav-links a[aria-current="page"]{
  color:#081118;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color:transparent;
  box-shadow:0 10px 20px rgba(40,199,255,.16);
}
.nav-tools{
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-left:auto;
}
.search-inline{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.35rem;
  border-radius:999px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
}
.search-inline input{
  width:15.5rem;
  border:none;
  outline:none;
  background:transparent;
  color:var(--text);
  padding:.55rem .8rem;
  border-radius:999px;
}
.search-inline input::placeholder{color:#7f90a1}
.search-inline input:focus{box-shadow:none}
.search-inline button{
  border:none;
  border-radius:999px;
  padding:.58rem 1rem;
  background:linear-gradient(135deg, rgba(66,232,208,.96), rgba(40,199,255,.98));
  color:#071017;
  font-weight:700;
  box-shadow:0 10px 24px rgba(40,199,255,.16);
}
.search-inline button:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(40,199,255,.22);
}
.btn{
  border-radius:999px;
  font-weight:700;
  padding:.62rem 1.1rem;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}
.btn:focus,
button:focus,
input:focus,
select:focus,
textarea:focus{
  outline:none !important;
  box-shadow:0 0 0 .2rem rgba(66,232,208,.18) !important;
}
.btn-soft{
  color:#eff6fb;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.btn-soft:hover{
  color:#fff;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.16);
  transform:translateY(-1px);
}
.btn-cta{
  color:#071017;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  border:1px solid transparent;
  box-shadow:0 12px 30px rgba(40,199,255,.18);
}
.btn-cta:hover{
  color:#061018;
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(40,199,255,.24);
}
.btn-outline-soft{
  color:var(--text);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
}
.btn-outline-soft:hover{
  color:#fff;
  border-color:rgba(66,232,208,.45);
  background:rgba(66,232,208,.08);
  transform:translateY(-1px);
}

.navbar-toggler{
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  width:3rem;
  height:3rem;
  background:rgba(255,255,255,.03);
}
.navbar-toggler-icon{
  filter:invert(1) brightness(1.2);
}

.page-banner{
  position:relative;
  margin:1rem 0 1.2rem;
  padding:1.35rem 0;
}
.banner-shell{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:calc(var(--radius) + 2px);
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    radial-gradient(circle at 18% 25%, rgba(66,232,208,.12), transparent 26%),
    radial-gradient(circle at 88% 24%, rgba(196,91,255,.10), transparent 22%),
    rgba(16,23,31,.85);
  box-shadow:var(--shadow-soft);
}
.banner-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg, transparent 0 44%, rgba(255,255,255,.05) 44% 46%, transparent 46% 100%);
  opacity:.55;
  pointer-events:none;
}
.banner-inner{
  position:relative;
  display:flex;
  justify-content:space-between;
  gap:1.2rem;
  padding:1.1rem 1.2rem;
  align-items:flex-end;
}
.breadcrumb-line{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  align-items:center;
  color:var(--muted);
  font-size:.85rem;
  margin-bottom:.55rem;
}
.breadcrumb-line a{
  color:var(--muted);
}
.breadcrumb-line a:hover{color:#fff}
.dot{
  width:.32rem;
  height:.32rem;
  border-radius:50%;
  background:rgba(255,255,255,.32);
}
.page-banner h1{
  margin:0;
  font-size:clamp(1.65rem, 2.6vw, 2.7rem);
  line-height:1.15;
  letter-spacing:.01em;
  text-shadow:0 8px 24px rgba(0,0,0,.18);
}
.page-banner p{
  margin:.7rem 0 0;
  color:var(--muted);
  max-width:62rem;
  font-size:1rem;
}
.banner-stats{
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.stat-chip{
  min-width:7.2rem;
  padding:.8rem .9rem;
  border-radius:16px;
  background:rgba(11,15,20,.45);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.stat-chip strong{
  display:block;
  font-size:1.05rem;
  color:#fff;
  line-height:1.2;
}
.stat-chip span{
  display:block;
  color:var(--muted);
  font-size:.8rem;
  margin-top:.18rem;
}

.section-block{
  position:relative;
  margin:0 0 1.35rem;
}
.section-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.9rem;
}
.section-title h2{
  margin:0;
  font-size:1.28rem;
  letter-spacing:.01em;
}
.section-title p{
  margin:0;
  color:var(--muted);
  font-size:.92rem;
}

.hud-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:var(--gap);
}
.hud-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)),
    rgba(18,27,37,.92);
  box-shadow:var(--shadow-soft);
  padding:1.05rem 1.1rem;
  min-height:8.3rem;
}
.hud-card::after{
  content:"";
  position:absolute;
  inset:auto -18% -28% auto;
  width:8rem;
  height:8rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(66,232,208,.16), transparent 62%);
  pointer-events:none;
}
.hud-card .mini-label{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:var(--muted);
  font-size:.82rem;
}
.mini-pulse{
  width:.55rem;
  height:.55rem;
  border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 0 .25rem rgba(66,232,208,.13);
}
.hud-card .value{
  font-size:2rem;
  line-height:1;
  font-weight:800;
  margin:.75rem 0 .35rem;
  letter-spacing:-.02em;
}
.hud-card .desc{
  color:var(--muted);
  font-size:.92rem;
}
.hud-card .trend{
  margin-top:.8rem;
  display:flex;
  align-items:center;
  gap:.45rem;
  color:var(--success);
  font-size:.84rem;
  font-weight:700;
}

.span-3{grid-column:span 3}
.span-4{grid-column:span 4}
.span-5{grid-column:span 5}
.span-6{grid-column:span 6}
.span-7{grid-column:span 7}
.span-8{grid-column:span 8}
.span-9{grid-column:span 9}
.span-12{grid-column:span 12}

.matrix-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:var(--gap);
}
.matrix-card{
  grid-column:span 4;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(18,27,37,.9);
  padding:1.15rem;
  box-shadow:var(--shadow-soft);
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  min-height:13rem;
  position:relative;
  overflow:hidden;
}
.matrix-card:nth-child(2n){
  transform:translateY(10px);
}
.matrix-card:nth-child(4n){
  grid-column:span 8;
}
.matrix-card:hover{
  transform:translateY(-3px);
  border-color:rgba(66,232,208,.22);
  box-shadow:0 18px 36px rgba(0,0,0,.30);
}
.matrix-card h3{
  margin:.7rem 0 .55rem;
  font-size:1.1rem;
}
.matrix-card p{
  margin:0;
  color:var(--muted);
  font-size:.94rem;
}
.matrix-card .label-row{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-bottom:.75rem;
}
.badge-soft{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  border-radius:999px;
  padding:.32rem .65rem;
  font-size:.76rem;
  font-weight:700;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#dce7ee;
}
.badge-brand{
  background:rgba(66,232,208,.12);
  border-color:rgba(66,232,208,.22);
  color:#ccfff7;
}
.badge-purple{
  background:rgba(196,91,255,.14);
  border-color:rgba(196,91,255,.24);
  color:#f3d9ff;
}
.badge-warm{
  background:rgba(255,178,87,.15);
  border-color:rgba(255,178,87,.25);
  color:#ffe1bd;
}

.overview-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:var(--gap);
}
.list-wrap{
  grid-column:span 8;
}
.side-wrap{
  grid-column:span 4;
}
.toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  margin:0 0 .95rem;
  padding:.8rem .9rem;
  border-radius:var(--radius);
  background:rgba(18,27,37,.88);
  border:1px solid rgba(255,255,255,.08);
}
.toolbar .sort-group{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
}
.sort-btn{
  border:none;
  border-radius:999px;
  padding:.55rem .9rem;
  color:var(--muted);
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
  font-weight:700;
}
.sort-btn.active,
.sort-btn:hover{
  color:#071017;
  background:linear-gradient(135deg, rgba(66,232,208,.96), rgba(40,199,255,.96));
  border-color:transparent;
}
.toolbar .meta{
  color:var(--muted);
  font-size:.9rem;
}

.entry-list{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:var(--gap);
}
.entry-card{
  grid-column:span 6;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    rgba(18,27,37,.95);
  box-shadow:var(--shadow-soft);
  padding:1.05rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:.95rem;
  transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  min-height:12.5rem;
}
.entry-card:hover{
  transform:translateY(-3px);
  border-color:rgba(66,232,208,.24);
  box-shadow:0 20px 38px rgba(0,0,0,.32);
}
.entry-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.85rem;
}
.entry-head h3{
  margin:0;
  font-size:1.08rem;
}
.entry-head .rank{
  font-size:.78rem;
  font-weight:800;
  color:#071017;
  background:linear-gradient(135deg, var(--warning), #ffd18b);
  border-radius:999px;
  padding:.28rem .55rem;
  flex:0 0 auto;
}
.entry-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-top:.55rem;
}
.entry-summary{
  color:var(--muted);
  font-size:.94rem;
  margin:0;
}
.entry-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-top:auto;
}
.entry-mini{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  align-items:center;
}
.kpi-mini{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  color:#d9e7f0;
  font-size:.82rem;
}
.kpi-mini i{
  width:.5rem;
  height:.5rem;
  border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 0 .2rem rgba(66,232,208,.12);
}
.entry-link{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  color:#081017;
  background:linear-gradient(135deg, rgba(66,232,208,.96), rgba(40,199,255,.96));
  border-radius:999px;
  padding:.55rem .92rem;
  font-weight:800;
}
.entry-link:hover{
  transform:translateY(-1px);
  color:#061017;
}
.entry-link .arrow{
  font-size:1.05rem;
  line-height:1;
}

.side-panel{
  position:sticky;
  top:7.8rem;
  display:grid;
  gap:var(--gap);
}
.panel-card{
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(18,27,37,.92);
  box-shadow:var(--shadow-soft);
  padding:1.05rem;
}
.panel-card h3{
  margin:0 0 .8rem;
  font-size:1.08rem;
}
.panel-list{
  display:grid;
  gap:.7rem;
}
.panel-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:.78rem .82rem;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.panel-item strong{
  display:block;
  font-size:.92rem;
}
.panel-item span{
  display:block;
  color:var(--muted);
  font-size:.82rem;
}
.panel-item em{
  font-style:normal;
  color:#fff;
  font-weight:800;
}
.progress-line{
  margin-top:.75rem;
  display:grid;
  gap:.7rem;
}
.progress-row{
  display:grid;
  gap:.35rem;
}
.progress-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  font-size:.88rem;
}
.progress{
  height:.55rem;
  background:#0f1720;
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
}
.progress-bar{
  border-radius:999px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
}
.panel-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
}
.panel-note{
  color:var(--muted);
  font-size:.92rem;
  margin:0;
}

.compare-wrap{
  border-radius:calc(var(--radius) + 2px);
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 100% 0%, rgba(196,91,255,.08), transparent 22%),
    rgba(18,27,37,.92);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.compare-head{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1rem;
  padding:1.05rem 1.1rem .4rem;
}
.compare-head h2{margin:0;font-size:1.28rem}
.compare-head p{margin:0;color:var(--muted)}
.compare-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:0;
  border-top:1px solid rgba(255,255,255,.07);
}
.compare-item{
  padding:1rem 1.1rem 1.15rem;
  border-right:1px solid rgba(255,255,255,.07);
}
.compare-item:last-child{border-right:none}
.compare-item strong{
  display:block;
  font-size:1.02rem;
  margin-bottom:.45rem;
}
.compare-item .line{
  height:.55rem;
  border-radius:999px;
  background:#0f1720;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  margin:.7rem 0 .55rem;
}
.compare-item .line span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--brand), var(--accent));
}
.compare-item p{
  margin:0;
  color:var(--muted);
  font-size:.88rem;
}

.cta-strip{
  position:relative;
  overflow:hidden;
  border-radius:calc(var(--radius) + 2px);
  background:
    linear-gradient(135deg, rgba(66,232,208,.12), rgba(196,91,255,.10)),
    rgba(18,27,37,.9);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-soft);
  padding:1.15rem 1.1rem;
}
.cta-strip .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.cta-strip h2{
  margin:0 0 .35rem;
  font-size:1.24rem;
}
.cta-strip p{
  margin:0;
  color:var(--muted);
  max-width:54rem;
}
.cta-actions{
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
}

.faq-shell{
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(18,27,37,.92);
  box-shadow:var(--shadow-soft);
  padding:1.05rem 1.05rem .6rem;
}
.accordion{
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: rgba(255,255,255,.08);
  --bs-accordion-btn-bg: rgba(255,255,255,.03);
  --bs-accordion-active-bg: rgba(255,255,255,.04);
  --bs-accordion-color: var(--text);
  --bs-accordion-btn-color: var(--text);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-color: var(--text);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2342e8d0'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
}
.accordion-item{
  background:transparent;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px !important;
  overflow:hidden;
  margin-bottom:.8rem;
}
.accordion-button{
  box-shadow:none !important;
  font-weight:700;
  padding:1rem 1rem;
}
.accordion-button::after{filter:brightness(1.2)}
.accordion-body{
  color:var(--muted);
  padding:0 1rem 1rem;
}
.accordion-button:not(.collapsed){
  color:#fff;
  background:rgba(255,255,255,.035);
}

.feedback-shell{
  border-radius:calc(var(--radius) + 2px);
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 0% 0%, rgba(40,199,255,.10), transparent 24%),
    rgba(18,27,37,.92);
  box-shadow:var(--shadow-soft);
  padding:1.1rem;
}
.feedback-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:1rem;
  align-items:stretch;
}
.feedback-copy{
  padding:.35rem .2rem .35rem 0;
}
.feedback-copy h2{
  margin:0 0 .5rem;
  font-size:1.28rem;
}
.feedback-copy p{
  color:var(--muted);
  margin:0 0 .8rem;
}
.feedback-points{
  display:grid;
  gap:.65rem;
  margin-top:1rem;
}
.feedback-point{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  padding:.8rem .9rem;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.feedback-point .mark{
  width:1.2rem;
  height:1.2rem;
  margin-top:.12rem;
  border-radius:50%;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow:0 0 0 .25rem rgba(66,232,208,.1);
  flex:0 0 auto;
}
.feedback-point strong{display:block;font-size:.94rem}
.feedback-point span{display:block;color:var(--muted);font-size:.85rem}

.form-box{
  background:rgba(11,15,20,.44);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:1rem;
}
.form-label{
  font-weight:700;
  color:#e8f1f7;
  margin-bottom:.4rem;
}
.form-control,
.form-select{
  background:#0f1720;
  border:1px solid rgba(255,255,255,.08);
  color:var(--text);
  border-radius:14px;
  padding:.75rem .9rem;
}
.form-control::placeholder{color:#748596}
.form-control:focus,
.form-select:focus{
  background:#101922;
  color:var(--text);
  border-color:rgba(66,232,208,.38);
}
.form-text{
  color:var(--muted-2);
}
.form-message{
  margin-top:.8rem;
  font-size:.92rem;
  color:var(--success);
  min-height:1.4rem;
}

.site-footer{
  position:relative;
  z-index:1;
  margin-top:1.1rem;
  padding:1.25rem 0 1.4rem;
}
.footer-shell{
  border-radius:calc(var(--radius) + 2px);
  background:rgba(10,14,19,.88);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-soft);
  padding:1.05rem 1.1rem;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:.85rem;
}
.footer-brand strong{
  display:block;
  font-size:1rem;
}
.footer-brand p{
  margin:.18rem 0 0;
  color:var(--muted);
  font-size:.88rem;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:.45rem;
}
.footer-links a{
  color:var(--muted);
  padding:.45rem .75rem;
  border-radius:999px;
  border:1px solid transparent;
}
.footer-links a:hover{
  color:#fff;
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.08);
}
.footer-note{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1rem;
  justify-content:space-between;
  margin-top:.95rem;
  padding-top:.9rem;
  border-top:1px solid rgba(255,255,255,.07);
  color:var(--muted);
  font-size:.84rem;
}
.footer-note a{color:#dff9f5}
.footer-note a:hover{color:var(--brand)}

.mobile-only{display:none}

.offcanvas{
  background:linear-gradient(180deg, #111922 0%, #0b0f14 100%);
  color:var(--text);
  border-left:1px solid rgba(255,255,255,.08);
}
.offcanvas-header{
  border-bottom:1px solid rgba(255,255,255,.08);
}
.offcanvas-title{
  font-weight:800;
}
.mobile-menu-links{
  display:grid;
  gap:.55rem;
}
.mobile-menu-links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.85rem .95rem;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}
.mobile-menu-links a.active{
  color:#081017;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color:transparent;
}

@media (max-width: 1199.98px){
  .list-wrap,.side-wrap{grid-column:span 12}
  .side-panel{position:static}
  .matrix-card,.matrix-card:nth-child(4n){grid-column:span 6}
  .hud-card.span-3,.hud-card.span-4,.hud-card.span-5,.hud-card.span-6,.hud-card.span-7,.hud-card.span-8,.hud-card.span-9{grid-column:span 6}
  .page-banner p{max-width:none}
}

@media (max-width: 991.98px){
  .navbar-collapse{display:none !important}
  .mobile-only{display:inline-flex}
  .banner-inner{flex-direction:column;align-items:flex-start}
  .banner-stats{justify-content:flex-start}
  .feedback-grid{grid-template-columns:1fr}
  .compare-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .compare-item:nth-child(2n){border-right:none}
  .compare-item:nth-child(n+3){border-top:1px solid rgba(255,255,255,.07)}
}

@media (max-width: 767.98px){
  .page-banner{margin-top:.8rem}
  .page-banner h1{font-size:1.55rem}
  .page-banner p{font-size:.95rem}
  .hud-grid,.matrix-grid,.overview-grid,.entry-list{grid-template-columns:repeat(1, minmax(0, 1fr))}
  .hud-card,.matrix-card,.entry-card,.span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-9,.span-12{grid-column:span 1}
  .matrix-card:nth-child(2n){transform:none}
  .toolbar{align-items:flex-start}
  .search-inline input{width:10rem}
  .compare-grid{grid-template-columns:1fr}
  .compare-item{border-right:none;border-top:1px solid rgba(255,255,255,.07)}
  .compare-item:first-child{border-top:none}
  .footer-note{flex-direction:column;gap:.35rem}
}

@media (max-width: 575.98px){
  .nav-shell{padding:.68rem 0}
  .brand-text strong{font-size:.98rem}
  .brand-text span{font-size:.72rem}
  .banner-inner,.feedback-shell,.faq-shell,.footer-shell,.compare-head,.cta-strip,.toolbar,.hud-card,.matrix-card,.entry-card,.panel-card,.form-box{
    padding-left:.85rem;
    padding-right:.85rem;
  }
  .page-banner h1{font-size:1.35rem}
  .page-banner p{font-size:.92rem}
  .search-inline{
    width:100%;
    justify-content:space-between;
  }
  .search-inline input{width:100%;min-width:0}
  .search-inline button{padding:.58rem .8rem}
  .cta-actions,.banner-stats{width:100%}
  .cta-strip .wrap{align-items:flex-start}
}