/* roulang page: index */
:root {
  --bg-deep: #0B1426;
  --bg-section: #0F1D33;
  --primary: #00D4FF;
  --accent: #B8FF29;
  --text-strong: #E8F0FF;
  --text-body: #A7B6CF;
  --text-muted: #6C7D99;
  --glass-bg: rgba(255,255,255,0.05);
  --glass-border: rgba(255,255,255,0.10);
  --glass-highlight: rgba(255,255,255,0.18);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --shadow-glass: 0 10px 40px rgba(0,0,0,0.35);
  --glow-cyan: 0 0 24px rgba(0,212,255,0.35);
  --glow-lime: 0 0 28px rgba(184,255,41,0.30);
  --font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  --font-num: "Roboto Condensed", "DIN Alternate", "Bahnschrift", tabular-nums, monospace;
  --bs-link-color: var(--primary);
  --bs-link-hover-color: #66e5ff;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); background: var(--bg-deep); color: var(--text-body); font-size: 1rem; line-height: 1.75; overflow-x: hidden; }
a { color: var(--primary); text-decoration: none; transition: color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
a:hover { color: #66e5ff; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
.container-custom { max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.text-num { font-family: var(--font-num); }
.section-padding { padding: 96px 0; }
.grid-bg { background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 42px 42px; }
.speed-lines { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(0,212,255,0.07) 45%, transparent 60%, rgba(184,255,41,0.04) 72%, transparent 85%); }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}
/* ---------- Header / Nav ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1050; height: 72px; background: rgba(11,20,38,0.82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.07); transition: background .3s ease, box-shadow .3s ease; }
.site-header.scrolled { background: rgba(8,14,28,0.95); box-shadow: 0 6px 30px rgba(0,0,0,0.45); }
.site-header .navbar { padding: 0; min-height: 72px; flex-wrap: nowrap; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--primary), #007a99); display: flex; align-items: center; justify-content: center; margin-right: 10px; flex-shrink: 0; box-shadow: var(--glow-cyan); }
.brand-mark svg { width: 20px; height: 20px; }
.brand-text { font-size: 1.3rem; font-weight: 800; color: var(--text-strong); letter-spacing: 0.02em; font-family: var(--font-sans); }
.brand-badge { font-size: 0.68rem; font-weight: 700; color: var(--accent); border: 1px solid rgba(184,255,41,0.7); border-radius: 6px; padding: 1px 6px; margin-left: 6px; letter-spacing: 0.08em; }
.site-header .nav-links { display: flex; align-items: center; gap: 4px; margin-left: 28px; }
.site-header .nav-links .nav-link { color: var(--text-body); font-size: 0.95rem; font-weight: 500; padding: 8px 16px !important; border-radius: var(--radius-sm); transition: all .25s ease; position: relative; }
.site-header .nav-links .nav-link:hover { color: var(--text-strong); background: rgba(255,255,255,0.06); }
.site-header .nav-links .nav-link.active { color: var(--primary); background: rgba(0,212,255,0.08); box-shadow: inset 0 -2px 0 var(--primary); }
.header-cta-group { display: flex; align-items: center; gap: 12px; }
.mega-trigger { display: inline-flex; align-items: center; gap: 8px; background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-strong); font-size: 0.9rem; font-weight: 600; padding: 8px 18px; border-radius: 30px; cursor: pointer; transition: all .3s ease; }
.mega-trigger:hover, .mega-trigger[aria-expanded="true"] { background: rgba(0,212,255,0.12); border-color: rgba(0,212,255,0.4); box-shadow: var(--glow-cyan); color: var(--text-strong); }
.mega-trigger i { font-size: 0.75rem; transition: transform .3s ease; }
.mega-trigger[aria-expanded="true"] i { transform: rotate(180deg); }
.mega-panel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); width: 720px; max-width: calc(100vw - 32px); background: rgba(13,22,40,0.96); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-glass); padding: 28px; opacity: 0; visibility: hidden; transition: opacity .3s ease, transform .3s ease, visibility .3s ease; z-index: 1060; }
.mega-panel.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(6px); }
.mega-panel h6 { color: var(--text-muted); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; }
.mega-cat-list .mega-cat-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-body); font-size: 0.9rem; font-weight: 500; transition: all .25s ease; border-left: 2px solid transparent; }
.mega-cat-item:hover { background: rgba(0,212,255,0.06); border-left-color: var(--accent); color: var(--text-strong); transform: translateX(2px); }
.mega-cat-item .icon-wrap { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 0.9rem; flex-shrink: 0; }
.mega-cat-item .arrow { margin-left: auto; font-size: 0.75rem; color: var(--text-muted); }
.mega-latest-item { display: flex; gap: 10px; padding: 8px; border-radius: var(--radius-sm); transition: background .25s ease; align-items: center; }
.mega-latest-item:hover { background: rgba(255,255,255,0.04); }
.mega-latest-item img { width: 60px; height: 42px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.mega-latest-item .meta { flex: 1; min-width: 0; }
.mega-latest-item .meta .t { color: var(--text-strong); font-size: 0.83rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega-latest-item .meta .d { color: var(--text-muted); font-size: 0.72rem; }
.mega-featured { background: linear-gradient(135deg, #0F2A4A, #0A3D5C 60%, #0F4A6E); border-radius: var(--radius-md); padding: 24px; position: relative; overflow: hidden; height: 100%; }
.mega-featured::after { content: ''; position: absolute; top: -40px; right: -40px; width: 120px; height: 120px; border-radius: 50%; background: rgba(0,212,255,0.2); filter: blur(30px); }
.mega-featured h6 { color: var(--text-muted); margin-bottom: 8px; }
.mega-featured .f-title { color: var(--text-strong); font-weight: 800; font-size: 1.1rem; line-height: 1.4; margin-bottom: 16px; }
.mega-featured a { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: #0A1A2E; font-weight: 700; font-size: 0.85rem; padding: 8px 18px; border-radius: 30px; transition: all .3s ease; }
.mega-featured a:hover { box-shadow: var(--glow-lime); transform: translateY(-2px); color: #0A1A2E; }
/* Mobile hamburger */
.navbar-toggler { border: 1px solid var(--glass-border); background: rgba(255,255,255,0.04); border-radius: var(--radius-sm); padding: 8px 10px; color: var(--text-strong); }
.navbar-toggler:focus { box-shadow: 0 0 0 2px rgba(0,212,255,0.4); }
.navbar-toggler .bar { display: block; width: 20px; height: 2px; background: var(--text-strong); margin: 4px 0; border-radius: 2px; transition: all .3s ease; }
.mobile-nav { position: fixed; top: 72px; left: 0; right: 0; background: rgba(8,14,28,0.98); z-index: 1040; border-bottom: 1px solid var(--glass-border); padding: 16px 24px 24px; transform: translateY(-120%); transition: transform .35s ease; max-height: calc(100vh - 72px); overflow-y: auto; }
.mobile-nav.open { transform: translateY(0); }
.mobile-nav a { display: block; padding: 12px 16px; color: var(--text-body); font-weight: 500; border-radius: var(--radius-sm); font-size: 1rem; }
.mobile-nav a:hover, .mobile-nav a.active { color: var(--primary); background: rgba(0,212,255,0.08); }
/* ---------- Hero ---------- */
.home-hero { height: 92vh; min-height: 680px; background: var(--bg-deep); position: relative; overflow: hidden; display: flex; align-items: center; }
.home-hero .hero-bg { position: absolute; inset: 0; background-image: url('/assets/images/backpic/back-1.png'); background-size: cover; background-position: center; opacity: 0.25; }
.home-hero .hero-overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(11,20,38,0.98) 30%, rgba(11,20,38,0.7) 65%, rgba(11,20,38,0.4)); }
.hero-glow { position: absolute; top: -10%; right: -5%; width: 420px; height: 420px; border-radius: 50%; background: rgba(0,212,255,0.12); filter: blur(80px); pointer-events: none; }
.hero-score-deco { position: absolute; bottom: 30px; left: 30px; display: flex; gap: 10px; opacity: 0.5; }
.hero-score-deco .score-chip { background: #0A1020; border: 1px solid rgba(184,255,41,0.3); border-radius: var(--radius-sm); padding: 8px 14px; font-family: var(--font-num); font-weight: 700; color: var(--accent); font-size: 1.1rem; }
.hero-content { position: relative; z-index: 2; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(0,212,255,0.4); border-radius: 30px; padding: 6px 16px; font-size: 0.8rem; font-weight: 600; color: var(--primary); letter-spacing: 0.12em; text-transform: uppercase; background: rgba(0,212,255,0.06); margin-bottom: 24px; }
.hero-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.hero-title { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; color: var(--text-strong); line-height: 1.2; margin-bottom: 20px; letter-spacing: 0.01em; }
.hero-title .highlight { color: var(--primary); position: relative; }
.hero-title .highlight::after { content: ''; position: absolute; left: 0; bottom: 2px; width: 100%; height: 8px; background: rgba(0,212,255,0.2); z-index: -1; }
.hero-sub { font-size: 1.05rem; color: var(--text-body); max-width: 520px; margin-bottom: 32px; line-height: 1.8; }
.hero-cta-group { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }
.btn-brand-lime { background: var(--accent); color: #0A1A2E !important; font-weight: 700; font-size: 1rem; padding: 12px 28px; border-radius: 12px; border: none; display: inline-flex; align-items: center; gap: 8px; transition: all .3s ease; box-shadow: var(--glow-lime); }
.btn-brand-lime:hover { transform: translateY(-2px); box-shadow: 0 0 36px rgba(184,255,41,0.5); color: #0A1A2E !important; }
.btn-brand-glass { background: rgba(255,255,255,0.05); border: 1px solid rgba(0,212,255,0.4); color: var(--primary) !important; font-weight: 600; font-size: 0.95rem; padding: 12px 24px; border-radius: 12px; display: inline-flex; align-items: center; gap: 8px; transition: all .3s ease; }
.btn-brand-glass:hover { background: rgba(0,212,255,0.12); border-color: var(--primary); box-shadow: var(--glow-cyan); color: var(--primary) !important; }
.hero-stats { display: flex; gap: 40px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px; max-width: 460px; }
.hero-stats .stat-item .num { font-family: var(--font-num); font-size: 2rem; font-weight: 800; color: var(--accent); line-height: 1.2; }
.hero-stats .stat-item .label { font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.03em; }
/* Hero phone mockup */
.phone-wrap { position: relative; z-index: 3; display: flex; justify-content: center; }
.phone-frame { width: 300px; max-width: 100%; aspect-ratio: 9/16; border-radius: 36px; background: #0E1B30; border: 2px solid rgba(255,255,255,0.14); box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 50px rgba(0,212,255,0.12); overflow: hidden; position: relative; }
.phone-frame img { width: 100%; height: 100%; object-fit: cover; }
.phone-frame .phone-topbar { position: absolute; top: 0; left: 0; right: 0; height: 36px; background: linear-gradient(180deg, rgba(0,0,0,0.5), transparent); display: flex; justify-content: space-between; align-items: center; padding: 0 20px; z-index: 2; }
.phone-frame .live-badge { position: absolute; top: 12px; right: 14px; z-index: 3; background: rgba(255,0,0,0.85); color: #fff; font-size: 0.62rem; font-weight: 700; padding: 3px 8px; border-radius: 4px; letter-spacing: 0.08em; animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,0,0,0.5); } 50% { box-shadow: 0 0 12px 4px rgba(255,0,0,0.4); } }
.phone-overlay-card { position: absolute; bottom: 60px; left: 14px; right: 14px; background: rgba(10,18,32,0.85); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 14px; z-index: 3; }
.phone-overlay-card .match-line { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-body); padding: 3px 0; }
.phone-overlay-card .match-line .score { font-family: var(--font-num); color: var(--accent); font-weight: 700; }
.phone-bottom-btn { position: absolute; bottom: 14px; left: 14px; right: 14px; background: var(--accent); border-radius: 10px; padding: 9px; text-align: center; color: #0A1A2E; font-weight: 700; font-size: 0.8rem; z-index: 3; box-shadow: var(--glow-lime); }
.scroll-down { text-align: center; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: var(--text-muted); font-size: 0.75rem; z-index: 5; }
.scroll-down i { display: block; margin-top: 4px; animation: bounce-down 2s infinite; }
@keyframes bounce-down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
/* ---------- Hot Clips ---------- */
.hot-clips { background: var(--bg-section); position: relative; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; flex-wrap: wrap; gap: 12px; }
.section-head .sec-label { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.sec-label::after { content: ''; width: 40px; height: 1px; background: rgba(255,255,255,0.15); }
.section-head h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 700; color: var(--text-strong); margin: 0; }
.view-all { color: var(--primary); font-size: 0.88rem; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.view-all:hover { gap: 10px; }
.clip-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); overflow: hidden; transition: all .3s ease; height: 100%; display: block; }
.clip-card:hover { transform: translateY(-6px); border-color: rgba(0,212,255,0.3); box-shadow: var(--shadow-glass), var(--glow-cyan); }
.clip-card .thumb { position: relative; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; aspect-ratio: 16/9; background: #12233F; }
.clip-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.clip-card:hover .thumb img { transform: scale(1.05); }
.clip-card .duration { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,0.7); color: #fff; font-size: 0.72rem; padding: 3px 8px; border-radius: 6px; font-family: var(--font-num); letter-spacing: 0.04em; z-index: 2; }
.clip-card .score-badge { position: absolute; top: 10px; left: 10px; background: #0A1020; border: 1px solid rgba(184,255,41,0.4); color: var(--accent); font-family: var(--font-num); font-size: 0.7rem; font-weight: 700; padding: 3px 8px; border-radius: 5px; z-index: 2; }
.clip-card .clip-body { padding: 18px 18px 20px; }
.clip-card .clip-title { color: var(--text-strong); font-size: 1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 10px; }
.clip-card .clip-meta { display: flex; align-items: center; gap: 10px; font-size: 0.78rem; color: var(--text-muted); flex-wrap: wrap; }
.clip-card .clip-meta .tag { background: rgba(0,212,255,0.1); color: var(--primary); padding: 2px 10px; border-radius: 20px; font-weight: 600; font-size: 0.72rem; }
.clip-card .clip-meta i { margin-right: 3px; }
/* ---------- Seed List ---------- */
.seed-list { background: var(--bg-deep); position: relative; }
.seed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 40px; border: 1px solid rgba(255,255,255,0.05); border-radius: var(--radius-lg); overflow: hidden; }
.seed-row { display: flex; align-items: center; gap: 18px; padding: 20px 24px; border-bottom: 1px solid rgba(255,255,255,0.05); transition: background .3s ease, border-left-color .3s ease; border-left: 3px solid transparent; background: rgba(255,255,255,0.015); }
.seed-row:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.04); }
.seed-row:nth-child(n+7) { border-bottom: none; }
.seed-row:hover { background: rgba(0,212,255,0.06); border-left-color: var(--accent); }
.seed-row .seed-num { font-family: var(--font-num); font-size: 1.65rem; font-weight: 800; color: var(--accent); opacity: 0.55; width: 44px; flex-shrink: 0; text-align: right; }
.seed-row:hover .seed-num { opacity: 1; }
.seed-row .seed-info { flex: 1; min-width: 0; }
.seed-row .seed-name { color: var(--text-strong); font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.seed-row .seed-desc { color: var(--text-muted); font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seed-row .seed-arrow { color: var(--text-muted); font-size: 0.9rem; transition: transform .3s ease, color .3s ease; }
.seed-row:hover .seed-arrow { transform: translateX(4px); color: var(--primary); }
/* ---------- Reviews ---------- */
.reviews { background: var(--bg-section); }
.review-scroll { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.review-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-left: 2px solid var(--accent); border-radius: var(--radius-md); padding: 20px; transition: box-shadow .3s ease, transform .3s ease; }
.review-card:hover { box-shadow: var(--shadow-glass); transform: translateY(-4px); }
.review-card .r-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.review-card .r-av { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #0F4A6E, #00D4FF); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.review-card .r-name { color: var(--text-strong); font-size: 0.9rem; font-weight: 600; }
.review-card .r-time { color: var(--text-muted); font-size: 0.72rem; }
.review-card .r-stars { color: var(--primary); font-size: 0.78rem; margin-bottom: 8px; letter-spacing: 1px; }
.review-card .r-text { color: var(--text-body); font-size: 0.85rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* ---------- CTA ---------- */
.goto-cta { background: var(--bg-deep); position: relative; overflow: hidden; padding: 100px 0; }
.goto-cta .cta-glow-1 { position: absolute; top: -60px; left: 20%; width: 320px; height: 320px; border-radius: 50%; background: rgba(0,212,255,0.12); filter: blur(70px); }
.goto-cta .cta-glow-2 { position: absolute; bottom: -60px; right: 15%; width: 260px; height: 260px; border-radius: 50%; background: rgba(184,255,41,0.08); filter: blur(60px); }
.goto-cta .cta-band { position: absolute; top: 20%; left: -10%; width: 120%; height: 2px; background: linear-gradient(90deg, transparent, rgba(0,212,255,0.2), transparent); transform: rotate(-45deg); }
.cta-content { position: relative; z-index: 2; text-align: center; max-width: 680px; margin: 0 auto; }
.cta-content h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: var(--text-strong); margin-bottom: 14px; }
.cta-content .cta-sub { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 32px; }
.cta-content .btn-brand-lime { font-size: 1.05rem; padding: 14px 36px; border-radius: 14px; }
/* ---------- Latest News (CMS) ---------- */
.latest-news { background: var(--bg-section); position: relative; }
.news-list { display: flex; flex-direction: column; gap: 16px; }
.news-item { display: flex; gap: 18px; padding: 16px; border: 1px solid rgba(255,255,255,0.05); border-radius: var(--radius-md); transition: background .3s ease, border-color .3s ease, transform .3s ease; background: rgba(255,255,255,0.02); align-items: center; }
.news-item:hover { background: rgba(0,212,255,0.05); border-color: rgba(0,212,255,0.2); transform: translateX(4px); }
.news-item .news-thumb { width: 120px; height: 80px; border-radius: var(--radius-md); object-fit: cover; flex-shrink: 0; background: #12233F; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.2); font-size: 2rem; }
.news-item .news-body { flex: 1; min-width: 0; }
.news-item .news-title { color: var(--text-strong); font-size: 1rem; font-weight: 700; margin-bottom: 6px; transition: color .25s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.news-item:hover .news-title { color: var(--primary); }
.news-item .news-desc { color: var(--text-muted); font-size: 0.85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px; }
.news-item .news-meta { display: flex; gap: 12px; font-size: 0.78rem; color: var(--text-muted); align-items: center; flex-wrap: wrap; }
.news-item .news-meta .cate { background: rgba(0,212,255,0.12); color: var(--primary); padding: 2px 10px; border-radius: 20px; font-weight: 600; }
.news-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.news-empty .empty-icon { width: 60px; height: 60px; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 1.6rem; color: rgba(255,255,255,0.2); }
/* ---------- FAQ ---------- */
.faq { background: var(--bg-deep); }
.faq-left h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 700; color: var(--text-strong); margin-bottom: 14px; }
.faq-left p { color: var(--text-muted); font-size: 0.92rem; max-width: 300px; line-height: 1.7; }
.accordion-custom .accordion-item { background: var(--glass-bg); border: 1px solid var(--glass-border) !important; border-radius: var(--radius-md) !important; margin-bottom: 14px; overflow: hidden; transition: border-color .3s ease, box-shadow .3s ease; }
.accordion-custom .accordion-item:has(.accordion-button:not(.collapsed)) { border-color: rgba(0,212,255,0.4) !important; box-shadow: 0 0 24px rgba(0,212,255,0.08); }
.accordion-custom .accordion-button { background: transparent; color: var(--text-strong); font-weight: 600; font-size: 0.98rem; padding: 18px 20px; box-shadow: none; border: none; }
.accordion-custom .accordion-button::after { background-image: none; content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; width: auto; height: auto; font-size: 0.75rem; color: var(--primary); }
.accordion-custom .accordion-button:not(.collapsed)::after { content: '\f077'; color: var(--primary); }
.accordion-custom .accordion-button:focus { box-shadow: none; border-color: rgba(0,212,255,0.4); }
.accordion-custom .accordion-body { color: var(--text-body); font-size: 0.88rem; padding: 0 20px 18px; line-height: 1.7; }
/* ---------- Footer ---------- */
.site-footer { background: #08111F; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 64px; }
.site-footer .footer-logo { font-size: 1.45rem; font-weight: 800; color: var(--text-strong); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.site-footer .footer-logo .brand-badge { margin-left: 0; }
.site-footer .footer-desc { color: var(--text-muted); font-size: 0.88rem; max-width: 320px; line-height: 1.7; margin-bottom: 24px; }
.site-footer h6 { color: var(--text-strong); font-size: 0.95rem; font-weight: 700; margin-bottom: 18px; }
.site-footer .footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer .footer-links a { color: var(--text-muted); font-size: 0.88rem; transition: color .25s ease, padding-left .25s ease; }
.site-footer .footer-links a:hover { color: var(--primary); padding-left: 4px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.05); margin-top: 40px; padding: 22px 0; text-align: center; color: var(--text-muted); font-size: 0.82rem; }
.footer-bottom a { color: var(--text-muted); }
.footer-bottom .sep { margin: 0 8px; opacity: 0.4; }
/* ---------- Focus states ---------- */
a:focus-visible, button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
  .review-scroll { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991.98px) {
  .section-padding { padding: 64px 0; }
  .home-hero { height: auto; min-height: 0; padding: 120px 0 80px; }
  .phone-wrap { margin-top: 48px; }
  .mega-trigger { display: none !important; }
  .mega-panel { display: none; }
  .seed-grid { grid-template-columns: 1fr; }
  .seed-row:nth-child(odd) { border-right: none; }
  .seed-row:nth-child(n+6) { border-bottom: 1px solid rgba(255,255,255,0.05); }
  .seed-row:nth-child(8) { border-bottom: none; }
  .review-scroll { grid-template-columns: repeat(2, 1fr); }
  .news-item .news-thumb { width: 100px; height: 70px; }
}
@media (max-width: 767.98px) {
  .container-custom { padding-left: 16px; padding-right: 16px; }
  .hero-stats { gap: 20px; flex-wrap: wrap; }
  .hero-cta-group { flex-direction: column; align-items: flex-start; }
  .review-scroll { grid-template-columns: 1fr; }
  .news-item { flex-direction: row; padding: 12px; gap: 12px; }
  .news-item .news-thumb { width: 84px; height: 60px; border-radius: 10px; }
  .news-item .news-title { font-size: 0.92rem; }
  .seed-row { padding: 16px 14px; gap: 12px; }
  .seed-row .seed-num { font-size: 1.3rem; width: 30px; }
  .seed-row .seed-desc { white-space: normal; }
  .site-footer .footer-col { margin-bottom: 32px; }
}
@media (max-width: 575.98px) {
  .brand-text { font-size: 1.1rem; }
  .brand-badge { font-size: 0.6rem; }
  .brand-mark { width: 32px; height: 32px; }
  .home-hero { padding: 100px 0 60px; }
  .hero-title { font-size: 1.8rem; }
  .phone-frame { width: 260px; }
  .clip-card .clip-meta { gap: 6px; font-size: 0.7rem; }
}

/* roulang page: category1 */
:root {
            --bg-deep: #0B1426;
            --bg-section: #0F1D33;
            --primary: #00D4FF;
            --accent: #B8FF29;
            --text-strong: #E8F0FF;
            --text-body: #A7B6CF;
            --text-muted: #6C7D99;
            --glass-bg: rgba(255, 255, 255, 0.05);
            --glass-border: rgba(255, 255, 255, 0.10);
            --glass-highlight: rgba(255, 255, 255, 0.18);
            --radius-lg: 20px;
            --radius-md: 14px;
            --radius-sm: 8px;
            --shadow-glass: 0 10px 40px rgba(0, 0, 0, 0.35);
            --glow-cyan: 0 0 24px rgba(0, 212, 255, 0.35);
            --glow-lime: 0 0 28px rgba(184, 255, 41, 0.30);
            --font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
            --font-num: "Roboto Condensed", "DIN Alternate", tabular-nums;
        }
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        html {
            scroll-behavior: smooth;
            scroll-padding-top: 90px;
        }
        body {
            font-family: var(--font-family);
            background: var(--bg-deep);
            color: var(--text-body);
            line-height: 1.75;
            font-size: 0.95rem;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }
        a {
            color: var(--primary);
            text-decoration: none;
            transition: color .2s;
        }
        a:hover {
            color: #fff;
        }
        img {
            max-width: 100%;
            display: block;
        }
        .container-custom {
            max-width: 1280px;
            margin: 0 auto;
            padding-left: 24px;
            padding-right: 24px;
            width: 100%;
        }
        .btn {
            font-weight: 700;
            border-radius: var(--radius-sm);
            transition: transform .2s, box-shadow .2s, background .2s;
            font-size: 0.95rem;
        }
        .btn:focus,
        .btn:focus-visible,
        .btn-outline:focus,
        .btn-outline:focus-visible,
        .nav-link:focus,
        .nav-link:focus-visible,
        a:focus,
        a:focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: 2px;
        }
        .btn-accent {
            background: var(--accent);
            color: #0B1426;
            border-radius: var(--radius-sm);
            box-shadow: var(--glow-lime);
            border: none;
            padding: 12px 28px;
            transition: transform .2s, box-shadow .2s;
        }
        .btn-accent:hover {
            transform: translateY(-2px);
            background: #c9ff5e;
            color: #0B1426;
            box-shadow: 0 0 36px rgba(184, 255, 41, 0.45);
        }
        .btn-outline {
            background: var(--glass-bg);
            border: 1px solid var(--primary);
            color: var(--primary);
            border-radius: var(--radius-sm);
            padding: 12px 28px;
            backdrop-filter: blur(8px);
        }
        .btn-outline:hover {
            background: rgba(0, 212, 255, 0.12);
            color: #fff;
            box-shadow: var(--glow-cyan);
        }
        .section-pad {
            padding: 96px 0;
        }
        @media (max-width: 768px) {
            .section-pad {
                padding: 64px 0;
            }
            .container-custom {
                padding-left: 16px;
                padding-right: 16px;
            }
        }

        /* ===== Header ===== */
        .site-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1040;
            background: rgba(11, 20, 38, 0.82);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            transition: background .3s ease;
        }
        .site-header.scrolled {
            background: rgba(8, 14, 28, 0.95);
        }
        .site-header .navbar {
            min-height: 72px;
            padding: 0;
            gap: 24px;
        }
        .navbar-brand {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0;
            margin: 0;
            font-size: 1.1rem;
            font-weight: 800;
            color: var(--text-strong);
            white-space: nowrap;
        }
        .navbar-brand:hover {
            color: var(--text-strong);
        }
        .brand-mark {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--primary), #0077ff);
            box-shadow: var(--glow-cyan);
            flex-shrink: 0;
        }
        .brand-mark svg {
            width: 18px;
            height: 18px;
        }
        .brand-text {
            font-size: 1.15rem;
            letter-spacing: .02em;
            font-weight: 800;
        }
        .brand-badge {
            font-size: 0.65rem;
            font-weight: 700;
            padding: 2px 6px;
            border: 1px solid var(--accent);
            color: var(--accent);
            border-radius: 6px;
            line-height: 1.2;
            letter-spacing: .08em;
            background: rgba(184, 255, 41, 0.06);
        }
        .nav-links {
            gap: 8px;
            margin: 0 auto;
        }
        .nav-links .nav-link {
            padding: 10px 16px;
            border-radius: var(--radius-sm);
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--text-body);
            position: relative;
            transition: color .2s, background .2s;
        }
        .nav-links .nav-link:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.06);
        }
        .nav-links .nav-link.active {
            color: var(--primary);
            background: rgba(0, 212, 255, 0.08);
        }
        .nav-links .nav-link.active::after {
            content: "";
            position: absolute;
            left: 16px;
            right: 16px;
            bottom: 2px;
            height: 2px;
            background: var(--primary);
            box-shadow: var(--glow-cyan);
            border-radius: 2px;
        }
        .header-cta-group {
            gap: 12px;
            display: flex;
            align-items: center;
        }
        .mega-trigger {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            color: var(--text-strong);
            border-radius: var(--radius-sm);
            padding: 9px 18px;
            font-size: 0.9rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            backdrop-filter: blur(8px);
            transition: border-color .2s, box-shadow .2s, background .2s;
        }
        .mega-trigger:hover {
            border-color: var(--primary);
            box-shadow: var(--glow-cyan);
            background: rgba(0, 212, 255, 0.08);
        }
        .mega-trigger i {
            transition: transform .2s;
        }
        .mega-trigger.open i.fa-chevron-down {
            transform: rotate(180deg);
        }
        .navbar-toggler {
            border: none;
            background: var(--glass-bg);
            width: 46px;
            height: 46px;
            border-radius: var(--radius-sm);
            padding: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 5px;
            align-items: center;
            box-shadow: none;
        }
        .navbar-toggler .bar {
            width: 22px;
            height: 2px;
            background: var(--text-strong);
            border-radius: 2px;
            transition: transform .25s, opacity .25s;
        }
        .navbar-toggler.open .bar:nth-child(1) {
            transform: translateY(7px) rotate(45deg);
        }
        .navbar-toggler.open .bar:nth-child(2) {
            opacity: 0;
        }
        .navbar-toggler.open .bar:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg);
        }

        /* ===== Mega Panel ===== */
        .mega-panel {
            position: fixed;
            top: 72px;
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            width: min(720px, calc(100% - 32px));
            background: rgba(15, 29, 51, 0.95);
            backdrop-filter: blur(24px);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-glass);
            padding: 28px;
            opacity: 0;
            visibility: hidden;
            transition: opacity .25s ease, transform .25s ease, visibility .25s;
            z-index: 1035;
        }
        .mega-panel.open {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }
        .mega-panel h6 {
            color: var(--text-muted);
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 16px;
        }
        .mega-cat-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .mega-cat-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            border-radius: var(--radius-sm);
            color: var(--text-strong);
            font-size: 0.9rem;
            font-weight: 600;
            border-left: 2px solid transparent;
            transition: background .2s, border-color .2s, color .2s;
        }
        .mega-cat-item:hover {
            background: rgba(255, 255, 255, 0.04);
            border-left-color: var(--accent);
            color: #fff;
        }
        .mega-cat-item .icon-wrap {
            width: 30px;
            height: 30px;
            border-radius: 8px;
            background: rgba(0, 212, 255, 0.1);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-size: 0.9rem;
            flex-shrink: 0;
        }
        .mega-cat-item .arrow {
            margin-left: auto;
            font-size: 0.85rem;
            color: var(--text-muted);
            transition: transform .2s;
        }
        .mega-cat-item:hover .arrow {
            transform: translateX(4px);
            color: var(--primary);
        }
        .mega-news-item {
            display: flex;
            gap: 12px;
            padding: 8px 0;
            border-radius: var(--radius-sm);
            align-items: center;
            color: var(--text-strong);
        }
        .mega-news-item .news-thumb {
            width: 72px;
            height: 48px;
            border-radius: var(--radius-sm);
            overflow: hidden;
            background: #12233F;
            flex-shrink: 0;
        }
        .mega-news-item .news-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .3s;
        }
        .mega-news-item:hover .news-thumb img {
            transform: scale(1.05);
        }
        .mega-news-item .news-meta {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .mega-news-item .news-title {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-strong);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .mega-news-item .news-time {
            font-size: 0.75rem;
            color: var(--text-muted);
        }
        .mega-cta-card {
            background: linear-gradient(135deg, #0A1628 0%, #003856 60%, #005E7E 100%);
            border-radius: var(--radius-md);
            padding: 24px;
            height: 100%;
            display: flex;
            flex-direction: column;
            gap: 8px;
            border: 1px solid rgba(0, 212, 255, 0.2);
        }
        .mega-cta-card .cta-title {
            font-size: 1rem;
            font-weight: 800;
            color: #fff;
        }
        .mega-cta-card .cta-desc {
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.7);
        }
        .mega-cta-card .btn {
            margin-top: auto;
            align-self: flex-start;
        }
        @media (max-width: 991.98px) {
            .mega-panel {
                position: fixed;
                top: 72px;
                left: 16px;
                right: 16px;
                transform: translateY(10px);
                width: auto;
                max-height: calc(100vh - 90px);
                overflow-y: auto;
            }
            .mega-panel.open {
                transform: translateY(0);
            }
        }
        @media (max-width: 576px) {
            .mega-panel {
                padding: 20px;
            }
            .mega-panel .row>[class^="col-"] {
                margin-bottom: 16px;
            }
        }

        /* ===== Mobile Menu ===== */
        .mobile-menu {
            display: none;
            background: rgba(8, 14, 28, 0.98);
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            padding: 12px 16px 20px;
            flex-direction: column;
            gap: 4px;
        }
        .mobile-menu.open {
            display: flex;
        }
        .mobile-menu .mobile-link {
            padding: 14px 12px;
            border-radius: var(--radius-sm);
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-body);
            display: flex;
            align-items: center;
            gap: 10px;
            border-left: 2px solid transparent;
        }
        .mobile-menu .mobile-link:hover {
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
        }
        .mobile-menu .mobile-link.active {
            border-left-color: var(--primary);
            color: var(--primary);
            background: rgba(0, 212, 255, 0.06);
        }
        .mobile-menu .mobile-cta-row {
            display: flex;
            gap: 10px;
            margin-top: 12px;
            padding: 0 12px;
        }

        /* ===== Category Hero ===== */
        .category-hero {
            position: relative;
            min-height: 40vh;
            padding: 150px 0 80px;
            background: var(--bg-deep);
            display: flex;
            align-items: center;
            overflow: hidden;
        }
        .category-hero .hero-bg {
            position: absolute;
            inset: 0;
            background-image: url('/assets/images/backpic/back-1.png');
            background-size: cover;
            background-position: center;
            opacity: 0.55;
        }
        .category-hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(115deg, rgba(11, 20, 38, 0.96) 30%, rgba(11, 20, 38, 0.78) 60%, rgba(11, 20, 38, 0.55) 100%);
        }
        .category-hero::after {
            content: "";
            position: absolute;
            inset: 0;
            background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
            background-size: 40px 40px;
            pointer-events: none;
        }
        .category-hero .hero-content {
            position: relative;
            z-index: 2;
        }
        .category-hero .hero-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            color: var(--primary);
            border: 1px solid rgba(0, 212, 255, 0.4);
            padding: 6px 14px;
            border-radius: 999px;
            text-transform: uppercase;
            background: rgba(0, 212, 255, 0.06);
            margin-bottom: 20px;
        }
        .category-hero h1 {
            font-size: clamp(1.8rem, 4vw, 2.6rem);
            font-weight: 800;
            color: var(--text-strong);
            line-height: 1.25;
            margin-bottom: 16px;
        }
        .category-hero h1 .highlight {
            color: var(--primary);
        }
        .category-hero .hero-sub {
            font-size: 1rem;
            color: var(--text-body);
            max-width: 560px;
            margin-bottom: 28px;
            line-height: 1.8;
        }
        .category-hero .hero-actions {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
        }
        @media (max-width: 768px) {
            .category-hero {
                padding: 120px 0 56px;
                min-height: auto;
            }
            .category-hero .hero-actions .btn {
                width: 100%;
            }
        }

        /* ===== Section Title ===== */
        .section-head {
            margin-bottom: 40px;
        }
        .section-head .section-en {
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--primary);
            display: block;
            margin-bottom: 4px;
        }
        .section-head h2 {
            font-size: clamp(1.3rem, 2.4vw, 1.75rem);
            font-weight: 700;
            color: var(--text-strong);
            margin-bottom: 8px;
            line-height: 1.3;
        }
        .section-head p {
            color: var(--text-muted);
            font-size: 0.9rem;
            max-width: 640px;
        }
        .section-head.center {
            text-align: center;
        }
        .section-head.center p {
            margin-left: auto;
            margin-right: auto;
        }

        /* ===== Entry Grid ===== */
        .entry-grid-section {
            background: var(--bg-section);
            padding: 96px 0;
            position: relative;
        }
        .entry-grid-section::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 40px 40px;
            pointer-events: none;
        }
        .entry-grid-section .container-custom {
            position: relative;
            z-index: 1;
        }
        .entry-card {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            border-radius: var(--radius-lg);
            overflow: hidden;
            display: block;
            color: var(--text-strong);
            box-shadow: var(--shadow-glass);
            transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
            height: 100%;
        }
        .entry-card:hover {
            transform: translateY(-4px);
            border-color: rgba(0, 212, 255, 0.30);
            box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45);
            color: var(--text-strong);
        }
        .entry-card .card-img-wrap {
            position: relative;
            overflow: hidden;
            aspect-ratio: 16 / 9;
            background: #12233F;
        }
        .entry-card .card-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .4s ease;
        }
        .entry-card:hover .card-img-wrap img {
            transform: scale(1.05);
        }
        .entry-card .card-body {
            padding: 18px 18px 20px;
        }
        .entry-card .card-title {
            font-size: 1rem;
            font-weight: 800;
            color: var(--text-strong);
            margin-bottom: 6px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .entry-card .card-desc {
            font-size: 0.85rem;
            color: var(--text-body);
            line-height: 1.6;
            margin-bottom: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .entry-card .card-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.75rem;
            color: var(--text-muted);
        }
        .entry-card .card-meta .badge-tag {
            background: rgba(0, 212, 255, 0.12);
            color: var(--primary);
            border-radius: 6px;
            padding: 3px 8px;
            font-weight: 600;
            font-size: 0.7rem;
        }
        .entry-card .score-badge {
            position: absolute;
            top: 12px;
            right: 12px;
            background: rgba(5, 15, 30, 0.85);
            border: 1px solid rgba(184, 255, 41, 0.4);
            color: var(--accent);
            font-family: var(--font-num);
            font-size: 0.75rem;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 8px;
            backdrop-filter: blur(4px);
        }
        @media (max-width: 991.98px) {
            .entry-grid-section {
                padding: 72px 0;
            }
        }
        @media (max-width: 767.98px) {
            .entry-grid-section {
                padding: 56px 0;
            }
        }

        /* ===== Classification Note ===== */
        .classification-note {
            background: transparent;
            padding: 20px 0 0;
            text-align: center;
            color: var(--text-muted);
            font-size: 0.9rem;
            position: relative;
            z-index: 1;
        }
        .classification-note .note-inner {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.06);
            padding: 10px 24px;
            border-radius: 999px;
        }
        .classification-note i {
            color: var(--accent);
            font-size: 0.9rem;
        }

        /* ===== Advantage Section ===== */
        .advantage-section {
            background: var(--bg-deep);
            padding: 96px 0;
        }
        .advantage-card {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            border-radius: var(--radius-lg);
            padding: 28px 24px;
            height: 100%;
            display: flex;
            flex-direction: column;
            gap: 10px;
            transition: border-color .25s, box-shadow .25s, transform .25s;
        }
        .advantage-card:hover {
            border-color: rgba(0, 212, 255, 0.35);
            box-shadow: var(--glow-cyan);
            transform: translateY(-3px);
        }
        .advantage-card .icon-box {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            background: rgba(0, 212, 255, 0.1);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            color: var(--primary);
            margin-bottom: 4px;
        }
        .advantage-card h3 {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--text-strong);
            margin-bottom: 0;
        }
        .advantage-card p {
            font-size: 0.85rem;
            color: var(--text-muted);
            line-height: 1.65;
            margin-bottom: 0;
        }
        @media (max-width: 767.98px) {
            .advantage-section {
                padding: 64px 0;
            }
            .advantage-card {
                padding: 22px 18px;
            }
        }

        /* ===== Steps Section ===== */
        .steps-section {
            background: var(--bg-section);
            padding: 96px 0;
            position: relative;
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
        }
        .steps-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }
        .step-card {
            position: relative;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: var(--radius-lg);
            padding: 36px 26px 28px;
            text-align: center;
            transition: border-color .25s, transform .25s;
        }
        .step-card:hover {
            border-color: rgba(0, 212, 255, 0.3);
            transform: translateY(-4px);
        }
        .step-card .step-num {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: rgba(184, 255, 41, 0.1);
            border: 1px solid rgba(184, 255, 41, 0.4);
            color: var(--accent);
            font-family: var(--font-num);
            font-weight: 800;
            font-size: 1.1rem;
            margin-bottom: 18px;
        }
        .step-card h3 {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-strong);
            margin-bottom: 8px;
        }
        .step-card p {
            font-size: 0.85rem;
            color: var(--text-muted);
            line-height: 1.6;
            margin-bottom: 0;
        }
        .step-arrow {
            position: absolute;
            right: -18px;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(0, 212, 255, 0.35);
            font-size: 1.2rem;
            z-index: 2;
        }
        @media (max-width: 767.98px) {
            .steps-section {
                padding: 64px 0 80px;
            }
            .steps-grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }
            .step-arrow {
                display: none;
            }
        }

        /* ===== Reviews Section ===== */
        .reviews-section {
            background: var(--bg-deep);
            padding: 96px 0;
        }
        .review-card {
            background: var(--glass-bg);
            border-left: 2px solid var(--accent);
            border-radius: var(--radius-md);
            padding: 20px;
            height: 100%;
            display: flex;
            flex-direction: column;
            gap: 10px;
            transition: box-shadow .25s;
        }
        .review-card:hover {
            box-shadow: var(--shadow-glass);
        }
        .review-card .review-head {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .review-card .avatar {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary), #0066cc);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 0.8rem;
            font-weight: 700;
            flex-shrink: 0;
        }
        .review-card .reviewer-name {
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--text-strong);
            line-height: 1.2;
        }
        .review-card .review-time {
            font-size: 0.72rem;
            color: var(--text-muted);
        }
        .review-card .stars {
            color: var(--primary);
            font-size: 0.8rem;
            letter-spacing: 2px;
        }
        .review-card .review-text {
            font-size: 0.85rem;
            color: var(--text-body);
            line-height: 1.6;
            margin-bottom: 0;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        @media (max-width: 767.98px) {
            .reviews-section {
                padding: 64px 0;
            }
            .reviews-row {
                flex-wrap: nowrap;
                overflow-x: auto;
                padding-bottom: 12px;
                margin-left: -16px;
                margin-right: -16px;
                padding-left: 16px;
                padding-right: 16px;
                scroll-snap-type: x mandatory;
            }
            .reviews-row .col-md-3 {
                flex: 0 0 82%;
                scroll-snap-align: start;
            }
        }

        /* ===== FAQ Section ===== */
        .faq-section {
            background: var(--bg-section);
            padding: 96px 0;
        }
        .faq-section .faq-layout {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 48px;
        }
        .faq-left .faq-title {
            font-size: 1.75rem;
            color: var(--text-strong);
            font-weight: 700;
            margin-bottom: 12px;
        }
        .faq-left .faq-sub {
            font-size: 0.9rem;
            color: var(--text-muted);
            max-width: 280px;
        }
        .accordion-item {
            background: var(--glass-bg);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-md);
            margin-bottom: 12px;
            overflow: hidden;
            transition: border-color .25s;
        }
        .accordion-item:has(.accordion-button:not(.collapsed)) {
            border-color: rgba(0, 212, 255, 0.4);
            box-shadow: var(--glow-cyan);
        }
        .accordion-button {
            background: transparent;
            color: var(--text-strong);
            font-weight: 600;
            font-size: 0.95rem;
            padding: 16px 20px;
            box-shadow: none;
            border: none;
        }
        .accordion-button::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300D4FF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
            background-size: 1rem;
        }
        .accordion-button:focus {
            box-shadow: none;
            border-color: transparent;
        }
        .accordion-button:not(.collapsed) {
            background: rgba(0, 212, 255, 0.08);
            color: var(--primary);
        }
        .accordion-body {
            padding: 0 20px 18px;
            color: var(--text-body);
            font-size: 0.88rem;
            line-height: 1.75;
            background: transparent;
        }
        @media (max-width: 991.98px) {
            .faq-layout {
                grid-template-columns: 1fr !important;
                gap: 32px !important;
            }
            .faq-left .faq-sub {
                max-width: 100%;
            }
        }
        @media (max-width: 767.98px) {
            .faq-section {
                padding: 64px 0;
            }
        }

        /* ===== CTA Section ===== */
        .cta-section {
            background: var(--bg-deep);
            padding: 80px 0;
            position: relative;
            overflow: hidden;
        }
        .cta-section::before {
            content: "";
            position: absolute;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background: rgba(0, 212, 255, 0.14);
            filter: blur(80px);
            top: -100px;
            right: -80px;
            pointer-events: none;
        }
        .cta-section::after {
            content: "";
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: rgba(184, 255, 41, 0.08);
            filter: blur(70px);
            bottom: -100px;
            left: -60px;
            pointer-events: none;
        }
        .cta-inner {
            position: relative;
            z-index: 1;
            text-align: center;
            max-width: 760px;
            margin: 0 auto;
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            border-radius: var(--radius-lg);
            padding: 56px 40px;
            box-shadow: var(--shadow-glass);
        }
        .cta-inner h2 {
            font-size: clamp(1.3rem, 2.6vw, 1.8rem);
            font-weight: 800;
            color: var(--text-strong);
            margin-bottom: 12px;
        }
        .cta-inner h2 .highlight {
            color: var(--accent);
        }
        .cta-inner p {
            color: var(--text-muted);
            font-size: 0.9rem;
            margin-bottom: 28px;
        }
        .cta-inner .btn-accent {
            animation: glowPulse 2.5s infinite;
        }
        @keyframes glowPulse {
            0%,
            100% {
                box-shadow: 0 0 20px rgba(184, 255, 41, 0.3);
            }
            50% {
                box-shadow: 0 0 36px rgba(184, 255, 41, 0.5);
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .cta-inner .btn-accent {
                animation: none;
            }
        }
        @media (max-width: 767.98px) {
            .cta-section {
                padding: 56px 0;
            }
            .cta-inner {
                padding: 40px 20px;
            }
        }

        /* ===== Footer ===== */
        .site-footer {
            background: #070D1A;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            padding: 64px 0 0;
        }
        .footer-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
        }
        .footer-logo .brand-mark {
            width: 36px;
            height: 36px;
        }
        .footer-logo .brand-text {
            font-size: 1.2rem;
            font-weight: 800;
            color: var(--text-strong);
        }
        .footer-logo .brand-badge {
            font-size: 0.7rem;
            font-weight: 700;
            padding: 2px 8px;
            border: 1px solid var(--accent);
            color: var(--accent);
            border-radius: 6px;
        }
        .footer-desc {
            color: var(--text-muted);
            font-size: 0.88rem;
            line-height: 1.7;
            max-width: 320px;
            margin-bottom: 24px;
        }
        .footer-col h6 {
            color: var(--text-strong);
            font-size: 0.95rem;
            font-weight: 700;
            margin-bottom: 16px;
        }
        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .footer-links li a {
            color: var(--text-muted);
            font-size: 0.88rem;
            transition: color .2s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .footer-links li a:hover {
            color: var(--primary);
        }
        .footer-links li .text-muted {
            color: var(--text-muted);
            font-size: 0.88rem;
        }
        .footer-bottom {
            margin-top: 48px;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            padding: 20px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            font-size: 0.82rem;
            color: var(--text-muted);
        }
        .footer-bottom a {
            color: var(--text-muted);
            transition: color .2s;
        }
        .footer-bottom a:hover {
            color: var(--primary);
        }
        .footer-bottom .sep {
            opacity: 0.5;
        }
        @media (max-width: 767.98px) {
            .site-footer {
                padding-top: 48px;
            }
            .footer-bottom {
                flex-direction: column;
                gap: 6px;
                text-align: center;
            }
            .footer-bottom .sep {
                display: none;
            }
        }

        /* ===== Page Cover decorative stripes ===== */
        .speed-stripes {
            position: absolute;
            right: 0;
            top: 0;
            width: 40%;
            height: 100%;
            background: linear-gradient(135deg,
                    transparent 0%,
                    rgba(0, 212, 255, 0.06) 20%,
                    transparent 40%,
                    rgba(0, 212, 255, 0.05) 60%,
                    transparent 80%);
            pointer-events: none;
            transform: skewX(-4deg);
        }
        @media (max-width: 768px) {
            .speed-stripes {
                width: 60%;
            }
        }

        /* ===== Miscellaneous ===== */
        .text-accent {
            color: var(--accent) !important;
        }
        .text-primary-cyan {
            color: var(--primary) !important;
        }
        .bg-section {
            background: var(--bg-section) !important;
        }
        .font-num {
            font-family: var(--font-num);
        }

/* roulang page: article */
:root {
            --bg-deep: #0B1426;
            --bg-section: #0F1D33;
            --primary: #00D4FF;
            --accent: #B8FF29;
            --text-strong: #E8F0FF;
            --text-body: #A7B6CF;
            --text-muted: #6C7D99;
            --glass-bg: rgba(255, 255, 255, 0.05);
            --glass-border: rgba(255, 255, 255, 0.10);
            --glass-highlight: rgba(255, 255, 255, 0.18);
            --radius-lg: 20px;
            --radius-md: 14px;
            --radius-sm: 8px;
            --shadow-glass: 0 10px 40px rgba(0, 0, 0, 0.35);
            --glow-cyan: 0 0 24px rgba(0, 212, 255, 0.35);
            --glow-lime: 0 0 28px rgba(184, 255, 41, 0.30);
            --bs-body-bg: #0B1426;
            --bs-body-color: #A7B6CF;
            --bs-link-color: #00D4FF;
            --bs-link-hover-color: #66E4FF;
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            background-color: var(--bg-deep);
            color: var(--text-body);
            font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
            font-size: 1rem;
            line-height: 1.75;
            padding-top: 72px;
            overflow-x: hidden;
        }

        /* ---- Container ---- */
        body .container {
            max-width: 1280px;
            padding-left: 24px;
            padding-right: 24px;
        }
        @media (max-width: 768px) {
            body .container {
                padding-left: 16px;
                padding-right: 16px;
            }
        }

        /* ---- 基础元素 ---- */
        a {
            text-decoration: none;
            color: var(--primary);
            transition: color .2s;
        }
        a:hover {
            color: #66E4FF;
        }
        img {
            max-width: 100%;
            height: auto;
        }
        button {
            border: none;
            background: none;
            cursor: pointer;
        }
        :focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: 2px;
        }

        /* ---- Header / Navbar ---- */
        .site-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1050;
            height: 72px;
            background: rgba(11, 20, 38, 0.82);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            transition: background .3s, box-shadow .3s;
        }
        .site-header.scrolled {
            background: rgba(8, 14, 28, 0.95);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
        }
        .site-header .navbar {
            height: 72px;
            padding: 0;
            gap: 12px;
        }

        .brand-mark {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.9), rgba(0, 100, 255, 0.6));
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 8px;
            box-shadow: var(--glow-cyan);
            flex-shrink: 0;
        }
        .brand-mark svg {
            width: 20px;
            height: 20px;
        }
        .brand-text {
            color: #fff;
            font-size: 1.35rem;
            font-weight: 800;
            letter-spacing: 0.01em;
            line-height: 1;
        }
        .brand-badge {
            margin-left: 6px;
            background: transparent;
            border: 1px solid var(--accent);
            color: var(--accent);
            font-size: 0.7rem;
            font-weight: 600;
            padding: 2px 7px;
            border-radius: 6px;
            letter-spacing: 0.06em;
            line-height: 1.2;
        }

        .nav-links {
            gap: 4px;
            margin: 0 auto;
            padding-left: 36px;
        }
        .nav-links .nav-link {
            color: var(--text-body) !important;
            font-size: 0.95rem;
            font-weight: 500;
            padding: 10px 18px !important;
            border-radius: var(--radius-sm);
            position: relative;
            transition: all .2s;
        }
        .nav-links .nav-link:hover {
            color: #fff !important;
            background: rgba(255, 255, 255, 0.06);
        }
        .nav-links .nav-link.active {
            color: var(--primary) !important;
        }
        .nav-links .nav-link.active::after {
            content: '';
            position: absolute;
            left: 16px;
            right: 16px;
            bottom: 4px;
            height: 2px;
            background: var(--primary);
            box-shadow: var(--glow-cyan);
            border-radius: 2px;
        }

        .mega-trigger {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            border-radius: var(--radius-sm);
            color: var(--text-strong);
            font-size: 0.92rem;
            font-weight: 600;
            padding: 10px 20px;
            transition: all .2s;
            white-space: nowrap;
        }
        .mega-trigger:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(0, 212, 255, 0.4);
            color: #fff;
            box-shadow: var(--glow-cyan);
        }

        .navbar-toggler {
            width: 44px;
            height: 44px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
            padding: 0;
            border: 1px solid var(--glass-border);
            border-radius: 10px;
            background: var(--glass-bg);
        }
        .navbar-toggler .bar {
            display: block;
            width: 20px;
            height: 2px;
            background: var(--text-strong);
            border-radius: 2px;
            transition: all .3s;
        }
        .navbar-toggler[aria-expanded="true"] .bar:nth-child(1) {
            transform: translateY(7px) rotate(45deg);
        }
        .navbar-toggler[aria-expanded="true"] .bar:nth-child(2) {
            opacity: 0;
        }
        .navbar-toggler[aria-expanded="true"] .bar:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg);
        }

        /* ---- Mega Panel ---- */
        .mega-panel {
            position: absolute;
            top: 72px;
            left: 0;
            right: 0;
            background: rgba(8, 14, 28, 0.92);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border-bottom: 1px solid var(--glass-border);
            box-shadow: var(--shadow-glass);
            padding: 32px 0;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-12px);
            transition: all .3s ease;
            z-index: 1049;
            pointer-events: none;
        }
        .mega-panel.open {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            pointer-events: auto;
        }
        .mega-panel h6 {
            color: var(--text-muted);
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            margin-bottom: 16px;
        }

        .mega-cat-list {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .mega-cat-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 14px;
            border-radius: 10px;
            color: var(--text-body);
            font-size: 0.92rem;
            transition: all .2s;
            position: relative;
        }
        .mega-cat-item:hover {
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
        }
        .mega-cat-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 10px;
            bottom: 10px;
            width: 2px;
            background: var(--accent);
            border-radius: 2px;
            opacity: 0;
            transition: opacity .2s;
        }
        .mega-cat-item:hover::before {
            opacity: 1;
        }
        .mega-cat-item .icon-wrap {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: rgba(0, 212, 255, 0.12);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-size: 0.85rem;
            flex-shrink: 0;
        }
        .mega-cat-item .arrow {
            margin-left: auto;
            color: var(--text-muted);
            font-size: 0.8rem;
            transition: all .2s;
        }
        .mega-cat-item:hover .arrow {
            transform: translateX(4px);
            color: var(--accent);
        }

        .mega-news-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .mega-news-item {
            display: flex;
            gap: 14px;
            padding: 10px;
            border-radius: 12px;
            transition: background .2s;
        }
        .mega-news-item:hover {
            background: rgba(255, 255, 255, 0.05);
        }
        .mega-news-item .thumb {
            width: 70px;
            height: 52px;
            border-radius: 8px;
            overflow: hidden;
            background: #12233F;
            flex-shrink: 0;
        }
        .mega-news-item .thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .3s;
        }
        .mega-news-item:hover .thumb img {
            transform: scale(1.06);
        }
        .mega-news-item .info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-width: 0;
        }
        .mega-news-item .title {
            color: var(--text-strong);
            font-size: 0.88rem;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }
        .mega-news-item .time {
            color: var(--text-muted);
            font-size: 0.75rem;
            margin-top: 4px;
        }

        .mega-feature {
            position: relative;
            overflow: hidden;
            border-radius: 16px;
            min-height: 150px;
            padding: 24px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            background: url('/assets/images/backpic/back-1.png') center/cover no-repeat;
        }
        .mega-feature::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(11, 20, 38, 0.2), rgba(11, 20, 38, 0.9));
            border-radius: 16px;
        }
        .mega-feature>* {
            position: relative;
            z-index: 1;
        }
        .feature-label {
            color: var(--primary);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }
        .feature-title {
            color: #fff;
            font-size: 1.1rem;
            font-weight: 800;
            margin-top: 4px;
        }
        .btn-feature {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            background: var(--accent);
            color: #0B1426;
            font-weight: 700;
            font-size: 0.85rem;
            padding: 8px 16px;
            border-radius: 8px;
            margin-top: 12px;
            transition: all .2s;
            width: fit-content;
        }
        .btn-feature:hover {
            box-shadow: var(--glow-lime);
            color: #0B1426;
            transform: translateY(-2px);
        }

        /* ---- 面包屑 ---- */
        .breadcrumb-area {
            padding: 30px 0 20px;
            background: transparent;
        }
        .breadcrumb-area .breadcrumb {
            background: transparent;
            margin: 0;
            padding: 0;
            font-size: 0.85rem;
        }
        .breadcrumb-area .breadcrumb-item+.breadcrumb-item::before {
            content: '/';
            color: var(--text-muted);
        }
        .breadcrumb-area .breadcrumb-item a {
            color: var(--text-muted);
        }
        .breadcrumb-area .breadcrumb-item a:hover {
            color: var(--primary);
        }
        .breadcrumb-area .breadcrumb-item.active {
            color: #fff;
        }

        /* ---- 文章标题区 ---- */
        .article-head {
            padding: 40px 0 24px;
        }
        .article-head-inner {
            max-width: 860px;
            margin: 0 auto;
            text-align: center;
            position: relative;
        }
        .score-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(11, 20, 38, 0.9);
            border: 1px solid rgba(184, 255, 41, 0.35);
            border-radius: 10px;
            padding: 8px 16px;
            font-family: "Roboto Condensed", "DIN Alternate", tabular-nums;
            font-size: 0.88rem;
            color: var(--accent);
            margin-bottom: 20px;
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
        }
        .score-badge i {
            font-size: 0.85rem;
        }
        .article-head h1 {
            color: var(--text-strong);
            font-size: clamp(1.6rem, 3vw, 2.35rem);
            font-weight: 800;
            line-height: 1.3;
            margin-bottom: 20px;
        }
        .article-meta {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 20px;
            color: var(--text-muted);
            font-size: 0.85rem;
        }
        .article-meta span {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        /* ---- 正文区 ---- */
        .article-body-wrap {
            padding: 12px 0 64px;
        }
        .article-content {
            max-width: 860px;
            margin: 0 auto;
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            border-radius: var(--radius-lg);
            padding: 48px;
            box-shadow: var(--shadow-glass);
        }
        .article-content p {
            color: var(--text-body);
            font-size: 1rem;
            line-height: 1.8;
            margin-bottom: 1.5em;
        }
        .article-content h2 {
            color: var(--text-strong);
            font-size: 1.5rem;
            font-weight: 700;
            margin: 48px 0 16px;
            line-height: 1.4;
        }
        .article-content h3 {
            color: var(--text-strong);
            font-size: 1.2rem;
            font-weight: 700;
            margin: 36px 0 12px;
        }
        .article-content img {
            border-radius: 16px;
            box-shadow: var(--shadow-glass);
            margin: 24px 0;
        }
        .article-content blockquote {
            border-left: 4px solid var(--accent);
            background: rgba(255, 255, 255, 0.04);
            padding: 16px 22px;
            border-radius: 0 14px 14px 0;
            color: var(--text-body);
            margin: 24px 0;
        }
        .article-content ul,
        .article-content ol {
            padding-left: 24px;
            margin: 16px 0;
            line-height: 1.7;
        }
        .article-content li {
            margin-bottom: 6px;
        }
        .article-content a {
            color: var(--primary);
            border-bottom: 1px solid rgba(0, 212, 255, 0.3);
        }
        .article-content a:hover {
            color: #66E4FF;
            border-color: rgba(102, 228, 255, 0.6);
        }

        .article-empty {
            text-align: center;
            padding: 60px 24px;
        }
        .article-empty .empty-icon {
            width: 72px;
            height: 72px;
            border-radius: 18px;
            background: rgba(0, 212, 255, 0.08);
            border: 1px solid var(--glass-border);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            color: var(--primary);
            margin-bottom: 20px;
        }
        .article-empty h2 {
            color: var(--text-strong);
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 12px;
        }
        .article-empty p {
            color: var(--text-muted);
            font-size: 0.92rem;
            margin-bottom: 24px;
        }
        .btn-outline-cyan {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: transparent;
            border: 1px solid var(--primary);
            color: var(--primary);
            font-size: 0.92rem;
            font-weight: 600;
            padding: 10px 24px;
            border-radius: 10px;
            transition: all .2s;
        }
        .btn-outline-cyan:hover {
            background: rgba(0, 212, 255, 0.1);
            color: #66E4FF;
            box-shadow: var(--glow-cyan);
        }

        /* ---- 相关推荐 ---- */
        .related-section {
            background: var(--bg-section);
            padding: 64px 0;
            position: relative;
        }
        .related-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
            background-size: 40px 40px;
            pointer-events: none;
        }
        .section-head {
            display: flex;
            align-items: baseline;
            gap: 12px;
            margin-bottom: 32px;
            flex-wrap: wrap;
        }
        .section-head h2 {
            color: var(--text-strong);
            font-size: clamp(1.3rem, 2vw, 1.75rem);
            font-weight: 800;
            margin: 0;
        }
        .section-head .section-sub {
            color: var(--text-muted);
            font-size: 0.8rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .related-card {
            display: block;
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            border-radius: var(--radius-lg);
            overflow: hidden;
            transition: all .3s;
            height: 100%;
            position: relative;
        }
        .related-card:hover {
            transform: translateY(-4px);
            border-color: rgba(0, 212, 255, 0.35);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
        }
        .related-card .cover-wrap {
            position: relative;
            aspect-ratio: 16/9;
            overflow: hidden;
            background: #12233F;
        }
        .related-card .cover-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .4s;
        }
        .related-card:hover .cover-wrap img {
            transform: scale(1.05);
        }
        .related-card .duration {
            position: absolute;
            right: 10px;
            bottom: 10px;
            background: rgba(11, 20, 38, 0.82);
            color: #fff;
            font-size: 0.75rem;
            padding: 3px 8px;
            border-radius: 6px;
            font-family: "Roboto Condensed", "DIN Alternate", tabular-nums;
            backdrop-filter: blur(4px);
        }
        .related-card .card-body {
            padding: 18px;
        }
        .related-card h3 {
            color: var(--text-strong);
            font-size: 0.98rem;
            font-weight: 700;
            margin-bottom: 10px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.5;
        }
        .related-card .card-meta {
            color: var(--text-muted);
            font-size: 0.8rem;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        /* ---- 返回按钮 ---- */
        .back-section {
            padding: 56px 0 60px;
            text-align: center;
        }
        .btn-glass {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            color: var(--text-strong);
            font-weight: 600;
            font-size: 0.92rem;
            padding: 12px 28px;
            border-radius: 12px;
            margin: 0 8px;
            transition: all .2s;
        }
        .btn-glass:hover {
            border-color: var(--primary);
            color: var(--primary);
            box-shadow: var(--glow-cyan);
            transform: translateY(-2px);
        }

        /* ---- FAQ ---- */
        .faq-section {
            padding: 64px 0;
            background: var(--bg-section);
            border-top: 1px solid rgba(255, 255, 255, 0.03);
        }
        .faq-section h2 {
            color: var(--text-strong);
            font-size: clamp(1.3rem, 2vw, 1.6rem);
            font-weight: 800;
            margin-bottom: 12px;
        }
        .faq-section .faq-desc {
            color: var(--text-muted);
            font-size: 0.92rem;
            max-width: 280px;
        }
        .accordion-item {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            border-radius: var(--radius-md) !important;
            margin-bottom: 14px;
            overflow: hidden;
        }
        .accordion-item:focus-within {
            border-color: var(--primary);
        }
        .accordion-button {
            background: transparent;
            color: var(--text-strong);
            font-weight: 600;
            font-size: 0.95rem;
            padding: 18px 22px;
            box-shadow: none;
            border: none;
        }
        .accordion-button:not(.collapsed) {
            background: rgba(0, 212, 255, 0.06);
            color: var(--primary);
            box-shadow: none;
        }
        .accordion-button:focus {
            box-shadow: none;
            border: none;
        }
        .accordion-button::after {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300D4FF'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
        }
        .accordion-body {
            background: transparent;
            color: var(--text-body);
            font-size: 0.92rem;
            line-height: 1.75;
            padding: 0 22px 20px;
        }

        /* ---- CTA ---- */
        .cta-section {
            padding: 64px 0 96px;
        }
        .cta-box {
            background: linear-gradient(135deg, #0F1D33 0%, #0B2A4A 55%, #0A4560 100%);
            border-radius: var(--radius-lg);
            padding: 64px 32px;
            text-align: center;
            border: 1px solid var(--glass-border);
            position: relative;
            overflow: hidden;
        }
        .cta-box::before {
            content: '';
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: rgba(0, 212, 255, 0.18);
            filter: blur(80px);
            top: -80px;
            right: -60px;
            pointer-events: none;
        }
        .cta-box::after {
            content: '';
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: rgba(184, 255, 41, 0.10);
            filter: blur(60px);
            bottom: -60px;
            left: -40px;
            pointer-events: none;
        }
        .cta-box>* {
            position: relative;
            z-index: 1;
        }
        .cta-box h2 {
            color: var(--text-strong);
            font-size: clamp(1.4rem, 2.6vw, 2rem);
            font-weight: 800;
            margin-bottom: 16px;
            line-height: 1.35;
        }
        .cta-box p {
            color: var(--text-body);
            max-width: 560px;
            margin: 0 auto 28px;
            font-size: 0.95rem;
        }
        .btn-accent {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: var(--accent);
            color: #0B1426;
            font-weight: 700;
            font-size: 1rem;
            padding: 14px 36px;
            border-radius: 12px;
            box-shadow: var(--glow-lime);
            transition: all .2s;
        }
        .btn-accent:hover {
            color: #0B1426;
            transform: translateY(-2px);
            box-shadow: 0 0 36px rgba(184, 255, 41, 0.45);
        }
        @media (prefers-reduced-motion: reduce) {
            .btn-accent {
                transition: none;
            }
        }

        /* ---- Footer ---- */
        .site-footer {
            background: #0A1020;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            padding: 64px 0 28px;
        }
        .footer-logo {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
        }
        .footer-desc {
            color: var(--text-muted);
            font-size: 0.9rem;
            max-width: 320px;
            line-height: 1.75;
            margin-bottom: 0;
        }
        .footer-col h6 {
            color: var(--text-strong);
            font-size: 0.95rem;
            font-weight: 700;
            margin-bottom: 16px;
        }
        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .footer-links a {
            color: var(--text-muted);
            font-size: 0.88rem;
            transition: all .2s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .footer-links a:hover {
            color: var(--primary);
        }
        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            margin-top: 48px;
            padding-top: 24px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            color: var(--text-muted);
            font-size: 0.82rem;
        }
        .footer-bottom .sep {
            color: rgba(255, 255, 255, 0.18);
        }
        .footer-bottom a {
            color: var(--text-muted);
        }
        .footer-bottom a:hover {
            color: var(--primary);
        }

        /* ---- 移动端 ---- */
        @media (max-width: 991.98px) {
            .nav-links {
                display: none !important;
                padding-left: 0;
            }
            .header-cta-group {
                display: none !important;
            }

            .site-header.mobile-open {
                height: auto;
                min-height: 72px;
            }
            .site-header.mobile-open .navbar {
                flex-wrap: wrap;
                height: auto;
                padding: 12px 0;
            }
            .site-header.mobile-open .nav-links {
                display: flex !important;
                flex-direction: column;
                width: 100%;
                padding: 16px 0 8px;
                margin: 0;
            }
            .site-header.mobile-open .nav-links .nav-link {
                padding: 12px 8px !important;
                border-radius: 10px;
            }
            .site-header.mobile-open .header-cta-group {
                display: flex !important;
                width: 100%;
                padding: 8px 0 12px;
            }
            .mega-trigger {
                width: 100%;
                justify-content: center;
            }

            .mega-panel {
                position: fixed;
                top: 72px;
                max-height: calc(100vh - 72px);
                overflow-y: auto;
            }

            .article-content {
                padding: 28px 20px;
            }

            .cta-box {
                padding: 48px 20px;
            }

            .back-section .btn-glass {
                margin-bottom: 10px;
            }
        }

        @media (max-width: 768px) {
            body {
                font-size: 0.95rem;
            }
            .article-head {
                padding-top: 24px;
            }
            .article-meta {
                gap: 12px;
                font-size: 0.8rem;
            }
            .related-section {
                padding: 48px 0;
            }
            .faq-section {
                padding: 48px 0;
            }
            .cta-section {
                padding: 48px 0 72px;
            }
            .site-footer {
                padding: 48px 0 24px;
            }
            .footer-bottom {
                margin-top: 32px;
                font-size: 0.78rem;
            }
        }

        @media (max-width: 520px) {
            .brand-text {
                font-size: 1.15rem;
            }
            .brand-badge {
                font-size: 0.62rem;
                padding: 1px 5px;
            }
            .article-content {
                padding: 20px 16px;
                border-radius: 16px;
            }
            .article-head h1 {
                font-size: 1.4rem;
            }
            .section-head {
                gap: 8px;
            }
            .related-card h3 {
                font-size: 0.9rem;
            }
            .cta-box h2 {
                font-size: 1.3rem;
            }
        }