/* roulang page: index */
:root{
            --bg:#f6f1e8;
            --bg-2:#fbf8f2;
            --surface:#fffdf8;
            --surface-2:#f0e7d7;
            --surface-3:#e8dfcf;
            --brand:#0f5b4f;
            --brand-2:#16796d;
            --brand-3:#0a443b;
            --accent:#c58a2c;
            --accent-2:#e6b15c;
            --rose:#c96c5f;
            --violet:#7d5ba6;
            --text:#17322e;
            --muted:#667a76;
            --line:rgba(20, 49, 45, .12);
            --line-strong:rgba(20, 49, 45, .18);
            --shadow:0 18px 40px rgba(19, 43, 38, .08);
            --shadow-2:0 10px 24px rgba(19, 43, 38, .12);
            --radius:18px;
            --radius-lg:28px;
            --container:1220px;
            --gap:24px;
            --gap-lg:32px;
            --header-h:78px;
        }
        *, *::before, *::after{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--text);
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC","Hiragino Sans GB",Arial,sans-serif;
            line-height:1.75;
            background:
                radial-gradient(circle at top left, rgba(15,91,79,.07), transparent 28%),
                radial-gradient(circle at top right, rgba(197,138,44,.08), transparent 24%),
                linear-gradient(180deg, #f9f5ee 0%, var(--bg) 38%, #f7f2e9 100%);
            min-height:100vh;
            text-rendering:optimizeLegibility;
            -webkit-font-smoothing:antialiased;
        }
        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        button,input,textarea,select{font:inherit}
        button{cursor:pointer}
        ::selection{background:rgba(15,91,79,.18);color:var(--brand-3)}
        .container{
            width:min(var(--container), calc(100% - 32px));
            margin:0 auto;
        }
        .skip-link{
            position:absolute;
            left:-999px;
            top:10px;
            z-index:9999;
            background:#fff;
            color:var(--brand);
            padding:10px 14px;
            border-radius:999px;
            box-shadow:var(--shadow);
        }
        .skip-link:focus{left:16px}
        .site-header{
            position:sticky;
            top:0;
            z-index:1200;
            background:rgba(249,244,235,.82);
            backdrop-filter:saturate(140%) blur(14px);
            border-bottom:1px solid rgba(18, 41, 37, .08);
        }
        .header-inner{
            height:var(--header-h);
            display:flex;
            align-items:center;
            gap:16px;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:12px;
            min-width:max-content;
            font-weight:800;
            letter-spacing:.02em;
            color:var(--brand-3);
        }
        .brand-mark{
            width:40px;
            height:40px;
            border-radius:14px;
            background:
                linear-gradient(145deg, var(--brand) 0%, var(--brand-2) 50%, #1ea08b 100%);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 10px 18px rgba(15,91,79,.18);
            position:relative;
            overflow:hidden;
        }
        .brand-mark::before,
        .brand-mark::after{
            content:"";
            position:absolute;
            border-radius:999px;
            background:rgba(255,255,255,.9);
        }
        .brand-mark::before{
            width:18px;height:18px;
            left:11px;top:11px;
            opacity:.92;
        }
        .brand-mark::after{
            width:8px;height:8px;
            right:9px;bottom:9px;
            background:rgba(197,138,44,.96);
        }
        .brand-text{
            font-size:1.04rem;
            line-height:1.1;
        }
        .brand-sub{
            display:block;
            margin-top:3px;
            font-size:.78rem;
            font-weight:600;
            color:var(--muted);
        }
        .header-spacer{flex:1}
        .nav-toggle{
            display:none;
            align-items:center;
            justify-content:center;
            width:46px;
            height:46px;
            border-radius:14px;
            border:1px solid var(--line);
            background:var(--surface);
            color:var(--brand);
            box-shadow:0 6px 16px rgba(19,43,38,.05);
            transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
        }
        .nav-toggle:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(19,43,38,.09)}
        .nav-toggle:focus-visible,
        .btn:focus-visible,
        .nav-link:focus-visible,
        .showcase-card:focus-visible,
        .news-card:focus-visible,
        .faq-item summary:focus-visible,
        input:focus-visible,
        textarea:focus-visible{
            outline:3px solid rgba(15,91,79,.22);
            outline-offset:2px;
        }
        .nav-shell{
            display:flex;
            align-items:center;
            gap:14px;
        }
        .site-nav{
            display:flex;
            align-items:center;
            gap:8px;
            padding:8px;
            border-radius:999px;
            background:rgba(255,255,255,.48);
            border:1px solid rgba(20, 49, 45, .08);
        }
        .nav-link{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:10px 14px;
            border-radius:999px;
            color:var(--muted);
            font-weight:700;
            transition:background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
        }
        .nav-link:hover{
            color:var(--brand);
            background:rgba(15,91,79,.08);
            transform:translateY(-1px);
        }
        .nav-link.is-active{
            color:#fff;
            background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
            box-shadow:0 8px 18px rgba(15,91,79,.18);
        }
        .header-cta{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            padding:12px 18px;
            border-radius:999px;
            background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
            color:#fff;
            font-weight:800;
            box-shadow:0 10px 24px rgba(197,138,44,.24);
            transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
            white-space:nowrap;
        }
        .header-cta:hover{transform:translateY(-1px);box-shadow:0 14px 26px rgba(197,138,44,.28);filter:saturate(104%)}
        .header-cta:active{transform:translateY(0)}
        main{display:block}
        .hero{
            position:relative;
            overflow:hidden;
            padding:36px 0 12px;
        }
        .hero::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(180deg, rgba(246,241,232,.18) 0%, rgba(246,241,232,.7) 100%),
                url('/assets/images/backpic/back-3.webp') center/cover no-repeat;
            opacity:.9;
            z-index:-2;
        }
        .hero::after{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at 20% 10%, rgba(255,255,255,.68), transparent 28%),
                linear-gradient(145deg, rgba(10,68,59,.05), transparent 42%);
            z-index:-1;
        }
        .hero-inner{
            padding:18px 0 8px;
        }
        .hero-panel{
            display:grid;
            grid-template-columns:minmax(0, 1.1fr) minmax(320px, .9fr);
            gap:28px;
            align-items:center;
            padding:30px;
            border-radius:var(--radius-lg);
            background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
            border:1px solid rgba(20, 49, 45, .10);
            box-shadow:var(--shadow);
            position:relative;
            overflow:hidden;
        }
        .hero-panel::before{
            content:"";
            position:absolute;
            left:-120px;
            top:-120px;
            width:280px;
            height:280px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(15,91,79,.10) 0%, rgba(15,91,79,0) 70%);
            pointer-events:none;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 12px;
            border-radius:999px;
            background:rgba(15,91,79,.08);
            color:var(--brand);
            font-size:.85rem;
            font-weight:800;
            letter-spacing:.06em;
        }
        .eyebrow::before{
            content:"";
            width:8px;
            height:8px;
            border-radius:50%;
            background:var(--accent);
            box-shadow:0 0 0 4px rgba(197,138,44,.12);
        }
        .hero h1{
            margin:16px 0 16px;
            font-size:clamp(2.2rem, 5vw, 4.35rem);
            line-height:1.06;
            letter-spacing:-.03em;
            color:var(--brand-3);
        }
        .hero-lead{
            margin:0;
            max-width:42rem;
            font-size:1.04rem;
            color:var(--muted);
        }
        .hero-tags{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin:22px 0 26px;
        }
        .tag{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:9px 12px;
            border-radius:999px;
            background:rgba(255,255,255,.86);
            border:1px solid rgba(20, 49, 45, .10);
            color:var(--text);
            font-size:.92rem;
            font-weight:700;
            box-shadow:0 8px 16px rgba(19,43,38,.04);
        }
        .tag i{
            width:8px;
            height:8px;
            border-radius:50%;
            display:inline-block;
            background:var(--brand);
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:14px;
        }
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            min-height:50px;
            padding:0 20px;
            border-radius:999px;
            border:1px solid transparent;
            font-weight:800;
            transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
            white-space:nowrap;
        }
        .btn:hover{transform:translateY(-1px)}
        .btn:active{transform:translateY(0)}
        .btn-primary{
            background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
            color:#fff;
            box-shadow:0 14px 28px rgba(15,91,79,.18);
        }
        .btn-primary:hover{box-shadow:0 16px 30px rgba(15,91,79,.22)}
        .btn-secondary{
            background:rgba(255,255,255,.86);
            color:var(--brand);
            border-color:rgba(15,91,79,.16);
            box-shadow:0 10px 20px rgba(19,43,38,.06);
        }
        .btn-secondary:hover{
            background:#fff;
            border-color:rgba(15,91,79,.26);
            box-shadow:0 14px 24px rgba(19,43,38,.08);
        }
        .hero-note{
            margin-top:18px;
            display:flex;
            flex-wrap:wrap;
            gap:10px 14px;
            color:var(--muted);
            font-size:.92rem;
        }
        .hero-note span{
            display:inline-flex;
            align-items:center;
            gap:8px;
        }
        .hero-note span::before{
            content:"";
            width:6px;
            height:6px;
            border-radius:999px;
            background:var(--accent);
        }
        .hero-visual{
            position:relative;
            min-height:470px;
            border-radius:24px;
            overflow:hidden;
            background:
                linear-gradient(180deg, rgba(10, 68, 59, .08), rgba(10, 68, 59, .22)),
                url('/assets/images/backpic/back-1.jpg') center/cover no-repeat;
            box-shadow:var(--shadow-2);
            border:1px solid rgba(20, 49, 45, .12);
        }
        .hero-visual::after{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.28)),
                linear-gradient(135deg, rgba(15,91,79,.10), rgba(197,138,44,.04));
        }
        .hero-visual-card{
            position:absolute;
            left:18px;
            right:18px;
            bottom:18px;
            z-index:1;
            display:grid;
            gap:10px;
            padding:18px;
            border-radius:22px;
            background:rgba(255,255,255,.78);
            backdrop-filter:blur(10px);
            border:1px solid rgba(255,255,255,.36);
            box-shadow:0 14px 26px rgba(19,43,38,.16);
        }
        .hero-visual-card strong{
            font-size:1.08rem;
            color:var(--brand-3);
        }
        .hero-visual-card p{
            margin:0;
            color:var(--muted);
            font-size:.94rem;
        }
        .signal-grid{
            display:grid;
            grid-template-columns:1.2fr .9fr .9fr 1fr;
            gap:16px;
            margin-top:18px;
        }
        .signal-card{
            padding:18px 18px 16px;
            border-radius:22px;
            background:rgba(255,255,255,.74);
            border:1px solid rgba(20, 49, 45, .10);
            box-shadow:0 12px 24px rgba(19,43,38,.06);
            min-height:112px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            transition:transform .18s ease, box-shadow .18s ease;
        }
        .signal-card:hover{transform:translateY(-2px);box-shadow:0 16px 28px rgba(19,43,38,.09)}
        .signal-card:nth-child(1){background:linear-gradient(180deg, rgba(255,255,255,.84), rgba(240,231,215,.68))}
        .signal-card:nth-child(2){background:linear-gradient(180deg, rgba(255,255,255,.84), rgba(226,239,235,.72))}
        .signal-card:nth-child(3){background:linear-gradient(180deg, rgba(255,255,255,.84), rgba(249,235,221,.76))}
        .signal-card:nth-child(4){background:linear-gradient(180deg, rgba(255,255,255,.84), rgba(239,233,245,.72))}
        .signal-label{
            display:inline-flex;
            align-items:center;
            gap:8px;
            font-size:.8rem;
            font-weight:800;
            color:var(--brand);
            text-transform:uppercase;
            letter-spacing:.05em;
        }
        .signal-label::before{
            content:"";
            width:8px;
            height:8px;
            border-radius:50%;
            background:var(--accent);
        }
        .signal-card h3{
            margin:10px 0 6px;
            font-size:1.02rem;
            line-height:1.35;
        }
        .signal-card p{
            margin:0;
            color:var(--muted);
            font-size:.92rem;
        }
        .section{
            padding:80px 0 0;
        }
        .section-head{
            display:flex;
            justify-content:space-between;
            align-items:end;
            gap:18px;
            margin-bottom:22px;
        }
        .section-title{
            margin:0;
            font-size:clamp(1.5rem, 2.3vw, 2.2rem);
            line-height:1.15;
            color:var(--brand-3);
            letter-spacing:-.02em;
        }
        .section-subtitle{
            margin:10px 0 0;
            color:var(--muted);
            max-width:62ch;
        }
        .section-chip{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 12px;
            border-radius:999px;
            background:rgba(15,91,79,.08);
            color:var(--brand);
            font-weight:800;
            font-size:.9rem;
            white-space:nowrap;
        }
        .section-muted{
            margin-top:18px;
            padding:26px 0 0;
        }
        .showcase-grid{
            display:grid;
            grid-template-columns:1.35fr .82fr .82fr;
            gap:18px;
        }
        .showcase-card{
            display:flex;
            flex-direction:column;
            min-height:100%;
            overflow:hidden;
            border-radius:26px;
            background:var(--surface);
            border:1px solid rgba(20, 49, 45, .10);
            box-shadow:var(--shadow);
            transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
        }
        .showcase-card:hover{
            transform:translateY(-3px);
            box-shadow:0 18px 34px rgba(19,43,38,.12);
            border-color:rgba(15,91,79,.18);
        }
        .showcase-card img{
            width:100%;
            aspect-ratio:16 / 10;
            object-fit:cover;
        }
        .showcase-card--feature{
            grid-row:span 2;
        }
        .showcase-card--feature img{
            aspect-ratio:16 / 11;
        }
        .showcase-body{
            padding:20px;
            display:flex;
            flex-direction:column;
            gap:10px;
            flex:1;
        }
        .badge{
            display:inline-flex;
            align-items:center;
            gap:7px;
            width:max-content;
            padding:7px 11px;
            border-radius:999px;
            background:rgba(15,91,79,.08);
            color:var(--brand);
            font-size:.8rem;
            font-weight:800;
            letter-spacing:.03em;
        }
        .badge.alt{
            background:rgba(197,138,44,.10);
            color:#995e08;
        }
        .showcase-body h3{
            margin:0;
            font-size:1.18rem;
            line-height:1.35;
            color:var(--brand-3);
        }
        .showcase-body p{
            margin:0;
            color:var(--muted);
        }
        .showcase-foot{
            margin-top:auto;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:14px;
            padding-top:10px;
            color:var(--brand);
            font-weight:800;
        }
        .showcase-foot span{
            display:inline-flex;
            align-items:center;
            gap:7px;
        }
        .showcase-foot span::after{
            content:"→";
            transition:transform .18s ease;
        }
        .showcase-card:hover .showcase-foot span::after{transform:translateX(4px)}
        .latest-wrap{
            display:grid;
            grid-template-columns:minmax(0, 1fr) 320px;
            gap:22px;
            align-items:start;
        }
        .news-list{
            display:grid;
            grid-template-columns:repeat(2, minmax(0, 1fr));
            gap:16px;
        }
        .news-card{
            position:relative;
            display:flex;
            flex-direction:column;
            gap:14px;
            padding:20px;
            min-height:220px;
            border-radius:24px;
            background:var(--surface);
            border:1px solid rgba(20, 49, 45, .10);
            box-shadow:var(--shadow);
            transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
            overflow:hidden;
        }
        .news-card::before{
            content:"";
            position:absolute;
            inset:auto auto -62px -36px;
            width:140px;
            height:140px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(15,91,79,.09) 0%, rgba(15,91,79,0) 68%);
            pointer-events:none;
        }
        .news-card:hover{
            transform:translateY(-3px);
            box-shadow:0 18px 34px rgba(19,43,38,.11);
            border-color:rgba(15,91,79,.18);
        }
        .news-card--lead{
            grid-column:1 / -1;
            display:grid;
            grid-template-columns:220px minmax(0, 1fr);
            gap:18px;
            align-items:center;
            min-height:240px;
        }
        .news-cover{
            width:100%;
            height:100%;
            min-height:180px;
            border-radius:20px;
            object-fit:cover;
            background:linear-gradient(180deg, rgba(15,91,79,.08), rgba(15,91,79,.02));
            border:1px solid rgba(20, 49, 45, .08);
        }
        .news-meta{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            align-items:center;
            color:var(--muted);
            font-size:.85rem;
            font-weight:700;
        }
        .news-meta .meta-tag{
            display:inline-flex;
            align-items:center;
            gap:7px;
            padding:6px 10px;
            border-radius:999px;
            background:rgba(15,91,79,.08);
            color:var(--brand);
        }
        .news-card h3{
            margin:0;
            font-size:1.1rem;
            line-height:1.42;
            color:var(--brand-3);
        }
        .news-card p{
            margin:0;
            color:var(--muted);
        }
        .news-link{
            margin-top:auto;
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:var(--brand);
            font-weight:800;
        }
        .news-link::after{
            content:"→";
            transition:transform .18s ease;
        }
        .news-card:hover .news-link::after{transform:translateX(4px)}
        .news-aside{
            position:sticky;
            top:96px;
            display:grid;
            gap:16px;
        }
        .aside-card{
            padding:20px;
            border-radius:24px;
            background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(244,237,226,.92));
            border:1px solid rgba(20, 49, 45, .10);
            box-shadow:var(--shadow);
        }
        .aside-card img{
            width:100%;
            aspect-ratio:4 / 3;
            object-fit:cover;
            border-radius:18px;
            margin-bottom:14px;
        }
        .aside-card h3{
            margin:0 0 10px;
            font-size:1.08rem;
            color:var(--brand-3);
        }
        .aside-card p{
            margin:0;
            color:var(--muted);
        }
        .check-list{
            margin:14px 0 0;
            padding:0;
            list-style:none;
            display:grid;
            gap:10px;
        }
        .check-list li{
            display:flex;
            gap:10px;
            color:var(--text);
        }
        .check-list li::before{
            content:"";
            width:10px;
            height:10px;
            margin-top:.5em;
            border-radius:50%;
            background:linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
            flex:0 0 auto;
            box-shadow:0 0 0 4px rgba(15,91,79,.08);
        }
        .guide-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:18px;
        }
        .guide-card{
            padding:22px;
            border-radius:24px;
            background:var(--surface);
            border:1px solid rgba(20, 49, 45, .10);
            box-shadow:var(--shadow);
            transition:transform .2s ease, box-shadow .2s ease;
        }
        .guide-card:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(19,43,38,.11)}
        .guide-number{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            width:36px;
            height:36px;
            border-radius:12px;
            background:rgba(15,91,79,.10);
            color:var(--brand);
            font-weight:900;
            margin-bottom:14px;
        }
        .guide-card h3{
            margin:0 0 10px;
            font-size:1.05rem;
            color:var(--brand-3);
        }
        .guide-card p{
            margin:0;
            color:var(--muted);
        }
        .faq-wrap{
            display:grid;
            gap:14px;
        }
        .faq-item{
            border-radius:22px;
            background:var(--surface);
            border:1px solid rgba(20, 49, 45, .10);
            box-shadow:var(--shadow);
            overflow:hidden;
        }
        .faq-item summary{
            list-style:none;
            cursor:pointer;
            padding:20px 22px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            font-weight:800;
            color:var(--brand-3);
        }
        .faq-item summary::-webkit-details-marker{display:none}
        .faq-item summary::after{
            content:"+";
            width:32px;
            height:32px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            border-radius:10px;
            background:rgba(15,91,79,.08);
            color:var(--brand);
            flex:0 0 auto;
            transition:transform .18s ease, background .18s ease;
        }
        .faq-item[open] summary::after{
            content:"—";
            background:rgba(197,138,44,.12);
            color:#995e08;
        }
        .faq-content{
            padding:0 22px 20px;
            color:var(--muted);
        }
        .cta-block{
            margin-top:22px;
            padding:28px;
            border-radius:28px;
            background:
                linear-gradient(135deg, rgba(15,91,79,.95), rgba(10,68,59,.96)),
                url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
            color:#f4f7f5;
            border:1px solid rgba(255,255,255,.08);
            box-shadow:0 24px 50px rgba(10, 40, 36, .18);
            position:relative;
            overflow:hidden;
        }
        .cta-block::before{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,0));
            pointer-events:none;
        }
        .cta-grid{
            display:grid;
            grid-template-columns:minmax(0, 1fr) 420px;
            gap:22px;
            align-items:start;
            position:relative;
            z-index:1;
        }
        .cta-copy h2{
            margin:0 0 12px;
            font-size:clamp(1.6rem, 2.4vw, 2.35rem);
            line-height:1.15;
            letter-spacing:-.02em;
        }
        .cta-copy p{
            margin:0;
            color:rgba(255,255,255,.82);
            max-width:56ch;
        }
        .cta-points{
            margin:18px 0 0;
            padding:0;
            list-style:none;
            display:grid;
            gap:10px;
        }
        .cta-points li{
            display:flex;
            gap:10px;
            color:rgba(255,255,255,.90);
        }
        .cta-points li::before{
            content:"";
            width:10px;
            height:10px;
            margin-top:.5em;
            border-radius:50%;
            background:linear-gradient(135deg, var(--accent-2) 0%, #ffdca0 100%);
            box-shadow:0 0 0 4px rgba(255,255,255,.10);
            flex:0 0 auto;
        }
        .feedback-card{
            background:rgba(255,255,255,.96);
            color:var(--text);
            padding:22px;
            border-radius:24px;
            box-shadow:0 18px 30px rgba(10, 40, 36, .16);
            border:1px solid rgba(255,255,255,.4);
        }
        .feedback-card h3{
            margin:0 0 12px;
            color:var(--brand-3);
            font-size:1.08rem;
        }
        .form-grid{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:12px;
        }
        .form-field{
            display:grid;
            gap:8px;
        }
        .form-field.full{grid-column:1 / -1}
        label{
            font-size:.9rem;
            font-weight:800;
            color:var(--brand-3);
        }
        input, textarea{
            width:100%;
            border:1px solid rgba(20, 49, 45, .14);
            background:#fff;
            color:var(--text);
            border-radius:16px;
            padding:13px 14px;
            transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
            box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
        }
        input:focus, textarea:focus{
            border-color:rgba(15,91,79,.34);
            box-shadow:0 0 0 4px rgba(15,91,79,.08);
            outline:none;
        }
        textarea{
            min-height:124px;
            resize:vertical;
        }
        .form-hint{
            font-size:.86rem;
            color:var(--muted);
            margin-top:2px;
        }
        .form-actions{
            margin-top:14px;
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            align-items:center;
        }
        .btn-light{
            background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
            color:#fff;
            box-shadow:0 12px 24px rgba(15,91,79,.16);
        }
        .btn-light:hover{box-shadow:0 16px 26px rgba(15,91,79,.20)}
        .btn-ghost{
            background:transparent;
            color:var(--brand);
            border-color:rgba(15,91,79,.18);
        }
        .btn-ghost:hover{
            background:rgba(15,91,79,.06);
        }
        .site-footer{
            margin-top:84px;
            padding:26px 0 40px;
            border-top:1px solid rgba(20, 49, 45, .10);
            background:linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.16));
        }
        .footer-grid{
            display:grid;
            grid-template-columns:minmax(0, 1.2fr) repeat(2, minmax(0, .7fr));
            gap:24px;
            align-items:start;
        }
        .footer-brand{
            display:grid;
            gap:14px;
        }
        .footer-brand p{
            margin:0;
            color:var(--muted);
            max-width:36ch;
        }
        .footer-title{
            margin:0 0 12px;
            font-size:1rem;
            color:var(--brand-3);
        }
        .footer-links{
            list-style:none;
            padding:0;
            margin:0;
            display:grid;
            gap:10px;
        }
        .footer-links a{
            color:var(--muted);
            transition:color .18s ease, transform .18s ease;
            display:inline-flex;
            width:max-content;
        }
        .footer-links a:hover{
            color:var(--brand);
            transform:translateX(2px);
        }
        .footer-meta{
            margin-top:22px;
            padding-top:18px;
            border-top:1px solid rgba(20, 49, 45, .08);
            display:flex;
            flex-wrap:wrap;
            gap:10px 18px;
            justify-content:space-between;
            color:var(--muted);
            font-size:.92rem;
        }
        .footer-meta a{color:var(--brand)}
        .to-top{
            position:fixed;
            right:18px;
            bottom:18px;
            width:46px;
            height:46px;
            border-radius:16px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            background:rgba(255,255,255,.9);
            color:var(--brand);
            border:1px solid rgba(20, 49, 45, .12);
            box-shadow:0 12px 24px rgba(19,43,38,.10);
            transition:transform .18s ease, box-shadow .18s ease;
            z-index:1100;
        }
        .to-top:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(19,43,38,.14)}
        .empty-state{
            padding:28px;
            border-radius:24px;
            background:var(--surface);
            border:1px dashed rgba(20, 49, 45, .18);
            color:var(--muted);
            text-align:center;
            box-shadow:var(--shadow);
            min-height:220px;
            display:grid;
            place-items:center;
        }
        .empty-state strong{
            display:block;
            margin-bottom:8px;
            color:var(--brand-3);
            font-size:1.04rem;
        }
        @media (max-width: 1080px){
            .hero-panel,
            .latest-wrap,
            .cta-grid,
            .footer-grid{
                grid-template-columns:1fr;
            }
            .news-card--lead{
                grid-template-columns:1fr;
            }
            .news-aside{position:static}
            .showcase-grid{
                grid-template-columns:1fr 1fr;
            }
            .showcase-card--feature{grid-column:1 / -1;grid-row:auto}
            .guide-grid,
            .signal-grid{
                grid-template-columns:1fr 1fr;
            }
            .signal-card:nth-child(1){grid-column:1 / -1}
        }
        @media (max-width: 860px){
            .nav-toggle{display:inline-flex}
            .nav-shell{
                position:fixed;
                left:16px;
                right:16px;
                top:calc(var(--header-h) + 10px);
                display:none;
                padding:14px;
                border-radius:24px;
                background:rgba(255,255,255,.95);
                border:1px solid rgba(20, 49, 45, .12);
                box-shadow:0 20px 40px rgba(19,43,38,.14);
                flex-direction:column;
                align-items:stretch;
                gap:14px;
            }
            .nav-shell.is-open{display:flex}
            .site-nav{
                width:100%;
                flex-direction:column;
                align-items:stretch;
                border-radius:20px;
                padding:10px;
            }
            .nav-link{
                justify-content:center;
            }
            .header-cta{
                width:100%;
            }
            .section{padding-top:68px}
            .hero-panel{padding:22px}
            .hero-visual{min-height:360px}
            .signal-grid,
            .guide-grid,
            .showcase-grid,
            .news-list{
                grid-template-columns:1fr;
            }
            .news-card--lead{
                grid-column:auto;
            }
            .news-card{
                min-height:auto;
            }
            .form-grid{
                grid-template-columns:1fr;
            }
        }
        @media (max-width: 560px){
            .container{width:min(var(--container), calc(100% - 22px))}
            .header-inner{height:72px}
            .brand-mark{width:36px;height:36px;border-radius:12px}
            .brand-text{font-size:.98rem}
            .brand-sub{font-size:.74rem}
            .hero{padding-top:24px}
            .hero-panel,
            .cta-block{
                border-radius:22px;
                padding:18px;
            }
            .hero-visual{
                min-height:290px;
                border-radius:20px;
            }
            .hero-visual-card{
                left:12px;
                right:12px;
                bottom:12px;
                padding:14px;
                border-radius:18px;
            }
            .hero h1{margin-top:14px}
            .hero-lead{font-size:.98rem}
            .btn,
            .header-cta{
                width:100%;
            }
            .hero-actions{
                flex-direction:column;
            }
            .section-head{
                flex-direction:column;
                align-items:flex-start;
            }
            .faq-item summary,
            .faq-content{
                padding-left:16px;
                padding-right:16px;
            }
            .footer-meta{
                flex-direction:column;
                align-items:flex-start;
            }
            .to-top{
                right:14px;
                bottom:14px;
            }
        }

/* roulang page: article */
:root{
            --bg:#f6f1e8;
            --bg-2:#fbf8f2;
            --surface:#fffdf8;
            --surface-2:#f0e7d7;
            --surface-3:#e8dfcf;
            --brand:#0f5b4f;
            --brand-2:#16796d;
            --brand-3:#0a443b;
            --accent:#c58a2c;
            --accent-2:#e6b15c;
            --rose:#c96c5f;
            --violet:#7d5ba6;
            --text:#17322e;
            --muted:#667a76;
            --line:rgba(20, 49, 45, .12);
            --line-strong:rgba(20, 49, 45, .18);
            --shadow:0 18px 40px rgba(19, 43, 38, .08);
            --shadow-2:0 10px 24px rgba(19, 43, 38, .12);
            --radius:18px;
            --radius-lg:28px;
            --container:1220px;
            --gap:24px;
            --gap-lg:32px;
            --header-h:78px;
        }
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--text);
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC","Hiragino Sans GB",Arial,sans-serif;
            line-height:1.75;
            background:
                radial-gradient(circle at top left, rgba(15,91,79,.07), transparent 28%),
                radial-gradient(circle at top right, rgba(197,138,44,.08), transparent 24%),
                linear-gradient(180deg, #f9f5ee 0%, var(--bg) 38%, #f7f2e9 100%);
            min-height:100vh;
            text-rendering:optimizeLegibility;
            -webkit-font-smoothing:antialiased;
        }
        *{box-sizing:border-box}
        a{color:inherit;text-decoration:none}
        a:hover{text-decoration:none}
        img{max-width:100%;display:block}
        button,input,textarea,select{font:inherit}
        button{cursor:pointer}
        ::selection{background:rgba(15,91,79,.16);color:var(--text)}
        .container{
            width:min(var(--container), calc(100% - 32px));
            margin:0 auto;
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:1200;
            background:rgba(249,244,235,.82);
            backdrop-filter:saturate(140%) blur(14px);
            border-bottom:1px solid rgba(18, 41, 37, .08);
        }
        .header-inner{
            height:var(--header-h);
            display:flex;
            align-items:center;
            gap:16px;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:12px;
            min-width:max-content;
            font-weight:800;
            letter-spacing:.02em;
            color:var(--brand-3);
        }
        .brand-mark{
            width:40px;
            height:40px;
            border-radius:14px;
            background:
                linear-gradient(145deg, var(--brand) 0%, var(--brand-2) 50%, #1ea08b 100%);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 10px 18px rgba(15,91,79,.18);
            position:relative;
            overflow:hidden;
        }
        .brand-mark::before,
        .brand-mark::after{
            content:"";
            position:absolute;
            border-radius:999px;
            background:rgba(255,255,255,.9);
        }
        .brand-mark::before{
            width:18px;height:18px;
            left:11px;top:11px;
            opacity:.92;
        }
        .brand-mark::after{
            width:8px;height:8px;
            right:9px;bottom:9px;
            background:rgba(197,138,44,.96);
        }
        .brand-text{
            font-size:1.04rem;
            line-height:1.1;
        }
        .brand-sub{
            display:block;
            margin-top:3px;
            font-size:.78rem;
            font-weight:600;
            color:var(--muted);
        }
        .header-spacer{flex:1}
        .nav-toggle{
            display:none;
            align-items:center;
            justify-content:center;
            width:46px;
            height:46px;
            border-radius:14px;
            border:1px solid var(--line);
            background:var(--surface);
            color:var(--brand);
            box-shadow:0 6px 16px rgba(19,43,38,.05);
            transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
        }
        .nav-toggle:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(19,43,38,.09)}
        .nav-toggle:active{transform:translateY(0)}
        .nav-toggle:focus-visible,
        .header-cta:focus-visible,
        .nav-link:focus-visible,
        .action-btn:focus-visible,
        .card-link:focus-visible,
        .faq-item summary:focus-visible,
        input:focus-visible,
        textarea:focus-visible,
        select:focus-visible,
        .brand:focus-visible{
            outline:3px solid rgba(15,91,79,.22);
            outline-offset:2px;
        }
        .nav-shell{
            display:flex;
            align-items:center;
            gap:14px;
        }
        .site-nav{
            display:flex;
            align-items:center;
            gap:8px;
            padding:8px;
            border-radius:999px;
            background:rgba(255,255,255,.48);
            border:1px solid rgba(20, 49, 45, .08);
        }
        .nav-link{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:10px 14px;
            border-radius:999px;
            color:var(--muted);
            font-weight:700;
            transition:background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
        }
        .nav-link:hover{
            color:var(--brand);
            background:rgba(15,91,79,.08);
            transform:translateY(-1px);
        }
        .nav-link.is-active{
            color:#fff;
            background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
            box-shadow:0 8px 18px rgba(15,91,79,.18);
        }
        .header-cta,
        .action-btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            padding:12px 18px;
            border-radius:999px;
            border:1px solid transparent;
            font-weight:800;
            white-space:nowrap;
            transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease, filter .18s ease;
        }
        .header-cta{
            background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
            color:#fff;
            box-shadow:0 10px 24px rgba(197,138,44,.24);
        }
        .header-cta:hover{transform:translateY(-1px);box-shadow:0 14px 26px rgba(197,138,44,.28);filter:saturate(104%)}
        .header-cta:active{transform:translateY(0)}
        main{display:block}
        .section{
            padding:44px 0 8px;
            scroll-margin-top:calc(var(--header-h) + 18px);
        }
        .hero{
            position:relative;
            overflow:hidden;
            padding:28px 0 14px;
        }
        .hero::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(180deg, rgba(246,241,232,.18), rgba(246,241,232,.8)),
                url('/assets/images/backpic/back-1.jpg') center/cover no-repeat;
            opacity:.18;
            pointer-events:none;
        }
        .hero::after{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at 12% 14%, rgba(15,91,79,.12), transparent 24%),
                radial-gradient(circle at 88% 22%, rgba(197,138,44,.10), transparent 22%);
            pointer-events:none;
        }
        .hero-inner,
        .section-inner{
            position:relative;
            z-index:1;
        }
        .hero-grid{
            display:grid;
            grid-template-columns:1.12fr .88fr;
            gap:26px;
            align-items:stretch;
        }
        .hero-copy{
            padding:28px 0 10px;
        }
        .eyebrow-row{
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            gap:10px;
            margin-bottom:14px;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:7px 12px;
            border-radius:999px;
            background:rgba(15,91,79,.10);
            color:var(--brand-3);
            font-size:.86rem;
            font-weight:800;
            letter-spacing:.02em;
        }
        .eyebrow.alt{
            background:rgba(197,138,44,.12);
            color:#8a5b16;
        }
        .breadcrumb{
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            gap:8px;
            color:var(--muted);
            font-size:.92rem;
        }
        .breadcrumb a{
            color:var(--brand);
            font-weight:700;
        }
        .breadcrumb .sep{
            color:#a1aba8;
        }
        .page-title{
            margin:10px 0 16px;
            font-size:clamp(2rem, 4vw, 3.8rem);
            line-height:1.16;
            letter-spacing:-.02em;
            font-weight:900;
            color:var(--brand-3);
        }
        .hero-lead{
            margin:0;
            max-width:64ch;
            font-size:1.05rem;
            line-height:1.85;
            color:var(--muted);
        }
        .meta-row{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin:20px 0 22px;
        }
        .meta-chip,
        .tag{
            display:inline-flex;
            align-items:center;
            gap:8px;
            min-height:36px;
            padding:8px 12px;
            border-radius:999px;
            background:rgba(255,255,255,.72);
            border:1px solid var(--line);
            color:var(--text);
            font-size:.88rem;
            font-weight:700;
            box-shadow:0 8px 18px rgba(19,43,38,.04);
        }
        .meta-chip strong,
        .tag strong{font-weight:800}
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
        }
        .action-btn.primary{
            background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
            color:#fff;
            box-shadow:0 12px 26px rgba(15,91,79,.22);
        }
        .action-btn.primary:hover{transform:translateY(-1px);box-shadow:0 16px 30px rgba(15,91,79,.28)}
        .action-btn.secondary{
            background:rgba(255,255,255,.74);
            color:var(--brand-3);
            border-color:var(--line);
            box-shadow:0 10px 24px rgba(19,43,38,.05);
        }
        .action-btn.secondary:hover{
            transform:translateY(-1px);
            border-color:rgba(15,91,79,.18);
            background:rgba(255,255,255,.94);
            box-shadow:0 16px 26px rgba(19,43,38,.08);
        }
        .hero-visual{
            display:flex;
            align-items:stretch;
            justify-content:flex-end;
            padding:8px 0 0;
        }
        .visual-frame{
            position:relative;
            width:100%;
            min-height:100%;
            border-radius:var(--radius-lg);
            overflow:hidden;
            box-shadow:var(--shadow);
            border:1px solid rgba(20,49,45,.10);
            background:linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.58));
        }
        .visual-frame img{
            width:100%;
            height:100%;
            min-height:420px;
            object-fit:cover;
            object-position:center;
            filter:saturate(1.02) contrast(1.02);
        }
        .visual-overlay{
            position:absolute;
            inset:auto 18px 18px 18px;
            display:grid;
            gap:10px;
            padding:16px 16px 14px;
            border-radius:22px;
            background:linear-gradient(180deg, rgba(10,68,59,.22), rgba(10,68,59,.84));
            color:#fff;
            box-shadow:0 18px 34px rgba(10,68,59,.26);
        }
        .visual-overlay .overlay-title{
            margin:0;
            font-size:1.05rem;
            line-height:1.45;
            font-weight:800;
        }
        .visual-overlay .overlay-desc{
            margin:0;
            color:rgba(255,255,255,.88);
            font-size:.92rem;
            line-height:1.7;
        }
        .trust-strip{
            margin-top:22px;
            display:grid;
            grid-template-columns:1.28fr .92fr .92fr .92fr;
            gap:14px;
        }
        .trust-card{
            padding:18px 18px 17px;
            border-radius:22px;
            background:rgba(255,255,255,.72);
            border:1px solid rgba(20,49,45,.10);
            box-shadow:0 12px 22px rgba(19,43,38,.05);
            min-height:100%;
        }
        .trust-card.emphasis{
            background:linear-gradient(145deg, rgba(15,91,79,.12), rgba(255,255,255,.76));
            border-color:rgba(15,91,79,.14);
        }
        .trust-card .kicker{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:6px 10px;
            border-radius:999px;
            background:rgba(15,91,79,.10);
            color:var(--brand);
            font-size:.8rem;
            font-weight:800;
            margin-bottom:12px;
        }
        .trust-card h3{
            margin:0 0 6px;
            font-size:1.02rem;
            line-height:1.4;
            font-weight:800;
            color:var(--brand-3);
        }
        .trust-card p{
            margin:0;
            color:var(--muted);
            font-size:.92rem;
            line-height:1.72;
        }
        .trust-card.large{
            grid-row:span 2;
            min-height:100%;
        }
        .section-head{
            display:flex;
            justify-content:space-between;
            align-items:flex-end;
            gap:18px;
            margin-bottom:18px;
        }
        .section-title{
            margin:0;
            font-size:clamp(1.55rem, 2.2vw, 2.2rem);
            line-height:1.25;
            letter-spacing:-.01em;
            font-weight:900;
            color:var(--brand-3);
        }
        .section-desc{
            margin:0;
            max-width:64ch;
            color:var(--muted);
            line-height:1.8;
        }
        .section-badge{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:7px 12px;
            border-radius:999px;
            background:rgba(197,138,44,.12);
            color:#8a5b16;
            font-size:.84rem;
            font-weight:800;
            margin-bottom:12px;
        }
        .article-layout{
            display:grid;
            grid-template-columns:minmax(0, 1.55fr) minmax(290px, .85fr);
            gap:24px;
            align-items:start;
        }
        .paper-card,
        .side-card,
        .update-card,
        .faq-card,
        .feedback-card,
        .cta-panel,
        .empty-card{
            background:var(--surface);
            border:1px solid rgba(20,49,45,.10);
            border-radius:var(--radius-lg);
            box-shadow:var(--shadow);
        }
        .paper-card{
            overflow:hidden;
        }
        .paper-card-inner{
            padding:28px;
        }
        .article-topline{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-bottom:16px;
        }
        .article-topline .tag{
            background:rgba(15,91,79,.08);
            color:var(--brand-3);
        }
        .article-summary{
            padding:0 0 16px;
            border-bottom:1px solid rgba(20,49,45,.10);
            margin-bottom:22px;
        }
        .article-summary p{
            margin:0;
            color:var(--muted);
            line-height:1.9;
        }
        .article-content{
            font-size:1.02rem;
            line-height:1.95;
            color:var(--text);
            word-break:break-word;
        }
        .article-content h2,
        .article-content h3,
        .article-content h4{
            color:var(--brand-3);
            line-height:1.35;
            margin:1.4em 0 .7em;
            font-weight:900;
        }
        .article-content h2{font-size:1.55rem}
        .article-content h3{font-size:1.25rem}
        .article-content h4{font-size:1.08rem}
        .article-content p{
            margin:0 0 1.05em;
        }
        .article-content a{
            color:var(--brand);
            text-decoration:underline;
            text-decoration-color:rgba(15,91,79,.24);
            text-underline-offset:3px;
        }
        .article-content a:hover{color:var(--brand-3);text-decoration-color:rgba(15,91,79,.5)}
        .article-content strong{color:var(--brand-3)}
        .article-content em{color:#7f4f12}
        .article-content ul,
        .article-content ol{
            padding-left:1.25em;
            margin:0 0 1.15em;
        }
        .article-content li{
            margin:0 0 .52em;
            padding-left:.15em;
        }
        .article-content blockquote{
            margin:1.2em 0;
            padding:16px 18px;
            border-left:4px solid var(--brand);
            background:rgba(15,91,79,.06);
            border-radius:0 18px 18px 0;
            color:var(--brand-3);
        }
        .article-content hr{
            border:0;
            height:1px;
            margin:1.6em 0;
            background:linear-gradient(90deg, rgba(20,49,45,.08), rgba(20,49,45,.18), rgba(20,49,45,.08));
        }
        .article-content code{
            padding:.14em .42em;
            border-radius:8px;
            background:rgba(15,91,79,.08);
            color:var(--brand-3);
            font-size:.94em;
        }
        .article-content pre{
            overflow:auto;
            padding:18px;
            border-radius:18px;
            background:#103a35;
            color:#ecfff9;
            box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
        }
        .article-content pre code{
            background:none;
            padding:0;
            color:inherit;
        }
        .article-content img{
            margin:1.1em 0;
            border-radius:18px;
            box-shadow:0 16px 30px rgba(19,43,38,.08);
            border:1px solid rgba(20,49,45,.08);
        }
        .article-content figure{
            margin:1.25em 0;
        }
        .article-content figcaption{
            margin-top:.5em;
            color:var(--muted);
            font-size:.92rem;
            text-align:center;
        }
        .article-content table{
            width:100%;
            border-collapse:collapse;
            margin:1.2em 0;
            font-size:.96rem;
            background:rgba(255,255,255,.76);
            overflow:hidden;
            border-radius:16px;
        }
        .article-content th,
        .article-content td{
            border:1px solid rgba(20,49,45,.12);
            padding:12px 14px;
            text-align:left;
            vertical-align:top;
        }
        .article-content th{
            background:rgba(15,91,79,.08);
            color:var(--brand-3);
            font-weight:800;
        }
        .content-empty{
            display:grid;
            place-items:center;
            min-height:320px;
            padding:28px;
            text-align:center;
        }
        .content-empty .icon{
            width:64px;
            height:64px;
            border-radius:22px;
            background:linear-gradient(145deg, rgba(15,91,79,.14), rgba(197,138,44,.16));
            display:grid;
            place-items:center;
            color:var(--brand-3);
            font-size:1.45rem;
            margin-bottom:16px;
            box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
        }
        .content-empty h2{
            margin:0 0 10px;
            font-size:1.3rem;
            font-weight:900;
            color:var(--brand-3);
        }
        .content-empty p{
            margin:0 0 18px;
            color:var(--muted);
        }
        .side-stack{
            display:grid;
            gap:16px;
            position:sticky;
            top:calc(var(--header-h) + 18px);
        }
        .side-card{
            padding:18px;
        }
        .side-card h3{
            margin:0 0 10px;
            font-size:1.05rem;
            font-weight:900;
            color:var(--brand-3);
        }
        .side-card p{
            margin:0;
            color:var(--muted);
            line-height:1.76;
            font-size:.95rem;
        }
        .side-figure{
            overflow:hidden;
            border-radius:20px;
            border:1px solid rgba(20,49,45,.10);
            box-shadow:0 12px 24px rgba(19,43,38,.06);
        }
        .side-figure img{
            width:100%;
            height:220px;
            object-fit:cover;
        }
        .side-links{
            display:grid;
            gap:10px;
            margin-top:14px;
        }
        .side-link{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:12px;
            padding:12px 14px;
            border-radius:16px;
            background:rgba(255,255,255,.78);
            border:1px solid rgba(20,49,45,.10);
            transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
        }
        .side-link:hover{
            transform:translateY(-1px);
            border-color:rgba(15,91,79,.18);
            box-shadow:0 12px 20px rgba(19,43,38,.06);
        }
        .side-link span{
            color:var(--muted);
            font-size:.88rem;
        }
        .side-link strong{
            display:block;
            color:var(--text);
            font-size:.97rem;
            margin-bottom:3px;
        }
        .keyword-cloud{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
        }
        .keyword-cloud .tag{
            background:rgba(15,91,79,.08);
            color:var(--brand-3);
        }
        .latest-layout{
            display:grid;
            grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);
            gap:20px;
            align-items:stretch;
        }
        .update-card{
            overflow:hidden;
        }
        .update-card.featured{
            display:grid;
            grid-template-columns:1.04fr .96fr;
            min-height:100%;
        }
        .update-media{
            min-height:100%;
            background:#e9e1d2;
        }
        .update-media img{
            width:100%;
            height:100%;
            min-height:320px;
            object-fit:cover;
        }
        .update-copy{
            padding:26px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            gap:18px;
        }
        .update-copy h3{
            margin:0;
            font-size:1.4rem;
            line-height:1.4;
            font-weight:900;
            color:var(--brand-3);
        }
        .update-copy p{
            margin:0;
            color:var(--muted);
            line-height:1.82;
        }
        .update-meta{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
        }
        .update-list{
            display:grid;
            gap:14px;
        }
        .update-item{
            padding:18px;
            display:grid;
            gap:12px;
        }
        .update-item h3{
            margin:0;
            font-size:1.04rem;
            font-weight:900;
            line-height:1.48;
            color:var(--brand-3);
        }
        .update-item p{
            margin:0;
            color:var(--muted);
            line-height:1.75;
            font-size:.95rem;
        }
        .update-item .item-head{
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            justify-content:space-between;
            gap:10px;
        }
        .item-time{
            color:var(--muted);
            font-size:.9rem;
            font-weight:700;
        }
        .card-link{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            padding:10px 14px;
            border-radius:999px;
            background:rgba(15,91,79,.09);
            color:var(--brand-3);
            font-weight:800;
            width:max-content;
            transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
        }
        .card-link:hover{
            transform:translateY(-1px);
            background:rgba(15,91,79,.14);
            box-shadow:0 10px 20px rgba(19,43,38,.07);
        }
        .card-link.alt{
            background:rgba(197,138,44,.12);
        }
        .faq-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0, 1fr));
            gap:16px;
        }
        .faq-item{
            border-radius:22px;
            background:var(--surface);
            border:1px solid rgba(20,49,45,.10);
            box-shadow:var(--shadow);
            overflow:hidden;
        }
        .faq-item summary{
            list-style:none;
            cursor:pointer;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:14px;
            padding:18px 20px;
            font-weight:800;
            color:var(--brand-3);
        }
        .faq-item summary::-webkit-details-marker{display:none}
        .faq-item summary .sum-title{
            display:flex;
            align-items:center;
            gap:12px;
        }
        .faq-item summary .sum-dot{
            width:12px;
            height:12px;
            border-radius:999px;
            background:linear-gradient(135deg, var(--brand), var(--accent));
            box-shadow:0 0 0 4px rgba(15,91,79,.08);
            flex:none;
        }
        .faq-item summary .sum-arrow{
            width:34px;
            height:34px;
            border-radius:999px;
            display:grid;
            place-items:center;
            background:rgba(15,91,79,.08);
            color:var(--brand);
            font-size:1rem;
            flex:none;
            transition:transform .18s ease, background .18s ease;
        }
        .faq-item[open] summary .sum-arrow{
            transform:rotate(180deg);
            background:rgba(15,91,79,.12);
        }
        .faq-body{
            padding:0 20px 18px 20px;
            color:var(--muted);
            line-height:1.8;
        }
        .faq-body p{
            margin:0;
        }
        .feedback-grid{
            display:grid;
            grid-template-columns:.96fr 1.04fr;
            gap:20px;
            align-items:stretch;
        }
        .feedback-card{
            padding:24px;
        }
        .feedback-card h3{
            margin:0 0 12px;
            font-size:1.3rem;
            line-height:1.35;
            font-weight:900;
            color:var(--brand-3);
        }
        .feedback-card p{
            margin:0 0 16px;
            color:var(--muted);
            line-height:1.85;
        }
        .feedback-points{
            display:grid;
            gap:10px;
            margin-top:14px;
        }
        .feedback-point{
            display:flex;
            gap:10px;
            align-items:flex-start;
            padding:12px 14px;
            border-radius:16px;
            background:rgba(255,255,255,.72);
            border:1px solid rgba(20,49,45,.10);
        }
        .feedback-point i{
            width:24px;
            height:24px;
            border-radius:8px;
            background:rgba(15,91,79,.10);
            color:var(--brand);
            display:grid;
            place-items:center;
            font-style:normal;
            flex:none;
            margin-top:2px;
            font-weight:900;
        }
        .feedback-point strong{
            display:block;
            color:var(--brand-3);
            margin-bottom:2px;
        }
        .feedback-point span{
            color:var(--muted);
            font-size:.93rem;
            line-height:1.7;
        }
        .feedback-form{
            padding:24px;
            display:grid;
            gap:14px;
        }
        .field-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0, 1fr));
            gap:14px;
        }
        .field{
            display:grid;
            gap:8px;
        }
        .field label{
            font-weight:800;
            color:var(--brand-3);
            font-size:.94rem;
        }
        .field input,
        .field textarea,
        .field select{
            width:100%;
            border-radius:16px;
            border:1px solid rgba(20,49,45,.14);
            background:rgba(255,255,255,.86);
            color:var(--text);
            padding:13px 14px;
            outline:none;
            transition:border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
        }
        .field textarea{
            min-height:132px;
            resize:vertical;
        }
        .field input:focus,
        .field textarea:focus,
        .field select:focus{
            border-color:rgba(15,91,79,.28);
            box-shadow:0 0 0 4px rgba(15,91,79,.10);
            background:#fff;
        }
        .field-help{
            color:var(--muted);
            font-size:.9rem;
            line-height:1.6;
        }
        .form-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:4px;
        }
        .action-btn.small{
            padding:11px 16px;
            font-size:.95rem;
        }
        .action-btn.ghost{
            background:rgba(255,255,255,.82);
            border-color:rgba(20,49,45,.12);
            color:var(--brand-3);
        }
        .action-btn.ghost:hover{
            transform:translateY(-1px);
            border-color:rgba(15,91,79,.18);
            box-shadow:0 12px 24px rgba(19,43,38,.06);
        }
        .cta-panel{
            margin-top:26px;
            padding:26px;
            background:
                linear-gradient(135deg, rgba(15,91,79,.97) 0%, rgba(10,68,59,.95) 100%);
            color:#fff;
            overflow:hidden;
            position:relative;
        }
        .cta-panel::before{
            content:"";
            position:absolute;
            inset:auto -14% -38% auto;
            width:320px;
            height:320px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(230,177,92,.24), transparent 68%);
            pointer-events:none;
        }
        .cta-panel h3{
            margin:0 0 10px;
            font-size:1.5rem;
            line-height:1.35;
            font-weight:900;
        }
        .cta-panel p{
            margin:0;
            max-width:70ch;
            color:rgba(255,255,255,.88);
            line-height:1.85;
        }
        .cta-actions{
            margin-top:18px;
            display:flex;
            flex-wrap:wrap;
            gap:12px;
        }
        .cta-actions .action-btn.primary{
            background:#fff;
            color:var(--brand-3);
            box-shadow:none;
        }
        .cta-actions .action-btn.primary:hover{
            background:#fffdf6;
            box-shadow:0 10px 22px rgba(0,0,0,.12);
        }
        .cta-actions .action-btn.secondary{
            background:rgba(255,255,255,.12);
            color:#fff;
            border-color:rgba(255,255,255,.16);
        }
        .cta-actions .action-btn.secondary:hover{
            background:rgba(255,255,255,.18);
            box-shadow:none;
        }
        .site-footer{
            margin-top:34px;
            padding:34px 0 22px;
            background:linear-gradient(180deg, rgba(12,58,51,.96), rgba(8,44,39,.98));
            color:rgba(255,255,255,.9);
        }
        .footer-grid{
            display:grid;
            grid-template-columns:1.45fr .8fr .8fr;
            gap:26px;
            align-items:start;
        }
        .footer-brand .brand{
            color:#fff;
        }
        .footer-brand .brand-sub{
            color:rgba(255,255,255,.68);
        }
        .footer-brand p{
            margin:16px 0 0;
            max-width:42ch;
            color:rgba(255,255,255,.75);
            line-height:1.9;
        }
        .footer-title{
            margin:0 0 14px;
            font-size:1rem;
            color:#fff;
            font-weight:900;
        }
        .footer-links{
            list-style:none;
            margin:0;
            padding:0;
            display:grid;
            gap:10px;
        }
        .footer-links a{
            color:rgba(255,255,255,.78);
            transition:color .18s ease, transform .18s ease;
        }
        .footer-links a:hover{
            color:#fff;
            transform:translateX(2px);
        }
        .footer-meta{
            margin-top:22px;
            padding-top:16px;
            border-top:1px solid rgba(255,255,255,.10);
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            color:rgba(255,255,255,.68);
            font-size:.92rem;
            flex-wrap:wrap;
        }
        .footer-meta a{
            color:#fff;
            font-weight:700;
        }
        @media (max-width: 1100px){
            .hero-grid,
            .article-layout,
            .latest-layout,
            .feedback-grid{
                grid-template-columns:1fr;
            }
            .trust-strip{
                grid-template-columns:1fr 1fr;
            }
            .trust-card.large{
                grid-row:auto;
            }
            .side-stack{
                position:static;
            }
            .visual-frame img{
                min-height:360px;
            }
            .update-card.featured{
                grid-template-columns:1fr;
            }
        }
        @media (max-width: 960px){
            .nav-toggle{display:inline-flex}
            .nav-shell{
                position:absolute;
                left:16px;
                right:16px;
                top:calc(var(--header-h) - 6px);
                display:none;
                flex-direction:column;
                align-items:stretch;
                gap:12px;
                padding:14px;
                border-radius:24px;
                background:rgba(251,248,242,.98);
                border:1px solid rgba(20,49,45,.10);
                box-shadow:var(--shadow-2);
            }
            .nav-shell.is-open{display:flex}
            .site-nav{
                width:100%;
                justify-content:space-between;
                border-radius:22px;
                padding:8px;
                overflow:auto;
            }
            .header-cta{
                width:100%;
            }
            .section{padding:36px 0 6px}
            .hero{padding-top:22px}
            .footer-grid{
                grid-template-columns:1fr 1fr;
            }
        }
        @media (max-width: 768px){
            :root{--header-h:72px}
            .header-inner{height:var(--header-h)}
            .brand-text{font-size:.98rem}
            .brand-sub{font-size:.74rem}
            .hero-copy{padding-top:18px}
            .page-title{font-size:clamp(1.8rem, 8vw, 2.8rem)}
            .hero-lead{font-size:.98rem}
            .trust-strip,
            .faq-grid,
            .field-grid,
            .footer-grid{
                grid-template-columns:1fr;
            }
            .paper-card-inner,
            .update-copy,
            .side-card,
            .feedback-card,
            .feedback-form,
            .cta-panel{
                padding:20px;
            }
            .article-content{font-size:1rem}
            .side-figure img{height:200px}
            .visual-frame img{min-height:300px}
            .footer-meta{justify-content:flex-start}
        }
        @media (max-width: 520px){
            .container{width:min(var(--container), calc(100% - 24px))}
            .hero-actions,
            .cta-actions,
            .form-actions{
                flex-direction:column;
            }
            .action-btn,
            .header-cta,
            .nav-link{
                width:100%;
            }
            .site-nav{
                display:grid;
                grid-template-columns:1fr 1fr;
            }
            .breadcrumb{font-size:.86rem}
            .hero-visual{padding-top:2px}
            .visual-overlay{
                inset:auto 12px 12px 12px;
                padding:14px;
            }
            .trust-card,
            .side-card,
            .faq-item summary,
            .faq-body{
                padding-left:16px;
                padding-right:16px;
            }
            .side-link{
                padding:11px 12px;
            }
        }

/* 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}