/* roulang page: index */
:root{
            --bg:#f4f1e9;
            --bg-soft:#eef1eb;
            --surface:#fffdf8;
            --surface-2:#edf3ee;
            --surface-3:#173c30;
            --text:#16231d;
            --muted:#66746d;
            --muted-2:#7e8b84;
            --primary:#173c30;
            --primary-2:#205643;
            --accent:#c8a86a;
            --accent-2:#9ab49b;
            --line:rgba(22,35,29,.12);
            --shadow:0 18px 40px rgba(19,34,28,.10);
            --shadow-strong:0 24px 60px rgba(19,34,28,.16);
            --radius:22px;
            --radius-lg:28px;
            --radius-sm:16px;
            --container-pad:clamp(1rem, 2vw, 1.5rem);
            --section-y:clamp(4rem, 7vw, 7rem);
            --bs-primary:#173c30;
            --bs-primary-rgb:23,60,48;
            --bs-secondary:#c8a86a;
            --bs-border-color:rgba(22,35,29,.12);
            --bs-body-color:var(--text);
            --bs-body-bg:var(--bg);
            --bs-body-font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
        }
        html{scroll-behavior:smooth}
        body{
            color:var(--text);
            background:
                radial-gradient(circle at 12% 10%, rgba(200,168,106,.12) 0 14%, transparent 14% 100%),
                radial-gradient(circle at 88% 16%, rgba(23,60,48,.08) 0 10%, transparent 10% 100%),
                linear-gradient(180deg, #f9f7f2 0%, #f4f1e9 30%, #f6f4ee 100%);
            min-height:100vh;
            overflow-x:hidden;
            line-height:1.72;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background:
                linear-gradient(115deg, rgba(23,60,48,.05) 0 1px, transparent 1px 100%),
                linear-gradient(25deg, rgba(23,60,48,.03) 0 1px, transparent 1px 100%);
            background-size: 240px 240px, 240px 240px;
            mask-image: linear-gradient(180deg, rgba(0,0,0,.45), transparent 92%);
            opacity:.45;
            z-index:-1;
        }
        ::selection{background:rgba(200,168,106,.25);color:var(--text)}
        a{
            color:var(--primary);
            text-decoration:none;
            transition:color .18s ease, opacity .18s ease, transform .18s ease;
        }
        a:hover{color:var(--primary-2)}
        img{max-width:100%;display:block}
        .container-wide{
            width:min(1180px, calc(100% - 2rem));
            margin-inline:auto;
        }
        .section-pad{
            padding:var(--section-y) 0;
            scroll-margin-top:96px;
        }
        .section-head{
            display:flex;
            flex-wrap:wrap;
            gap:1rem;
            justify-content:space-between;
            align-items:end;
            margin-bottom:1.6rem;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:.5rem;
            font-size:.86rem;
            letter-spacing:.08em;
            text-transform:uppercase;
            color:var(--primary);
            background:rgba(23,60,48,.08);
            border:1px solid rgba(23,60,48,.12);
            padding:.48rem .8rem;
            border-radius:999px;
            margin-bottom:.9rem;
            white-space:nowrap;
        }
        .eyebrow::before{
            content:"";
            width:.55rem;height:.55rem;
            border-radius:50%;
            background:var(--accent);
            box-shadow:0 0 0 5px rgba(200,168,106,.18);
        }
        .section-title{
            font-size:clamp(1.5rem, 3vw, 2.5rem);
            line-height:1.15;
            letter-spacing:-.03em;
            margin:0;
            font-weight:800;
        }
        .section-subtitle{
            max-width:62ch;
            color:var(--muted);
            margin:.7rem 0 0;
            font-size:1.02rem;
        }
        .soft-card, .feature-card, .stat-card, .quote-card, .content-card, .faq-shell, .cta-shell, .hero-shell, .cover-card, .cover-mini, .note-card{
            background:rgba(255,253,248,.92);
            border:1px solid var(--line);
            border-radius:var(--radius);
            box-shadow:var(--shadow);
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:1030;
            padding-top:.8rem;
            padding-bottom:.4rem;
            transition:transform .22s ease, padding .22s ease;
        }
        .site-header.is-scrolled{
            padding-top:.45rem;
        }
        .site-nav{
            background:rgba(255,253,248,.84);
            backdrop-filter:saturate(140%) blur(14px);
            border:1px solid rgba(22,35,29,.12);
            border-radius:26px;
            box-shadow:0 12px 34px rgba(19,34,28,.10);
            padding:.7rem 1rem;
        }
        .navbar-brand{
            display:inline-flex;
            align-items:center;
            gap:.65rem;
            font-weight:800;
            font-size:1.05rem;
            letter-spacing:-.02em;
            color:var(--text) !important;
            white-space:nowrap;
        }
        .navbar-brand .brand-mark{
            width:2.15rem;height:2.15rem;
            border-radius:14px;
            background:
                linear-gradient(145deg, rgba(23,60,48,1), rgba(32,86,67,1));
            position:relative;
            box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
        }
        .navbar-brand .brand-mark::after{
            content:"";
            position:absolute;
            inset:.42rem;
            border-radius:10px;
            border:1px solid rgba(255,255,255,.36);
        }
        .navbar-brand .brand-mark::before{
            content:"";
            position:absolute;
            width:.42rem;height:.42rem;
            border-radius:50%;
            background:var(--accent);
            top:.48rem;left:.48rem;
            box-shadow:0 0 0 4px rgba(200,168,106,.15);
        }
        .nav-link{
            color:var(--muted) !important;
            font-weight:600;
            padding:.72rem 1rem !important;
            border-radius:999px;
            transition:background .18s ease, color .18s ease, transform .18s ease;
        }
        .nav-link:hover,
        .nav-link:focus-visible,
        .nav-link.active{
            color:var(--primary) !important;
            background:rgba(23,60,48,.08);
        }
        .nav-cta{
            border-radius:999px;
            padding:.78rem 1.15rem;
            background:var(--primary);
            border-color:var(--primary);
            color:#fff !important;
            box-shadow:0 12px 24px rgba(23,60,48,.18);
        }
        .nav-cta:hover{background:var(--primary-2);border-color:var(--primary-2);transform:translateY(-1px)}
        .nav-cta:active{transform:translateY(0)}
        .navbar-toggler{
            border-radius:14px;
            border:1px solid rgba(22,35,29,.12);
            background:rgba(23,60,48,.05);
            padding:.62rem .72rem;
            box-shadow:none !important;
        }
        .navbar-toggler:focus{
            box-shadow:0 0 0 .2rem rgba(23,60,48,.14);
        }
        .navbar-toggler-icon{
            filter:grayscale(1) brightness(.25);
        }
        .offcanvas{
            border-top-left-radius:24px;
            border-bottom-left-radius:24px;
            background:rgba(255,253,248,.98);
        }
        .offcanvas .nav-link{
            padding:.85rem 1rem !important;
        }
        .offcanvas .btn{
            width:100%;
        }

        .hero-shell{
            position:relative;
            overflow:hidden;
            padding:clamp(1.2rem, 2.4vw, 2rem);
            background:
                linear-gradient(145deg, rgba(255,253,248,.98), rgba(244,241,233,.96)),
                radial-gradient(circle at 92% 10%, rgba(200,168,106,.12), transparent 25%);
        }
        .hero-shell::before,
        .hero-shell::after{
            content:"";
            position:absolute;
            inset:auto;
            pointer-events:none;
        }
        .hero-shell::before{
            width:24rem;height:24rem;
            right:-8rem;top:-8rem;
            background:radial-gradient(circle, rgba(23,60,48,.08) 0, rgba(23,60,48,0) 65%);
        }
        .hero-shell::after{
            left:-9rem;bottom:-10rem;
            width:22rem;height:22rem;
            background:radial-gradient(circle, rgba(200,168,106,.11) 0, rgba(200,168,106,0) 68%);
        }
        .hero-grid{
            display:grid;
            grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
            gap:clamp(1.1rem, 3vw, 2.6rem);
            align-items:center;
        }
        .hero-copy{
            position:relative;
            z-index:1;
            padding:clamp(.4rem, 1vw, .8rem) 0;
        }
        .hero-kicker{
            display:flex;
            flex-wrap:wrap;
            gap:.55rem;
            align-items:center;
            margin-bottom:1rem;
        }
        .tag{
            display:inline-flex;
            align-items:center;
            gap:.35rem;
            padding:.46rem .75rem;
            border-radius:999px;
            font-size:.88rem;
            font-weight:600;
            color:var(--primary);
            background:rgba(23,60,48,.07);
            border:1px solid rgba(23,60,48,.10);
        }
        .tag.soft{
            color:var(--muted);
            background:rgba(255,255,255,.7);
        }
        .hero-title{
            font-size:clamp(2.1rem, 5vw, 4.55rem);
            line-height:1.02;
            font-weight:900;
            letter-spacing:-.045em;
            margin:0;
        }
        .hero-title .accent{
            color:var(--primary);
            text-wrap:balance;
        }
        .hero-text{
            margin:1.1rem 0 1.4rem;
            max-width:60ch;
            color:var(--muted);
            font-size:1.06rem;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:.85rem;
            margin-top:1.2rem;
        }
        .btn-brand,
        .btn-ghost{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:.55rem;
            border-radius:999px;
            padding:.9rem 1.25rem;
            font-weight:700;
            transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
        }
        .btn-brand{
            background:linear-gradient(145deg, var(--primary), var(--primary-2));
            color:#fff;
            border:1px solid rgba(23,60,48,.15);
            box-shadow:0 16px 28px rgba(23,60,48,.18);
        }
        .btn-brand:hover{
            color:#fff;
            transform:translateY(-1px);
            box-shadow:0 20px 34px rgba(23,60,48,.24);
        }
        .btn-brand:active{transform:translateY(1px)}
        .btn-ghost{
            background:rgba(255,255,255,.72);
            color:var(--primary);
            border:1px solid rgba(23,60,48,.14);
        }
        .btn-ghost:hover{
            color:var(--primary);
            background:#fff;
            transform:translateY(-1px);
        }
        .hero-points{
            display:flex;
            flex-wrap:wrap;
            gap:.7rem;
            margin-top:1.35rem;
        }
        .hero-point{
            padding:.68rem .82rem;
            border-radius:14px;
            background:rgba(23,60,48,.06);
            border:1px solid rgba(23,60,48,.10);
            color:var(--text);
            font-weight:600;
            font-size:.94rem;
        }
        .hero-point small{
            display:block;
            color:var(--muted);
            font-weight:500;
            margin-top:.15rem;
        }
        .hero-metrics{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:.8rem;
            margin-top:1.25rem;
        }
        .metric{
            padding:.92rem 1rem;
            border-radius:18px;
            background:rgba(255,255,255,.86);
            border:1px solid rgba(22,35,29,.10);
        }
        .metric strong{
            display:block;
            font-size:1.1rem;
            line-height:1.1;
            margin-bottom:.24rem;
            font-weight:800;
        }
        .metric span{
            color:var(--muted);
            font-size:.92rem;
        }
        .hero-visual{
            position:relative;
            display:grid;
            place-items:center;
            min-height:clamp(420px, 60vw, 680px);
        }
        .cover-stage{
            position:relative;
            width:min(100%, 420px);
            aspect-ratio:5 / 7;
            transform:perspective(1100px) rotateY(-10deg) rotateZ(1.2deg);
            transform-style:preserve-3d;
        }
        .cover-card{
            position:absolute;
            inset:0;
            overflow:hidden;
            background:
                linear-gradient(160deg, rgba(18,39,33,.98), rgba(23,60,48,.95) 54%, rgba(30,71,56,.94)),
                linear-gradient(180deg, rgba(200,168,106,.14), rgba(200,168,106,0));
            color:#f8f6ef;
            padding:1.1rem;
            box-shadow:var(--shadow-strong);
        }
        .cover-card::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at 18% 18%, rgba(200,168,106,.25), transparent 16%),
                radial-gradient(circle at 82% 20%, rgba(255,255,255,.08), transparent 20%),
                radial-gradient(circle at 50% 84%, rgba(255,255,255,.08), transparent 24%);
            opacity:.9;
        }
        .cover-card::after{
            content:"";
            position:absolute;
            inset:1rem;
            border-radius:20px;
            border:1px solid rgba(255,255,255,.12);
            pointer-events:none;
        }
        .cover-inner{
            position:relative;
            z-index:1;
            display:flex;
            flex-direction:column;
            gap:.9rem;
            height:100%;
        }
        .cover-topline{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:1rem;
        }
        .cover-pill{
            display:inline-flex;
            align-items:center;
            gap:.4rem;
            padding:.42rem .68rem;
            border-radius:999px;
            background:rgba(255,255,255,.1);
            border:1px solid rgba(255,255,255,.12);
            color:#fff;
            font-size:.84rem;
            font-weight:700;
        }
        .cover-grid{
            display:grid;
            grid-template-columns:1.2fr .8fr;
            gap:.8rem;
            flex:1;
        }
        .poster-slot{
            border-radius:20px;
            background:
                linear-gradient(165deg, rgba(255,255,255,.15), rgba(255,255,255,.05)),
                linear-gradient(180deg, rgba(200,168,106,.14), rgba(200,168,106,0));
            border:1px solid rgba(255,255,255,.11);
            display:flex;
            align-items:flex-end;
            justify-content:flex-start;
            padding:1rem;
            position:relative;
            overflow:hidden;
        }
        .poster-slot.big{
            grid-row:span 2;
            align-items:flex-start;
            min-height:100%;
        }
        .poster-slot::before{
            content:"";
            position:absolute;
            inset:-20% -12%;
            background:
                linear-gradient(145deg, transparent 46%, rgba(255,255,255,.15) 47%, transparent 48%),
                linear-gradient(25deg, transparent 45%, rgba(255,255,255,.09) 46%, transparent 47%);
            opacity:.75;
        }
        .poster-label{
            position:relative;
            z-index:1;
            display:flex;
            flex-direction:column;
            gap:.18rem;
        }
        .poster-label b{
            font-size:2.35rem;
            line-height:1;
            letter-spacing:-.05em;
        }
        .poster-label span{
            color:rgba(248,246,239,.82);
            font-size:.92rem;
        }
        .poster-chip{
            position:relative;
            z-index:1;
            display:inline-flex;
            align-self:flex-start;
            padding:.38rem .6rem;
            border-radius:999px;
            background:rgba(255,255,255,.14);
            border:1px solid rgba(255,255,255,.12);
            color:#fff;
            font-size:.8rem;
            font-weight:700;
        }
        .cover-footer{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:.8rem;
            padding-top:.2rem;
        }
        .cover-footer .mini-list{
            display:flex;
            flex-wrap:wrap;
            gap:.45rem;
        }
        .mini-badge{
            display:inline-flex;
            align-items:center;
            gap:.35rem;
            padding:.38rem .58rem;
            border-radius:999px;
            background:rgba(255,255,255,.1);
            border:1px solid rgba(255,255,255,.12);
            font-size:.78rem;
        }
        .cover-mini{
            position:absolute;
            right:-1.1rem;
            bottom:1.3rem;
            width:43%;
            max-width:190px;
            min-width:130px;
            padding:.95rem;
            background:rgba(255,253,248,.96);
            color:var(--text);
            transform:rotate(-8deg);
        }
        .cover-mini.a{
            right:-1.5rem;
            top:2.2rem;
            transform:rotate(11deg);
        }
        .cover-mini .kicker{
            font-size:.78rem;
            color:var(--primary);
            font-weight:700;
            margin-bottom:.45rem;
        }
        .cover-mini .line{
            height:.75rem;
            border-radius:999px;
            background:linear-gradient(90deg, rgba(23,60,48,.18), rgba(23,60,48,.04));
            margin-bottom:.45rem;
        }
        .cover-mini .line:last-child{
            margin-bottom:0;
            width:72%;
        }
        .cover-mini .title{
            font-weight:800;
            letter-spacing:-.02em;
            margin-bottom:.45rem;
        }
        .cover-mini .meta{
            display:flex;
            flex-wrap:wrap;
            gap:.35rem;
        }

        .pain-wrap{
            display:grid;
            gap:1rem;
            grid-template-columns:repeat(4,minmax(0,1fr));
        }
        .pain-card{
            position:relative;
            padding:1.15rem;
            min-height:180px;
            overflow:hidden;
            background:
                linear-gradient(180deg, rgba(255,253,248,.98), rgba(245,241,234,.96));
        }
        .pain-card::after{
            content:"";
            position:absolute;
            right:-1px;
            top:1rem;
            bottom:1rem;
            width:1px;
            background:linear-gradient(180deg, transparent, rgba(23,60,48,.22), transparent);
        }
        .pain-card:last-child::after{display:none}
        .pain-no{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            width:2rem;height:2rem;
            border-radius:999px;
            background:rgba(23,60,48,.09);
            color:var(--primary);
            font-weight:800;
            margin-bottom:.9rem;
        }
        .pain-card h3{
            font-size:1.06rem;
            margin:0 0 .45rem;
            font-weight:800;
        }
        .pain-card p{
            margin:0;
            color:var(--muted);
            font-size:.96rem;
        }

        .solution-grid{
            display:grid;
            grid-template-columns:1.2fr .95fr .95fr;
            gap:1rem;
            align-items:stretch;
        }
        .feature-card{
            padding:1.2rem;
            position:relative;
            overflow:hidden;
        }
        .feature-card.feature-lead{
            background:linear-gradient(180deg, rgba(23,60,48,.98), rgba(27,72,57,.96));
            color:#fff;
        }
        .feature-card.feature-lead .badge-soft,
        .feature-card.feature-lead p,
        .feature-card.feature-lead li,
        .feature-card.feature-lead .muted{
            color:rgba(255,255,255,.82) !important;
        }
        .feature-card.feature-lead .feature-title{
            color:#fff;
        }
        .feature-card.feature-lead .mini-rule{
            background:rgba(255,255,255,.15);
        }
        .feature-title{
            font-size:1.18rem;
            font-weight:800;
            margin:0 0 .5rem;
            letter-spacing:-.03em;
        }
        .feature-desc{
            color:var(--muted);
            margin:0 0 .95rem;
        }
        .mini-rule{
            height:1px;
            background:rgba(23,60,48,.12);
            margin:1rem 0;
        }
        .bullet-list{
            margin:0;
            padding:0;
            list-style:none;
            display:grid;
            gap:.7rem;
        }
        .bullet-list li{
            display:flex;
            gap:.7rem;
            align-items:flex-start;
            color:var(--text);
        }
        .bullet-list li::before{
            content:"";
            width:.8rem;height:.8rem;
            margin-top:.42rem;
            border-radius:50%;
            background:var(--accent);
            flex:0 0 auto;
            box-shadow:0 0 0 4px rgba(200,168,106,.18);
        }
        .side-stack{
            display:grid;
            gap:1rem;
        }
        .mini-feature{
            padding:1.15rem;
            border-radius:22px;
            background:rgba(255,255,255,.88);
            border:1px solid rgba(22,35,29,.10);
            box-shadow:var(--shadow);
        }
        .mini-feature h4{
            font-size:1rem;
            font-weight:800;
            margin:0 0 .45rem;
        }
        .mini-feature p{
            margin:0;
            color:var(--muted);
        }
        .mini-feature .badge-soft{
            display:inline-flex;
            margin-bottom:.7rem;
        }
        .badge-soft{
            display:inline-flex;
            align-items:center;
            gap:.35rem;
            font-size:.8rem;
            font-weight:700;
            padding:.4rem .62rem;
            border-radius:999px;
            color:var(--primary);
            background:rgba(23,60,48,.08);
            border:1px solid rgba(23,60,48,.08);
        }

        .results-grid{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:1rem;
        }
        .stat-card{
            padding:1.25rem;
            position:relative;
            overflow:hidden;
        }
        .stat-card::before{
            content:"";
            position:absolute;
            inset:auto -2rem -2rem auto;
            width:10rem;height:10rem;
            background:radial-gradient(circle, rgba(23,60,48,.08) 0, transparent 65%);
            pointer-events:none;
        }
        .stat-num{
            font-size:clamp(2rem, 4vw, 3.2rem);
            line-height:1;
            font-weight:900;
            letter-spacing:-.05em;
            color:var(--primary);
            margin-bottom:.65rem;
        }
        .stat-card h3{
            font-size:1.08rem;
            font-weight:800;
            margin:0 0 .4rem;
        }
        .stat-card p{
            margin:0;
            color:var(--muted);
        }
        .progress-line{
            margin-top:1rem;
            height:10px;
            border-radius:999px;
            background:rgba(23,60,48,.08);
            overflow:hidden;
        }
        .progress-line span{
            display:block;
            height:100%;
            border-radius:inherit;
            background:linear-gradient(90deg, var(--primary), var(--accent));
        }

        .steps-grid{
            display:grid;
            grid-template-columns:repeat(4,minmax(0,1fr));
            gap:1rem;
        }
        .step-card{
            padding:1.15rem;
            background:linear-gradient(180deg, rgba(255,253,248,.98), rgba(244,241,233,.95));
            border-radius:22px;
            border:1px solid rgba(22,35,29,.10);
            box-shadow:var(--shadow);
            position:relative;
        }
        .step-card .step-num{
            width:2.6rem;height:2.6rem;
            border-radius:18px;
            display:flex;
            align-items:center;
            justify-content:center;
            background:rgba(23,60,48,.08);
            color:var(--primary);
            font-weight:900;
            margin-bottom:.85rem;
        }
        .step-card h3{
            font-size:1.02rem;
            font-weight:800;
            margin:0 0 .45rem;
        }
        .step-card p{
            margin:0;
            color:var(--muted);
        }

        .content-grid{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:1rem;
        }
        .content-card{
            padding:1rem 1.05rem;
            display:flex;
            gap:1rem;
            align-items:flex-start;
            transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
        }
        .content-card:hover{
            transform:translateY(-2px);
            box-shadow:var(--shadow-strong);
            border-color:rgba(23,60,48,.18);
        }
        .content-badge{
            flex:0 0 auto;
            width:3rem;height:3rem;
            border-radius:18px;
            display:grid;
            place-items:center;
            font-weight:900;
            color:var(--primary);
            background:rgba(23,60,48,.08);
            border:1px solid rgba(23,60,48,.08);
        }
        .content-main{
            min-width:0;
            flex:1;
        }
        .content-meta{
            display:flex;
            flex-wrap:wrap;
            gap:.5rem;
            align-items:center;
            margin-bottom:.35rem;
        }
        .content-meta .category{
            color:var(--primary);
            font-size:.82rem;
            font-weight:700;
            background:rgba(23,60,48,.08);
            padding:.28rem .55rem;
            border-radius:999px;
        }
        .content-meta .time{
            color:var(--muted);
            font-size:.83rem;
        }
        .content-main h3{
            margin:0 0 .35rem;
            font-size:1.04rem;
            font-weight:800;
            line-height:1.42;
        }
        .content-main p{
            margin:0;
            color:var(--muted);
            font-size:.96rem;
        }
        .content-link{
            display:inline-flex;
            margin-top:.85rem;
            align-items:center;
            gap:.35rem;
            font-weight:700;
        }
        .aside-note{
            position:sticky;
            top:110px;
        }
        .note-card{
            padding:1.2rem;
            background:
                linear-gradient(180deg, rgba(23,60,48,.97), rgba(21,46,39,.96));
            color:#fff;
        }
        .note-card h3{
            font-size:1.1rem;
            margin:0 0 .55rem;
            font-weight:800;
        }
        .note-card p{
            margin:0 0 .9rem;
            color:rgba(255,255,255,.84);
        }
        .check-list{
            display:grid;
            gap:.65rem;
            list-style:none;
            padding:0;
            margin:0;
        }
        .check-list li{
            display:flex;
            gap:.6rem;
            align-items:flex-start;
            color:rgba(255,255,255,.88);
        }
        .check-list li::before{
            content:"✓";
            color:var(--accent);
            font-weight:900;
            flex:0 0 auto;
            margin-top:.03rem;
        }
        .note-link{
            display:inline-flex;
            margin-top:1rem;
            font-weight:800;
            color:#fff;
            border-bottom:1px solid rgba(255,255,255,.28);
            padding-bottom:.15rem;
        }

        .quote-grid{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:1rem;
        }
        .quote-card{
            padding:1.2rem;
        }
        .quote-head{
            display:flex;
            align-items:center;
            gap:.8rem;
            margin-bottom:.95rem;
        }
        .avatar{
            width:2.85rem;height:2.85rem;
            border-radius:50%;
            display:grid;
            place-items:center;
            background:linear-gradient(145deg, rgba(23,60,48,.12), rgba(200,168,106,.18));
            color:var(--primary);
            font-weight:900;
            border:1px solid rgba(22,35,29,.10);
            flex:0 0 auto;
        }
        .who strong{
            display:block;
            font-size:1rem;
            line-height:1.2;
        }
        .who span{
            color:var(--muted);
            font-size:.88rem;
        }
        .quote-text{
            margin:0;
            color:var(--text);
            font-size:.98rem;
        }
        .quote-mark{
            font-size:2.2rem;
            line-height:1;
            color:rgba(23,60,48,.18);
            font-weight:900;
            margin-bottom:-.35rem;
        }

        .faq-shell{
            padding:1.2rem;
        }
        .accordion{
            --bs-accordion-bg:transparent;
            --bs-accordion-border-color:rgba(22,35,29,.10);
            --bs-accordion-btn-padding-x:1rem;
            --bs-accordion-btn-padding-y:1rem;
            --bs-accordion-active-color:var(--text);
            --bs-accordion-active-bg:rgba(23,60,48,.05);
            --bs-accordion-btn-focus-box-shadow:0 0 0 .18rem rgba(23,60,48,.12);
            --bs-accordion-btn-icon-width:1rem;
            --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.75 6.5l5.25 5 5.25-5' stroke='%23173c30' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.75 9.5l5.25-5 5.25 5' stroke='%23173c30' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        }
        .accordion-item{
            border:1px solid rgba(22,35,29,.10);
            border-radius:18px !important;
            overflow:hidden;
            background:rgba(255,255,255,.82);
            box-shadow:none;
        }
        .accordion-item + .accordion-item{margin-top:.85rem}
        .accordion-button{
            background:transparent;
            color:var(--text);
            font-weight:800;
            border:none;
            box-shadow:none !important;
        }
        .accordion-button:not(.collapsed){
            background:rgba(23,60,48,.05);
            color:var(--text);
        }
        .accordion-body{
            color:var(--muted);
            padding:0 1rem 1rem;
        }
        .accordion-button:focus-visible{
            outline:none;
            box-shadow:0 0 0 .2rem rgba(23,60,48,.12) !important;
        }

        .cta-shell{
            position:relative;
            overflow:hidden;
            background:
                linear-gradient(140deg, rgba(18,39,33,.98), rgba(23,60,48,.96) 55%, rgba(32,86,67,.95));
            color:#fff;
            padding:clamp(1.4rem, 3vw, 2.3rem);
        }
        .cta-shell::before{
            content:"";
            position:absolute;
            inset:auto -6rem -8rem auto;
            width:18rem;height:18rem;
            background:radial-gradient(circle, rgba(200,168,106,.18) 0, transparent 62%);
        }
        .cta-shell::after{
            content:"";
            position:absolute;
            inset:-5rem auto auto -6rem;
            width:14rem;height:14rem;
            background:radial-gradient(circle, rgba(255,255,255,.10) 0, transparent 66%);
        }
        .cta-inner{
            position:relative;
            z-index:1;
            display:grid;
            grid-template-columns:1.2fr .8fr;
            gap:1rem;
            align-items:center;
        }
        .cta-title{
            font-size:clamp(1.8rem, 3.5vw, 3rem);
            line-height:1.08;
            margin:0 0 .65rem;
            font-weight:900;
            letter-spacing:-.04em;
        }
        .cta-text{
            margin:0;
            color:rgba(255,255,255,.84);
            max-width:60ch;
        }
        .cta-actions{
            display:flex;
            flex-wrap:wrap;
            gap:.8rem;
            justify-content:flex-end;
            align-items:center;
        }
        .btn-light-brand{
            background:#fff;
            color:var(--primary);
            border:1px solid rgba(255,255,255,.24);
            box-shadow:0 14px 26px rgba(0,0,0,.10);
        }
        .btn-light-brand:hover{
            color:var(--primary);
            transform:translateY(-1px);
            box-shadow:0 18px 32px rgba(0,0,0,.14);
        }
        .btn-outline-light-brand{
            background:transparent;
            color:#fff;
            border:1px solid rgba(255,255,255,.22);
        }
        .btn-outline-light-brand:hover{
            background:rgba(255,255,255,.08);
            color:#fff;
            transform:translateY(-1px);
        }

        .site-footer{
            padding:2rem 0 2.4rem;
            color:var(--muted);
        }
        .footer-shell{
            border-top:1px solid rgba(22,35,29,.10);
            padding-top:1.3rem;
        }
        .footer-top{
            display:grid;
            grid-template-columns:1.3fr .7fr .7fr;
            gap:1rem;
            align-items:start;
            margin-bottom:1rem;
        }
        .footer-brand{
            font-weight:900;
            color:var(--text);
            font-size:1.1rem;
            margin-bottom:.55rem;
        }
        .footer-links{
            display:grid;
            gap:.55rem;
        }
        .footer-links a{
            color:var(--muted);
            width:fit-content;
        }
        .footer-links a:hover{color:var(--primary)}
        .footer-copy{
            display:flex;
            flex-wrap:wrap;
            gap:.5rem 1rem;
            justify-content:space-between;
            border-top:1px dashed rgba(22,35,29,.12);
            padding-top:1rem;
            margin-top:.8rem;
            font-size:.92rem;
        }
        .empty-state{
            padding:1.4rem;
            border:1px dashed rgba(22,35,29,.18);
            border-radius:22px;
            background:rgba(255,255,255,.76);
            color:var(--muted);
            text-align:center;
        }
        .floating-top{
            position:fixed;
            right:1rem;
            bottom:1rem;
            z-index:1040;
            width:3rem;height:3rem;
            border-radius:50%;
            display:grid;
            place-items:center;
            background:var(--primary);
            color:#fff;
            border:none;
            box-shadow:0 16px 34px rgba(23,60,48,.24);
            opacity:0;
            transform:translateY(10px);
            pointer-events:none;
            transition:opacity .2s ease, transform .2s ease, background .2s ease;
        }
        .floating-top.show{
            opacity:1;
            transform:translateY(0);
            pointer-events:auto;
        }
        .floating-top:hover{background:var(--primary-2)}
        .floating-top:focus-visible{
            outline:none;
            box-shadow:0 0 0 .2rem rgba(23,60,48,.18), 0 16px 34px rgba(23,60,48,.24);
        }
        .link-ghost{
            color:var(--muted);
        }
        .link-ghost:hover{
            color:var(--primary);
        }

        @media (max-width: 1199.98px){
            .hero-grid{grid-template-columns:1fr .95fr}
            .pain-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
            .solution-grid{grid-template-columns:1fr 1fr}
            .solution-grid .feature-lead{grid-column:1 / -1}
            .steps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
            .quote-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
            .content-grid{grid-template-columns:1fr}
            .aside-note{position:static}
            .footer-top{grid-template-columns:1fr 1fr}
        }
        @media (max-width: 991.98px){
            .site-nav{padding:.6rem .8rem}
            .hero-grid{grid-template-columns:1fr;gap:1.4rem}
            .hero-visual{min-height:unset;padding-top:1rem}
            .cover-stage{width:min(100%, 380px)}
            .results-grid{grid-template-columns:1fr}
            .solution-grid{grid-template-columns:1fr}
            .content-grid{grid-template-columns:1fr}
            .cta-inner{grid-template-columns:1fr}
            .cta-actions{justify-content:flex-start}
            .footer-top{grid-template-columns:1fr}
        }
        @media (max-width: 767.98px){
            .container-wide{width:min(100% - 1.2rem, 1180px)}
            .section-pad{padding:3.6rem 0}
            .hero-shell{padding:1rem}
            .hero-title{font-size:clamp(2rem, 11vw, 3.35rem)}
            .hero-text{font-size:1rem}
            .hero-metrics{grid-template-columns:1fr}
            .pain-wrap{grid-template-columns:1fr}
            .quote-grid{grid-template-columns:1fr}
            .steps-grid{grid-template-columns:1fr}
            .section-head{align-items:flex-start}
            .cover-stage{transform:none}
            .cover-mini{display:none}
            .cover-card{padding:.95rem}
            .cover-grid{gap:.65rem}
            .poster-label b{font-size:2rem}
        }
        @media (max-width: 575.98px){
            .site-nav{border-radius:22px}
            .nav-cta{width:100%}
            .hero-actions,.hero-points{width:100%}
            .btn-brand,.btn-ghost{width:100%}
            .content-card{flex-direction:column}
            .content-badge{width:2.5rem;height:2.5rem;border-radius:14px}
            .cta-shell{padding:1.15rem}
            .floating-top{right:.75rem;bottom:.75rem}
        }
        @media (prefers-reduced-motion: reduce){
            html{scroll-behavior:auto}
            *, *::before, *::after{
                animation-duration:.01ms !important;
                animation-iteration-count:1 !important;
                transition-duration:.01ms !important;
                scroll-behavior:auto !important;
            }
        }

/* roulang page: article */
:root{
            --bg:#f4f1e9;
            --bg-soft:#eef1eb;
            --surface:#fffdf8;
            --surface-2:#edf3ee;
            --surface-3:#173c30;
            --text:#16231d;
            --muted:#66746d;
            --muted-2:#7e8b84;
            --primary:#173c30;
            --primary-2:#205643;
            --accent:#c8a86a;
            --accent-2:#9ab49b;
            --line:rgba(22,35,29,.12);
            --shadow:0 18px 40px rgba(19,34,28,.10);
            --shadow-strong:0 24px 60px rgba(19,34,28,.16);
            --radius:22px;
            --radius-lg:28px;
            --radius-sm:16px;
            --container-pad:clamp(1rem, 2vw, 1.5rem);
            --section-y:clamp(4rem, 7vw, 7rem);
            --bs-primary:#173c30;
            --bs-primary-rgb:23,60,48;
            --bs-secondary:#c8a86a;
            --bs-border-color:rgba(22,35,29,.12);
            --bs-body-color:var(--text);
            --bs-body-bg:var(--bg);
            --bs-body-font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
        }
        html{scroll-behavior:smooth}
        body{
            color:var(--text);
            background:
                radial-gradient(circle at 12% 10%, rgba(200,168,106,.12) 0 14%, transparent 14% 100%),
                radial-gradient(circle at 88% 16%, rgba(23,60,48,.08) 0 10%, transparent 10% 100%),
                linear-gradient(180deg, #f9f7f2 0%, #f4f1e9 30%, #f6f4ee 100%);
            min-height:100vh;
            overflow-x:hidden;
            line-height:1.72;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background:
                linear-gradient(115deg, rgba(23,60,48,.05) 0 1px, transparent 1px 100%),
                linear-gradient(25deg, rgba(23,60,48,.03) 0 1px, transparent 1px 100%);
            background-size:240px 240px, 240px 240px;
            mask-image:linear-gradient(180deg, rgba(0,0,0,.45), transparent 92%);
            opacity:.45;
            z-index:-1;
        }
        a{
            color:var(--primary);
            text-decoration:none;
            transition:color .18s ease, opacity .18s ease, transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
        }
        a:hover{color:var(--primary-2)}
        img{max-width:100%;display:block}
        .container-wide{
            width:min(1180px, calc(100% - 2rem));
            margin-inline:auto;
        }
        .section-pad{
            padding:var(--section-y) 0;
            scroll-margin-top:96px;
        }
        .section-head{
            display:flex;
            flex-wrap:wrap;
            gap:1rem;
            justify-content:space-between;
            align-items:end;
            margin-bottom:1.6rem;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:.5rem;
            font-size:.86rem;
            letter-spacing:.08em;
            text-transform:uppercase;
            color:var(--primary);
            background:rgba(23,60,48,.08);
            border:1px solid rgba(23,60,48,.12);
            padding:.48rem .8rem;
            border-radius:999px;
            margin-bottom:.9rem;
            white-space:nowrap;
        }
        .eyebrow::before{
            content:"";
            width:.55rem;
            height:.55rem;
            border-radius:50%;
            background:var(--accent);
            box-shadow:0 0 0 5px rgba(200,168,106,.18);
        }
        .section-title{
            font-size:clamp(1.5rem, 3vw, 2.5rem);
            line-height:1.15;
            letter-spacing:-.03em;
            margin:0;
            font-weight:800;
        }
        .section-subtitle{
            max-width:62ch;
            color:var(--muted);
            margin:.7rem 0 0;
            font-size:1.02rem;
        }
        .soft-card,
        .feature-card,
        .stat-card,
        .quote-card,
        .content-card,
        .faq-shell,
        .cta-shell,
        .hero-shell,
        .cover-card,
        .cover-mini,
        .note-card,
        .latest-strip,
        .article-panel,
        .sidebar-shell,
        .related-card{
            background:rgba(255,253,248,.92);
            border:1px solid var(--line);
            border-radius:var(--radius);
            box-shadow:var(--shadow);
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:1030;
            padding-top:.8rem;
            padding-bottom:.4rem;
            transition:transform .22s ease, padding .22s ease, box-shadow .22s ease;
        }
        .site-header.is-scrolled{
            padding-top:.45rem;
        }
        .site-nav{
            background:rgba(255,253,248,.84);
            backdrop-filter:saturate(140%) blur(14px);
            border:1px solid rgba(22,35,29,.12);
            border-radius:26px;
            box-shadow:0 12px 34px rgba(19,34,28,.10);
            padding:.7rem 1rem;
        }
        .navbar-brand{
            display:inline-flex;
            align-items:center;
            gap:.65rem;
            font-weight:800;
            font-size:1.05rem;
            letter-spacing:-.02em;
            color:var(--text) !important;
            white-space:nowrap;
        }
        .navbar-brand .brand-mark{
            width:2.15rem;
            height:2.15rem;
            border-radius:14px;
            background:linear-gradient(145deg, rgba(23,60,48,1), rgba(32,86,67,1));
            position:relative;
            box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
            flex:0 0 auto;
        }
        .navbar-brand .brand-mark::after{
            content:"";
            position:absolute;
            inset:.42rem;
            border-radius:10px;
            border:1px solid rgba(255,255,255,.36);
        }
        .navbar-brand .brand-mark::before{
            content:"";
            position:absolute;
            width:.42rem;
            height:.42rem;
            border-radius:50%;
            background:var(--accent);
            top:.48rem;
            left:.48rem;
            box-shadow:0 0 0 4px rgba(200,168,106,.15);
        }
        .navbar-nav{
            gap:.2rem;
        }
        .nav-link{
            color:var(--muted) !important;
            font-weight:700;
            font-size:.98rem;
            padding:.65rem .95rem !important;
            border-radius:999px;
            position:relative;
        }
        .nav-link:hover,
        .nav-link:focus{
            color:var(--primary) !important;
            background:rgba(23,60,48,.06);
        }
        .nav-link.active{
            color:var(--primary) !important;
            background:rgba(23,60,48,.10);
            box-shadow:inset 0 0 0 1px rgba(23,60,48,.08);
        }
        .nav-cta,
        .btn-strong,
        .btn-soft{
            border-radius:999px;
            padding:.72rem 1.2rem;
            font-weight:800;
            transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
        }
        .nav-cta,
        .btn-strong{
            background:linear-gradient(145deg, var(--primary), var(--primary-2));
            color:#fff !important;
            border:1px solid rgba(255,255,255,.06);
            box-shadow:0 10px 22px rgba(23,60,48,.18);
        }
        .nav-cta:hover,
        .btn-strong:hover{
            transform:translateY(-1px);
            box-shadow:0 16px 28px rgba(23,60,48,.22);
            color:#fff !important;
        }
        .nav-cta:active,
        .btn-strong:active{
            transform:translateY(1px);
            box-shadow:0 8px 16px rgba(23,60,48,.16);
        }
        .btn-soft{
            background:rgba(23,60,48,.06);
            color:var(--primary);
            border:1px solid rgba(23,60,48,.10);
        }
        .btn-soft:hover{
            background:rgba(23,60,48,.10);
            border-color:rgba(23,60,48,.14);
            color:var(--primary);
            transform:translateY(-1px);
        }
        .btn-soft:active{
            transform:translateY(1px);
        }
        .btn-check:focus + .btn,
        .btn:focus,
        .form-control:focus,
        .accordion-button:focus,
        .navbar-toggler:focus,
        .nav-link:focus{
            box-shadow:0 0 0 .22rem rgba(200,168,106,.24);
            outline:none;
        }
        .navbar-toggler{
            border:1px solid rgba(22,35,29,.12);
            border-radius:16px;
            width:48px;
            height:48px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            box-shadow:0 10px 20px rgba(19,34,28,.08);
            background:rgba(255,253,248,.92);
        }
        .navbar-toggler-icon{
            width:1.35rem;
            height:1.35rem;
            background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(23,60,48,0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
        }
        .offcanvas{
            background:linear-gradient(180deg, rgba(255,253,248,.98), rgba(245,242,235,.98));
            border-left:1px solid rgba(22,35,29,.12);
        }
        .offcanvas .nav-link{
            padding:.86rem 1rem !important;
            border-radius:16px;
        }
        .offcanvas .btn{
            width:100%;
        }
        .hero-shell{
            position:relative;
            overflow:hidden;
            padding:clamp(1.25rem, 2.7vw, 2rem);
            background:
                linear-gradient(135deg, rgba(23,60,48,.98) 0%, rgba(32,86,67,.95) 55%, rgba(15,34,28,.98) 100%);
            color:#f6f3ea;
            box-shadow:var(--shadow-strong);
        }
        .hero-shell::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(115deg, rgba(255,255,255,.09) 0 1px, transparent 1px 100%),
                linear-gradient(25deg, rgba(255,255,255,.05) 0 1px, transparent 1px 100%);
            background-size:220px 220px, 220px 220px;
            opacity:.22;
            pointer-events:none;
        }
        .article-hero-grid{
            position:relative;
            z-index:1;
            display:grid;
            grid-template-columns:minmax(0,1.45fr) minmax(280px,.85fr);
            gap:1.2rem;
            align-items:stretch;
        }
        .article-hero-left,
        .article-hero-right{
            min-width:0;
        }
        .breadcrumb-wrap{
            display:flex;
            flex-wrap:wrap;
            gap:.55rem;
            align-items:center;
            margin-bottom:1rem;
        }
        .breadcrumb-pill{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            color:rgba(246,243,234,.86);
            background:rgba(255,255,255,.08);
            border:1px solid rgba(255,255,255,.12);
            padding:.52rem .8rem;
            border-radius:999px;
            font-size:.92rem;
        }
        .breadcrumb-pill:hover{
            color:#fff;
            background:rgba(255,255,255,.12);
        }
        .breadcrumb-divider{
            color:rgba(246,243,234,.62);
        }
        .article-title{
            margin:0;
            font-size:clamp(1.9rem, 4vw, 3.2rem);
            line-height:1.12;
            letter-spacing:-.04em;
            font-weight:900;
            text-wrap:balance;
        }
        .article-lead{
            margin:1rem 0 0;
            max-width:68ch;
            color:rgba(246,243,234,.84);
            font-size:1.04rem;
        }
        .hero-tags,
        .article-meta{
            display:flex;
            flex-wrap:wrap;
            gap:.6rem;
        }
        .hero-tags{
            margin-top:1rem;
        }
        .tag-chip,
        .meta-chip{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.14);
            padding:.5rem .8rem;
            font-size:.88rem;
            line-height:1;
            white-space:nowrap;
        }
        .tag-chip{
            background:rgba(255,255,255,.08);
            color:#fff;
        }
        .meta-chip{
            color:rgba(246,243,234,.9);
            background:rgba(255,255,255,.06);
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:.75rem;
            margin-top:1.25rem;
        }
        .hero-actions .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:.4rem;
        }
        .btn-light-ghost{
            color:#f6f3ea;
            background:rgba(255,255,255,.08);
            border:1px solid rgba(255,255,255,.14);
            border-radius:999px;
            padding:.72rem 1.15rem;
            font-weight:800;
        }
        .btn-light-ghost:hover{
            color:#fff;
            background:rgba(255,255,255,.12);
            transform:translateY(-1px);
        }
        .hero-board{
            height:100%;
            display:flex;
            flex-direction:column;
            gap:1rem;
        }
        .board-card{
            background:rgba(255,255,255,.08);
            border:1px solid rgba(255,255,255,.12);
            border-radius:var(--radius);
            padding:1rem;
            backdrop-filter:blur(10px);
        }
        .board-card h3,
        .board-card h4{
            margin:0;
            color:#fff;
            font-weight:800;
            line-height:1.2;
        }
        .board-card .muted{
            color:rgba(246,243,234,.72);
        }
        .board-stat{
            display:grid;
            gap:.75rem;
            margin-top:.9rem;
        }
        .board-stat-row{
            display:grid;
            grid-template-columns:auto 1fr auto;
            gap:.8rem;
            align-items:center;
            padding:.68rem .78rem;
            border-radius:16px;
            background:rgba(255,255,255,.06);
            border:1px solid rgba(255,255,255,.08);
        }
        .board-stat-row strong{
            color:#fff;
            font-size:1.02rem;
        }
        .board-stat-row span{
            color:rgba(246,243,234,.78);
            font-size:.92rem;
        }
        .board-dot{
            width:.7rem;
            height:.7rem;
            border-radius:50%;
            background:var(--accent);
            box-shadow:0 0 0 5px rgba(200,168,106,.17);
        }
        .board-mini{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:.8rem;
        }
        .mini-tile{
            padding:.88rem .92rem;
            border-radius:18px;
            background:rgba(255,255,255,.06);
            border:1px solid rgba(255,255,255,.08);
        }
        .mini-tile .label{
            font-size:.84rem;
            color:rgba(246,243,234,.68);
            display:block;
        }
        .mini-tile .value{
            margin-top:.28rem;
            color:#fff;
            font-weight:800;
            font-size:1rem;
        }
        .latest-strip{
            padding:1rem;
            overflow:hidden;
        }
        .latest-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:.9rem;
        }
        .latest-item{
            border:1px solid rgba(22,35,29,.10);
            background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(238,241,235,.92));
            border-radius:20px;
            padding:1rem;
            min-height:130px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            box-shadow:0 10px 24px rgba(19,34,28,.05);
        }
        .latest-item .topline{
            display:flex;
            justify-content:space-between;
            gap:1rem;
            align-items:flex-start;
            margin-bottom:.7rem;
        }
        .latest-item .kicker{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            font-size:.86rem;
            font-weight:800;
            color:var(--primary);
            background:rgba(23,60,48,.08);
            padding:.38rem .68rem;
            border-radius:999px;
        }
        .latest-item .kicker::before{
            content:"";
            width:.42rem;
            height:.42rem;
            border-radius:50%;
            background:var(--accent);
        }
        .latest-item h3{
            font-size:1.06rem;
            line-height:1.35;
            font-weight:800;
            margin:0;
        }
        .latest-item p{
            margin:.5rem 0 0;
            color:var(--muted);
            font-size:.95rem;
        }
        .latest-item .time{
            font-size:.86rem;
            color:var(--muted-2);
            white-space:nowrap;
        }
        .article-layout{
            display:grid;
            grid-template-columns:minmax(0,1.35fr) minmax(280px,.62fr);
            gap:1.2rem;
            align-items:start;
        }
        .content-card{
            padding:clamp(1.15rem, 2.5vw, 2rem);
            overflow:hidden;
        }
        .article-content{
            font-size:1.03rem;
        }
        .article-content > * + *{
            margin-top:1rem;
        }
        .article-content h2,
        .article-content h3,
        .article-content h4{
            color:var(--text);
            font-weight:900;
            line-height:1.28;
            letter-spacing:-.03em;
            margin-top:1.8rem;
            margin-bottom:.75rem;
        }
        .article-content h2{
            font-size:clamp(1.32rem, 2.1vw, 1.8rem);
        }
        .article-content h3{font-size:1.18rem}
        .article-content h4{font-size:1.05rem}
        .article-content p{
            color:var(--text);
            margin:0;
        }
        .article-content ul,
        .article-content ol{
            padding-left:1.2rem;
            margin:0;
            color:var(--text);
        }
        .article-content li + li{margin-top:.45rem}
        .article-content blockquote{
            margin:1.3rem 0;
            padding:1rem 1.1rem;
            background:rgba(23,60,48,.05);
            border-left:4px solid var(--accent);
            border-radius:16px;
            color:var(--text);
        }
        .article-content a{
            color:var(--primary);
            text-decoration:underline;
            text-decoration-color:rgba(23,60,48,.24);
            text-underline-offset:.18em;
        }
        .article-content a:hover{
            color:var(--primary-2);
            text-decoration-color:rgba(23,60,48,.42);
        }
        .article-content img{
            border-radius:18px;
            border:1px solid rgba(22,35,29,.10);
            box-shadow:0 10px 24px rgba(19,34,28,.08);
        }
        .article-content hr{
            margin:1.6rem 0;
            border-color:rgba(22,35,29,.12);
            opacity:1;
        }
        .article-content table{
            width:100%;
            border-collapse:separate;
            border-spacing:0;
            overflow:hidden;
            border-radius:18px;
            border:1px solid rgba(22,35,29,.12);
        }
        .article-content table th,
        .article-content table td{
            padding:.8rem .85rem;
            border-bottom:1px solid rgba(22,35,29,.10);
            border-right:1px solid rgba(22,35,29,.08);
            vertical-align:top;
        }
        .article-content table th:last-child,
        .article-content table td:last-child{border-right:none}
        .article-content table tr:last-child td{border-bottom:none}
        .article-content table th{
            background:rgba(23,60,48,.06);
            font-weight:800;
        }
        .article-content .lead-box,
        .article-content .note-box{
            padding:1rem 1.05rem;
            border-radius:18px;
            border:1px solid rgba(22,35,29,.10);
            background:linear-gradient(180deg, rgba(255,255,255,.90), rgba(237,243,238,.95));
        }
        .article-content .note-box{
            border-left:4px solid var(--primary);
        }
        .article-content .lead-box{
            box-shadow:0 12px 24px rgba(19,34,28,.05);
        }
        .sidebar-shell{
            position:sticky;
            top:108px;
            padding:1rem;
        }
        .sidebar-card + .sidebar-card{
            margin-top:1rem;
        }
        .sidebar-card{
            background:linear-gradient(180deg, rgba(255,255,255,.90), rgba(239,243,238,.92));
            border:1px solid rgba(22,35,29,.10);
            border-radius:20px;
            padding:1rem;
        }
        .sidebar-card h3{
            font-size:1.02rem;
            margin:0 0 .8rem;
            font-weight:800;
            line-height:1.3;
        }
        .info-list{
            list-style:none;
            padding:0;
            margin:0;
            display:grid;
            gap:.72rem;
        }
        .info-list li{
            display:flex;
            justify-content:space-between;
            gap:1rem;
            padding-bottom:.68rem;
            border-bottom:1px dashed rgba(22,35,29,.14);
        }
        .info-list li:last-child{padding-bottom:0;border-bottom:none}
        .info-list .k{
            color:var(--muted);
            flex:0 0 auto;
        }
        .info-list .v{
            color:var(--text);
            font-weight:700;
            text-align:right;
        }
        .quick-links{
            display:grid;
            gap:.7rem;
        }
        .quick-link{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:.75rem;
            padding:.88rem .96rem;
            border-radius:16px;
            border:1px solid rgba(22,35,29,.10);
            background:rgba(255,255,255,.84);
        }
        .quick-link:hover{
            transform:translateY(-1px);
            border-color:rgba(23,60,48,.16);
            box-shadow:0 10px 20px rgba(19,34,28,.06);
        }
        .quick-link .arrow{
            color:var(--accent);
            font-weight:900;
        }
        .anchor-list{
            display:flex;
            flex-wrap:wrap;
            gap:.6rem;
        }
        .anchor-link{
            display:inline-flex;
            align-items:center;
            gap:.4rem;
            padding:.58rem .82rem;
            border-radius:999px;
            background:rgba(23,60,48,.06);
            border:1px solid rgba(23,60,48,.10);
            color:var(--primary);
            font-weight:700;
            font-size:.92rem;
        }
        .anchor-link:hover{
            background:rgba(23,60,48,.10);
            color:var(--primary);
        }
        .stat-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:1rem;
        }
        .stat-card{
            padding:1.15rem 1.05rem;
            position:relative;
            overflow:hidden;
        }
        .stat-card::after{
            content:"";
            position:absolute;
            inset:auto -20% -30% auto;
            width:160px;
            height:160px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(200,168,106,.18) 0 36%, transparent 37% 100%);
            pointer-events:none;
        }
        .stat-value{
            font-size:clamp(1.7rem, 3vw, 2.6rem);
            line-height:1;
            font-weight:900;
            letter-spacing:-.04em;
            color:var(--primary);
        }
        .stat-label{
            margin-top:.6rem;
            font-weight:800;
            color:var(--text);
        }
        .stat-desc{
            margin-top:.45rem;
            color:var(--muted);
            font-size:.95rem;
        }
        .split-grid{
            display:grid;
            grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
            gap:1rem;
            align-items:stretch;
        }
        .feature-card{
            padding:1.05rem;
            height:100%;
        }
        .feature-icon{
            width:2.7rem;
            height:2.7rem;
            border-radius:16px;
            display:grid;
            place-items:center;
            background:rgba(23,60,48,.08);
            color:var(--primary);
            font-weight:900;
            margin-bottom:.8rem;
            border:1px solid rgba(23,60,48,.10);
        }
        .feature-card h3{
            margin:0;
            font-size:1.06rem;
            line-height:1.35;
            font-weight:900;
        }
        .feature-card p{
            margin:.55rem 0 0;
            color:var(--muted);
        }
        .feature-meta{
            display:flex;
            flex-wrap:wrap;
            gap:.45rem;
            margin-top:.9rem;
        }
        .small-pill{
            display:inline-flex;
            align-items:center;
            padding:.38rem .62rem;
            border-radius:999px;
            background:rgba(23,60,48,.06);
            color:var(--primary);
            font-size:.84rem;
            font-weight:700;
            border:1px solid rgba(23,60,48,.10);
        }
        .quote-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:1rem;
        }
        .quote-card{
            padding:1rem 1.05rem;
        }
        .quote-head{
            display:flex;
            align-items:center;
            gap:.8rem;
            margin-bottom:.85rem;
        }
        .avatar{
            width:2.7rem;
            height:2.7rem;
            border-radius:50%;
            display:grid;
            place-items:center;
            background:linear-gradient(145deg, rgba(23,60,48,.10), rgba(200,168,106,.16));
            color:var(--primary);
            font-weight:900;
            border:1px solid rgba(23,60,48,.10);
            flex:0 0 auto;
        }
        .quote-name{
            font-weight:800;
            color:var(--text);
            margin:0;
        }
        .quote-role{
            color:var(--muted);
            font-size:.88rem;
            margin:.1rem 0 0;
        }
        .quote-card p{
            margin:0;
            color:var(--text);
        }
        .stars{
            color:var(--accent);
            letter-spacing:.1em;
            font-size:.9rem;
            margin-top:.8rem;
        }
        .faq-shell{
            padding:clamp(1rem, 2.2vw, 1.4rem);
        }
        .accordion{
            --bs-accordion-bg:transparent;
            --bs-accordion-border-color:transparent;
            --bs-accordion-btn-focus-box-shadow:none;
            --bs-accordion-btn-icon-width:1rem;
        }
        .accordion-item{
            background:rgba(255,253,248,.86);
            border:1px solid rgba(22,35,29,.10);
            border-radius:18px !important;
            overflow:hidden;
            box-shadow:0 10px 24px rgba(19,34,28,.05);
        }
        .accordion-item + .accordion-item{
            margin-top:.8rem;
        }
        .accordion-button{
            background:transparent;
            color:var(--text);
            font-weight:800;
            padding:1rem 1.1rem;
            border-radius:18px !important;
        }
        .accordion-button:not(.collapsed){
            background:rgba(23,60,48,.06);
            color:var(--primary);
            box-shadow:none;
        }
        .accordion-button::after{
            filter:hue-rotate(85deg) saturate(1.5);
            opacity:.8;
        }
        .accordion-body{
            padding:0 1.1rem 1rem;
            color:var(--muted);
        }
        .cta-shell{
            overflow:hidden;
            position:relative;
            background:
                radial-gradient(circle at top right, rgba(200,168,106,.14), transparent 28%),
                linear-gradient(135deg, rgba(23,60,48,.98), rgba(15,34,28,.98));
            color:#f6f3ea;
            box-shadow:var(--shadow-strong);
        }
        .cta-shell::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(115deg, rgba(255,255,255,.08) 0 1px, transparent 1px 100%),
                linear-gradient(25deg, rgba(255,255,255,.05) 0 1px, transparent 1px 100%);
            background-size:220px 220px, 220px 220px;
            opacity:.22;
            pointer-events:none;
        }
        .cta-inner{
            position:relative;
            z-index:1;
            display:flex;
            flex-wrap:wrap;
            justify-content:space-between;
            align-items:center;
            gap:1.2rem;
            padding:clamp(1.3rem, 3vw, 2rem);
        }
        .cta-inner h2{
            margin:0;
            font-size:clamp(1.5rem, 3vw, 2.35rem);
            line-height:1.14;
            font-weight:900;
            letter-spacing:-.04em;
        }
        .cta-inner p{
            margin:.6rem 0 0;
            max-width:58ch;
            color:rgba(246,243,234,.82);
        }
        .cta-actions{
            display:flex;
            flex-wrap:wrap;
            gap:.75rem;
        }
        .cta-actions .btn{
            min-width:132px;
        }
        .site-footer{
            padding:1rem 0 1.3rem;
            margin-top:1rem;
        }
        .footer-shell{
            background:rgba(255,253,248,.90);
            border:1px solid rgba(22,35,29,.12);
            border-radius:28px;
            box-shadow:var(--shadow);
            padding:clamp(1.1rem, 2.3vw, 1.5rem);
        }
        .footer-top{
            display:grid;
            grid-template-columns:1.3fr .85fr .85fr;
            gap:1rem;
            align-items:start;
        }
        .footer-brand{
            font-size:1.08rem;
            font-weight:900;
            color:var(--text);
            margin-bottom:.45rem;
        }
        .footer-links{
            display:flex;
            flex-wrap:wrap;
            gap:.65rem 1rem;
        }
        .footer-links a{
            color:var(--muted);
            font-weight:700;
        }
        .footer-links a:hover{
            color:var(--primary);
        }
        .footer-copy{
            display:flex;
            flex-wrap:wrap;
            justify-content:space-between;
            gap:.65rem 1rem;
            margin-top:1rem;
            padding-top:1rem;
            border-top:1px solid rgba(22,35,29,.10);
            color:var(--muted);
            font-size:.94rem;
        }
        .empty-state{
            min-height:300px;
            display:grid;
            place-items:center;
            text-align:center;
            padding:1.5rem;
        }
        .empty-state h2{
            font-size:1.55rem;
            font-weight:900;
            margin:0;
        }
        .empty-state p{
            margin:.75rem auto 0;
            color:var(--muted);
            max-width:40ch;
        }
        .empty-state .btn{
            margin-top:1rem;
        }
        .sticky-top-offset{
            top:108px;
        }
        .divider-line{
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(22,35,29,.12), transparent);
            margin:1rem 0;
        }
        .text-muted-2{color:var(--muted-2) !important}
        .text-soft{color:rgba(246,243,234,.80) !important}
        .badge-soft{
            display:inline-flex;
            align-items:center;
            gap:.35rem;
            padding:.34rem .62rem;
            border-radius:999px;
            background:rgba(23,60,48,.08);
            color:var(--primary);
            font-size:.82rem;
            font-weight:800;
            border:1px solid rgba(23,60,48,.10);
        }
        .badge-dark{
            display:inline-flex;
            align-items:center;
            gap:.35rem;
            padding:.34rem .62rem;
            border-radius:999px;
            background:rgba(255,255,255,.08);
            color:#fff;
            font-size:.82rem;
            font-weight:800;
            border:1px solid rgba(255,255,255,.14);
        }
        .reveal-on-hover{
            transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
        }
        .reveal-on-hover:hover{
            transform:translateY(-2px);
            box-shadow:0 16px 30px rgba(19,34,28,.08);
        }
        .reveal-on-hover:active{
            transform:translateY(1px);
        }
        .text-balance{ text-wrap:balance; }
        @media (max-width: 1199.98px){
            .article-hero-grid,
            .article-layout,
            .split-grid{
                grid-template-columns:1fr;
            }
            .sidebar-shell{
                position:relative;
                top:auto;
            }
            .latest-grid,
            .quote-grid,
            .stat-grid{
                grid-template-columns:1fr 1fr;
            }
            .footer-top{
                grid-template-columns:1fr 1fr;
            }
            .footer-top > :first-child{
                grid-column:1 / -1;
            }
        }
        @media (max-width: 991.98px){
            .site-nav{
                padding:.7rem .85rem;
            }
            .hero-shell{
                padding:1rem;
            }
            .latest-grid{
                grid-template-columns:1fr;
            }
            .quote-grid,
            .stat-grid{
                grid-template-columns:1fr;
            }
            .footer-top{
                grid-template-columns:1fr;
            }
            .footer-copy{
                flex-direction:column;
            }
        }
        @media (max-width: 767.98px){
            .container-wide{
                width:min(100%, calc(100% - 1.1rem));
            }
            .site-header{
                padding-top:.55rem;
            }
            .site-nav{
                border-radius:22px;
            }
            .article-title{
                font-size:clamp(1.65rem, 7vw, 2.2rem);
            }
            .hero-actions .btn,
            .cta-actions .btn{
                width:100%;
            }
            .cta-inner{
                align-items:flex-start;
            }
            .board-mini{
                grid-template-columns:1fr;
            }
        }
        @media (max-width: 575.98px){
            .section-pad{
                padding:3.2rem 0;
            }
            .content-card,
            .sidebar-shell,
            .latest-strip,
            .faq-shell{
                padding:.92rem;
            }
            .hero-shell{
                border-radius:20px;
            }
            .board-card,
            .board-stat-row,
            .latest-item,
            .sidebar-card,
            .quote-card,
            .feature-card,
            .stat-card{
                border-radius:18px;
            }
            .article-content{
                font-size:1rem;
            }
            .breadcrumb-wrap{
                gap:.45rem;
            }
        }

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}