/* roulang page: index */
:root {
            --ink: #171116;
            --night: #21151f;
            --plum: #392335;
            --surface: #493044;
            --surface-2: #5b3b52;
            --cream: #f7efe8;
            --muted: #cbb9c3;
            --line: rgba(247,239,232,.16);
            --rose: #ce7184;
            --copper: #d99a68;
            --lilac: #bda4d5;
            --success: #a9c9a6;
            --warning: #f0c47b;
            --focus: #f5c2d0;
            --radius: 16px;
            --shadow: 0 18px 48px rgba(8,4,9,.28);
            --ease: 180ms ease;
        }

        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            background:
                radial-gradient(circle at 86% 4%, rgba(206,113,132,.14), transparent 26rem),
                linear-gradient(135deg, #20151e 0%, #2d1c2b 55%, #181117 100%);
            color: var(--cream);
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
            font-size: 16px;
            line-height: 1.75;
            min-width: 320px;
        }
        a { color: inherit; text-decoration: none; transition: color var(--ease), border-color var(--ease), background var(--ease), transform var(--ease); }
        a:hover { color: var(--cream); }
        img { max-width: 100%; height: auto; display: block; }
        button, input, textarea { font: inherit; }
        button { cursor: pointer; }
        :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
        .grid-container { max-width: 1180px; padding-left: 24px; padding-right: 24px; }
        .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; }
        .eyebrow {
            color: var(--copper);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .18em;
            text-transform: uppercase;
        }
        .section { padding: 94px 0; position: relative; }
        .section-heading { max-width: 720px; margin-bottom: 38px; }
        .section-heading h2 { margin: 8px 0 12px; font-size: clamp(28px, 4vw, 46px); line-height: 1.2; letter-spacing: -.04em; }
        .section-heading p { color: var(--muted); margin: 0; max-width: 650px; }
        .site-header {
            position: sticky;
            top: 0;
            z-index: 20;
            background: rgba(25,15,23,.92);
            border-bottom: 1px solid var(--line);
            backdrop-filter: blur(14px);
        }
        .nav-row { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
        .brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
        .brand-mark {
            width: 34px; height: 34px; display: grid; place-items: center;
            color: var(--ink); background: var(--copper); border-radius: 10px 10px 3px 10px;
            font-size: 14px; font-weight: 900;
        }
        .brand-name { font-size: 17px; }
        .main-nav { display: flex; align-items: center; gap: 10px; }
        .main-nav a { color: var(--muted); padding: 9px 13px; border-radius: 8px; font-size: 14px; }
        .main-nav a:hover, .main-nav a.active { color: var(--cream); background: rgba(206,113,132,.14); }
        .nav-button { border: 1px solid rgba(217,154,104,.45); color: var(--copper)!important; }
        .menu-toggle { display: none; background: transparent; border: 1px solid var(--line); color: var(--cream); padding: 8px 11px; border-radius: 8px; }
        .progress-wrap { border-top: 1px solid rgba(255,255,255,.04); overflow-x: auto; }
        .progress { display: flex; min-width: 650px; padding: 15px 0 17px; gap: 0; }
        .step { position: relative; flex: 1; display: flex; align-items: center; gap: 10px; color: #806d79; font-size: 13px; }
        .step:not(:last-child)::after { content: ""; height: 1px; background: var(--line); flex: 1; margin: 0 16px; }
        .step-badge { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: 11px; }
        .step.active, .step:hover { color: var(--cream); }
        .step.active .step-badge { background: var(--rose); border-color: var(--rose); color: var(--ink); font-weight: 800; }
        .hero { padding: 84px 0 78px; overflow: hidden; }
        .hero-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; }
        h1 { font-size: clamp(42px, 6.5vw, 78px); line-height: 1.04; letter-spacing: -.07em; margin: 15px 0 24px; max-width: 700px; }
        .hero-copy { color: var(--muted); font-size: 18px; max-width: 650px; }
        .tag-row, .filter-row { display: flex; flex-wrap: wrap; gap: 9px; margin: 24px 0; }
        .tag, .status {
            display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
            border-radius: 999px; padding: 5px 11px; color: var(--muted); font-size: 12px;
            background: rgba(255,255,255,.035);
        }
        .tag.hot { border-color: rgba(206,113,132,.55); color: #f1a6b5; }
        .actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 20px; }
        .button {
            border-radius: 9px; padding: 12px 20px; font-weight: 700; margin: 0;
            transition: transform var(--ease), box-shadow var(--ease), background var(--ease), color var(--ease);
        }
        .button.primary { background: var(--rose); color: var(--ink); }
        .button.primary:hover { background: #e18a9c; color: var(--ink); transform: translateY(-2px); box-shadow: 0 9px 22px rgba(206,113,132,.2); }
        .button.secondary { border: 1px solid rgba(247,239,232,.28); color: var(--cream); background: transparent; }
        .button.secondary:hover { border-color: var(--copper); color: var(--copper); transform: translateY(-2px); }
        .button.disabled, .button[disabled] { opacity: .45; cursor: not-allowed; }
        .age-note { color: #bfaeb6; font-size: 12px; display: flex; gap: 9px; align-items: flex-start; }
        .age-note strong { color: var(--warning); white-space: nowrap; }
        .hero-art {
            min-height: 420px; padding: 22px; position: relative; overflow: hidden;
            background: linear-gradient(145deg, rgba(91,59,82,.92), rgba(39,24,37,.92));
            border: 1px solid rgba(247,239,232,.18); border-radius: 22px 22px 5px 22px; box-shadow: var(--shadow);
        }
        .hero-art::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: rgba(206,113,132,.16); top: -90px; right: -50px; }
        .art-top { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; position: relative; }
        .profile-frame {
            height: 220px; margin: 28px 0 20px; border-radius: 13px; position: relative; overflow: hidden;
            background:
                linear-gradient(140deg, rgba(217,154,104,.35), transparent 40%),
                radial-gradient(ellipse at 58% 25%, #bb7b83 0 12%, transparent 13%),
                radial-gradient(ellipse at 53% 65%, #75445c 0 26%, transparent 27%),
                linear-gradient(125deg, #261825, #704653);
            border: 1px solid rgba(247,239,232,.2);
        }
        .profile-frame::after { content: "合规形象占位"; position: absolute; bottom: 14px; right: 14px; padding: 4px 9px; background: rgba(23,17,22,.72); color: var(--cream); font-size: 11px; border-radius: 4px; }
        .art-info { display: grid; grid-template-columns: 1fr auto; gap: 15px; }
        .art-info h3 { margin: 0 0 4px; font-size: 24px; }
        .art-info p { margin: 0; color: var(--muted); font-size: 13px; }
        .index-code { color: var(--copper); font-size: 20px; }
        .meter { height: 5px; margin-top: 18px; background: rgba(255,255,255,.1); border-radius: 9px; overflow: hidden; }
        .meter span { display: block; width: 76%; height: 100%; background: var(--copper); }
        .features { background: rgba(17,10,16,.22); }
        .feature-layout { display: grid; grid-template-columns: 1.18fr .82fr; gap: 18px; }
        .feature-main, .feature-card, .case-card, .plan, .faq-item, .scene-card {
            background: rgba(73,48,68,.66); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(8,4,9,.12);
        }
        .feature-main { min-height: 330px; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; border-left: 4px solid var(--rose); }
        .feature-main h3, .feature-card h3 { margin: 10px 0; font-size: 24px; }
        .feature-main p, .feature-card p, .scene-card p, .case-card p, .plan p { color: var(--muted); font-size: 14px; }
        .feature-stack { display: grid; gap: 18px; }
        .feature-card { padding: 25px; min-height: 155px; }
        .feature-card:nth-child(2) { transform: translateX(24px); }
        .feature-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
        .small-link { color: var(--copper); font-size: 13px; font-weight: 700; }
        .index-strip { margin-top: 18px; padding: 16px 20px; display: flex; gap: 11px; overflow-x: auto; border: 1px solid var(--line); background: rgba(255,255,255,.035); border-radius: 10px; white-space: nowrap; }
        .strip-item { color: var(--muted); font-size: 13px; padding-right: 18px; border-right: 1px solid var(--line); }
        .strip-item:last-child { border: 0; }
        .scenes-grid { display: grid; grid-template-columns: 1.3fr .85fr .85fr; gap: 16px; align-items: stretch; }
        .scene-card { padding: 25px; min-height: 250px; }
        .scene-card:first-child { background: linear-gradient(145deg, rgba(91,59,82,.9), rgba(73,48,68,.55)); transform: translateY(18px); }
        .scene-number { color: var(--copper); font-size: 28px; }
        .scene-card h3 { margin: 18px 0 8px; font-size: 21px; }
        .case-wall { display: grid; grid-template-columns: 1.45fr .8fr .8fr; gap: 16px; }
        .case-card { padding: 0; overflow: hidden; }
        .case-cover { height: 165px; background: linear-gradient(135deg, #7d4d60, #2b1b30); position: relative; }
        .case-card:nth-child(2) .case-cover { height: 205px; background: linear-gradient(135deg, #6e596e, #302238); }
        .case-card:nth-child(3) .case-cover { height: 135px; background: linear-gradient(135deg, #a16b70, #3a2636); }
        .case-cover::after { content: "精选档案"; position: absolute; left: 15px; bottom: 13px; color: var(--cream); font-size: 11px; padding: 4px 8px; background: rgba(23,17,22,.65); border-radius: 4px; }
        .case-body { padding: 20px; }
        .case-body h3 { margin: 8px 0; font-size: 20px; }
        .case-meta { color: var(--copper); font-size: 12px; }
        .plans { display: grid; grid-template-columns: .85fr 1.15fr .85fr; gap: 16px; align-items: center; }
        .plan { padding: 28px; min-height: 310px; }
        .plan.recommended { border-color: var(--rose); transform: translateY(-12px); background: rgba(91,59,82,.9); }
        .plan-label { color: var(--rose); font-size: 12px; font-weight: 800; }
        .plan h3 { font-size: 25px; margin: 10px 0 4px; }
        .price { font-size: 32px; color: var(--cream); margin: 18px 0; }
        .price small { font-size: 13px; color: var(--muted); }
        .benefits { list-style: none; margin: 0 0 22px; padding: 0; color: var(--muted); font-size: 14px; }
        .benefits li { padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
        .benefits li::before { content: "＋"; color: var(--copper); margin-right: 7px; }
        .faq-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 42px; }
        .faq-intro p { color: var(--muted); }
        .accordion { background: transparent; margin: 0; }
        .accordion-item { background: var(--surface); border: 1px solid var(--line); margin-bottom: 10px; border-radius: 10px; overflow: hidden; }
        .accordion-title { color: var(--cream); font-weight: 700; border: 0; padding: 18px 22px; background: transparent; }
        .accordion-title:hover, .accordion-item.is-active .accordion-title { background: rgba(206,113,132,.1); color: #f3b3bf; }
        .accordion-content { background: rgba(23,17,22,.28); color: var(--muted); border: 0; padding: 0 22px 18px; font-size: 14px; }
        .cta { padding: 74px 0; background: linear-gradient(110deg, rgba(111,55,76,.86), rgba(55,32,53,.9)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
        .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
        .cta h2 { margin: 8px 0; font-size: clamp(28px, 4vw, 48px); line-height: 1.15; }
        .cta p { color: var(--muted); max-width: 680px; margin: 0; }
        .site-footer { padding: 38px 0 25px; color: var(--muted); font-size: 13px; }
        .footer-row { display: flex; justify-content: space-between; gap: 30px; align-items: flex-start; }
        .footer-brand { color: var(--cream); font-weight: 800; font-size: 16px; margin-bottom: 10px; }
        .footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
        .footer-links a:hover { color: var(--copper); }
        .copyright { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 18px; display: flex; justify-content: space-between; gap: 15px; }
        @media (max-width: 900px) {
            .hero-layout, .feature-layout, .faq-layout { grid-template-columns: 1fr; }
            .scenes-grid { grid-template-columns: 1fr 1fr; }
            .scene-card:first-child { grid-column: span 2; transform: none; }
            .case-wall { grid-template-columns: 1fr 1fr; }
            .case-card:first-child { grid-column: span 2; }
            .plans { grid-template-columns: 1fr; }
            .plan.recommended { transform: none; }
        }
        @media (max-width: 700px) {
            .grid-container { padding-left: 18px; padding-right: 18px; }
            .nav-row { min-height: 68px; }
            .menu-toggle { display: block; }
            .main-nav { display: none; position: absolute; left: 18px; right: 18px; top: 62px; padding: 10px; background: var(--night); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
            .main-nav.is-open { display: grid; }
            .main-nav a { padding: 12px; }
            .hero { padding-top: 58px; }
            .hero-art { min-height: 370px; }
            .scenes-grid, .case-wall { grid-template-columns: 1fr; }
            .scene-card:first-child, .case-card:first-child { grid-column: auto; }
            .case-card:nth-child(2) .case-cover, .case-card:nth-child(3) .case-cover { height: 165px; }
            .cta-inner, .footer-row, .copyright { display: block; }
            .cta .actions { margin-top: 25px; }
            .footer-links { margin-top: 20px; }
            .copyright span + span { display: block; margin-top: 8px; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { scroll-behavior: auto!important; transition: none!important; }
        }

/* roulang page: category2 */
:root{
--ink:#171116;--night:#21151f;--plum:#392335;--surface:#493044;--surface-2:#5b3b52;
--cream:#f7efe8;--muted:#cbb9c3;--line:rgba(247,239,232,.16);--rose:#ce7184;
--copper:#d99a68;--lilac:#bda4d5;--success:#a9c9a6;--warning:#f0c47b;
--focus:#f5c2d0;--radius:16px;--shadow:0 18px 48px rgba(8,4,9,.28);--ease:180ms ease
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;background:radial-gradient(circle at 86% 4%,rgba(206,113,132,.14),transparent 26rem),linear-gradient(135deg,#20151e 0%,#2d1c2b 55%,#181117 100%);color:var(--cream);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;font-size:16px;line-height:1.75}
a{color:inherit;text-decoration:none;transition:color var(--ease),border-color var(--ease),background var(--ease),transform var(--ease)}
a:hover{color:var(--cream)}
img{display:block;max-width:100%;height:auto}
button,input,textarea{font:inherit}
button{cursor:pointer}
.grid-container{max-width:1180px;padding-left:24px;padding-right:24px}
.site-header{position:sticky;top:0;z-index:20;background:rgba(25,15,23,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.nav-row{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:inline-flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.brand-mark{width:34px;height:34px;display:grid;place-items:center;color:var(--ink);background:var(--copper);border-radius:10px 10px 3px 10px;font-size:14px;font-weight:900}
.brand-name{font-size:17px}
.main-nav{display:flex;align-items:center;gap:10px}
.main-nav a{color:var(--muted);padding:9px 13px;border-radius:8px;font-size:14px}
.main-nav a:hover,.main-nav a.active{color:var(--cream);background:rgba(206,113,132,.14)}
.main-nav .nav-button{border:1px solid rgba(217,154,104,.45);color:var(--copper)!important}
.menu-toggle{display:none;background:transparent;border:1px solid var(--line);color:var(--cream);padding:8px 11px;border-radius:8px}
.menu-toggle:focus-visible,.main-nav a:focus-visible,.button:focus-visible,.filter-chip:focus-visible,.accordion-title:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.progress-nav{border-bottom:1px solid var(--line);background:rgba(33,21,31,.75)}
.progress-track{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:15px 0}
.step{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px;border-right:1px solid var(--line);padding-left:14px}
.step:last-child{border:0}.step-badge{width:26px;height:26px;flex:0 0 26px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-size:11px}
.step.active{color:var(--cream)}.step.active .step-badge{background:var(--rose);border-color:var(--rose);color:var(--ink);font-weight:800}
.section{padding:92px 0;position:relative}.section-heading{max-width:730px;margin-bottom:38px}
.eyebrow{color:var(--copper);font-size:12px;font-weight:700;letter-spacing:.18em}
.section-heading h2{margin:8px 0 12px;font-size:clamp(28px,4vw,46px);line-height:1.2;letter-spacing:-.04em}
.section-heading p,.muted{color:var(--muted);margin:0}
.hero{padding:82px 0 74px}.hero-layout{display:grid;grid-template-columns:1fr .92fr;gap:54px;align-items:center}
h1{font-size:clamp(40px,6vw,72px);line-height:1.1;letter-spacing:-.06em;margin:14px 0 20px}
.hero-copy{color:var(--muted);font-size:18px;max-width:650px}
.tag-row{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0}.tag,.status{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:5px 11px;color:var(--muted);font-size:12px;background:rgba(255,255,255,.035)}
.tag.hot{border-color:rgba(206,113,132,.55);color:#f1a6b5}
.button{display:inline-block;border-radius:9px;padding:12px 20px;font-weight:700;margin:0 8px 8px 0;transition:transform var(--ease),box-shadow var(--ease),background var(--ease),color var(--ease)}
.button.primary{background:var(--rose);color:var(--ink)}.button.primary:hover{background:#e18a9c;color:var(--ink);transform:translateY(-2px);box-shadow:0 9px 22px rgba(206,113,132,.2)}
.button.secondary{border:1px solid rgba(247,239,232,.28);color:var(--cream);background:transparent}.button.secondary:hover{border-color:var(--copper);color:var(--copper);transform:translateY(-2px)}
.hero-art{min-height:430px;padding:22px;position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(91,59,82,.92),rgba(39,24,37,.92));border:1px solid rgba(247,239,232,.18);border-radius:22px 22px 5px 22px;box-shadow:var(--shadow)}
.hero-art:before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;background:rgba(206,113,132,.16);top:-100px;right:-40px}
.cover{height:230px;border-radius:14px 14px 3px 14px;overflow:hidden;position:relative;background:#67445c}
.cover img{width:100%;height:100%;object-fit:cover;opacity:.72}
.cover-label{position:absolute;left:18px;bottom:16px;font-size:26px;font-weight:800;letter-spacing:-.04em}
.archive-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.meta-box{padding:13px;border:1px solid var(--line);background:rgba(23,17,22,.3);border-radius:10px}.meta-box small{display:block;color:var(--muted);font-size:11px}.meta-box strong{display:block;margin-top:4px;color:var(--cream)}
.age-note{margin-top:18px;color:var(--muted);font-size:12px;border-left:3px solid var(--copper);padding-left:12px}
.route-section{background:rgba(17,10,16,.22)}.route-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:46px}
.route-intro{position:sticky;top:145px;height:max-content}.route-intro h2{font-size:38px;line-height:1.2;margin:10px 0 15px}
.timeline{position:relative;padding-left:46px}.timeline:before{content:"";position:absolute;left:13px;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--rose),var(--copper),transparent)}
.timeline-item{position:relative;padding:0 0 34px}.timeline-item:last-child{padding-bottom:0}
.timeline-item:before{content:"";position:absolute;left:-40px;top:7px;width:15px;height:15px;border-radius:50%;background:var(--plum);border:3px solid var(--rose)}
.route-card{padding:22px 24px;background:rgba(73,48,68,.66);border:1px solid var(--line);border-radius:var(--radius);transition:transform var(--ease),border-color var(--ease)}
.route-card:hover{transform:translateX(5px);border-color:rgba(217,154,104,.6)}
.route-card h3{margin:8px 0 7px;font-size:22px}.route-card p{color:var(--muted);margin:0 0 13px;font-size:14px}
.index-strip{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.index-strip span{color:var(--copper);font-family:monospace;border-bottom:1px solid var(--line);padding:2px 6px}
.featured{padding-top:82px}.feature-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.feature-card{min-height:280px;padding:28px;background:rgba(73,48,68,.66);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 30px rgba(8,4,9,.12)}
.feature-card.large{min-height:380px;border-left:4px solid var(--rose)}.feature-card.offset{transform:translateY(35px)}
.feature-card h3{margin:16px 0 8px;font-size:25px}.feature-card p{color:var(--muted);font-size:14px}
.feature-line{display:flex;justify-content:space-between;gap:12px;margin-top:28px;border-top:1px solid var(--line);padding-top:14px;color:var(--muted);font-size:12px}
.related{background:rgba(17,10,16,.2)}.tag-matrix{display:flex;flex-wrap:wrap;gap:12px;max-width:850px}.tag-matrix a{padding:12px 17px;border:1px solid var(--line);border-radius:10px;color:var(--muted);background:rgba(255,255,255,.035)}.tag-matrix a:hover{border-color:var(--rose);color:var(--cream);transform:translateY(-2px)}
.faq-list{max-width:850px}.faq-item{margin-bottom:12px;overflow:hidden}.accordion-title{display:block;padding:19px 22px;color:var(--cream);font-weight:700}.accordion-title:before{color:var(--copper)}.accordion-content{background:rgba(23,17,22,.22);border:0;color:var(--muted);padding:0 22px 20px;font-size:14px}
.cta{padding:70px 0}.cta-box{padding:42px;background:linear-gradient(120deg,rgba(91,59,82,.9),rgba(57,35,53,.86));border:1px solid rgba(217,154,104,.35);border-radius:22px 22px 5px 22px;display:flex;justify-content:space-between;align-items:center;gap:30px}.cta-box h2{margin:0 0 10px;font-size:34px}.cta-box p{margin:0;color:var(--muted)}
.contact-form{margin-top:30px;max-width:850px}.contact-form label{display:block;color:var(--muted);font-size:13px;margin-bottom:6px}.contact-form input,.contact-form textarea{width:100%;background:rgba(23,17,22,.45);border:1px solid var(--line);border-radius:8px;color:var(--cream);padding:11px 13px;margin-bottom:16px}.contact-form textarea{min-height:110px;resize:vertical}.consent{font-size:12px;color:var(--muted);margin-bottom:18px}
.site-footer{padding:38px 0 25px;border-top:1px solid var(--line);background:rgba(17,10,16,.35);color:var(--muted);font-size:13px}.footer-row{display:flex;justify-content:space-between;gap:30px}.footer-brand{font-size:18px;color:var(--cream);font-weight:800;margin-bottom:7px}.footer-links{display:flex;flex-wrap:wrap;gap:18px}.footer-links a:hover{color:var(--copper)}.copyright{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:18px;margin-top:28px;font-size:12px}
@media(max-width:900px){.hero-layout,.route-layout,.feature-grid{grid-template-columns:1fr}.route-intro{position:static}.feature-card.offset{transform:none}.hero-art{min-height:360px}}
@media(max-width:680px){.grid-container{padding-left:18px;padding-right:18px}.nav-row{min-height:68px}.menu-toggle{display:block}.main-nav{display:none;position:absolute;left:18px;right:18px;top:68px;padding:10px;background:var(--night);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.main-nav.is-open{display:flex}.main-nav a{display:block}.progress-track{display:flex;overflow-x:auto;padding:12px 0}.step{min-width:145px}.hero{padding:58px 0 52px}h1{font-size:42px}.hero-copy{font-size:16px}.archive-meta{grid-template-columns:1fr}.section{padding:68px 0}.timeline{padding-left:35px}.timeline:before{left:9px}.timeline-item:before{left:-32px}.cta-box,.footer-row,.copyright{display:block}.cta-box .button{margin-top:22px}.footer-links{margin-top:22px}.copyright span{display:block;margin-top:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

/* roulang page: category1 */
:root{
 --ink:#171116;--night:#21151f;--plum:#392335;--surface:#493044;--surface-2:#5b3b52;
 --cream:#f7efe8;--muted:#cbb9c3;--line:rgba(247,239,232,.16);--rose:#ce7184;
 --copper:#d99a68;--lilac:#bda4d5;--success:#a9c9a6;--warning:#f0c47b;
 --focus:#f5c2d0;--radius:16px;--shadow:0 18px 48px rgba(8,4,9,.28);--ease:180ms ease
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;background:radial-gradient(circle at 86% 4%,rgba(206,113,132,.14),transparent 26rem),linear-gradient(135deg,#20151e 0%,#2d1c2b 55%,#181117 100%);color:var(--cream);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;font-size:16px;line-height:1.75}
a{color:inherit;text-decoration:none;transition:color var(--ease),border-color var(--ease),background var(--ease),transform var(--ease)}
a:hover{color:var(--cream)}
img{max-width:100%;height:auto;display:block}
button,input,textarea{font:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.grid-container{max-width:1180px;padding-left:24px;padding-right:24px}
.site-header{position:sticky;top:0;z-index:20;background:rgba(25,15,23,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.nav-row{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:inline-flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.brand-mark{width:34px;height:34px;display:grid;place-items:center;color:var(--ink);background:var(--copper);border-radius:10px 10px 3px 10px;font-size:14px;font-weight:900}
.brand-name{font-size:17px}
.main-nav{display:flex;align-items:center;gap:10px}
.main-nav a{color:var(--muted);padding:9px 13px;border-radius:8px;font-size:14px}
.main-nav a:hover,.main-nav a.active{color:var(--cream);background:rgba(206,113,132,.14)}
.nav-button{border:1px solid rgba(217,154,104,.45);color:var(--copper)!important}
.menu-toggle{display:none;background:transparent;border:1px solid var(--line);color:var(--cream);padding:8px 11px;border-radius:8px}
.step-bar{border-top:1px solid var(--line);padding:15px 0}
.steps{display:flex;justify-content:space-between;gap:10px}
.step{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13px;position:relative;flex:1}
.step:not(:last-child):after{content:"";height:1px;background:var(--line);position:absolute;left:112px;right:10px;top:50%}
.step-badge{width:26px;height:26px;flex:0 0 26px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--muted);font-size:11px}
.step.active{color:var(--cream)}.step.active .step-badge{background:var(--rose);border-color:var(--rose);color:var(--ink);font-weight:800}
.section{padding:88px 0;position:relative}
.eyebrow{color:var(--copper);font-size:12px;font-weight:700;letter-spacing:.18em}
h1,h2,h3{color:var(--cream);font-weight:800;letter-spacing:-.04em}
h1{font-size:clamp(38px,6vw,68px);line-height:1.1;margin:12px 0 20px}
h2{font-size:clamp(28px,4vw,46px);line-height:1.2;margin:8px 0 12px}
h3{font-size:22px;line-height:1.35;margin:9px 0}
p{margin:0 0 14px}.muted{color:var(--muted)}
.hero{padding:76px 0 62px}
.hero-grid{display:grid;grid-template-columns:1fr .9fr;gap:54px;align-items:center}
.hero-copy{font-size:18px;color:var(--muted);max-width:660px}
.tag-row,.filter-row{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0}
.tag,.status{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:5px 11px;color:var(--muted);font-size:12px;background:rgba(255,255,255,.035)}
.tag.hot{border-color:rgba(206,113,132,.55);color:#f1a6b5}
.button{border-radius:9px;padding:12px 20px;font-weight:700;margin:0;transition:transform var(--ease),box-shadow var(--ease),background var(--ease)}
.button.primary{background:var(--rose);color:var(--ink)}
.button.primary:hover{background:#e18a9c;color:var(--ink);transform:translateY(-2px);box-shadow:0 9px 22px rgba(206,113,132,.2)}
.button.secondary{border:1px solid rgba(247,239,232,.28);color:var(--cream);background:transparent}
.button.secondary:hover{border-color:var(--copper);color:var(--copper);transform:translateY(-2px)}
.button.disabled,.button[disabled]{opacity:.45;cursor:not-allowed}
.button-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}
.hero-art{min-height:350px;padding:24px;position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(91,59,82,.92),rgba(39,24,37,.92));border:1px solid rgba(247,239,232,.18);border-radius:22px 22px 5px 22px;box-shadow:var(--shadow)}
.hero-art:before{content:"";position:absolute;width:270px;height:270px;border-radius:50%;background:rgba(206,113,132,.16);top:-80px;right:-55px}
.profile-top,.profile-row{position:relative;display:flex;justify-content:space-between;gap:18px;align-items:center}
.profile-code{font:700 12px/1.4 monospace;color:var(--copper);letter-spacing:.16em}
.profile-visual{height:175px;margin:22px 0;background:linear-gradient(145deg,#744c68,#30202e 70%);border:1px solid var(--line);position:relative;overflow:hidden}
.profile-visual:after{content:"主题影像预留区";position:absolute;inset:0;display:grid;place-items:center;color:rgba(247,239,232,.6);font-size:13px;letter-spacing:.15em}
.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{padding:12px;border-left:2px solid var(--rose);background:rgba(0,0,0,.15)}
.stat strong{display:block;font-size:20px;color:var(--cream)}.stat span{font-size:12px;color:var(--muted)}
.panel{background:rgba(17,10,16,.2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-heading{max-width:720px;margin-bottom:34px}
.section-heading p{color:var(--muted);max-width:660px}
.filter-panel{padding:22px;background:rgba(73,48,68,.62);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:28px}
.filter-label{color:var(--copper);font-size:13px;font-weight:700;margin-right:12px}
.filter-row{margin:0;display:inline-flex;vertical-align:middle}
.filter{border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--muted);border-radius:999px;padding:7px 14px;font-size:13px}
.filter:hover{border-color:var(--rose);color:var(--cream)}
.filter.active{background:var(--rose);border-color:var(--rose);color:var(--ink);font-weight:700}
.filter[disabled]{opacity:.4;cursor:not-allowed}
.index-layout{display:grid;grid-template-columns:1.18fr .82fr;gap:18px}
.index-card,.small-card,.list-card,.route-card,.notice-card{background:rgba(73,48,68,.66);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 30px rgba(8,4,9,.12)}
.index-card{padding:30px;min-height:310px;border-left:4px solid var(--rose);display:flex;flex-direction:column;justify-content:space-between}
.index-card p,.small-card p,.list-card p,.route-card p,.notice-card p{color:var(--muted);font-size:14px}
.index-stack{display:grid;gap:18px}.small-card{padding:22px;min-height:145px}.small-card:nth-child(2){transform:translateX(22px)}
.card-meta{display:flex;justify-content:space-between;gap:12px;align-items:center;color:var(--muted);font-size:12px}
.list-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.list-card{padding:17px}.list-card h3{font-size:17px;margin:5px 0}
.route{display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;align-items:start}
.route-card{padding:22px;position:relative;margin-bottom:12px}
.route-card:before{content:"";position:absolute;left:-9px;top:25px;width:16px;height:16px;border-radius:50%;background:var(--copper);border:4px solid var(--night)}
.route-line{border-left:1px solid var(--copper);padding-left:22px}
.faq-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:40px}
.accordion{background:transparent;margin:0}.accordion-item{background:rgba(73,48,68,.66);border:1px solid var(--line);margin-bottom:10px;border-radius:12px;overflow:hidden}
.accordion-title{color:var(--cream);font-weight:700;border:0;background:transparent;padding:17px 20px}
.accordion-title:hover{background:rgba(206,113,132,.1);color:var(--cream)}
.accordion-content{background:rgba(24,15,23,.4);border:0;color:var(--muted);padding:17px 20px;font-size:14px}
.cta{padding:54px 0;background:rgba(91,59,82,.55);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta-box{display:flex;align-items:center;justify-content:space-between;gap:28px}.cta-box p{color:var(--muted);max-width:650px}
.contact-form{background:rgba(73,48,68,.65);border:1px solid var(--line);border-radius:var(--radius);padding:25px}
label{color:var(--muted);font-size:13px;font-weight:700}
input,textarea{background:rgba(20,12,19,.6)!important;border:1px solid var(--line)!important;color:var(--cream)!important;border-radius:8px!important;box-shadow:none!important}
input:focus,textarea:focus{border-color:var(--rose)!important}
.site-footer{padding:42px 0 26px;background:rgba(17,10,16,.58);color:var(--muted);font-size:13px}
.footer-row{display:flex;justify-content:space-between;gap:28px;border-bottom:1px solid var(--line);padding-bottom:25px}
.footer-brand{color:var(--cream);font-size:18px;font-weight:800;margin-bottom:7px}
.footer-links{display:flex;gap:17px;flex-wrap:wrap;align-items:flex-start}.footer-links a:hover{color:var(--copper)}
.copyright{display:flex;justify-content:space-between;gap:16px;padding-top:20px;font-size:12px}
.notice{color:var(--warning);font-size:13px;margin-top:18px}
@media(max-width:900px){.hero-grid,.index-layout,.route,.faq-grid{grid-template-columns:1fr}.hero-art{min-height:310px}.list-strip{grid-template-columns:1fr 1fr}.cta-box{align-items:flex-start;flex-direction:column}}
@media(max-width:700px){.grid-container{padding-left:18px;padding-right:18px}.nav-row{min-height:68px}.menu-toggle{display:block}.main-nav{display:none;position:absolute;left:18px;right:18px;top:68px;background:var(--night);padding:10px;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.main-nav.open{display:flex}.main-nav a{display:block}.step-bar{overflow-x:auto}.steps{min-width:680px}.section{padding:65px 0}.hero{padding:58px 0 45px}h1{font-size:42px}.small-card:nth-child(2){transform:none}.list-strip{grid-template-columns:1fr}.footer-row,.copyright{flex-direction:column}.profile-stats{grid-template-columns:1fr 1fr}.profile-stats .stat:last-child{grid-column:span 2}}
@media(max-width:430px){h1{font-size:36px}.button{width:100%;text-align:center}.profile-visual{height:140px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}