/* roulang page: index */
:root{
            --bg:#f4eee4;
            --bg-soft:#f8f4ec;
            --surface:#fffaf2;
            --surface-2:#f2e9db;
            --text:#1f1b17;
            --muted:#6d6258;
            --line:rgba(58,45,33,.12);
            --line-strong:rgba(58,45,33,.18);
            --primary:#264438;
            --primary-2:#183127;
            --accent:#b96f34;
            --accent-2:#d58a47;
            --shadow:0 14px 40px rgba(53,38,22,.08);
            --shadow-soft:0 10px 24px rgba(53,38,22,.06);
            --radius:18px;
            --radius-lg:24px;
            --radius-xl:30px;
            --container:1240px;
            --space-1:8px;
            --space-2:12px;
            --space-3:16px;
            --space-4:20px;
            --space-5:28px;
            --space-6:36px;
            --space-7:48px;
            --space-8:72px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--text);
            background:
                radial-gradient(circle at top left, rgba(185,111,52,.08), transparent 28%),
                radial-gradient(circle at 85% 10%, rgba(38,68,56,.08), transparent 22%),
                linear-gradient(180deg, #f6f1e8 0%, var(--bg) 100%);
            font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;
            line-height:1.72;
            -webkit-font-smoothing:antialiased;
            text-rendering:optimizeLegibility;
            overflow-x:hidden;
        }
        img{max-width:100%;display:block}
        a{color:inherit;text-decoration:none;transition:color .2s ease, transform .2s ease, opacity .2s ease}
        button,input,textarea,select{font:inherit}
        button{cursor:pointer}
        ::selection{background:rgba(185,111,52,.22);color:var(--text)}
        :focus-visible{outline:3px solid rgba(185,111,52,.34);outline-offset:2px}
        .container{
            width:min(100% - 40px, var(--container));
            margin:0 auto;
        }
        .topbar{
            background:linear-gradient(90deg, #171411 0%, #221b16 100%);
            color:#f7efe3;
            font-size:13px;
            letter-spacing:.01em;
        }
        .topbar-inner{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            min-height:40px;
            padding:8px 0;
        }
        .topbar strong{font-weight:700}
        .topbar .hint{
            display:flex;
            align-items:center;
            gap:10px;
            color:rgba(247,239,227,.82);
            white-space:nowrap;
        }
        .topbar .dot{
            width:8px;height:8px;border-radius:50%;
            background:linear-gradient(135deg, var(--accent), #f0b05a);
            box-shadow:0 0 0 4px rgba(185,111,52,.16);
            flex:0 0 auto;
        }
        .header{
            position:sticky;
            top:0;
            z-index:60;
            background:rgba(244,238,228,.92);
            border-bottom:1px solid rgba(58,45,33,.08);
            box-shadow:0 10px 26px rgba(26,18,10,.04);
        }
        .header-inner{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            padding:16px 0;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:12px;
            min-width:0;
            font-weight:800;
        }
        .brand-mark{
            width:42px;height:42px;
            border-radius:14px;
            background:
                radial-gradient(circle at 30% 25%, rgba(255,255,255,.38), transparent 30%),
                linear-gradient(145deg, var(--primary), #355b49 72%, #202b23 100%);
            color:#fff;
            display:grid;
            place-items:center;
            font-size:15px;
            letter-spacing:.03em;
            box-shadow:0 12px 24px rgba(38,68,56,.2);
            flex:0 0 auto;
        }
        .brand-text{
            display:flex;
            flex-direction:column;
            min-width:0;
        }
        .brand-name{
            font-size:18px;
            line-height:1.15;
            letter-spacing:-.01em;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .brand-sub{
            font-size:12px;
            color:var(--muted);
            margin-top:2px;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .nav{
            display:flex;
            align-items:center;
            gap:8px;
            flex-wrap:wrap;
            justify-content:center;
        }
        .nav a{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:10px 14px;
            border-radius:999px;
            color:var(--muted);
            border:1px solid transparent;
            transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
        }
        .nav a:hover,
        .nav a.active{
            color:var(--text);
            background:rgba(255,255,255,.75);
            border-color:rgba(58,45,33,.08);
            box-shadow:0 8px 16px rgba(32,23,15,.04);
            transform:translateY(-1px);
        }
        .header-action{
            margin-left:auto;
            display:flex;
            align-items:center;
            gap:10px;
        }
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            min-height:44px;
            padding:0 18px;
            border-radius:999px;
            font-weight:700;
            border:1px solid transparent;
            transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
            white-space:nowrap;
        }
        .btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(36,27,19,.14)}
        .btn:active{transform:translateY(0)}
        .btn-primary{
            color:#fff;
            background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
            box-shadow:0 12px 22px rgba(185,111,52,.24);
        }
        .btn-primary:hover{background:linear-gradient(135deg, #a9642d 0%, #d49351 100%)}
        .btn-secondary{
            color:var(--text);
            background:rgba(255,255,255,.72);
            border-color:rgba(58,45,33,.14);
        }
        .btn-secondary:hover{background:#fff}
        .btn-text{
            min-height:auto;
            padding:0;
            color:var(--primary);
            border:none;
            background:transparent;
            font-weight:700;
        }
        .section{
            padding:var(--space-8) 0;
            position:relative;
        }
        .section--tight{padding-top:var(--space-6)}
        .section-head{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:20px;
            margin-bottom:24px;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            font-size:12px;
            font-weight:800;
            letter-spacing:.11em;
            text-transform:uppercase;
            color:var(--accent);
        }
        .eyebrow::before{
            content:"";
            width:14px;height:2px;border-radius:999px;
            background:linear-gradient(90deg, var(--accent), rgba(185,111,52,.18));
        }
        .section-head h2{
            margin:8px 0 0;
            font-size:clamp(24px, 3vw, 38px);
            line-height:1.16;
            letter-spacing:-.02em;
        }
        .section-head p{
            margin:0;
            color:var(--muted);
            max-width:60ch;
        }
        .muted{color:var(--muted)}
        .badge{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 12px;
            border-radius:999px;
            background:rgba(255,255,255,.7);
            border:1px solid rgba(58,45,33,.1);
            color:var(--text);
            font-size:13px;
            font-weight:600;
            box-shadow:0 8px 16px rgba(31,22,14,.04);
        }
        .badge i{
            width:8px;height:8px;border-radius:50%;
            background:linear-gradient(135deg, var(--accent), #efb45f);
            flex:0 0 auto;
        }
        .hero{
            padding:24px 0 8px;
        }
        .hero-panel{
            position:relative;
            overflow:hidden;
            border-radius:32px;
            border:1px solid rgba(58,45,33,.12);
            background:
                linear-gradient(115deg, rgba(246,239,229,.96) 0%, rgba(248,242,234,.94) 50%, rgba(242,233,219,.92) 100%),
                url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
            box-shadow:0 20px 50px rgba(34,23,13,.08);
        }
        .hero-panel::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at 18% 18%, rgba(255,255,255,.7), transparent 18%),
                radial-gradient(circle at 84% 14%, rgba(185,111,52,.12), transparent 22%),
                linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
            pointer-events:none;
        }
        .hero-grid{
            position:relative;
            display:grid;
            grid-template-columns:1.08fr .92fr;
            gap:30px;
            padding:44px;
            align-items:center;
            z-index:1;
        }
        .hero-copy h1{
            margin:14px 0 16px;
            font-size:clamp(34px, 5.3vw, 60px);
            line-height:1.06;
            letter-spacing:-.04em;
        }
        .hero-copy p{
            margin:0;
            font-size:18px;
            color:rgba(31,27,23,.78);
            max-width:56ch;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin:28px 0 20px;
        }
        .hero-tags{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-bottom:22px;
        }
        .hero-points{
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:12px;
        }
        .point{
            background:rgba(255,255,255,.74);
            border:1px solid rgba(58,45,33,.1);
            border-radius:20px;
            padding:14px 16px;
            box-shadow:var(--shadow-soft);
        }
        .point strong{
            display:block;
            font-size:18px;
            line-height:1.2;
            margin-bottom:5px;
        }
        .point span{
            display:block;
            color:var(--muted);
            font-size:13px;
        }
        .hero-visual{
            position:relative;
            min-width:0;
        }
        .visual-frame{
            position:relative;
            border-radius:28px;
            overflow:hidden;
            border:1px solid rgba(58,45,33,.12);
            background:linear-gradient(180deg, rgba(255,255,255,.54), rgba(255,255,255,.28));
            box-shadow:0 22px 42px rgba(26,18,10,.14);
            aspect-ratio: 4 / 5;
        }
        .visual-frame img{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .visual-frame .overlay{
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, rgba(17,13,10,.08), rgba(17,13,10,.26) 68%, rgba(17,13,10,.38));
        }
        .visual-copy{
            position:absolute;
            left:18px;
            right:18px;
            bottom:18px;
            color:#fff;
            z-index:1;
        }
        .visual-copy h3{
            margin:0 0 6px;
            font-size:18px;
            line-height:1.25;
        }
        .visual-copy p{
            margin:0;
            color:rgba(255,255,255,.84);
            font-size:14px;
        }
        .floating-card{
            position:absolute;
            right:-16px;
            bottom:28px;
            width:min(290px, 82%);
            background:rgba(255,250,242,.96);
            border:1px solid rgba(58,45,33,.12);
            border-radius:22px;
            padding:16px;
            box-shadow:0 20px 34px rgba(34,23,13,.12);
        }
        .floating-card h4{
            margin:0 0 8px;
            font-size:15px;
        }
        .floating-card ul{
            list-style:none;
            padding:0;
            margin:0;
            display:grid;
            gap:10px;
        }
        .floating-card li{
            display:flex;
            gap:10px;
            align-items:flex-start;
            color:var(--muted);
            font-size:13px;
        }
        .floating-card li::before{
            content:"";
            width:8px;height:8px;
            border-radius:50%;
            margin-top:7px;
            background:linear-gradient(135deg, var(--accent), #f0bb63);
            flex:0 0 auto;
        }
        .grid{
            display:grid;
            gap:20px;
        }
        .grid-2{grid-template-columns:repeat(2, minmax(0, 1fr))}
        .grid-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
        .grid-4{grid-template-columns:repeat(4, minmax(0, 1fr))}
        .card{
            background:var(--surface);
            border:1px solid var(--line);
            border-radius:var(--radius-lg);
            box-shadow:var(--shadow-soft);
            overflow:hidden;
            transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
        }
        .card:hover{
            transform:translateY(-3px);
            border-color:rgba(185,111,52,.22);
            box-shadow:0 18px 38px rgba(40,28,15,.11);
        }
        .card-body{padding:22px}
        .card-title{
            margin:0 0 10px;
            font-size:18px;
            line-height:1.28;
            letter-spacing:-.01em;
        }
        .card-desc{
            margin:0;
            color:var(--muted);
        }
        .icon-chip{
            width:42px;height:42px;border-radius:14px;
            display:grid;
            place-items:center;
            background:linear-gradient(135deg, rgba(38,68,56,.14), rgba(185,111,52,.14));
            color:var(--primary);
            border:1px solid rgba(38,68,56,.1);
            font-weight:800;
            margin-bottom:16px;
        }
        .highlight-layout{
            display:grid;
            grid-template-columns:repeat(12, minmax(0,1fr));
            gap:20px;
        }
        .feature-card{
            grid-column:span 7;
            display:flex;
            flex-direction:column;
            min-height:100%;
        }
        .feature-card .media{
            aspect-ratio: 16 / 10;
            overflow:hidden;
            position:relative;
        }
        .feature-card .media img{
            width:100%;
            height:100%;
            object-fit:cover;
            transition:transform .4s ease;
        }
        .feature-card:hover .media img{transform:scale(1.03)}
        .feature-card .body{padding:24px}
        .feature-card .body p{margin:0;color:var(--muted)}
        .feature-card .meta{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:18px;
        }
        .mini-stack{
            grid-column:span 5;
            display:grid;
            gap:20px;
        }
        .mini-card{
            display:grid;
            grid-template-columns:108px 1fr;
            gap:16px;
            align-items:stretch;
        }
        .mini-card .thumb{
            border-radius:22px;
            overflow:hidden;
            min-height:100%;
        }
        .mini-card .thumb img{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .mini-card .body{
            padding:20px 20px 18px 0;
        }
        .mini-card h3{
            margin:0 0 8px;
            font-size:17px;
            line-height:1.28;
        }
        .mini-card p{
            margin:0;
            color:var(--muted);
            font-size:14px;
        }
        .panel{
            background:var(--surface);
            border:1px solid var(--line);
            border-radius:28px;
            box-shadow:var(--shadow-soft);
            overflow:hidden;
        }
        .split-layout{
            display:grid;
            grid-template-columns:1.02fr .98fr;
            gap:22px;
            align-items:stretch;
        }
        .split-copy{
            padding:30px;
        }
        .split-copy h3{
            margin:12px 0 14px;
            font-size:30px;
            line-height:1.18;
            letter-spacing:-.02em;
        }
        .split-copy p{
            margin:0 0 18px;
            color:var(--muted);
        }
        .bullet-list{
            list-style:none;
            padding:0;
            margin:0;
            display:grid;
            gap:12px;
        }
        .bullet-list li{
            position:relative;
            padding-left:28px;
            color:var(--text);
        }
        .bullet-list li::before{
            content:"";
            position:absolute;
            left:0;
            top:9px;
            width:13px;
            height:13px;
            border-radius:4px;
            background:linear-gradient(135deg, var(--accent), #efb45f);
            box-shadow:0 0 0 4px rgba(185,111,52,.1);
        }
        .split-visual{
            position:relative;
            min-height:100%;
            background:linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.08));
        }
        .split-visual .big-shot{
            width:100%;
            height:100%;
            min-height:100%;
            object-fit:cover;
        }
        .split-visual .note{
            position:absolute;
            left:18px;
            bottom:18px;
            right:18px;
            background:rgba(17,13,10,.62);
            color:#fff;
            padding:16px 18px;
            border-radius:20px;
            border:1px solid rgba(255,255,255,.15);
            backdrop-filter:none;
        }
        .split-visual .note strong{display:block;font-size:15px;margin-bottom:5px}
        .split-visual .note span{display:block;font-size:13px;color:rgba(255,255,255,.82)}
        .evidence-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:18px;
        }
        .evidence{
            padding:22px;
            background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.64));
            border:1px solid var(--line);
            border-radius:24px;
            box-shadow:var(--shadow-soft);
        }
        .evidence .top{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            margin-bottom:14px;
        }
        .evidence h3{
            margin:0;
            font-size:17px;
            line-height:1.25;
        }
        .evidence .num{
            font-weight:800;
            color:var(--accent);
            font-size:20px;
            letter-spacing:-.03em;
        }
        .evidence p{
            margin:0;
            color:var(--muted);
        }
        .news-list{
            display:grid;
            gap:14px;
        }
        .news-item{
            display:grid;
            grid-template-columns:120px minmax(0,1fr) auto;
            gap:16px;
            align-items:center;
            padding:16px;
            background:var(--surface);
            border:1px solid var(--line);
            border-radius:22px;
            box-shadow:var(--shadow-soft);
            transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
        }
        .news-item:hover{
            transform:translateY(-2px);
            border-color:rgba(185,111,52,.22);
            box-shadow:0 18px 34px rgba(38,28,16,.1);
        }
        .news-thumb{
            width:120px;
            aspect-ratio: 4 / 3;
            overflow:hidden;
            border-radius:16px;
            background:var(--surface-2);
        }
        .news-thumb img{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .news-content{
            min-width:0;
        }
        .meta{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-bottom:8px;
        }
        .meta .tag{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:6px 10px;
            border-radius:999px;
            font-size:12px;
            color:var(--primary);
            background:rgba(38,68,56,.08);
            border:1px solid rgba(38,68,56,.12);
        }
        .meta .tag.time{
            color:var(--muted);
            background:rgba(255,255,255,.72);
            border-color:rgba(58,45,33,.08);
        }
        .news-content h3{
            margin:0 0 8px;
            font-size:18px;
            line-height:1.3;
        }
        .news-content p{
            margin:0;
            color:var(--muted);
            display:-webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2;
            overflow:hidden;
        }
        .news-link{
            color:var(--primary);
            font-weight:800;
            white-space:nowrap;
            padding-right:4px;
        }
        .empty-state{
            padding:24px;
            border-radius:22px;
            background:rgba(255,255,255,.8);
            border:1px dashed rgba(58,45,33,.18);
            color:var(--muted);
        }
        .faq-wrap{
            display:grid;
            gap:12px;
        }
        details.faq{
            background:var(--surface);
            border:1px solid var(--line);
            border-radius:22px;
            box-shadow:var(--shadow-soft);
            overflow:hidden;
            transition:border-color .2s ease, box-shadow .2s ease;
        }
        details.faq[open]{
            border-color:rgba(185,111,52,.24);
            box-shadow:0 18px 32px rgba(38,28,16,.1);
        }
        details.faq summary{
            list-style:none;
            cursor:pointer;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            padding:18px 20px;
            font-weight:700;
        }
        details.faq summary::-webkit-details-marker{display:none}
        details.faq summary::after{
            content:"+";
            width:28px;height:28px;
            border-radius:999px;
            display:grid;
            place-items:center;
            background:rgba(185,111,52,.1);
            color:var(--accent);
            font-size:18px;
            font-weight:400;
            flex:0 0 auto;
        }
        details.faq[open] summary::after{content:"–"}
        .faq-body{
            padding:0 20px 18px;
            color:var(--muted);
        }
        .cta-panel{
            position:relative;
            overflow:hidden;
            border-radius:32px;
            background:
                linear-gradient(135deg, rgba(23,19,16,.98) 0%, rgba(35,30,24,.98) 60%, rgba(54,43,31,.98) 100%);
            color:#f8f2e7;
            border:1px solid rgba(255,255,255,.08);
            box-shadow:0 26px 46px rgba(22,16,11,.2);
        }
        .cta-panel::before{
            content:"";
            position:absolute;
            inset:-2px;
            background:
                radial-gradient(circle at 10% 10%, rgba(185,111,52,.24), transparent 28%),
                radial-gradient(circle at 90% 20%, rgba(255,255,255,.12), transparent 26%);
            pointer-events:none;
        }
        .cta-inner{
            position:relative;
            z-index:1;
            display:grid;
            grid-template-columns:1fr auto;
            gap:24px;
            align-items:center;
            padding:34px;
        }
        .cta-inner h2{
            margin:8px 0 12px;
            font-size:clamp(26px, 3.6vw, 40px);
            line-height:1.15;
            letter-spacing:-.02em;
        }
        .cta-inner p{
            margin:0;
            color:rgba(248,242,231,.82);
            max-width:56ch;
        }
        .cta-actions{
            display:flex;
            flex-wrap:wrap;
            justify-content:flex-end;
            gap:12px;
            align-items:center;
        }
        .contact-form{
            display:grid;
            grid-template-columns:1fr 1.3fr auto;
            gap:12px;
            margin-top:20px;
            align-items:center;
        }
        .field{
            width:100%;
            min-height:48px;
            padding:0 14px;
            border-radius:14px;
            border:1px solid rgba(255,255,255,.14);
            background:rgba(255,255,255,.07);
            color:#fff;
            outline:none;
            transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
        }
        .field::placeholder{color:rgba(255,255,255,.56)}
        .field:focus{
            border-color:rgba(236,176,88,.55);
            box-shadow:0 0 0 4px rgba(185,111,52,.18);
            background:rgba(255,255,255,.09);
        }
        .footer{
            padding:42px 0 28px;
            color:var(--muted);
        }
        .footer-panel{
            display:grid;
            grid-template-columns:1.2fr .8fr .8fr;
            gap:20px;
            padding:28px;
            background:rgba(255,255,255,.64);
            border:1px solid rgba(58,45,33,.1);
            border-radius:28px;
            box-shadow:var(--shadow-soft);
        }
        .footer h3{
            margin:0 0 12px;
            color:var(--text);
            font-size:16px;
        }
        .footer p{margin:0;color:var(--muted)}
        .footer-links{
            display:grid;
            gap:10px;
        }
        .footer-links a{
            color:var(--muted);
            width:fit-content;
        }
        .footer-links a:hover{color:var(--primary)}
        .copyright{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            padding:18px 4px 0;
            font-size:13px;
            color:#776d63;
        }
        .copyright a{color:var(--primary);font-weight:700}
        .section-divider{
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(58,45,33,.12), transparent);
            margin:0;
            border:none;
        }
        .visually-hidden{
            position:absolute!important;
            width:1px;height:1px;
            padding:0;margin:-1px;
            overflow:hidden;clip:rect(0,0,0,0);
            white-space:nowrap;border:0;
        }
        @media (max-width: 1120px){
            .hero-grid{grid-template-columns:1fr;gap:22px}
            .hero-visual{max-width:640px}
            .highlight-layout{grid-template-columns:1fr}
            .feature-card,.mini-stack{grid-column:auto}
            .split-layout{grid-template-columns:1fr}
            .evidence-grid{grid-template-columns:1fr}
            .footer-panel{grid-template-columns:1fr 1fr}
            .footer-panel .footer-col:first-child{grid-column:1/-1}
        }
        @media (max-width: 900px){
            .header-inner{flex-wrap:wrap}
            .header-action{margin-left:0}
            .nav{justify-content:flex-start}
            .section-head{align-items:flex-start;flex-direction:column}
            .hero-grid{padding:30px}
            .hero-copy p{font-size:16px}
            .hero-points{grid-template-columns:1fr}
            .news-item{grid-template-columns:1fr}
            .news-thumb{width:100%;aspect-ratio:16/9}
            .news-link{justify-self:start}
            .contact-form{grid-template-columns:1fr}
            .cta-inner{grid-template-columns:1fr}
            .cta-actions{justify-content:flex-start}
        }
        @media (max-width: 680px){
            .container{width:min(100% - 28px, var(--container))}
            .topbar{font-size:12px}
            .topbar-inner{flex-direction:column;align-items:flex-start;gap:6px}
            .hero-panel{border-radius:24px}
            .hero-grid{padding:22px}
            .hero-copy h1{font-size:clamp(30px, 11vw, 42px)}
            .hero-actions{flex-direction:column;align-items:stretch}
            .hero-actions .btn{width:100%}
            .floating-card{
                position:relative;
                right:auto;
                bottom:auto;
                width:100%;
                margin-top:14px;
            }
            .mini-card{grid-template-columns:1fr}
            .mini-card .body{padding:0 2px 2px}
            .split-copy{padding:22px}
            .split-copy h3{font-size:24px}
            .cta-inner{padding:24px}
            .footer-panel{grid-template-columns:1fr;padding:22px}
            .copyright{flex-direction:column;align-items:flex-start}
        }

/* roulang page: article */
:root{
            --bg:#f4eee4;
            --bg-soft:#f8f4ec;
            --surface:#fffaf2;
            --surface-2:#f2e9db;
            --text:#1f1b17;
            --muted:#6d6258;
            --line:rgba(58,45,33,.12);
            --line-strong:rgba(58,45,33,.18);
            --primary:#264438;
            --primary-2:#183127;
            --accent:#b96f34;
            --accent-2:#d58a47;
            --shadow:0 14px 40px rgba(53,38,22,.08);
            --shadow-soft:0 10px 24px rgba(53,38,22,.06);
            --radius:18px;
            --radius-lg:24px;
            --radius-xl:30px;
            --container:1240px;
            --space-1:8px;
            --space-2:12px;
            --space-3:16px;
            --space-4:20px;
            --space-5:28px;
            --space-6:36px;
            --space-7:48px;
            --space-8:72px;
        }
        html{scroll-behavior:smooth}
        *{box-sizing:border-box}
        body{
            margin:0;
            color:var(--text);
            background:
                radial-gradient(circle at top left, rgba(185,111,52,.08), transparent 28%),
                radial-gradient(circle at 85% 10%, rgba(38,68,56,.08), transparent 22%),
                linear-gradient(180deg, #f6f1e8 0%, var(--bg) 100%);
            font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;
            line-height:1.72;
            -webkit-font-smoothing:antialiased;
            text-rendering:optimizeLegibility;
            overflow-x:hidden;
        }
        ::selection{background:rgba(185,111,52,.24);color:var(--text)}
        img{max-width:100%;display:block}
        a{color:inherit;text-decoration:none;transition:color .2s ease, transform .2s ease, opacity .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease}
        button,input,textarea,select{font:inherit}
        button{cursor:pointer}
        button:focus-visible,
        a:focus-visible,
        summary:focus-visible,
        input:focus-visible,
        textarea:focus-visible,
        select:focus-visible{
            outline:2px solid rgba(185,111,52,.42);
            outline-offset:3px;
        }
        .container{
            width:min(100% - 40px, var(--container));
            margin:0 auto;
        }
        .topbar{
            background:linear-gradient(90deg, #171411 0%, #221b16 100%);
            color:#f7efe3;
            font-size:13px;
            letter-spacing:.01em;
        }
        .topbar-inner{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            min-height:40px;
            padding:8px 0;
        }
        .topbar strong{font-weight:700}
        .topbar .hint{
            display:flex;
            align-items:center;
            gap:10px;
            color:rgba(247,239,227,.82);
            white-space:nowrap;
        }
        .topbar .dot{
            width:8px;height:8px;border-radius:50%;
            background:linear-gradient(135deg, var(--accent), #f0b05a);
            box-shadow:0 0 0 4px rgba(185,111,52,.16);
            flex:0 0 auto;
        }
        .header{
            position:sticky;
            top:0;
            z-index:60;
            background:rgba(244,238,228,.92);
            border-bottom:1px solid rgba(58,45,33,.08);
            box-shadow:0 10px 26px rgba(26,18,10,.04);
            backdrop-filter:saturate(140%) blur(10px);
        }
        .header-inner{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            padding:16px 0;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:12px;
            min-width:0;
            font-weight:800;
        }
        .brand-mark{
            width:42px;height:42px;
            border-radius:14px;
            background:
                radial-gradient(circle at 30% 25%, rgba(255,255,255,.38), transparent 30%),
                linear-gradient(145deg, var(--primary), #355b49 72%, #202b23 100%);
            color:#fff;
            display:grid;
            place-items:center;
            font-size:15px;
            letter-spacing:.03em;
            box-shadow:0 12px 24px rgba(38,68,56,.2);
            flex:0 0 auto;
        }
        .brand-text{
            display:flex;
            flex-direction:column;
            min-width:0;
        }
        .brand-name{
            font-size:18px;
            line-height:1.15;
            letter-spacing:-.01em;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .brand-sub{
            font-size:12px;
            color:var(--muted);
            margin-top:2px;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .nav{
            display:flex;
            align-items:center;
            gap:8px;
            flex-wrap:wrap;
            justify-content:center;
        }
        .nav a{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:10px 14px;
            border-radius:999px;
            color:var(--muted);
            border:1px solid transparent;
            transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
        }
        .nav a:hover,
        .nav a.active{
            color:var(--text);
            background:rgba(255,255,255,.75);
            border-color:rgba(58,45,33,.08);
            box-shadow:0 8px 16px rgba(32,23,15,.04);
            transform:translateY(-1px);
        }
        .header-action{
            margin-left:auto;
            display:flex;
            align-items:center;
            gap:10px;
        }
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            min-height:44px;
            padding:0 18px;
            border-radius:999px;
            font-weight:700;
            border:1px solid transparent;
            transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
            white-space:nowrap;
        }
        .btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(36,27,19,.14)}
        .btn:active{transform:translateY(0)}
        .btn-primary{
            color:#fff;
            background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
            box-shadow:0 12px 22px rgba(185,111,52,.24);
        }
        .btn-primary:hover{background:linear-gradient(135deg, #a9642d 0%, #d49351 100%)}
        .btn-secondary{
            color:var(--primary);
            background:rgba(255,255,255,.72);
            border-color:rgba(38,68,56,.16);
        }
        .btn-secondary:hover{
            color:var(--primary-2);
            background:#fff;
            border-color:rgba(38,68,56,.24);
        }
        .btn-ghost{
            color:var(--text);
            background:transparent;
            border-color:rgba(58,45,33,.12);
        }
        .btn-ghost:hover{
            background:rgba(255,255,255,.78);
            border-color:rgba(58,45,33,.18);
        }
        .page-hero{
            position:relative;
            padding:42px 0 28px;
        }
        .page-hero::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(135deg, rgba(24,49,39,.92), rgba(24,49,39,.74)),
                url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
            border-bottom:1px solid rgba(255,255,255,.08);
            z-index:-1;
        }
        .hero-grid{
            display:grid;
            grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);
            gap:28px;
            align-items:stretch;
            color:#f6efe4;
        }
        .hero-copy{
            padding:18px 0 10px;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:7px 12px;
            border-radius:999px;
            background:rgba(255,255,255,.08);
            border:1px solid rgba(255,255,255,.12);
            color:rgba(247,239,227,.92);
            font-size:13px;
            letter-spacing:.02em;
            margin-bottom:16px;
        }
        .hero-copy h1{
            margin:0;
            font-size:clamp(32px, 4vw, 56px);
            line-height:1.08;
            letter-spacing:-.03em;
            max-width:12em;
        }
        .hero-lead{
            margin:18px 0 0;
            max-width:46rem;
            color:rgba(246,239,228,.86);
            font-size:16px;
        }
        .hero-tags{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:22px;
        }
        .tag{
            display:inline-flex;
            align-items:center;
            gap:8px;
            min-height:34px;
            padding:0 12px;
            border-radius:999px;
            background:rgba(255,255,255,.08);
            border:1px solid rgba(255,255,255,.12);
            color:rgba(246,239,228,.92);
            font-size:13px;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:26px;
        }
        .hero-actions .btn-secondary{
            background:rgba(255,255,255,.09);
            color:#fff;
            border-color:rgba(255,255,255,.16);
        }
        .hero-actions .btn-secondary:hover{
            background:rgba(255,255,255,.16);
            border-color:rgba(255,255,255,.22);
        }
        .hero-visual{
            display:flex;
            align-items:stretch;
        }
        .visual-frame{
            position:relative;
            width:100%;
            min-height:340px;
            border-radius:var(--radius-xl);
            overflow:hidden;
            box-shadow:var(--shadow);
            border:1px solid rgba(255,255,255,.12);
            background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
        }
        .visual-frame::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, rgba(11,15,13,.06), rgba(11,15,13,.42));
            pointer-events:none;
        }
        .visual-frame img{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .visual-card{
            position:absolute;
            left:18px;
            right:18px;
            bottom:18px;
            z-index:1;
            display:grid;
            grid-template-columns:112px minmax(0,1fr);
            gap:14px;
            align-items:end;
            padding:14px;
            border-radius:22px;
            background:rgba(255,250,242,.92);
            border:1px solid rgba(58,45,33,.14);
            box-shadow:0 14px 32px rgba(18,12,7,.16);
        }
        .visual-card img{
            width:112px;
            height:92px;
            object-fit:cover;
            border-radius:16px;
        }
        .visual-caption{
            color:var(--text);
            font-weight:600;
            line-height:1.58;
        }
        .article-layout{
            padding:28px 0 10px;
        }
        .article-grid{
            display:grid;
            grid-template-columns:minmax(0,1.12fr) minmax(290px,.88fr);
            gap:24px;
            align-items:start;
        }
        .panel{
            background:var(--surface);
            border:1px solid rgba(58,45,33,.10);
            border-radius:var(--radius-lg);
            box-shadow:var(--shadow-soft);
        }
        .article-main{
            padding:28px;
        }
        .section-head{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:16px;
            margin-bottom:18px;
        }
        .section-head.compact{margin-bottom:14px}
        .section-head h2,
        .section-head h3{
            margin:0;
            font-size:clamp(22px, 2vw, 30px);
            line-height:1.18;
            letter-spacing:-.02em;
        }
        .text-link{
            color:var(--accent);
            font-weight:700;
        }
        .text-link:hover{color:#9b5824}
        .article-meta-row{
            display:flex;
            flex-wrap:wrap;
            gap:10px 12px;
            margin-bottom:18px;
            color:var(--muted);
            font-size:14px;
        }
        .article-meta-row .tag{
            background:rgba(38,68,56,.06);
            color:var(--primary);
            border-color:rgba(38,68,56,.10);
        }
        .article-content{
            color:var(--text);
            font-size:16px;
        }
        .article-content > * + *{margin-top:1em}
        .article-content h2,
        .article-content h3,
        .article-content h4{
            margin:1.8em 0 .7em;
            line-height:1.28;
            letter-spacing:-.02em;
        }
        .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;color:var(--text)}
        .article-content a{
            color:var(--accent);
            text-decoration:underline;
            text-decoration-color:rgba(185,111,52,.28);
            text-underline-offset:3px;
        }
        .article-content a:hover{color:#9b5824}
        .article-content ul,
        .article-content ol{
            margin:0;
            padding-left:1.35em;
        }
        .article-content li + li{margin-top:.55em}
        .article-content blockquote{
            margin:1.4em 0;
            padding:18px 20px;
            border-left:4px solid rgba(185,111,52,.68);
            border-radius:14px;
            background:linear-gradient(180deg, rgba(185,111,52,.08), rgba(185,111,52,.03));
            color:#4d4035;
        }
        .article-content img{
            max-width:100%;
            height:auto;
            border-radius:18px;
            margin:1.4em 0;
            box-shadow:var(--shadow-soft);
        }
        .article-content figure{
            margin:1.4em 0;
        }
        .article-content figcaption{
            margin-top:10px;
            color:var(--muted);
            font-size:13px;
            text-align:center;
        }
        .article-content code{
            padding:.18em .42em;
            border-radius:8px;
            background:rgba(38,68,56,.08);
            color:var(--primary-2);
        }
        .article-content pre{
            overflow:auto;
            padding:18px;
            border-radius:16px;
            background:#201b17;
            color:#f6efe4;
            box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
        }
        .article-content table{
            width:100%;
            border-collapse:collapse;
            margin:1.4em 0;
            overflow:hidden;
            border-radius:16px;
        }
        .article-content th,
        .article-content td{
            border:1px solid rgba(58,45,33,.12);
            padding:12px 14px;
            text-align:left;
            vertical-align:top;
            background:rgba(255,255,255,.72);
        }
        .article-content th{
            background:rgba(242,233,219,.82);
            font-weight:700;
        }
        .article-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:26px;
            padding-top:20px;
            border-top:1px solid rgba(58,45,33,.10);
        }
        .article-aside{
            position:sticky;
            top:98px;
            display:grid;
            gap:18px;
        }
        .side-media{
            overflow:hidden;
        }
        .side-media img{
            width:100%;
            aspect-ratio:4/3;
            object-fit:cover;
        }
        .side-media-note{
            padding:16px 18px 18px;
            color:var(--muted);
            border-top:1px solid rgba(58,45,33,.10);
            background:linear-gradient(180deg, rgba(255,250,242,.94), rgba(242,233,219,.5));
        }
        .side-card{
            padding:20px;
        }
        .side-card h3{
            margin:0 0 14px;
            font-size:18px;
            line-height:1.25;
        }
        .side-list{
            list-style:none;
            margin:0;
            padding:0;
            display:grid;
            gap:12px;
        }
        .side-list li{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:18px;
            padding:12px 0;
            border-bottom:1px dashed rgba(58,45,33,.12);
        }
        .side-list li:last-child{border-bottom:0;padding-bottom:0}
        .side-list span{
            color:var(--muted);
            flex:0 0 auto;
        }
        .side-list strong{
            font-weight:700;
            text-align:right;
        }
        .side-links{
            display:grid;
            gap:10px;
        }
        .side-links a{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            padding:12px 14px;
            border-radius:14px;
            border:1px solid rgba(58,45,33,.10);
            background:rgba(255,255,255,.72);
        }
        .side-links a:hover{
            border-color:rgba(185,111,52,.22);
            box-shadow:0 10px 20px rgba(53,38,22,.06);
            transform:translateY(-1px);
        }
        .related-section,
        .faq-section,
        .cta-section{
            padding:28px 0 10px;
        }
        .related-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:18px;
        }
        .mini-card{
            display:flex;
            flex-direction:column;
            gap:10px;
            min-height:140px;
            padding:20px;
            background:var(--surface);
            border:1px solid rgba(58,45,33,.10);
            border-radius:var(--radius-lg);
            box-shadow:var(--shadow-soft);
            position:relative;
            overflow:hidden;
        }
        .mini-card::before{
            content:"";
            position:absolute;
            inset:auto -18px -18px auto;
            width:110px;height:110px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(185,111,52,.12), rgba(185,111,52,0) 70%);
            pointer-events:none;
        }
        .mini-card .mini-kicker{
            font-size:13px;
            color:var(--muted);
        }
        .mini-card strong{
            font-size:18px;
            line-height:1.35;
        }
        .mini-card span:last-child{
            color:var(--muted);
            font-size:14px;
        }
        .faq-list{
            display:grid;
            gap:12px;
        }
        .faq-item{
            padding:0;
            background:var(--surface);
            border:1px solid rgba(58,45,33,.10);
            border-radius:18px;
            box-shadow:var(--shadow-soft);
            overflow:hidden;
        }
        .faq-item summary{
            list-style:none;
            cursor:pointer;
            padding:18px 20px;
            font-weight:700;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
        }
        .faq-item summary::-webkit-details-marker{display:none}
        .faq-item summary::after{
            content:"+";
            width:28px;height:28px;
            display:grid;
            place-items:center;
            border-radius:999px;
            background:rgba(38,68,56,.08);
            color:var(--primary);
            flex:0 0 auto;
            transition:transform .2s ease, background-color .2s ease;
        }
        .faq-item[open] summary{
            background:linear-gradient(180deg, rgba(242,233,219,.72), rgba(255,250,242,.86));
            border-bottom:1px solid rgba(58,45,33,.08);
        }
        .faq-item[open] summary::after{
            content:"–";
            background:rgba(185,111,52,.12);
            color:var(--accent);
        }
        .faq-answer{
            padding:18px 20px 20px;
            color:var(--muted);
        }
        .cta-box{
            display:grid;
            grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);
            gap:20px;
            align-items:center;
            padding:24px;
            border-radius:var(--radius-xl);
            background:
                radial-gradient(circle at 0% 0%, rgba(185,111,52,.14), transparent 24%),
                linear-gradient(135deg, rgba(38,68,56,.96), rgba(24,49,39,.92));
            color:#f7efe3;
            box-shadow:var(--shadow);
        }
        .cta-box h2{
            margin:0 0 10px;
            font-size:clamp(24px, 2.5vw, 36px);
            line-height:1.18;
            letter-spacing:-.02em;
        }
        .cta-box p{
            margin:0;
            color:rgba(247,239,227,.84);
            max-width:48rem;
        }
        .cta-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            justify-content:flex-end;
        }
        .cta-actions .btn-secondary{
            background:rgba(255,255,255,.08);
            color:#fff;
            border-color:rgba(255,255,255,.14);
        }
        .cta-actions .btn-secondary:hover{
            background:rgba(255,255,255,.14);
            border-color:rgba(255,255,255,.22);
        }
        .footer{
            padding:48px 0 24px;
        }
        .footer-panel{
            display:grid;
            grid-template-columns:1.2fr .8fr 1fr;
            gap:22px;
            padding:28px;
            border-radius:var(--radius-xl);
            background:rgba(255,250,242,.78);
            border:1px solid rgba(58,45,33,.10);
            box-shadow:var(--shadow-soft);
        }
        .footer-col h3{
            margin:0 0 12px;
            font-size:18px;
            line-height:1.25;
        }
        .footer-col p{
            margin:0;
            color:var(--muted);
        }
        .footer-links{
            display:grid;
            gap:10px;
        }
        .footer-links a{
            color:var(--muted);
            width:fit-content;
        }
        .footer-links a:hover{color:var(--accent)}
        .copyright{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            padding:16px 2px 0;
            color:var(--muted);
            font-size:13px;
        }
        .copyright a{color:var(--muted)}
        .copyright a:hover{color:var(--accent)}
        .empty-state{
            margin:34px 0 10px;
            padding:44px 28px;
            text-align:center;
            background:var(--surface);
            border:1px solid rgba(58,45,33,.10);
            border-radius:var(--radius-xl);
            box-shadow:var(--shadow-soft);
        }
        .empty-badge{
            display:inline-flex;
            align-items:center;
            padding:6px 12px;
            border-radius:999px;
            background:rgba(185,111,52,.10);
            color:var(--accent);
            font-size:13px;
            margin-bottom:14px;
        }
        .empty-state h1{
            margin:0;
            font-size:clamp(28px, 3vw, 44px);
            line-height:1.12;
        }
        .empty-state p{
            margin:14px auto 0;
            max-width:36rem;
            color:var(--muted);
        }
        .empty-actions{
            display:flex;
            justify-content:center;
            gap:12px;
            margin-top:22px;
            flex-wrap:wrap;
        }
        @media (max-width: 1199.98px){
            .hero-grid,
            .article-grid,
            .cta-box{
                grid-template-columns:1fr;
            }
            .article-aside{
                position:static;
            }
        }
        @media (max-width: 991.98px){
            .header-inner{
                flex-wrap:wrap;
            }
            .header-action{
                margin-left:0;
            }
            .footer-panel{
                grid-template-columns:1fr;
            }
            .related-grid{
                grid-template-columns:1fr;
            }
        }
        @media (max-width: 767.98px){
            .container{width:min(100% - 28px, var(--container))}
            .topbar-inner{
                flex-direction:column;
                align-items:flex-start;
                justify-content:flex-start;
            }
            .nav{
                justify-content:flex-start;
                width:100%;
                overflow:auto;
                padding-bottom:2px;
                scrollbar-width:none;
            }
            .nav::-webkit-scrollbar{display:none}
            .hero-copy h1{max-width:none}
            .hero-actions,
            .cta-actions,
            .article-actions{
                width:100%;
            }
            .hero-actions .btn,
            .cta-actions .btn,
            .article-actions .btn{
                flex:1 1 160px;
            }
            .visual-card{
                grid-template-columns:1fr;
            }
            .visual-card img{
                width:100%;
                height:150px;
            }
            .article-main,
            .side-card{
                padding:20px;
            }
            .cta-box{
                padding:22px 18px;
            }
            .copyright{
                flex-direction:column;
                align-items:flex-start;
            }
        }
        @media (max-width: 519.98px){
            .header-inner{
                gap:12px;
            }
            .brand-mark{
                width:38px;height:38px;border-radius:12px;font-size:14px;
            }
            .brand-name{font-size:16px}
            .brand-sub{font-size:11px}
            .nav a{
                padding:9px 12px;
                font-size:14px;
            }
            .page-hero{
                padding:32px 0 22px;
            }
            .hero-lead,
            .article-content{
                font-size:15px;
            }
            .article-meta-row{
                gap:8px;
            }
            .side-list li{
                flex-direction:column;
                align-items:flex-start;
                gap:4px;
            }
            .side-list strong{text-align:left}
            .faq-item summary,
            .faq-answer{
                padding-left:16px;
                padding-right:16px;
            }
        }

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