/* roulang page: index */
:root{
    --primary:#E4572E;
    --primary-dark:#C64522;
    --secondary:#9C3D1E;
    --dark:#201A17;
    --dark-soft:#2D251F;
    --bg:#F4F0EA;
    --bg-alt:#EAE3D9;
    --text:#241E1A;
    --muted:rgba(36,30,26,.68);
    --light-line:rgba(32,26,23,.08);
    --white-line:rgba(255,255,255,.14);
    --card-shadow:0 10px 30px rgba(32,26,23,.06);
    --radius-sm:8px;
    --radius-md:16px;
    --radius-lg:24px;
    --font-sans:'Noto Sans SC',system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
    --font-serif:'Noto Serif SC','Songti SC',serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);background:var(--bg);color:var(--text);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{border:none;background:none;font:inherit;color:inherit;cursor:pointer}
input,textarea{font-family:inherit}
::selection{background:rgba(228,87,46,.22)}
.container{width:min(1200px,100% - 48px);margin-inline:auto}
.section{padding:116px 0}
.section--sand{background:var(--bg-alt)}
.section--dark{background:var(--dark);color:#F4F0EA}
.section--soft-dark{background:var(--dark-soft);color:#F4F0EA}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.8rem;letter-spacing:.2em;color:var(--primary);text-transform:uppercase;margin-bottom:16px}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--primary)}
.eyebrow--light::before{background:#F4F0EA}
.eyebrow--light{color:#F4B9A2}
.section-head{max-width:820px;margin-bottom:64px}
.section-head h2{font-family:var(--font-serif);font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.18;font-weight:800;letter-spacing:-.02em}
.section-head .lead{margin-top:18px;color:var(--muted);font-size:1.06rem;line-height:1.9;max-width:68ch}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .eyebrow{justify-content:center}
.section-head--center .lead{margin-inline:auto}
.section-head--light .lead{color:rgba(244,240,234,.72)}
.main-title{font-family:var(--font-serif)}

a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid rgba(228,87,46,.58);outline-offset:3px;border-radius:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:10px;padding:14px 28px;font-weight:600;font-size:.97rem;line-height:1;border:1.5px solid transparent;transition:all .25s ease;position:relative;white-space:nowrap}
.btn svg{flex:none}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 8px 24px rgba(228,87,46,.18)}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);transform:translateY(-2px);box-shadow:0 12px 30px rgba(228,87,46,.26)}
.btn-primary:active{transform:translateY(0)}
.btn-outline{border-color:rgba(36,30,26,.28);color:var(--text);background:transparent}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}
.btn-outline-light{border-color:rgba(255,255,255,.5);color:#fff;background:transparent;backdrop-filter:blur(4px)}
.btn-outline-light:hover{border-color:#E4572E;color:#fff;background:rgba(228,87,46,.15);transform:translateY(-2px)}
.btn-ghost{color:rgba(255,255,255,.8);border-color:transparent;background:rgba(255,255,255,.06)}
.btn-ghost:hover{color:#fff;background:rgba(255,255,255,.12)}
.btn-light{background:#fff;color:var(--dark);border-color:#fff;box-shadow:0 10px 36px rgba(0,0,0,.2)}
.btn-light:hover{background:var(--bg-alt);transform:translateY(-2px)}
.text-link{color:var(--text);font-weight:600;display:inline-flex;align-items:center;gap:6px;position:relative;padding-bottom:4px}
.text-link::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .32s ease}
.text-link:hover::after{transform:scaleX(1)}
.text-link:hover{color:var(--primary)}

/* header / nav */
.site-header{position:sticky;top:0;z-index:100;background:rgba(244,240,234,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(32,26,23,.06)}
.header-inner{display:flex;align-items:center;gap:22px;height:76px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand-glyph{width:44px;height:44px;flex:none;background:var(--primary);color:#fff;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:1.1rem;letter-spacing:-.04em;box-shadow:0 6px 18px rgba(228,87,46,.25)}
.brand-copy{display:flex;flex-direction:column;line-height:1.1}
.brand-name{font-size:1.22rem;font-weight:800;font-family:var(--font-serif);color:var(--text)}
.brand-name small{margin-left:4px;color:var(--primary);font-size:.7rem;font-weight:700;letter-spacing:.06em}
.brand-sub{font-size:.65rem;color:var(--muted);letter-spacing:.12em;margin-top:4px}
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;width:42px;height:42px;border-radius:10px;border:1px solid var(--light-line)}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--text);border-radius:4px;margin:3px 0;transition:all .3s ease}
.main-nav{margin-left:auto}
.nav-list{display:flex;align-items:center;gap:2px}
.nav-list>li{position:relative}
.nav-link{display:flex;align-items:center;gap:8px;font-size:.93rem;font-weight:600;padding:12px 16px;border-radius:8px;color:rgba(36,30,26,.86);transition:color .2s ease}
.nav-link:hover{color:var(--primary)}
.nav-link .nav-caret{width:10px;height:10px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}
.nav-link.active{color:var(--primary)}
.nav-link.active::after{content:"";position:absolute;left:16px;right:16px;bottom:4px;height:3px;border-radius:10px;background:var(--primary)}
.dropdown-panel{display:block;position:absolute;left:0;top:calc(100% + 10px);min-width:230px;padding:14px 8px;background:#fff;border:1px solid rgba(32,26,23,.05);border-radius:12px;box-shadow:0 16px 40px rgba(32,26,23,.12);opacity:0;visibility:hidden;transform:translateY(8px);transition:all .24s ease;z-index:50}
.dropdown-title{font-size:.7rem;letter-spacing:.2em;color:var(--muted);padding:4px 16px 10px;font-weight:600}
.dropdown-panel a{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:.9rem;color:var(--text);border-radius:8px;position:relative}
.dropdown-panel a::before{content:"";width:8px;height:22px;border-radius:6px;background:var(--primary);flex:none;opacity:0;transform:scaleY(.3);transition:all .2s ease}
.dropdown-panel a:hover{background:var(--bg);color:var(--primary)}
.dropdown-panel a:hover::before{opacity:1;transform:scaleY(1)}
.has-dropdown:hover .dropdown-panel,.has-dropdown:focus-within .dropdown-panel{opacity:1;visibility:visible;transform:translateY(0)}
@keyframes heroIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes imgFloat{from{opacity:0;transform:scale(.98) translateY(12px)}to{opacity:1;transform:none}}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--dark);color:#fff;padding:160px 0 100px}
.hero-banner{position:absolute;inset:0;background-image:url('/assets/images/backpic/back-2.jpg');background-size:cover;background-position:center 35%;opacity:.48}
.hero-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(32,26,23,.42) 0%,rgba(32,26,23,.66) 62%,var(--dark) 100%)}
.hero-content{position:relative;z-index:2;max-width:980px}
.hero-brand-row{display:flex;align-items:flex-end;gap:16px;margin-bottom:28px;animation:heroIn .6s ease both}
.hero-avatar{width:78px;height:78px;border-radius:50%;overflow:hidden;border:3px solid rgba(255,255,255,.86);box-shadow:0 10px 30px rgba(0,0,0,.35);background:var(--dark-soft);flex:none}
.hero-avatar img{width:100%;height:100%;object-fit:cover}
.hero-follow{color:var(--muted);font-size:.88rem}
.hero-kicker{font-size:.82rem;letter-spacing:.18em;font-weight:600;color:#F4B9A2;display:inline-flex;gap:8px;align-items:center;margin-bottom:12px;background:rgba(228,87,46,.16);border:1px solid rgba(228,87,46,.25);padding:6px 14px;border-radius:50px}
.hero h1{font-family:var(--font-serif);font-size:clamp(2.3rem,5.4vw,4.4rem);line-height:1.14;font-weight:900;letter-spacing:-.03em;max-width:14em;margin-bottom:24px;animation:heroIn .6s .08s ease both}
.hero-lede{font-size:1.1rem;line-height:1.95;color:rgba(244,240,234,.86);max-width:58ch;margin-bottom:34px;animation:heroIn .6s .16s ease both}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:42px;animation:heroIn .6s .24s ease both}
.hero-stat-list{display:flex;flex-wrap:wrap;gap:12px;border-top:1px solid rgba(255,255,255,.16);padding-top:24px;animation:heroIn .6s .32s ease both}
.stat-badge{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:12px 20px;border-radius:14px}
.stat-badge b{font-size:1.28rem;font-family:var(--font-serif);color:#F4A075}
.stat-badge span{font-size:.84rem;color:rgba(244,240,234,.78)}

/* showcase */
.showcase-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:52px;align-items:center}
.showcase-copy h2{font-family:var(--font-serif);font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1.25;margin-bottom:20px}
.showcase-copy>p{color:var(--muted);margin-bottom:28px;max-width:56ch;font-size:1.04rem}
.spec-list{display:grid;gap:18px}
.spec-list li{display:flex;gap:14px;align-items:flex-start}
.spec-icon{width:30px;height:30px;flex:none;border-radius:8px;background:rgba(228,87,46,.1);color:var(--primary);display:grid;place-items:center;font-size:.95rem;font-weight:700}
.spec-list h3{font-size:1.05rem;margin-bottom:4px}
.spec-list p{color:var(--muted);font-size:.94rem}
.showcase-stage{position:relative;min-height:470px;padding:30px 0}
.stage-main{width:82%;margin-left:auto;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 30px 64px rgba(32,26,23,.2);position:relative;z-index:1}
.stage-main img{width:100%;height:520px;object-fit:cover}
.stage-float{position:absolute;border-radius:var(--radius-md);overflow:hidden;box-shadow:0 20px 50px rgba(32,26,23,.18);background:#fff;padding:8px 8px 12px;z-index:2}
.stage-float img{width:100%;height:170px;object-fit:cover;border-radius:6px}
.stage-f1{left:0;bottom:10px;width:42%}
.stage-f2{left:-16px;top:0;width:34%;transform:rotate(-2deg)}
.stage-note{position:absolute;left:2%;top:44%;background:var(--primary);color:#fff;padding:10px 16px;border-radius:12px;font-size:.8rem;box-shadow:0 12px 28px rgba(0,0,0,.14);z-index:3}

/* entry */
.entry-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(220px,auto);gap:24px}
.entry-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-alt);min-height:280px;border:1px solid var(--light-line);transition:transform .32s ease,box-shadow .32s ease}
.entry-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(32,26,23,.1)}
.entry-card .entry-media{position:absolute;inset:0}
.entry-card .entry-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.entry-card:hover .entry-media img{transform:scale(1.04)}
.entry-card--main{grid-column:span 7;grid-row:span 2;min-height:520px}
.entry-card--comic{grid-column:span 5;min-height:248px}
.entry-card--artist{grid-column:span 5;min-height:248px}
.entry-card--wallpaper{grid-column:span 12;min-height:300px}
.entry-card .card-body{position:absolute;left:0;right:0;bottom:0;padding:26px;z-index:2;color:#fff;background:linear-gradient(0deg,rgba(20,16,14,.88) 0%,rgba(20,16,14,.18) 78%,transparent)}
.entry-badge{display:inline-flex;background:var(--primary);color:#fff;font-size:.72rem;padding:5px 12px;border-radius:8px;letter-spacing:.08em;margin-bottom:10px}
.entry-badge--glass{background:rgba(255,255,255,.2);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18)}
.entry-card h3{font-size:clamp(1.3rem,2.2vw,1.8rem);font-family:var(--font-serif);margin-bottom:8px}
.entry-card p{font-size:.92rem;line-height:1.7;color:rgba(255,255,255,.82);max-width:60ch;margin-bottom:12px}
.entry-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:.8rem;color:rgba(255,255,255,.66)}
.entry-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.chip{font-size:.73rem;padding:5px 11px;border-radius:30px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.2)}
.entry-link{display:inline-flex;gap:6px;align-items:center;color:#F4A075;font-weight:600;font-size:.9rem}
.entry-link:hover{color:#fff}

/* scenes */
.scene-stack{display:grid;gap:32px}
.scene-row{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--bg-alt);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--light-line)}
.scene-row--reverse .scene-media{order:2}
.scene-media{min-height:300px;overflow:hidden;position:relative}
.scene-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.scene-num{display:grid;place-items:center;background:var(--primary);color:#fff;font-weight:700;font-size:1rem;width:44px;height:44px;border-radius:12px;margin-bottom:24px;letter-spacing:.08em}
.scene-info{padding:44px;display:flex;flex-direction:column;justify-content:center}
.scene-info h3{font-family:var(--font-serif);font-size:1.65rem;font-weight:800;margin-bottom:14px}
.scene-info>p{color:var(--muted);margin-bottom:18px;line-height:1.85;font-size:.98rem;max-width:52ch}
.scene-points{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:420px}
.scene-points li{display:flex;gap:8px;align-items:center;font-size:.9rem}
.scene-points li::before{content:"✓";width:20px;height:20px;flex:none;border-radius:50%;background:rgba(228,87,46,.12);color:var(--primary);display:grid;place-items:center;font-size:.75rem;font-weight:700}

/* steps */
.steps-wrap{max-width:980px;margin-inline:auto}
.step-grid{display:grid;grid-template-columns:1fr 1fr 1fr;position:relative;gap:32px}
.step-item{position:relative;padding:32px;background:#fff;border-radius:var(--radius-lg);border:1px solid var(--light-line);box-shadow:var(--card-shadow);transition:transform .3s ease}
.step-item:hover{transform:translateY(-4px)}
.step-no{font-family:var(--font-serif);font-weight:900;font-size:2rem;color:rgba(228,87,46,.9);margin-bottom:16px;}
.step-item h3{font-size:1.2rem;margin-bottom:10px}
.step-item p{font-size:.92rem;color:var(--muted)}
.step-arrow{position:absolute;top:50%;right:-26px;transform:translateY(-50%);width:24px;height:24px;color:var(--primary);z-index:2}

/* hot */
.hot-layout{display:grid;grid-template-columns:1fr .86fr;gap:48px;align-items:center}
.hot-left h2{font-family:var(--font-serif);font-size:clamp(1.8rem,3.8vw,2.8rem);line-height:1.24;margin-bottom:22px}
.hot-left>p{color:var(--muted);margin-bottom:40px}
.profile-quote{display:flex;flex-direction:column;gap:22px}
.quote-row{display:grid;grid-template-columns:40px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--light-line)}
.quote-no{font-family:var(--font-serif);font-weight:800;color:var(--primary);font-size:1.1rem;padding-top:4px}
.quote-row h3{font-size:1.06rem;margin-bottom:6px}
.quote-row p{color:var(--muted);font-size:.92rem;line-height:1.8}
.quote-row a{margin-top:10px}
.hot-media{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hot-fig{border-radius:var(--radius-md);overflow:hidden;position:relative;min-height:280px;box-shadow:var(--card-shadow)}
.hot-fig img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .45s ease}
.hot-fig:hover img{transform:scale(1.04)}
.hot-caption{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(32,26,23,.54);backdrop-filter:blur(8px);color:#fff;font-size:.8rem;padding:8px 14px;border-radius:10px}
.hot-fig--tall{grid-row:span 2;min-height:578px}
.proof-scale{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:54px;background:#fff;border-radius:var(--radius-lg);padding:34px;border:1px solid var(--light-line)}
.proof-scale .proof-item{text-align:center}
.proof-item b{display:block;font-family:var(--font-serif);font-size:clamp(1.5rem,2.6vw,2.2rem);color:var(--primary)}
.proof-item span{font-size:.88rem;color:var(--muted)}

/* news */
.news-grid{display:grid;grid-template-columns:1.5fr .8fr;gap:52px}
.news-list{display:flex;flex-direction:column}
.news-item{padding:28px 0;border-bottom:1px solid var(--light-line);transition:padding .3s ease}
.news-item:hover{padding-left:8px}
.news-item small{display:block;color:var(--muted);font-size:.82rem;letter-spacing:.04em;margin-bottom:6px}
.news-item h3{font-size:1.15rem;margin-bottom:8px}
.news-item h3 a:hover{color:var(--primary)}
.news-item p{color:var(--muted);font-size:.93rem;line-height:1.8;max-width:62ch}
.news-side{background:#fff;border:1px solid var(--light-line);border-radius:var(--radius-lg);padding:28px;height:fit-content;box-shadow:var(--card-shadow)}
.news-side h3{font-size:1.15rem;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--light-line)}
.tag-cloud{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.side-btn{width:100%;justify-content:center}

/* pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:flex-start}
.price-plan{background:#fff;border:1px solid var(--light-line);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--card-shadow);position:relative;transition:transform .3s ease,box-shadow .3s ease}
.price-plan:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(32,26,23,.1)}
.price-plan .plan-price{margin:18px 0}
.plan-price .num{font-family:var(--font-serif);font-size:2.4rem;font-weight:800;color:var(--text)}
.plan-price .per{font-size:.86rem;color:var(--muted)}
.price-plan .plan-name{font-size:.86rem;font-weight:700;letter-spacing:.15em;color:var(--secondary);text-transform:uppercase}
.price-plan .plan-desc{color:var(--muted);font-size:.9rem;margin-bottom:18px}
.feat-list{display:grid;gap:12px;margin-bottom:28px}
.feat-list li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;line-height:1.65}
.feat-list li::before{content:"✓";width:20px;height:20px;flex:none;border-radius:50%;background:rgba(228,87,46,.12);color:var(--primary);display:grid;place-items:center;font-size:.72rem;font-weight:700;margin-top:2px}
.feat-list li.off{color:var(--muted)}
.feat-list li.off::before{content:"—";background:transparent;color:rgba(36,30,26,.4)}
.plan-popular{background:linear-gradient(160deg,#241E1A 0%,#2A201A 100%);color:#fff;border-color:var(--primary);box-shadow:0 24px 60px rgba(32,26,23,.22);transform:translateY(-10px)}
.plan-popular:hover{transform:translateY(-13px)}
.plan-popular .plan-price .num,.plan-popular .plan-name{color:#fff}
.plan-popular .plan-desc,.plan-popular .feat-list li{color:rgba(244,240,234,.75)}
.plan-popular .feat-list li::before{background:rgba(228,87,46,.5);color:#fff}
.pop-badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:6px 18px;font-size:.76rem;border-radius:40px;box-shadow:0 6px 18px rgba(228,87,46,.4);white-space:nowrap}
.plan-btn{width:100%;justify-content:center}
.price-disclaimer{text-align:center;font-size:.82rem;color:var(--muted);margin-top:20px}

/* faq */
.faq-wrap{max-width:860px;margin-inline:auto;display:grid;gap:16px}
.faq-item{background:#fff;border:1px solid var(--light-line);border-radius:14px;overflow:hidden;transition:border-color .25s ease,box-shadow .25s ease}
.faq-item:hover{border-color:rgba(228,87,46,.3)}
.faq-item summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 26px;font-weight:600;cursor:pointer;font-size:1.02rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";width:30px;height:30px;flex:none;border-radius:10px;background:var(--bg-alt);display:grid;place-items:center;font-size:1.2rem;color:var(--primary);transition:all .3s ease}
.faq-item[open] summary::after{content:"×";background:var(--primary);color:#fff}
.faq-item[open] summary{border-bottom:1px solid var(--light-line)}
.faq-answer{padding:20px 26px;color:var(--muted);font-size:.95rem;line-height:1.9;background:rgba(244,240,234,.5)}

/* CTA */
.cta-band{position:relative;overflow:hidden;background:var(--dark);color:#fff;border-radius:var(--radius-lg);padding:76px 40px;z-index:1;margin:0 auto}
.cta-band .cta-bg{position:absolute;inset:0;background-image:url('/assets/images/backpic/back-4.jpg');background-size:cover;background-position:center;opacity:.32}
.cta-band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--dark),rgba(32,26,23,.45),rgba(32,26,23,.75));z-index:-1}
.cta-inner{display:grid;grid-template-columns:1fr auto;align-items:center;gap:32px}
.cta-inner h2{font-family:var(--font-serif);font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.2;margin-bottom:12px;max-width:12em}
.cta-inner p{color:rgba(244,240,234,.78);max-width:54ch;margin-bottom:20px}
.cta-buttons{display:flex;flex-wrap:wrap;gap:12px}

/* footer */
.site-footer{background:var(--dark);color:rgba(244,240,234,.8);padding-top:76px;margin-top:110px}
.footer-top{display:grid;grid-template-columns:1.35fr 1fr 1fr .9fr;gap:42px;padding-bottom:40px}
.footer-brand{max-width:260px}
.footer-brand .brand-glyph{margin-bottom:16px}
.footer-brand h4,.footer-col h4{color:#fff;font-family:var(--font-serif);font-size:1.05rem;margin-bottom:18px}
.footer-brand p{font-size:.92rem;line-height:1.8;color:rgba(244,240,234,.62);margin-top:16px}
.footer-col li{margin-bottom:10px}
.footer-col a{font-size:.92rem;color:rgba(244,240,234,.64);transition:color .2s,padding .2s}
.footer-col a:hover{color:#E4572E;padding-left:5px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:24px 0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;font-size:.86rem;color:rgba(244,240,234,.48)}
.footer-bottom a{color:rgba(244,240,234,.6)}
.footer-bottom a:hover{color:#E4572E}
.footer-disclaimer{margin-top:6px;flex-basis:100%;line-height:1.7;font-size:.8rem}
.mobile-action{display:none}

/* responsive */
@media (max-width:1024px){
    .showcase-grid{grid-template-columns:1fr;gap:30px}.showcase-copy{max-width:680px}
    .hot-layout{grid-template-columns:1fr}
    .hot-media{grid-template-columns:1fr 1fr}
    .proof-scale{grid-template-columns:1fr 1fr}
    .news-grid{grid-template-columns:1fr}
    .footer-top{grid-template-columns:1fr 1fr}
    .pricing-grid{grid-template-columns:1fr;gap:36px}
    .plan-popular{transform:none}
    .plan-popular:hover{transform:translateY(-4px)}
    .cta-inner{grid-template-columns:1fr;text-align:center}
    .cta-inner p{margin-inline:auto}
    .cta-buttons{justify-content:center}
}
@media (max-width:768px){
    .section{padding:72px 0}
    .container{width:min(100% - 32px,1200px)}
    .header-inner{height:64px;gap:10px}
    .brand-sub{display:none}
    .brand-name{font-size:1.08rem}
    .nav-toggle{display:flex;margin-left:auto}
    .main-nav{position:fixed;top:64px;left:0;right:0;bottom:0;background:rgba(32,26,23,.98);z-index:99;padding:14px;display:block;opacity:0;visibility:hidden;pointer-events:none;overflow-y:auto}
    body.nav-open{overflow:hidden}
    body.nav-open .main-nav{opacity:1;visibility:visible;pointer-events:auto}
    .nav-list{flex-direction:column;align-items:flex-start}
    .nav-list>li{width:100%}
    .nav-link{color:#fff;width:100%;justify-content:space-between;padding:15px 10px;border-radius:9px}
    .nav-link:hover{background:rgba(255,255,255,.06)}
    .nav-link.active{color:#FF8A65}
    .nav-link.active::after{display:none}
    .dropdown-panel{position:static;display:none;background:transparent;box-shadow:none;padding:0;opacity:1;visibility:visible;transform:none;border:none;transition:none}
    .has-dropdown:hover .dropdown-panel{display:block}
    .dropdown-title{color:rgba(244,240,234,.5)}
    .dropdown-panel a{color:rgba(244,240,234,.78);padding:10px 12px 10px 26px;font-size:.92rem}
    .dropdown-panel a::before{width:6px;height:18px;opacity:.6;transform:none}
    .dropdown-panel a:hover{background:rgba(255,255,255,.04)}
    .entry-grid{grid-template-columns:1fr;grid-auto-rows:auto}
    .entry-card--main,.entry-card--comic,.entry-card--artist,.entry-card--wallpaper{grid-column:span 1;min-height:350px}
    .scene-row{grid-template-columns:1fr}
    .scene-row--reverse .scene-media{order:0}
    .scene-media{min-height:230px;position:relative}
    .step-grid{grid-template-columns:1fr;gap:44px}
    .step-arrow{display:none}
    .hero{padding:96px 0 66px}
    .hero-actions .btn{width:100%}
    .hero-stat-list{flex-direction:column;align-items:stretch}
    .showcase-stage{min-height:280px;padding:0}
    .stage-main img{height:340px}
    .stage-float{display:none}
    .pricing-grid{grid-template-columns:1fr}
    .proof-scale{grid-template-columns:1fr}
    .cta-band{padding:36px 24px}
    .footer-top{grid-template-columns:1fr 1fr}
    .brand-sub{display:none}
}
@media (max-width:520px){
    .container{width:min(100% - 24px,1200px)}
    .section-head{margin-bottom:36px}
    .section-head h2{font-size:1.75rem}
    .hero h1{font-size:2rem}
    .hero-avatar{width:62px;height:62px}
    .footer-top{grid-template-columns:1fr}
    .price-plan{padding:24px}
}
@media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition-duration:.01ms!important;transform:none!important}
}

/* roulang page: category1 */
:root {
        --primary: #E4572E;
        --primary-dark: #C64522;
        --secondary: #9C3D1E;
        --dark: #201A17;
        --dark-soft: #2D251F;
        --bg: #F4F0EA;
        --bg-alt: #EAE3D9;
        --text: #241E1A;
        --muted: rgba(36, 30, 26, .68);
        --light-line: rgba(32, 26, 23, .08);
        --white-line: rgba(255, 255, 255, .14);
        --card-shadow: 0 10px 30px rgba(32, 26, 23, .06);
        --radius-sm: 8px;
        --radius-md: 16px;
        --radius-lg: 24px;
        --font-sans: 'Noto Sans SC', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
        --font-serif: 'Noto Serif SC', 'Songti SC', serif;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: var(--font-sans);
        background: var(--bg);
        color: var(--text);
        line-height: 1.7;
        font-size: 16px;
        -webkit-font-smoothing: antialiased;
    }

    body.nav-open {
        overflow: hidden;
    }

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

    a {
        color: inherit;
        text-decoration: none;
    }

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

    input,
    textarea {
        font-family: inherit;
    }

    ul,
    ol {
        list-style: none;
    }

    .container {
        width: min(1200px, 100% - 48px);
        margin-inline: auto;
    }

    .section {
        padding: 116px 0;
    }

    .section--sand {
        background: var(--bg-alt);
    }

    .section--dark {
        background: var(--dark);
        color: #F4F0EA;
    }

    .section--soft-dark {
        background: var(--dark-soft);
        color: #F4F0EA;
    }

    .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        font-size: .82rem;
        letter-spacing: .2em;
        color: var(--primary);
        text-transform: uppercase;
        margin-bottom: 16px;
    }

    .eyebrow::before {
        content: "";
        width: 30px;
        height: 2px;
        background: var(--primary);
    }

    .eyebrow--light {
        color: #F4B9A2;
    }

    .eyebrow--light::before {
        background: #F4B9A2;
    }

    .section-head {
        max-width: 840px;
        margin-bottom: 58px;
    }

    .section-head h2 {
        font-family: var(--font-serif);
        font-size: clamp(1.9rem, 4vw, 2.9rem);
        line-height: 1.18;
        font-weight: 800;
        letter-spacing: -.02em;
    }

    .section-head .lead {
        margin-top: 18px;
        color: var(--muted);
        font-size: 1.06rem;
        line-height: 1.9;
        max-width: 68ch;
    }

    .section-head--center {
        margin-inline: auto;
        text-align: center;
    }

    .section-head--center .eyebrow {
        justify-content: center;
    }

    .section-head--center .lead {
        margin-inline: auto;
    }

    .section-head--light .lead {
        color: rgba(244, 240, 234, .72);
    }

    .main-title {
        font-family: var(--font-serif);
    }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    summary:focus-visible {
        outline: 3px solid rgba(228, 87, 46, .58);
        outline-offset: 3px;
        border-radius: 4px;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        border-radius: 10px;
        padding: 14px 28px;
        font-weight: 600;
        font-size: .97rem;
        line-height: 1;
        border: 1.5px solid transparent;
        transition: all .25s ease;
        position: relative;
        white-space: nowrap;
    }

    .btn svg {
        flex: none;
    }

    .btn-primary {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
        box-shadow: 0 8px 24px rgba(228, 87, 46, .18);
    }

    .btn-primary:hover {
        background: var(--primary-dark);
        border-color: var(--primary-dark);
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(228, 87, 46, .26);
    }

    .btn-primary:active {
        transform: translateY(0);
    }

    .btn-outline {
        border-color: rgba(36, 30, 26, .28);
        color: var(--text);
        background: transparent;
    }

    .btn-outline:hover {
        border-color: var(--primary);
        color: var(--primary);
        transform: translateY(-2px);
    }

    .btn-light {
        background: #fff;
        color: var(--dark);
        border-color: #fff;
        box-shadow: 0 10px 36px rgba(0, 0, 0, .2);
    }

    .btn-light:hover {
        background: var(--bg-alt);
        transform: translateY(-2px);
    }

    .text-link {
        color: var(--text);
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        position: relative;
        padding-bottom: 4px;
    }

    .text-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 2px;
        width: 100%;
        background: var(--primary);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .32s ease;
    }

    .text-link:hover::after {
        transform: scaleX(1);
    }

    .text-link:hover {
        color: var(--primary);
    }

    /* ===== Header / Nav ===== */
    .site-header {
        position: sticky;
        top: 0;
        z-index: 100;
        background: rgba(244, 240, 234, .92);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(32, 26, 23, .06);
    }

    .header-inner {
        display: flex;
        align-items: center;
        gap: 22px;
        height: 76px;
    }

    .brand {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
    }

    .brand-glyph {
        width: 44px;
        height: 44px;
        flex: none;
        background: var(--primary);
        color: #fff;
        border-radius: 14px;
        display: grid;
        place-items: center;
        font-weight: 800;
        font-size: 1.1rem;
        letter-spacing: -.04em;
        box-shadow: 0 6px 18px rgba(228, 87, 46, .25);
    }

    .brand-copy {
        display: flex;
        flex-direction: column;
        line-height: 1.1;
    }

    .brand-name {
        font-size: 1.22rem;
        font-weight: 800;
        font-family: var(--font-serif);
        color: var(--text);
    }

    .brand-name small {
        margin-left: 4px;
        color: var(--primary);
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .06em;
    }

    .brand-sub {
        font-size: .65rem;
        color: var(--muted);
        letter-spacing: .12em;
        margin-top: 4px;
    }

    .nav-toggle {
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 42px;
        height: 42px;
        border-radius: 10px;
        border: 1px solid rgba(32, 26, 23, .08);
        background: transparent;
        margin-left: auto;
        z-index: 101;
    }

    .nav-toggle span {
        display: block;
        width: 18px;
        height: 2px;
        background: var(--text);
        border-radius: 4px;
        margin: 3px 0;
        transition: all .3s ease;
    }

    .main-nav {
        margin-left: auto;
    }

    .nav-list {
        display: flex;
        align-items: center;
        gap: 2px;
    }

    .nav-list>li {
        position: relative;
    }

    .nav-link {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: .93rem;
        font-weight: 600;
        padding: 12px 16px;
        border-radius: 8px;
        color: rgba(36, 30, 26, .86);
        transition: color .2s ease;
        position: relative;
        line-height: 1.4;
    }

    .nav-link:hover {
        color: var(--primary);
    }

    .nav-link .nav-caret {
        width: 10px;
        height: 10px;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2;
        transition: transform .25s ease;
    }

    .nav-link.active {
        color: var(--primary);
    }

    .nav-link.active::after {
        content: "";
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 4px;
        height: 3px;
        border-radius: 10px;
        background: var(--primary);
    }

    .has-drop>.nav-drop {
        position: absolute;
        left: 0;
        top: calc(100% + 12px);
        min-width: 240px;
        background: #fff;
        border: 1px solid rgba(32, 26, 23, .08);
        border-radius: 14px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        box-shadow: 0 18px 44px rgba(32, 26, 23, .12);
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px);
        transition: all .28s ease;
        z-index: 60;
    }

    .has-drop:hover>.nav-drop,
    .has-drop.open>.nav-drop {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .has-drop>.nav-drop a {
        padding: 9px 14px;
        font-size: .86rem;
        font-weight: 500;
        line-height: 1.6;
        border-radius: 8px;
        color: var(--text);
        position: relative;
        transition: all .2s ease;
        display: block;
        white-space: nowrap;
    }

    .has-drop>.nav-drop a:hover {
        background: #FBF6F0;
        color: var(--primary);
        padding-left: 24px;
    }

    .has-drop>.nav-drop a:hover::before {
        content: "";
        position: absolute;
        left: 8px;
        top: 50%;
        transform: translateY(-50%);
        width: 5px;
        height: 18px;
        background: var(--primary);
        border-radius: 4px;
    }

    .nav-cta {
        margin-left: 8px;
        padding: 10px 20px;
        font-size: .88rem;
    }

    /* ===== 面包屑 ===== */
    .breadcrumb {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        font-size: .84rem;
        color: var(--muted);
        margin-bottom: 34px;
    }

    .breadcrumb a {
        transition: color .2s;
    }

    .breadcrumb a:hover {
        color: var(--primary);
    }

    .breadcrumb .sep {
        color: rgba(36, 30, 26, .3);
    }

    .breadcrumb .current {
        color: var(--text);
        font-weight: 500;
    }

    /* ===== 频道头部区块 ===== */
    .channel-lead {
        padding: 72px 0 76px;
        background: var(--bg);
    }

    .channel-lead-grid {
        display: grid;
        grid-template-columns: 1.05fr .95fr;
        gap: 64px;
        align-items: start;
    }

    .channel-lead h1 {
        font-family: var(--font-serif);
        font-size: clamp(2.1rem, 5vw, 3.6rem);
        line-height: 1.15;
        font-weight: 900;
        letter-spacing: -.02em;
        margin: 10px 0 22px;
    }

    .channel-lead h1 .tone {
        color: var(--primary);
    }

    .channel-lead-desc {
        color: var(--muted);
        font-size: 1rem;
        line-height: 1.9;
        max-width: 100%;
    }

    .lead-aside {
        background: #fff;
        border: 1px solid var(--light-line);
        border-radius: var(--radius-lg);
        padding: 30px;
        box-shadow: var(--card-shadow);
    }

    .lead-aside .badge-line {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: .8rem;
        font-weight: 600;
        letter-spacing: .12em;
        color: var(--primary);
        margin-bottom: 14px;
        text-transform: uppercase;
    }

    .lead-aside p {
        font-size: .96rem;
        line-height: 1.9;
        color: rgba(36, 30, 26, .72);
    }

    .lead-aside .mini-list {
        margin-top: 18px;
        display: flex;
        flex-direction: column;
        gap: 9px;
    }

    .lead-aside .mini-list li {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: .9rem;
        color: var(--text);
    }

    .lead-aside .mini-list li::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--primary);
        flex: none;
    }

    .stats-row {
        margin-top: 56px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }

    .stat-card {
        background: #fff;
        border: 1px solid var(--light-line);
        border-radius: var(--radius-md);
        padding: 24px 28px;
        box-shadow: 0 6px 20px rgba(32, 26, 23, .04);
    }

    .stat-card .num {
        font-family: var(--font-serif);
        font-size: clamp(1.6rem, 3vw, 2.2rem);
        font-weight: 900;
        color: var(--text);
        line-height: 1.1;
        letter-spacing: -.02em;
    }

    .stat-card .num em {
        font-style: normal;
        color: var(--primary);
        font-size: .8em;
        margin-left: 4px;
    }

    .stat-card .label {
        font-size: .84rem;
        color: var(--muted);
        margin-top: 8px;
    }

    /* ===== 画廊浏览主体 ===== */
    .gallery-browser {
        padding: 84px 0 104px;
        background: var(--bg-alt);
    }

    .gallery-head-row {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 24px;
        margin-bottom: 46px;
    }

    .gallery-head-row h2 {
        font-family: var(--font-serif);
        font-size: clamp(1.8rem, 3.6vw, 2.7rem);
        line-height: 1.22;
        font-weight: 800;
        letter-spacing: -.02em;
        margin-top: 10px;
    }

    .gallery-head-row .result-text {
        color: var(--muted);
        font-size: .9rem;
        flex: none;
        padding-bottom: 8px;
    }

    .gallery-layout {
        display: grid;
        grid-template-columns: 252px minmax(0, 1fr);
        gap: 54px;
        align-items: start;
    }

    .filter-sidebar {
        position: sticky;
        top: 104px;
        background: #fff;
        border: 1px solid var(--light-line);
        border-radius: var(--radius-lg);
        padding: 24px;
        box-shadow: var(--card-shadow);
    }

    .filter-sidebar-title {
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: var(--muted);
        padding-bottom: 14px;
        border-bottom: 1px solid rgba(32, 26, 23, .08);
        margin-bottom: 20px;
    }

    .filter-group {
        margin-bottom: 24px;
    }

    .filter-group h4 {
        font-size: .84rem;
        font-weight: 600;
        margin-bottom: 12px;
        color: var(--text);
    }

    .filter-group .chip-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .filter-chip {
        display: inline-flex;
        align-items: center;
        text-align: center;
        padding: 7px 14px;
        font-size: .78rem;
        font-weight: 500;
        border: 1px solid rgba(32, 26, 23, .1);
        border-radius: 999px;
        background: #fff;
        color: rgba(36, 30, 26, .76);
        cursor: pointer;
        transition: all .22s ease;
        line-height: 1.5;
    }

    .filter-chip:hover {
        border-color: var(--primary);
        color: var(--primary);
        background: rgba(228, 87, 46, .06);
    }

    .filter-chip.active {
        background: var(--dark);
        border-color: var(--dark);
        color: #fff;
    }

    .filter-chip.active:hover {
        background: var(--dark);
        color: #fff;
    }

    .hot-tags {
        background: rgba(234, 227, 217, .45);
        border-radius: 14px;
        padding: 14px;
    }

    .hot-tags .filter-chip {
        background: rgba(244, 240, 234, .65);
    }

    /* 条目瀑布 */
    .gallery-stream {
        columns: 2;
        column-gap: 22px;
    }

    .g-item {
        break-inside: avoid;
        background: #fff;
        border: 1px solid var(--light-line);
        border-radius: var(--radius-md);
        overflow: hidden;
        box-shadow: var(--card-shadow);
        margin-bottom: 22px;
        transition: transform .35s ease, box-shadow .35s ease;
    }

    .g-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px rgba(32, 26, 23, .1);
    }

    .g-item .cover-wrap {
        position: relative;
        overflow: hidden;
        background: var(--bg-alt);
        aspect-ratio: 4 / 5;
    }

    .g-item .cover-wrap.ratio-11 {
        aspect-ratio: 1 / 1;
    }

    .g-item .cover-wrap.ratio-169 {
        aspect-ratio: 16 / 9;
    }

    .g-item .cover-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform .5s ease;
    }

    .g-item:hover .cover-wrap img {
        transform: scale(1.04);
    }

    .g-tag {
        position: absolute;
        left: 12px;
        top: 12px;
        z-index: 2;
        background: rgba(32, 26, 23, .76);
        color: #F4F0EA;
        font-size: .7rem;
        font-weight: 600;
        padding: 5px 10px;
        border-radius: 999px;
        letter-spacing: .04em;
        backdrop-filter: blur(4px);
    }

    .g-tag--hot {
        background: var(--primary);
    }

    .g-info {
        padding: 16px 18px 20px;
    }

    .g-info h3 {
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.5;
        margin-bottom: 5px;
    }

    .g-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
        font-size: .78rem;
        color: var(--muted);
        margin-top: 9px;
    }

    .g-meta .artist {
        font-weight: 600;
        color: var(--secondary);
    }

    .g-meta .heat {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--primary);
        font-weight: 600;
    }

    .g-item--notice {
        column-span: all;
        display: flex;
        align-items: center;
        gap: 16px;
        background: rgba(255, 255, 255, .6);
        border: 1px dashed rgba(228, 87, 46, .4);
        border-radius: var(--radius-md);
        padding: 16px 20px;
        margin: 8px 0 24px;
        box-shadow: none;
    }

    .g-item--notice .notice-icon {
        width: 36px;
        height: 36px;
        flex: none;
        border-radius: 10px;
        background: rgba(228, 87, 46, .12);
        color: var(--primary);
        display: grid;
        place-items: center;
        font-weight: 800;
        font-size: 1.1rem;
    }

    .g-item--notice p {
        font-size: .85rem;
        line-height: 1.8;
        color: rgba(36, 30, 26, .74);
    }

    .pagination {
        margin-top: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .pagination a,
    .pagination span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 40px;
        padding: 0 8px;
        border: 1px solid rgba(32, 26, 23, .12);
        border-radius: 10px;
        font-size: .86rem;
        font-weight: 500;
        color: var(--text);
        background: #fff;
        transition: all .22s ease;
    }

    .pagination a:hover {
        border-color: var(--primary);
        color: var(--primary);
        transform: translateY(-2px);
    }

    .pagination .current {
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
        font-weight: 700;
    }

    /* ===== 搜索引导 ===== */
    .search-direct {
        background: var(--bg);
        position: relative;
        padding: 100px 0;
    }

    .search-inner {
        text-align: center;
        max-width: 760px;
        margin-inline: auto;
    }

    .search-inner h2 {
        font-family: var(--font-serif);
        font-size: clamp(1.8rem, 3.6vw, 2.6rem);
        font-weight: 800;
        letter-spacing: -.02em;
        line-height: 1.25;
    }

    .search-inner>p {
        color: var(--muted);
        margin: 18px auto 34px;
        max-width: 55ch;
    }

    .search-form {
        display: flex;
        justify-content: center;
        max-width: 560px;
        margin-inline: auto;
        background: #fff;
        border: 1px solid rgba(32, 26, 23, .1);
        border-radius: 999px;
        padding: 6px 6px 6px 18px;
        box-shadow: 0 12px 34px rgba(32, 26, 23, .08);
        transition: border-color .25s, box-shadow .25s;
    }

    .search-form:focus-within {
        border-color: var(--primary);
        box-shadow: 0 14px 36px rgba(228, 87, 46, .14);
    }

    .search-form input {
        flex: 1;
        border: none;
        outline: none;
        background: transparent;
        font-size: .93rem;
        color: var(--text);
        padding: 10px 0;
        min-width: 0;
    }

    .search-form input::placeholder {
        color: rgba(36, 30, 26, .42);
    }

    .search-form .btn {
        border-radius: 999px;
        padding: 12px 24px;
        flex: none;
    }

    /* ===== 专题 ===== */
    .topic-section {
        background: var(--dark);
        color: #F4F0EA;
    }

    .topic-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
    }

    .topic-card {
        position: relative;
        border-radius: var(--radius-lg);
        overflow: hidden;
        min-height: 300px;
        display: flex;
        align-items: flex-end;
        background: var(--dark-soft);
        border: 1px solid var(--white-line);
        transition: transform .35s ease, box-shadow .35s ease;
    }

    .topic-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 22px 46px rgba(0, 0, 0, .28);
    }

    .topic-card .topic-bg {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        opacity: .8;
        transition: transform .5s ease;
    }

    .topic-card:hover .topic-bg {
        transform: scale(1.05);
    }

    .topic-card .topic-body {
        position: relative;
        padding: 28px;
        background: linear-gradient(to top, rgba(32, 26, 23, .88) 0%, rgba(32, 26, 23, .58) 58%, transparent 100%);
        width: 100%;
    }

    .topic-card .topic-body h3 {
        font-family: var(--font-serif);
        font-size: 1.3rem;
        font-weight: 800;
        margin-bottom: 8px;
    }

    .topic-card .topic-body p {
        font-size: .86rem;
        color: rgba(244, 240, 234, .78);
        line-height: 1.8;
        max-width: 42ch;
    }

    .topic-card .topic-more {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 14px;
        font-size: .8rem;
        color: #fff;
        font-weight: 600;
        position: relative;
    }

    .topic-card .topic-more::after {
        content: "→";
        transition: transform .25s;
    }

    .topic-card:hover .topic-more::after {
        transform: translateX(4px);
    }

    /* ===== FAQ ===== */
    .faq-section {
        background: var(--bg-alt);
    }

    .faq-list {
        max-width: 860px;
        margin-inline: auto;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .faq-item {
        background: #fff;
        border: 1px solid var(--light-line);
        border-radius: var(--radius-md);
        overflow: hidden;
        transition: border-color .25s, box-shadow .25s;
    }

    .faq-item:hover {
        border-color: rgba(228, 87, 46, .28);
        box-shadow: 0 10px 28px rgba(32, 26, 23, .05);
    }

    .faq-item summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding: 20px 24px;
        font-weight: 600;
        font-size: 1rem;
        color: var(--text);
        list-style: none;
        cursor: pointer;
    }

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

    .faq-item summary::after {
        content: "+";
        flex: none;
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: rgba(228, 87, 46, .1);
        color: var(--primary);
        font-size: 1.1rem;
        font-weight: 700;
        transition: all .3s ease;
    }

    .faq-item[open] summary::after {
        transform: rotate(45deg);
        background: var(--primary);
        color: #fff;
    }

    .faq-item .answer {
        padding: 0 24px 22px;
        color: var(--muted);
        font-size: .94rem;
        line-height: 1.9;
        max-width: 72ch;
    }

    /* ===== CTA 深色区 ===== */
    .cta-zone {
        background: var(--dark-soft);
        color: #fff;
        padding: 96px 0;
    }

    .cta-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 44px;
        background: var(--dark);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: var(--radius-lg);
        padding: 54px 60px;
        position: relative;
        overflow: hidden;
    }

    .cta-box::before {
        content: "";
        position: absolute;
        right: -80px;
        top: -80px;
        width: 260px;
        height: 260px;
        background: radial-gradient(circle, rgba(228, 87, 46, .25) 0%, transparent 70%);
        pointer-events: none;
    }

    .cta-box h2 {
        font-family: var(--font-serif);
        font-size: clamp(1.7rem, 3.4vw, 2.5rem);
        line-height: 1.25;
        font-weight: 800;
        letter-spacing: -.02em;
        max-width: 22ch;
    }

    .cta-box p {
        margin-top: 12px;
        color: rgba(244, 240, 234, .72);
        font-size: .95rem;
        line-height: 1.9;
        max-width: 58ch;
    }

    .cta-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        flex: none;
        align-items: stretch;
    }

    .cta-actions .btn {
        min-width: 190px;
    }

    /* ===== Footer ===== */
    .site-footer {
        background: var(--dark);
        color: #B8ABA0;
        padding: 72px 0 28px;
        font-size: .88rem;
    }

    .site-footer a {
        color: #C9BEB4;
        transition: color .2s;
    }

    .site-footer a:hover {
        color: #fff;
    }

    .footer-top {
        display: grid;
        grid-template-columns: 1.5fr .85fr .85fr .85fr;
        gap: 46px;
        margin-bottom: 42px;
    }

    .footer-brand p {
        margin-top: 18px;
        line-height: 1.9;
        color: rgba(244, 240, 234, .62);
        font-size: .88rem;
        max-width: 38ch;
    }

    .footer-col h4 {
        color: #fff;
        font-size: .92rem;
        font-weight: 700;
        margin-bottom: 18px;
        letter-spacing: .05em;
    }

    .footer-col ul {
        display: flex;
        flex-direction: column;
        gap: 11px;
    }

    .footer-col ul a {
        font-size: .88rem;
        display: inline-block;
        position: relative;
    }

    .footer-col ul a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -3px;
        width: 0;
        height: 1.5px;
        background: var(--primary);
        transition: width .3s ease;
    }

    .footer-col ul a:hover::after {
        width: 100%;
    }

    .footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, .08);
        padding-top: 22px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 14px;
        font-size: .78rem;
        color: rgba(244, 240, 234, .4);
    }

    .footer-bottom a {
        color: rgba(244, 240, 234, .7);
    }

    .footer-disclaimer {
        flex: 0 0 100%;
        color: rgba(244, 240, 234, .3);
        line-height: 1.7;
        font-size: .72rem;
    }

    footer .brand-sub {
        color: rgba(244, 240, 234, .4);
    }

    /* ===== 响应式 ===== */
    @media (max-width: 1120px) {
        .gallery-layout {
            grid-template-columns: 220px minmax(0, 1fr);
            gap: 32px;
        }

        .channel-lead-grid {
            grid-template-columns: 1fr .9fr;
            gap: 40px;
        }

        .topic-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 1023px) {
        .section {
            padding: 84px 0;
        }

        .channel-lead {
            padding: 56px 0 64px;
        }

        .channel-lead-grid {
            grid-template-columns: 1fr;
        }

        .stats-row {
            grid-template-columns: repeat(2, 1fr);
            margin-top: 40px;
        }

        .gallery-layout {
            grid-template-columns: 210px minmax(0, 1fr);
            gap: 28px;
        }

        .filter-sidebar {
            padding: 18px;
        }

        .cta-box {
            flex-direction: column;
            align-items: flex-start;
            padding: 40px;
        }

        .cta-actions {
            flex-direction: row;
            flex-wrap: wrap;
        }
    }

    @media (max-width: 767px) {
        .container {
            width: min(100% - 32px, 1200px);
        }

        .section {
            padding: 68px 0;
        }

        .section-head {
            margin-bottom: 38px;
        }

        .nav-toggle {
            display: flex;
        }

        .main-nav {
            position: fixed;
            top: 0;
            right: 0;
            width: 82vw;
            max-width: 360px;
            height: 100vh;
            height: 100dvh;
            background: var(--dark);
            margin-left: 0;
            transform: translateX(100%);
            transition: transform .34s ease;
            z-index: 100;
            overflow-y: auto;
            padding: 96px 24px 40px;
        }

        .main-nav.open {
            transform: translateX(0);
        }

        .nav-list {
            flex-direction: column;
            align-items: stretch;
            gap: 6px;
        }

        .nav-link {
            color: rgba(244, 240, 234, .85);
            font-size: 1rem;
            padding: 14px 8px;
            justify-content: space-between;
            border-bottom: 1px solid rgba(255, 255, 255, .06);
            border-radius: 0;
        }

        .nav-link.active::after {
            content: none;
        }

        .nav-link.active {
            color: #F4B9A2;
        }

        .has-drop>.nav-drop {
            position: static;
            min-width: auto;
            background: transparent;
            border: none;
            box-shadow: none;
            opacity: 1;
            visibility: visible;
            transform: none;
            padding: 4px 0 10px;
            display: none;
            border-radius: 0;
        }

        .has-drop.open>.nav-drop {
            display: flex;
        }

        .has-drop>.nav-drop a {
            color: rgba(244, 240, 234, .68);
            padding: 8px 12px;
            font-size: .86rem;
        }

        .has-drop>.nav-drop a:hover {
            background: rgba(255, 255, 255, .05);
            color: #fff;
            padding-left: 12px;
        }

        .has-drop>.nav-drop a:hover::before {
            content: none;
        }

        .nav-cta {
            margin: 22px 0 0;
            width: 100%;
            justify-content: center;
            background: var(--primary);
            border-color: var(--primary);
            color: #fff;
        }

        .header-inner .nav-toggle {
            display: flex;
            margin-left: auto;
        }

        .channel-lead {
            padding: 42px 0 56px;
        }

        .channel-lead h1 {
            font-size: clamp(1.8rem, 7vw, 2.6rem);
        }

        .lead-aside {
            padding: 23px;
            margin-top: 10px;
        }

        .stats-row {
            gap: 10px;
            margin-top: 34px;
        }

        .stat-card {
            padding: 17px 16px;
        }

        .stat-card .label {
            font-size: .76rem;
        }

        .gallery-browser {
            padding: 58px 0 72px;
        }

        .gallery-head-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 28px;
        }

        .gallery-layout {
            grid-template-columns: 1fr;
        }

        .filter-sidebar {
            position: static;
            top: auto;
            padding: 18px;
            margin-bottom: 6px;
        }

        .filter-sidebar-title {
            margin-bottom: 12px;
        }

        .filter-groups {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            column-gap: 10px;
        }

        .filter-group {
            margin-bottom: 8px;
        }

        .filter-group h4 {
            font-size: .76rem;
            margin-bottom: 8px;
        }

        .filter-group .chip-row {
            flex-wrap: wrap;
            gap: 6px;
        }

        .filter-chip {
            padding: 6px 10px;
            font-size: .73rem;
        }

        .hot-tags {
            grid-column: 1 / -1;
        }

        .gallery-stream {
            columns: 1;
            margin-top: 18px;
        }

        .g-item--notice {
            column-span: all;
            flex-direction: column;
            align-items: flex-start;
            padding: 16px;
        }

        .pagination {
            gap: 6px;
        }

        .pagination a,
        .pagination span {
            min-width: 34px;
            height: 34px;
            font-size: .78rem;
        }

        .topic-grid {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .topic-card {
            min-height: 220px;
        }

        .faq-item summary {
            padding: 16px 18px;
            font-size: .92rem;
            line-height: 1.6;
        }

        .faq-item .answer {
            padding: 0 18px 18px;
            font-size: .88rem;
        }

        .cta-box {
            padding: 32px 24px;
            border-radius: var(--radius-md);
        }

        .cta-actions .btn {
            width: 100%;
        }

        .footer-top {
            grid-template-columns: 1fr;
            gap: 34px;
        }

        .footer-bottom {
            flex-direction: column;
        }

        .footer-bottom span,
        .footer-bottom a {
            font-size: .74rem;
        }
    }

    @media (max-width: 500px) {
        .search-form {
            border-radius: 18px;
            flex-direction: column;
            padding: 14px;
        }

        .search-form input {
            width: 100%;
            margin-bottom: 10px;
            border-bottom: 1px solid var(--light-line);
            padding: 6px 4px 12px;
        }

        .search-form .btn {
            width: 100%;
            border-radius: 12px;
        }

        .stats-row {
            grid-template-columns: repeat(2, 1fr);
        }

        .section-head h2,
        .gallery-head-row h2,
        .search-inner h2 {
            font-size: 1.55rem;
            line-height: 1.28;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
            animation: none !important;
            transition: none !important;
        }
    }