/* roulang page: index */
:root {
  --primary: #7C3AED;
  --accent: #00D4AA;
  --warning: #FFB020;
  --bg: #0E1116;
  --panel: #151A22;
  --panel-hover: #1C212B;
  --border: #232936;
  --text: #D9DEE8;
  --text-weak: #8E97A8;
  --text-white: #FFFFFF;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 8px 30px rgba(0,0,0,.35);
  --shadow-hover: 0 12px 36px rgba(124,58,237,.12);
  --transition: all .3s cubic-bezier(.22,1,.36,1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif; background: var(--bg); color: var(--text); line-height: 1.7; font-size: 15px; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: 14px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px dashed var(--primary); outline-offset: 2px; }
::selection { background: rgba(124,58,237,.35); color: #fff; }
.grid-container { max-width: 1320px; padding-left: 24px; padding-right: 24px; margin: 0 auto; }
.container { max-width: 1320px; padding-left: 24px; padding-right: 24px; margin: 0 auto; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 30px; border-radius: 10px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: var(--transition); white-space: nowrap; }
.btn:active { transform: translateY(1px) scale(.98); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--accent); color: #0E1116; }
.btn-outline { background: transparent; border-color: var(--primary); color: var(--primary); }
.btn-outline:hover { background: rgba(124,58,237,.1); }
.btn-light { background: rgba(255,255,255,.08); color: var(--text-white); border-color: rgba(255,255,255,.12); }
.btn-light:hover { background: rgba(255,255,255,.14); }

/* header */
.site-header { position: sticky; top: 0; z-index: 100; height: 64px; background: rgba(14,17,22,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; letter-spacing: .5px; color: var(--text-white); }
.logo .logo-91 { color: var(--primary); }
.logo .logo-icon { display: inline-flex; width: 30px; height: 30px; border-radius: 8px; background: var(--primary); align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 800; }
.header-right { display: flex; align-items: center; gap: 16px; }
.header-cta { height: 40px; padding: 0 20px; font-size: 14px; }
.hamburger { width: 42px; height: 42px; background: transparent; border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; transition: var(--transition); }
.hamburger:hover { border-color: var(--primary); }
.hamburger span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: var(--transition); }
.hamburger span:nth-child(2) { width: 12px; }
.hamburger:hover span { background: var(--accent); }

/* drawer */
.drawer-overlay { position: fixed; top: 0; right: 0; width: 100%; height: 100%; background: #151A22; z-index: 1000; transform: translateX(100%); transition: transform .5s cubic-bezier(.22,1,.36,1); overflow: hidden; background-image: linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px); background-size: 40px 40px; }
.drawer-overlay.open { transform: translateX(0); }
.drawer-overlay::before { content: ''; position: absolute; right: 0; top: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--primary), var(--accent)); }
.drawer-top { display: flex; align-items: center; justify-content: space-between; padding: 24px 32px; }
.drawer-close { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--primary); background: transparent; color: var(--primary); font-size: 22px; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; }
.drawer-close:hover { background: var(--primary); color: #fff; transform: rotate(90deg); }
.drawer-nav { display: flex; flex-direction: column; padding: 20px 48px; gap: 4px; }
.drawer-nav a { display: inline-flex; align-items: center; font-size: 30px; font-weight: 700; color: var(--text); line-height: 1.6; padding: 6px 0; transition: var(--transition); position: relative; }
.drawer-nav a::before { content: ''; position: absolute; left: -16px; width: 4px; height: 0; background: var(--primary); transition: var(--transition); border-radius: 0 4px 4px 0; }
.drawer-nav a:hover { color: var(--primary); transform: translateX(4px); }
.drawer-nav a:hover::before { height: 60%; }
.drawer-nav a.active { color: var(--primary); }
.drawer-bottom { position: absolute; bottom: 40px; left: 48px; right: 48px; display: flex; flex-direction: column; gap: 16px; }
.drawer-search { display: flex; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; height: 44px; gap: 10px; }
.drawer-search input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); height: 100%; }
.drawer-search svg { flex-shrink: 0; }
.drawer-links { display: flex; gap: 24px; }
.drawer-links a { color: var(--text-weak); font-size: 14px; transition: var(--transition); }
.drawer-links a:hover { color: var(--accent); }
body.lock { overflow: hidden; }

/* hero */
.hero { background: linear-gradient(rgba(14,17,22,.82), rgba(14,17,22,.88)), url('/assets/images/backpic/back-1.jpg') center/cover no-repeat; padding: 96px 0 64px; position: relative; }
.hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.hero .container { position: relative; z-index: 1; }
.hero-title { font-size: 42px; line-height: 1.2; font-weight: 800; color: var(--text-white); letter-spacing: 1px; max-width: 700px; }
.hero-title .hl { color: var(--primary); }
.hero-title .hl-accent { color: var(--accent); }
.hero-sub { margin-top: 20px; font-size: 16px; line-height: 1.8; color: var(--text); max-width: 560px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(28,33,43,.8); border: 1px solid var(--border); border-radius: 999px; padding: 6px 16px; font-size: 13px; color: var(--text); transition: var(--transition); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.chip:hover { border-color: var(--primary); color: var(--text-white); }

/* hero matrix */
.hero-matrix { display: flex; flex-direction: column; gap: 24px; align-items: flex-end; }
.matrix-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; max-width: 460px; }
.matrix-item { background: rgba(21,26,34,.9); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; transition: var(--transition); }
.matrix-item:hover { border-color: var(--primary); transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.matrix-icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(124,58,237,.15); display: flex; align-items: center; justify-content: center; color: var(--primary); }
.matrix-item span { font-size: 13px; font-weight: 600; color: var(--text); }
.status-bar { width: 100%; max-width: 460px; background: rgba(21,26,34,.9); border: 1px solid var(--border); border-radius: 12px; padding: 12px 20px; display: flex; align-items: center; gap: 12px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(0,212,170,.6); animation: pulse 2s infinite; }
.status-text { font-size: 13px; color: var(--text); }
.status-right { margin-left: auto; font-size: 12px; color: var(--text-weak); font-family: 'Roboto Mono','DIN Alternate',monospace; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* section */
.section { padding: 88px 0; }
.section-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--primary); background: rgba(124,58,237,.1); padding: 4px 14px; border-radius: 999px; margin-bottom: 12px; letter-spacing: 1px; }
.section-title { font-size: 32px; font-weight: 800; color: var(--text-white); line-height: 1.25; margin-bottom: 16px; }
.section-desc { font-size: 16px; color: var(--text-weak); max-width: 640px; line-height: 1.8; }
.section-head { margin-bottom: 48px; }
.section-head.center { text-align: center; }
.section-head.center .section-desc { margin-left: auto; margin-right: auto; }

/* metric */
.metric-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; border-top: 3px solid var(--primary); transition: var(--transition); height: 100%; position: relative; overflow: hidden; }
.metric-card:hover { border-color: var(--primary); box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.metric-card::before { content: ''; position: absolute; top: 0; right: 0; width: 26px; height: 26px; background: rgba(124,58,237,.25); border-radius: 0 0 0 12px; }
.metric-value { font-family: 'Roboto Mono','DIN Alternate',monospace; font-size: 42px; font-weight: 700; color: var(--text-white); line-height: 1.2; }
.metric-value .unit { font-size: 20px; color: var(--accent); margin-left: 2px; }
.metric-label { font-size: 14px; color: var(--text-weak); margin-top: 8px; }
.metric-bar { width: 100%; height: 4px; background: rgba(255,255,255,.06); border-radius: 4px; margin-top: 16px; overflow: hidden; }
.metric-bar-fill { height: 100%; background: var(--accent); border-radius: 4px; }

/* steps / guide */
.steps-section { background: linear-gradient(rgba(21,26,34,.6), rgba(21,26,34,.6)), url('/assets/images/backpic/back-2.jpg') center/cover no-repeat; }
.step-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px; height: 100%; transition: var(--transition); position: relative; }
.step-card::before { content: ''; position: absolute; top: 0; left: 28px; right: 28px; height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 0 0 4px 4px; opacity: 0; transition: var(--transition); }
.step-card:hover { border-color: var(--primary); transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.step-card:hover::before { opacity: 1; }
.step-num { font-family: 'Roboto Mono',monospace; font-size: 14px; color: var(--primary); font-weight: 600; }
.step-title { font-size: 20px; font-weight: 700; color: var(--text-white); margin: 12px 0 10px; }
.step-desc { font-size: 14px; color: var(--text-weak); line-height: 1.7; }

/* resource / rewards */
.resource-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: var(--transition); height: 100%; }
.resource-card:hover { border-color: var(--primary); box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.resource-cover { width: 100%; height: 170px; object-fit: cover; transition: var(--transition); }
.resource-card:hover .resource-cover { transform: scale(1.03); }
.resource-body { padding: 18px; }
.resource-title { font-size: 16px; font-weight: 600; color: var(--text-white); margin-bottom: 8px; line-height: 1.4; }
.resource-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-weak); }
.badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--panel-hover); border: 1px solid var(--border); color: var(--text); }
.badge-hot { border-color: rgba(255,176,32,.5); color: var(--warning); }
.badge-new { border-color: rgba(0,212,170,.5); color: var(--accent); }

/* bento */
.bento-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 20px; }
.bento-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; transition: var(--transition); position: relative; overflow: hidden; min-height: 180px; display: flex; flex-direction: column; }
.bento-card:hover { border-color: var(--primary); box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.bento-card:hover .bento-icon { box-shadow: 0 0 24px rgba(124,58,237,.3); }
.bento-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(124,58,237,.12); display: flex; align-items: center; justify-content: center; color: var(--primary); margin-bottom: 16px; transition: var(--transition); }
.bento-card .arrow { position: absolute; top: 20px; right: 20px; opacity: 0; transition: var(--transition); color: var(--primary); }
.bento-card:hover .arrow { opacity: 1; }
.bento-large-7 { grid-column: span 7; }
.bento-large-5 { grid-column: span 5; }
.bento-med-4 { grid-column: span 4; }
.bento-med-5 { grid-column: span 5; }
.bento-med-3 { grid-column: span 3; }
.bento-full { grid-column: span 12; min-height: 120px; flex-direction: row; align-items: center; gap: 20px; }
.bento-full .bento-icon { margin-bottom: 0; flex-shrink: 0; }
.bento-card-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .15; z-index: 0; }
.bento-card-content { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; }
.bento-card h3 { font-size: 18px; font-weight: 700; color: var(--text-white); margin-bottom: 8px; }
.bento-card p { font-size: 14px; color: var(--text-weak); line-height: 1.7; }

/* update progress */
.progress-section { background: #0B0E13; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.progress-block { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; height: 100%; }
.progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.progress-header h3 { font-size: 18px; font-weight: 700; color: var(--text-white); }
.progress-percent { font-family: 'Roboto Mono',monospace; font-size: 24px; font-weight: 700; color: var(--accent); }
.progress-track { width: 100%; height: 8px; background: rgba(255,255,255,.06); border-radius: 8px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 8px; transition: width 1s ease; }
.progress-meta { display: flex; justify-content: space-between; margin-top: 12px; font-size: 13px; color: var(--text-weak); }
.task-list { list-style: none; margin-top: 20px; }
.task-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(35,41,54,.5); font-size: 14px; color: var(--text); transition: var(--transition); }
.task-item:last-child { border-bottom: none; }
.task-item:hover { color: var(--text-white); padding-left: 6px; }
.task-time { font-family: 'Roboto Mono',monospace; font-size: 13px; color: var(--text-weak); flex-shrink: 0; }
.task-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* compare */
.compare-wrap { display: flex; align-items: stretch; gap: 28px; }
.compare-col { flex: 1; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 30px; position: relative; }
.compare-col.old { opacity: .75; }
.compare-col.new { border-color: rgba(124,58,237,.5); box-shadow: 0 0 60px rgba(124,58,237,.06); }
.compare-label { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--text-white); margin-bottom: 24px; }
.compare-icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.compare-icon.old { background: rgba(255,255,255,.08); color: var(--text-weak); }
.compare-icon.new { background: var(--primary); color: #fff; }
.compare-list { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.compare-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--text); line-height: 1.6; }
.compare-list svg { flex-shrink: 0; margin-top: 3px; }
.compare-col.old .compare-list svg { color: var(--text-weak); }
.compare-col.new .compare-list svg { color: var(--accent); }
.compare-score { display: inline-flex; align-items: center; font-family: 'Roboto Mono',monospace; font-size: 28px; font-weight: 700; color: var(--text-white); margin-top: 24px; background: rgba(255,255,255,.04); padding: 8px 20px; border-radius: 10px; }
.compare-col.new .compare-score { color: var(--accent); }
.vs-badge { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; font-size: 14px; flex-shrink: 0; align-self: center; box-shadow: 0 0 30px rgba(124,58,237,.4); z-index: 2; }

/* news */
.news-wrap { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }
.news-list { display: flex; flex-direction: column; gap: 0; }
.news-item { display: flex; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid rgba(35,41,54,.5); transition: var(--transition); }
.news-item:last-child { border-bottom: none; }
.news-item:hover { padding-left: 8px; }
.news-item-link { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.news-item-title { font-size: 16px; font-weight: 600; color: var(--text); transition: var(--transition); }
.news-item:hover .news-item-title { color: var(--primary); }
.news-item-meta { display: flex; gap: 12px; font-size: 13px; color: var(--text-weak); }
.news-item-date { font-family: 'Roboto Mono',monospace; }
.news-badge { font-size: 12px; padding: 2px 10px; border-radius: 999px; background: rgba(124,58,237,.1); color: var(--primary); border: 1px solid rgba(124,58,237,.3); }
.recommend-side { display: flex; flex-direction: column; gap: 16px; }
.recommend-card { display: flex; gap: 14px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; transition: var(--transition); align-items: center; }
.recommend-card:hover { border-color: var(--primary); transform: translateX(-4px); }
.recommend-card img { width: 70px; height: 50px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.recommend-info { flex: 1; min-width: 0; }
.recommend-info h4 { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recommend-info p { font-size: 12px; color: var(--text-weak); margin-top: 4px; }

/* faq */
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: var(--transition); }
.faq-item:hover { border-color: rgba(124,58,237,.4); }
.faq-question { display: flex; align-items: center; gap: 14px; padding: 20px 24px; cursor: pointer; user-select: none; transition: var(--transition); }
.faq-q-badge { width: 28px; height: 28px; border-radius: 8px; background: var(--primary); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.faq-question .faq-text { flex: 1; font-size: 16px; font-weight: 600; color: var(--text); }
.faq-arrow { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--text-weak); transition: var(--transition); flex-shrink: 0; }
.faq-item.active .faq-arrow { transform: rotate(180deg); color: var(--primary); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.22,1,.36,1); }
.faq-answer-inner { padding: 0 24px 20px 62px; font-size: 14px; color: var(--text-weak); line-height: 1.8; border-left: 3px solid var(--primary); margin-left: 24px; margin-right: 24px; }

/* cta */
.cta-section { background: linear-gradient(rgba(124,58,237,.12), rgba(14,17,22,.9)), url('/assets/images/backpic/back-3.jpg') center/cover no-repeat; padding: 80px 0; text-align: center; }
.cta-title { font-size: 30px; font-weight: 800; color: var(--text-white); margin-bottom: 16px; }
.cta-sub { font-size: 16px; color: var(--text); max-width: 540px; margin: 0 auto 32px; line-height: 1.8; }
.cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* form */
.contact-section { padding: 88px 0; position: relative; overflow: hidden; }
.contact-section::before { content: ''; position: absolute; width: 400px; height: 400px; background: rgba(124,58,237,.1); border-radius: 50%; top: -100px; right: -100px; filter: blur(60px); pointer-events: none; }
.contact-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.contact-copy h2 { font-size: 32px; font-weight: 800; color: var(--text-white); margin-bottom: 20px; }
.contact-copy p { font-size: 15px; color: var(--text-weak); line-height: 1.9; margin-bottom: 16px; }
.contact-points { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.contact-points li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text); }
.contact-points svg { color: var(--accent); flex-shrink: 0; }
.form-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.form-card form { display: flex; flex-direction: column; gap: 18px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 13px; font-weight: 500; color: var(--text); }
.form-group input, .form-group select, .form-group textarea { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 14px; height: 44px; color: var(--text); transition: var(--transition); width: 100%; outline: none; }
.form-group textarea { height: 100px; padding: 12px 14px; resize: vertical; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(124,58,237,.15); }
.form-group select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238E97A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.submit-btn { width: 100%; height: 48px; }
.form-note { font-size: 12px; color: var(--text-weak); text-align: center; margin-top: 12px; }

/* footer */
.site-footer { background: #0B0E13; border-top: 1px solid rgba(124,58,237,.1); padding: 60px 0 0; }
.footer-top { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.04); }
.footer-brand { max-width: 320px; }
.footer-brand p { font-size: 14px; color: var(--text-weak); margin-top: 12px; line-height: 1.7; }
.footer-cols { display: flex; gap: 60px; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h4 { font-size: 14px; font-weight: 700; color: var(--text-white); margin-bottom: 10px; }
.footer-col a { font-size: 14px; color: var(--text-weak); transition: var(--transition); }
.footer-col a:hover { color: var(--primary); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 20px 0; font-size: 13px; color: var(--text-weak); }

/* responsive */
@media (max-width: 1024px) {
  .hero { padding: 72px 0 48px; }
  .hero-title { font-size: 36px; }
  .hero-matrix { align-items: flex-start; margin-top: 40px; }
  .matrix-grid { max-width: 100%; }
  .status-bar { max-width: 100%; }
  .section { padding: 64px 0; }
  .section-title { font-size: 28px; }
  .bento-large-7 { grid-column: span 12; }
  .bento-large-5 { grid-column: span 12; }
  .bento-med-4 { grid-column: span 6; }
  .bento-med-5 { grid-column: span 12; }
  .bento-med-3 { grid-column: span 6; }
  .news-wrap { grid-template-columns: 1fr; gap: 32px; }
  .contact-wrap { grid-template-columns: 1fr; gap: 40px; }
  .compare-wrap { flex-direction: column; }
  .vs-badge { width: 40px; height: 40px; margin: -10px auto; }
}
@media (max-width: 640px) {
  .site-header { height: 48px; }
  .header-inner { height: 48px; }
  .logo { font-size: 17px; }
  .logo .logo-icon { width: 26px; height: 26px; font-size: 12px; }
  .header-cta { display: none; }
  .hero { padding: 48px 0 36px; }
  .hero-title { font-size: 28px; }
  .hero-sub { font-size: 15px; }
  .hero-cta .btn { width: 100%; }
  .matrix-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .matrix-item { padding: 14px 10px; }
  .matrix-icon { width: 38px; height: 38px; }
  .section { padding: 56px 0; }
  .section-title { font-size: 24px; }
  .bento-med-4 { grid-column: span 12; }
  .bento-med-3 { grid-column: span 12; }
  .bento-full { flex-direction: column; text-align: center; padding: 24px; }
  .drawer-nav { padding: 16px 28px; }
  .drawer-nav a { font-size: 26px; }
  .drawer-bottom { left: 28px; right: 28px; bottom: 24px; }
  .faq-question { padding: 16px; }
  .faq-answer-inner { margin-left: 12px; margin-right: 12px; padding-left: 36px; }
  .form-card { padding: 24px; }
  .footer-cols { gap: 30px; }
  .footer-bottom { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* roulang page: category1 */
:root{
  --primary:#7C3AED;
  --accent:#00D4AA;
  --warning:#FFB020;
  --bg:#0E1116;
  --panel:#151A22;
  --panel-hover:#1C212B;
  --border:#232936;
  --text:#D9DEE8;
  --text-weak:#8E97A8;
  --text-white:#FFFFFF;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 8px 30px rgba(0,0,0,.35);
  --shadow-hover:0 12px 36px rgba(124,58,237,.12);
  --transition:all .3s cubic-bezier(.22,1,.36,1);
}
html{scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif;background:var(--bg);color:var(--text);line-height:1.7;font-size:15px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:14px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px dashed var(--primary);outline-offset:2px}
.container{max-width:1320px;padding-left:24px;padding-right:24px;margin:0 auto}
.grid-container{max-width:1320px;padding-left:24px;padding-right:24px;margin:0 auto}
.btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 30px;border-radius:10px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;transition:var(--transition);white-space:nowrap}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--accent);color:#0E1116}
.btn-outline{background:transparent;border-color:var(--primary);color:var(--primary)}
.btn-outline:hover{background:rgba(124,58,237,.1)}
.btn-light{background:rgba(255,255,255,.08);color:var(--text-white);border-color:rgba(255,255,255,.12)}
.btn-light:hover{background:rgba(255,255,255,.14)}
.site-header{position:sticky;top:0;z-index:100;height:64px;background:rgba(14,17,22,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;letter-spacing:.5px;color:var(--text-white)}
.logo .logo-91{color:var(--primary)}
.logo .logo-icon{display:inline-flex;width:30px;height:30px;border-radius:8px;background:var(--primary);align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:800}
.header-right{display:flex;align-items:center;gap:16px}
.header-cta{height:40px;padding:0 20px;font-size:14px}
.hamburger{width:42px;height:42px;background:transparent;border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;transition:var(--transition)}
.hamburger:hover{border-color:var(--primary)}
.hamburger span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;transition:var(--transition)}
.hamburger span:nth-child(2){width:12px}
.hamburger:hover span{background:var(--accent)}
.drawer-overlay{position:fixed;top:0;right:0;width:100%;height:100%;background:#151A22;z-index:1000;transform:translateX(100%);transition:transform .5s cubic-bezier(.22,1,.36,1);overflow:hidden;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:40px 40px}
.drawer-overlay.open{transform:translateX(0)}
.drawer-overlay::before{content:'';position:absolute;right:0;top:0;width:4px;height:100%;background:linear-gradient(180deg,var(--primary),var(--accent))}
.drawer-top{display:flex;align-items:center;justify-content:space-between;padding:24px 32px}
.drawer-close{width:44px;height:44px;border-radius:50%;border:2px solid var(--primary);background:transparent;color:var(--primary);font-size:22px;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center}
.drawer-close:hover{background:var(--primary);color:#fff;transform:rotate(90deg)}
.drawer-nav{display:flex;flex-direction:column;padding:20px 48px;gap:4px}
.drawer-nav a{display:inline-flex;align-items:center;font-size:30px;font-weight:700;color:var(--text);line-height:1.6;padding:6px 0;transition:var(--transition);position:relative}
.drawer-nav a::before{content:'';position:absolute;left:-16px;width:4px;height:0;background:var(--primary);transition:var(--transition);border-radius:0 4px 4px 0}
.drawer-nav a:hover{color:var(--primary);transform:translateX(4px)}
.drawer-nav a:hover::before{height:60%}
.drawer-nav a.active{color:var(--primary)}
.drawer-bottom{position:absolute;bottom:40px;left:48px;right:48px;display:flex;flex-direction:column;gap:16px}
.drawer-search{display:flex;align-items:center;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:0 14px;height:44px;gap:10px}
.drawer-search input{flex:1;background:transparent;border:none;outline:none;color:var(--text);height:100%}
.drawer-search svg{flex-shrink:0}
.drawer-links{display:flex;gap:24px}
.drawer-links a{color:var(--text-weak);font-size:14px;transition:var(--transition)}
.drawer-links a:hover{color:var(--accent)}
body.lock{overflow:hidden}
.breadcrumb-bar{background:var(--bg);border-bottom:1px solid var(--border);padding:16px 0}
.breadcrumb-bar nav{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-weak)}
.breadcrumb-bar nav a{transition:var(--transition)}
.breadcrumb-bar nav a:hover{color:var(--accent)}
.breadcrumb-bar .sep{color:var(--border)}
.breadcrumb-bar .current{color:var(--text)}
.category-hero{background:linear-gradient(rgba(14,17,22,.82),rgba(14,17,22,.88)),url('/assets/images/backpic/back-2.jpg') center/cover no-repeat;padding:84px 0 72px;position:relative}
.category-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:100px;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.category-hero .hero-content{position:relative;z-index:1;max-width:820px}
.hero-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(124,58,237,.15);border:1px solid rgba(124,58,237,.4);color:var(--primary);font-size:13px;font-weight:600;padding:4px 16px;border-radius:999px;letter-spacing:1px}
.category-hero h1{font-size:42px;line-height:1.2;font-weight:800;color:var(--text-white);margin-top:20px;letter-spacing:1px}
.category-hero h1 .hl{color:var(--primary)}
.category-hero h1 .hl-accent{color:var(--accent)}
.category-hero p{font-size:16px;line-height:1.8;color:var(--text);margin-top:16px;max-width:620px}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.resource-section{padding:72px 0 64px}
.list-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px 20px;margin-bottom:28px}
.list-toolbar span{font-size:14px;color:var(--text-weak)}
.list-toolbar .result-count{color:var(--accent);font-family:'Roboto Mono','DIN Alternate',monospace;font-weight:600}
.select-wrap{position:relative;display:inline-flex;align-items:center}
.select-wrap select{appearance:none;-webkit-appearance:none;background:var(--bg);border:1px solid var(--border);border-radius:10px;color:var(--text);height:42px;padding:0 40px 0 14px;font-size:14px;cursor:pointer;transition:var(--transition);outline:none}
.select-wrap select:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(124,58,237,.15)}
.select-wrap svg{position:absolute;right:12px;pointer-events:none;color:var(--text-weak)}
.resource-list{display:flex;flex-direction:column;gap:20px}
.resource-item{display:flex;flex-direction:row;gap:20px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px;transition:var(--transition);overflow:hidden}
.resource-item:hover{border-color:rgba(124,58,237,.5);box-shadow:0 12px 36px rgba(124,58,237,.12);transform:translateY(-4px)}
.item-cover{position:relative;width:220px;height:148px;border-radius:10px;overflow:hidden;flex-shrink:0}
.item-cover img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.resource-item:hover .item-cover img{transform:scale(1.03)}
.item-type{position:absolute;top:10px;left:10px;background:rgba(14,17,22,.85);border:1px solid rgba(255,255,255,.15);color:var(--text-white);font-size:11px;font-weight:600;padding:2px 10px;border-radius:999px;letter-spacing:.5px;backdrop-filter:blur(4px)}
.item-body{flex:1;display:flex;flex-direction:column;min-width:0}
.item-title{font-size:18px;font-weight:700;color:var(--text-white);line-height:1.4;transition:var(--transition)}
.item-title a:hover{color:var(--primary)}
.item-desc{font-size:14px;color:var(--text-weak);line-height:1.6;margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item-footer{display:flex;align-items:center;gap:18px;margin-top:auto;padding-top:14px;flex-wrap:wrap}
.meta-time,.meta-hot{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-weak)}
.meta-hot{color:var(--warning)}
.meta-hot i{font-size:12px}
.view-link{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--primary);font-size:14px;font-weight:600;transition:var(--transition)}
.view-link:hover{color:var(--accent);gap:10px}
.pagination{margin-top:40px;display:flex;justify-content:center;gap:8px;list-style:none;flex-wrap:wrap}
.pagination li{display:inline-flex}
.pagination li a,.pagination li.current{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 8px;border-radius:50%;background:var(--panel);border:1px solid var(--border);color:var(--text);font-size:14px;font-weight:600;transition:var(--transition)}
.pagination li a:hover{background:rgba(124,58,237,.15);border-color:var(--primary);color:var(--primary)}
.pagination li.current{background:var(--primary);border-color:var(--primary);color:#fff}
.pagination .next a,.pagination .prev a{border-radius:10px}
.sidebar{display:flex;flex-direction:column;gap:24px;position:sticky;top:88px}
.side-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:24px;transition:var(--transition)}
.side-card:hover{border-color:rgba(124,58,237,.4)}
.side-card h3{font-size:18px;font-weight:700;color:var(--text-white);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.side-card h3::before{content:'';width:4px;height:18px;background:var(--primary);border-radius:2px}
.hot-categories{list-style:none;display:flex;flex-direction:column;gap:2px}
.hot-categories li{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(35,41,54,.5);transition:var(--transition)}
.hot-categories li:last-child{border-bottom:none}
.hot-categories li:hover{padding-left:8px}
.hot-categories a{display:flex;align-items:center;gap:10px;color:var(--text);font-size:14px;font-weight:500;transition:var(--transition)}
.hot-categories a::before{content:'';width:6px;height:6px;background:var(--primary);border-radius:50%;flex-shrink:0}
.hot-categories a:hover{color:var(--primary)}
.hot-categories .count{font-family:'Roboto Mono','DIN Alternate',monospace;font-size:13px;color:var(--text-weak);background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:0 10px;height:22px;display:inline-flex;align-items:center}
.latest-list{list-style:none;display:flex;flex-direction:column;gap:0}
.latest-list li{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid rgba(35,41,54,.5);transition:var(--transition)}
.latest-list li:last-child{border-bottom:none}
.latest-list li:hover{padding-left:6px}
.latest-index{font-family:'Roboto Mono','DIN Alternate',monospace;font-size:18px;font-weight:700;color:var(--primary);width:26px;text-align:center;flex-shrink:0}
.latest-list a{font-size:14px;color:var(--text);font-weight:500;line-height:1.5;transition:var(--transition);flex:1}
.latest-list a:hover{color:var(--primary)}
.latest-list .date{font-size:12px;color:var(--text-weak);flex-shrink:0}
.tag-cloud{display:flex;flex-wrap:wrap;gap:10px}
.tag-cloud a{display:inline-flex;align-items:center;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:6px 16px;font-size:13px;color:var(--text);transition:var(--transition)}
.tag-cloud a:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 12px rgba(0,212,170,.15)}
.feature-strip{padding:72px 0;background:var(--panel);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.feature-strip .section-head{text-align:center;margin-bottom:44px}
.feature-strip .section-tag{display:inline-flex;color:var(--accent);font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
.feature-strip h2{font-size:32px;font-weight:800;color:var(--text-white);line-height:1.3}
.feature-cell{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:28px 24px;text-align:center;transition:var(--transition);height:100%}
.feature-cell:hover{border-color:rgba(124,58,237,.5);box-shadow:var(--shadow-hover);transform:translateY(-4px)}
.feature-icon{display:inline-flex;width:56px;height:56px;border-radius:50%;background:rgba(124,58,237,.1);color:var(--primary);align-items:center;justify-content:center;font-size:22px;margin-bottom:16px;transition:var(--transition)}
.feature-cell:hover .feature-icon{background:var(--primary);color:#fff}
.feature-cell h3{font-size:18px;font-weight:700;color:var(--text-white);margin-bottom:8px}
.feature-cell p{font-size:13px;color:var(--text-weak);line-height:1.6}
.faq-section{padding:72px 0}
.faq-section .section-head{text-align:center;margin-bottom:44px}
.faq-section .section-tag{display:inline-flex;color:var(--primary);font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
.faq-section h2{font-size:32px;font-weight:800;color:var(--text-white);line-height:1.3}
.faq-list{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.faq-item{background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:var(--transition)}
.faq-item:hover{border-color:rgba(124,58,237,.4)}
.faq-q{width:100%;display:flex;align-items:center;gap:14px;background:transparent;border:none;padding:20px 24px;cursor:pointer;text-align:left;color:var(--text-white);font-size:16px;font-weight:600;transition:var(--transition)}
.faq-q:hover{color:var(--primary)}
.faq-qmark{display:inline-flex;width:28px;height:28px;border-radius:8px;background:var(--primary);color:#fff;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0}
.faq-item.open .faq-q{color:var(--primary)}
.faq-item.open .faq-qmark{background:var(--accent);color:#0E1116}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.22,1,.36,1);padding:0 24px}
.faq-item.open .faq-a{max-height:300px;padding:0 24px 20px}
.faq-a p{font-size:14px;color:var(--text);line-height:1.8;border-left:3px solid var(--primary);padding-left:16px;margin:8px 0}
.cta-block{padding:80px 0;background:linear-gradient(rgba(124,58,237,.12),rgba(124,58,237,.05)),url('/assets/images/backpic/back-3.jpg') center/cover no-repeat;position:relative;border-top:1px solid var(--border)}
.cta-block::before{content:'';position:absolute;inset:0;background:rgba(14,17,22,.75)}
.cta-inner{position:relative;z-index:1;text-align:center;max-width:680px;margin:0 auto}
.cta-inner h3{font-size:30px;font-weight:800;color:var(--text-white);line-height:1.3}
.cta-inner p{font-size:16px;color:var(--text);margin-top:14px;line-height:1.7}
.cta-inner .btn{margin-top:28px}
.site-footer{background:#0B0E13;border-top:1px solid rgba(124,58,237,.1);padding:56px 0 24px}
.footer-top{display:flex;flex-wrap:wrap;gap:48px;padding-bottom:32px;border-bottom:1px solid rgba(35,41,54,.6)}
.footer-brand{flex:0 0 260px}
.footer-brand p{font-size:13px;color:var(--text-weak);line-height:1.7;margin-top:12px}
.footer-cols{flex:1;display:flex;flex-wrap:wrap;gap:40px;justify-content:flex-end}
.footer-col{min-width:140px}
.footer-col h4{font-size:15px;font-weight:700;color:var(--text-white);margin-bottom:14px}
.footer-col a{display:block;font-size:13px;color:var(--text-weak);padding:5px 0;transition:var(--transition)}
.footer-col a:hover{color:var(--accent);padding-left:4px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:20px;font-size:13px;color:var(--text-weak)}
@media (max-width:1024px){
  .category-hero{padding:64px 0 56px}
  .category-hero h1{font-size:34px}
  .feature-strip .grid-x{row-gap:20px}
  .sidebar{position:static;margin-top:32px}
}
@media (max-width:768px){
  .category-hero{padding:48px 0 40px}
  .category-hero h1{font-size:28px}
  .category-hero p{font-size:15px}
  .hero-actions{gap:12px;flex-direction:column}
  .hero-actions .btn{width:100%}
  .resource-item{flex-direction:column}
  .item-cover{width:100%;height:auto;aspect-ratio:3/2}
  .item-footer{gap:10px}
  .view-link{margin-left:0}
  .list-toolbar{flex-direction:column;align-items:flex-start}
  .select-wrap{width:100%}
  .select-wrap select{width:100%}
  .footer-top{gap:32px;flex-direction:column}
  .footer-cols{justify-content:flex-start}
}
@media (max-width:640px){
  .container{padding-left:16px;padding-right:16px}
  .header-cta{display:none}
  .category-hero h1{font-size:24px}
  .feature-strip,.faq-section,.resource-section{padding:56px 0}
  .feature-strip h2,.faq-section h2{font-size:26px}
  .drawer-nav{padding:12px 24px}
  .drawer-nav a{font-size:24px}
  .drawer-bottom{left:24px;right:24px;bottom:24px}
  .drawer-search input{font-size:14px}
  .resource-item{padding:12px}
  .item-title{font-size:16px}
  .item-desc{font-size:13px}
  .pagination{gap:6px}
  .pagination li a,.pagination li.current{min-width:36px;height:36px;font-size:13px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}