/* roulang page: index */
/* ===== 设计变量 ===== */
:root {
    --brand: #6A4CFF;
    --brand-hover: #5638E0;
    --brand-light: #EEE8FF;
    --aqua: #06C1B0;
    --aqua-light: #E4FAF6;
    --orange: #FF7733;
    --orange-hover: #F0651F;
    --orange-light: #FFF1E8;
    --muted-deep: #17152E;
    --muted-deep-sub: #A8A3C3;
    --bg-page: #F6F5FB;
    --bg-white: #FFFFFF;
    --text-main: #211D38;
    --text-sub: #676180;
    --text-light: #8B86A5;
    --border: #E9E5F5;
    --red: #F04343;
    --green: #0CBB5A;
    --yellow: #FFB818;
    --gray: #CBC7E0;
    --radius-card: 16px;
    --radius-large: 24px;
    --radius-full: 999px;
    --shadow-base: 0 12px 30px rgba(30, 20, 90, 0.08);
    --shadow-hover: 0 18px 42px rgba(30, 20, 90, 0.14);
    --border-card: 1px solid #EEE9FB;
    --border-deep: 1px solid rgba(255, 255, 255, 0.12);
    --container-w: 1200px;
    --container-wide: 1400px;
    --gap-section-desktop: 88px;
    --gap-section-mobile: 56px;
    --nav-h-desktop: 68px;
    --bottom-tab-h: 58px;
    --font-main: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC", "Microsoft YaHei", system-ui, sans-serif;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --duration: 0.24s;
    --focus-ring: 0 0 0 3px rgba(106, 76, 255, 0.35);
}

/* ===== Reset 与基础 ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

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

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

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

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

input {
    font-family: inherit;
}

ul, ol {
    list-style: none;
}

/* Focus 可访问性 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* 容器 */
.container {
    width: 100%;
    max-width: var(--container-w);
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

.container-wide {
    width: 100%;
    max-width: var(--container-wide);
    margin-left: auto;
    margin-right: auto;
    padding-left: 30px;
    padding-right: 30px;
}

main {
    overflow: hidden;
}

/* ===== 顶部导航 ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    height: var(--nav-h-desktop);
}

.nav-wrap {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.logo-mark {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--brand) 20%, var(--aqua) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 20px;
    box-shadow: 0 6px 16px rgba(106, 76, 255, 0.28);
}

.logo-text {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--text-main);
    white-space: nowrap;
}

.logo-text .logo-accent {
    background: linear-gradient(90deg, var(--brand) 0%, var(--aqua) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-desktop {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-desktop a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 18px;
    border-radius: var(--radius-full);
    font-size: 15px;
    font-weight: 500;
    color: var(--text-sub);
    transition: background var(--duration) ease-out, color var(--duration) ease-out;
    white-space: nowrap;
}

.nav-desktop a:hover {
    color: var(--brand);
    background: var(--brand-light);
}

.nav-desktop a.active {
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 6px 14px rgba(106, 76, 255, 0.25);
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 24px;
    background: var(--orange);
    color: #fff !important;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 14px;
    transition: background var(--duration) ease-out, transform var(--duration) ease-out, box-shadow var(--duration) ease-out;
    box-shadow: 0 8px 18px rgba(255, 119, 51, 0.28);
    flex-shrink: 0;
}

.nav-cta:hover {
    background: var(--orange-hover);
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(255, 119, 51, 0.35);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* 移动端菜单按钮 */
.nav-toggle {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--bg-page);
    color: var(--text-main);
    display: none;
    align-items: center;
    justify-content: center;
    transition: background var(--duration) ease-out;
}

.nav-toggle:hover {
    background: var(--border);
}

/* 桌面导航相关 */
.mobile-nav-drawer {
    display: none;
}

/* ===== 移动端底部 Tab ===== */
.mobile-bottom-tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--bottom-tab-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    display: none;
    align-items: center;
    justify-content: space-around;
    z-index: 120;
    box-shadow: 0 -4px 20px rgba(30, 20, 90, 0.04);
}

.mobile-bottom-tabs a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 50px;
    padding: 0 12px;
    color: var(--text-sub);
    font-size: 11px;
    font-weight: 500;
    border-radius: 12px;
    transition: color 0.2s ease;
    min-width: 60px;
}

.mobile-bottom-tabs a svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.9;
    transition: all 0.2s ease;
}

.mobile-bottom-tabs a.active {
    color: var(--brand);
    font-weight: 700;
}

.mobile-bottom-tabs a.active svg {
    stroke-width: 2.2;
}

/* ===== Hero 首屏 ===== */
.hero-section {
    position: relative;
    background: linear-gradient(135deg, #1B1830 0%, #121022 88%);
    color: #fff;
    overflow: hidden;
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/assets/images/backpic/back-1.webp");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: 0.22;
    mix-blend-mode: screen;
}

.hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 72% 42%, rgba(106, 76, 255, 0.2) 0%, transparent 62%),
                radial-gradient(ellipse at 30% 90%, rgba(6, 193, 176, 0.14) 0%, transparent 42%);
    pointer-events: none;
}

.hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    padding-top: 64px;
    padding-bottom: 72px;
}

.hero-content {
    max-width: 548px;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(106, 76, 255, 0.2);
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #C9BFFF;
    margin-bottom: 22px;
    border: 1px solid rgba(106, 76, 255, 0.32);
}

.hero-eyebrow .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--aqua);
    box-shadow: 0 0 0 3px rgba(6, 193, 176, 0.3);
}

.hero-title {
    font-weight: 800;
    font-size: clamp(30px, 4.4vw, 50px);
    line-height: 1.28;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.hero-title .highlight {
    background: linear-gradient(100deg, #FFA25C 0%, #FF6D9F 55%, #8EE7E0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-sub {
    font-size: 17px;
    line-height: 1.75;
    color: #CFC9E3;
    margin-bottom: 28px;
    max-width: 500px;
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 30px;
}

.hero-stat {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-stat-icon {
    width: 34px;
    height: 34px;
    background: rgba(106, 76, 255, 0.3);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.hero-stat-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.hero-stat-title {
    font-size: 13px;
    color: #A8A3C3;
}

.hero-stat-value {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 15px;
    height: 50px;
    padding: 0 30px;
    transition: transform var(--duration) ease-out, box-shadow var(--duration) ease-out, background var(--duration) ease-out;
    white-space: nowrap;
    user-select: none;
}

.btn-primary {
    background: var(--orange);
    color: #fff;
    box-shadow: 0 8px 20px rgba(255, 119, 51, 0.3);
}

.btn-primary:hover {
    background: var(--orange-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 119, 51, 0.4);
}

.btn-secondary {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
}

.btn-light {
    background: #fff;
    color: var(--text-main);
}

.btn-light:hover {
    background: var(--brand-light);
    box-shadow: var(--shadow-hover);
}

.hero-visual {
    position: relative;
    flex-shrink: 0;
    width: 300px;
}

.phone-frame {
    position: relative;
    aspect-ratio: 9 / 16;
    background: #0D0B1C;
    border-radius: 34px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 32px 68px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    background-image: url("/assets/images/coverpic/cover-5.png");
    background-size: cover;
    background-position: center;
}

.phone-frame::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 126px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
}

.phone-frame-top {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 108px;
    height: 22px;
    background: rgba(23, 21, 46, 0.7);
    backdrop-filter: blur(6px);
    border-radius: 20px;
    z-index: 2;
}

.phone-play-btn {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.68);
    backdrop-filter: blur(6px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #17152E;
    box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
    font-size: 22px;
    padding-left: 5px;
}

.hero-visual-tags {
    position: absolute;
    right: 0;
    bottom: 30px;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    z-index: 3;
}

.hero-tag {
    background: rgba(23, 21, 46, 0.62);
    backdrop-filter: blur(8px);
    color: #fff;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.comment-bubble {
    position: absolute;
    background: #fff;
    border-radius: 14px;
    padding: 8px 16px;
    color: #211d38;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 3;
    animation: float 3.6s infinite ease-in-out;
}

.comment-bubble.bubble-1 {
    top: 20%;
    right: -30px;
    animation-delay: 0.2s;
}

.comment-bubble.bubble-2 {
    bottom: 24%;
    left: -42px;
    animation-delay: 1.6s;
}

.comment-bubble .bubble-text {
    display: block;
    font-size: 12px;
    font-weight: 500;
}

.comment-bubble .bubble-user {
    font-size: 11px;
    color: var(--aqua);
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ===== 区块头 ===== */
.section {
    padding-top: 76px;
    padding-bottom: 76px;
}

.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 32px;
}

.section-title-wrap {
    max-width: 70%;
}

.section-tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand);
    background: var(--brand-light);
    border-radius: 999px;
    padding: 5px 14px;
    margin-bottom: 8px;
}

.section-title {
    font-size: 30px;
    line-height: 1.35;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--text-main);
    margin-bottom: 8px;
}

.section-desc {
    color: var(--text-sub);
    font-size: 15px;
    line-height: 1.7;
    max-width: 560px;
}

.section-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    border-radius: 6px;
    transition: gap 0.2s ease;
}

.section-link:hover {
    color: var(--brand-hover);
    gap: 10px;
}

/* ===== 爆款片段横向滚动流 ===== */
.viral-scroll {
    padding: 20px 0 26px;
}

.scroll-row {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding: 8px 4px 18px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.scroll-row::-webkit-scrollbar {
    display: none;
}

.viral-card {
    flex: 0 0 230px;
    background: #fff;
    border: var(--border-card);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-base);
    transition: transform var(--duration) ease-out, box-shadow var(--duration) ease-out;
    scroll-snap-align: start;
}

.viral-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

.viral-card-cover {
    position: relative;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: #F0EEF7;
}

.viral-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--ease-out);
}

.viral-card:hover .viral-card-cover img {
    transform: scale(1.03);
}

.viral-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: linear-gradient(135deg, #FF5858, #F04343);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 4px 12px;
    box-shadow: 0 4px 12px rgba(255, 68, 68, 0.3);
    z-index: 2;
}

.viral-badge.new {
    background: linear-gradient(135deg, #FF7733, #FFA25C);
    box-shadow: 0 4px 12px rgba(255, 119, 51, 0.3);
}

.viral-badge.rank {
    background: linear-gradient(135deg, #6A4CFF, #8E6FFF);
    box-shadow: 0 4px 12px rgba(106, 76, 255, 0.3);
}

.viral-play {
    position: absolute;
    right: 12px;
    bottom: 32px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 2;
}

.viral-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
}

.viral-progress-inner {
    width: 40%;
    height: 100%;
    background: var(--orange);
}

.viral-card-info {
    padding: 14px 15px;
}

.viral-card-title {
    font-size: 15px;
    font-weight: 650;
    line-height: 1.45;
    color: var(--text-main);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 2px;
}

.viral-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-light);
    margin-top: 8px;
}

.viral-card-cat {
    background: var(--aqua-light);
    color: var(--aqua);
    border-radius: 999px;
    padding: 2px 10px;
    font-weight: 500;
    font-size: 12px;
}

/* ===== 种草清单 错落网格 ===== */
.plant-list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 240px;
    gap: 22px;
    margin-bottom: 10px;
}

.plant-card {
    position: relative;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--bg-white);
    border: var(--border-card);
    box-shadow: var(--shadow-base);
    transition: transform var(--duration) ease, box-shadow var(--duration) ease;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
}

.plant-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

.plant-card.plant-feature {
    grid-column: span 4;
    grid-row: span 2;
    flex-direction: row;
    align-items: stretch;
}

.plant-card.plant-half {
    grid-column: span 2;
    grid-row: span 2;
}

.plant-card.plant-small {
    grid-column: span 2;
    grid-row: span 1;
    flex-direction: row;
    align-items: stretch;
}

.plant-card.plant-small:nth-child(3) {
    grid-column: span 2;
    grid-row: span 1;
}

.plant-thumb {
    position: relative;
    overflow: hidden;
    flex: 0 0 40%;
}

.plant-feature .plant-thumb {
    flex: 0 0 54%;
}

.plant-small .plant-thumb {
    flex: 0 0 48%;
}

.plant-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    transition: transform 0.4s var(--ease-out);
}

.plant-card:hover .plant-thumb img {
    transform: scale(1.04);
}

.plant-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
    background: linear-gradient(180deg, transparent, rgba(20, 15, 50, 0.78) 70%);
    min-height: 0;
}

.plant-feature .plant-body {
    padding: 26px;
}

.plant-small .plant-body {
    padding: 14px 16px;
    background: var(--bg-white);
}

.plant-card:not(.plant-small) .plant-body {
    justify-content: flex-end;
}

.plant-body .plant-tag-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.plant-badge {
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(6px);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.plant-small .plant-badge {
    background: var(--brand-light);
    color: var(--brand);
    border: none;
}

.plant-card-link {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    z-index: 5;
    font-weight: 700;
    margin-top: auto;
}

.plant-card h3 {
    font-size: 19px;
    line-height: 1.45;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.plant-small h3 {
    font-size: 16px;
}

.plant-card p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-sub);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.plant-card:not(.plant-small) p {
    color: rgba(255, 255, 255, 0.85);
}

.plant-score {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-light);
    margin-top: 8px;
}

.plant-small .plant-thumb {
    position: relative;
    flex: 0 0 50%;
}

.plant-small {
    display: flex;
    flex-direction: row;
}

/* ===== 评论区弹幕流 ===== */
.comment-flow-section {
    background: linear-gradient(180deg, #17152E 0%, #1F1B35 100%);
    color: #fff;
}

.comment-flow-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.comment-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    width: 300px;
    padding: 22px 24px;
    backdrop-filter: blur(8px);
    transition: background 0.3s ease, transform 0.3s ease;
}

.comment-card:hover {
    background: rgba(255, 255, 255, 0.09);
    transform: translateY(-4px);
}

.comment-card-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 14px;
}

.comment-card-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 17px;
    background: linear-gradient(130deg, var(--brand), var(--aqua));
    color: #fff;
    flex-shrink: 0;
}

.comment-card-name {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
}

.comment-card-role {
    font-size: 12px;
    color: var(--muted-deep-sub);
}

.comment-card-text {
    font-size: 14px;
    line-height: 1.8;
    color: #D2CCEA;
    margin-bottom: 14px;
}

.comment-card-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--muted-deep-sub);
}

.star-rating {
    color: var(--yellow);
    font-size: 14px;
    letter-spacing: 2px;
}

/* ===== 最新信息列表 CMS ===== */
.latest-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.latest-item {
    background: var(--bg-white);
    border-radius: var(--radius-card);
    border: var(--border-card);
    box-shadow: var(--shadow-base);
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 22px 26px;
    transition: box-shadow var(--duration) ease, transform var(--duration) ease, border-color var(--duration) ease;
    position: relative;
}

.latest-item:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
    border-color: #D8D0F2;
}

.latest-item-index {
    width: 52px;
    text-align: center;
    flex-shrink: 0;
}

.latest-item-index span {
    font-weight: 800;
    font-size: 24px;
    background: linear-gradient(145deg, var(--brand), var(--aqua));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-variant-numeric: tabular-nums;
}

.latest-item-content {
    flex: 1;
    min-width: 0;
}

.latest-item-content h3 {
    font-size: 18px;
    font-weight: 650;
    margin-bottom: 6px;
    line-height: 1.45;
}

.latest-item-content h3 a:hover {
    color: var(--brand);
}

.latest-desc {
    font-size: 14px;
    color: var(--text-sub);
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
}

.latest-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 13px;
    color: var(--text-light);
}

.latest-meta .cat {
    background: var(--brand-light);
    color: var(--brand);
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
}

.latest-go {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: var(--brand-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    transition: background var(--duration) ease, transform var(--duration) ease;
}

.latest-item:hover .latest-go {
    background: var(--brand);
    color: #fff;
    transform: translateX(4px);
}

.empty-state {
    background: var(--bg-white);
    border: 1px dashed #C9C2E5;
    border-radius: var(--radius-card);
    padding: 54px 20px;
    text-align: center;
    color: var(--text-light);
    background-image: radial-gradient(#EFEBFB 1px, transparent 1px);
    background-size: 22px 22px;
}

.empty-state span {
    font-size: 16px;
    font-weight: 600;
}

/* ===== CTA 深色区块 ===== */
.cta-section {
    background: linear-gradient(120deg, #1C1940 0%, #220F45 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
    padding-top: 88px;
    padding-bottom: 88px;
}

.cta-section::before {
    content: "";
    position: absolute;
    top: -100px;
    right: 30%;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(106, 76, 255, 0.2);
    filter: blur(80px);
}

.cta-inner {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.cta-title {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.4;
    margin-bottom: 14px;
}

.cta-text {
    font-size: 16px;
    color: #C9C3DE;
    margin-bottom: 30px;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ===== FAQ 折叠面板 ===== */
.faq-list {
    max-width: 820px;
    margin: 0 auto;
}

.faq-item {
    background: var(--bg-white);
    border-radius: 16px;
    border: var(--border-card);
    box-shadow: 0 2px 10px rgba(30, 20, 90, 0.04);
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow var(--duration) ease-out, border-color var(--duration) ease-out;
}

.faq-item:has(summary[open]) {
    border-color: #D8CFFF;
    box-shadow: var(--shadow-base);
}

.faq-item summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.6;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

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

.faq-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--brand-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    font-size: 16px;
    line-height: 1;
    position: relative;
    transition: transform 0.25s ease, background 0.2s;
}

.faq-icon::after {
    content: "";
    width: 10px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}

.faq-icon::before {
    content: "";
    position: absolute;
    width: 2px;
    height: 10px;
    background: currentColor;
    border-radius: 1px;
    transition: opacity 0.2s;
}

.faq-item[open] .faq-icon {
    background: var(--brand);
    color: #fff;
}

.faq-item[open] .faq-icon::before {
    opacity: 0;
}

.faq-body {
    padding: 0 28px 22px 62px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-sub);
}

.faq-body h4 {
    color: var(--text-main);
    font-weight: 650;
    margin-top: 10px;
}

.faq-body p + p {
    margin-top: 10px;
}

.faq-body p a {
    color: var(--brand);
    text-decoration: underline;
}

/* ===== 页脚 ===== */
.site-footer {
    background: var(--muted-deep);
    color: #B9B5CB;
    padding: 64px 0 24px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-logo {
    font-size: 26px;
    color: #fff;
    font-weight: 800;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-desc {
    font-size: 14px;
    line-height: 1.85;
    color: #A8A3C3;
    max-width: 300px;
}

.footer-col-title {
    font-size: 15px;
    color: #fff;
    font-weight: 650;
    margin-bottom: 16px;
}

.footer-menu a {
    display: block;
    padding: 5px 0;
    color: #A8A3C3;
    font-size: 14px;
    transition: color 0.2s;
}

.footer-menu a:hover {
    color: var(--aqua);
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: #A8A3C3;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: #A8A3C3;
}

.footer-bottom a {
    color: #A8A3C3;
    text-decoration: underline;
}

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

.footer-legal {
    text-align: right;
}

/* ===== 通用卡片和标签 ===== */
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 13px;
    background: #F1EEFB;
    color: var(--text-sub);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
}

.tag:hover {
    background: var(--brand);
    color: white;
}

/* ===== Section 背景 ===== */
.section-aqua {
    background: #EFFBF8;
}

.section-purple {
    background: #F3F0FF;
}

.section-white {
    background: #fff;
}

/* ===== 主点击区块增补样式 ===== */
.hero-visual .phone-frame {
    background-image: url("/assets/images/coverpic/cover-5.png");
    background-size: cover;
    background-position: center;
}

.plant-card:nth-child(3) .plant-thumb,
.plant-card:nth-child(5) .plant-thumb,
.list-style-img {
    background-color: #f0edf9;
}

/* 配合卡片使用 */
.view-link {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    background: var(--brand-light);
    border-radius: 50%;
    color: var(--brand);
    font-size: 16px;
    transition: all .22s;
    margin-top: auto;
}

.view-link:hover {
    background: var(--brand);
    color: #fff;
    transform: translateX(3px);
}

/* number font helper */
.num-font {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* 首页 hero 评分条 */
.rate-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 6px;
}


/* ===== Mobile nav drawer 增强 ===== */
.mobile-drawer-menu {
    position: fixed;
    top: var(--nav-h-desktop);
    left: 0;
    right: 0;
    background: white;
    border-bottom: 1px solid var(--border);
    padding: 12px 16px 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 99;
    box-shadow: 0 18px 30px rgba(30, 20, 90, 0.1);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.18s ease;
}

.mobile-drawer-menu.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.mobile-drawer-menu a {
    display: block;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-main);
}

.mobile-drawer-menu a:hover {
    background: var(--bg-page);
    color: var(--brand);
}

/* 文章页需要的通用内容模块 */
.article-page {
    padding-top: 42px;
}

.article-panel {
    background: #fff;
    border-radius: var(--radius-large);
    max-width: 820px;
    margin: 0 auto 40px;
    padding: clamp(20px, 4vw, 42px);
}

.breadcrumb {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 16px;
    font-weight: 500;
}

.article-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 25px;
    border-bottom: 1px dashed var(--border);
    margin-bottom: 28px;
}

.inner-page-title {
    font-size: clamp(25px, 4vw, 40px);
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-main);
}

.inner-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    color: var(--text-light);
    font-size: 14px;
    margin-top: 12px;
}

.content-body {
    font-size: 16px;
    line-height: 2;
    color: #312A4B;
}

.content-body h2 {
    font-size: 26px;
    font-weight: 750;
    line-height: 1.4;
    margin-top: 38px;
    margin-bottom: 14px;
}

.content-body h3 {
    font-size: 20px;
    font-weight: 650;
    padding-left: 14px;
    border-left: 3px solid var(--brand);
    margin: 28px 0 12px;
}

.content-body p {
    margin-bottom: 18px;
    text-align: justify;
}

.content-body ul {
    padding-left: 20px;
    margin-bottom: 20px;
}

.content-body ul li {
    padding-left: 6px;
    margin-bottom: 8px;
    position: relative;
    line-height: 1.9;
}

.content-body ul li::before {
    content: "·";
    position: absolute;
    left: -10px;
    color: var(--brand);
    font-weight: 800;
}

.article-jump {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    border-top: 1px dashed var(--border);
    padding-top: 20px;
}

.article-jump a {
    color: var(--brand);
    font-weight: 600;
}

.article-pagination {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* 分类内页 Hero */
.category-hero {
    background: linear-gradient(100deg, #17152E 0%, #2E1F66 100%);
    color: #fff;
    padding: 48px 0 88px;
}

.category-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}

.category-hero h1 {
    font-size: clamp(28px, 4vw, 50px);
    line-height: 1.4;
    font-weight: 800;
    max-width: 14ch;
    margin-bottom: 10px;
}

.category-hero p {
    max-width: 420px;
    color: #c7bfdf;
    font-size: 16px;
    line-height: 1.8;
}

.category-hero-img {
    flex: 0 0 280px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 26px 54px rgba(0, 0, 0, .3);
}

.category-hero-img img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
}

/* ===== 数据统计条 ===== */
.stat-band {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 30px 0;
}

.stat-block {
    background: #fff;
    border: var(--border-card);
    border-radius: var(--radius-card);
    padding: 22px 18px;
    box-shadow: var(--shadow-base);
}

.stat-block b {
    font-size: 38px;
    line-height: 1.1;
    background: linear-gradient(145deg, var(--brand) 20%, var(--aqua));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    font-variant-numeric: tabular-nums;
}

.stat-block span {
    color: var(--text-light);
    font-size: 14px;
    display: block;
    margin-top: 8px;
}

/* note 文案 */
.sc-note {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.7;
    border-left: 3px solid var(--aqua);
    background: var(--aqua-light);
    border-radius: 0 10px 10px 0;
    padding: 10px 16px;
    margin: 14px 0;
}

/* 分类页非对称混排 */
.mix-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 30px;
}

/* 文章页相关推荐 */
.related-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.related-item {
    border-radius: 14px;
    overflow: hidden;
    background: white;
    border: var(--border-card);
    transition: all .24s;
}

.related-item img {
    aspect-ratio: 16/10;
    object-fit: cover;
    width: 100%;
}

.related-item:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
}

.related-item h4 {
    padding: 12px 14px 9px;
    font-size: 14px;
    font-weight: 600;
}

.related-item h4:hover a {
    color: var(--brand);
}

.related-item .meta {
    padding: 0 14px 13px;
    color: var(--text-light);
    font-size: 12px;
}

/* ===== 响应式 ===== */

/* Medium >= 640 */
@media (max-width: 1023px) and (min-width: 768px) {

    .hero-inner {
        align-items: flex-start;
    }

}

@media (max-width: 767px) {
    .nav-desktop {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .nav-cta {
        display: none;
    }

    .site-header {
        height: 60px;
    }

    .section {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .section-title {
        font-size: 24px;
    }

    .hero-inner {
        flex-direction: column;
        gap: 32px;
        padding-top: 34px;
        padding-bottom: 38px;
    }

    .hero-visual {
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
    }

    .phone-frame {
        width: 100%;
        max-width: 360px;
        aspect-ratio: 9 / 16;
    }

    .plant-list {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 18px;
    }

    .plant-card,
    .plant-card.plant-feature,
    .plant-card.plant-half,
    .plant-card.plant-small {
        grid-column: span 1;
        grid-row: span 1;
        display: block;
        padding: 0;
        flex-direction: column;
    }

    .plant-thumb {
        height: 160px;
        flex: none;
        position: relative;
    }

    .plant-feature .plant-thumb,
    .plant-small .plant-thumb {
        flex: initial;
    }

    .plant-thumb img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .plant-body,
    .plant-feature .plant-body,
    .plant-small .plant-body {
        padding: 16px;
    }

    .plant-card {
        background: white;
        display: flex;
        flex-direction: column;
    }

    .plant-card.plant-small {
        display: flex;
        flex-direction: column;
    }

    .latest-item {
        flex-wrap: wrap;
        padding: 18px 16px;
    }

    .latest-item-index {
        display: none;
    }

    .latest-item-content h3 {
        font-size: 16px;
    }

    .latest-meta {
        flex-wrap: wrap;
        gap: 8px;
    }

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

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .mobile-bottom-tabs {
        display: flex;
    }

    body {
        padding-bottom: var(--bottom-tab-h);
    }

    .faq-body {
        padding: 0 20px 16px 48px;
    }

    .stat-band {
        grid-template-columns: 1fr;
    }

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

    .related-list {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

}

@media (max-width: 520px) {
    .container,
    .container-wide {
        padding-left: 16px;
        padding-right: 16px;
    }

    .viral-card {
        flex-basis: 200px;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .section-title-wrap {
        max-width: 100%;
    }

    .comment-card {
        width: 100%;
    }

    .hero-sub {
        font-size: 15px;
    }

    .hero-buttons .btn {
        flex: 1;
        min-width: 140px;
    }

    .btn {
        height: 46px;
        font-size: 14px;
        padding: 0 19px;
    }

    .phone-frame {
        border-radius: 24px;
    }

    .tag {
        font-size: 12px;
    }

    .footer-logo .logo-text {
        font-size: 19px;
    }
}

/* 平板竖屏 */
@media (max-width: 1024px) {

    .desktop-search {
        display: none;
    }

    .hero-inner {
        flex-direction: column;
        gap: 40px;
    }

    .hero-visual {
        width: 280px;
    }

    .section-header {
        gap: 12px;
    }

    .nav-desktop a {
        padding: 0 12px;
        font-size: 14px;
    }

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

}

/* ---------- mobile menu toggle show ---------- */
@media (min-width: 768px) {
    .mobile-drawer-menu {
        display: none;
    }
}

/* roulang page: category1 */
:root{
        --brand:#6A4CFF;
        --brand-dark:#5638E0;
        --brand-soft:#EEE8FF;
        --aqua:#06C1B0;
        --aqua-soft:#E4FAF6;
        --orange:#FF7733;
        --orange-dark:#F0651F;
        --orange-soft:#FFF1E8;
        --deep:#17152E;
        --deep-soft:#A8A3C3;
        --bg:#F6F5FB;
        --card:#FFFFFF;
        --text:#211D38;
        --text-sub:#676180;
        --line:#E9E5F5;
        --danger:#F04343;
        --success:#0CBB5A;
        --wait:#FFB818;
        --muted:#CBC7E0;
        --r-lg:24px;
        --r-md:16px;
        --r-pill:999px;
        --shadow-sm:0 8px 22px rgba(30,20,90,.06);
        --shadow-md:0 12px 30px rgba(30,20,90,.08);
        --shadow-lg:0 18px 42px rgba(30,20,90,.14);
        --ease:cubic-bezier(.2,.7,.3,1);
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
        font-family:"PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
        background:var(--bg);
        color:var(--text);
        font-size:16px;
        line-height:1.7;
        -webkit-font-smoothing:antialiased;
    }
    img{max-width:100%;display:block;border:0}
    a{color:inherit;text-decoration:none}
    button,input{font-family:inherit}
    ul,ol{list-style:none}
    :focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}

    .container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
    .container-wide{width:100%;max-width:1400px;margin:0 auto;padding:0 28px}

    /* header */
    .site-header{
        position:sticky;top:0;z-index:60;
        background:rgba(255,255,255,.94);
        backdrop-filter:blur(14px);
        border-bottom:1px solid rgba(233,229,245,.8);
        min-height:68px;
    }
    .nav-wrap{display:flex;align-items:center;gap:22px;min-height:68px}
    .logo{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
    .logo-mark{
        width:38px;height:38px;border-radius:13px;background:var(--brand);
        color:#fff;font-weight:800;font-size:22px;display:inline-flex;align-items:center;justify-content:center;
        box-shadow:0 8px 18px rgba(106,76,255,.28);
    }
    .logo-text{font-size:22px;font-weight:800;letter-spacing:.02em}
    .logo-accent{color:var(--brand);font-weight:800}
    .nav-desktop{display:flex;align-items:center;gap:30px;margin:0 auto}
    .nav-desktop a{
        position:relative;font-size:15px;font-weight:500;color:var(--text-sub);
        padding:9px 2px;line-height:1.2;transition:color .2s var(--ease);
    }
    .nav-desktop a:hover{color:var(--brand)}
    .nav-desktop a.active{
        color:var(--brand);font-weight:700;background:var(--brand-soft);
        border-radius:var(--r-pill);padding:9px 18px;margin:0 -8px;
    }
    .nav-right{display:flex;align-items:center;gap:12px;margin-left:auto}
    .nav-cta{
        display:inline-flex;align-items:center;justify-content:center;
        background:var(--orange);color:#fff;font-weight:700;font-size:14px;
        min-height:42px;padding:0 20px;border-radius:var(--r-pill);
        box-shadow:0 10px 24px rgba(255,119,51,.26);
        transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
    }
    .nav-cta:hover{background:var(--orange-dark);transform:translateY(-2px);box-shadow:0 14px 28px rgba(255,119,51,.32)}
    .nav-toggle{
        border:0;background:transparent;width:42px;height:42px;border-radius:12px;
        display:none;align-items:center;justify-content:center;color:var(--text);cursor:pointer;
        transition:background .2s var(--ease);
    }
    .nav-toggle:hover{background:var(--brand-soft);color:var(--brand)}

    .mobile-drawer{
        display:none;
    }
    .mobile-drawer.open{
        display:block;position:absolute;top:68px;left:16px;right:16px;
        background:#fff;border:1px solid var(--line);border-radius:20px;
        padding:14px;box-shadow:var(--shadow-lg);z-index:55;
    }
    .mobile-drawer.open a{
        display:block;padding:12px 14px;border-radius:13px;font-weight:600;color:var(--text-sub);
    }
    .mobile-drawer.open a.active{background:var(--brand-soft);color:var(--brand)}
    .mobile-drawer.open a + a{margin-top:4px}

    @media (max-width:1024px){
        .nav-desktop{display:none}
        .nav-right{margin-left:auto}
        .nav-toggle{display:inline-flex}
    }

    /* bottom tab */
    .bottom-tab{
        display:none;
    }
    @media (max-width:1024px){
        .bottom-tab{
            display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
            background:#fff;border-top:1px solid var(--line);
            padding-bottom:env(safe-area-inset-bottom);
            box-shadow:0 -10px 30px rgba(30,20,90,.05);
        }
        .bottom-tab a{
            flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
            gap:3px;padding:9px 0 7px;font-size:12px;font-weight:500;color:var(--text-sub);
            min-height:58px;
        }
        .bottom-tab a.active{color:var(--brand);font-weight:700}
        .bottom-tab svg{width:21px;height:21px}
    }

    @media (max-width:1024px){
        body{padding-bottom:60px}
    }

    /* category hero */
    .cat-hero{
        position:relative;border-radius:0 0 34px 34px;
        background-color:#EFF0FF;
        background-image:linear-gradient(120deg,rgba(249,247,255,.94),rgba(239,240,255,.75) 46%,rgba(226,244,244,.72)),url('/assets/images/backpic/back-1.webp');
        background-size:cover;background-position:center 32%;
        padding:74px 0 66px;overflow:hidden;
    }
    .cat-hero-inner{
        display:grid;align-items:center;gap:60px;
        grid-template-columns:minmax(0,1fr) minmax(300px,460px);
    }
    .kicker{
        display:inline-flex;align-items:center;gap:8px;
        background:#fff;padding:6px 13px;border-radius:var(--r-pill);
        font-size:13px;font-weight:700;color:var(--brand);
        box-shadow:var(--shadow-sm);border:1px solid rgba(106,76,255,.14);
    }
    .kicker-dot{width:7px;height:7px;border-radius:50%;background:var(--brand);display:inline-block}
    .cat-hero h1{
        font-size:54px;line-height:1.08;font-weight:800;margin:20px 0 18px;letter-spacing:-.02em;
    }
    .cat-hero h1 .hero-accent{color:var(--brand)}
    .cat-hero-desc{
        font-size:17px;line-height:1.9;color:#3A3360;max-width:600px;margin-bottom:28px;
    }
    .cat-hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
    .btn{
        display:inline-flex;align-items:center;justify-content:center;gap:9px;
        min-height:48px;padding:0 26px;border-radius:var(--r-pill);
        font-size:15px;font-weight:700;color:#fff;cursor:pointer;border:0;
        transition:transform .24s var(--ease),box-shadow .24s var(--ease),background .24s var(--ease);
    }
    .btn svg{width:18px;height:18px}
    .btn-primary{background:var(--orange);box-shadow:0 14px 26px rgba(255,119,51,.3)}
    .btn-primary:hover{background:var(--orange-dark);transform:translateY(-3px);box-shadow:0 18px 34px rgba(255,119,51,.36)}
    .btn-ghost{background:#fff;color:var(--brand);border:1px solid rgba(106,76,255,.2);box-shadow:var(--shadow-sm)}
    .btn-ghost:hover{background:var(--brand-soft);transform:translateY(-3px);box-shadow:var(--shadow-md)}

    .cat-hero-visual{position:relative;border-radius:24px;padding:14px 12px 8px;background:#17152E;box-shadow:0 30px 70px rgba(30,20,90,.3)}
    .visual-top{display:flex;justify-content:space-between;padding:4px 6px 14px;color:rgba(255,255,255,.75);font-size:13px;font-weight:600}
    .visual-dots{display:flex;gap:5px}
    .visual-dots i{width:9px;height:9px;border-radius:50%;background:#3B355E;display:inline-block}
    .visual-dots i:first-child{background:rgba(255,255,255,.3)}
    .hero-card-list{display:grid;gap:12px}
    .hero-mini-card{
        display:grid;grid-template-columns:70px 1fr auto;gap:12px;align-items:center;
        background:#211D3E;border-radius:17px;padding:9px 12px 9px 9px;
        border:1px solid rgba(255,255,255,.08);
    }
    .hero-mini-card img{width:70px;height:70px;object-fit:cover;border-radius:12px}
    .mini-title{color:#fff;font-weight:700;font-size:14px;margin-bottom:5px}
    .mini-sub{color:#B5AECF;font-size:12px}
    .mini-score{
        background:var(--orange-soft);color:var(--orange-dark);font-size:13px;font-weight:800;
        padding:5px 10px;border-radius:var(--r-pill);
    }
    .play-bubble{
        position:absolute;top:70px;right:-5px;
        background:var(--orange);color:#fff;display:flex;align-items:center;gap:6px;
        padding:10px 16px;border-radius:20px;font-size:13px;font-weight:700;
        box-shadow:0 12px 26px rgba(255,119,51,.4);animation:float 3.4s var(--ease) infinite;
    }
    @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

    @media (max-width:900px){
        .cat-hero{padding:50px 0 48px;border-radius:0 0 24px 24px}
        .cat-hero-inner{grid-template-columns:1fr;gap:36px}
        .cat-hero h1{font-size:36px}
        .cat-hero-desc{font-size:15.5px}
        .play-bubble{top:auto;bottom:-12px;right:10px}
    }
    @media (max-width:520px){
        .container,.container-wide{padding-left:18px;padding-right:18px}
        .cat-hero-inner{gap:28px}
        .cat-hero h1{font-size:31px}
        .hero-mini-card{grid-template-columns:60px 1fr auto;padding:7px}
        .hero-mini-card img{width:60px;height:60px}
    }

    /* section */
    .section{width:100%;padding:88px 0}
    .section-tight{padding:60px 0}
    .sec-head{margin-bottom:32px}
    .sec-eyebrow{font-size:14px;font-weight:800;color:var(--brand);margin-bottom:12px;display:flex;align-items:center;gap:9px}
    .sec-eyebrow::before{content:"";width:18px;height:3px;border-radius:3px;background:var(--brand)}
    .sec-title{font-size:32px;line-height:1.25;font-weight:800;letter-spacing:-.01em}
    .sec-sub{color:var(--text-sub);margin-top:10px;font-size:16px;max-width:700px}

    @media (max-width:768px){
        .section{padding:60px 0}
        .sec-title{font-size:24px}
    }

    /* feature catalog list */
    .catalog-bg{background:#fff}
    .feature-grid{
        display:grid;grid-template-columns:1fr 1fr;gap:22px;
    }
    .feature-card{
        border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;
        overflow:hidden;box-shadow:var(--shadow-md);transition:transform .26s var(--ease),box-shadow .26s var(--ease);
    }
    .feature-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
    .feature-media{position:relative;aspect-ratio:16/9;overflow:hidden}
    .feature-media img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}
    .feature-card:hover .feature-media img{transform:scale(1.04)}
    .feature-media::after{
        content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(23,21,46,.6));
        pointer-events:none;
    }
    .play-chip{
        position:absolute;left:15px;bottom:14px;z-index:2;
        display:inline-flex;align-items:center;gap:6px;color:#fff;
        background:rgba(23,21,46,.55);backdrop-filter:blur(8px);
        padding:5px 11px;border-radius:var(--r-pill);font-size:12px;font-weight:600;
    }
    .badge-corner{
        position:absolute;right:14px;top:13px;z-index:2;
        border-radius:var(--r-pill);color:#fff;font-size:12px;font-weight:700;padding:6px 12px;
        box-shadow:0 8px 18px rgba(0,0,0,.16);
    }
    .badge-hot{background:linear-gradient(120deg,#F04343,#FF7733)}
    .badge-new{background:linear-gradient(120deg,#6A4CFF,#9A7BFF)}
    .badge-top{background:linear-gradient(120deg,#FFB818,#FF7733)}
    .feature-body{padding:21px 22px 22px}
    .feature-body h3{font-size:20px;line-height:1.45;font-weight:800;margin-bottom:8px}
    .feature-body p{font-size:14.5px;color:var(--text-sub);line-height:1.75}
    .feature-meta{
        display:flex;align-items:center;justify-content:space-between;margin-top:19px;
        border-top:1px dashed var(--line);padding-top:15px;
    }
    .feature-rate{display:flex;align-items:center;gap:7px}
    .star{color:#FFB818;font-weight:800;font-size:15px}
    .feature-tags{display:flex;flex-wrap:wrap;gap:7px}
    .ftag{
        font-size:12px;font-weight:600;color:var(--brand);background:var(--brand-soft);
        padding:4px 11px;border-radius:var(--r-pill);
    }

    @media (max-width:820px){
        .feature-grid{grid-template-columns:1fr}
    }

    /* topic tune grid */
    .topic-bg{background:linear-gradient(180deg,var(--bg),#EBF9F6 120%)}
    .tune-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px}
    .tag-block{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
    .tag-card{
        border:1px solid var(--line);background:#fff;border-radius:20px;padding:19px 17px;
        box-shadow:var(--shadow-sm);transition:transform .22s var(--ease),box-shadow .22s var(--ease),border .22s var(--ease);
    }
    .tag-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(106,76,255,.25)}
    .tag-card .tag-icon{
        width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;
    }
    .tag-card .line-ic{color:#fff;font-size:17px;font-weight:800}
    .tag-card h4{font-size:16px;font-weight:800;margin-bottom:5px}
    .tag-card span{font-size:12.5px;color:var(--text-sub);line-height:1.6}
    .ico-purple{background:var(--brand)}
    .ico-aqua{background:var(--aqua)}
    .ico-orange{background:var(--orange)}
    .ico-deep{background:#3B345C}

    .tune-notes{
        display:flex;flex-direction:column;gap:16px;background:var(--deep);color:#fff;
        padding:28px;border-radius:var(--r-lg);
    }
    .tune-note-heading{font-size:22px;font-weight:800;line-height:1.4}
    .tune-note-heading span{color:var(--aqua)}
    .tune-note-text{font-size:14px;line-height:1.85;color:var(--deep-soft)}
    .tune-note-list{display:grid;gap:12px;margin-top:8px}
    .tune-note-list li{
        display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#D7D2E9;line-height:1.7;
    }
    .tune-note-list li::before{
        content:"✓";flex:0 0 20px;width:20px;height:20px;border-radius:50%;
        background:rgba(6,193,176,.18);color:#7BEFE3;display:inline-flex;align-items:center;justify-content:center;
        font-size:12px;margin-top:2px;
    }
    @media (max-width:820px){
        .tune-grid{grid-template-columns:1fr}
        .tag-block{grid-template-columns:1fr 1fr}
    }
    @media (max-width:520px){
        .tag-block{grid-template-columns:1fr}
        .tune-notes{padding:22px}
    }

    /* stats band */
    .stats-band{background:var(--deep);color:#fff;padding:58px 0;position:relative;overflow:hidden}
    .stats-band::after{
        content:"";position:absolute;width:360px;height:360px;border-radius:50%;
        right:-100px;top:-140px;background:radial-gradient(circle,rgba(106,76,255,.35),transparent 64%);
    }
    .stats-grid{
        display:grid;grid-template-columns:repeat(3,1fr);gap:30px;position:relative;z-index:2;
    }
    .stats-item{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:25px 24px}
    .stats-item .num{
        font-size:28px;font-weight:800;color:#fff;line-height:1.2;display:flex;align-items:baseline;gap:8px;
    }
    .stats-item .num small{font-size:14px;color:var(--aqua);font-weight:700}
    .stats-item p{margin-top:9px;font-size:14px;color:var(--deep-soft)}
    .stats-item h4{color:#fff}
    @media (max-width:768px){
        .stats-grid{grid-template-columns:1fr;gap:14px}
        .stats-item{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center}
        .stats-item .num{font-size:25px}
        .stats-item p{margin-top:0}
    }
    @media (max-width:520px){
        .stats-item{grid-template-columns:1fr;gap:7px}
    }

    /* flow steps */
    .flow-section{background:#fff}
    .flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step}
    .flow-card{
        border:1px solid var(--line);border-radius:22px;background:var(--bg);
        padding:25px 20px 22px;position:relative;transition:background .2s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
    }
    .flow-card:hover{background:#fff;transform:translateY(-4px);box-shadow:var(--shadow-md)}
    .flow-card::before{
        content:"0" counter(step);counter-increment:step;
        display:inline-flex;font-size:27px;font-weight:800;color:var(--brand);margin-bottom:14px;
        font-variant-numeric:tabular-nums;
    }
    .flow-card h4{font-size:17px;font-weight:800;margin-bottom:8px}
    .flow-card p{font-size:13.5px;color:var(--text-sub)}
    .flow-card .flow-icon{position:absolute;right:18px;top:24px;line-height:0}
    @media (max-width:980px){
        .flow-grid{grid-template-columns:1fr 1fr}
    }
    @media (max-width:560px){
        .flow-grid{grid-template-columns:1fr}
    }

    /* faq */
    .faq-bg{background:linear-gradient(180deg,var(--bg),#ECEAFA)}
    .faq-list{max-width:850px;margin:22px auto 0}
    .faq-item{
        background:#fff;border:1px solid var(--line);border-radius:20px;margin-bottom:13px;
        box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow .2s var(--ease);
    }
    .faq-item:hover{box-shadow:var(--shadow-md)}
    .faq-item summary{
        list-style:none;cursor:pointer;display:flex;align-items:center;gap:17px;
        padding:20px 24px;font-weight:700;font-size:15.5px;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary::before{
        content:"";flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--brand);
        box-shadow:0 0 0 6px var(--brand-soft);
    }
    .faq-icon{
        margin-left:auto;width:30px;height:30px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
        display:inline-flex;align-items:center;justify-content:center;font-size:17px;transition:transform .25s var(--ease);
    }
    .faq-item[open] .faq-icon{transform:rotate(45deg)}
    .faq-item[open] summary{color:var(--brand)}
    .faq-body{padding:0 24px 22px 55px;color:var(--text-sub);font-size:14.5px}
    .faq-body p{margin-bottom:8px}
    @media (max-width:520px){
        .faq-item summary{padding:17px 16px}
        .faq-body{padding:0 16px 18px 45px}
    }

    /* CTA */
    .cta-block{
        position:relative;border-radius:30px;overflow:hidden;color:#fff;text-align:center;
        background:linear-gradient(125deg,#17152E,#241D4E 50%,#3C2C6E);
        padding:68px 32px;box-shadow:var(--shadow-lg);
    }
    .cta-block::before{
        content:"";position:absolute;inset:0;background-image:url('/assets/images/backpic/back-3.webp');
        background-size:cover;background-position:center;opacity:.14;
    }
    .cta-block::after{
        content:"";position:absolute;width:420px;height:420px;border-radius:50%;
        left:-90px;bottom:-190px;background:radial-gradient(circle,rgba(255,119,51,.35),transparent 68%);
    }
    .cta-inner{position:relative;z-index:2}
    .cta-block h2{font-size:34px;line-height:1.25;font-weight:800;letter-spacing:-.01em}
    .cta-block p{color:rgba(255,255,255,.8);margin:15px auto 27px;max-width:560px;font-size:15px}
    .cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
    .cta-btns .btn{min-height:50px;padding:0 30px}
    @media (max-width:560px){
        .cta-block h2{font-size:26px}
        .cta-block{padding:48px 20px}
    }

    /* footer */
    .site-footer{
        background:var(--deep);color:rgba(255,255,255,.68);margin-top:110px;
        padding:68px 0 28px;font-size:14px;line-height:1.8;
    }
    .footer-grid{
        display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:38px;
        padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.09);
    }
    .footer-logo{display:flex;align-items:center;gap:11px;color:#fff;font-size:22px;font-weight:800}
    .footer-logo .logo-mark{width:38px;height:38px;font-size:20px;box-shadow:none}
    .footer-desc{max-width:320px;margin-top:13px;color:rgba(255,255,255,.54);font-size:13.5px}
    .footer-col-title{color:#fff;font-weight:700;margin-bottom:12px}
    .footer-menu{display:flex;flex-direction:column;gap:9px}
    .footer-menu a{color:rgba(255,255,255,.62);transition:color .2s var(--ease),transform .2s var(--ease);width:fit-content}
    .footer-menu a:hover{color:#fff;transform:translateX(3px)}
    .footer-contact{display:flex;flex-direction:column;gap:9px;color:rgba(255,255,255,.5);font-size:13.5px}
    .footer-bottom{
        padding-top:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
        color:rgba(255,255,255,.4);font-size:13px;
    }
    .footer-bottom a{color:rgba(255,255,255,.55)}
    .footer-bottom a:hover{color:#fff}
    @media (max-width:900px){
        .footer-grid{grid-template-columns:1fr 1fr;padding-bottom:28px}
        .site-footer{padding-top:50px}
    }
    @media (max-width:560px){
        .footer-grid{grid-template-columns:1fr;gap:26px}
        .site-footer{margin-top:70px}
    }

/* roulang page: article */
:root{
  --brand:#6A4CFF;
  --brand-dark:#5638E0;
  --brand-soft:#EEE8FF;
  --aqua:#06C1B0;
  --aqua-dark:#04A294;
  --aqua-soft:#E4FAF6;
  --orange:#FF7733;
  --orange-dark:#F0651F;
  --orange-soft:#FFF1E8;
  --deep:#17152E;
  --deep-text:#A8A3C3;
  --bg:#F6F5FB;
  --white:#FFFFFF;
  --text:#211D38;
  --muted:#676180;
  --border:#E9E5F5;
  --danger:#F04343;
  --success:#0CBB5A;
  --warning:#FFB818;
  --radius-sm:10px;
  --radius:16px;
  --radius-lg:24px;
  --shadow-sm:0 4px 12px rgba(30,20,90,.06);
  --shadow:0 12px 30px rgba(30,20,90,.08);
  --shadow-lg:0 18px 42px rgba(30,20,90,.14);
  --container:1200px;
  --nav-h:72px;
  --ease:cubic-bezier(.25,.1,.25,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:"PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.75;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;border:0;}
a{color:inherit;text-decoration:none;}
p,h1,h2,h3,h4,ul,ol,figure{margin:0;padding:0;}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;}
input,select,textarea{font:inherit;}

.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.container-article{max-width:860px;margin:0 auto;padding:0 24px;}

h1,h2,h3,h4{letter-spacing:-.02em;line-height:1.3;color:var(--text);}
h1{font-size:44px;font-weight:800;}
h2{font-size:30px;font-weight:700;}
h3{font-size:22px;font-weight:700;}
h4{font-size:18px;font-weight:600;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 30px;border-radius:999px;
  font-size:15px;font-weight:600;line-height:1;
  border:1px solid transparent;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
.btn:focus-visible{outline:3px solid rgba(106,76,255,.4);outline-offset:2px;}
.btn-orange{background:var(--orange);color:#fff;box-shadow:0 12px 24px rgba(255,119,51,.25);}
.btn-orange:hover{background:var(--orange-dark);transform:translateY(-2px);box-shadow:0 16px 30px rgba(255,119,51,.32);}
.btn-purple{background:var(--brand);color:#fff;box-shadow:0 12px 24px rgba(106,76,255,.22);}
.btn-purple:hover{background:var(--brand-dark);transform:translateY(-2px);}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4);}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);transform:translateY(-2px);}
.btn-outline{background:#fff;color:var(--brand);border-color:#DDD5F7;}
.btn-outline:hover{border-color:var(--brand);color:var(--brand-dark);transform:translateY(-2px);}

.logo-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:12px;flex:none;
  background:linear-gradient(135deg,var(--brand),var(--aqua));
  color:#fff;font-size:20px;font-weight:800;box-shadow:0 6px 16px rgba(106,76,255,.28);
}
.logo{display:inline-flex;align-items:center;gap:10px;font-size:22px;font-weight:800;color:var(--text);letter-spacing:-.02em;}
.logo-text{display:inline-flex;align-items:baseline;gap:2px;}
.logo-accent{color:var(--brand);}

.site-header{
  position:sticky;top:0;z-index:120;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  box-shadow:0 4px 18px rgba(30,20,90,.04);
}
.nav-wrap{display:flex;align-items:center;height:var(--nav-h);gap:32px;}
.nav-desktop{display:flex;align-items:center;gap:6px;margin:0 auto;padding:6px;background:#F3F1FA;border-radius:999px;}
.nav-desktop a{
  display:inline-flex;align-items:center;height:38px;padding:0 18px;border-radius:999px;
  font-size:15px;font-weight:500;color:#4C4668;transition:background .2s,color .2s;
}
.nav-desktop a:hover{color:var(--brand-dark);}
.nav-desktop a:focus-visible{outline:3px solid rgba(106,76,255,.35);outline-offset:-1px;}
.nav-desktop a.active{background:var(--brand);color:#fff;font-weight:600;box-shadow:0 8px 18px rgba(106,76,255,.2);}
.nav-right{display:flex;align-items:center;gap:14px;margin-left:auto;}
.nav-cta{
  display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 24px;
  border-radius:999px;background:var(--orange);color:#fff;font-size:15px;font-weight:600;
  box-shadow:0 10px 22px rgba(255,119,51,.25);transition:transform .2s var(--ease),background .2s;
}
.nav-cta:hover{background:var(--orange-dark);transform:translateY(-2px);}
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;color:var(--text);border-radius:12px;}
.nav-toggle:hover{background:#F1EDFC;}

.mobile-drawer{
  display:none;position:fixed;top:var(--nav-h);left:0;right:0;z-index:115;
  background:#fff;border-bottom:1px solid var(--border);
  padding:16px 18px 22px;box-shadow:0 20px 30px rgba(30,20,90,.08);
  transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
.mobile-drawer.is-open{opacity:1;transform:none;pointer-events:auto;}
.mobile-drawer a{display:block;padding:13px 14px;border-radius:12px;font-weight:500;color:var(--text);}
.mobile-drawer a:hover{background:#F5F2FF;color:var(--brand-dark);}
.mobile-drawer a.active{background:var(--brand-soft);color:var(--brand-dark);font-weight:700;}

.mobile-tabbar{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:120;
  background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--border);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 24px rgba(30,20,90,.06);
}
.tabbar{display:flex;align-items:stretch;}
.tabbar a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:50px;color:#8A84A3;font-size:12px;line-height:1.2;font-weight:500;
}
.tabbar a:focus-visible{outline:3px solid rgba(106,76,255,.4);outline-offset:-3px;border-radius:12px;}
.tabbar a.active{color:var(--brand);font-weight:700;}
.tabbar svg{width:22px;height:22px;}

/* 文章头图 */
.article-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(120deg,rgba(23,21,46,.96),rgba(106,76,255,.88) 70%,rgba(6,193,176,.72)),url("/assets/images/backpic/back-2.webp") center/cover no-repeat;
  color:#fff;padding:72px 0 62px;
}
.article-hero::after{
  content:"";position:absolute;right:-120px;top:-120px;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,119,51,.32),transparent 65%);pointer-events:none;
}
.article-hero-inner{position:relative;z-index:2;}
.article-crumbs{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13px;
  margin-bottom:24px;color:rgba(255,255,255,.7);
}
.article-crumbs a{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.78);transition:color .2s;}
.article-crumbs a:hover{color:#fff;}
.article-crumbs .sep{opacity:.5;font-size:14px;line-height:1;}
.article-crumbs .current{color:#fff;font-weight:500;}

.post-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:18px;color:rgba(255,255,255,.78);font-size:14px;
}
.meta-tag{
  display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 14px;
  font-size:13px;font-weight:500;color:#fff;
}
.meta-item{display:inline-flex;align-items:center;gap:7px;}
.meta-item svg{width:15px;height:15px;opacity:.75;}

.article-title{color:#fff;font-size:44px;font-weight:800;line-height:1.3;max-width:820px;text-wrap:balance;}

/* 正文区 */
.content-layout{background:var(--bg);padding:46px 0 72px;}
.article-body{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:44px 54px 46px;box-shadow:var(--shadow-sm);
}
.article-body > * {max-width:100%;}
.article-body p{font-size:17px;line-height:1.95;color:#34304A;margin:0 0 24px;}
.article-body h2{
  font-size:28px;margin:44px 0 16px;padding-left:18px;border-left:4px solid var(--brand);
  border-radius:2px;
}
.article-body h3{font-size:22px;margin:34px 0 12px;}
.article-body h4{font-size:18px;margin:26px 0 10px;}
.article-body a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#C9BEF7;}
.article-body a:hover{color:var(--brand-dark);}
.article-body ul,.article-body ol{margin:0 0 24px;padding-left:24px;}
.article-body li{margin:8px 0;line-height:1.85;}
.article-body blockquote{
  margin:28px 0;padding:20px 28px;background:var(--aqua-soft);
  border-left:4px solid var(--aqua);border-radius:12px;color:#24415A;
}
.article-body blockquote p{margin:0;}
.article-body img{border-radius:14px;margin:26px auto;box-shadow:var(--shadow-sm);height:auto;}
.article-body figure{margin:28px 0;}
.article-body figcaption{text-align:center;color:var(--muted);font-size:13px;margin-top:8px;}
.article-body code{
  background:#F1EEFB;border:1px solid #E2DBF6;border-radius:6px;
  padding:2px 7px;font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:14px;color:#5630B8;
}
.article-body pre{
  background:#17152E;color:#EDEAFB;border-radius:14px;padding:22px 24px;
  overflow-x:auto;line-height:1.7;margin:24px 0;
}
.article-body pre code{background:none;border:0;color:inherit;padding:0;}
.article-body table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px;}
.article-body th{background:#F3F0FC;color:#342C57;text-align:left;}
.article-body th,.article-body td{padding:12px 14px;border:1px solid var(--border);}
.article-body hr{border:0;height:1px;background:var(--border);margin:38px 0;}

/* 文章标签 / 分页 */
.article-tags{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 10px;padding-top:26px;border-top:1px solid var(--border);}
.tag-pill{
  display:inline-block;padding:6px 15px;border-radius:999px;background:#F3F0FC;
  border:1px solid #E3DBF6;font-size:13px;font-weight:500;color:#4E3F91;
}
.article-navi{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:30px;padding-top:26px;border-top:1px solid var(--border);}
.navi-link{
  display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 22px;
  background:var(--white);border:1px solid var(--border);border-radius:999px;
  color:#57506B;font-weight:500;font-size:14px;transition:all .2s;
}
.navi-link:hover{color:var(--brand);border-color:#BFA9FF;box-shadow:var(--shadow-sm);transform:translateY(-2px);}
.navi-link svg{width:16px;height:16px;}

.empty-article{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  text-align:center;padding:80px 30px;box-shadow:var(--shadow-sm);
}
.empty-article strong{display:block;font-size:26px;margin-bottom:12px;}
.empty-article p{color:var(--muted);max-width:440px;margin:0 auto 30px;}
.empty-article .btn{text-decoration:none;}

/* 深色行动区 */
.deep-cta{
  position:relative;overflow:hidden;background:var(--deep);color:#fff;
  padding:62px 0;margin:72px 0 0;
}
.deep-cta::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--brand),var(--aqua),var(--orange));
}
.deep-cta::after{
  content:"";position:absolute;right:-16%;bottom:-64%;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(106,76,255,.35),transparent 62%);
}
.cta-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;}
.cta-copy{max-width:560px;}
.cta-copy .eyebrow{display:inline-block;background:rgba(6,193,176,.16);color:#5DE2D4;padding:6px 14px;border-radius:999px;margin-bottom:14px;font-size:14px;font-weight:600;}
.cta-copy h2{color:#fff;font-size:32px;line-height:1.35;margin-bottom:10px;}
.cta-copy p{opacity:.75;font-size:16px;color:#DCD7F4;}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;}

/* 推荐区 */
.related-section{padding:80px 0 90px;background:linear-gradient(180deg,var(--bg),#EEEAFA);}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:34px;}
.section-head h2{font-size:32px;}
.section-head p{color:var(--muted);font-size:15px;max-width:360px;}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.related-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.related-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.related-thumb{position:relative;aspect-ratio:4/3;overflow:hidden;background:#F0EEF7;}
.related-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease);}
.related-card:hover .related-thumb img{transform:scale(1.06);}
.related-badge{
  position:absolute;left:12px;top:12px;background:linear-gradient(90deg,var(--orange),#FF5A3C);
  color:#fff;font-size:12px;font-weight:600;border-radius:999px;padding:4px 12px;box-shadow:0 6px 14px rgba(255,90,60,.35);
}
.related-info{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px;}
.related-info h3{font-size:17px;font-weight:600;line-height:1.45;color:#251A49;}
.related-info p{font-size:14px;color:var(--muted);line-height:1.6;}
.related-more{font-size:14px;color:var(--brand);font-weight:600;display:inline-flex;align-items:center;gap:6px;margin-top:6px;}
.related-more svg{width:15px;height:15px;transition:transform .2s;}
.related-card:hover .related-more svg{transform:translateX(4px);}

/* FAQ */
.faq-section{padding:76px 0 90px;background:#fff;}
.faq-section .section-head{display:block;}
.faq-section .section-head p{max-width:620px;margin-top:12px;}
.faq-list{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.faq-item{
  border:1px solid var(--border);background:#FCFBFE;border-radius:var(--radius);overflow:hidden;
  transition:border .25s,box-shadow .25s;
}
.faq-item:hover{border-color:#D3C8EF;}
.faq-item[open]{box-shadow:var(--shadow-sm);border-color:#C1B1EF;}
.faq-q{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  width:100%;text-align:left;padding:20px 22px;font-size:17px;font-weight:600;color:#251A49;line-height:1.5;
}
.faq-q::-webkit-details-marker{display:none;}
.faq-icon{
  flex:none;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;background:#EFE9FF;color:var(--brand);font-size:21px;font-weight:300;margin-top:2px;
  transition:transform .3s var(--ease),background .3s,color .3s;
}
.faq-item[open] .faq-icon{transform:rotate(45deg);background:var(--brand);color:#fff;}
.faq-a{padding:0 22px 22px;color:#4E4A63;font-size:15px;line-height:1.9;}
.faq-a a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:3px;}

/* 页脚 */
.site-footer{background:var(--deep);color:#D5CFE8;padding-top:64px;}
.footer-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:40px 28px;padding-bottom:46px;
}
.footer-logo{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:800;color:#fff;margin-bottom:12px;}
.footer-logo .logo-mark{width:34px;height:34px;border-radius:10px;font-size:18px;}
.footer-desc{color:var(--deep-text);font-size:14px;max-width:300px;line-height:1.8;}
.footer-col-title{font-size:16px;font-weight:700;color:#fff;margin-bottom:16px;}
.footer-menu{display:flex;flex-direction:column;gap:10px;}
.footer-menu a,.footer-contact span{color:var(--deep-text);font-size:14px;transition:color .2s;}
.footer-menu a:hover{color:#fff;}
.footer-contact{display:flex;flex-direction:column;gap:10px;font-size:14px;}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.1);padding:22px 0;color:var(--deep-text);font-size:13px;
}
.footer-legal a{color:var(--deep-text);transition:color .2s;}
.footer-legal a:hover{color:#fff;}
.footer-bottom a{text-decoration:none;}

body::after{
  content:"";display:none;
}

/* 响应式 */
@media (max-width:1080px){
  .related-grid{grid-template-columns:repeat(2,1fr);}
  .nav-desktop{display:none;margin:0;}
  .nav-toggle{display:inline-flex;}
  .mobile-drawer{display:block;}
  .nav-right{margin-left:auto;gap:8px;}
  .nav-desktop a[class] .nav-drawer-openable{display:block;}
}

@media (max-width:1024px){
  h1{font-size:38px;}
  .article-title{font-size:36px;}
  .article-hero{padding:58px 0 50px;}
}

@media (max-width:767px){
  body{padding-bottom:64px;}
  body::after{height:0;}
  .nav-wrap{gap:12px;}
  .nav-cta{display:none;}
  .container,.container-article{padding:0 18px;}
  .article-hero{padding:48px 0 44px;}
  .article-title{font-size:28px;line-height:1.35;}
  .article-crumbs{font-size:12px;}
  .post-meta{margin-bottom:16px;gap:8px;}
  .article-body{padding:28px 20px;}
  .article-body p{font-size:16px;line-height:1.9;}
  .article-body h2{font-size:23px;}
  .article-body h3{font-size:20px;}
  .mobile-tabbar{display:flex;}
  .content-layout{padding:28px 0 56px;}
  .related-section{padding:56px 0 64px;}
  .related-grid{grid-template-columns:1fr;}
  .section-head{display:block;}
  .section-head p{margin-top:10px;}
  .deep-cta{padding:50px 0;margin-top:48px;}
  .cta-inner{flex-direction:column;align-items:flex-start;}
  .cta-copy h2{font-size:26px;}
  .cta-actions{width:100%;}
  .cta-actions .btn{flex:1;}
  .article-navi{flex-direction:column;align-items:stretch;}
  .navi-link{justify-content:center;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
  .logo-text{font-size:20px;}
}

@media (max-width:420px){
  .footer-grid{grid-template-columns:1fr;}
  .tabbar a{font-size:11px;}
  .cta-actions{flex-direction:column;}
  .cta-actions .btn{width:100%;}
}

/* 焦点可访问性 */
a:focus-visible,button:focus-visible{outline:3px solid rgba(106,76,255,.42);outline-offset:2px;border-radius:6px;}

/* roulang page: category2 */
:root{
  --brand:#6A4CFF;
  --brand-dark:#5638E0;
  --brand-soft:#EEE8FF;
  --aqua:#06C1B0;
  --aqua-soft:#E4FAF6;
  --orange:#FF7733;
  --orange-dark:#F0651F;
  --orange-soft:#FFF1E8;
  --deep:#17152E;
  --deep-2:#211D3A;
  --muted:#A8A3C3;
  --bg:#F6F5FB;
  --card:#FFFFFF;
  --text:#211D38;
  --text-2:#676180;
  --border:#E9E5F5;
  --success:#0CBB5A;
  --danger:#F04343;
  --gold:#FFB818;
  --radius-lg:24px;
  --radius:16px;
  --radius-sm:12px;
  --shadow-sm:0 8px 22px rgba(38,25,98,.07);
  --shadow-md:0 12px 30px rgba(30,20,90,.08);
  --shadow-lg:0 18px 42px rgba(30,20,90,.14);
  --nav-h:70px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.7;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
ul,ol,dl,dd,figure,p,h1,h2,h3,h4,h5{margin:0;padding:0}
a:focus-visible,
button:focus-visible,
summary:focus-visible{
  outline:3px solid var(--brand);
  outline-offset:3px;
  border-radius:10px;
}
::selection{background:var(--brand-soft);color:var(--deep)}

.container{max-width:1200px;width:calc(100% - 48px);margin-inline:auto}
.container-wide{max-width:1400px;width:calc(100% - 48px);margin-inline:auto}
.section{padding:84px 0}
.section-alt{background:linear-gradient(180deg,#F2EFFC 0%,var(--bg) 100%)}

/* header */
.site-header{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.nav-wrap{
  height:var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo-mark{
  width:38px;height:38px;
  border-radius:13px;
  background:linear-gradient(135deg,var(--brand) 12%,var(--aqua) 100%);
  color:#fff;
  font-weight:900;
  font-size:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 18px rgba(106,76,255,.28);
}
.logo-text{
  font-size:24px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--deep);
  line-height:1.1;
  display:flex;
  align-items:baseline;
}
.logo-accent{color:var(--brand);font-style:normal}
.logo-accent span{color:var(--brand)}
.nav-desktop{
  display:flex;
  align-items:center;
  gap:4px;
  margin-inline:auto;
}
.nav-desktop a{
  display:inline-flex;
  align-items:center;
  height:42px;
  padding:0 18px;
  border-radius:999px;
  font-weight:600;
  font-size:15px;
  color:var(--text);
  transition:all .2s ease-out;
  border:1px solid transparent;
}
.nav-desktop a:hover{
  background:var(--brand-soft);
  color:var(--brand);
}
.nav-desktop a.active{
  background:var(--brand);
  color:#fff;
  box-shadow:0 10px 22px rgba(106,76,255,.28);
}
.nav-desktop a:active{transform:translateY(1px)}
.nav-right{display:flex;align-items:center;gap:12px}
.nav-cta{
  height:42px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 20px;
  background:linear-gradient(135deg,var(--orange) 10%,#FFA26B 100%);
  color:#fff;
  font-size:15px;
  font-weight:700;
  border-radius:999px;
  box-shadow:0 10px 22px rgba(255,119,51,.28);
  transition:all .2s ease-out;
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(255,119,51,.36)}
.nav-toggle{
  width:42px;height:42px;
  display:none;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:var(--brand-soft);
  color:var(--brand);
  transition:all .2s ease-out;
}
.nav-toggle:hover{background:#E1D7FF}
.site-mobile-drop{
  display:none;
  background:#fff;
  border-bottom:1px solid var(--border);
  padding:10px 24px;
}
.site-mobile-drop.is-open{display:block}
.site-mobile-drop a{
  display:block;
  padding:13px 4px;
  color:var(--text);
  font-weight:600;
  border-bottom:1px solid #F1EEFA;
}
.site-mobile-drop a:last-child{border-bottom:0}
.site-mobile-drop a.active{color:var(--brand)}

/* common buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:54px;
  padding:0 28px;
  border-radius:999px;
  font-size:16px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  border:1px solid transparent;
  transition:all .22s ease-out;
}
.btn svg{width:18px;height:18px;flex:none}
.btn-orange{
  background:var(--orange);
  color:#fff;
  border-color:var(--orange);
  box-shadow:0 14px 28px rgba(255,94,21,.28);
}
.btn-orange:hover{background:var(--orange-dark);transform:translateY(-2px);box-shadow:0 18px 34px rgba(255,94,21,.34)}
.btn-orange:active{transform:translateY(0)}
.btn-ghost-light{
  background:rgba(255,255,255,.08);
  color:#fff;
  border-color:rgba(255,255,255,.34);
}
.btn-ghost-light:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.btn-ghost-color{
  background:#fff;
  color:var(--brand);
  border-color:#E3DDF7;
  box-shadow:0 8px 18px rgba(30,20,90,.06);
}
.btn-ghost-color:hover{background:var(--brand-soft);color:var(--brand-dark);transform:translateY(-2px)}

/* hero */
.news-hero{
  position:relative;
  overflow:hidden;
  padding:76px 0 82px;
  background-color:#17152E;
  background-image:
    radial-gradient(680px 360px at 16% 12%,rgba(106,76,255,.46),transparent 70%),
    radial-gradient(520px 330px at 84% 82%,rgba(6,193,176,.24),transparent 70%),
    radial-gradient(300px 200px at 92% 12%,rgba(255,119,51,.22),transparent 60%),
    url("/assets/images/backpic/back-1.webp");
  background-size:auto,auto,auto,cover;
  background-position:center;
}
.news-hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,rgba(23,21,46,.98) 0%,rgba(23,21,46,.88) 34%,rgba(28,21,52,.62) 72%,rgba(6,193,176,.12) 100%);
  pointer-events:none;
}
.news-hero__inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  gap:52px;
  align-items:center;
}
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  padding:8px 16px;
  color:#fff;
  font-size:14px;
  font-weight:600;
}
.kicker-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 5px rgba(255,119,51,.16);
}
.hero-title{
  color:#fff;
  font-size:60px;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.08;
  margin:22px 0 18px;
}
.hero-lead{
  color:#fff;
  font-size:22px;
  font-weight:600;
  line-height:1.45;
  max-width:620px;
  letter-spacing:-.01em;
}
.hero-sub{
  color:#D4CFEB;
  font-size:16px;
  line-height:1.8;
  max-width:560px;
  margin-top:14px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:32px;
}
.hero-metrics{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:0;
  margin-top:40px;
  border-top:1px solid rgba(255,255,255,.16);
  padding-top:22px;
}
.hero-metrics li{
  padding-right:32px;
  margin-right:32px;
  border-right:1px solid rgba(255,255,255,.18);
}
.hero-metrics li:last-child{border-right:0;margin-right:0;padding-right:0}
.hero-metrics strong{
  display:block;
  font-size:32px;
  font-weight:800;
  color:#fff;
  line-height:1.1;
  letter-spacing:-.02em;
}
.hero-metrics span{
  display:block;
  margin-top:5px;
  font-size:14px;
  color:#C8C2E6;
}
.news-hero__stage{position:relative;display:flex;justify-content:center;padding:16px 0}
.stage-card{
  position:relative;
  width:min(360px,100%);
  aspect-ratio:9/15;
  border-radius:32px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.26);
  box-shadow:0 30px 70px rgba(0,0,0,.4);
  transform:rotate(1.5deg);
  transition:transform .3s ease-out;
}
.stage-card:hover{transform:rotate(0deg) translateY(-4px)}
.stage-cover{
  position:absolute;
  inset:0;
  background:#241B45;
}
.stage-cover img{width:100%;height:100%;object-fit:cover}
.stage-cover:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(200deg,rgba(23,21,46,.1) 10%,rgba(23,21,46,.05) 44%,rgba(23,21,46,.94) 100%);
}
.play-badge{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  width:46px;height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,120,60,.94);
  color:#fff;
  box-shadow:0 10px 22px rgba(0,0,0,.22);
}
.play-badge svg{width:20px;height:20px;margin-left:2px}
.hot-tag{
  position:absolute;
  left:16px;top:18px;
  z-index:2;
  background:linear-gradient(135deg,#F04343,#FF7733);
  color:#fff;
  font-size:13px;
  font-weight:800;
  padding:5px 12px;
  border-radius:999px;
  box-shadow:0 8px 18px rgba(240,67,67,.28);
}
.stage-content{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:2;
  padding:22px 22px 20px;
  color:#fff;
}
.stage-channel{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  font-weight:700;
  color:var(--aqua);
  letter-spacing:.05em;
}
.stage-title{
  font-size:18px;
  font-weight:700;
  line-height:1.5;
  margin-top:9px;
}
.stage-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:14px;
  font-size:13px;
  color:#CFC8EC;
}
.stage-progress{
  height:5px;
  margin-top:16px;
  background:rgba(255,255,255,.24);
  border-radius:99px;
  overflow:hidden;
}
.stage-progress span{
  display:block;
  height:100%;
  width:62%;
  border-radius:99px;
  background:linear-gradient(90deg,var(--orange),#FFC36A);
}
.hero-float{
  position:absolute;
  z-index:3;
  background:rgba(255,255,255,.96);
  color:var(--text);
  border-radius:16px;
  padding:14px 17px;
  font-size:14px;
  font-weight:600;
  box-shadow:0 18px 40px rgba(23,21,46,.18);
}
.hero-float--gaming{
  left:-12px;
  bottom:100px;
  transform:rotate(-2deg);
}
.hero-float--talk{
  right:-8px;
  top:80px;
  transform:rotate(2deg);
  color:var(--brand);
}
.hero-float small{
  display:block;
  font-size:12px;
  color:var(--text-2);
  font-weight:400;
  margin-top:3px;
}

/* section head */
.section-head{
  display:flex;
  flex-direction:column;
  margin-bottom:38px;
}
.section-head.center{
  align-items:center;
  text-align:center;
  max-width:720px;
  margin-inline:auto;
}
.section-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:700;
  color:var(--brand);
  letter-spacing:.06em;
  margin-bottom:10px;
}
.section-eyebrow:before{
  content:"";
  width:20px;height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--aqua));
}
.center.section-eyebrow:after{
  content:"";
  width:20px;height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--aqua));
}
.section-head h2{
  font-size:34px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--deep);
  line-height:1.25;
}
.section-head p{
  margin-top:12px;
  color:var(--text-2);
  max-width:720px;
  font-size:16px;
}
.section-head.center p{margin-inline:auto}
.section-eyebrow-light{
  color:var(--aqua);
}
.section-eyebrow-light:before{
  background:linear-gradient(90deg,var(--aqua),#B7FFF2);
}

/* point cards */
.point-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.point-card{
  display:flex;
  gap:18px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:24px;
  padding:28px;
  box-shadow:var(--shadow-sm);
  transition:all .25s ease-out;
  position:relative;
  overflow:hidden;
}
.point-card:before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:4px;
  background:var(--brand);
  opacity:.25;
}
.point-card:nth-child(2):before{background:var(--aqua)}
.point-card:nth-child(3):before{background:var(--orange)}
.point-card:nth-child(4):before{background:var(--success)}
.point-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:#D9D1FA;
}
.point-icon{
  width:54px;height:54px;
  border-radius:18px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--brand);
  background:var(--brand-soft);
}
.point-card:nth-child(2) .point-icon{
  color:var(--aqua);
  background:var(--aqua-soft);
}
.point-card:nth-child(3) .point-icon{
  color:var(--orange);
  background:var(--orange-soft);
}
.point-card:nth-child(4) .point-icon{
  color:var(--success);
  background:#E9F8EF;
}
.point-icon svg{width:26px;height:26px}
.point-card h3{
  font-size:20px;
  font-weight:700;
  color:var(--deep);
  margin-bottom:6px;
}
.point-card p{
  color:var(--text-2);
  font-size:15px;
  line-height:1.75;
}
.chip{
  display:inline-flex;
  align-items:center;
  width:auto;
  margin-top:13px;
  padding:4px 12px;
  background:var(--brand-soft);
  border-radius:999px;
  color:var(--brand-dark);
  font-size:13px;
  font-weight:600;
}
.point-card:nth-child(2) .chip{background:var(--aqua-soft);color:#087F75}
.point-card:nth-child(3) .chip{background:var(--orange-soft);color:#C64813}
.point-card:nth-child(4) .chip{background:#E9F8EF;color:#078243}

/* daily editorial */
.daily-card{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:32px;
  overflow:hidden;
  box-shadow:var(--shadow-md);
}
.daily-media{
  position:relative;
  min-height:420px;
  overflow:hidden;
}
.daily-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.daily-media:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(25deg,rgba(23,21,46,.06) 30%,rgba(23,21,46,.54) 100%);
}
.floating-note{
  position:absolute;
  z-index:2;
  left:18px;
  bottom:18px;
  background:rgba(23,21,46,.82);
  color:#fff;
  border-radius:16px;
  padding:13px 16px;
  font-size:14px;
  border:1px solid rgba(255,255,255,.2);
}
.floating-note strong{display:block;font-weight:700}
.floating-note span{color:var(--muted);font-size:12px}
.daily-copy{
  padding:52px 48px 48px 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.daily-copy .section-eyebrow{margin-bottom:12px}
.daily-copy h2{
  font-size:32px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--deep);
  line-height:1.3;
}
.daily-copy>p{
  margin-top:14px;
  color:var(--text-2);
  line-height:1.8;
}
.timeline-list{
  margin-top:28px;
  list-style:none;
  display:grid;
  gap:0;
}
.timeline-list li{
  display:flex;
  gap:18px;
  padding:13px 0;
  border-bottom:1px dashed #EAE6F7;
}
.timeline-list li:last-child{border-bottom:0}
.tl-time{
  flex:none;
  width:66px;
  font-size:14px;
  font-weight:800;
  color:var(--brand);
  letter-spacing:.03em;
  padding-top:3px;
  font-variant-numeric:tabular-nums;
}
.timeline-list li:nth-child(2) .tl-time{color:var(--aqua)}
.timeline-list li:nth-child(3) .tl-time{color:var(--orange)}
.timeline-list li:nth-child(4) .tl-time{color:var(--success)}
.tl-info h4{
  font-size:16px;
  font-weight:700;
  color:var(--deep);
}
.tl-info p{
  color:var(--text-2);
  font-size:14px;
  line-height:1.7;
  margin-top:3px;
}

/* phase band */
.phase-band{
  position:relative;
  padding:88px 0;
  background-color:#17152E;
  background-image:url("/assets/images/backpic/back-3.webp");
  background-size:cover;
  background-position:center;
  color:#fff;
  overflow:hidden;
}
.phase-band:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,rgba(23,21,46,.97) 24%,rgba(46,31,87,.86) 64%,rgba(6,193,176,.34) 100%);
}
.phase-band .container{
  position:relative;
  z-index:2;
}
.phase-band .section-head{margin-bottom:48px}
.phase-band .section-head h2{color:#fff}
.phase-band .section-head p{color:#D5CFE8}
.phase-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  align-items:start;
}
.phase-card{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  border-radius:24px;
  padding:26px 22px;
  transition:all .25s ease-out;
}
.phase-card:hover{
  background:rgba(255,255,255,.15);
  border-color:rgba(255,119,51,.5);
  transform:translateY(-6px);
}
.phase-card:nth-child(2){margin-top:22px}
.phase-card:nth-child(3){margin-top:8px}
.phase-card:nth-child(4){margin-top:28px}
.phase-no{
  font-size:13px;
  font-weight:800;
  color:var(--aqua);
  letter-spacing:.08em;
  display:flex;
  align-items:center;
  gap:8px;
}
.phase-card:nth-child(1) .phase-no{color:#81C3FF}
.phase-card:nth-child(2) .phase-no{color:var(--aqua)}
.phase-card:nth-child(3) .phase-no{color:var(--orange)}
.phase-card:nth-child(4) .phase-no{color:#B4F1DF}
.phase-card h3{
  color:#fff;
  font-size:19px;
  font-weight:700;
  letter-spacing:-.01em;
  margin:16px 0 9px;
}
.phase-card p{
  color:#CEC6E6;
  font-size:14px;
  line-height:1.7;
}
.phase-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  font-weight:600;
  color:#fff;
  margin-top:15px;
}
.phase-link span{transition:transform .2s ease}
.phase-link:hover span{transform:translateX(4px)}

/* comments */
.talk-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.talk-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:22px;
  padding:24px;
  box-shadow:var(--shadow-sm);
  transition:all .25s ease-out;
  position:relative;
}
.talk-card:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-4px);
  border-color:#DCD3FA;
}
.talk-quote-mark{
  font-size:44px;
  line-height:.6;
  color:var(--brand-soft);
  font-weight:900;
  height:26px;
}
.talk-card p{
  color:var(--text);
  font-size:15px;
  line-height:1.75;
  margin:12px 0 20px;
}
.talk-user{
  display:flex;
  align-items:center;
  gap:10px;
}
.talk-avatar{
  width:42px;height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:800;
  color:#fff;
  background:linear-gradient(145deg,var(--brand),#8F6CFF);
}
.talk-card:nth-child(2) .talk-avatar{background:linear-gradient(145deg,var(--aqua),#45D7C6)}
.talk-card:nth-child(3) .talk-avatar{background:linear-gradient(145deg,var(--orange),#FFAD76)}
.talk-user div strong{display:block;font-size:15px;color:var(--deep)}
.talk-user div span{font-size:13px;color:var(--text-2)}

/* faq */
.faq-wrap{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:28px;
  padding:36px;
  box-shadow:var(--shadow-sm);
}
.faq-list{
  display:grid;
  gap:14px;
}
.faq-item{
  border:1px solid var(--border);
  border-radius:18px;
  background:#FCFBFF;
  transition:border .2s ease,box-shadow .2s ease;
  overflow:hidden;
}
.faq-item[open]{
  border-color:var(--brand);
  box-shadow:0 16px 34px rgba(106,76,255,.1);
}
.faq-item summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:20px 22px;
  cursor:pointer;
  font-size:16px;
  font-weight:700;
  color:var(--deep);
  border-radius:18px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--brand)}
.faq-icon{
  position:relative;
  width:30px;height:30px;
  flex:none;
  border-radius:50%;
  background:var(--brand-soft);
  transition:all .25s ease;
}
.faq-icon:before,.faq-icon:after{
  content:"";
  position:absolute;
  left:9px;right:9px;top:14px;
  height:2px;
  border-radius:999px;
  background:var(--brand);
  transition:all .25s ease;
}
.faq-icon:after{transform:rotate(90deg)}
.faq-item[open] .faq-icon{background:var(--brand);transform:rotate(45deg)}
.faq-item[open] .faq-icon:before,.faq-item[open] .faq-icon:after{background:#fff}
.faq-body{
  padding:0 22px 22px;
  color:var(--text-2);
  border-top:1px dashed #EFEBF8;
}
.faq-body p{
  padding-top:16px;
  line-height:1.8;
}

/* cta */
.cta-band{
  position:relative;
  overflow:hidden;
  padding:90px 0 100px;
  background-color:#17152E;
  background-image:
    radial-gradient(680px 300px at 18% 20%,rgba(106,76,255,.46),transparent 70%),
    radial-gradient(520px 260px at 90% 80%,rgba(255,119,51,.28),transparent 65%),
    radial-gradient(320px 200px at 70% 10%,rgba(6,193,176,.2),transparent 60%);
  color:#fff;
  text-align:center;
}
.cta-band .section-head{display:flex;flex-direction:column;align-items:center}
.cta-band .section-head h2{color:#fff;font-size:40px}
.cta-band .section-head p{color:#CFCAE4}
.cta-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:16px;
  margin-top:32px;
}
.cta-note{
  margin-top:16px;
  color:#B5AECD;
  font-size:14px;
}

/* footer */
.site-footer{
  background:var(--deep);
  color:#E7E2F5;
  padding:72px 0 28px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr .7fr .8fr 1.2fr;
  gap:40px;
}
.footer-logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:24px;
  font-weight:800;
  color:#fff;
  letter-spacing:-.02em;
}
.footer-logo .logo-mark{width:38px;height:38px;font-size:18px}
.footer-desc{
  margin-top:16px;
  color:var(--muted);
  line-height:1.8;
  max-width:300px;
  font-size:15px;
}
.footer-col-title{
  color:#fff;
  font-size:15px;
  font-weight:700;
  margin-bottom:20px;
}
.footer-menu{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.footer-menu a{
  color:#BAB3D6;
  font-size:14px;
  transition:color .2s ease,transform .2s ease;
}
.footer-menu a:hover{
  color:#fff;
  transform:translateX(4px);
}
.footer-contact{
  display:flex;
  flex-direction:column;
  gap:12px;
  color:#BAB3D6;
  font-size:14px;
  line-height:1.7;
}
.footer-contact a{
  color:var(--aqua);
  text-decoration:underline;
  text-underline-offset:4px;
}
.footer-bottom{
  margin-top:48px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  color:#8B84A9;
  font-size:14px;
}
.footer-bottom a{color:#B0AAD1}
.footer-bottom a:hover{color:#fff}
.footer-legal{color:#686080;font-size:13px}

/* bottom tabbar */
.bottom-tabbar{
  position:fixed;
  display:none;
  left:0;
  right:0;
  bottom:0;
  z-index:99;
  height:calc(64px + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(255,255,255,.97);
  border-top:1px solid var(--border);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 -10px 26px rgba(26,18,70,.08);
}
.bottom-tabbar a{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:#81799E;
  font-size:13px;
  font-weight:600;
  border-radius:14px;
  transition:all .2s ease;
}
.bottom-tabbar a svg{width:22px;height:22px}
.bottom-tabbar a:hover{color:var(--brand)}
.bottom-tabbar a.active{
  color:var(--brand);
  background:var(--brand-soft);
}
.bottom-tabbar a:active{transform:scale(.96)}

/* responsive */
@media (max-width:1120px){
  .nav-desktop a{padding:0 13px;font-size:14px}
  .news-hero__inner{gap:32px}
  .hero-float--gaming{left:0}
  .hero-float--talk{right:0}
  .daily-copy{padding:40px 30px 36px 4px}
}

@media (max-width:1024px){
  body{
    padding-bottom:calc(70px + env(safe-area-inset-bottom));
  }
  .nav-desktop{display:none}
  .nav-cta{display:none}
  .nav-toggle{display:inline-flex}
  .bottom-tabbar{
    display:flex;
  }
  .news-hero{
    padding:64px 0 78px;
  }
  .news-hero__inner{
    grid-template-columns:1fr;
    gap:44px;
  }
  .news-hero__copy{
    text-align:center;
  }
  .hero-kicker{
    margin-inline:auto;
  }
  .hero-lead,.hero-sub{
    margin-left:auto;
    margin-right:auto;
  }
  .hero-actions,.hero-metrics{
    justify-content:center;
  }
  .daily-card{
    grid-template-columns:1fr;
  }
  .daily-media{
    min-height:360px;
  }
  .daily-copy{
    padding:40px 32px 42px;
  }
  .phase-grid{
    grid-template-columns:repeat(2,1fr);
    gap:18px;
  }
  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:36px;
  }
}

@media (max-width:768px){
  :root{
    --nav-h:62px;
  }
  .section{
    padding:56px 0;
  }
  .container,.container-wide{
    width:calc(100% - 32px);
  }
  .logo-text{
    font-size:21px;
  }
  .logo-mark{
    width:34px;height:34px;
    font-size:18px;
    border-radius:11px;
  }
  .hero-title{
    font-size:42px;
    margin-top:18px;
  }
  .hero-lead{
    font-size:19px;
  }
  .news-hero__stage{
    padding:8px 0;
  }
  .stage-card{
    width:min(330px,82%);
  }
  .hero-metrics li{
    padding-right:22px;
    margin-right:22px;
  }
  .section-head h2{
    font-size:28px;
  }
  .point-grid{
    grid-template-columns:1fr;
  }
  .point-card{
    padding:24px;
  }
  .daily-copy{
    padding:32px 24px 34px;
  }
  .daily-copy h2{
    font-size:26px;
  }
  .phase-band{
    padding:64px 0;
  }
  .phase-card:nth-child(2),.phase-card:nth-child(3),.phase-card:nth-child(4){
    margin-top:0;
  }
  .talk-grid{
    grid-template-columns:1fr;
  }
  .faq-wrap{
    padding:20px;
  }
  .cta-band{
    padding:64px 0 72px;
  }
  .cta-band .section-head h2{
    font-size:30px;
  }
}

@media (max-width:640px){
  .container,.container-wide{
    width:calc(100% - 28px);
  }
  .news-hero{
    padding:40px 0 60px;
  }
  .hero-title{
    font-size:35px;
  }
  .hero-actions .btn{
    width:100%;
    height:50px;
  }
  .hero-metrics{
    flex-wrap:wrap;
    gap:16px 12px;
    justify-content:center;
    border-top:0;
    padding-top:8px;
    margin-top:26px;
  }
  .hero-metrics li{
    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.12);
    border-radius:16px;
    padding:12px 18px;
    margin:0;
  }
  .hero-metrics strong{
    font-size:24px;
  }
  .hero-metrics span{
    font-size:13px;
  }
  .stage-card{
    width:min(300px,96%);
    aspect-ratio:9/16;
  }
  .hero-float{
    display:none;
  }
  .daily-media{
    min-height:260px;
  }
  .point-card{
    flex-direction:column;
    gap:12px;
  }
  .point-icon{
    width:48px;height:48px;
    border-radius:14px;
  }
  .phase-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
  .phase-card{
    padding:22px;
  }
  .talk-grid{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    gap:16px;
    padding-bottom:8px;
    scrollbar-width:none;
  }
  .talk-grid::-webkit-scrollbar{
    display:none;
  }
  .talk-card{
    min-width:284px;
    scroll-snap-align:start;
  }
  .faq-wrap{
    padding:8px;
    border-radius:20px;
  }
  .faq-item summary{
    padding:16px 16px;
    font-size:15px;
  }
  .faq-body{
    padding:0 16px 18px;
  }
  .footer-grid{
    grid-template-columns:1fr;
    gap:30px;
  }
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
  .bottom-tabbar{
    height:calc(58px + env(safe-area-inset-bottom));
  }
  .bottom-tabbar a{
    font-size:12px;
  }
  .bottom-tabbar a svg{
    width:20px;height:20px;
  }
}

@media (min-width:1025px){
  .site-mobile-drop,
  .nav-toggle{
    display:none !important;
  }
}

/* roulang page: category3 */
:root {
            --brand: #6A4CFF;
            --brand-dark: #5638E0;
            --brand-light: #EEE8FF;
            --aqua: #06C1B0;
            --aqua-dark: #0B9C91;
            --aqua-light: #E4FAF6;
            --orange: #FF7733;
            --orange-dark: #F0651F;
            --orange-light: #FFF1E8;
            --ink: #211D38;
            --ink-2: #5E5878;
            --muted: #8D87A6;
            --line: #E9E5F5;
            --bg: #F6F5FB;
            --white: #FFFFFF;
            --deep: #17152E;
            --deep-2: #221E3C;
            --deep-text: #A8A3C3;
            --danger: #F04343;
            --ok: #0CBB5A;
            --warn: #FFB818;
            --radius: 16px;
            --radius-lg: 24px;
            --radius-pill: 999px;
            --shadow: 0 12px 30px rgba(30, 20, 90, 0.06);
            --shadow-hover: 0 18px 42px rgba(30, 20, 90, 0.12);
            --header-h: 68px;
            --ease: cubic-bezier(.2, .7, .3, 1);
        }

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

        html {
            scroll-behavior: smooth;
            -webkit-text-size-adjust: 100%;
        }

        body {
            font-family: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
            color: var(--ink);
            background: var(--bg);
            line-height: 1.7;
            font-size: 16px;
            min-height: 100vh;
        }

        a {
            color: inherit;
            text-decoration: none;
            transition: color .2s var(--ease);
        }

        img {
            max-width: 100%;
            display: block;
            object-fit: cover;
        }

        button,
        input {
            font: inherit;
            border: none;
        }

        ul,
        ol {
            list-style: none;
        }

        main {
            overflow: clip;
        }

        :focus-visible {
            outline: 2px solid var(--brand);
            outline-offset: 3px;
            border-radius: 4px;
        }

        .container {
            max-width: 1200px;
            padding-inline: 20px;
            margin-inline: auto;
        }

        .container-wide {
            max-width: 1400px;
            padding-inline: 28px;
            margin-inline: auto;
        }

        .kicker {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--brand);
            font-weight: 700;
            font-size: 14px;
            letter-spacing: .04em;
            text-transform: uppercase;
        }

        .kicker::before {
            content: "";
            width: 18px;
            height: 4px;
            border-radius: 99px;
            background: linear-gradient(90deg, var(--brand), var(--aqua));
        }

        .grad-text {
            background: linear-gradient(92deg, var(--brand), var(--aqua) 90%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 44px;
            padding: 10px 22px;
            border-radius: var(--radius-pill);
            font-weight: 700;
            font-size: 15px;
            line-height: 1.4;
            transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
            cursor: pointer;
            white-space: nowrap;
            border: 1px solid transparent;
        }

        .btn-primary {
            background: var(--orange);
            color: #fff;
            box-shadow: 0 10px 24px rgba(255, 119, 51, .28);
        }

        .btn-primary:hover {
            background: var(--orange-dark);
            transform: translateY(-2px);
            box-shadow: 0 14px 30px rgba(255, 119, 51, .34);
        }

        .btn-primary:active {
            transform: translateY(1px);
            box-shadow: 0 4px 12px rgba(255, 119, 51, .2);
        }

        .btn-ghost {
            background: transparent;
            border-color: rgba(255, 255, 255, .28);
            color: #fff;
        }

        .btn-ghost:hover {
            border-color: var(--aqua);
            color: var(--aqua);
            background: rgba(6, 193, 176, .08);
            transform: translateY(-2px);
        }

        .btn-plain {
            background: var(--white);
            border: 1px solid var(--line);
            color: var(--ink);
            font-weight: 600;
        }

        .btn-plain:hover {
            color: var(--brand);
            border-color: var(--brand);
            background: var(--brand-light);
        }

        .btn .arrow {
            font-size: 18px;
            line-height: 1;
        }

        /* ===== 顶部导航 ===== */
        .site-header {
            height: var(--header-h);
            background: rgba(255, 255, 255, .94);
            border-bottom: 1px solid var(--line);
            position: sticky;
            top: 0;
            z-index: 100;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        .nav-wrap {
            height: var(--header-h);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
        }

        .logo {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .logo-mark {
            width: 36px;
            height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--brand), #9A7BFF);
            color: #fff;
            border-radius: 12px;
            font-size: 20px;
            font-weight: 900;
            box-shadow: 0 6px 16px rgba(106, 76, 255, .28);
        }

        .logo-text {
            font-size: 24px;
            font-weight: 800;
            color: var(--ink);
            letter-spacing: -0.02em;
        }

        .logo-accent {
            color: var(--brand);
            font-style: normal;
            font-weight: 800;
        }

        .nav-desktop {
            display: flex;
            align-items: center;
            gap: 28px;
        }

        .nav-desktop a {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 38px;
            padding: 0 14px;
            border-radius: 999px;
            font-weight: 500;
            color: var(--ink-2);
            font-size: 15px;
            transition: all .2s var(--ease);
        }

        .nav-desktop a:hover {
            color: var(--brand);
            background: var(--brand-light);
        }

        .nav-desktop a.active {
            background: var(--brand);
            color: #fff;
            font-weight: 600;
            box-shadow: 0 8px 20px rgba(106, 76, 255, .22);
        }

        .nav-right {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .nav-cta {
            display: inline-flex;
            align-items: center;
            min-height: 42px;
            padding-inline: 22px;
            background: var(--orange);
            color: #fff;
            font-weight: 700;
            border-radius: 999px;
            font-size: 14px;
            box-shadow: 0 8px 18px rgba(255, 119, 51, .25);
            transition: all .2s var(--ease);
        }

        .nav-cta:hover {
            background: var(--orange-dark);
            transform: translateY(-1px);
        }

        .nav-toggle {
            display: none;
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: transparent;
            color: var(--ink);
            align-items: center;
            justify-content: center;
        }

        /* ===== 分类 Hero ===== */
        .cat-hero {
            position: relative;
            background: linear-gradient(140deg, #1E1A36 0%, var(--deep) 60%, #2B2360 100%);
            color: #fff;
            overflow: hidden;
            padding: 90px 0 110px;
        }

        .cat-hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: url('/assets/images/backpic/back-1.webp');
            background-size: cover;
            background-position: center 20%;
            opacity: .18;
            mix-blend-mode: screen;
        }

        .cat-hero::after {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(520px 420px at 78% 10%, rgba(106, 76, 255, .3), transparent 70%),
                radial-gradient(420px 320px at 10% 100%, rgba(6, 193, 176, .2), transparent 70%);
            pointer-events: none;
        }

        .hero-inner {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: 1.02fr .9fr;
            gap: 64px;
            align-items: center;
        }

        .hero-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px;
            background: rgba(6, 193, 176, .14);
            border: 1px solid rgba(6, 193, 176, .35);
            color: var(--aqua);
            font-size: 13px;
            font-weight: 600;
            border-radius: var(--radius-pill);
        }

        .cat-hero h1 {
            font-size: clamp(42px, 6vw, 60px);
            font-weight: 800;
            line-height: 1.08;
            margin: 20px 0 18px;
            letter-spacing: -0.03em;
        }

        .cat-hero h1 .accent {
            color: var(--aqua);
            position: relative;
        }

        .hero-desc {
            font-size: 16px;
            line-height: 1.9;
            color: #CFCAE7;
            max-width: 560px;
            margin-bottom: 30px;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin-bottom: 32px;
        }

        .hero-facts {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 12px 28px;
            border-top: 1px solid rgba(255, 255, 255, .12);
            padding-top: 22px;
        }

        .facts-item {
            display: flex;
            align-items: baseline;
            gap: 8px;
            color: var(--deep-text);
            font-size: 13px;
        }

        .facts-item strong {
            color: #fff;
            font-size: 20px;
            font-weight: 800;
            letter-spacing: -.02em;
        }

        .hero-visual {
            position: relative;
            display: flex;
            justify-content: center;
            min-height: 560px;
        }

        .phone-shell {
            position: relative;
            width: 268px;
            height: 540px;
            background: rgba(255, 255, 255, .1);
            border-radius: 40px;
            padding: 10px;
            border: 1px solid rgba(255, 255, 255, .2);
            box-shadow: 0 40px 70px rgba(0, 0, 0, .3);
            backdrop-filter: blur(6px);
        }

        .phone-screen {
            width: 100%;
            height: 100%;
            border-radius: 31px;
            background-image: url('/assets/images/coverpic/cover-4.png');
            background-size: cover;
            background-position: center;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .phone-screen::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(20, 12, 46, .2) 0%, transparent 30%, rgba(17, 10, 40, .55) 78%, rgba(17, 10, 40, .88) 100%);
        }

        .phone-top-info {
            position: absolute;
            left: 14px;
            right: 14px;
            top: 14px;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        .phone-badge {
            background: rgba(255, 255, 255, .22);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, .25);
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 11px;
            color: #fff;
            letter-spacing: .02em;
            font-weight: 600;
        }

        .phone-reco {
            background: var(--orange);
            padding: 3px 8px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
        }

        .play-btn {
            position: relative;
            z-index: 3;
            width: 62px;
            height: 62px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .95);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--brand);
            box-shadow: 0 12px 36px rgba(0, 0, 0, .35);
            transition: transform .25s var(--ease), background .2s var(--ease), color .2s var(--ease);
        }

        .play-btn svg {
            width: 24px;
            height: 24px;
            margin-left: 3px;
            fill: currentColor;
        }

        .play-btn:hover {
            transform: scale(1.06);
            background: var(--brand);
            color: #fff;
        }

        .phone-bottom-desc {
            position: absolute;
            left: 18px;
            right: 18px;
            bottom: 18px;
            z-index: 2;
            color: #fff;
        }

        .phone-bottom-desc strong {
            display: block;
            font-size: 16px;
            margin-bottom: 2px;
            line-height: 1.35;
        }

        .phone-bottom-desc span {
            font-size: 12px;
            color: rgba(255, 255, 255, .72);
            display: block;
        }

        .comment-pop {
            position: absolute;
            z-index: 4;
            background: rgba(255, 255, 255, .96);
            color: var(--ink);
            padding: 12px 16px;
            border-radius: 14px;
            box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
            font-size: 13px;
            line-height: 1.5;
            animation: floaty 4s ease-in-out infinite;
            max-width: 230px;
        }

        .comment-pop b {
            display: block;
            color: var(--brand);
            font-size: 12px;
            margin-bottom: 2px;
        }

        .pop-1 {
            top: 60px;
            left: -40px;
        }

        .pop-2 {
            right: -54px;
            bottom: 130px;
            animation-delay: 1.2s;
        }

        .pop-3 {
            bottom: -18px;
            left: 10px;
            animation-delay: 2.1s;
            border: 1px solid var(--line);
        }

        @keyframes floaty {
            0%,
            100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-8px);
            }
        }

        /* ===== 页面通用 section ===== */
        .page-sec {
            padding: 76px 0 0;
        }

        .section-head {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 30px;
            margin-bottom: 30px;
        }

        .section-head h2 {
            font-size: clamp(27px, 4vw, 34px);
            font-weight: 800;
            letter-spacing: -0.03em;
            line-height: 1.25;
            margin-top: 8px;
        }

        .section-head .lead {
            color: var(--ink-2);
            max-width: 560px;
            font-size: 14px;
        }

        /* ===== 热玩内容区 ===== */
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 22px;
            margin-bottom: 22px;
        }

        .panel {
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: transform .25s var(--ease), box-shadow .25s var(--ease);
        }

        .panel:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
        }

        .spot-main {
            background: #fff;
            border: 0;
            overflow: hidden;
            position: relative;
            min-height: 420px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            border-radius: var(--radius-lg);
        }

        .spot-main img.spot-bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .spot-main::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(23, 21, 46, 0) 20%, rgba(23, 21, 46, .7) 100%);
        }

        .spot-body {
            position: relative;
            z-index: 2;
            padding: 30px;
            color: #fff;
        }

        .spot-tags {
            display: flex;
            gap: 8px;
            margin-bottom: 14px;
            flex-wrap: wrap;
        }

        .tag-m {
            background: rgba(255, 255, 255, .2);
            border: 1px solid rgba(255, 255, 255, .28);
            backdrop-filter: blur(8px);
            color: #fff;
            padding: 4px 12px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 600;
        }

        .spot-main h3 {
            font-size: 28px;
            font-weight: 800;
            line-height: 1.3;
            margin-bottom: 10px;
            letter-spacing: -.02em;
        }

        .spot-main p {
            color: rgba(255, 255, 255, .78);
            font-size: 14px;
            line-height: 1.8;
            max-width: 520px;
            margin-bottom: 20px;
        }

        .video-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #fff;
            font-weight: 700;
            font-size: 14px;
            min-height: 36px;
        }

        .video-link .circle-play {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--orange);
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .channel-side {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 30px;
            background: linear-gradient(150deg, #F4F0FF, #EEFBF9);
            border: 1px solid #EAE4FB;
            border-radius: var(--radius-lg);
        }

        .channel-side .kicker {
            color: var(--brand-dark);
        }

        .channel-side h3 {
            font-size: 24px;
            font-weight: 800;
            margin: 8px 0 18px;
        }

        .rank-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 0;
            border-bottom: 1px dashed rgba(90, 75, 160, .18);
        }

        .rank-row:last-child {
            border-bottom: 0;
        }

        .rank-index {
            width: 32px;
            font-size: 18px;
            font-weight: 800;
            color: var(--brand);
            font-variant-numeric: tabular-nums;
        }

        .rank-row:first-child .rank-index {
            color: var(--orange);
        }

        .rank-info {
            flex: 1;
        }

        .rank-info strong {
            display: block;
            font-size: 15px;
            line-height: 1.4;
        }

        .rank-info small {
            color: var(--muted);
            font-size: 12px;
        }

        .rank-dur {
            color: var(--ink-2);
            font-size: 12px;
            background: #fff;
            padding: 3px 8px;
            border-radius: 999px;
        }

        /* ===== 分类组合布局 ===== */
        .mix-grid {
            display: grid;
            grid-template-columns: 1.45fr .85fr;
            gap: 22px;
            margin-bottom: 22px;
        }

        .mix-vertical {
            display: flex;
            flex-direction: column;
            gap: 22px;
            min-width: 0;
        }

        .trend-card {
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            padding: 24px;
            box-shadow: var(--shadow);
            transition: transform .25s var(--ease), box-shadow .25s var(--ease);
        }

        .trend-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-hover);
        }

        .trend-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 14px;
        }

        .trend-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 18px;
            font-weight: 800;
        }

        .trend-title .icon-box {
            width: 30px;
            height: 30px;
            border-radius: 10px;
            background: var(--brand-light);
            color: var(--brand);
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .after-chip {
            color: var(--brand);
            font-size: 13px;
            font-weight: 600;
            background: var(--brand-light);
            padding: 4px 12px;
            border-radius: 999px;
        }

        .list-2 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
        }

        .mini-item {
            background: #FAF9FE;
            border-radius: 14px;
            padding: 12px;
            transition: background .2s var(--ease), transform .2s var(--ease);
        }

        .mini-item:hover {
            background: var(--brand-light);
            transform: translateY(-2px);
        }

        .mini-item .cover-mini {
            border-radius: 10px;
            margin-bottom: 10px;
            overflow: hidden;
            height: 86px;
        }

        .mini-item .cover-mini img {
            width: 100%;
            height: 100%;
        }

        .mini-item strong {
            display: block;
            font-size: 14px;
            line-height: 1.4;
            margin-bottom: 4px;
        }

        .mini-item small {
            color: var(--muted);
            font-size: 12px;
        }

        .topic-pool {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 18px;
        }

        .tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 14px;
            border-radius: 999px;
            background: var(--bg);
            border: 1px solid var(--line);
            color: var(--ink-2);
            font-size: 13px;
            font-weight: 500;
            transition: all .2s var(--ease);
            cursor: pointer;
        }

        .tag:hover {
            background: var(--brand-light);
            border-color: var(--brand);
            color: var(--brand);
            transform: translateY(-2px);
        }

        .tag.orange {
            background: var(--orange-light);
            border-color: #FFD0B8;
            color: #D85A1B;
        }

        .tag.orange:hover {
            background: var(--orange);
            color: #fff;
            border-color: var(--orange);
        }

        .tag.aqua {
            background: var(--aqua-light);
            border-color: #B7E6E1;
            color: #078F84;
        }

        .tag.aqua:hover {
            background: var(--aqua);
            color: #fff;
            border-color: var(--aqua);
        }

        .note-strip {
            background: linear-gradient(135deg, var(--deep), var(--deep-2));
            border-radius: var(--radius-lg);
            padding: 28px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 14px;
            color: #fff;
        }

        .note-strip h4 {
            font-size: 20px;
        }

        .note-strip p {
            color: var(--deep-text);
            font-size: 14px;
            line-height: 1.8;
        }

        .note-strip cite {
            font-style: normal;
            color: var(--aqua);
            font-size: 13px;
        }

        /* ===== 流程条 ===== */
        .stage-section {
            background: var(--deep);
            color: #fff;
            border-radius: 30px;
            overflow: hidden;
            position: relative;
        }

        .stage-section::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: url('/assets/images/backpic/back-2.webp');
            background-size: cover;
            opacity: .16;
            mix-blend-mode: screen;
        }

        .stage-inner {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: 1.08fr .92fr;
            gap: 60px;
            align-items: center;
            padding: 70px 0;
        }

        .stage-copy h2 {
            font-size: clamp(30px, 4vw, 40px);
            line-height: 1.25;
            font-weight: 800;
            letter-spacing: -.03em;
            margin-bottom: 14px;
        }

        .stage-copy > p {
            color: var(--deep-text);
            font-size: 15px;
            line-height: 1.9;
            max-width: 560px;
            margin-bottom: 36px;
        }

        .stage-list {
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        .stage-row {
            display: flex;
            align-items: flex-start;
            gap: 18px;
            padding: 22px 0;
            border-bottom: 1px solid rgba(255, 255, 255, .1);
        }

        .stage-row:last-child {
            border-bottom: 0;
        }

        .stage-num {
            flex: 0 0 auto;
            width: 42px;
            height: 42px;
            border-radius: 13px;
            background: rgba(255, 255, 255, .1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            color: var(--aqua);
            border: 1px solid rgba(255, 255, 255, .14);
        }

        .stage-row strong {
            display: block;
            font-size: 17px;
            margin-bottom: 6px;
        }

        .stage-row p {
            color: var(--deep-text);
            font-size: 14px;
            line-height: 1.7;
        }

        .stage-visual {
            background: rgba(255, 255, 255, .06);
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: 24px;
            padding: 30px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .stage-clip {
            display: flex;
            gap: 14px;
            background: rgba(255, 255, 255, .08);
            border-radius: 16px;
            align-items: center;
            padding: 12px;
            border: 1px solid rgba(255, 255, 255, .08);
        }

        .step-poster {
            flex: 0 0 auto;
            width: 88px;
            height: 110px;
            border-radius: 12px;
            overflow: hidden;
        }

        .step-poster img {
            width: 100%;
            height: 100%;
        }

        .clip-body strong {
            display: block;
            font-size: 15px;
            line-height: 1.5;
            margin-bottom: 6px;
        }

        .clip-body small {
            color: var(--deep-text);
            font-size: 12px;
            display: block;
            margin-bottom: 4px;
        }

        .progress-bar {
            height: 4px;
            border-radius: 999px;
            background: rgba(255, 255, 255, .16);
            overflow: hidden;
            margin-top: 6px;
        }

        .progress-bar span {
            display: block;
            height: 100%;
            background: var(--aqua);
            border-radius: 999px;
        }

        .float-score {
            background: rgba(106, 76, 255, .2);
            border: 1px solid rgba(106, 76, 255, .3);
            padding: 12px 18px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 13px;
        }

        .score-avatar {
            display: flex;
        }

        .score-avatar span {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--orange);
            border: 2px solid var(--deep);
            font-size: 12px;
            font-weight: 700;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-left: -8px;
        }

        .score-avatar span:first-child {
            margin-left: 0;
            background: var(--aqua);
        }

        .score-avatar span:last-child {
            background: var(--brand);
        }

        /* ===== 分类卡片四宫格 ===== */
        .guide-section {
            padding: 108px 0 0;
        }

        .aud-grid {
            display: grid;
            grid-template-columns: 1.35fr .85fr;
            grid-template-rows: auto auto;
            gap: 22px;
        }

        .level-hero {
            background: linear-gradient(160deg, #FFFFFF, #F7F3FF);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            min-height: 360px;
        }

        .level-img {
            height: 190px;
            overflow: hidden;
        }

        .level-img img {
            width: 100%;
            height: 100%;
        }

        .level-body {
            padding: 24px;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .level-body h3 {
            font-size: 24px;
            font-weight: 800;
            margin: 8px 0 10px;
        }

        .level-body p {
            color: var(--ink-2);
            line-height: 1.75;
            font-size: 14px;
            margin-bottom: 14px;
        }

        .detail-link {
            margin-top: auto;
            color: var(--brand);
            font-weight: 700;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 36px;
            transition: gap .2s var(--ease);
        }

        .detail-link:hover {
            gap: 14px;
        }

        .level-col {
            display: flex;
            flex-direction: column;
            gap: 22px;
        }

        .rule-card {
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            display: flex;
            padding: 18px;
            gap: 16px;
            transition: box-shadow .2s var(--ease), transform .2s var(--ease);
            min-height: 156px;
        }

        .rule-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow);
        }

        .rule-avatar {
            width: 90px;
            height: 118px;
            border-radius: 14px;
            overflow: hidden;
            flex: 0 0 auto;
        }

        .rule-avatar img {
            width: 100%;
            height: 100%;
        }

        .rule-info {
            display: flex;
            flex-direction: column;
        }

        .rule-info h4 {
            font-size: 16px;
            line-height: 1.45;
        }

        .rule-info p {
            font-size: 13px;
            color: var(--ink-2);
            margin-top: 6px;
            line-height: 1.6;
            display: box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .in-table {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }

        .badge-flag {
            background: var(--orange-light);
            border: 1px solid #FFE3D2;
            color: var(--orange-dark);
            font-weight: 700;
            font-size: 13px;
            padding: 3px 10px;
            border-radius: 999px;
        }

        /* ===== 数据带 ===== */
        .num-section {
            padding: 90px 0 0;
        }

        .num-panel {
            background: var(--deep);
            border-radius: var(--radius-lg);
            color: #fff;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            padding: 40px 24px;
            gap: 30px;
            position: relative;
            overflow: hidden;
        }

        .num-panel::after {
            content: "";
            position: absolute;
            right: -100px;
            bottom: -160px;
            width: 380px;
            height: 380px;
            background: radial-gradient(closest-side, rgba(255, 119, 51, .24), transparent);
        }

        .num-item {
            position: relative;
            z-index: 2;
            padding-inline: 24px;
            border-left: 1px solid rgba(255, 255, 255, .1);
        }

        .num-item:first-child {
            border-left: 0;
        }

        .num-item .num {
            font-size: 38px;
            font-weight: 900;
            letter-spacing: -0.04em;
            line-height: 1.1;
            display: flex;
            align-items: baseline;
            color: #fff;
        }

        .num-item .suffix {
            color: var(--aqua);
            font-size: 18px;
            margin-left: 5px;
        }

        .num-item .label {
            color: var(--deep-text);
            font-size: 13px;
            margin-top: 8px;
        }

        /* ===== FAQ ===== */
        .faq-section {
            padding: 100px 0 0;
        }

        .faq-wrap {
            max-width: 820px;
            margin-inline: auto;
            padding: 30px;
            background: #fff;
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
            border-radius: var(--radius-lg);
        }

        details.faq-item {
            border-bottom: 1px solid var(--line);
            padding: 18px 0;
        }

        details.faq-item:last-child {
            border-bottom: 0;
        }

        details.faq-item summary {
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            line-height: 1.6;
            color: var(--ink);
            min-height: 28px;
            transition: color .2s var(--ease);
        }

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

        details.faq-item summary:hover {
            color: var(--brand);
        }

        .faq-icon {
            flex: 0 0 auto;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--brand-light);
            color: var(--brand);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform .3s var(--ease), background .2s var(--ease);
        }

        details[open] .faq-icon {
            transform: rotate(45deg);
            background: var(--brand);
            color: #fff;
        }

        .faq-answer {
            padding: 14px 56px 6px 0;
            font-size: 14px;
            color: var(--ink-2);
            line-height: 1.8;
        }

        /* ===== CTA ===== */
        .cta-block {
            padding: 90px 0 0;
        }

        .cta-panel {
            background: linear-gradient(135deg, #191436, #2C1C66);
            border-radius: 32px;
            position: relative;
            overflow: hidden;
            padding: 60px 60px;
            text-align: center;
            color: #fff;
        }

        .cta-panel::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: url('/assets/images/backpic/back-3.webp');
            background-size: cover;
            background-position: center;
            opacity: .12;
            mix-blend-mode: overlay;
        }

        .cta-inner {
            position: relative;
            z-index: 2;
            max-width: 700px;
            margin-inline: auto;
        }

        .cta-inner h2 {
            font-size: clamp(28px, 5vw, 42px);
            font-weight: 800;
            line-height: 1.25;
            letter-spacing: -.03em;
            margin-bottom: 14px;
        }

        .cta-inner p {
            color: #C9C4E3;
            font-size: 15px;
            line-height: 1.8;
            margin-bottom: 28px;
        }

        .cta-inner .btn {
            min-width: 180px;
        }

        .cta-note {
            margin-top: 18px;
            font-size: 13px;
            color: #8E89AF;
        }

        /* ===== 页脚 ===== */
        .site-footer {
            background: var(--deep);
            margin-top: 100px;
            padding: 62px 0 28px;
            color: #CFCBE5;
            position: relative;
            z-index: 5;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1.6fr;
            gap: 42px;
            padding-bottom: 46px;
            border-bottom: 1px solid rgba(255, 255, 255, .08);
        }

        .footer-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 20px;
            font-weight: 800;
            color: #fff;
            margin-bottom: 12px;
        }

        .footer-desc {
            font-size: 14px;
            line-height: 1.8;
            color: var(--deep-text);
            max-width: 320px;
        }

        .footer-col-title {
            color: #fff;
            font-weight: 700;
            font-size: 15px;
            margin-bottom: 16px;
        }

        .footer-menu {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }

        .footer-menu a {
            color: var(--deep-text);
            font-size: 14px;
            line-height: 1.6;
            transition: color .2s var(--ease), transform .2s var(--ease);
        }

        .footer-menu a:hover {
            color: var(--aqua);
            transform: translateX(3px);
        }

        .footer-contact {
            display: flex;
            flex-direction: column;
            gap: 6px;
            font-size: 13px;
            color: var(--deep-text);
            line-height: 1.8;
        }

        .footer-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding-top: 26px;
            font-size: 13px;
            color: #8E89AF;
            flex-wrap: wrap;
        }

        .footer-bottom .footer-legal a {
            color: var(--deep-text);
            border-bottom: 1px solid rgba(255, 255, 255, .16);
        }

        .footer-legal a:hover {
            color: var(--aqua);
            border-bottom-color: var(--aqua);
        }

        /* ===== 移动底部导航 ===== */
        .mobile-tabbar {
            display: none;
        }

        /* ===== 响应式 ===== */
        @media (max-width: 1100px) {
            .hero-inner {
                grid-template-columns: 1fr .8fr;
                gap: 40px;
            }

            .pop-1 {
                left: 0;
            }

            .pop-2 {
                right: 0;
            }
        }

        @media (max-width: 1023px) {
            .nav-desktop {
                display: none;
            }

            .site-header {
                background: rgba(255, 255, 255, .92);
            }

            .nav-cta {
                display: none;
            }

            .nav-toggle {
                display: none;
            }

            .mobile-tabbar {
                display: flex;
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                z-index: 200;
                background: rgba(255, 255, 255, .97);
                backdrop-filter: blur(14px);
                -webkit-backdrop-filter: blur(14px);
                border-top: 1px solid var(--line);
                padding-bottom: env(safe-area-inset-bottom);
                min-height: 62px;
                box-shadow: 0 -6px 24px rgba(30, 20, 90, .06);
            }

            .mtab {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 3px;
                font-size: 11px;
                color: var(--muted);
                transition: color .2s var(--ease);
                padding-top: 8px;
                padding-bottom: 6px;
                min-height: 58px;
            }

            .mtab svg {
                width: 22px;
                height: 22px;
            }

            .mtab.active {
                color: var(--brand);
                font-weight: 700;
            }

            .mtab.active svg {
                color: var(--brand);
            }

            body {
                padding-bottom: 0;
            }

            body::after {
                content: "";
                display: block;
                height: 64px;
            }

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

            .hero-inner {
                grid-template-columns: 1fr;
                gap: 48px;
            }

            .cat-hero {
                padding: 64px 0 70px;
            }

            .hero-visual {
                min-height: 440px;
            }

            .feature-grid {
                grid-template-columns: 1fr;
            }

            .mix-grid {
                grid-template-columns: 1fr;
            }

            .aud-grid {
                grid-template-columns: 1fr;
            }

            .stage-inner {
                grid-template-columns: 1fr;
                gap: 40px;
                padding: 60px 0;
            }

            .stage-copy {
                order: 2;
            }

            .stage-visual {
                order: 1;
            }

            .num-panel {
                grid-template-columns: repeat(2, 1fr);
                gap: 24px;
            }

            .num-item {
                border-left: 0;
                padding-inline: 20px;
            }

            .cta-panel {
                padding: 44px 24px;
            }
        }

        @media (max-width: 640px) {
            .container,
            .container-wide {
                padding-inline: 16px;
            }

            .cat-hero h1 {
                font-size: 38px;
            }

            .hero-facts {
                gap: 12px 14px;
            }

            .facts-item strong {
                font-size: 18px;
            }

            .hero-visual {
                min-height: 520px;
                padding: 12px 8px 0;
            }

            .phone-shell {
                width: 250px;
                height: 505px;
            }

            .comment-pop {
                max-width: 180px;
                padding: 9px 12px;
                font-size: 12px;
            }

            .pop-1 {
                top: 30px;
            }

            .pop-2 {
                right: 0;
                bottom: 90px;
            }

            .pop-3 {
                display: none;
            }

            .section-head {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }

            .spot-main {
                min-height: 360px;
            }

            .spot-body {
                padding: 22px;
            }

            .spot-main h3 {
                font-size: 22px;
            }

            .channel-side {
                padding: 22px;
            }

            .list-2 {
                grid-template-columns: 1fr;
            }

            .mix-vertical {
                gap: 14px;
            }

            .trend-card {
                padding: 18px;
            }

            .trend-head {
                flex-wrap: wrap;
            }

            .aud-grid {
                gap: 16px;
            }

            .level-body {
                padding: 18px;
            }

            .rule-card {
                padding: 14px;
                flex-direction: column;
                gap: 12px;
            }

            .rule-avatar {
                width: 100%;
                height: 108px;
            }

            .num-panel {
                grid-template-columns: 1fr 1fr;
                gap: 26px 14px;
                padding: 28px 20px;
            }

            .num-item {
                padding-inline: 8px;
            }

            .num-item .num {
                font-size: 30px;
            }

            .faq-wrap {
                padding: 18px 14px;
            }

            .faq-answer {
                padding: 12px 20px 4px 0;
                font-size: 13px;
            }

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

            .footer-bottom {
                align-items: flex-start;
                flex-direction: column;
            }

            .cta-block {
                padding-top: 60px;
            }

            .cta-panel {
                border-radius: 22px;
                padding: 44px 20px;
            }

            .btn {
                width: 100%;
            }

            .btn-plain {
                width: 100%;
            }
        }

        @media (max-width: 420px) {
            .hero-actions {
                flex-direction: column;
            }

            .facts-item {
                font-size: 12px;
            }

            .hero-desc {
                font-size: 15px;
            }

            .num-panel {
                grid-template-columns: 1fr 1fr;
            }

            .num-item .num {
                font-size: 28px;
            }

            .num-item .label {
                font-size: 12px;
            }
        }

/* roulang page: category4 */
:root {
            --brand: #6A4CFF;
            --brand-hover: #5638E0;
            --brand-soft: #EEE8FF;
            --aqua: #06C1B0;
            --aqua-soft: #E4FAF6;
            --orange: #FF7733;
            --orange-hover: #F0651F;
            --orange-soft: #FFF1E8;
            --deep: #17152E;
            --deep-2: #211D3A;
            --deep-text: #A8A3C3;
            --bg-light: #F6F5FB;
            --white: #FFFFFF;
            --text: #211D38;
            --muted: #676180;
            --border: #E9E5F5;
            --radius-card: 16px;
            --radius-lg: 24px;
            --radius-pill: 999px;
            --shadow-card: 0 12px 30px rgba(30, 20, 90, 0.08);
            --shadow-hover: 0 18px 42px rgba(30, 20, 90, 0.14);
            --shadow-btn: 0 10px 22px rgba(255, 119, 51, 0.24);
            --tr: all .25s ease-out;
            --space-section: clamp(52px, 7vw, 96px);
            --max-width: 1200px;
        }

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

        html {
            scroll-behavior: smooth;
            -webkit-text-size-adjust: 100%;
        }

        body {
            font-family: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
            background: var(--bg-light);
            color: var(--text);
            line-height: 1.7;
            font-size: 15px;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

        body.menu-lock {
            overflow: hidden;
        }

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

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

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

        ul,
        ol {
            list-style: none;
        }

        h1,
        h2,
        h3,
        h4 {
            line-height: 1.25;
            font-weight: 800;
            color: var(--text);
        }

        a:focus-visible,
        button:focus-visible {
            outline: 2px solid var(--orange);
            outline-offset: 3px;
            border-radius: 6px;
        }

        .container {
            max-width: var(--max-width);
            margin: 0 auto;
            padding-left: 24px;
            padding-right: 24px;
        }

        .container-wide {
            max-width: 1400px;
            margin: 0 auto;
            padding-left: 24px;
            padding-right: 24px;
        }

        .section {
            padding-top: var(--space-section);
            padding-bottom: var(--space-section);
        }

        .section-head {
            max-width: 780px;
            margin-bottom: 40px;
        }

        .section-tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .04em;
            color: var(--brand-hover);
            background: var(--brand-soft);
            padding: 6px 14px;
            border-radius: var(--radius-pill);
            margin-bottom: 14px;
        }

        .section-tag.aqua {
            color: #078D80;
            background: var(--aqua-soft);
        }

        .section-tag.orange {
            color: #D95314;
            background: var(--orange-soft);
        }

        .section-head h2 {
            font-size: clamp(28px, 4vw, 38px);
            line-height: 1.18;
            margin-bottom: 14px;
            letter-spacing: -0.01em;
        }

        .section-head .lead {
            color: var(--muted);
            font-size: 16px;
            max-width: 660px;
            line-height: 1.8;
        }

        /* ===== 按钮 ===== */
        .btn-group {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            align-items: center;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 46px;
            padding: 0 22px;
            border-radius: var(--radius-pill);
            font-weight: 700;
            font-size: 15px;
            letter-spacing: .01em;
            transition: var(--tr);
            border: 1px solid transparent;
            white-space: nowrap;
        }

        .btn svg {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }

        .btn-orange {
            background: var(--orange);
            color: #fff;
            box-shadow: var(--shadow-btn);
        }

        .btn-orange:hover {
            background: var(--orange-hover);
            transform: translateY(-2px);
            box-shadow: 0 14px 28px rgba(240, 101, 31, .28);
        }

        .btn-brand {
            background: var(--brand);
            color: #fff;
            box-shadow: 0 10px 24px rgba(106, 76, 255, .24);
        }

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

        .btn-light {
            background: #fff;
            color: var(--text);
            border-color: var(--border);
        }

        .btn-light:hover {
            border-color: var(--brand);
            color: var(--brand-hover);
            transform: translateY(-2px);
            box-shadow: var(--shadow-card);
        }

        .btn-ghost-light {
            background: rgba(255, 255, 255, .06);
            color: #fff;
            border-color: rgba(255, 255, 255, .28);
            backdrop-filter: blur(8px);
        }

        .btn-ghost-light:hover {
            background: rgba(255, 255, 255, .14);
            border-color: rgba(255, 255, 255, .5);
            transform: translateY(-2px);
        }

        /* ===== 顶栏 ===== */
        .site-header {
            position: sticky;
            top: 0;
            z-index: 80;
            background: rgba(255, 255, 255, .92);
            backdrop-filter: blur(14px);
            border-bottom: 1px solid rgba(233, 229, 245, .8);
        }

        .nav-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 68px;
            gap: 16px;
        }

        .logo {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }

        .logo-mark {
            width: 38px;
            height: 38px;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--brand) 20%, #9455FF 90%);
            color: #fff;
            font-weight: 900;
            font-size: 21px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 20px rgba(106, 76, 255, .24);
        }

        .logo-text {
            font-size: 22px;
            font-weight: 900;
            color: var(--text);
            letter-spacing: -.02em;
            line-height: 1;
            display: flex;
            align-items: baseline;
        }

        .logo-text .logo-accent {
            color: var(--brand);
            margin-left: 1px;
        }

        .nav-desktop {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .nav-desktop a {
            display: inline-flex;
            align-items: center;
            padding: 9px 18px;
            border-radius: var(--radius-pill);
            font-size: 15px;
            font-weight: 600;
            color: var(--muted);
            transition: var(--tr);
            line-height: 1.4;
        }

        .nav-desktop a:hover {
            color: var(--brand-hover);
            background: var(--brand-soft);
        }

        .nav-desktop a.active {
            color: #fff;
            background: var(--brand);
            box-shadow: 0 7px 16px rgba(106, 76, 255, .26);
        }

        .nav-right {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
        }

        .nav-cta {
            display: inline-flex;
            align-items: center;
            min-height: 42px;
            padding: 0 18px;
            border-radius: var(--radius-pill);
            background: var(--deep);
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            gap: 6px;
            transition: var(--tr);
        }

        .nav-cta:hover {
            background: var(--brand);
            transform: translateY(-1px);
        }

        .nav-toggle {
            display: none;
            width: 40px;
            height: 40px;
            border-radius: 10px;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border);
            background: var(--white);
        }

        /* ===== Hero 页首 ===== */
        .page-hero {
            position: relative;
            background: linear-gradient(128deg, #17152E 0%, #221A45 46%, #3D1D59 100%);
            color: #fff;
            overflow: hidden;
            padding: clamp(52px, 7vw, 90px) 0 60px;
        }

        .page-hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background: url("/assets/images/backpic/back-1.webp") center / cover no-repeat;
            opacity: .18;
            mix-blend-mode: screen;
            pointer-events: none;
        }

        .page-hero::after {
            content: "";
            position: absolute;
            width: 420px;
            height: 420px;
            left: -100px;
            top: -80px;
            background: radial-gradient(circle, rgba(6, 193, 176, .24) 0%, transparent 68%);
            filter: blur(10px);
            pointer-events: none;
        }

        .hero-inner {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: minmax(0, 1.15fr) minmax(260px, .58fr);
            gap: 48px;
            align-items: center;
        }

        .hero-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .06em;
            padding: 6px 14px;
            border-radius: var(--radius-pill);
            background: rgba(255, 255, 255, .1);
            border: 1px solid rgba(255, 255, 255, .16);
            color: #E3DEFF;
            margin-bottom: 22px;
            text-transform: uppercase;
        }

        .page-hero h1 {
            font-size: clamp(42px, 6vw, 64px);
            color: #fff;
            line-height: 1;
            margin-bottom: 18px;
            letter-spacing: .01em;
        }

        .hero-lead {
            font-size: clamp(15px, 1.6vw, 17px);
            color: #D9D4F5;
            max-width: 620px;
            line-height: 1.9;
            margin-bottom: 28px;
        }

        .hero-lead strong {
            color: #fff;
        }

        .hero-btn-row {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin-bottom: 34px;
        }

        .hero-stats {
            display: flex;
            flex-wrap: wrap;
            gap: 18px;
            align-items: center;
        }

        .hero-stats li {
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: 16px;
            padding: 12px 18px;
            backdrop-filter: blur(6px);
        }

        .hero-stats strong {
            display: block;
            color: var(--orange);
            font-size: 20px;
            font-weight: 900;
        }

        .hero-stats span {
            font-size: 12px;
            color: #C9C3E6;
            letter-spacing: .02em;
        }

        .hero-media-wrap {
            position: relative;
            max-width: 290px;
            margin-left: auto;
            margin-right: 0;
        }

        .hero-phone {
            position: relative;
            aspect-ratio: 9 / 14;
            border-radius: 30px;
            overflow: hidden;
            border: 4px solid rgba(255, 255, 255, .22);
            box-shadow: 0 28px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08);
        }

        .hero-phone img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .6s ease;
        }

        .hero-phone:hover img {
            transform: scale(1.04);
        }

        .phone-top-tag {
            position: absolute;
            left: 12px;
            top: 12px;
            z-index: 2;
            background: rgba(23, 21, 46, .62);
            color: #fff;
            font-size: 12px;
            padding: 5px 10px;
            border-radius: var(--radius-pill);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, .16);
        }

        .phone-bottom-info {
            position: absolute;
            left: 10px;
            right: 10px;
            bottom: 12px;
            z-index: 2;
            border-radius: 16px;
            background: linear-gradient(180deg, rgba(10, 8, 24, 0) 0%, rgba(10, 8, 24, .9) 70%);
            padding: 38px 12px 12px;
            color: #fff;
        }

        .phone-bottom-info strong {
            display: block;
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 3px;
        }

        .phone-bottom-info span {
            font-size: 12px;
            color: #DAD5F0;
        }

        .play-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: var(--orange);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 3;
            box-shadow: 0 10px 24px rgba(255, 119, 51, .6);
            transition: var(--tr);
        }

        .play-btn:hover {
            transform: translate(-50%, -50%) scale(1.08);
            background: #FF904F;
        }

        .play-btn svg {
            width: 20px;
            height: 20px;
            margin-left: 2px;
        }

        .bubble {
            position: absolute;
            z-index: 3;
            background: rgba(255, 255, 255, .94);
            color: var(--text);
            font-size: 12px;
            font-weight: 700;
            padding: 7px 12px;
            border-radius: 14px;
            box-shadow: 0 10px 26px rgba(0, 0, 0, .2);
            white-space: nowrap;
            animation: floatBubble 4s ease-in-out infinite;
        }

        .bubble-one {
            top: 16%;
            right: -58px;
            animation-delay: .2s;
        }

        .bubble-two {
            top: 62%;
            left: -70px;
            animation-delay: .6s;
        }

        @keyframes floatBubble {
            0%,
            100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }

        /* ===== 图文叙事区 ===== */
        .about-story {
            position: relative;
            z-index: 1;
        }

        .story-grid {
            display: grid;
            grid-template-columns: .9fr 1.15fr;
            gap: 48px;
            align-items: center;
            margin-top: 10px;
        }

        .story-media {
            position: relative;
        }

        .story-media-img {
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-card);
            aspect-ratio: 4 / 4.6;
        }

        .story-media-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .story-media-card {
            position: absolute;
            left: 18px;
            bottom: 20px;
            background: rgba(255, 255, 255, .9);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            padding: 12px 16px;
            color: var(--text);
            box-shadow: 0 16px 32px rgba(30, 20, 90, .14);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .story-media-card i {
            font-style: normal;
            width: 10px;
            height: 10px;
            background: var(--aqua);
            border-radius: 50%;
            box-shadow: 0 0 0 4px var(--aqua-soft);
        }

        .story-copy p {
            color: var(--muted);
            line-height: 1.95;
            margin-bottom: 18px;
            font-size: 16px;
        }

        .story-copy p strong {
            color: var(--text);
        }

        .story-copy blockquote {
            margin: 24px 0;
            padding: 18px 22px;
            background: var(--brand-soft);
            border-left: 4px solid var(--brand);
            border-radius: 0 16px 16px 0;
            color: #2D2456;
            font-weight: 600;
        }

        .story-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 8px;
        }

        .story-tags span {
            display: inline-flex;
            padding: 7px 14px;
            border-radius: var(--radius-pill);
            background: var(--bg-light);
            border: 1px solid var(--border);
            color: var(--text);
            font-size: 13px;
            font-weight: 600;
        }

        .story-tags span.aqua {
            background: var(--aqua-soft);
            border-color: transparent;
            color: #078D80;
        }

        .story-tags span.orange {
            background: var(--orange-soft);
            border-color: transparent;
            color: #D95314;
        }

        /* ===== 办法 / Bento ===== */
        .method-section {
            background: #FDFCFF;
            border-block: 1px solid var(--border);
        }

        .method-grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 20px;
        }

        .method-card {
            position: relative;
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 24px;
            box-shadow: var(--shadow-card);
            overflow: hidden;
            transition: var(--tr);
            min-height: 260px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }

        .method-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
            border-color: #DCCBFF;
        }

        .method-card img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: .2;
            transition: opacity .3s;
        }

        .method-card:hover img {
            opacity: .26;
        }

        .method-card-content {
            position: relative;
            z-index: 2;
        }

        .method-num {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 38px;
            height: 38px;
            padding: 0 8px;
            border-radius: 12px;
            background: var(--brand-soft);
            color: var(--brand);
            font-size: 14px;
            font-weight: 900;
            margin-bottom: 14px;
        }

        .method-card h3 {
            font-size: 18px;
            font-weight: 800;
            margin-bottom: 8px;
        }

        .method-card p {
            color: var(--muted);
            line-height: 1.7;
            font-size: 14px;
        }

        .method-card.wide {
            grid-column: span 5;
        }

        .method-card.narrow {
            grid-column: span 4;
        }

        .method-card.extra {
            grid-column: span 3;
        }

        .method-card.accent-aqua .method-num {
            background: var(--aqua-soft);
            color: #078D80;
        }

        .method-card.accent-orange .method-num {
            background: var(--orange-soft);
            color: #D95314;
        }

        /* ===== 数据带 ===== */
        .stats-band {
            background: var(--deep);
            color: #fff;
            overflow: hidden;
            position: relative;
            padding: clamp(40px, 5vw, 66px) 0;
        }

        .stats-band::before {
            content: "";
            position: absolute;
            right: -120px;
            top: -150px;
            width: 480px;
            height: 480px;
            background: radial-gradient(circle, rgba(106, 76, 255, .4), transparent 70%);
            pointer-events: none;
        }

        .stats-band::after {
            content: "";
            position: absolute;
            left: -80px;
            bottom: -180px;
            width: 360px;
            height: 360px;
            background: radial-gradient(circle, rgba(255, 119, 51, .22), transparent 72%);
            pointer-events: none;
        }

        .stats-inner {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: 1.1fr 1fr;
            gap: 40px;
            align-items: center;
        }

        .stats-copy h2 {
            color: #fff;
            font-size: clamp(24px, 3vw, 34px);
            line-height: 1.25;
            margin-bottom: 12px;
        }

        .stats-copy p {
            color: var(--deep-text);
            font-size: 15px;
            max-width: 390px;
            line-height: 1.8;
        }

        .stats-items {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .stat-box {
            background: rgba(255, 255, 255, .06);
            border: 1px solid rgba(255, 255, 255, .1);
            backdrop-filter: blur(8px);
            border-radius: 20px;
            padding: 20px;
            transition: var(--tr);
        }

        .stat-box:hover {
            background: rgba(255, 255, 255, .1);
            transform: translateY(-3px);
        }

        .stat-num {
            font-size: 30px;
            font-weight: 900;
            letter-spacing: -.02em;
            margin-bottom: 5px;
            background: linear-gradient(135deg, #FFD8C4, var(--orange));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .stat-label {
            color: #CFC9F0;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .02em;
        }

        .stat-label small {
            display: block;
            color: var(--deep-text);
            font-weight: 400;
            margin-top: 2px;
            line-height: 1.6;
        }

        /* ===== 有你有我 / 共创流程 ===== */
        .join-section {}

        .join-grid {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 48px;
            align-items: start;
        }

        .step-list {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .step-item {
            position: relative;
            display: flex;
            gap: 18px;
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 22px 20px;
            transition: var(--tr);
        }

        .step-item:hover {
            box-shadow: var(--shadow-card);
            transform: translateX(4px);
            border-color: #DCCBFF;
        }

        .step-num {
            flex-shrink: 0;
            width: 46px;
            height: 46px;
            border-radius: 16px;
            background: linear-gradient(135deg, var(--brand), #8258FF);
            color: #fff;
            font-size: 15px;
            font-weight: 900;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 18px rgba(106, 76, 255, .22);
        }

        .step-item.aqua .step-num {
            background: linear-gradient(135deg, var(--aqua), #0ED9C5);
            box-shadow: 0 8px 18px rgba(6, 193, 176, .2);
        }

        .step-item h3 {
            font-size: 17px;
            margin-bottom: 6px;
        }

        .step-item p {
            color: var(--muted);
            font-size: 14px;
            line-height: 1.75;
        }

        .join-visual {
            position: sticky;
            top: 100px;
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-card);
            min-height: 380px;
        }

        .join-visual img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            inset: 0;
        }

        .join-visual .visual-mask {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(23, 21, 46, .15) 0%, rgba(23, 21, 46, .88) 95%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 26px;
            color: #fff;
        }

        .join-visual h3 {
            color: #fff;
            font-size: 22px;
            margin-bottom: 10px;
        }

        .join-visual p {
            font-size: 14px;
            color: #D3CED8;
            line-height: 1.8;
            margin-bottom: 16px;
        }

        .join-visual .btn {
            align-self: flex-start;
        }

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

        .faq-wrap {
            max-width: 840px;
            margin: 0 auto;
        }

        .faq-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .faq-item {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: 18px;
            transition: var(--tr);
            overflow: hidden;
        }

        .faq-item:hover,
        .faq-item.is-open {
            border-color: #D9CCFC;
            box-shadow: var(--shadow-card);
        }

        .faq-btn {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 20px 22px;
            text-align: left;
            font-size: 15px;
            font-weight: 700;
            color: var(--text);
            transition: var(--tr);
        }

        .faq-btn:hover {
            color: var(--brand-hover);
        }

        .faq-icon {
            flex-shrink: 0;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--brand-soft);
            color: var(--brand);
            transition: transform .3s ease, background .3s;
        }

        .faq-item.is-open .faq-icon {
            transform: rotate(45deg);
            background: var(--brand);
            color: #fff;
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height .35s ease;
        }

        .faq-answer-inner {
            padding: 0 22px 22px;
            color: var(--muted);
            font-size: 14.5px;
            line-height: 1.85;
            border-top: 1px solid transparent;
        }

        .faq-answer-inner p {
            margin-top: 6px;
        }

        .faq-item.is-open .faq-answer {
            max-height: 600px;
        }

        .faq-item.is-open .faq-answer-inner {
            border-top-color: var(--border);
        }

        /* ===== CTA 底部行动区 ===== */
        .cta-band {
            position: relative;
            background:
                radial-gradient(900px 340px at 16% 10%, rgba(106, 76, 255, .24), transparent 60%),
                radial-gradient(800px 260px at 88% 80%, rgba(255, 119, 51, .18), transparent 56%),
                var(--deep);
            border-radius: 0;
            padding: clamp(54px, 7vw, 90px) 0;
            color: #fff;
            overflow: hidden;
        }

        .cta-inner {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
            position: relative;
            z-index: 2;
        }

        .cta-inner h2 {
            color: #fff;
            font-size: clamp(28px, 4vw, 42px);
            line-height: 1.2;
            margin-bottom: 14px;
        }

        .cta-inner p {
            color: var(--deep-text);
            margin-bottom: 28px;
            font-size: 16px;
            line-height: 1.85;
        }

        .cta-inner .btn-group {
            justify-content: center;
        }

        /* ===== 页脚 ===== */
        .site-footer {
            background: var(--deep);
            color: #B5B0CB;
            padding-top: 64px;
        }

        .site-footer .container {
            max-width: 1200px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.4fr .8fr .8fr 1.1fr;
            gap: 48px;
            padding-bottom: 48px;
        }

        .footer-logo {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 20px;
            font-weight: 900;
            color: #fff;
            margin-bottom: 14px;
        }

        .footer-desc {
            font-size: 14px;
            line-height: 1.9;
            color: var(--deep-text);
            max-width: 320px;
        }

        .footer-col-title {
            color: #fff;
            font-size: 15px;
            font-weight: 800;
            margin-bottom: 16px;
            letter-spacing: .02em;
        }

        .footer-menu {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .footer-menu a {
            color: var(--deep-text);
            font-size: 14px;
            transition: color .25s, padding-left .25s;
            width: fit-content;
        }

        .footer-menu a:hover {
            color: #fff;
            padding-left: 4px;
        }

        .footer-contact {
            display: flex;
            flex-direction: column;
            gap: 12px;
            color: var(--deep-text);
            font-size: 14px;
            line-height: 1.8;
            word-break: break-all;
        }

        .footer-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            font-size: 12.5px;
            color: #7A7596;
            border-top: 1px solid rgba(255, 255, 255, .08);
            padding: 22px 0;
            flex-wrap: wrap;
        }

        .footer-bottom a {
            color: #938FB2;
            transition: color .2s;
        }

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

        /* ===== 移动端底部 Tab ===== */
        .tab-bar {
            display: none;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 90;
            background: rgba(255, 255, 255, .96);
            backdrop-filter: blur(12px);
            border-top: 1px solid var(--border);
            padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
            box-shadow: 0 -8px 24px rgba(30, 20, 90, .06);
        }

        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
            font-size: 11px;
            color: var(--muted);
            font-weight: 600;
            padding: 4px 0;
            border-radius: 12px;
            transition: var(--tr);
        }

        .tab-item svg {
            width: 20px;
            height: 20px;
            stroke-width: 2;
        }

        .tab-item.active {
            color: var(--brand);
            font-weight: 800;
        }

        .tab-item.active .tab-icon-bg {
            background: var(--brand-soft);
            border-radius: 20px;
        }

        .tab-item .tab-icon {
            padding: 5px 14px;
            border-radius: 20px;
            transition: background .3s;
        }

        @media (max-width: 1023.98px) {
            .nav-desktop {
                display: none;
            }

            .nav-toggle {
                display: none;
            }

            .tab-bar {
                display: flex;
            }

            body {
                padding-bottom: 64px;
            }

            .hero-inner {
                grid-template-columns: 1fr;
                gap: 34px;
            }

            .hero-media-wrap {
                max-width: 280px;
                margin: 0 auto;
                width: 100%;
            }

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

            .method-card.wide,
            .method-card.narrow,
            .method-card.extra {
                grid-column: span 6;
            }

            .join-grid {
                grid-template-columns: 1fr;
            }

            .join-visual {
                position: relative;
                top: auto;
                min-height: 300px;
            }

            .stats-inner {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 767.98px) {
            .container,
            .container-wide {
                padding-left: 16px;
                padding-right: 16px;
            }

            .site-header .nav-wrap {
                min-height: 60px;
            }

            .logo-mark {
                width: 34px;
                height: 34px;
                font-size: 18px;
                border-radius: 10px;
            }

            .logo-text {
                font-size: 19px;
            }

            .nav-right .nav-cta {
                min-height: 38px;
                padding: 0 14px;
                font-size: 13px;
                gap: 4px;
            }

            .page-hero {
                padding-top: 40px;
                padding-bottom: 50px;
            }

            .page-hero h1 {
                font-size: 34px;
            }

            .story-grid {
                grid-template-columns: 1fr;
                gap: 32px;
            }

            .story-media-img {
                aspect-ratio: 4 / 4.3;
            }

            .method-card.wide,
            .method-card.narrow,
            .method-card.extra {
                grid-column: span 12;
            }

            .method-card {
                min-height: 210px;
            }

            .stats-items {
                grid-template-columns: 1fr 1fr;
                gap: 10px;
            }

            .stat-box {
                padding: 16px;
            }

            .stat-num {
                font-size: 24px;
            }

            .step-item {
                padding: 18px 14px;
            }

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

            .footer-bottom {
                flex-direction: column;
                text-align: center;
                align-items: center;
            }

            .bubble {
                display: none;
            }
        }

        @media (max-width: 480px) {
            .hero-lead {
                font-size: 15px;
            }

            .btn-group {
                flex-direction: column;
                align-items: stretch;
            }

            .btn {
                width: 100%;
            }

            .hero-btn-row {
                flex-direction: column;
                align-items: stretch;
            }

            .hero-stats {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px;
            }

            .hero-stats li {
                padding: 10px 14px;
            }

            .stats-inner {
                gap: 24px;
            }

            .stats-items {
                grid-template-columns: 1fr;
            }
        }