/* roulang page: index */
:root{
  --brand-primary:#D96B54;
  --brand-light:#F3A79B;
  --brand-dark:#A84633;
  --ink:#1C1F23;
  --ink-2:#4A5157;
  --canvas:#F6F3F0;
  --surface:#FFFFFF;
  --line:#E5DED8;
  --deep-blue-gray:#17283B;
  --deep-blue-2:#101F2E;
  --success:#3F7D63;
  --warning:#F5E6D3;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --shadow-1:0 8px 24px rgba(23,40,59,0.06);
  --shadow-2:0 16px 32px rgba(23,40,59,0.12);
  --transition:0.25s ease;
  --font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC","Helvetica Neue",sans-serif;
}
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--font-family); background:var(--canvas); color:var(--ink); font-size:1rem; line-height:1.75; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul, ol{ list-style:none; }
input, button, textarea{ font:inherit; }
button{ cursor:pointer; }
.container{ max-width:1200px; margin:0 auto; padding:0 24px; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--brand-dark); color:#fff; padding:8px 14px; border-radius:0 0 8px 0; z-index:999; }
.skip-link:focus{ left:0; }

.topbar{ background:var(--deep-blue-gray); color:rgba(255,255,255,0.82); min-height:36px; font-size:0.8rem; display:flex; align-items:center; }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:16px; }
.topbar-note{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-note .pulse-dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--brand-light); margin-right:8px; vertical-align:middle; }
.topbar-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.topbar-actions a{ color:rgba(255,255,255,0.82); transition:color .2s; }
.topbar-actions a:hover{ color:#fff; }
.topbar-actions .bar-split{ width:1px; height:12px; background:rgba(255,255,255,0.3); display:inline-block; margin-right:12px; }

.site-header{ position:sticky; top:0; z-index:100; background:var(--surface); border-bottom:1px solid var(--line); }
.header-inner{ min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:nowrap; }
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-mark{ width:36px; height:36px; border-radius:11px; background:linear-gradient(135deg, var(--brand-primary), var(--brand-light)); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 14px rgba(217,107,84,0.28); }
.brand-mark svg{ width:21px; height:21px; }
.brand-name{ font-size:1.35rem; font-weight:700; letter-spacing:0.02em; color:var(--ink); }
.main-nav{ display:flex; align-items:center; gap:34px; justify-content:center; flex:1; }
.main-nav a{ position:relative; display:inline-flex; align-items:center; min-height:69px; padding:0 2px; font-size:0.98rem; color:var(--ink-2); border-bottom:3px solid transparent; transition:color .22s; }
.main-nav a:hover{ color:var(--brand-dark); }
.main-nav a.active{ color:var(--brand-dark); border-bottom-color:var(--brand-primary); font-weight:600; }
.header-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }

.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 22px; border-radius:var(--radius-sm); font-size:0.95rem; font-weight:600; border:1px solid transparent; transition:transform .2s, box-shadow .25s, background .25s, border-color .25s; line-height:1; white-space:nowrap; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:scale(0.98); }
.btn:focus-visible{ outline:2px solid var(--brand-primary); outline-offset:2px; }
.btn-primary{ background:var(--deep-blue-gray); color:#fff; box-shadow:0 8px 18px rgba(23,40,59,0.18); }
.btn-primary:hover{ background:var(--deep-blue-2); color:#fff; box-shadow:var(--shadow-2); }
.btn-brand{ background:var(--brand-primary); color:#fff; box-shadow:0 8px 18px rgba(217,107,84,0.22); }
.btn-brand:hover{ background:var(--brand-dark); color:#fff; }
.btn-outline{ background:var(--surface); color:var(--ink); border-color:var(--line); }
.btn-outline:hover{ border-color:var(--brand-primary); color:var(--brand-dark); background:#FFFDFB; }
.btn-ghost-nav{ background:transparent; color:var(--ink-2); min-height:38px; padding:0 12px; }
.btn-ghost-nav:hover{ color:var(--brand-dark); background:rgba(217,107,84,0.06); }
.btn-lg{ min-height:52px; padding:0 30px; font-size:1rem; border-radius:var(--radius-md); gap:8px; }
.btn-sm{ min-height:38px; padding:0 16px; font-size:0.875rem; border-radius:8px; }

.mobile-menu-btn{ display:none; width:42px; height:42px; background:#fff; border:1px solid var(--line); border-radius:10px; align-items:center; justify-content:center; color:var(--ink); }
.mobile-menu-btn span{ display:block; width:18px; height:2px; background:var(--ink); margin:2px 0; border-radius:2px; }

.hero{ position:relative; overflow:hidden; background:linear-gradient(135deg, rgba(246,243,240,0.95) 0%, rgba(255,242,236,0.86) 100%), url('/assets/images/backpic/back-1.jpg') center/cover no-repeat; padding:96px 0 80px; }
.hero::before{ content:""; position:absolute; width:580px; height:580px; border-radius:50%; background:radial-gradient(circle, rgba(243,167,155,0.22), rgba(243,167,155,0)); top:-180px; right:-130px; pointer-events:none; }
.hero-wrap{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 0.95fr); gap:56px; align-items:center; }
.hero-copy .hero-eyebrow{ display:inline-flex; align-items:center; gap:10px; color:var(--brand-dark); background:rgba(217,107,84,0.1); border:1px solid rgba(217,107,84,0.2); padding:6px 16px; border-radius:999px; font-size:0.82rem; font-weight:600; margin-bottom:22px; }
.hero-eyebrow .eyebrow-dot{ width:7px; height:7px; border-radius:50%; background:var(--brand-primary); }
h1{ font-size:clamp(2.2rem, 4.2vw, 3.6rem); line-height:1.22; font-weight:700; letter-spacing:-0.01em; margin-bottom:22px; }
h1 .text-accent{ color:var(--brand-primary); }
.hero-sub{ color:var(--ink-2); font-size:1.06rem; line-height:1.9; margin-bottom:30px; max-width:560px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:22px; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:6px 13px; background:rgba(217,107,84,0.12); color:var(--brand-dark); border-radius:999px; font-size:0.82rem; font-weight:500; }
.badge::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--brand-primary); flex:0 0 auto; }

.hero-visual{ position:relative; }
.browser-window{ background:#0F1F2C; border-radius:18px; padding:16px 16px 0; box-shadow:0 30px 60px rgba(23,40,59,0.28); border:1px solid rgba(255,255,255,0.08); overflow:hidden; }
.browser-top-tabs{ display:flex; gap:6px; padding-bottom:10px; }
.browser-tab{ display:flex; align-items:center; gap:7px; padding:6px 14px; border-radius:8px 8px 0 0; font-size:0.76rem; color:rgba(255,255,255,0.65); background:rgba(255,255,255,0.05); }
.browser-tab.active{ background:#1E3348; color:rgba(255,255,255,0.92); }
.browser-tab .pink-dot{ width:5px; height:5px; border-radius:50%; background:var(--brand-light); }
.browser-addressbar{ display:flex; align-items:center; gap:8px; background:#233B51; border-radius:8px; padding:7px 12px; margin-bottom:12px; }
.browser-addressbar .addr-icon{ width:16px; height:16px; border-radius:50%; border:2px solid #55b98d; flex:0 0 auto; }
.browser-addressbar .addr-text{ color:rgba(255,255,255,0.7); font-size:0.84rem; letter-spacing:0.02em; }
.browser-addressbar .addr-lock{ margin-left:auto; color:rgba(255,255,255,0.5); font-size:0.75rem; }
.browser-content{ background:#fff; border-radius:10px 10px 0 0; padding:16px; display:flex; gap:13px; flex-direction:column; }
.content-topline{ display:flex; align-items:center; gap:12px; }
.meta-line{ width:22px; height:6px; border-radius:3px; background:var(--brand-primary); }
.meta-line.soft{ background:#F5D7D1; }
.ui-row{ display:grid; grid-template-columns:1fr 2fr; gap:12px; }
.ui-text-lines{ display:flex; flex-direction:column; gap:6px; }
.ui-text-lines .ui-bar{ height:7px; border-radius:4px; background:#EDE8E3; }
.ui-text-lines .ui-bar.hot{ background:#F5D7D1; }
.ui-text-lines .ui-bar.dark{ background:#DCE2E8; }
.ui-text-lines .ui-bar.short{ width:72%; }
.ui-text-lines .ui-bar.very-short{ width:48%; }
.ui-visual-block{ border-radius:10px; background:linear-gradient(135deg, #F8E3DE, #FCEEE9); aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; color:#C55D45; font-size:0.82rem; font-weight:600; }
.browser-statusbar{ background:#13293D; padding:9px 4px 12px; display:flex; gap:20px; }
.status-dot{ width:8px; height:8px; border-radius:50%; background:#3F7D63; }
.status-text{ color:rgba(255,255,255,0.5); font-size:0.7rem; }
.hero-visual-caption{ margin-top:18px; text-align:center; font-size:0.82rem; color:var(--ink-2); }

.section{ padding:86px 0; }
.section-alt{ background:var(--surface); }
.section-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:48px; }
.section-kicker{ display:inline-block; font-size:0.8rem; letter-spacing:0.1em; color:var(--brand-dark); font-weight:600; margin-bottom:10px; }
h2{ font-size:clamp(1.6rem, 2.8vw, 2.2rem); line-height:1.35; font-weight:700; letter-spacing:-0.01em; }
.section-desc{ margin-top:14px; max-width:680px; color:var(--ink-2); }
.text-link{ display:inline-flex; align-items:center; gap:7px; color:var(--brand-dark); font-weight:600; font-size:0.95rem; min-height:44px; }
.text-link:hover{ gap:10px; color:var(--brand-dark); }
.text-link .arrow{ transition:transform .25s; }
.text-link:hover .arrow{ transform:translateX(3px); }

.features-layout{ display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:0 64px; }
.features-left{ position:sticky; top:130px; align-self:start; }
.features-left h2{ margin-bottom:16px; }
.features-left .section-desc{ margin:0 0 20px; }
.feature-list-item{ display:flex; align-items:stretch; gap:22px; padding:22px 4px; border-bottom:1px solid var(--line); transition:background .25s; border-radius:6px; }
.feature-list-item:hover{ background:rgba(217,107,84,0.035); }
.feature-list-item .cap-num{ font-size:0.85rem; font-weight:600; color:#B7AAA3; width:24px; padding-top:2px; flex:0 0 auto; }
.cap-body{ flex:1; }
.cap-body h3{ font-size:1.08rem; line-height:1.5; margin-bottom:5px; }
.cap-body p{ font-size:0.9rem; color:var(--ink-2); max-width:90%; }
.cap-arrow{ color:var(--brand-primary); font-size:1.2rem; align-self:center; transition:transform .3s; }
.feature-list-item:hover .cap-arrow{ transform:translateX(6px); }
.feature-item-icon{ width:38px; height:38px; border-radius:9px; background:rgba(217,107,84,0.1); flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--brand-dark); }

.metrics-block{ background:var(--deep-blue-gray); color:#fff; padding:80px 0; position:relative; }
.metrics-block::before{ content:""; position:absolute; top:0; left:0; width:100%; height:4px; background:linear-gradient(90deg, var(--brand-primary), var(--brand-light)); }
.metrics-head h2{ color:#fff; margin-bottom:10px; }
.metrics-head p{ color:rgba(255,255,255,0.72); max-width:720px; }
.metrics-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); margin-top:54px; }
.metric-cell{ padding:8px 24px; border-right:1px solid rgba(255,255,255,0.12); }
.metric-cell:first-child{ padding-left:0; }
.metric-cell:last-child{ border-right:none; padding-right:0; }
.metric-number{ font-size:clamp(2rem, 3.6vw, 3rem); font-weight:700; letter-spacing:-0.02em; color:#fff; line-height:1.25; }
.metric-number small{ font-size:1rem; font-weight:500; color:var(--brand-light); margin-left:4px; }
.metric-label{ font-size:0.9rem; color:rgba(255,255,255,0.75); margin-top:10px; }
.metric-extra{ font-size:0.78rem; color:rgba(255,255,255,0.5); margin-top:6px; }

.scene-intro{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:22px; margin-bottom:50px; }
.scene-intro.no-effect{ grid-template-columns:1fr 2.2fr; }
.scene-grid{ display:grid; grid-template-columns:max-content; gap:40px; }
.scene-row{ display:grid; grid-template-columns:minmax(0, 5.5fr) minmax(0, 6.5fr); gap:44px; align-items:center; padding-bottom:28px; }
.scene-row.flip .scene-media{ order:2; }
.scene-media{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-1); transition:transform .3s, box-shadow .3s; }
.scene-media:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); }
.scene-media img{ aspect-ratio:16/10; object-fit:cover; width:100%; height:auto; }
.scene-tag{ font-size:0.82rem; display:inline-block; background:var(--warning); color:#A47448; padding:4px 13px; border-radius:999px; margin-bottom:16px; }
.scene-title{ font-size:1.45rem; line-height:1.5; margin-bottom:12px; font-weight:700; }
.scene-desc{ color:var(--ink-2); font-size:0.95rem; max-width:520px; }
.scene-narrow-strip{ margin-top:12px; background:var(--warning); border-radius:18px; padding:28px 32px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; }
.scene-strip-title{ font-weight:700; font-size:1.08rem; }
.scene-strip-title span{ color:var(--brand-dark); }
.scene-strip-desc{ color:var(--ink-2); font-size:0.9rem; max-width:620px; }
.scene-strip-link{ color:var(--brand-dark); font-weight:600; }

.solution-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:26px; }
.solution-card{ background:var(--surface); border-radius:var(--radius-lg); padding:36px 34px; box-shadow:var(--shadow-1); border:1px solid rgba(255,255,255,0.6); transition:transform .25s ease, box-shadow .3s; display:flex; flex-direction:column; }
.solution-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); }
.solution-card.tinted{ background:linear-gradient(145deg, #FFFFFF, #FFF6F3); }
.solution-card.bluegray{ background:linear-gradient(145deg, #FFFFFF, #EDF2F6); }
.solution-card .sol-icon{ width:48px; height:48px; border-radius:12px; background:rgba(217,107,84,0.12); display:flex; align-items:center; justify-content:center; font-size:1.35rem; color:var(--brand-dark); margin-bottom:20px; }
.solution-card.bluegray .sol-icon{ background:rgba(23,40,59,0.1); color:var(--deep-blue-gray); }
.solution-card h3{ font-size:1.3rem; margin-bottom:8px; }
.solution-card .sol-desc{ color:var(--ink-2); font-size:0.94rem; margin-bottom:18px; }
.solution-list{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 14px; margin-bottom:22px; }
.solution-list li{ display:flex; gap:9px; color:var(--ink-2); font-size:0.88rem; }
.solution-list li svg{ width:17px; height:17px; flex:0 0 auto; margin-top:4px; }
.solution-link{ margin-top:auto; }

.faq-section{ background:var(--surface); }
.faq-layout{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:60px; }
.faq-contact{ position:sticky; top:120px; align-self:start; }
.faq-contact .btn{ width:100%; margin-top:22px; }
.contact-meta{ background:var(--canvas); border-radius:14px; padding:18px; margin-top:18px; }
.contact-meta li{ font-size:0.9rem; color:var(--ink-2); padding:4px 0; display:flex; gap:8px; align-items:center; }
.contact-meta li .c-dot{ width:6px; height:6px; border-radius:50%; background:var(--brand-primary); flex:0 0 auto; }
.accordion-list{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); background:#fff; }
.faq-item summary{ list-style:none; display:flex; align-items:center; gap:12px; padding:22px 6px 22px 0; cursor:pointer; font-weight:600; font-size:1rem; color:var(--ink); transition:color .2s; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--brand-dark); }
.faq-item summary::before{ content:""; width:8px; height:8px; border-radius:2px; background:var(--brand-light); flex:0 0 auto; }
.faq-item .faq-icon{ margin-left:auto; width:24px; height:24px; position:relative; }

.faq-item .faq-icon::before, .faq-item .faq-icon::after{ content:""; position:absolute; background:var(--ink-2); border-radius:2px; transition:all .3s ease; }
.faq-item .faq-icon::before{ width:10px; height:2px; left:7px; top:11px; }
.faq-item .faq-icon::after{ width:2px; height:10px; left:11px; top:7px; }
.faq-item[open] .faq-icon::before{ transform:rotate(180deg); }
.faq-item[open] .faq-icon::after{ transform:rotate(90deg); opacity:0; }
.faq-item .faq-answer{ padding:0 24px 22px 26px; color:var(--ink-2); font-size:0.94rem; }
.faq-item .faq-answer p + p{ margin-top:10px; }

.cta-download{ background:linear-gradient(135deg, #17283B, #17283B 55%, #3A3040); position:relative; overflow:hidden; }
.cta-download .container{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:64px; align-items:center; }
.cta-download::after{ content:""; position:absolute; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, rgba(217,107,84,0.35), transparent 72%); right:-80px; bottom:-80px; }
.cta-left{ color:#fff; position:relative; z-index:2; }
.cta-left h2{ color:#fff; }
.cta-left p{ color:rgba(255,255,255,0.75); margin:18px 0 0; max-width:530px; }
.cta-buttons{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.cta-contact{ position:relative; z-index:2; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.15); padding:34px 32px; border-radius:20px; color:#ddd; }
.cta-contact h3{ color:#fff; font-size:1.24rem; margin-bottom:14px; }
.form-group{ margin-bottom:16px; }
.form-group label{ display:block; font-size:0.86rem; color:rgba(255,255,255,0.8); margin-bottom:6px; }
.form-group input, .form-group textarea{ width:100%; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); border-radius:9px; color:#fff; font-size:0.92rem; padding:11px 14px; outline:none; transition:border .2s, box-shadow .2s; }
.form-group input::placeholder, .form-group textarea::placeholder{ color:rgba(255,255,255,0.42); }
.form-group input:focus, .form-group textarea:focus{ border-color:var(--brand-light); box-shadow:0 0 0 3px rgba(243,167,155,0.18); }
.form-group textarea{ min-height:88px; resize:vertical; }
.form-tip{ font-size:0.8rem; color:rgba(255,255,255,0.55); margin-top:12px; }
.form-btn{ background:var(--brand-primary); width:100%; color:#fff; border-radius:10px; }
.form-btn:hover{ background:var(--brand-dark); }

.footer-top{ background:#fff; padding:58px 0 42px; border-top:1px solid var(--line); }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px; }
.footer-brand .brand-name{ font-size:1.45rem; margin-bottom:12px; display:block; }
.footer-brand p{ font-size:0.92rem; color:var(--ink-2); max-width:300px; }
.footer-col h4{ font-size:0.94rem; color:var(--ink); margin-bottom:14px; font-weight:700; }
.footer-col ul li{ margin-bottom:8px; }
.footer-col ul a{ font-size:0.9rem; color:var(--ink-2); display:inline-flex; align-items:center; gap:7px; transition:color .2s; min-height:28px; }
.footer-col ul a::before{ content:""; width:4px; height:4px; border-radius:50%; background:#CFB9B1; transition:background .2s; }
.footer-col ul a:hover{ color:var(--brand-dark); }
.footer-col ul a:hover::before{ background:var(--brand-primary); }
.footer-bottom{ background:var(--deep-blue-gray); color:rgba(255,255,255,0.62); font-size:0.8rem; padding:20px 0; }
.footer-bottom .container{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer-bottom a{ color:rgba(255,255,255,0.72); }
.footer-bottom a:hover{ color:#fff; }

.reveal{ animation:revealUp .4s ease both; }
@keyframes revealUp{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

@media (max-width:1023px){
  .main-nav{ display:none; }
  .mobile-menu-btn{ display:inline-flex; flex-direction:column; }
  .topbar-actions .bar-split, .section-desc{ max-width:100%; }
  .hero-wrap{ grid-template-columns:1fr; gap:44px; }
  .hero{ padding:68px 0; }
  .features-layout, .faq-layout{ grid-template-columns:1fr; gap:40px; }
  .features-left, .faq-contact{ position:static; }
  .features-left .btn{ margin-top:4px; }
  .metrics-grid{ grid-template-columns:repeat(2, 1fr); row-gap:34px; }
  .metric-cell:nth-child(2){ border-right:none; }
  .metric-cell:nth-child(n+3){ padding-left:0; border-top:1px solid rgba(255,255,255,0.12); padding-top:26px; border-right:1px solid rgba(255,255,255,0.12); margin-right:26px; }
  .scene-row, .scene-row.flip{ grid-template-columns:1fr; gap:24px; }
  .scene-row.flip .scene-media{ order:0; }
  .scene-narrow-strip{ padding:24px; }
  .cta-download .container{ grid-template-columns:1fr; gap:44px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:767px){
  .container{ padding:0 16px; }
  .topbar-inner{ justify-content:center; }
  .topbar-actions{ display:none; }
  .section{ padding:58px 0; }
  .header-actions .btn-ghost-nav{ display:none; }
  .solution-grid{ grid-template-columns:1fr; }
  .solution-list{ grid-template-columns:1fr 1fr; }
  .metrics-grid{ grid-template-columns:1fr; gap:8px; }
  .metric-cell{ border-right:none; border-bottom:1px solid rgba(255,255,255,0.12); padding:22px 0; }
  .metric-cell:nth-child(2){ border-right:none; }
  .metric-cell:nth-child(n+3){ border-right:none; margin:0; padding-top:22px; border-top:1px solid rgba(255,255,255,0.12); }
  .metric-cell:last-child{ border-bottom:none; border-right:none; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .scene-strip-link{ margin-top:6px; }
  .hero-cta .btn{ width:100%; }
  .form-btn{ width:100%; }
  .scene-intro{ grid-template-columns:1fr; }
}

:root{
  --brand-primary:#D96B54;
  --brand-light:#F3A79B;
  --brand-dark:#A84633;
  --ink:#1C1F23;
  --ink-2:#4A5157;
  --canvas:#F6F3F0;
  --surface:#FFFFFF;
  --line:#E5DED8;
  --deep-blue-gray:#17283B;
  --deep-blue-2:#101F2E;
  --success:#3F7D63;
  --warning:#F5E6D3;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --shadow-1:0 8px 24px rgba(23,40,59,0.06);
  --shadow-2:0 16px 32px rgba(23,40,59,0.12);
  --transition:0.25s ease;
  --font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC","Helvetica Neue",sans-serif;
}
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--font-family); background:var(--canvas); color:var(--ink); font-size:1rem; line-height:1.75; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul, ol{ list-style:none; }
input, button, textarea{ font:inherit; }
button{ cursor:pointer; }
.container{ max-width:1200px; margin:0 auto; padding:0 24px; }
a:focus-visible{ outline:2px solid var(--brand-primary); outline-offset:2px; }

.topbar{ background:var(--deep-blue-gray); color:rgba(255,255,255,0.82); min-height:36px; font-size:0.8rem; display:flex; align-items:center; }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:16px; }
.topbar-note{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-note .pulse-dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--brand-light); margin-right:8px; vertical-align:middle; }
.topbar-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.topbar-actions a{ color:rgba(255,255,255,0.82); transition:color .2s; }
.topbar-actions a:hover{ color:#fff; }
.topbar-actions .bar-split{ width:1px; height:12px; background:rgba(255,255,255,0.3); display:inline-block; margin-right:12px; }

.site-header{ position:sticky; top:0; z-index:100; background:var(--surface); border-bottom:1px solid var(--line); }
.header-inner{ min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:nowrap; }
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-mark{ width:36px; height:36px; border-radius:11px; background:linear-gradient(135deg, var(--brand-primary), var(--brand-light)); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 14px rgba(217,107,84,0.28); }
.brand-mark svg{ width:21px; height:21px; }
.brand-name{ font-size:1.35rem; font-weight:700; letter-spacing:0.02em; color:var(--ink); }
.main-nav{ display:flex; align-items:center; gap:34px; justify-content:center; flex:1; }
.main-nav a{ position:relative; display:inline-flex; align-items:center; min-height:69px; padding:0 2px; font-size:0.98rem; color:var(--ink-2); border-bottom:3px solid transparent; transition:color .22s; }
.main-nav a:hover{ color:var(--brand-dark); }
.main-nav a{ color:var(--ink-2); }
.main-nav a.active{ color:var(--brand-dark); border-bottom-color:var(--brand-primary); font-weight:600; }
.header-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }

.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 22px; border-radius:var(--radius-sm); font-size:0.95rem; font-weight:600; border:1px solid transparent; transition:transform .2s, box-shadow .25s, background .25s, border-color .25s; line-height:1; white-space:nowrap; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:scale(0.98); }
.btn:focus-visible{ outline:2px solid var(--brand-primary); outline-offset:2px; }
.btn-primary{ background:var(--deep-blue-gray); color:#fff; box-shadow:0 8px 18px rgba(23,40,59,0.18); }
.btn-primary:hover{ background:var(--deep-blue-2); color:#fff; box-shadow:var(--shadow-2); }
.btn-brand{ background:var(--brand-primary); color:#fff; box-shadow:0 8px 18px rgba(217,107,84,0.22); }
.btn-brand:hover{ background:var(--brand-dark); color:#fff; }
.btn-outline{ background:var(--surface); color:var(--ink); border-color:var(--line); }
.btn-outline:hover{ border-color:var(--brand-primary); color:var(--brand-dark); background:#FFFDFB; }
.btn-ghost-nav{ background:transparent; color:var(--ink-2); min-height:38px; padding:0 12px; }
.btn-ghost-nav:hover{ color:var(--brand-dark); background:rgba(217,107,84,0.06); }
.btn-sm{ min-height:38px; padding:0 16px; font-size:0.875rem; border-radius:8px; }
.btn-lg{ min-height:52px; padding:0 30px; font-size:1rem; border-radius:var(--radius-md); }
.mobile-menu-btn{ display:none; width:42px; height:42px; background:#fff; border:1px solid var(--line); border-radius:10px; align-items:center; justify-content:center; color:var(--ink); }
.mobile-menu-btn span{ display:block; width:18px; height:2px; background:var(--ink); margin:2px 0; border-radius:2px; }

.category-header{ background:var(--surface); border-bottom:1px solid var(--line); padding:28px 0 24px; }
.breadcrumb{ display:flex; align-items:center; gap:10px; font-size:0.85rem; color:var(--ink-2); margin-bottom:22px; flex-wrap:wrap; }
.breadcrumb a{ color:var(--ink-2); transition:color .2s; }
.breadcrumb a:hover{ color:var(--brand-dark); }
.breadcrumb .sep{ color:#B9B0AA; }
.category-title-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.eyebrow-tag{ display:inline-flex; background:rgba(217,107,84,0.1); color:var(--brand-dark); border:1px solid rgba(217,107,84,0.18); font-size:0.8rem; padding:5px 13px; border-radius:999px; margin-bottom:12px; font-weight:600; }
h1{ font-size:clamp(2rem, 3.6vw, 2.9rem); line-height:1.25; font-weight:700; letter-spacing:-0.01em; }
.category-shortline{ color:var(--ink-2); margin-top:12px; font-size:0.97rem; max-width:760px; }
.category-filter{ display:flex; flex-wrap:wrap; gap:10px; }
.filter-pill{ display:inline-flex; align-items:center; min-height:34px; border:1px solid var(--line); color:var(--ink-2); background:#fff; border-radius:999px; padding:0 16px; font-size:0.83rem; transition:all .2s; }
.filter-pill:hover{ border-color:var(--brand-primary); color:var(--brand-dark); background:#FFF9F7; }
.filter-pill.active{ border-color:var(--brand-primary); background:rgba(217,107,84,0.1); color:var(--brand-dark); font-weight:600; }

.category-banner{ background:url('/assets/images/backpic/back-5.jpg') center/cover no-repeat; background-color:var(--deep-blue-gray); position:relative; }
.category-banner::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(23,40,59,0.92), rgba(23,40,59,0.4)); }
.category-banner .container{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:50px; padding-bottom:50px; flex-wrap:wrap; }
.banner-text{ color:#fff; }
.banner-text h2{ font-size:1.7rem; color:#fff; }
.banner-text p{ color:rgba(255,255,255,0.72); margin-top:8px; }
.banner-btn{ flex:0 0 auto; }

.body-section{ padding:54px 0 80px; }
.category-layout{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr); gap:40px; align-items:start; }

.sidebar{ background:#fff; border-radius:var(--radius-md); padding:26px 20px; box-shadow:var(--shadow-1); border:1px solid rgba(255,255,255,0.5); position:sticky; top:120px; }
.side-title{ font-size:0.97rem; font-weight:700; padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }
.side-vertical li{ border-bottom:1px solid #F3EEE9; }
.side-vertical li:last-child{ border-bottom:none; }
.side-vertical a{ display:flex; align-items:center; gap:8px; padding:11px 2px; font-size:0.9rem; color:var(--ink-2); transition:color .2s; min-height:38px; }
.side-vertical a::before{ content:""; width:5px; height:5px; border-radius:1px; background:#D8CABF; flex:0 0 auto; transition:background .24s; }
.side-vertical a:hover{ color:var(--brand-dark); }
.side-vertical a:hover::before{ background:var(--brand-primary); }
.side-pinned{ margin-top:25px; background:var(--canvas); border-radius:12px; padding:18px 16px; }
.side-pinned .side-pin-name{ font-size:0.85rem; font-weight:700; margin-bottom:8px; color:var(--deep-blue-gray); }
.side-pinned ul li a{ display:block; padding:8px 0; font-size:0.86rem; color:var(--ink-2); border-bottom:1px dashed #E8E1DB; }
.side-pinned ul li a:hover{ color:var(--brand-dark); }
.side-pin-image{ margin-top:14px; border-radius:10px; overflow:hidden; }
.side-pin-image img{ aspect-ratio:16/10; object-fit:cover; }

.list-toolbar{ display:flex; justify-content:space-between; align-items:center; background:#fff; padding:12px 18px; border-radius:10px; border:1px solid var(--line); margin-bottom:18px; color:var(--ink-2); font-size:0.88rem; flex-wrap:wrap; gap:8px; }
.list-toolbar strong{ color:var(--brand-dark); }
.list-toolbar .toolbar-sort{ display:inline-flex; align-items:center; gap:8px; }
.list-toolbar .sort-text{ color:var(--ink-2); }

.feature-main-list{ display:flex; flex-direction:column; gap:0; }
.f-list-item{ display:block; padding:26px 0; border-bottom:1px solid var(--line); position:relative; scroll-margin-top:150px; }
.f-item-top{ display:flex; gap:16px; align-items:flex-start; position:relative; }
.f-item-num{ font-size:1.6rem; color:#EDE3DE; font-weight:700; line-height:1.2; min-width:54px; }
.f-item-content{ flex:1; }
.f-item-dot{ display:inline-flex; color:var(--brand-dark); position:relative; padding-left:15px; font-size:0.77rem; font-weight:600; letter-spacing:0.03em; margin-bottom:4px; }
.f-item-dot::before{ content:""; position:absolute; left:0; top:7px; width:8px; height:8px; border-radius:99px; background:var(--brand-light); }
.f-item-title{ font-size:1.2rem; color:var(--ink); margin-bottom:6px; font-weight:700; }
.f-item-abstract{ font-size:0.92rem; color:var(--ink-2); line-height:1.85; max-width:92%; margin-bottom:10px; }
.item-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.item-tag{ background:#F3EFEC; border-radius:6px; padding:3px 9px; font-size:0.75rem; color:var(--ink-2); }
.read-more{ margin-top:10px; }
.read-more summary{ display:inline-flex; cursor:pointer; font-size:0.87rem; font-weight:600; color:var(--brand-dark); min-height:38px; align-items:center; gap:5px; }
.read-more summary::-webkit-details-marker{ display:none; }
.read-more[open] summary{ color:var(--brand-dark); }
.read-more .expanded-body{ background:var(--canvas); border-radius:12px; padding:20px 20px 10px; margin:4px 0 10px; color:var(--ink-2); font-size:0.92rem; line-height:1.9; }
.expanded-body p{ margin-bottom:10px; }

.promo-inline{ margin:42px 0; background:linear-gradient(135deg, var(--brand-primary), #E8836B); border-radius:18px; padding:28px 32px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; color:#fff; box-shadow:0 12px 30px rgba(217,107,84,0.26); }
.promo-inline h3{ color:#fff; font-size:1.2rem; }
.promo-inline p{ color:rgba(255,255,255,0.88); font-size:0.9rem; }
.promo-inline .btn{ background:#fff; color:var(--brand-dark); }
.promo-inline .btn:hover{ background:#FFF4F1; }

.more-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 28px; margin:32px 0 20px; }
.more-entry{ border-bottom:1px solid var(--line); padding:0 0 20px; display:flex; flex-direction:column; gap:8px; }
.more-entry .entry-kicker{ font-size:0.77rem; color:var(--brand-dark); font-weight:600; }
.more-entry h3{ font-size:1.06rem; }
.more-entry p{ font-size:0.87rem; color:var(--ink-2); }
.more-entry a{ align-self:flex-start; margin-top:4px; font-size:0.87rem; color:var(--brand-dark); font-weight:600; }

.pagination{ display:flex; align-items:center; gap:12px; margin-top:36px; flex-wrap:wrap; }
.pagination .p-btn{ display:inline-flex; align-items:center; min-height:38px; border:1px solid var(--line); border-radius:8px; padding:0 14px; font-size:0.84rem; color:var(--ink-2); background:#fff; }
.pagination .p-btn:hover{ border-color:var(--brand-primary); color:var(--brand-dark); }
.pagination .p-current{ background:var(--deep-blue-gray); color:#fff; border-color:var(--deep-blue-gray); }
.pagination .p-link{ color:var(--brand-dark); font-weight:600; }

.howto-section{ padding:70px 0; background:linear-gradient(160deg, #F6F3F0 0%, #FFF9F6 56%, #F4E8E2 100%); }
.howto-grid{ display:grid; grid-template-columns:1.4fr .9fr; gap:30px; align-items:center; }
.howto-steps{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; margin-top:26px; }
.howto-step{ background:#fff; border-radius:16px; padding:24px 18px; box-shadow:var(--shadow-1); border:1px solid #F3EEE9; }
.howto-step .step-num{ display:inline-block; font-size:1.4rem; font-weight:800; color:#F2CDBE; }
.howto-step h3{ font-size:1rem; margin:12px 0 6px; }
.howto-step p{ font-size:0.84rem; color:var(--ink-2); }
.faq-mini{ background:#FFF; border-radius:16px; padding:23px 22px; border:1px solid var(--line); box-shadow:var(--shadow-1); }
.faq-mini h3{ font-size:1rem; margin-bottom:12px; display:flex; align-items:center; gap:7px; }
.faq-mini h3::before{ content:""; width:8px; height:8px; border-radius:2px; background:var(--brand-primary); }
.faq-mini details{ border-bottom:1px solid #F0E8E1; padding:8px 0; }
.faq-mini details summary{ cursor:pointer; font-size:0.88rem; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:8px; }
.faq-mini details summary::-webkit-details-marker{ display:none; }
.faq-mini details p{ font-size:0.82rem; color:var(--ink-2); padding:8px 0 4px; }

.download-cta{ background:var(--deep-blue-gray); padding:66px 0; }
.download-cta .container{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; color:#fff; }
.download-cta h2{ color:#fff; font-size:clamp(1.6rem,2.6vw,2.2rem); }
.download-cta p{ color:rgba(255,255,255,0.72); margin-top:12px; }
.dl-info{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:16px; padding:22px; font-size:0.9rem; }
.dl-info ul{ margin-top:10px; }
.dl-info li{ display:flex; color:rgba(255,255,255,0.8); padding:3px 0; }
.dl-info li::before{ content:"·"; margin-right:8px; color:var(--brand-light); font-weight:700; }
.cta-line{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }

.footer-top{ background:#fff; padding:58px 0 42px; border-top:1px solid var(--line); }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px; }
.footer-brand .brand-name{ font-size:1.45rem; margin-bottom:12px; display:block; }
.footer-brand p{ font-size:0.92rem; color:var(--ink-2); max-width:300px; }
.footer-col h4{ font-size:0.94rem; color:var(--ink); margin-bottom:14px; font-weight:700; }
.footer-col ul li{ margin-bottom:8px; }
.footer-col ul a{ font-size:0.9rem; color:var(--ink-2); display:inline-flex; align-items:center; gap:7px; transition:color .2s; min-height:28px; }
.footer-col ul a::before{ content:""; width:4px; height:4px; border-radius:50%; background:#CFB9B1; transition:background .2s; }
.footer-col ul a:hover{ color:var(--brand-dark); }
.footer-col ul a:hover::before{ background:var(--brand-primary); }
.footer-bottom{ background:var(--deep-blue-gray); color:rgba(255,255,255,0.62); font-size:0.8rem; padding:20px 0; }
.footer-bottom .container{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer-bottom a{ color:rgba(255,255,255,0.72); }
.footer-bottom a:hover{ color:#fff; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}
@media (max-width:1023px){
  .main-nav{ display:none; }
  .mobile-menu-btn{ display:inline-flex; flex-direction:column; }
  .category-layout{ grid-template-columns:1fr; }
  .sidebar{ position:static; }
  .category-title-row{ align-items:flex-start; flex-direction:column; }
  .download-cta .container{ grid-template-columns:1fr; }
  .howto-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:767px){
  body{ font-size:0.966rem; }
  .container{ padding:0 16px; }
  .topbar-inner{ justify-content:center; }
  .topbar-actions{ display:none; }
  .header-actions .btn-ghost-nav{ display:none; }
  .more-grid{ grid-template-columns:1fr; }
  .howto-steps{ grid-template-columns:1fr; }
  .group-banner{ flex-direction:column; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .list-toolbar{ align-items:flex-start; }
  .f-item-num{ min-width:38px; font-size:1.25rem; }
  .f-item-abstract{ max-width:100%; }
  .promo-inline{ padding:22px 18px; flex-direction:column; align-items:flex-start; }
}

/* roulang page: category1 */
:root{
    --brand-primary:#D96B54;
    --brand-light:#F3A79B;
    --brand-dark:#A84633;
    --ink:#1C1F23;
    --ink-2:#4A5157;
    --canvas:#F6F3F0;
    --surface:#FFFFFF;
    --line:#E5DED8;
    --deep-blue-gray:#17283B;
    --deep-blue-2:#101F2E;
    --success:#3F7D63;
    --warning:#F5E6D3;
    --radius-lg:20px;
    --radius-md:14px;
    --radius-sm:10px;
    --shadow-1:0 8px 24px rgba(23,40,59,0.06);
    --shadow-2:0 16px 32px rgba(23,40,59,0.12);
    --transition:0.25s ease;
    --font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC","Helvetica Neue",sans-serif;
}

html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font-family);background:var(--canvas);color:var(--ink);font-size:1rem;line-height:1.75;-webkit-font-smoothing:antialiased;}
*{box-sizing:border-box;}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul,ol,p,h1,h2,h3,h4,figure{margin:0;padding:0;}
input,button,textarea{font:inherit;}
button{cursor:pointer;}
.container{max-width:1200px;margin:0 auto;padding:0 24px;}

.topbar{background:var(--deep-blue-gray);color:rgba(255,255,255,0.82);min-height:36px;font-size:0.8rem;display:flex;align-items:center;}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px;min-height:36px;}
.topbar-note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar-note .pulse-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--brand-light);margin-right:8px;vertical-align:middle;}
.topbar-actions{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.topbar-actions a{color:rgba(255,255,255,0.82);transition:color .2s;}
.topbar-actions a:hover{color:#fff;}
.topbar-actions .bar-split{width:1px;height:12px;background:rgba(255,255,255,0.3);display:inline-block;margin-right:12px;}

.site-header{position:sticky;top:0;z-index:100;background:var(--surface);border-bottom:1px solid var(--line);}
.header-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:nowrap;}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;color:var(--ink);}
.brand-mark{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,var(--brand-primary),var(--brand-light));display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(217,107,84,0.28);}
.brand-mark svg{width:21px;height:21px;}
.brand-name{font-size:1.34rem;font-weight:700;letter-spacing:0.02em;color:var(--ink);white-space:nowrap;}
.main-nav{display:flex;align-items:center;justify-content:center;gap:34px;flex:1;}
.main-nav a{position:relative;display:inline-flex;align-items:center;min-height:69px;padding:0 2px;font-size:0.98rem;color:var(--ink-2);border-bottom:3px solid transparent;transition:color .22s;}
.main-nav a:hover{color:var(--brand-dark);}
.main-nav a.active{color:var(--brand-dark);border-bottom-color:var(--brand-primary);font-weight:600;}
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:var(--radius-sm);font-size:0.95rem;font-weight:600;border:1px solid transparent;transition:transform .2s,box-shadow .25s,background .25s,border-color .25s;line-height:1;white-space:nowrap;}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:scale(0.98);}
.btn:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px;}
.btn-primary{background:var(--deep-blue-gray);color:#fff;box-shadow:0 8px 18px rgba(23,40,59,0.18);}
.btn-primary:hover{background:var(--deep-blue-2);color:#fff;box-shadow:var(--shadow-2);}
.btn-brand{background:var(--brand-primary);color:#fff;box-shadow:0 8px 18px rgba(217,107,84,0.22);}
.btn-brand:hover{background:var(--brand-dark);color:#fff;}
.btn-outline{background:var(--surface);color:var(--ink);border-color:var(--line);}
.btn-outline:hover{border-color:var(--brand-primary);color:var(--brand-dark);background:#FFFDFB;}
.btn-ghost-nav{background:transparent;color:var(--ink-2);min-height:38px;padding:0 12px;}
.btn-ghost-nav:hover{color:var(--brand-dark);background:rgba(217,107,84,0.06);}
.btn-lg{min-height:52px;padding:0 30px;font-size:1rem;border-radius:var(--radius-md);gap:8px;}
.btn-sm{min-height:38px;padding:0 16px;font-size:0.875rem;border-radius:8px;}
.mobile-menu-btn{display:none;width:42px;height:42px;background:#fff;border:1px solid var(--line);border-radius:10px;align-items:center;justify-content:center;color:var(--ink);padding:0;}
.mobile-menu-btn span{display:block;width:18px;height:2px;background:var(--ink);margin:2px auto;border-radius:2px;transition:var(--transition);}

.page-heading{position:relative;border-bottom:1px solid var(--line);background:linear-gradient(115deg,rgba(246,243,240,0.94),rgba(255,239,233,0.84)),url('/assets/images/backpic/back-1.jpg') center/cover no-repeat;}
.breadcrumb-wrap{padding-top:22px;}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;list-style:none;font-size:0.85rem;color:var(--ink-2);gap:6px;}
.breadcrumb li{display:flex;align-items:center;gap:6px;}
.breadcrumb li:not(:last-child)::after{content:"/";color:var(--line);}
.breadcrumb a{color:var(--ink-2);}
.breadcrumb a:hover{color:var(--brand-dark);}
.breadcrumb [aria-current="page"]{color:var(--ink);font-weight:600;}
.heading-main{padding:18px 0 48px;}
.heading-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:32px;align-items:end;}
h1{font-size:clamp(2rem,3vw,3.1rem);line-height:1.25;letter-spacing:0.01em;font-weight:700;margin:16px 0 10px;}
h1 .text-accent{color:var(--brand-primary);}
.page-lead{font-size:1rem;color:var(--ink-2);max-width:720px;margin-bottom:14px;}
.flex-tags{display:flex;flex-wrap:wrap;gap:8px;}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;background:rgba(217,107,84,0.12);color:var(--brand-dark);border-radius:999px;font-size:0.82rem;font-weight:500;}
.chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand-primary);}
.heading-tools{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow-1);}
.filter-heading{display:flex;align-items:center;gap:8px;font-size:0.85rem;color:var(--ink-2);margin-bottom:12px;}
.filter-heading svg{width:16px;height:16px;color:var(--brand-primary);}
.pill-group{display:flex;flex-wrap:wrap;gap:8px;}
.pill{display:inline-flex;align-items:center;min-height:34px;padding:0 13px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:0.82rem;color:var(--ink-2);transition:var(--transition);}
.pill:hover{border-color:var(--brand-primary);color:var(--brand-dark);background:#FFFDFB;}
.pill.is-active{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff;font-weight:600;}
.heading-tools-note{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);font-size:0.78rem;color:var(--ink-2);}

.category-content{background:var(--surface);padding:42px 0 34px;border-bottom:1px solid var(--line);}
.content-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:42px;align-items:start;}
.sidebar{position:sticky;top:108px;}
.side-card{background:#FBF9F7;border:1px solid var(--line);border-radius:var(--radius-md);padding:18px 16px;margin-bottom:24px;}
.side-card h2, .side-card .side-title{font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.side-card .side-title span{color:var(--brand-primary);font-size:1.2rem;}
.side-nav{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.side-nav li{border-bottom:1px dashed var(--line);}
.side-nav a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 2px;font-size:0.88rem;color:var(--ink-2);transition:var(--transition);}
.side-nav a::after{content:"›";color:var(--line);font-size:1.15rem;transition:var(--transition);}
.side-nav a:hover{color:var(--brand-dark);padding-left:6px;}
.side-nav a:hover::after{color:var(--brand-dark);transform:translateX(3px);}
.side-hot-list{list-style:none;border-top:1px solid var(--line);}
.side-hot-list li{border-bottom:1px dashed var(--line);}
.side-hot-list a{display:block;padding:9px 2px;font-size:0.86rem;color:var(--ink-2);transition:var(--transition);position:relative;}
.side-hot-list a::before{content:"";display:inline-block;width:4px;height:4px;margin-right:8px;vertical-align:middle;border-radius:50%;background:var(--brand-light);transition:var(--transition);}
.side-hot-list a:hover{color:var(--brand-dark);padding-left:6px;}
.side-hot-list a:hover::before{background:var(--brand-primary);}

.results-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#FBF4F0;border:1px solid var(--line);border-bottom-color:transparent;padding:13px 16px;border-radius:var(--radius-md) var(--radius-md) 0 0;font-size:0.88rem;color:var(--ink-2);}
.sort-info{display:flex;align-items:center;gap:8px;}
.sort-info .status-dot{width:6px;height:6px;border-radius:50%;background:var(--success);display:inline-block;}
.feature-list{background:var(--surface);border:1px solid var(--line);border-radius:0 0 var(--radius-md) var(--radius-md);margin-bottom:34px;border-top:none;}
.feature-row{display:flex;gap:22px;padding:32px 28px;border-bottom:1px solid var(--line);}
.feature-row:last-child{border-bottom:0;}
.feature-index{flex:0 0 90px;display:flex;flex-direction:column;align-items:flex-start;}
.feature-no{font-size:2rem;font-weight:700;line-height:1;color:#fff;-webkit-text-stroke:1px var(--brand-primary);background:transparent;}
.feature-no{color:transparent;}
.feature-index-line{width:30px;height:2px;background:var(--brand-primary);margin-top:10px;border-radius:2px;opacity:.35;}
.feature-content{flex:1;min-width:0;}
.feature-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.meta-label{display:inline-flex;align-items:center;gap:6px;font-size:0.8rem;color:var(--brand-dark);font-weight:600;}
.meta-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand-primary);}
.feature-content h3{font-size:1.4rem;line-height:1.4;font-weight:700;margin-bottom:10px;}
.feature-sum{color:var(--ink-2);font-size:0.94rem;line-height:1.85;margin-bottom:14px;max-width:780px;}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:2px;}
.tag{display:inline-flex;align-items:center;padding:4px 12px;border:1px solid var(--line);border-radius:999px;font-size:0.76rem;background:#FCFAF8;color:var(--ink-2);}
.details-toggle{width:100%;margin-top:14px;border-top:1px dashed var(--line);padding-top:14px;}
.details-toggle summary{list-style:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:0.88rem;font-weight:600;color:var(--brand-dark);padding:4px 0;transition:var(--transition);}
.details-toggle summary::-webkit-details-marker{display:none;}
.summary-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid var(--brand-light);border-radius:50%;color:var(--brand-primary);transition:var(--transition);font-size:1.05rem;line-height:1;}
.details-toggle[open] .summary-icon{transform:rotate(45deg);background:var(--brand-primary);border-color:var(--brand-primary);color:#fff;}
.expand-inner{background:#FAF4EF;border-left:2px solid var(--brand-primary);border-radius:var(--radius-sm);padding:18px 20px;margin-top:12px;color:var(--ink-2);font-size:0.9rem;line-height:1.9;animation:fadeIn .35s ease;}
.expand-inner strong{color:var(--ink);font-weight:600;}

.promo-banner{align-items:center;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:30px;background:linear-gradient(112deg,#1A2B3F 0%,#162435 100%);color:rgba(255,255,255,0.9);border-radius:var(--radius-lg);overflow:hidden;margin:38px 0 34px;box-shadow:var(--shadow-2);}
.promo-copy{padding:32px 30px;}
.promo-kicker{color:var(--brand-light);font-size:0.82rem;font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:8px;}
.promo-kicker::before{content:"";width:7px;height:7px;background:var(--brand-light);border-radius:50%;}
.promo-copy h2{font-size:1.45rem;color:#fff;margin:8px 0 12px;line-height:1.4;}
.promo-copy p{font-size:0.92rem;line-height:1.8;color:rgba(255,255,255,0.75);margin-bottom:18px;max-width:560px;}
.promo-actions{display:flex;gap:10px;flex-wrap:wrap;}
.promo-media{height:100%;min-height:180px;background:url('/assets/images/coverpic/cover-3.webp') center/cover no-repeat;position:relative;border-left:1px solid rgba(255,255,255,0.08);}
.promo-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,43,63,0.25),rgba(16,31,46,0));}

.related-section{padding:42px 0 60px;}
.related-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap;}
.related-head .eyebrow{font-size:0.82rem;color:var(--brand-dark);font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.eyebrow::before{content:"";width:16px;height:2px;background:var(--brand-primary);}
.related-head h2{font-size:1.8rem;line-height:1.35;font-weight:700;}
.related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.related-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:20px 22px;display:flex;gap:18px;align-items:flex-start;transition:var(--transition);}
.related-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:#EBCBC1;}
.related-icon{width:38px;height:38px;flex:0 0 38px;border-radius:12px;background:rgba(217,107,84,0.1);display:flex;align-items:center;justify-content:center;color:var(--brand-dark);}
.related-icon svg{width:19px;height:19px;}
.related-card h3{font-size:0.98rem;margin-bottom:4px;}
.related-card p{font-size:0.84rem;color:var(--ink-2);line-height:1.75;}
.pagination-nav{display:flex;justify-content:center;gap:10px;margin-top:42px;align-items:center;}
.page-btn{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 16px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--radius-sm);font-size:0.9rem;transition:var(--transition);}
.page-btn:hover{border-color:var(--brand-primary);color:var(--brand-dark);}
.page-btn.is-current{background:var(--deep-blue-gray);border-color:var(--deep-blue-gray);color:#fff;font-weight:700;}
.page-btn.is-disabled{opacity:.45;pointer-events:none;}

.category-faq{padding:64px 0 70px;background:#FBF8F5;border-top:1px solid var(--line);}
.faq-layout{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:44px;align-items:start;}
.faq-left h2{font-size:1.75rem;line-height:1.4;margin-bottom:14px;}
.faq-left > p{color:var(--ink-2);font-size:0.95rem;margin-bottom:18px;line-height:1.9;}
.contact-mini{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:18px;font-size:0.9rem;color:var(--ink-2);}
.contact-mini strong{color:var(--ink);}
.faq-accordion{border-radius:var(--radius-md);overflow:hidden;}
.qa-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);margin-bottom:10px;transition:var(--transition);}
.qa-item[open]{border-color:#E3B3A6;box-shadow:var(--shadow-1);}
.qa-item summary{list-style:none;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;font-weight:600;font-size:0.94rem;color:var(--ink);}
.qa-item summary::-webkit-details-marker{display:none;}
.qa-icon{width:24px;height:24px;border:1px solid var(--line);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--brand-dark);transition:var(--transition);flex:0 0 24px;font-weight:400;}
.qa-item[open] .qa-icon{transform:rotate(45deg);background:var(--brand-primary);border-color:var(--brand-primary);color:#fff;}
.qa-answer{padding:0 22px 20px;font-size:0.91rem;color:var(--ink-2);line-height:1.9;}

.section-cta{padding:64px 0;background:radial-gradient(circle at 85% 0%,rgba(217,107,84,0.22),rgba(16,31,46,0) 55%),var(--deep-blue-gray);color:#fff;border-bottom:1px solid rgba(255,255,255,0.06);}
.cta-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:50px;align-items:center;}
.cta-title{font-size:clamp(1.7rem,2.8vw,2.4rem);line-height:1.45;color:#fff;font-weight:700;margin-bottom:14px;}
.cta-title .text-bright{color:var(--brand-light);}
.cta-desc{color:rgba(255,255,255,0.75);max-width:680px;line-height:1.9;font-size:0.98rem;margin-bottom:18px;}
.cta-btns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:15px;}
.cta-tip{font-size:0.8rem;color:rgba(255,255,255,0.5);}
.cta-tip a{color:rgba(255,255,255,0.7);text-decoration:underline;}
.cta-tip a:hover{color:#fff;}
.cta-media{background:var(--deep-blue-2);border-radius:var(--radius-lg);overflow:hidden;border:1px solid rgba(255,255,255,0.14);box-shadow:var(--shadow-2);}
.cta-media img{width:100%;aspect-ratio:16/10;object-fit:cover;opacity:.85;}

.footer-top{background:#fff;border-bottom:1px solid var(--line);padding:48px 0 36px;}
.footer-grid{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2fr));gap:28px;}
.footer-brand .brand{color:var(--ink);font-size:1.15rem;}
.footer-brand .brand-name{font-size:1.15rem;}
.footer-brand p{margin-top:12px;font-size:0.86rem;color:var(--ink-2);line-height:1.9;max-width:300px;}
.footer-col h4{font-size:0.86rem;font-weight:700;color:var(--ink);margin:4px 0 14px;}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:8px;}
.footer-col a{font-size:0.84rem;color:var(--ink-2);transition:var(--transition);display:inline-block;}
.footer-col a:hover{color:var(--brand-dark);transform:translateX(3px);}
.footer-bottom{background:var(--deep-blue-gray);color:rgba(255,255,255,0.7);font-size:0.8rem;}
.footer-bottom-inner{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px 24px;}
.footer-bottom a{color:rgba(255,255,255,0.85);}

@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation:none!important;transition:none!important;}
}
@media (min-width:1024px){
    .heading-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
}
@media (max-width:1023px){
    .main-nav{display:none;position:absolute;top:70px;left:0;width:100%;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:6px 24px 12px;align-items:center;}
    .main-nav.menu-open{display:flex;}
    .main-nav a{min-height:52px;justify-content:center;width:100%;border-bottom:1px solid var(--line);border-bottom-width:1px;border-bottom-color:#F1EAE5;}
    .main-nav a.active{border-bottom:2px solid var(--brand-primary);}
    .mobile-menu-btn{display:flex;}
    .category-content{padding:22px 0 30px;}
    .faq-layout,.cta-grid{grid-template-columns:1fr;gap:28px;}
    .content-layout{display:block;}
    .sidebar{position:static;margin-bottom:28px;}
    .heading-main{padding:14px 0 32px;}
    .footer-grid{grid-template-columns:1fr 1fr;gap:24px;}
}
@media (max-width:767px){
    .topbar-inner{align-items:flex-start;flex-direction:column;padding:8px 24px;gap:6px;}
    .topbar{min-height:auto;}
    .topbar-actions{flex-wrap:wrap;}
    .header-inner{min-height:64px;}
    .brand-name{font-size:1.18rem;}
    .header-actions .btn-download-text{display:none;}
    .header-actions .btn-brand{padding:0 14px;min-height:38px;font-size:0.85rem;}
    .heading-grid{grid-template-columns:1fr;}
    .page-heading{background:linear-gradient(180deg,var(--canvas),#fff8F5),url('/assets/images/backpic/back-1.jpg') center/cover no-repeat;}
    .feature-row{padding:24px 18px;flex-direction:column;gap:12px;}
    .feature-index{flex-direction:row;align-items:center;gap:10px;flex:0 0 auto;}
    .feature-index-line{width:24px;margin-top:0;}
    .feature-content h3{font-size:1.18rem;}
    .promo-banner{display:block;}
    .promo-media{height:150px;border-left:0;border-top:1px solid rgba(255,255,255,0.1);}
    .related-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr;}
    .footer-bottom-inner{flex-direction:column;justify-content:center;text-align:center;padding:16px 24px;}
}