/* roulang page: index */
:root{
            --bg: #f5f1e8;
            --surface: rgba(255,255,255,0.86);
            --surface-strong: #ffffff;
            --text: #17231d;
            --muted: #5f6f69;
            --line: rgba(23,35,29,0.12);
            --brand: #173229;
            --brand-2: #2f5a49;
            --accent: #b88a3b;
            --accent-2: #d7b671;
            --shadow: 0 14px 32px rgba(17, 28, 24, 0.08);
            --shadow-soft: 0 8px 18px rgba(17, 28, 24, 0.05);
            --radius-xl: 28px;
            --radius-lg: 22px;
            --radius-md: 16px;
            --radius-sm: 12px;
            --container: 1180px;
            --gap: clamp(18px, 2.5vw, 30px);
            --transition: 220ms ease;
        }

        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
            color:var(--text);
            background:
                radial-gradient(circle at top left, rgba(216, 181, 113, 0.18), transparent 32%),
                linear-gradient(180deg, #f7f3eb 0%, #f5f1e8 42%, #efe9dd 100%);
            line-height:1.75;
            letter-spacing:0.01em;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
        }

        img{
            display:block;
            max-width:100%;
            height:auto;
        }

        a{
            color:inherit;
            text-decoration:none;
            transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition), opacity var(--transition);
        }

        button,input,textarea{
            font:inherit;
        }

        button{
            border:0;
            background:none;
            color:inherit;
            cursor:pointer;
        }

        ::selection{
            background: rgba(183, 138, 59, 0.25);
        }

        .skip-link{
            position:absolute;
            left:12px;
            top:12px;
            z-index:9999;
            padding:10px 14px;
            border-radius:999px;
            background:var(--brand);
            color:#fff;
            transform:translateY(-160%);
            transition:transform var(--transition);
        }
        .skip-link:focus{transform:translateY(0)}

        .container{
            width:min(var(--container), calc(100% - 32px));
            margin:0 auto;
        }

        .site-header{
            position:sticky;
            top:0;
            z-index:1000;
            backdrop-filter:saturate(180%) blur(16px);
            background:rgba(247,243,235,0.84);
            border-bottom:1px solid rgba(23,35,29,0.08);
        }

        .header-inner{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            min-height:76px;
        }

        .brand{
            display:flex;
            align-items:center;
            gap:14px;
            min-width:0;
        }

        .brand-mark{
            width:46px;
            height:46px;
            border-radius:16px;
            background:linear-gradient(145deg, var(--brand), var(--brand-2));
            color:#fff;
            display:grid;
            place-items:center;
            font-weight:800;
            letter-spacing:0.08em;
            box-shadow: var(--shadow-soft);
            flex:0 0 auto;
        }

        .brand-text{
            display:flex;
            flex-direction:column;
            min-width:0;
        }

        .brand-title{
            font-size:1.02rem;
            line-height:1.25;
            font-weight:800;
            letter-spacing:0.02em;
            white-space:nowrap;
        }

        .brand-sub{
            font-size:0.82rem;
            color:var(--muted);
            white-space:nowrap;
        }

        .site-nav{
            display:flex;
            align-items:center;
            gap:8px;
        }

        .nav-link{
            padding:10px 14px;
            border-radius:999px;
            color:var(--muted);
            border:1px solid transparent;
            font-weight:600;
            font-size:0.95rem;
        }

        .nav-link:hover,
        .nav-link:focus-visible{
            color:var(--brand);
            border-color:rgba(23,50,41,0.12);
            background:rgba(255,255,255,0.62);
            outline:none;
        }

        .nav-link.active{
            color:#fff;
            background:linear-gradient(135deg, var(--brand), var(--brand-2));
            box-shadow:0 8px 16px rgba(23,50,41,0.16);
        }

        .header-actions{
            display:flex;
            align-items:center;
            gap:10px;
        }

        .menu-toggle{
            display:none;
            align-items:center;
            justify-content:center;
            width:44px;
            height:44px;
            border-radius:14px;
            background:rgba(255,255,255,0.78);
            border:1px solid var(--line);
            box-shadow:var(--shadow-soft);
        }

        .menu-lines{
            width:18px;
            height:12px;
            position:relative;
        }
        .menu-lines span{
            position:absolute;
            left:0;
            width:100%;
            height:2px;
            border-radius:2px;
            background:var(--brand);
            transition:transform var(--transition), top var(--transition), opacity var(--transition);
        }
        .menu-lines span:nth-child(1){top:0}
        .menu-lines span:nth-child(2){top:5px}
        .menu-lines span:nth-child(3){top:10px}

        .header-cta{
            padding:12px 18px;
            border-radius:999px;
            background:linear-gradient(135deg, var(--accent), #d7b671);
            color:#2b2112;
            font-weight:800;
            box-shadow:0 10px 18px rgba(184,138,59,0.18);
            white-space:nowrap;
        }
        .header-cta:hover,
        .header-cta:focus-visible{
            transform:translateY(-1px);
            filter:brightness(1.02);
            outline:none;
        }

        .hero{
            position:relative;
            overflow:hidden;
            padding:30px 0 18px;
        }

        .hero-shell{
            position:relative;
            border-radius:clamp(24px, 3vw, 36px);
            overflow:hidden;
            background:
                linear-gradient(90deg, rgba(9,17,14,0.84) 0%, rgba(23,50,41,0.76) 44%, rgba(23,50,41,0.24) 100%),
                url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
            box-shadow: 0 24px 50px rgba(12,18,16,0.14);
        }

        .hero-shell::after{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(180deg, rgba(8,14,11,0.18), rgba(8,14,11,0.06) 35%, rgba(8,14,11,0.26));
            pointer-events:none;
        }

        .hero-inner{
            position:relative;
            z-index:1;
            display:grid;
            grid-template-columns: 1.05fr 0.95fr;
            gap: clamp(20px, 3vw, 42px);
            align-items:stretch;
            padding: clamp(28px, 5vw, 60px);
            color:#fff;
        }

        .hero-copy{
            display:flex;
            flex-direction:column;
            justify-content:center;
            gap:18px;
            padding:8px 0;
        }

        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            width:max-content;
            padding:8px 14px;
            border-radius:999px;
            background:rgba(255,255,255,0.12);
            border:1px solid rgba(255,255,255,0.16);
            color:#f5f1e8;
            font-size:0.9rem;
            letter-spacing:0.04em;
        }

        .eyebrow-dot{
            width:8px;
            height:8px;
            border-radius:999px;
            background:var(--accent-2);
            box-shadow:0 0 0 6px rgba(215,182,113,0.14);
        }

        .hero h1{
            margin:0;
            font-size: clamp(2.05rem, 4vw, 4.1rem);
            line-height:1.12;
            letter-spacing:0.01em;
            text-wrap:balance;
        }

        .hero-lead{
            margin:0;
            max-width: 36rem;
            font-size: clamp(1rem, 1.15vw, 1.12rem);
            color:rgba(255,255,255,0.88);
        }

        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:4px;
        }

        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            min-height:48px;
            padding:0 18px;
            border-radius:999px;
            font-weight:800;
            border:1px solid transparent;
            transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition);
        }

        .btn-primary{
            background:linear-gradient(135deg, var(--accent), var(--accent-2));
            color:#2c2211;
            box-shadow:0 12px 22px rgba(184,138,59,0.22);
        }
        .btn-primary:hover,
        .btn-primary:focus-visible{
            transform:translateY(-1px);
            filter:brightness(1.02);
            outline:none;
        }

        .btn-secondary{
            color:#fff;
            border-color:rgba(255,255,255,0.22);
            background:rgba(255,255,255,0.06);
            backdrop-filter: blur(6px);
        }
        .btn-secondary:hover,
        .btn-secondary:focus-visible{
            background:rgba(255,255,255,0.12);
            transform:translateY(-1px);
            outline:none;
        }

        .hero-points{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:6px;
        }

        .hero-tag{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:10px 14px;
            border-radius:999px;
            background:rgba(255,255,255,0.12);
            border:1px solid rgba(255,255,255,0.14);
            color:#f8f5ef;
            font-size:0.92rem;
        }

        .hero-visual{
            display:flex;
            align-items:flex-end;
        }

        .visual-card{
            width:100%;
            background:rgba(255,255,255,0.1);
            border:1px solid rgba(255,255,255,0.12);
            border-radius:28px;
            padding:14px;
            box-shadow: 0 18px 40px rgba(0,0,0,0.16);
            backdrop-filter: blur(10px);
        }

        .visual-media{
            position:relative;
            overflow:hidden;
            border-radius:22px;
            aspect-ratio: 16 / 11;
            background:#102019;
        }
        .visual-media img{
            width:100%;
            height:100%;
            object-fit:cover;
            transform:scale(1.01);
            transition: transform 520ms ease;
        }
        .visual-card:hover .visual-media img{
            transform:scale(1.05);
        }

        .visual-badge{
            position:absolute;
            left:16px;
            top:16px;
            padding:8px 12px;
            border-radius:999px;
            background:rgba(10,16,13,0.68);
            color:#fff;
            font-size:0.84rem;
            letter-spacing:0.04em;
        }

        .visual-note{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:12px;
            margin-top:14px;
        }

        .mini-panel{
            padding:14px;
            border-radius:18px;
            background:rgba(255,255,255,0.9);
            color:var(--text);
            box-shadow: inset 0 0 0 1px rgba(23,35,29,0.06);
        }

        .mini-panel strong{
            display:block;
            font-size:1rem;
            margin-bottom:4px;
        }

        .mini-panel span{
            color:var(--muted);
            font-size:0.92rem;
        }

        .section{
            padding: 22px 0;
        }

        .section-head{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:20px;
            margin-bottom:18px;
        }

        .section-title{
            margin:0;
            font-size: clamp(1.45rem, 2vw, 2.2rem);
            line-height:1.2;
            letter-spacing:0.01em;
        }

        .section-desc{
            margin:0;
            max-width: 44rem;
            color:var(--muted);
        }

        .quick-strip{
            margin-top:-4px;
        }

        .strip-grid{
            display:grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap:14px;
        }

        .strip-card{
            padding:18px 18px 17px;
            border-radius:22px;
            background:rgba(255,255,255,0.82);
            border:1px solid rgba(23,35,29,0.08);
            box-shadow:var(--shadow-soft);
        }

        .strip-card .label{
            font-size:0.88rem;
            color:var(--muted);
            display:block;
            margin-bottom:7px;
        }

        .strip-card strong{
            display:block;
            font-size:1.08rem;
            margin-bottom:6px;
            color:var(--brand);
        }

        .strip-card p{
            margin:0;
            color:var(--muted);
            font-size:0.96rem;
        }

        .cards-grid{
            display:grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap:var(--gap);
        }

        .info-card{
            position:relative;
            overflow:hidden;
            padding:22px;
            min-height: 220px;
            border-radius:24px;
            background:var(--surface);
            border:1px solid var(--line);
            box-shadow:var(--shadow-soft);
            display:flex;
            flex-direction:column;
            gap:16px;
            transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
        }

        .info-card:hover{
            transform:translateY(-4px);
            box-shadow:var(--shadow);
            border-color:rgba(23,50,41,0.16);
            background:#fff;
        }

        .card-icon{
            width:48px;
            height:48px;
            border-radius:16px;
            display:grid;
            place-items:center;
            color:#fff;
            background:linear-gradient(135deg, var(--brand), var(--brand-2));
            box-shadow:0 10px 16px rgba(23,50,41,0.16);
            flex:0 0 auto;
        }

        .card-icon svg{
            width:22px;
            height:22px;
            stroke:currentColor;
            fill:none;
            stroke-width:1.8;
            stroke-linecap:round;
            stroke-linejoin:round;
        }

        .info-card h3{
            margin:0;
            font-size:1.08rem;
            line-height:1.35;
        }

        .info-card p{
            margin:0;
            color:var(--muted);
            font-size:0.96rem;
        }

        .card-foot{
            margin-top:auto;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            color:var(--brand-2);
            font-weight:700;
            font-size:0.95rem;
        }

        .card-arrow{
            width:30px;
            height:30px;
            border-radius:999px;
            display:grid;
            place-items:center;
            background:rgba(23,50,41,0.08);
        }

        .media-split{
            display:grid;
            grid-template-columns: 1.15fr 0.85fr;
            gap:var(--gap);
            align-items:stretch;
        }

        .feature-panel{
            position:relative;
            overflow:hidden;
            border-radius:28px;
            min-height: 440px;
            background:linear-gradient(180deg, rgba(13,20,17,0.02), rgba(13,20,17,0.02));
            border:1px solid var(--line);
            box-shadow:var(--shadow-soft);
        }

        .feature-panel img{
            width:100%;
            height:100%;
            object-fit:cover;
        }

        .feature-overlay{
            position:absolute;
            inset:auto 18px 18px 18px;
            padding:18px;
            border-radius:22px;
            background:rgba(255,255,255,0.9);
            border:1px solid rgba(23,35,29,0.08);
            box-shadow:var(--shadow-soft);
        }

        .feature-overlay h3{
            margin:0 0 8px;
            font-size:1.18rem;
        }

        .feature-overlay p{
            margin:0;
            color:var(--muted);
        }

        .points-panel{
            display:flex;
            flex-direction:column;
            gap:14px;
        }

        .point-item{
            display:flex;
            gap:14px;
            align-items:flex-start;
            padding:18px;
            border-radius:22px;
            background:var(--surface);
            border:1px solid var(--line);
            box-shadow:var(--shadow-soft);
            transition:transform var(--transition), box-shadow var(--transition);
        }
        .point-item:hover{
            transform:translateY(-2px);
            box-shadow:var(--shadow);
        }

        .point-index{
            width:38px;
            height:38px;
            border-radius:14px;
            display:grid;
            place-items:center;
            background:rgba(183,138,59,0.14);
            color:var(--brand);
            font-weight:800;
            flex:0 0 auto;
        }

        .point-item h3{
            margin:0 0 6px;
            font-size:1.03rem;
        }
        .point-item p{
            margin:0;
            color:var(--muted);
            font-size:0.95rem;
        }

        .thumb-grid{
            display:grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap:14px;
            margin-top:4px;
        }

        .thumb-card{
            overflow:hidden;
            border-radius:22px;
            background:#fff;
            border:1px solid var(--line);
            box-shadow:var(--shadow-soft);
            transition: transform var(--transition), box-shadow var(--transition);
        }
        .thumb-card:hover{
            transform:translateY(-3px);
            box-shadow:var(--shadow);
        }

        .thumb-media{
            aspect-ratio: 4/3;
            overflow:hidden;
        }
        .thumb-media img{
            width:100%;
            height:100%;
            object-fit:cover;
            transition:transform 480ms ease;
        }
        .thumb-card:hover .thumb-media img{
            transform:scale(1.04);
        }

        .thumb-body{
            padding:14px 15px 16px;
        }
        .thumb-body strong{
            display:block;
            margin-bottom:6px;
            font-size:1rem;
        }
        .thumb-body span{
            color:var(--muted);
            font-size:0.94rem;
        }

        .link-band{
            display:grid;
            grid-template-columns: 1.1fr 0.9fr;
            gap:var(--gap);
            align-items:stretch;
        }

        .band-card{
            position:relative;
            overflow:hidden;
            border-radius:28px;
            min-height: 310px;
            padding:28px;
            background:
                linear-gradient(135deg, rgba(23,50,41,0.94), rgba(47,90,73,0.9)),
                url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
            color:#fff;
            box-shadow: 0 20px 40px rgba(19,31,26,0.14);
        }

        .band-card h3{
            margin:0 0 10px;
            font-size:1.6rem;
        }
        .band-card p{
            margin:0;
            max-width: 34rem;
            color:rgba(255,255,255,0.86);
        }

        .band-list{
            margin:18px 0 0;
            padding:0;
            list-style:none;
            display:grid;
            gap:10px;
        }

        .band-list li{
            display:flex;
            gap:10px;
            align-items:flex-start;
            color:#f5f1e8;
        }

        .band-list li::before{
            content:"";
            width:10px;
            height:10px;
            border-radius:999px;
            margin-top:9px;
            background:var(--accent-2);
            box-shadow:0 0 0 6px rgba(215,182,113,0.12);
            flex:0 0 auto;
        }

        .band-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:22px;
        }

        .card-spotlight{
            display:grid;
            grid-template-columns:1fr;
            gap:14px;
        }

        .spot-card{
            overflow:hidden;
            border-radius:24px;
            background:var(--surface);
            border:1px solid var(--line);
            box-shadow:var(--shadow-soft);
        }

        .spot-card .spot-img{
            aspect-ratio: 16/9;
            overflow:hidden;
        }
        .spot-card .spot-img img{
            width:100%;
            height:100%;
            object-fit:cover;
            transition:transform 520ms ease;
        }
        .spot-card:hover .spot-img img{
            transform:scale(1.05);
        }

        .spot-body{
            padding:16px 18px 18px;
        }
        .spot-body strong{
            display:block;
            font-size:1.05rem;
            margin-bottom:6px;
        }
        .spot-body p{
            margin:0;
            color:var(--muted);
            font-size:0.95rem;
        }

        .route-grid{
            display:grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap:14px;
        }

        .route{
            position:relative;
            padding:22px 18px 18px;
            border-radius:22px;
            background:rgba(255,255,255,0.82);
            border:1px solid var(--line);
            box-shadow:var(--shadow-soft);
        }

        .route .step{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            width:40px;
            height:40px;
            border-radius:14px;
            background:linear-gradient(135deg, var(--brand), var(--brand-2));
            color:#fff;
            font-weight:800;
            margin-bottom:14px;
        }

        .route h3{
            margin:0 0 8px;
            font-size:1.04rem;
        }

        .route p{
            margin:0;
            color:var(--muted);
            font-size:0.95rem;
        }

        .faq-list{
            display:grid;
            gap:12px;
        }

        details.faq-item{
            border-radius:20px;
            background:rgba(255,255,255,0.85);
            border:1px solid var(--line);
            box-shadow:var(--shadow-soft);
            overflow:hidden;
        }

        details.faq-item[open]{
            border-color: rgba(23,50,41,0.16);
            box-shadow:var(--shadow);
        }

        .faq-item summary{
            list-style:none;
            cursor:pointer;
            padding:18px 20px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            font-weight:700;
            color:var(--brand);
        }

        .faq-item summary::-webkit-details-marker{display:none}

        .faq-item summary::after{
            content:"+";
            width:28px;
            height:28px;
            border-radius:999px;
            display:grid;
            place-items:center;
            flex:0 0 auto;
            color:var(--brand);
            background:rgba(23,50,41,0.08);
            transition:transform var(--transition), background var(--transition);
        }

        details[open] summary::after{
            content:"–";
            background:rgba(184,138,59,0.14);
        }

        .faq-content{
            padding:0 20px 18px;
            color:var(--muted);
        }

        .faq-content p{
            margin:0;
        }

        .cta{
            padding: 8px 0 32px;
        }

        .cta-box{
            overflow:hidden;
            position:relative;
            border-radius: 32px;
            background:
                radial-gradient(circle at top right, rgba(215,182,113,0.18), transparent 30%),
                linear-gradient(135deg, #173229 0%, #1f4034 100%);
            color:#fff;
            box-shadow: 0 22px 44px rgba(16,25,21,0.16);
        }

        .cta-box-inner{
            display:grid;
            grid-template-columns:1.1fr 0.9fr;
            gap:20px;
            padding: clamp(26px, 4vw, 42px);
            align-items:center;
        }

        .cta-box h2{
            margin:0 0 10px;
            font-size: clamp(1.5rem, 2.4vw, 2.4rem);
            line-height:1.2;
        }

        .cta-box p{
            margin:0;
            color:rgba(255,255,255,0.86);
            max-width:40rem;
        }

        .cta-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            justify-content:flex-end;
        }

        .btn-light{
            background:#f7f2e7;
            color:#173229;
            box-shadow:none;
        }
        .btn-light:hover,
        .btn-light:focus-visible{
            transform:translateY(-1px);
            background:#fff;
            outline:none;
        }

        .btn-ghost{
            color:#fff;
            border:1px solid rgba(255,255,255,0.24);
            background:rgba(255,255,255,0.06);
        }
        .btn-ghost:hover,
        .btn-ghost:focus-visible{
            background:rgba(255,255,255,0.12);
            transform:translateY(-1px);
            outline:none;
        }

        .site-footer{
            padding:28px 0 36px;
        }

        .footer-shell{
            padding:24px;
            border-radius:28px;
            background:rgba(255,255,255,0.72);
            border:1px solid rgba(23,35,29,0.08);
            box-shadow:var(--shadow-soft);
        }

        .footer-top{
            display:grid;
            grid-template-columns: 1.2fr 0.8fr;
            gap:20px;
            align-items:start;
            padding-bottom:20px;
            border-bottom:1px solid rgba(23,35,29,0.08);
        }

        .footer-brand{
            display:flex;
            flex-direction:column;
            gap:8px;
        }

        .footer-brand strong{
            font-size:1.05rem;
        }

        .footer-brand p{
            margin:0;
            color:var(--muted);
            max-width:42rem;
        }

        .footer-nav{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            justify-content:flex-end;
        }

        .footer-link{
            padding:9px 13px;
            border-radius:999px;
            background:rgba(23,50,41,0.06);
            color:var(--brand);
            border:1px solid transparent;
            font-weight:700;
            font-size:0.95rem;
        }
        .footer-link:hover,
        .footer-link:focus-visible{
            background:#fff;
            border-color:rgba(23,50,41,0.12);
            transform:translateY(-1px);
            outline:none;
        }

        .footer-bottom{
            display:flex;
            flex-wrap:wrap;
            justify-content:space-between;
            gap:12px;
            padding-top:18px;
            color:var(--muted);
            font-size:0.92rem;
        }

        .brand-seal{
            display:grid;
            grid-template-columns: 1fr auto;
            gap:12px;
            align-items:center;
            margin-top:16px;
            padding:16px 18px;
            border-radius:20px;
            background:linear-gradient(135deg, rgba(23,50,41,0.06), rgba(183,138,59,0.08));
            border:1px solid rgba(23,35,29,0.08);
        }

        .brand-seal strong{
            font-size:1.02rem;
            color:var(--brand);
        }
        .brand-seal span{
            color:var(--muted);
        }

        .top-anchor{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:10px 14px;
            border-radius:999px;
            background:#fff;
            border:1px solid rgba(23,35,29,0.08);
            box-shadow:var(--shadow-soft);
            font-weight:700;
            color:var(--brand);
        }

        .top-anchor:hover,
        .top-anchor:focus-visible{
            transform:translateY(-1px);
            outline:none;
        }

        .mobile-nav-wrap{
            display:contents;
        }

        @media (max-width: 1100px){
            .cards-grid{
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .media-split,
            .link-band,
            .cta-box-inner,
            .footer-top,
            .hero-inner{
                grid-template-columns:1fr;
            }
            .cta-actions{
                justify-content:flex-start;
            }
            .route-grid{
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .hero-visual{
                order:-1;
            }
            .hero-lead{
                max-width:none;
            }
        }

        @media (max-width: 768px){
            .header-inner{
                min-height:68px;
            }
            .menu-toggle{
                display:inline-flex;
            }
            .site-nav{
                position:absolute;
                left:16px;
                right:16px;
                top:calc(100% + 10px);
                display:grid;
                gap:8px;
                padding:14px;
                border-radius:22px;
                background:rgba(247,243,235,0.98);
                border:1px solid rgba(23,35,29,0.08);
                box-shadow:var(--shadow);
                transform:translateY(-10px);
                opacity:0;
                pointer-events:none;
                transition:opacity var(--transition), transform var(--transition);
            }
            .site-header.nav-open .site-nav{
                opacity:1;
                transform:translateY(0);
                pointer-events:auto;
            }
            .nav-link{
                width:100%;
                justify-content:center;
                text-align:center;
            }
            .header-cta{
                display:none;
            }
            .strip-grid,
            .cards-grid,
            .route-grid,
            .visual-note,
            .thumb-grid{
                grid-template-columns:1fr;
            }
            .section-head{
                flex-direction:column;
                align-items:flex-start;
            }
            .hero{
                padding-top:18px;
            }
            .hero-inner{
                padding:22px;
            }
            .hero h1{
                font-size: clamp(1.9rem, 7vw, 2.8rem);
            }
            .band-card,
            .feature-panel{
                min-height:auto;
            }
            .band-card{
                padding:22px;
            }
            .footer-nav{
                justify-content:flex-start;
            }
            .brand-seal{
                grid-template-columns:1fr;
            }
        }

        @media (max-width: 520px){
            .container{
                width:min(var(--container), calc(100% - 24px));
            }
            .hero-inner{
                padding:18px;
            }
            .eyebrow{
                font-size:0.84rem;
            }
            .btn{
                width:100%;
            }
            .hero-actions,
            .band-actions{
                display:grid;
                gap:10px;
            }
            .info-card,
            .point-item,
            .route,
            .strip-card{
                padding:16px;
            }
            .faq-item summary,
            .faq-content{
                padding-left:16px;
                padding-right:16px;
            }
            .footer-shell{
                padding:18px;
            }
        }

        .muted{
            color:var(--muted);
        }

        .inline-link{
            color:var(--brand-2);
            font-weight:700;
        }
        .inline-link:hover,
        .inline-link:focus-visible{
            color:var(--brand);
            outline:none;
        }

/* roulang page: category1 */
:root{
      --bg:#f7f3ea;
      --bg-soft:#fffcf5;
      --panel:#ffffff;
      --ink:#1f2421;
      --muted:#69716c;
      --subtle:#8a918b;
      --line:#e7ded0;
      --line-strong:#d7cab8;
      --green:#1f5b4a;
      --green-2:#2f725f;
      --green-soft:#e8f1ec;
      --gold:#b88945;
      --gold-soft:#f4ead7;
      --charcoal:#252927;
      --shadow:0 18px 45px rgba(44,39,30,.10);
      --shadow-soft:0 10px 28px rgba(44,39,30,.08);
      --radius-lg:24px;
      --radius-md:18px;
      --radius-sm:12px;
      --container:1180px;
      --header-h:76px;
      --ease:all .24s ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
      color:var(--ink);
      background:
        radial-gradient(circle at 4% 8%, rgba(184,137,69,.12), transparent 28%),
        linear-gradient(180deg, #faf6ee 0%, var(--bg) 48%, #f4efe5 100%);
      line-height:1.72;
      min-width:320px;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,textarea{font:inherit}
    button{cursor:pointer;border:0;background:none}
    :focus-visible{outline:3px solid rgba(184,137,69,.42);outline-offset:3px}
    .container{
      width:min(var(--container), calc(100% - 40px));
      margin:0 auto;
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:50;
      height:var(--header-h);
      background:rgba(255,252,245,.88);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(231,222,208,.86);
      transition:var(--ease);
    }
    .header-inner{
      height:var(--header-h);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:22px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:max-content;
    }
    .brand-mark{
      width:42px;
      height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
      color:#fff;
      font-weight:800;
      letter-spacing:.03em;
      background:linear-gradient(135deg,var(--green),#153d34);
      box-shadow:0 10px 24px rgba(31,91,74,.22);
      position:relative;
      overflow:hidden;
    }
    .brand-mark:after{
      content:"";
      position:absolute;
      inset:auto -10px -12px auto;
      width:28px;
      height:28px;
      background:rgba(184,137,69,.65);
      border-radius:50%;
    }
    .brand-text{
      display:flex;
      flex-direction:column;
      line-height:1.18;
    }
    .brand-text strong{
      font-size:18px;
      letter-spacing:.02em;
      color:var(--charcoal);
    }
    .brand-text span{
      font-size:12px;
      color:var(--muted);
      margin-top:2px;
    }
    .site-nav{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      padding:6px;
      background:rgba(255,255,255,.56);
      border:1px solid rgba(231,222,208,.84);
      border-radius:999px;
    }
    .nav-link{
      display:inline-flex;
      align-items:center;
      min-height:38px;
      padding:0 16px;
      border-radius:999px;
      color:#4f5852;
      font-size:14px;
      font-weight:650;
      transition:var(--ease);
    }
    .nav-link:hover{
      color:var(--green);
      background:var(--green-soft);
    }
    .nav-link.active{
      color:#fff;
      background:var(--green);
      box-shadow:0 8px 18px rgba(31,91,74,.18);
    }
    .header-cta{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:42px;
      padding:0 18px;
      border-radius:999px;
      background:var(--gold);
      color:#fff;
      font-weight:750;
      font-size:14px;
      box-shadow:0 12px 24px rgba(184,137,69,.22);
      transition:var(--ease);
      white-space:nowrap;
    }
    .header-cta:hover{
      transform:translateY(-1px);
      background:#a7793b;
    }
    .menu-toggle{
      display:none;
      width:42px;
      height:42px;
      border-radius:14px;
      border:1px solid var(--line);
      background:#fffaf1;
      color:var(--green);
    }
    .menu-toggle span{
      display:block;
      width:18px;
      height:2px;
      background:currentColor;
      margin:4px auto;
      border-radius:2px;
      transition:var(--ease);
    }

    .page-hero{
      padding:54px 0 40px;
    }
    .hero-shell{
      position:relative;
      overflow:hidden;
      min-height:430px;
      border-radius:32px;
      background:
        linear-gradient(105deg, rgba(31,36,33,.92) 0%, rgba(31,36,33,.84) 42%, rgba(31,36,33,.36) 100%),
        url("/assets/images/backpic/back-2.webp") center/cover no-repeat;
      box-shadow:var(--shadow);
      border:1px solid rgba(255,255,255,.18);
      display:grid;
      grid-template-columns:1.08fr .92fr;
      align-items:end;
      gap:28px;
      padding:46px;
    }
    .hero-shell:before{
      content:"";
      position:absolute;
      width:340px;
      height:340px;
      right:-120px;
      top:-110px;
      border-radius:50%;
      background:rgba(184,137,69,.22);
      filter:blur(2px);
    }
    .breadcrumb{
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap:8px;
      margin-bottom:18px;
      color:rgba(255,255,255,.76);
      font-size:14px;
    }
    .breadcrumb a{
      transition:var(--ease);
    }
    .breadcrumb a:hover{color:#fff}
    .crumb-sep{opacity:.7}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border:1px solid rgba(244,234,215,.32);
      border-radius:999px;
      background:rgba(255,255,255,.10);
      color:#f4ead7;
      font-weight:700;
      font-size:13px;
      margin-bottom:16px;
    }
    .eyebrow:before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--gold);
      box-shadow:0 0 0 5px rgba(184,137,69,.18);
    }
    h1{
      margin:0;
      color:#fff;
      font-size:clamp(34px,5vw,58px);
      line-height:1.12;
      letter-spacing:-.035em;
      max-width:760px;
    }
    .hero-lead{
      margin:18px 0 0;
      color:rgba(255,255,255,.82);
      font-size:18px;
      max-width:650px;
    }
    .hero-actions{
      display:flex;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
      margin-top:28px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      min-height:48px;
      padding:0 20px;
      border-radius:999px;
      font-weight:760;
      transition:var(--ease);
      border:1px solid transparent;
      white-space:nowrap;
    }
    .btn-primary{
      background:var(--gold);
      color:#fff;
      box-shadow:0 14px 24px rgba(184,137,69,.24);
    }
    .btn-primary:hover{background:#a7793b;transform:translateY(-2px)}
    .btn-secondary{
      color:#fff;
      border-color:rgba(255,255,255,.35);
      background:rgba(255,255,255,.10);
    }
    .btn-secondary:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
    .hero-panel{
      position:relative;
      z-index:1;
      justify-self:end;
      width:min(100%,430px);
      background:rgba(255,252,245,.94);
      border:1px solid rgba(255,255,255,.5);
      border-radius:26px;
      padding:20px;
      box-shadow:0 26px 70px rgba(0,0,0,.22);
    }
    .hero-panel img{
      height:190px;
      width:100%;
      object-fit:cover;
      border-radius:20px;
      border:1px solid rgba(231,222,208,.9);
    }
    .panel-list{
      margin:18px 0 0;
      display:grid;
      gap:12px;
    }
    .panel-item{
      display:flex;
      align-items:flex-start;
      gap:12px;
      padding:12px;
      border-radius:16px;
      background:#fffaf1;
      border:1px solid var(--line);
    }
    .panel-icon{
      width:32px;
      height:32px;
      flex:0 0 32px;
      border-radius:11px;
      display:grid;
      place-items:center;
      background:var(--green-soft);
      color:var(--green);
      font-weight:900;
    }
    .panel-item strong{
      display:block;
      font-size:15px;
      line-height:1.3;
      margin-bottom:2px;
    }
    .panel-item span{
      display:block;
      font-size:13px;
      color:var(--muted);
      line-height:1.55;
    }

    main{overflow:hidden}
    .section{
      padding:54px 0;
    }
    .section-head{
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:24px;
      margin-bottom:26px;
    }
    .section-kicker{
      color:var(--gold);
      font-weight:800;
      font-size:13px;
      letter-spacing:.06em;
      margin-bottom:8px;
    }
    h2{
      margin:0;
      font-size:clamp(26px,3.1vw,40px);
      line-height:1.18;
      letter-spacing:-.03em;
      color:var(--charcoal);
    }
    .section-desc{
      margin:0;
      max-width:520px;
      color:var(--muted);
    }
    .filter-bar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      padding:16px;
      border:1px solid var(--line);
      border-radius:22px;
      background:rgba(255,252,245,.78);
      box-shadow:var(--shadow-soft);
      margin-bottom:28px;
    }
    .tag-group{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:38px;
      padding:0 14px;
      border:1px solid var(--line-strong);
      border-radius:999px;
      background:#fff;
      color:#4b554f;
      font-size:14px;
      font-weight:700;
      transition:var(--ease);
    }
    .tag:hover{
      border-color:rgba(31,91,74,.42);
      color:var(--green);
      transform:translateY(-1px);
    }
    .tag.active{
      background:var(--green);
      color:#fff;
      border-color:var(--green);
    }
    .filter-note{
      color:var(--muted);
      font-size:14px;
      white-space:nowrap;
    }
    .service-grid{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:24px;
      align-items:stretch;
    }
    .feature-card{
      background:var(--panel);
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow-soft);
      overflow:hidden;
      transition:var(--ease);
    }
    .feature-card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow);
    }
    .feature-image{
      position:relative;
      height:260px;
      overflow:hidden;
      background:#e8dfd0;
    }
    .feature-image img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform .45s ease;
    }
    .feature-card:hover .feature-image img{transform:scale(1.035)}
    .image-badge{
      position:absolute;
      left:18px;
      top:18px;
      display:inline-flex;
      align-items:center;
      padding:7px 12px;
      border-radius:999px;
      background:rgba(31,91,74,.92);
      color:#fff;
      font-size:13px;
      font-weight:750;
    }
    .feature-body{
      padding:24px;
    }
    .meta-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-bottom:14px;
    }
    .meta{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:5px 10px;
      border-radius:999px;
      background:var(--gold-soft);
      color:#79582d;
      font-size:12px;
      font-weight:800;
    }
    .feature-body h3,.list-card h3,.process-card h3,.recommend-card h3{
      margin:0 0 10px;
      color:var(--charcoal);
      font-size:22px;
      line-height:1.28;
      letter-spacing:-.02em;
    }
    .feature-body p,.list-card p,.process-card p,.recommend-card p{
      margin:0;
      color:var(--muted);
    }
    .card-link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin-top:18px;
      color:var(--green);
      font-weight:850;
      transition:var(--ease);
    }
    .card-link:hover{
      gap:12px;
      color:var(--green-2);
    }
    .list-stack{
      display:grid;
      gap:16px;
    }
    .list-card{
      display:grid;
      grid-template-columns:88px 1fr;
      gap:18px;
      padding:18px;
      border:1px solid var(--line);
      border-radius:var(--radius-md);
      background:rgba(255,255,255,.84);
      box-shadow:0 8px 24px rgba(44,39,30,.06);
      transition:var(--ease);
    }
    .list-card:hover{
      transform:translateY(-3px);
      border-color:rgba(31,91,74,.22);
      box-shadow:var(--shadow-soft);
    }
    .list-icon{
      width:88px;
      height:88px;
      border-radius:20px;
      display:grid;
      place-items:center;
      color:var(--green);
      background:linear-gradient(145deg,var(--green-soft),#fff);
      border:1px solid var(--line);
      font-size:28px;
      font-weight:900;
    }
    .list-card h3{font-size:20px}
    .mini-info{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:12px;
      color:var(--subtle);
      font-size:13px;
    }
    .mini-info span{
      padding:3px 9px;
      border-radius:999px;
      background:#f7f0e5;
    }

    .scenario-wrap{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
    }
    .scenario-card{
      padding:24px;
      border-radius:var(--radius-lg);
      border:1px solid var(--line);
      background:linear-gradient(180deg,#fff,#fffaf2);
      box-shadow:var(--shadow-soft);
      min-height:220px;
      transition:var(--ease);
      position:relative;
      overflow:hidden;
    }
    .scenario-card:after{
      content:"";
      position:absolute;
      width:100px;
      height:100px;
      border-radius:50%;
      right:-42px;
      bottom:-44px;
      background:rgba(31,91,74,.08);
    }
    .scenario-card:hover{
      transform:translateY(-4px);
      border-color:rgba(184,137,69,.34);
    }
    .scenario-no{
      color:var(--gold);
      font-weight:900;
      font-size:13px;
      margin-bottom:18px;
    }
    .scenario-card h3{
      margin:0 0 10px;
      font-size:21px;
      line-height:1.3;
    }
    .scenario-card p{
      margin:0;
      color:var(--muted);
    }

    .process-section{
      background:linear-gradient(180deg, rgba(255,252,245,.72), rgba(232,241,236,.68));
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
    }
    .process-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
      counter-reset:step;
    }
    .process-card{
      position:relative;
      padding:24px;
      border-radius:var(--radius-md);
      background:#fff;
      border:1px solid var(--line);
      box-shadow:0 10px 24px rgba(44,39,30,.06);
    }
    .process-card:before{
      counter-increment:step;
      content:"0" counter(step);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:44px;
      height:44px;
      border-radius:15px;
      margin-bottom:18px;
      background:var(--green);
      color:#fff;
      font-weight:900;
    }
    .process-card h3{font-size:19px}
    .process-card p{font-size:15px}

    .recommend-shell{
      display:grid;
      grid-template-columns:.92fr 1.08fr;
      gap:26px;
      align-items:center;
      padding:26px;
      border-radius:30px;
      background:var(--charcoal);
      color:#fff;
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .recommend-media{
      min-height:330px;
      border-radius:24px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.14);
    }
    .recommend-media img{
      width:100%;
      height:100%;
      min-height:330px;
      object-fit:cover;
    }
    .recommend-content{
      padding:16px 10px;
    }
    .recommend-content .section-kicker{color:#d7b16f}
    .recommend-content h2{color:#fff}
    .recommend-content p{
      color:rgba(255,255,255,.76);
      margin:14px 0 0;
    }
    .recommend-list{
      display:grid;
      gap:12px;
      margin:24px 0 0;
      padding:0;
      list-style:none;
    }
    .recommend-list li{
      display:flex;
      gap:12px;
      padding:14px;
      border-radius:16px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      color:rgba(255,255,255,.86);
    }
    .recommend-list li:before{
      content:"✓";
      width:24px;
      height:24px;
      border-radius:50%;
      display:grid;
      place-items:center;
      flex:0 0 24px;
      background:rgba(184,137,69,.26);
      color:#f4d49f;
      font-weight:900;
    }

    .faq-layout{
      display:grid;
      grid-template-columns:.72fr 1.28fr;
      gap:28px;
      align-items:start;
    }
    .faq-aside{
      position:sticky;
      top:calc(var(--header-h) + 22px);
      padding:24px;
      border-radius:var(--radius-lg);
      background:#fffaf2;
      border:1px solid var(--line);
      box-shadow:var(--shadow-soft);
    }
    .faq-aside p{
      margin:12px 0 0;
      color:var(--muted);
    }
    .faq-list{
      display:grid;
      gap:12px;
    }
    details{
      border:1px solid var(--line);
      background:#fff;
      border-radius:18px;
      box-shadow:0 8px 20px rgba(44,39,30,.05);
      overflow:hidden;
    }
    summary{
      list-style:none;
      padding:18px 52px 18px 20px;
      font-weight:820;
      color:var(--charcoal);
      cursor:pointer;
      position:relative;
    }
    summary::-webkit-details-marker{display:none}
    summary:after{
      content:"+";
      position:absolute;
      right:18px;
      top:50%;
      transform:translateY(-50%);
      width:28px;
      height:28px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:var(--green-soft);
      color:var(--green);
      font-size:20px;
      transition:var(--ease);
    }
    details[open] summary:after{
      content:"–";
      background:var(--green);
      color:#fff;
    }
    .faq-answer{
      padding:0 20px 20px;
      color:var(--muted);
      border-top:1px solid #f1e8db;
    }
    .faq-answer p{
      margin:14px 0 0;
    }

    .contact-band{
      padding:34px;
      border-radius:30px;
      background:
        linear-gradient(105deg, rgba(31,91,74,.96), rgba(31,91,74,.84)),
        url("/assets/images/backpic/back-3.webp") center/cover no-repeat;
      color:#fff;
      display:grid;
      grid-template-columns:1fr auto;
      align-items:center;
      gap:24px;
      box-shadow:var(--shadow);
    }
    .contact-band h2{color:#fff}
    .contact-band p{
      margin:12px 0 0;
      color:rgba(255,255,255,.78);
      max-width:690px;
    }
    .contact-actions{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .btn-light{
      background:#fff;
      color:var(--green);
    }
    .btn-light:hover{
      transform:translateY(-2px);
      background:#fff7e8;
    }
    .btn-outline-light{
      color:#fff;
      border-color:rgba(255,255,255,.42);
      background:rgba(255,255,255,.08);
    }
    .btn-outline-light:hover{
      transform:translateY(-2px);
      background:rgba(255,255,255,.15);
    }

    .site-footer{
      padding:54px 0 28px;
      background:#1f2421;
      color:rgba(255,255,255,.78);
      margin-top:58px;
    }
    .footer-shell{
      border:1px solid rgba(255,255,255,.10);
      border-radius:28px;
      background:rgba(255,255,255,.04);
      overflow:hidden;
    }
    .footer-top{
      display:flex;
      justify-content:space-between;
      gap:30px;
      padding:30px;
      border-bottom:1px solid rgba(255,255,255,.10);
    }
    .footer-brand strong{
      display:block;
      color:#fff;
      font-size:22px;
      margin-bottom:10px;
    }
    .footer-brand p{
      margin:0;
      max-width:560px;
      color:rgba(255,255,255,.68);
    }
    .footer-nav{
      display:flex;
      align-items:flex-start;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
      min-width:220px;
    }
    .footer-link{
      display:inline-flex;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
      color:rgba(255,255,255,.78);
      font-size:14px;
      transition:var(--ease);
    }
    .footer-link:hover{
      color:#fff;
      border-color:rgba(184,137,69,.46);
      background:rgba(184,137,69,.16);
    }
    .footer-bottom{
      display:flex;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
      padding:18px 30px;
      color:rgba(255,255,255,.56);
      font-size:13px;
    }

    @media (max-width:1024px){
      .container{width:min(100% - 32px,var(--container))}
      .hero-shell{
        grid-template-columns:1fr;
        padding:34px;
      }
      .hero-panel{
        justify-self:stretch;
        width:100%;
      }
      .service-grid,.recommend-shell,.faq-layout{
        grid-template-columns:1fr;
      }
      .process-grid{
        grid-template-columns:repeat(2,1fr);
      }
      .scenario-wrap{
        grid-template-columns:1fr 1fr;
      }
      .faq-aside{position:static}
      .contact-band{
        grid-template-columns:1fr;
      }
      .contact-actions{justify-content:flex-start}
    }
    @media (max-width:768px){
      :root{--header-h:68px}
      .header-inner{position:relative}
      .brand-text span{display:none}
      .menu-toggle{display:inline-block}
      .header-cta{display:none}
      .site-nav{
        position:absolute;
        top:calc(100% + 10px);
        right:0;
        width:min(280px, calc(100vw - 32px));
        display:none;
        flex-direction:column;
        align-items:stretch;
        border-radius:20px;
        padding:10px;
        background:#fffaf2;
        box-shadow:var(--shadow);
      }
      .site-nav.open{display:flex}
      .nav-link{
        justify-content:center;
        border-radius:14px;
      }
      .page-hero{padding:30px 0}
      .hero-shell{
        min-height:auto;
        padding:26px;
        border-radius:24px;
      }
      .hero-lead{font-size:16px}
      .section{padding:42px 0}
      .section-head{
        align-items:flex-start;
        flex-direction:column;
        gap:12px;
      }
      .filter-bar{
        align-items:flex-start;
        flex-direction:column;
      }
      .filter-note{white-space:normal}
      .list-card{
        grid-template-columns:1fr;
      }
      .list-icon{
        width:64px;
        height:64px;
        font-size:22px;
      }
      .scenario-wrap,.process-grid{
        grid-template-columns:1fr;
      }
      .footer-top{
        flex-direction:column;
      }
      .footer-nav{
        justify-content:flex-start;
      }
    }
    @media (max-width:520px){
      .container{width:calc(100% - 24px)}
      .brand-mark{width:38px;height:38px;border-radius:12px}
      .brand-text strong{font-size:16px}
      h1{font-size:32px}
      .hero-shell{padding:22px}
      .hero-actions,.contact-actions{
        flex-direction:column;
        align-items:stretch;
      }
      .btn{width:100%}
      .hero-panel{padding:14px;border-radius:20px}
      .hero-panel img{height:160px}
      .feature-image{height:210px}
      .feature-body,.scenario-card,.process-card,.faq-aside{padding:20px}
      .recommend-shell,.contact-band{
        padding:20px;
        border-radius:22px;
      }
      .footer-top,.footer-bottom{
        padding:22px;
      }
    }