/* roulang page: index */
:root {
    --bg: #0A1221;
    --bg2: #0F1B2E;
    --bg3: #07101E;
    --blue: #1C9CFF;
    --cyan: #55E6C1;
    --orange: #FF8256;
    --text: #F2F7FF;
    --muted: #B7C4DD;
    --dim: #7E8AA6;
    --line: rgba(255, 255, 255, 0.09);
    --glass: rgba(255, 255, 255, 0.055);
    --glass-high: rgba(255, 255, 255, 0.1);
    --gradient: linear-gradient(135deg, #1C9CFF 0%, #55E6C1 100%);
    --radius-btn: 10px;
    --radius-card: 18px;
    --radius-input: 12px;
    --radius-tag: 999px;
    --shadow: 0 16px 40px rgba(2, 8, 23, 0.45);
    --shadow-glow: 0 12px 30px rgba(28, 156, 255, 0.35);
    --container: 1200px;
    --header-h: 72px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
}

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

a:hover {
    color: var(--cyan);
}

.container {
    max-width: var(--container);
}

.section {
    padding: 96px 0;
    position: relative;
}

.section-alt {
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--cyan);
    text-transform: uppercase;
}

.section-tag::before {
    content: "";
    display: block;
    width: 4px;
    height: 18px;
    border-radius: 4px;
    background: var(--cyan);
    box-shadow: 0 0 12px rgba(85, 230, 193, 0.6);
}

.sec-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 38px;
    flex-wrap: wrap;
}

.sec-head h2,
.section-title {
    font-size: clamp(24px, 3.4vw, 38px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.5px;
    margin: 0;
    color: var(--text);
}

.sec-desc {
    color: var(--muted);
    font-size: 15px;
    max-width: 600px;
    margin: 12px 0 0;
}

.sec-desc-sm {
    color: var(--muted);
    font-size: 14px;
}

.more-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
    padding: 8px 2px;
}

.more-link i {
    transition: transform .2s ease;
}

.more-link:hover i {
    transform: translateX(4px);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 120;
    height: var(--header-h);
    background: linear-gradient(180deg, rgba(6, 13, 24, 0.92), rgba(10, 18, 33, 0.78));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
}

.site-header.scrolled {
    box-shadow: 0 10px 30px rgba(2, 8, 23, 0.5);
}

.header-inner {
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
}

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

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--gradient);
    font-size: 15px;
    font-weight: 800;
    color: #082033;
    letter-spacing: -1px;
    box-shadow: 0 0 22px rgba(28, 156, 255, 0.42);
}

.brand-name {
    font-size: 21px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.main-nav-list {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-link {
    position: relative;
    display: inline-block;
    padding: 9px 16px;
    border-radius: 10px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.nav-link:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
}

.nav-link.active {
    color: #fff;
    background: rgba(85, 230, 193, 0.1);
}

.nav-link.active::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--cyan);
    box-shadow: 0 0 8px rgba(85, 230, 193, 0.8);
}

.header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-nav-cta {
    padding: 8px 18px;
    font-size: 14px;
}

.nav-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: transparent;
    color: var(--text);
    border-radius: 12px;
    font-size: 18px;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

.nav-menu-toggle:hover,
.nav-menu-toggle:focus {
    border-color: var(--cyan);
    outline: none;
}

.mega-trigger-wrap {
    position: relative;
}

.mega-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-btn);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: all .2s;
}

.mega-trigger:hover,
.mega-trigger:focus {
    border-color: var(--cyan);
    color: var(--cyan);
    box-shadow: 0 0 0 4px rgba(85, 230, 193, 0.08);
    outline: none;
}

.mega-panel {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    width: 720px;
    max-width: calc(100vw - 12px);
    padding: 22px;
    background: rgba(13, 25, 43, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .22s, transform .22s, visibility .22s;
    z-index: 80;
}

.mega-open .mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-panel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.mega-col-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--cyan);
}

.mega-col-title i {
    font-size: 12px;
}

.mega-col-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mega-col-list a {
    display: block;
    padding: 10px 12px;
    border-radius: 11px;
    color: var(--muted);
    font-size: 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid transparent;
    transition: all .2s;
}

.mega-col-list a:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(85, 230, 193, 0.18);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--radius-btn);
    font-weight: 600;
    padding: 10px 20px;
    transition: all .22s;
}

.btn:focus,
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(85, 230, 193, 0.2);
}

.btn-primary {
    background: var(--gradient);
    color: #082033;
    border: 0;
    box-shadow: var(--shadow-glow);
}

.btn-primary:hover,
.btn-primary:active {
    color: #082033;
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(85, 230, 193, 0.3);
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text);
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--cyan);
    color: var(--cyan);
    box-shadow: 0 0 0 4px rgba(85, 230, 193, 0.08);
    transform: translateY(-1px);
}

.btn-lg {
    min-height: 48px;
    padding: 12px 26px;
    font-size: 16px;
}

.btn-sm {
    min-height: 36px;
    font-size: 13px;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    font-weight: 600;
    font-size: 12px;
    border-radius: var(--radius-tag);
    background: rgba(85, 230, 193, 0.12);
    color: var(--cyan);
}

.badge-orange {
    background: rgba(255, 130, 86, 0.12);
    color: var(--orange);
}

.hero {
    position: relative;
    padding: 130px 0 108px;
    overflow: hidden;
}

.hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(10, 18, 33, 0.98) 0%, rgba(10, 18, 33, 0.9) 46%, rgba(10, 18, 33, 0.58) 100%);
    z-index: 1;
}

.hero-lights {
    position: absolute;
    top: -20%;
    right: -10%;
    width: 46%;
    height: 80%;
    background: radial-gradient(circle at center, rgba(28, 156, 255, 0.14), transparent 68%);
    z-index: 1;
    pointer-events: none;
}

.hero .container {
    position: relative;
    z-index: 3;
}

.hero-inner {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 56px;
    align-items: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--radius-tag);
    padding: 7px 14px;
    background: rgba(85, 230, 193, 0.1);
    border: 1px solid rgba(85, 230, 193, 0.2);
    color: var(--cyan);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 22px;
    box-shadow: inset 0 0 22px rgba(85, 230, 193, 0.04);
}

.hero h1 {
    font-size: clamp(28px, 4.6vw, 54px);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -1px;
    color: var(--text);
    margin: 0 0 24px;
}

.hero h1 .grad-text {
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-lead {
    font-size: 17px;
    line-height: 1.9;
    color: var(--muted);
    max-width: 560px;
    margin-bottom: 34px;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.info-card {
    position: relative;
    padding: 22px 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    overflow: hidden;
}

.info-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
}

.info-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--cyan);
    margin-bottom: 14px;
    font-weight: 600;
}

.info-stat {
    font-size: clamp(24px, 3.4vw, 32px);
    font-weight: 800;
    color: var(--text);
    margin: 0 0 6px;
}

.info-sub {
    font-size: 13px;
    color: var(--dim);
    margin: 0;
}

.info-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.info-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--muted);
    padding: 8px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
}

.info-list li:last-child {
    border-bottom: 0;
}

.info-list i {
    color: var(--cyan);
    font-size: 12px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(85, 230, 193, 0.1);
}

.steps-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    position: relative;
    margin: 36px 0 28px;
}

.steps-track::before {
    content: "";
    position: absolute;
    top: 62px;
    left: 13%;
    right: 13%;
    height: 0;
    border-top: 1px dashed rgba(85, 230, 193, 0.4);
    z-index: 0;
}

.step-card {
    position: relative;
    z-index: 1;
    padding: 36px 28px 28px;
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    transition: all .25s ease;
}

.step-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(85, 230, 193, 0.22);
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.step-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.step-num {
    font-size: 52px;
    font-weight: 800;
    line-height: 1;
    color: rgba(28, 156, 255, 0.18);
    letter-spacing: -2px;
}

.step-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient);
    color: #082033;
    font-size: 17px;
    box-shadow: 0 0 20px rgba(28, 156, 255, 0.4);
}

.step-card h3 {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--text);
}

.step-card p {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.8;
    margin: 0;
}

.step-zone {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
    font-size: 13px;
    color: var(--dim);
}

.bottom-center {
    text-align: center;
    margin-top: 40px;
}

.case-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: var(--shadow);
}

.case-media {
    min-height: 100%;
    position: relative;
    overflow: hidden;
}

.case-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.case-media .media-tag {
    position: absolute;
    left: 16px;
    top: 16px;
}

.case-body {
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.case-body h3 {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 16px;
    line-height: 1.45;
}

.case-body p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.85;
}

.case-meta-list {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}

.case-meta-list li {
    display: flex;
    font-size: 14px;
    color: var(--muted);
    padding: 8px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.case-meta-list strong {
    min-width: 92px;
    color: var(--cyan);
    font-weight: 600;
}

.case-grid {
    display: grid;
    grid-template-columns: 1.5fr 0.85fr;
    gap: 24px;
}

.case-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.case-mini {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    flex: 1;
    transition: all .25s;
}

.case-mini:hover {
    border-color: rgba(85, 230, 193, 0.3);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.case-mini-img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    background: var(--bg3);
}

.case-mini-body {
    padding: 20px 22px;
}

.case-mini-body h4 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--text);
}

.case-mini-body p {
    font-size: 14px;
    margin: 0 0 12px;
    color: var(--muted);
    line-height: 1.7;
}

.case-note {
    margin-top: 28px;
    font-size: 14px;
    color: var(--dim);
    text-align: center;
}

.dynamic-section {
    background: radial-gradient(ellipse at 15% 10%, rgba(28, 156, 255, 0.05), transparent 60%),
                radial-gradient(ellipse at 85% 90%, rgba(85, 230, 193, 0.045), transparent 50%);
}

.news-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.8fr);
    gap: 28px;
}

.feed-panel {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-card);
    padding: 6px 30px;
    box-shadow: var(--shadow);
}

.feed-item {
    padding: 27px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

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

.feed-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 9px;
}

.feed-cat {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--cyan);
    background: rgba(85, 230, 193, 0.11);
    border: 1px solid rgba(85, 230, 193, 0.12);
    border-radius: var(--radius-tag);
    padding: 3px 11px;
}

.feed-time {
    font-size: 13px;
    color: var(--dim);
}

.feed-item h3 {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
    margin: 0 0 10px;
}

.feed-item h3 a {
    color: var(--text);
}

.feed-item h3 a:hover {
    color: var(--cyan);
}

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

.feed-item .read-more {
    font-size: 13px;
    font-weight: 600;
    color: var(--blue);
}

.feed-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    text-align: center;
    color: var(--dim);
}

.empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    color: var(--muted);
    font-size: 16px;
}

.feed-empty p {
    margin: 0;
    font-size: 14px;
}

.topic-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.topic-card-link {
    display: block;
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px;
    transition: all .22s;
    color: var(--text);
}

.topic-card-link:hover {
    color: var(--text);
    border-color: rgba(85, 230, 193, 0.25);
    background: rgba(85, 230, 193, 0.055);
    transform: translateY(-2px);
}

.topic-card-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px;
}

.topic-card-caption {
    color: var(--muted);
    font-size: 13px;
    margin: 0;
}

.topic-side-note {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-card);
    padding: 18px 20px;
}

.topic-side-note h4 {
    color: var(--cyan);
    font-size: 14px;
    margin-bottom: 10px;
}

.topic-side-note p {
    font-size: 13px;
    color: var(--muted);
    margin: 0;
    line-height: 1.8;
}

.faq-section {
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 60%);
}

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

.faq-wrap .accordion-item {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    margin-bottom: 14px;
    overflow: hidden;
    transition: border-color .25s, box-shadow .25s;
}

.faq-wrap .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-color: rgba(85, 230, 193, 0.45);
    box-shadow: 0 0 0 4px rgba(85, 230, 193, 0.06);
}

.faq-wrap .accordion-button {
    background: transparent;
    color: var(--text);
    font-weight: 700;
    font-size: 16px;
    padding: 20px 22px;
    line-height: 1.5;
    box-shadow: none;
}

.faq-wrap .accordion-button:hover {
    background: rgba(255, 255, 255, 0.04);
}

.faq-wrap .accordion-button:not(.collapsed) {
    color: var(--cyan);
    background: rgba(85, 230, 193, 0.06);
    box-shadow: none;
}

.faq-wrap .accordion-button:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(85, 230, 193, 0.13);
}

.faq-wrap .accordion-button::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f078";
    background: none;
    width: 1.3rem;
    height: 1.3rem;
    line-height: 1.3rem;
    text-align: center;
    color: var(--muted);
    transition: transform .3s, color .3s;
}

.faq-wrap .accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
    color: var(--cyan);
}

.faq-wrap .accordion-body {
    padding: 0 24px 22px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.85;
}

.cta-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
}

.cta-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
}

.cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(6, 13, 24, 0.96) 0%, rgba(10, 18, 33, 0.92) 45%, rgba(15, 27, 46, 0.8) 100%);
    z-index: 1;
}

.cta-section .container {
    position: relative;
    z-index: 2;
}

.cta-card {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 24px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 44px;
    box-shadow: var(--shadow);
}

.cta-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 44px;
    align-items: center;
}

.cta-left h2 {
    font-size: clamp(24px, 3.2vw, 34px);
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 16px;
}

.cta-left p {
    color: var(--muted);
    font-size: 15px;
}

.cta-left .point-list {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
}

.cta-left .point-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--muted);
    font-size: 14px;
    padding: 8px 0;
}

.cta-left .point-list i {
    color: var(--cyan);
    margin-top: 4px;
}

.cta-form .form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 7px;
}

.form-control,
.form-select {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: var(--radius-input);
    color: var(--text);
    font-size: 15px;
    padding: 10px 14px;
    min-height: 44px;
}

.form-control::placeholder {
    color: #5f6e88;
}

.form-control:focus,
.form-select:focus {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--cyan);
    color: var(--text);
    box-shadow: 0 0 0 0.25rem rgba(85, 230, 193, 0.09);
    outline: none;
}

.form-select option {
    background: var(--bg2);
    color: var(--text);
}

.form-hint {
    font-size: 12px;
    color: var(--dim);
    margin-top: 8px;
}

.form-success {
    text-align: center;
    padding: 30px 10px;
}

.success-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(85, 230, 193, 0.15);
    border: 1px solid rgba(85, 230, 193, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 23px;
    color: var(--cyan);
}

.form-success h4 {
    font-size: 19px;
    margin-bottom: 12px;
}

.form-success p {
    font-size: 14px;
    color: var(--muted);
    margin: 0 auto;
    max-width: 340px;
}

.site-footer {
    background: var(--bg3);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 64px;
    padding-bottom: 24px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.9fr 0.9fr 1fr;
    gap: 40px;
    margin-bottom: 48px;
}

.footer-brand .brand-name {
    font-size: 22px;
}

.footer-brand-tip {
    margin: 16px 0 0;
    color: var(--dim);
    font-size: 14px;
    max-width: 280px;
    line-height: 1.8;
}

.footer-title {
    font-size: 15px;
    color: var(--text);
    font-weight: 700;
    margin-bottom: 16px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.footer-links a,
.footer-contact span {
    color: var(--muted);
    font-size: 14px;
    transition: color .2s;
}

.footer-links a:hover {
    color: var(--cyan);
}

.footer-contact p {
    color: var(--dim);
    font-size: 13px;
    margin: 0 0 10px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--dim);
    font-size: 13px;
    flex-wrap: wrap;
}

.footer-bottom a {
    color: var(--dim);
}

.footer-bottom a:hover {
    color: var(--cyan);
}

@media (max-width: 1200px) {
    .container {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
}

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

    .header-inner {
        gap: 10px;
    }

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

    .main-nav-list {
        position: absolute;
        top: calc(var(--header-h) + 6px);
        left: 12px;
        right: 12px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 14px;
        background: rgba(10, 18, 33, 0.97);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 18px;
        box-shadow: var(--shadow);
        backdrop-filter: blur(18px);
        z-index: 100;
    }

    .nav-open .main-nav-list {
        display: flex;
    }

    .nav-link {
        padding: 10px 14px;
        display: flex;
    }

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

    .brand-name {
        font-size: 18px;
    }

    .btn-nav-cta {
        display: none;
    }

    .mega-trigger .mega-label {
        display: none;
    }

    .mega-trigger {
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
    }

    .mega-panel {
        width: calc(100vw - 24px);
        left: 12px;
        right: 12px;
    }

    .hero {
        padding: 84px 0 72px;
    }

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

    .hero-actions .btn {
        flex: 1;
    }

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

    .case-mini {
        flex-direction: row;
    }

    .case-mini-img {
        width: 230px;
        height: 100%;
        min-height: 150px;
        flex-shrink: 0;
    }

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

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

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

@media (max-width: 767px) {
    .hero h1 {
        font-size: 30px;
    }

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

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

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

    .steps-track {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .steps-track::before {
        display: none;
    }

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

    .case-media {
        min-height: 220px;
    }

    .case-mini {
        flex-direction: column;
    }

    .case-mini-img {
        width: 100%;
        height: 180px;
        min-height: 0;
    }

    .feed-panel {
        padding: 4px 18px;
    }

    .cta-card {
        padding: 28px 20px;
    }

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

    .mega-panel-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

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

    .hero {
        padding: 60px 0 56px;
    }

    .brand-name {
        font-size: 17px;
    }

    .brand-mark {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .header-actions {
        gap: 8px;
    }

    .hero h1 {
        font-size: 28px;
        letter-spacing: -0.5px;
    }

    .hero-badge {
        font-size: 12px;
    }

    .case-body {
        padding: 24px 18px;
    }

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

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

@media print {
    .site-header,
    .site-footer,
    .cta-section {
        display: none !important;
    }

    body {
        background: #fff;
        color: #111;
    }
}

/* roulang page: category1 */
:root {
            --bg-deep: #0A1221;
            --bg-secondary: #0F1B2E;
            --brand-blue: #1C9CFF;
            --brand-cyan: #55E6C1;
            --brand-orange: #FF8256;
            --text-high: #F2F7FF;
            --text-mid: #B7C4DD;
            --text-low: #7E8AA6;
            --border-glass: rgba(255, 255, 255, 0.10);
            --border-cyan: rgba(28, 156, 255, 0.35);
            --card-dark: rgba(255, 255, 255, 0.045);
            --card-highlight: rgba(255, 255, 255, 0.08);
            --radius-card: 18px;
            --radius-btn: 10px;
            --radius-control: 12px;
            --shadow-card: 0 18px 44px rgba(2, 8, 23, 0.42);
            --shadow-cyan: 0 0 26px rgba(28, 156, 255, 0.35);
            --container-width: 1200px;
            --space-xl: 96px;
            --space-lg: 64px;
            --space-md: 32px;
            --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
        }
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            margin: 0;
            font-family: var(--font-sans);
            background: var(--bg-deep);
            color: var(--text-mid);
            line-height: 1.78;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }
        a {
            color: var(--text-high);
            text-decoration: none;
            transition: color .2s ease;
        }
        a:hover {
            color: var(--brand-cyan);
        }
        img {
            max-width: 100%;
            display: block;
        }
        .container {
            max-width: var(--container-width);
            margin: 0 auto;
            padding-left: 20px;
            padding-right: 20px;
        }
        .btn {
            border-radius: var(--radius-btn);
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border: none;
            padding: 12px 24px;
            transition: all .22s ease;
            font-size: 15px;
            line-height: 1.4;
        }
        .btn-primary {
            background: linear-gradient(135deg, #1C9CFF 0%, #55E6C1 100%);
            color: #071220;
            box-shadow: 0 0 26px rgba(28, 156, 255, 0.24);
        }
        .btn-primary:hover {
            color: #071220;
            transform: translateY(-2px);
            box-shadow: 0 0 38px rgba(85, 230, 193, 0.35);
            background: linear-gradient(135deg, #33aaff 0%, #66f0cd 100%);
        }
        .btn-outline {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.18);
            color: var(--text-high);
        }
        .btn-outline:hover {
            border-color: var(--brand-cyan);
            color: var(--brand-cyan);
            background: rgba(85, 230, 193, 0.08);
            transform: translateY(-2px);
        }
        .site-header {
            position: sticky;
            top: 0;
            z-index: 1040;
            background: linear-gradient(180deg, rgba(8, 15, 28, 0.96) 0%, rgba(13, 22, 38, 0.88) 100%);
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            backdrop-filter: blur(14px);
        }
        .header-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 72px;
        }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
        }
        .brand-mark {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 15px;
            color: #0A1221;
            background: linear-gradient(135deg, #1C9CFF 0%, #55E6C1 100%);
            box-shadow: 0 0 20px rgba(85, 230, 193, 0.22);
            letter-spacing: .5px;
        }
        .brand-name {
            font-weight: 700;
            font-size: 22px;
            color: var(--text-high);
            letter-spacing: 1px;
        }
        .nav-menu-toggle {
            display: none;
            border: 1px solid rgba(255, 255, 255, 0.15);
            background: transparent;
            color: var(--text-high);
            width: 44px;
            height: 44px;
            border-radius: 12px;
            font-size: 19px;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .main-nav-list {
            list-style: none;
            display: flex;
            align-items: center;
            gap: 6px;
            margin: 0;
            padding: 0;
        }
        .main-nav-list li {
            margin: 0;
            padding: 0;
        }
        .nav-link {
            display: inline-block;
            padding: 10px 14px;
            font-size: 15px;
            color: var(--text-mid);
            border-radius: 999px;
            position: relative;
            font-weight: 500;
        }
        .nav-link:hover,
        .nav-link:focus {
            color: var(--text-high);
            background: rgba(255, 255, 255, 0.04);
        }
        .nav-link.active {
            color: var(--brand-cyan);
            background: rgba(85, 230, 193, 0.10);
            font-weight: 600;
        }
        .nav-link.active::after {
            content: "";
            position: absolute;
            left: 14px;
            right: 14px;
            bottom: 4px;
            height: 2px;
            background: var(--brand-cyan);
            border-radius: 2px;
        }
        .header-actions {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .btn-nav-cta {
            padding: 10px 20px;
            font-size: 14px;
        }
        .mega-trigger-wrap {
            position: relative;
        }
        .mega-trigger {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 999px;
            padding: 10px 18px;
            color: var(--text-high);
            font-size: 14px;
            transition: all .2s;
        }
        .mega-trigger:hover {
            border-color: rgba(85, 230, 193, 0.5);
            background: rgba(85, 230, 193, 0.08);
        }
        .mega-panel {
            position: absolute;
            right: 0;
            top: calc(100% + 16px);
            width: 720px;
            max-width: calc(100vw - 32px);
            padding: 24px;
            background: rgba(13, 22, 38, 0.94);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: 20px;
            box-shadow: var(--shadow-card);
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px) scale(0.99);
            transition: all .22s ease;
        }
        .mega-trigger-wrap.is-open .mega-panel {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }
        .mega-panel-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }
        .mega-col-title {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-high);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .mega-col-title i {
            color: var(--brand-cyan);
        }
        .mega-col-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .mega-col-list a {
            color: var(--text-mid);
            font-size: 14px;
            padding: 6px 10px;
            border-radius: 8px;
            transition: all .2s;
        }
        .mega-col-list a:hover {
            color: var(--brand-cyan);
            background: rgba(85, 230, 193, 0.06);
        }
        @media (max-width: 991.98px) {
            .nav-menu-toggle {
                display: inline-flex;
            }
            .main-nav-list {
                position: absolute;
                top: 72px;
                left: 0;
                right: 0;
                background: rgba(9, 16, 28, 0.98);
                backdrop-filter: blur(16px);
                flex-direction: column;
                align-items: stretch;
                padding: 12px 20px 18px;
                gap: 4px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.08);
                display: none;
                box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
            }
            .header-nav-open .main-nav-list {
                display: flex;
            }
            .nav-link {
                display: block;
                padding: 12px 12px;
                border-radius: 10px;
            }
            .main-nav-list .nav-link.active::after {
                display: none;
            }
            .header-actions {
                margin-left: auto;
                margin-right: 0;
            }
            .btn-nav-cta {
                display: none;
            }
            .mega-label {
                display: none;
            }
        }
        @media (max-width: 576px) {
            .container {
                padding-left: 16px;
                padding-right: 16px;
            }
            .brand-name {
                font-size: 19px;
            }
            .brand-mark {
                width: 36px;
                height: 36px;
            }
            .header-inner {
                min-height: 66px;
            }
            .mega-trigger {
                padding: 10px 12px;
            }
            .mega-panel {
                width: calc(100vw - 24px);
                max-width: none;
                left: 0;
                right: auto;
                padding: 18px;
                top: calc(100% + 10px);
            }
        }

        /* ===== 分类页 Hero ===== */
        .cat-hero {
            position: relative;
            padding: 76px 0 92px;
            background:
                linear-gradient(90deg, rgba(8, 14, 26, 0.94) 0%, rgba(8, 14, 26, 0.80) 40%, rgba(11, 25, 40, 0.62) 100%),
                url('/assets/images/backpic/back-1.png') center center / cover no-repeat;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }
        .cat-hero::after {
            content: "";
            position: absolute;
            right: -10%;
            top: 20%;
            width: 380px;
            height: 380px;
            background: radial-gradient(circle, rgba(28, 156, 255, 0.14) 0%, transparent 68%);
            border-radius: 50%;
            pointer-events: none;
        }
        .cat-hero-inner {
            position: relative;
            z-index: 2;
            max-width: 760px;
        }
        .breadcrumb {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            list-style: none;
            margin: 0 0 20px;
            padding: 0;
            font-size: 14px;
            color: var(--text-low);
        }
        .breadcrumb a {
            color: var(--text-mid);
            transition: color .2s;
        }
        .breadcrumb a:hover {
            color: var(--brand-cyan);
        }
        .breadcrumb .sep {
            color: var(--text-low);
        }
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(28, 156, 255, 0.10);
            border: 1px solid rgba(28, 156, 255, 0.22);
            color: var(--brand-cyan);
            border-radius: 999px;
            padding: 6px 16px;
            font-size: 13px;
            letter-spacing: 1px;
            margin-bottom: 22px;
        }
        .cat-hero h1 {
            font-size: clamp(32px, 4.4vw, 56px);
            font-weight: 800;
            line-height: 1.2;
            color: var(--text-high);
            margin: 0 0 18px;
            letter-spacing: 0.5px;
        }
        .cat-hero h1 span {
            background: linear-gradient(90deg, var(--brand-cyan), var(--brand-blue));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .cat-hero-lead {
            font-size: 17px;
            line-height: 1.9;
            color: var(--text-mid);
            margin-bottom: 28px;
            max-width: 680px;
        }
        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
        }
        @media (max-width: 576px) {
            .cat-hero {
                padding: 44px 0 58px;
                background:
                    linear-gradient(180deg, rgba(8, 14, 26, 0.95) 0%, rgba(10, 20, 34, 0.80) 100%),
                    url('/assets/images/backpic/back-1.png') center center / cover no-repeat;
            }
            .cat-hero h1 {
                font-size: 32px;
            }
            .cat-hero-lead {
                font-size: 15px;
            }
            .hero-actions .btn {
                width: 100%;
            }
        }
        @media (min-width: 768px) and (max-width: 991px) {
            .cat-hero {
                padding: 56px 0 72px;
            }
            .cat-hero-inner {
                max-width: 640px;
            }
        }

        .section {
            padding: var(--space-xl) 0;
        }
        .section + .section {
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }
        .section-head {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            margin-bottom: 40px;
            gap: 24px;
        }
        .sec-tag {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: var(--brand-cyan);
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 10px;
        }
        .sec-tag::before {
            content: "";
            width: 4px;
            height: 16px;
            border-radius: 4px;
            background: var(--brand-cyan);
            display: inline-block;
        }
        .section-head h2 {
            font-size: clamp(26px, 3vw, 38px);
            color: var(--text-high);
            font-weight: 700;
            margin: 0;
            line-height: 1.3;
        }
        .section-head-sub {
            font-size: 15px;
            color: var(--text-low);
            max-width: 420px;
            margin: 6px 0 0;
        }
        .section-prefix {
            color: var(--text-mid);
            font-size: 15px;
            margin-top: 6px;
        }

        /* 频道概览 */
        .overview-block {
            background:
                radial-gradient(circle at 10% 20%, rgba(85, 230, 193, 0.07), transparent 36%),
                var(--bg-secondary);
        }
        .overview-grid {
            display: grid;
            grid-template-columns: 6fr 5fr;
            gap: 44px;
            align-items: center;
        }
        .overview-content h2 {
            color: var(--text-high);
            font-size: clamp(24px, 2.6vw, 34px);
            line-height: 1.45;
            margin: 0 0 18px;
            font-weight: 700;
        }
        .overview-content p {
            color: var(--text-mid);
            line-height: 1.9;
            margin-bottom: 16px;
        }
        .overview-points {
            list-style: none;
            margin: 18px 0 0;
            padding: 0;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        .overview-points li {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 12px;
            padding: 12px 14px;
            color: var(--text-mid);
            font-size: 14px;
            display: flex;
            gap: 10px;
            align-items: center;
        }
        .overview-points i {
            color: var(--brand-cyan);
        }
        .overview-stats {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
        }
        .stat-card {
            background: var(--card-dark);
            border: 1px solid var(--border-glass);
            border-top: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: var(--radius-card);
            padding: 20px;
            box-shadow: var(--shadow-card);
            transition: border-color .25s, transform .25s;
        }
        .stat-card:hover {
            transform: translateY(-4px);
            border-color: rgba(85, 230, 193, 0.36);
        }
        .stat-card .stat-num {
            font-size: 30px;
            font-weight: 800;
            color: var(--text-high);
            line-height: 1.2;
        }
        .stat-card .stat-label {
            font-size: 14px;
            color: var(--text-mid);
            margin-top: 8px;
        }
        @media (max-width: 991.98px) {
            .overview-grid {
                grid-template-columns: 1fr;
                gap: 28px;
            }
            .overview-content p {
                margin-bottom: 10px;
            }
            .section-head {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }
        }
        @media (max-width: 576px) {
            .overview-points {
                grid-template-columns: 1fr;
            }
            .overview-stats {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .stat-card .stat-num {
                font-size: 25px;
            }
        }

        /* 项目矩阵 */
        .project-grid-section {
            background: var(--bg-deep);
        }
        .project-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 20px;
        }
        .project-card {
            position: relative;
            border-radius: var(--radius-card);
            overflow: hidden;
            background: var(--bg-secondary);
            border: 1px solid rgba(255, 255, 255, 0.08);
            min-height: 260px;
            display: flex;
            align-items: flex-end;
            box-shadow: var(--shadow-card);
            transition: transform .3s ease, border-color .3s ease;
        }
        .project-card:hover {
            transform: translateY(-5px);
            border-color: rgba(28, 156, 255, 0.45);
        }
        .project-card img.bg-card {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .4s ease;
        }
        .project-card:hover img.bg-card {
            transform: scale(1.04);
        }
        .project-card-content {
            position: relative;
            z-index: 2;
            padding: 18px;
            width: 100%;
            background: linear-gradient(180deg, transparent 0%, rgba(5, 10, 20, 0.28) 20%, rgba(5, 10, 20, 0.92) 100%);
        }
        .project-card-content .chip {
            display: inline-block;
            font-size: 12px;
            background: rgba(255, 255, 255, 0.13);
            color: var(--text-high);
            border-radius: 999px;
            padding: 3px 12px;
            margin-bottom: 9px;
        }
        .project-card-content h3 {
            color: #fff;
            font-size: 20px;
            font-weight: 700;
            margin: 0 0 6px;
        }
        .project-card-content p {
            color: var(--text-mid);
            font-size: 13px;
            margin: 0;
        }
        @media (max-width: 991.98px) {
            .project-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .project-card {
                min-height: 210px;
            }
        }
        @media (max-width: 576px) {
            .project-grid {
                grid-template-columns: 1fr;
            }
            .project-card {
                min-height: 220px;
            }
        }

        /* 内容形态 */
        .format-block {
            background: var(--bg-secondary);
            position: relative;
        }
        .format-row {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 20px;
            margin-top: 36px;
        }
        .format-large {
            grid-column: span 5;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: var(--radius-card);
            padding: 26px;
            position: relative;
            overflow: hidden;
            min-height: 300px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }
        .format-large .format-bg {
            position: absolute;
            inset: 0;
        }
        .format-large .format-bg img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .format-large::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(8, 12, 22, .38), rgba(8, 12, 22, .96));
        }
        .format-large .format-content {
            position: relative;
            z-index: 2;
        }
        .format-large h3 {
            color: #fff;
            font-size: 26px;
            font-weight: 700;
            margin: 0 0 8px;
        }
        .format-large p {
            color: var(--text-mid);
            font-size: 15px;
            margin: 0;
            line-height: 1.75;
        }
        .format-grid {
            grid-column: span 7;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }
        .format-card {
            background: rgba(255, 255, 255, 0.035);
            border: 1px solid rgba(255, 255, 255, 0.082);
            border-top: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: var(--radius-card);
            padding: 22px;
            box-shadow: var(--shadow-card);
            transition: border-color .25s, transform .25s;
        }
        .format-card:hover {
            border-color: rgba(28, 156, 255, 0.4);
            transform: translateY(-3px);
        }
        .format-card .icon-wrap {
            width: 46px;
            height: 46px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            border-radius: 14px;
            background: rgba(28, 156, 255, 0.1);
            color: var(--brand-cyan);
            margin-bottom: 12px;
        }
        .format-card h4 {
            color: var(--text-high);
            font-size: 17px;
            font-weight: 700;
            margin: 0 0 8px;
        }
        .format-card p {
            color: var(--text-mid);
            font-size: 14px;
            margin: 0;
            line-height: 1.7;
        }
        @media (max-width: 991.98px) {
            .format-row {
                display: flex;
                flex-direction: column;
            }
            .format-large,
            .format-grid {
                width: 100%;
            }
            .format-large {
                height: 280px;
            }
        }
        @media (max-width: 576px) {
            .format-grid {
                grid-template-columns: 1fr;
            }
            .format-large {
                min-height: 240px;
                padding: 20px;
            }
            .format-large h3 {
                font-size: 22px;
            }
            .section {
                padding: 56px 0;
            }
        }

        /* 阅读场景 */
        .scene-grid {
            display: grid;
            grid-template-columns: 3fr 5fr;
            gap: 28px;
            align-items: stretch;
        }
        .scene-main-card {
            background: var(--card-dark);
            border: 1px solid var(--border-glass);
            border-radius: var(--radius-card);
            overflow: hidden;
            box-shadow: var(--shadow-card);
            display: flex;
            flex-direction: column;
        }
        .scene-main-img {
            height: 250px;
            overflow: hidden;
        }
        .scene-main-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .scene-main-card .scene-main-content {
            padding: 24px;
        }
        .scene-main-card h3 {
            color: var(--text-high);
            font-size: 18px;
            margin: 0 0 8px;
            font-weight: 700;
        }
        .scene-main-card p {
            color: var(--text-mid);
            font-size: 14px;
            margin: 0;
        }
        .scene-list {
            display: grid;
            gap: 16px;
        }
        .scene-item {
            display: grid;
            grid-template-columns: 112px 1fr;
            gap: 18px;
            background: var(--card-dark);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            padding: 12px;
            align-items: center;
            transition: all .25s;
        }
        .scene-item:hover {
            border-color: rgba(85, 230, 193, 0.3);
            transform: translateX(4px);
        }
        .scene-item img {
            width: 112px;
            height: 84px;
            object-fit: cover;
            border-radius: 12px;
        }
        .scene-item h4 {
            color: var(--text-high);
            font-size: 15px;
            margin: 0 0 4px;
        }
        .scene-item p {
            color: var(--text-mid);
            font-size: 13px;
            margin: 0;
            line-height: 1.6;
        }
        @media (max-width: 991.98px) {
            .scene-grid {
                grid-template-columns: 1fr;
            }
        }
        @media (max-width: 576px) {
            .scene-item {
                grid-template-columns: 1fr;
                gap: 10px;
            }
            .scene-item img {
                width: 100%;
                height: 160px;
            }
        }

        /* 标签热区 */
        .tags-block {
            background:
                linear-gradient(90deg, rgba(28, 156, 255, 0.05), transparent),
                var(--bg-secondary);
        }
        .tag-cloud {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            background: rgba(10, 18, 33, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: var(--radius-card);
            padding: 28px;
            box-shadow: var(--shadow-card);
        }
        .tag-cloud a {
            display: inline-block;
            font-size: 14px;
            color: var(--text-mid);
            padding: 9px 18px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.03);
            transition: all .2s;
        }
        .tag-cloud a:hover {
            color: var(--brand-cyan);
            border-color: rgba(85, 230, 193, 0.4);
            background: rgba(85, 230, 193, 0.06);
            transform: translateY(-2px);
        }
        .tag-cloud a .tag-total {
            color: var(--text-low);
            font-size: 12px;
            margin-left: 6px;
        }

        /* FAQ */
        .faq-section {
            background: var(--bg-deep);
        }
        .faq-layout {
            display: grid;
            grid-template-columns: 5fr 7fr;
            gap: 32px;
        }
        .faq-intro h2 {
            font-size: 30px;
            color: var(--text-high);
            margin: 0 0 14px;
        }
        .faq-intro p {
            color: var(--text-mid);
            line-height: 1.8;
            margin-bottom: 18px;
        }
        .faq-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .faq-item {
            background: rgba(255, 255, 255, 0.035);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            overflow: hidden;
            transition: border-color .25s;
        }
        .faq-item[open] {
            border-color: rgba(85, 230, 193, 0.42);
        }
        .faq-item summary {
            list-style: none;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 14px;
            padding: 17px 22px;
            min-height: 58px;
            font-weight: 600;
            color: var(--text-high);
            font-size: 15px;
        }
        .faq-item summary::-webkit-details-marker {
            display: none;
        }
        .faq-item summary::after {
            content: "\f078";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            color: var(--brand-cyan);
            transition: transform .2s;
            flex-shrink: 0;
            font-size: 14px;
        }
        .faq-item[open] summary::after {
            transform: rotate(180deg);
        }
        .faq-body {
            padding: 0 22px 18px;
            color: var(--text-mid);
            font-size: 14px;
            line-height: 1.8;
        }
        @media (max-width: 991.98px) {
            .faq-layout {
                grid-template-columns: 1fr;
                gap: 26px;
            }
        }

        /* CTA 表单 */
        .cta-final {
            position: relative;
            background:
                radial-gradient(circle at 78% 22%, rgba(85, 230, 193, 0.11), transparent 28%),
                linear-gradient(130deg, #0B1A30 0%, #0E2340 68%, #0f2745 100%),
                url('/assets/images/backpic/back-2.png') center right / cover no-repeat;
            padding: 96px 0;
        }
        .cta-final .container {
            position: relative;
            z-index: 2;
        }
        .cta-panel {
            max-width: 1100px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 5fr 7fr;
            background: rgba(8, 16, 28, 0.56);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 24px;
            backdrop-filter: blur(14px);
            overflow: hidden;
            box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55);
        }
        .cta-copy {
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .cta-copy h2 {
            color: #fff;
            font-size: clamp(24px, 3vw, 34px);
            line-height: 1.4;
            font-weight: 800;
            margin: 0 0 12px;
        }
        .cta-copy p {
            color: var(--text-mid);
            font-size: 15px;
            line-height: 1.9;
            margin: 0;
        }
        .cta-form-wrap {
            background: rgba(255, 255, 255, 0.04);
            padding: 34px 28px 32px;
            border-left: 1px solid rgba(255, 255, 255, 0.1);
        }
        .form-label {
            color: var(--text-high);
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 6px;
            display: block;
        }
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border-radius: var(--radius-control);
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(255, 255, 255, 0.06);
            color: var(--text-high);
            outline: none;
            transition: all .2s;
            font-size: 15px;
        }
        .form-control:focus {
            border-color: var(--brand-cyan);
            box-shadow: 0 0 0 3px rgba(85, 230, 193, 0.12);
            background: rgba(255, 255, 255, 0.08);
        }
        .form-control::placeholder {
            color: var(--text-low);
        }
        .form-select {
            appearance: none;
            background-image: none;
        }
        .submit-btn {
            width: 100%;
            padding: 14px;
            font-size: 16px;
        }
        .form-status {
            display: none;
            margin-top: 12px;
            padding: 11px 14px;
            border-radius: 12px;
            background: rgba(85, 230, 193, 0.1);
            border: 1px solid rgba(85, 230, 193, 0.33);
            color: var(--brand-cyan);
            font-size: 14px;
        }
        @media (max-width: 768px) {
            .cta-panel {
                grid-template-columns: 1fr;
            }
            .cta-copy {
                padding: 28px 22px 14px;
            }
            .cta-form-wrap {
                border-left: 0;
                padding: 24px 20px 30px;
            }
            .cta-final {
                padding: 48px 0;
            }
        }
        @media (max-width: 480px) {
            .cta-copy h2 {
                font-size: 24px;
            }
            .cta-copy,
            .cta-form-wrap {
                padding-left: 18px;
                padding-right: 18px;
            }
        }

        /* 页脚 */
        .site-footer {
            background: #070D18;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            padding: 60px 0 0;
            color: var(--text-mid);
            font-size: 15px;
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 2.2fr 1.4fr 1.4fr 1.8fr;
            gap: 32px;
            padding-bottom: 34px;
        }
        .footer-brand-tip {
            font-size: 14px;
            line-height: 1.8;
            color: var(--text-low);
            margin-top: 14px;
            max-width: 300px;
        }
        .footer-title {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-high);
            margin: 0 0 14px;
        }
        .footer-links {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .footer-links a {
            color: var(--text-mid);
            font-size: 14px;
            transition: all .2s;
        }
        .footer-links a:hover {
            color: var(--brand-cyan);
            padding-left: 3px;
        }
        .footer-contact p {
            font-size: 14px;
            color: var(--text-low);
            margin-bottom: 8px;
            line-height: 1.8;
        }
        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            padding: 18px 0 24px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            color: var(--text-low);
            font-size: 13px;
        }
        @media (max-width: 991.98px) {
            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 26px;
            }
        }
        @media (max-width: 576px) {
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 22px;
                padding-bottom: 26px;
            }
            .footer-bottom {
                flex-direction: column;
                gap: 6px;
                align-items: flex-start;
            }
            .site-footer {
                padding-top: 40px;
            }
        }

/* roulang page: article */
:root {
            --bg: #0A1221;
            --bg-soft: #0F1B2E;
            --surface: rgba(255, 255, 255, 0.045);
            --surface-strong: rgba(255, 255, 255, 0.075);
            --primary: #1C9CFF;
            --accent: #55E6C1;
            --orange: #FF8256;
            --text: #F2F7FF;
            --text-muted: #B7C4DD;
            --text-faint: #7E8AA6;
            --border: rgba(255, 255, 255, 0.1);
            --border-bright: rgba(85, 230, 193, 0.45);
            --radius-lg: 18px;
            --radius-md: 12px;
            --radius-pill: 999px;
            --shadow-md: 0 12px 30px rgba(2, 8, 23, 0.28);
            --shadow-lg: 0 16px 40px rgba(2, 8, 23, 0.45);
            --shadow-glow: 0 10px 28px rgba(28, 156, 255, 0.22);
            --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }

        html {
            scroll-behavior: smooth;
        }

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

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

        img {
            max-width: 100%;
        }

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

        a:hover {
            color: var(--accent);
        }

        button,
        input {
            font-family: inherit;
        }

        .container {
            max-width: 1240px;
            padding-left: 20px;
            padding-right: 20px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            font-weight: 600;
            font-size: 15px;
            padding: 10px 22px;
            border: 1px solid transparent;
            transition: all .24s ease;
            min-height: 44px;
        }

        .btn-primary {
            background: linear-gradient(135deg, #1C9CFF, #55E6C1);
            color: #06253C;
            border: 0;
            box-shadow: var(--shadow-glow);
        }

        .btn-primary:hover,
        .btn-primary:focus {
            color: #022033;
            box-shadow: 0 12px 34px rgba(85, 230, 193, 0.3);
            transform: translateY(-2px);
        }

        .btn-outline-light {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.28);
            color: var(--accent);
            backdrop-filter: blur(12px);
        }

        .btn-outline-light:hover,
        .btn-outline-light:focus {
            border-color: var(--accent);
            color: var(--accent);
            background: rgba(85, 230, 193, 0.08);
            transform: translateY(-2px);
        }

        .btn-nav-cta {
            min-height: 40px;
            padding: 8px 18px;
            font-size: 14px;
            border-radius: 999px;
        }

        .btn:focus-visible,
        .nav-link:focus-visible,
        .mega-trigger:focus-visible,
        a:focus-visible,
        button:focus-visible {
            outline: 3px solid rgba(85, 230, 193, 0.65);
            outline-offset: 3px;
        }

        .section-tag {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            color: var(--accent);
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .section-tag i {
            font-size: 13px;
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 2000;
            background: linear-gradient(180deg, rgba(6, 14, 29, 0.98), rgba(10, 18, 33, 0.9));
            backdrop-filter: blur(18px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 10px 30px rgba(2, 8, 23, 0.3);
        }

        .header-inner {
            min-height: 72px;
            display: flex;
            align-items: center;
            gap: 26px;
            position: relative;
        }

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

        .brand-mark {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            border-radius: 14px;
            background: linear-gradient(135deg, #1C9CFF, #55E6C1);
            color: #062A47;
            font-size: 15px;
            font-weight: 800;
            letter-spacing: .5px;
            box-shadow: 0 8px 20px rgba(28, 156, 255, 0.28);
        }

        .brand-name {
            font-size: 20px;
            font-weight: 800;
            color: #fff;
            letter-spacing: .5px;
        }

        .main-nav-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            gap: 6px;
            flex: 1;
        }

        .main-nav-list .nav-link {
            position: relative;
            display: inline-block;
            padding: 10px 14px;
            color: var(--text-muted);
            font-weight: 500;
            font-size: 15px;
            border-radius: 999px;
        }

        .main-nav-list .nav-link::after {
            content: "";
            position: absolute;
            left: 16px;
            right: 16px;
            bottom: 3px;
            height: 2px;
            border-radius: 999px;
            background: var(--accent);
            transform: scaleX(0);
            transform-origin: left center;
            transition: transform .24s ease;
        }

        .main-nav-list .nav-link:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.06);
        }

        .main-nav-list .nav-link.active {
            color: #fff;
            background: rgba(85, 230, 193, 0.1);
        }

        .main-nav-list .nav-link.active::after {
            transform: scaleX(1);
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-left: auto;
            flex-shrink: 0;
        }

        .mega-trigger-wrap {
            position: relative;
        }

        .mega-trigger {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.07);
            border: 1px solid rgba(255, 255, 255, 0.14);
            color: #EAF3FF;
            padding: 9px 16px;
            border-radius: 999px;
            font-size: 14px;
            cursor: pointer;
            transition: all .2s ease;
        }

        .mega-trigger:hover,
        .mega-trigger-wrap.open .mega-trigger {
            border-color: rgba(85, 230, 193, 0.4);
            color: var(--accent);
            background: rgba(85, 230, 193, 0.08);
        }

        .mega-panel {
            display: none;
            position: absolute;
            top: 54px;
            right: 0;
            width: 720px;
            padding: 26px 28px;
            border-radius: var(--radius-lg);
            background: rgba(9, 17, 32, 0.95);
            backdrop-filter: blur(22px);
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow: var(--shadow-lg);
        }

        .mega-trigger-wrap:hover .mega-panel,
        .mega-trigger-wrap.open .mega-panel {
            display: block;
        }

        .mega-panel-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px;
        }

        .mega-col-title {
            font-size: 15px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .mega-col-title i {
            color: var(--accent);
        }

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

        .mega-col-list a {
            color: var(--text-muted);
            font-size: 14px;
            line-height: 1.5;
        }

        .mega-col-list a:hover {
            color: var(--accent);
            padding-left: 4px;
        }

        .nav-menu-toggle {
            display: none;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            background: rgba(255, 255, 255, 0.05);
            color: var(--text);
            font-size: 18px;
            cursor: pointer;
        }

        .article-main {
            background:
                radial-gradient(circle at 10% 4%, rgba(28, 156, 255, 0.1), transparent 25%),
                radial-gradient(circle at 95% 2%, rgba(85, 230, 193, 0.08), transparent 20%),
                var(--bg);
            padding-bottom: 80px;
        }

        .article-banner {
            position: relative;
            padding: 54px 0 76px;
            background:
                linear-gradient(rgba(8, 16, 30, 0.88), rgba(10, 18, 33, 0.94)),
                url("/assets/images/backpic/back-1.png") center / cover no-repeat;
            border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        }

        .article-banner::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(110deg, rgba(85, 230, 193, 0.16), transparent 38%);
        }

        .article-banner .container {
            position: relative;
            z-index: 2;
        }

        .breadcrumb-wrap {
            margin-bottom: 26px;
        }

        .article-breadcrumb {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 13px;
            color: var(--text-faint);
        }

        .article-breadcrumb a {
            color: var(--text-muted);
            transition: color .2s;
        }

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

        .article-breadcrumb .bc-sep {
            color: rgba(255, 255, 255, 0.28);
            font-size: 11px;
        }

        .article-breadcrumb .bc-current {
            color: var(--accent);
            max-width: 320px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .article-channel {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: rgba(85, 230, 193, 0.14);
            border: 1px solid rgba(85, 230, 193, 0.3);
            color: var(--accent);
            padding: 6px 14px;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 16px;
        }

        .article-title {
            margin: 0;
            color: #fff;
            font-size: clamp(30px, 4vw, 48px);
            font-weight: 800;
            line-height: 1.24;
            max-width: 940px;
            letter-spacing: .4px;
            text-wrap: balance;
        }

        .article-meta-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px 22px;
            margin-top: 22px;
            color: var(--text-faint);
            font-size: 14px;
        }

        .article-meta-row .meta-item {
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }

        .article-meta-row .meta-item a {
            color: var(--text-muted);
        }

        .article-meta-row .meta-item a:hover {
            color: var(--accent);
        }

        .article-meta-row i {
            color: rgba(85, 230, 193, 0.72);
            font-size: 13px;
        }

        .article-content-section {
            padding-top: 34px;
        }

        .article-single-column {
            max-width: 1060px;
            margin: 0 auto;
        }

        .article-paper {
            position: relative;
            background: linear-gradient(180deg, rgba(13, 24, 43, 0.72), rgba(10, 19, 36, 0.86));
            border: 1px solid rgba(255, 255, 255, 0.09);
            border-top: 1px solid rgba(255, 255, 255, 0.16);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
            padding: clamp(24px, 5vw, 56px);
        }

        .article-body {
            max-width: 800px;
            margin: 0 auto;
        }

        .article-body > * {
            color: var(--text-muted);
            line-height: 1.8;
            font-size: 16px;
            margin-bottom: 20px;
        }

        .article-body p {
            color: var(--text-muted);
        }

        .article-body strong {
            color: #EAF3FF;
        }

        .article-body h2 {
            color: #fff;
            font-size: 24px;
            font-weight: 700;
            line-height: 1.5;
            margin: 36px 0 16px;
            padding-left: 14px;
            border-left: 3px solid var(--accent);
        }

        .article-body h3 {
            color: #fff;
            font-size: 20px;
            font-weight: 700;
            margin: 28px 0 12px;
        }

        .article-body img {
            border-radius: var(--radius-md);
            width: 100%;
            height: auto;
            margin: 22px 0;
        }

        .article-body a {
            color: var(--accent);
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        .article-body a:hover {
            color: #fff;
        }

        .article-body ul,
        .article-body ol {
            padding-left: 22px;
        }

        .article-body ul li,
        .article-body ol li {
            color: var(--text-muted);
            margin-bottom: 8px;
        }

        .article-body blockquote {
            border-left: 4px solid var(--orange);
            background: rgba(255, 130, 86, 0.08);
            border-radius: 0 12px 12px 0;
            padding: 18px 22px;
            color: var(--text);
            margin: 28px 0;
        }

        .article-body table {
            width: 100%;
            border-collapse: collapse;
            margin: 24px 0;
            background: rgba(255, 255, 255, 0.02);
            border-radius: 12px;
            overflow: hidden;
        }

        .article-body table th,
        .article-body table td {
            padding: 12px 14px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--text-muted);
        }

        .article-body table th {
            color: #fff;
            background: rgba(28, 156, 255, 0.1);
            font-weight: 600;
        }

        .article-navigation {
            margin-top: 22px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }

        .pager-card {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 18px 20px;
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all .24s ease;
            min-height: 72px;
            color: var(--text-muted);
        }

        .pager-card:hover {
            border-color: var(--accent);
            background: rgba(85, 230, 193, 0.07);
            color: var(--text);
            transform: translateY(-2px);
        }

        .pager-card.pager-next {
            justify-content: flex-end;
            text-align: right;
        }

        .pager-direction {
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .pager-direction span {
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .pager-top {
            font-size: 12px;
            color: var(--text-faint);
            margin-bottom: 4px;
        }

        .pager-bottom {
            font-size: 15px;
            font-weight: 600;
            color: var(--text);
        }

        .pager-icon {
            width: 38px;
            height: 38px;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            background: rgba(28, 156, 255, 0.12);
            border: 1px solid rgba(28, 156, 255, 0.2);
            color: var(--accent);
            font-size: 14px;
        }

        .related-section {
            background: rgba(10, 18, 33, 0.62);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: var(--radius-lg);
            padding: 34px;
            margin-top: 44px;
        }

        .related-header {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 24px;
        }

        .related-header h2 {
            color: #fff;
            font-size: 24px;
            font-weight: 700;
            margin: 0;
        }

        .related-header .view-more {
            color: var(--text-faint);
            font-size: 14px;
            white-space: nowrap;
        }

        .related-header .view-more:hover {
            color: var(--accent);
        }

        .related-row {
            margin-top: 0;
        }

        .related-card {
            position: relative;
            height: 100%;
            background: rgba(255, 255, 255, 0.035);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            overflow: hidden;
            transition: all .24s ease;
            display: flex;
            flex-direction: column;
        }

        .related-card:hover {
            border-color: rgba(85, 230, 193, 0.4);
            transform: translateY(-4px);
            box-shadow: var(--shadow-md);
        }

        .related-card-cover {
            aspect-ratio: 16 / 10;
            overflow: hidden;
            background: #101A2A;
        }

        .related-card-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transition: transform .35s ease;
        }

        .related-card:hover .related-card-cover img {
            transform: scale(1.04);
        }

        .related-card-body {
            padding: 16px 16px 18px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex: 1;
        }

        .related-card-body h3 {
            font-size: 16px;
            line-height: 1.55;
            font-weight: 700;
            margin: 0;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            color: #EDF5FF;
            min-height: 49px;
        }

        .related-card-body h3 a {
            color: inherit;
        }

        .related-card-body h3 a:hover {
            color: var(--accent);
        }

        .related-card-excerpt {
            color: var(--text-faint);
            font-size: 13px;
            line-height: 1.7;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 2px;
        }

        .related-card-meta {
            margin-top: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            color: var(--text-faint);
            font-size: 12px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            padding-top: 10px;
        }

        .related-card-meta .cat-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: rgba(28, 156, 255, 0.12);
            color: #8FD1FF;
            padding: 3px 10px;
            border-radius: 999px;
            font-size: 12px;
        }

        .related-empty {
            text-align: center;
            padding: 42px 18px;
            color: var(--text-faint);
            border: 1px dashed rgba(255, 255, 255, 0.14);
            border-radius: 14px;
        }

        .related-empty i {
            font-size: 34px;
            margin-bottom: 12px;
            color: rgba(255, 255, 255, 0.2);
        }

        .not-found-card {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-lg);
            padding: 70px 30px;
            text-align: center;
            color: var(--text-muted);
        }

        .not-found-card .icon-large {
            font-size: 48px;
            color: rgba(255, 255, 255, 0.18);
            margin-bottom: 16px;
        }

        .not-found-card h1 {
            font-size: 28px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 12px;
        }

        .not-found-card a {
            margin-top: 24px;
        }

        .site-footer {
            background: #060C17;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            padding: 68px 0 0;
            color: var(--text-faint);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
            gap: 40px;
            padding-bottom: 44px;
        }

        .footer-brand .brand {
            margin-bottom: 18px;
        }

        .footer-brand-tip {
            color: var(--text-faint);
            font-size: 14px;
            line-height: 1.8;
            max-width: 280px;
            margin: 0;
        }

        .footer-title {
            color: #EAF3FF;
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 18px;
        }

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

        .footer-links a {
            color: var(--text-faint);
            font-size: 14px;
            transition: all .2s;
        }

        .footer-links a:hover {
            color: var(--accent);
            padding-left: 4px;
        }

        .footer-contact p {
            font-size: 14px;
            color: var(--text-faint);
            line-height: 1.8;
            margin-bottom: 4px;
        }

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

        @media (max-width: 1199.98px) {
            .mega-panel {
                width: 680px;
            }
        }

        @media (max-width: 991.98px) {
            .header-actions {
                gap: 10px;
            }

            .mega-trigger-wrap {
                display: none;
            }

            .nav-menu-toggle {
                display: inline-flex;
                margin-left: auto;
            }

            .main-nav-list {
                position: fixed;
                top: 72px;
                left: 0;
                right: 0;
                background: rgba(7, 13, 26, 0.97);
                backdrop-filter: blur(22px);
                flex-direction: column;
                align-items: stretch;
                padding: 16px 20px 30px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                display: none;
                box-shadow: var(--shadow-lg);
                max-height: calc(100vh - 72px);
                overflow-y: auto;
            }

            .nav-open .main-nav-list {
                display: flex;
            }

            .main-nav-list .nav-link {
                display: block;
                padding: 13px 16px;
                border-radius: 10px;
            }

            .main-nav-list .nav-link::after {
                display: none;
            }

            .main-nav-list .nav-link.active {
                background: rgba(85, 230, 193, 0.12);
            }

            .btn-nav-cta {
                display: none;
            }

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

        @media (max-width: 767.98px) {
            .article-banner {
                padding: 36px 0 40px;
            }

            .article-breadcrumb {
                font-size: 12px;
            }

            .article-breadcrumb .bc-current {
                max-width: 180px;
            }

            .article-paper {
                padding: 20px 17px;
                border-radius: 14px;
            }

            .article-body > * {
                font-size: 15px;
            }

            .article-navigation {
                grid-template-columns: 1fr;
            }

            .related-section {
                padding: 22px 18px;
                border-radius: 16px;
                margin-top: 30px;
            }

            .related-header {
                flex-direction: column;
                align-items: flex-start;
            }
        }

        @media (max-width: 575.98px) {
            .header-inner {
                gap: 12px;
                min-height: 66px;
            }

            .brand-mark {
                width: 38px;
                height: 38px;
                border-radius: 12px;
                font-size: 13px;
            }

            .brand-name {
                font-size: 18px;
            }

            .article-title {
                font-size: 28px;
            }

            .article-meta-row {
                gap: 10px 14px;
            }

            .article-paper {
                padding: 18px 15px;
            }

            .article-body h2 {
                font-size: 21px;
            }

            .related-card-body h3 {
                font-size: 15px;
            }

            .related-card-cover {
                aspect-ratio: 16 / 9;
            }

            .article-navigation {
                grid-template-columns: 1fr;
                margin-left: 0;
                margin-right: 0;
            }

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

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

/* roulang page: category2 */
:root{
    --bg-deep:#060D19;
    --bg-body:#0A1221;
    --bg-alt:#0F1B2E;
    --glass:rgba(255,255,255,.045);
    --glass-strong:rgba(255,255,255,.075);
    --line:rgba(255,255,255,.10);
    --line-cyan:rgba(85,230,193,.35);
    --accent:#1C9CFF;
    --cyan:#55E6C1;
    --orange:#FF8256;
    --text:#F2F7FF;
    --muted:#B7C4DD;
    --dim:#7E8AA6;
    --radius-card:18px;
    --radius-sm:12px;
    --radius-btn:10px;
    --radius-pill:999px;
    --shadow:0 18px 44px rgba(2,8,23,.45);
    --shadow-soft:0 8px 28px rgba(2,8,23,.30);
    --font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:
        radial-gradient(circle at 80% 10%,rgba(28,156,255,.08),transparent 34%),
        radial-gradient(circle at 8% 34%,rgba(85,230,193,.05),transparent 28%),
        var(--bg-body);
    color:var(--text);
    font-family:var(--font-family);
    font-size:15.5px;
    line-height:1.75;
    -webkit-font-smoothing:antialiased;
}
a{color:var(--cyan);text-decoration:none;transition:color .25s ease}
a:hover{color:#8bf0d7}
p{margin:0 0 1em}
img{max-width:100%;display:block}
.container{width:100%;max-width:1200px;padding-left:20px;padding-right:20px;margin-left:auto;margin-right:auto}
.site-section{padding:96px 0}
::selection{background:rgba(28,156,255,.32);color:#fff}

/* 按钮 */
.btn{border-radius:var(--radius-btn);padding:12px 24px;font-size:15px;font-weight:600;line-height:1.4;border:0;transition:transform .25s,box-shadow .25s,background .25s,border-color .25s,color .25s;min-height:46px}
.btn:focus,.btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(85,230,193,.25);border-color:transparent}
.btn-primary{
    background:linear-gradient(135deg,#1C9CFF 0%,#55E6C1 100%);
    color:#03101d;
    box-shadow:0 8px 24px rgba(28,156,255,.38);
    border-radius:var(--radius-btn);
}
.btn-primary:hover,.btn-primary:active{background:linear-gradient(135deg,#38aaff 0%,#79f1d1 100%);color:#03101d;transform:translateY(-2px);box-shadow:0 14px 34px rgba(85,230,193,.30)}
.btn-ghost{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.18);
    color:#EAF4FF;
    backdrop-filter:blur(8px);
}
.btn-ghost:hover{background:rgba(85,230,193,.08);border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)}
.btn-sm{padding:9px 18px;min-height:40px;font-size:14px}
.btn-nav-cta{min-height:40px;padding:9px 18px}

/* header */
.site-header{
    position:relative;
    top:0;
    left:0;
    right:0;
    z-index:1000;
    height:72px;
    background:linear-gradient(180deg,#0B1626 0%,rgba(10,18,33,.96) 100%);
    border-bottom:1px solid rgba(255,255,255,.07);
    transition:background .3s,backdrop-filter .3s,box-shadow .3s;
}
.site-header.is-scrolled{
    position:sticky;
    background:rgba(7,14,26,.82);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 12px 36px rgba(2,8,23,.22);
}
.header-inner{display:flex;align-items:center;height:72px;gap:14px;position:relative}
.brand{display:inline-flex;align-items:center;gap:10px;color:#fff;flex-shrink:0}
.brand:hover{color:#fff}
.brand-mark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:36px;
    height:36px;
    padding:0 7px;
    font-weight:800;
    font-size:14px;
    letter-spacing:.04em;
    color:#03101d;
    background:linear-gradient(135deg,#1C9CFF,#55E6C1);
    border-radius:10px;
    box-shadow:0 0 18px rgba(85,230,193,.35);
}
.brand-name{font-size:21px;font-weight:800;letter-spacing:.02em;white-space:nowrap;background:linear-gradient(120deg,#F2F7FF 0%,#9CE0FF 55%,#55E6C1 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nav-menu-toggle{
    display:none;
    width:42px;
    height:42px;
    margin-left:auto;
    border:1px solid rgba(255,255,255,.16);
    border-radius:10px;
    background:rgba(255,255,255,.04);
    color:#fff;
    align-items:center;
    justify-content:center;
    font-size:17px;
}
.main-nav-list{
    display:flex;
    list-style:none;
    margin:0;
    padding:0;
    gap:4px;
}
.nav-link{
    position:relative;
    display:inline-block;
    padding:8px 14px;
    color:#C4D1E8;
    font-size:15px;
    font-weight:600;
    border-radius:var(--radius-pill);
    transition:background .25s,color .25s,box-shadow .25s;
}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-link.active{
    color:var(--cyan);
    background:rgba(85,230,193,.10);
    box-shadow:inset 0 0 0 1px rgba(85,230,193,.25);
}
.header-actions{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:10px;
}
.mega-trigger-wrap{position:relative}
.mega-trigger{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:40px;
    padding:8px 14px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:var(--radius-pill);
    background:rgba(255,255,255,.035);
    color:#C9D6EC;
    font-size:14px;
    font-weight:600;
    transition:all .25s;
}
.mega-trigger:hover,.mega-trigger[aria-expanded="true"]{
    color:var(--cyan);
    border-color:rgba(85,230,193,.35);
    background:rgba(85,230,193,.08);
}
.mega-panel{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    width:720px;
    max-width:calc(100vw - 40px);
    padding:22px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:18px;
    background:rgba(12,24,40,.92);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:var(--shadow);
    display:none;
    z-index:1500;
}
.mega-panel.open{display:block;animation:megaFade .22s ease}
@keyframes megaFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.mega-panel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-radius:12px;overflow:hidden}
.mega-panel .mega-col-title{
    display:flex;
    align-items:center;
    gap:8px;
    color:#F2F7FF;
    font-size:14px;
    font-weight:700;
    padding:10px 12px 10px 0;
}
.mega-col-list{display:flex;flex-direction:column;gap:2px}
.mega-col-list a{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--muted);
    font-size:14px;
    padding:8px 10px;
    border-radius:8px;
    transition:background .2s,color .2s;
}
.mega-col-list a:hover{color:var(--cyan);background:rgba(85,230,193,.07)}
.mega-panel-grid>div+div{margin-left:12px}
.mega-panel-grid .mega-col-title>*{flex:0 0 auto}
.mega-panel-grid .mega-col-title:first-child{}

/* breadcrumb */
.breadcrumb-nav{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    color:var(--dim);
    font-size:14px;
    margin-bottom:18px;
}
.breadcrumb-nav a{color:var(--dim)}
.breadcrumb-nav a:hover{color:var(--cyan)}
.breadcrumb-nav span{color:var(--muted)}
.breadcrumb-nav span::before{content:"/";color:#465979;margin-right:6px}

/* Hero */
.category-hero{
    position:relative;
    overflow:hidden;
    padding:92px 0 84px;
    background:linear-gradient(180deg,rgba(7,13,25,.86) 0%,rgba(10,18,33,.58) 60%),url('/assets/images/backpic/back-2.png') center/cover no-repeat;
}
.category-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at 78% 22%,rgba(255,130,86,.12),transparent 40%),radial-gradient(ellipse at 20% 80%,rgba(85,230,193,.10),transparent 36%);
}
.category-hero .container{position:relative;z-index:2}
.hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.04em;
    color:var(--cyan);
    background:rgba(85,230,193,.08);
    border:1px solid rgba(85,230,193,.22);
    padding:6px 12px;
    border-radius:var(--radius-pill);
    margin-bottom:20px;
}
.category-hero h1{
    font-size:clamp(2rem,5vw,3.6rem);
    line-height:1.24;
    color:var(--text);
    font-weight:800;
    letter-spacing:-.02em;
    margin:0 0 18px;
}
.category-hero .inline-brand{background:linear-gradient(120deg,#55E6C1 0%,#1C9CFF 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.hero-lead{
    max-width:640px;
    color:var(--muted);
    font-size:clamp(1.05rem,1.6vw,1.22rem);
    line-height:1.9;
    margin-bottom:30px;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-actions .btn{min-width:140px}
.hero-data-panel{
    border-radius:var(--radius-card);
    background:rgba(10,20,36,.66);
    border:1px solid rgba(255,255,255,.12);
    border-top:1px solid rgba(255,255,255,.2);
    box-shadow:var(--shadow);
    padding:22px 20px;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    max-width:360px;
    margin-left:auto;
    width:100%;
}
.info-panel-kicker{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--cyan);
    font-weight:700;
    font-size:13px;
    letter-spacing:.08em;
    border-bottom:1px solid rgba(255,255,255,.1);
    padding-bottom:12px;
    margin-bottom:14px;
}
.info-chip-list{display:flex;flex-direction:column;gap:13px}
.info-chip-list li{display:flex;gap:13px;align-items:flex-start;list-style:none;padding:0;}
.info-chip-list .chip-icon{
    flex:0 0 32px;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,rgba(28,156,255,.18),rgba(85,230,193,.14));
    color:var(--cyan);
    border-radius:10px;
    font-size:14px;
}
.info-chip-list h6{margin:0;color:#fff;font-size:15px;font-weight:700;line-height:1.3}
.info-chip-list p{margin:0;color:var(--dim);font-size:13px;line-height:1.55}

/* Section headers */
.section-head{margin-bottom:44px}
.section-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--cyan);
    font-size:13px;
    font-weight:700;
    letter-spacing:.06em;
    line-height:1;
    margin-bottom:14px;
}
.section-tag::before{content:"";width:18px;height:2px;background:var(--cyan);border-radius:99px}
.section-head h2{font-size:clamp(1.8rem,3vw,2.7rem);font-weight:800;margin:0 0 14px;color:#fff;letter-spacing:-.02em;line-height:1.35}
.section-head .section-desc{max-width:720px;color:var(--muted);font-size:15.5px;line-height:1.9;margin:0}

/* 板块2 : 赛事专题价值 */
.feature-section{background:rgba(8,16,29,.55)}
.feature-wrap{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:26px;
    align-items:stretch;
}
.feature-photo-card{
    position:relative;
    border-radius:var(--radius-card);
    overflow:hidden;
    min-height:430px;
    background:#0C1830;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:var(--shadow);
}
.feature-photo-card img{width:100%;height:100%;min-height:430px;object-fit:cover;transition:transform .6s ease}
.feature-photo-card:hover img{transform:scale(1.04)}
.feature-photo-card .feature-photo-body{
    position:absolute;
    left:0;right:0;bottom:0;
    padding:36px 22px 20px;
    background:linear-gradient(180deg,transparent 0%,rgba(4,10,20,.42) 40%,rgba(4,10,20,.9) 100%);
}
.feature-photo-card .photo-badge{
    display:inline-block;
    font-size:12px;
    color:var(--cyan);
    background:rgba(85,230,193,.14);
    border:1px solid rgba(85,230,193,.25);
    border-radius:var(--radius-pill);
    padding:3px 10px;
    margin-bottom:10px;
}
.feature-photo-card h3{font-size:23px;font-weight:700;color:#fff;margin:0 0 8px}
.feature-photo-card p{color:var(--muted);margin:0;font-size:14px;line-height:1.8}
.theme-point-panel{
    background:rgba(15,27,46,.8);
    border:1px solid rgba(255,255,255,.10);
    border-radius:var(--radius-card);
    padding:28px;
    backdrop-filter:blur(6px);
    box-shadow:var(--shadow-soft);
}
.theme-point-item{display:flex;gap:16px;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.theme-point-item:last-child{border-bottom:none}
.theme-point-num{
    flex:0 0 32px;
    height:32px;
    border:1px solid rgba(85,230,193,.3);
    border-radius:50%;
    color:var(--cyan);
    font-size:14px;
    font-weight:800;
    background:rgba(85,230,193,.08);
    display:flex;
    align-items:center;
    justify-content:center;
}
.theme-point-content h4{color:#fff;font-size:16px;font-weight:700;margin:0 0 5px}
.theme-point-content p{color:var(--dim);font-size:14px;line-height:1.75;margin:0}

/* 板块3 热门赛事专题 */
.library-section{position:relative}
.library-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at 78% 30%,rgba(28,156,255,.08),transparent 36%),radial-gradient(ellipse at 12% 70%,rgba(255,130,86,.055),transparent 30%);
}
.library-section .container{position:relative;z-index:2}
.library-grid{
    display:grid;
    grid-template-columns:1.1fr .95fr 1fr 1fr;
    grid-template-rows:250px 250px;
    grid-template-areas:
        "main main tall side-top"
        "main main tall side-bottom";
    gap:19px;
}
.project-card{
    position:relative;
    border-radius:var(--radius-card);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    background:#0B1727;
    display:block;
    box-shadow:var(--shadow-soft);
    transition:transform .3s,border-color .3s,box-shadow .3s;
}
.project-card:hover{border-color:rgba(85,230,193,.35);box-shadow:var(--shadow);transform:translateY(-3px)}
.project-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;background:#13213A;}
.project-card:hover img{transform:scale(1.06)}
.project-card .project-card-overlay{
    position:absolute;
    left:0;right:0;bottom:0;
    padding:24px 18px 16px;
    background:linear-gradient(180deg,transparent 0%,rgba(5,11,22,.5) 42%,rgba(5,11,22,.95) 100%);
}
.cat-badge{
    display:inline-block;
    font-size:12px;
    color:#EAF8FF;
    background:rgba(28,156,255,.22);
    border:1px solid rgba(28,156,255,.3);
    border-radius:var(--radius-pill);
    padding:4px 11px;
    margin-bottom:9px;
    backdrop-filter:blur(4px);
}
.project-card h3{font-size:19px;color:#fff;font-weight:700;margin:0 0 6px;line-height:1.4}
.project-card p{color:#C7D4EC;font-size:13.5px;margin:0;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.project-main{grid-area:main}
.project-tall{grid-area:tall}
.project-side-a{grid-area:side-top}
.project-side-b{grid-area:side-bottom}
.project-main h3{font-size:clamp(1.3rem,2.2vw,2rem)}
.project-main p{max-width:560px;-webkit-line-clamp:3}
.project-tall img{height:100%}

/* 板块4 组织与更新时间线 */
.process-section{background:rgba(8,16,29,.63);border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)}
.process-grid{
    position:relative;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
}
.process-grid::before{
    content:"";
    position:absolute;
    top:40px;
    left:16%;
    right:16%;
    height:1px;
    border-top:1px dashed rgba(85,230,193,.32);
}
.process-step{
    position:relative;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.09);
    border-radius:var(--radius-card);
    padding:26px 22px 24px;
    transition:border-color .3s,background .3s;
    z-index:1;
}
.process-step:hover{border-color:rgba(85,230,193,.35);background:rgba(85,230,193,.05)}
.step-number{
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 0 18px;
    background:linear-gradient(135deg,rgba(28,156,255,.16),rgba(85,230,193,.12));
    color:var(--cyan);
    font-size:16px;
    font-weight:800;
    border:1px solid rgba(85,230,193,.28);
    border-radius:14px;
    box-shadow:0 0 16px rgba(85,230,193,.14);
}
.process-step h3{color:#fff;font-size:19px;font-weight:700;margin:0 0 10px}
.process-step p{color:var(--muted);font-size:14.5px;line-height:1.85;margin:0 0 12px}
.process-step .step-tags{display:flex;flex-wrap:wrap;gap:7px}
.process-step .step-tags span{
    padding:3px 9px;
    border-radius:var(--radius-pill);
    color:#9FC3E6;
    background:rgba(28,156,255,.08);
    border:1px solid rgba(28,156,255,.22);
    font-size:12px;
    line-height:1.5;
}

/* FAQ */
.faq-section{background:#0A1322}
.faq-wrap{max-width:880px;margin:0 auto}
.accordion{border:0;background:transparent}
.accordion-item{
    background:var(--glass);
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px!important;
    overflow:hidden;
    margin-bottom:15px;
    transition:border-color .3s,background .3s;
}
.accordion-item:has(.accordion-button:not(.collapsed)){border-color:rgba(85,230,193,.45);background:rgba(85,230,193,.04)}
.accordion-button{
    background:transparent;
    color:#E7F0FF;
    font-weight:700;
    font-size:16px;
    padding:16px 20px;
    min-height:50px;
    box-shadow:none;
    gap:10px;
    border:0;
}
.accordion-button:hover{color:#fff}
.accordion-button:not(.collapsed){color:var(--cyan);background:rgba(85,230,193,.07);box-shadow:none}
.accordion-button::after{
    order:2;
    content:"\f078";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    background:none;
    width:auto;
    height:auto;
    transform:none;
    color:var(--muted);
    transition:color .3s,transform .3s;
    font-size:14px;
}
.accordion-button:not(.collapsed)::after{transform:rotate(180deg);color:var(--cyan)}
.accordion-button:focus,.accordion-button:focus-visible{
    box-shadow:0 0 0 3px rgba(85,230,193,.2);
    border-radius:12px;
}
.accordion-body{color:var(--muted);line-height:1.9;font-size:15px;padding:6px 20px 20px 20px;border-top:1px solid rgba(255,255,255,.06)}

/* CTA */
.cta-section{
    position:relative;
    padding:96px 0;
    background:
        linear-gradient(180deg,rgba(6,12,23,.84) 0%,rgba(8,17,31,.62) 100%),
        url('/assets/images/backpic/back-3.webp') center/cover no-repeat;
}
.cta-section::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 18% 30%,rgba(28,156,255,.12),transparent 32%),radial-gradient(circle at 82% 72%,rgba(255,130,86,.10),transparent 40%)}
.cta-section .container{position:relative;z-index:3}
.cta-panel{
    display:grid;
    grid-template-columns:1fr 1fr;
    background:rgba(11,22,38,.78);
    border:1px solid rgba(255,255,255,.13);
    border-top:1px solid rgba(255,255,255,.22);
    border-radius:24px;
    box-shadow:var(--shadow);
    overflow:hidden;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
.cta-info{padding:44px 38px;background:radial-gradient(circle at 10% 0%,rgba(85,230,193,.07),transparent 34%)}
.cta-info .section-tag{margin-bottom:10px;color:var(--cyan)}
.cta-info h2{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;color:#fff;line-height:1.45;margin:0 0 18px}
.cta-info .cta-desc{color:var(--muted);font-size:15.5px;line-height:1.9;margin-bottom:24px}
.cta-feature-chip{display:flex;align-items:center;gap:9px;color:#D8E8F5;font-size:13.5px;padding:8px 0}
.cta-feature-chip i{color:var(--cyan)}
.cta-feature-row{display:flex;flex-wrap:wrap;gap:6px 16px}
.cta-form-wrap{padding:36px 34px 40px;border-left:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.025)}
.cta-form-wrap h3{color:#fff;font-size:22px;font-weight:700;margin:0 0 6px}
.cta-form-sub{color:var(--dim);font-size:13.5px;margin-bottom:22px}
.form-label{font-size:13px;color:#C6D3EA;font-weight:600;margin-bottom:6px}
.form-control{
    background:rgba(4,10,19,.58);
    border:1px solid rgba(255,255,255,.12);
    color:#F2F7FF;
    min-height:46px;
    border-radius:10px;
    font-size:15px;
    padding:10px 14px;
    transition:border-color .25s,box-shadow .25s,background .25s;
}
.form-control:focus{
    background:#0A1626;
    border-color:var(--cyan);
    box-shadow:0 0 0 4px rgba(85,230,193,.14);
    color:#fff;
}
.form-select{background-color:#081120;color:#E7F0FF;border:1px solid rgba(255,255,255,.12);border-radius:10px;min-height:46px}
.form-select option{background:#0B1727;color:#fff}
textarea.form-control{min-height:96px;resize:vertical}
.form-note{color:var(--dim);font-size:12.5px;line-height:1.6;margin-top:10px}
.form-success-note{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:8px;
    padding:26px 10px 12px;
    border:1px solid rgba(85,230,193,.35);
    border-radius:var(--radius-card);
    background:rgba(85,230,193,.06);
    color:#DDF9EF;
    font-size:15px;
    line-height:1.8;
}
.form-success-note i{color:var(--cyan);font-size:28px}
#applicationForm .form-success-note{display:none}
#applicationForm.is-submitted .form-fields{display:none}
#applicationForm.is-submitted .form-success-note{display:flex;min-height:250px}

/* footer */
.site-footer{
    background:#050B15;
    border-top:1px solid rgba(255,255,255,.06);
    padding:58px 0 26px;
}
.footer-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr 1fr 1.1fr;
    gap:44px;
    margin-bottom:38px;
}
.site-footer .brand-name{font-size:22px}
.footer-brand-tip{color:var(--dim);font-size:14px;line-height:1.9;margin-top:12px;margin-bottom:0;max-width:260px}
.footer-title{
    color:#fff;
    font-size:15px;
    font-weight:700;
    margin:0 0 16px;
    letter-spacing:.03em;
}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:14px;transition:color .25s,transform .25s}
.footer-links a::before{content:"";width:5px;height:5px;background:var(--cyan);border-radius:50%;opacity:.6}
.footer-links a:hover{color:var(--cyan);transform:translateX(3px)}
.footer-contact p{color:var(--muted);font-size:13.5px;margin-bottom:9px;display:flex;align-items:flex-start;gap:8px}
.footer-contact p:last-child{margin-bottom:0}
.footer-contact p i{color:var(--cyan);margin-top:3px}
.footer-bottom{
    border-top:1px solid rgba(255,255,255,.07);
    padding-top:20px;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:8px;
    color:var(--dim);
    font-size:13px;
}

/* responsive */
@media (max-width: 1199.98px){
    .mega-panel{right:-10px}
}
@media (max-width: 991.98px){
    .feature-wrap{grid-template-columns:1fr}
    .library-grid{grid-template-columns:1fr 1fr;grid-template-rows:250px 250px 220px 220px;grid-template-areas:
        "main main"
        "tall tall"
        "side-top side-bottom"
        "side-top side-bottom";}
    .process-grid{grid-template-columns:1fr;max-width:580px;margin-left:auto;margin-right:auto}
    .process-grid::before{display:none}
    .cta-panel{grid-template-columns:1fr}
    .cta-form-wrap{border-left:0;border-top:1px solid rgba(255,255,255,.10)}
    .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
    .nav-menu-toggle{display:inline-flex}
    .header-inner{flex-wrap:wrap}
    .main-nav-list{
        position:absolute;
        top:70px;
        left:20px;
        right:20px;
        flex-direction:column;
        align-items:stretch;
        background:rgba(6,13,24,.98);
        border:1px solid rgba(255,255,255,.12);
        border-radius:18px;
        padding:10px;
        display:none;
        box-shadow:var(--shadow);
        backdrop-filter:blur(14px);
        z-index:1300;
    }
    .main-nav-list.show{display:flex}
    .nav-link{
        display:block;
        padding:12px 14px;
        border-radius:10px;
    }
    .header-actions{display:none}
    .mega-panel{
        position:static;
        width:100%;
        margin-top:12px;
        max-width:100%;
        background:rgba(8,16,29,.95);
    }
    .mega-panel-grid{grid-template-columns:1fr}
    .mega-panel-grid>div+div{margin-left:0}
    .mega-panel-grid>div{border-bottom:1px solid rgba(255,255,255,.07);padding:8px 0}
}
@media (max-width: 767.98px){
    .site-section{padding:64px 0}
    .category-hero{padding:64px 0 88px}
    .hero-data-panel{margin:26px auto 0}
    .library-grid{grid-template-columns:1fr 1fr;grid-template-rows:210px 210px 210px 210px}
    .project-tall img{height:100%}
    .cta-section{padding:70px 0}
    .cta-info{padding:32px 26px}
    .cta-form-wrap{padding:28px 20px 30px}
    .process-step{padding:22px 18px}
    .footer-grid{grid-template-columns:1fr}
}
@media (max-width: 575.98px){
    body{font-size:15px}
    .brand-name{font-size:19px}
    .category-hero h1{font-size:2.1rem}
    .btn-primary,.btn-ghost{width:100%;justify-content:center}
    .hero-actions .btn{min-width:0;width:100%}
    .library-grid{grid-template-columns:1fr;grid-template-rows:250px 250px 250px 250px;grid-template-areas:
        "main"
        "tall"
        "side-top"
        "side-bottom";}
    .feature-photo-card,.feature-photo-card img{min-height:340px}
    .cta-feature-row{display:block}
    .footer-bottom{flex-direction:column}
    .footer-links a{font-size:15px}
    .theme-point-panel{padding:18px 16px}
}
@media print{
    .site-header,.site-footer,.cta-section{display:none!important}
    body{background:#fff;color:#221}
    main{display:block}
    .category-hero{padding:0;background:none}
    h1{color:#000}
}

/* roulang page: category3 */
:root {
  --bg: #0A1221;
  --bg2: #0F1B2E;
  --panel: rgba(255,255,255,.045);
  --panel-2: rgba(255,255,255,.065);
  --border: rgba(255,255,255,.10);
  --border-bright: rgba(25,180,255,.35);
  --ink: #F2F7FF;
  --ink-2: #B7C4DD;
  --ink-3: #7E8AA6;
  --blue: #1C9CFF;
  --cyan: #55E6C1;
  --orange: #FF8256;
  --radius-card: 18px;
  --radius-btn: 10px;
  --radius-input: 12px;
  --shadow: 0 16px 40px rgba(2,8,23,.45);
  --shadow-glow: 0 10px 34px rgba(28,156,255,.28);
  --font: "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",sans-serif;
  --max: 1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:
  radial-gradient(600px 360px at 85% -5%,rgba(28,156,255,.12),transparent 60%),
  radial-gradient(800px 420px at 0% 30%,rgba(85,230,193,.06),transparent 55%),
  var(--bg);pointer-events:none}
body::after{content:"";position:fixed;inset:0;z-index:-1;background-image:
  linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:42px 42px;opacity:.8;pointer-events:none;mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 75%)}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font-family:inherit}
ul{list-style:none}
.container{width:100%;max-width:var(--max);margin:0 auto;padding-left:20px;padding-right:20px}

/* Header */
.site-header{position:sticky;top:0;z-index:1000;height:72px;background:linear-gradient(180deg,rgba(10,18,33,.92),rgba(13,22,38,.78));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.06);transition:background .3s}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:800;letter-spacing:.3px}
.brand .brand-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#1C9CFF,#55E6C1);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:#07111f;box-shadow:0 0 24px rgba(28,156,255,.35);letter-spacing:0}
.brand .brand-name{font-size:21px;background:linear-gradient(120deg,#fff,#9adcff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nav-menu-toggle{display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:var(--ink);border-radius:12px;font-size:18px;align-items:center;justify-content:center}
.main-nav-list{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none}
.main-nav-list .nav-link{display:block;padding:8px 18px;border-radius:999px;color:var(--ink-2);font-weight:600;font-size:15px;position:relative;transition:background .2s,color .2s;outline:none}
.main-nav-list .nav-link.active{color:#fff;background:rgba(28,156,255,.14);box-shadow:inset 0 0 0 1px rgba(28,156,255,.2)}
.main-nav-list .nav-link.active::after{content:"";position:absolute;left:22px;right:22px;bottom:-3px;height:2px;border-radius:2px;background:var(--cyan);box-shadow:0 0 12px rgba(85,230,193,.7)}
.main-nav-list .nav-link:hover,.main-nav-list .nav-link:focus-visible{color:#fff;background:rgba(255,255,255,.07)}
.header-actions{display:flex;align-items:center;gap:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-btn);font-weight:700;padding:12px 26px;transition:transform .22s,box-shadow .22s,background .22s,border-color .22s;outline:none}
.btn:focus-visible{box-shadow:0 0 0 3px rgba(85,230,193,.4)}
.btn-primary{background:linear-gradient(120deg,#1C9CFF,#2AC7D6);border:0;color:#04121f;box-shadow:var(--shadow-glow)}
.btn-primary:hover,.btn-primary:focus-visible{transform:translateY(-2px);color:#04121f;box-shadow:0 14px 40px rgba(28,156,255,.4)}
.btn-primary.btn-nav-cta{padding:9px 20px;border-radius:999px;font-size:14px}
.btn-ghost{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);color:var(--ink)}
.btn-ghost:hover{border-color:rgba(85,230,193,.6);color:var(--cyan);transform:translateY(-2px)}
.mega-trigger-wrap{position:relative}
.mega-trigger{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);color:var(--ink-2);border-radius:999px;height:40px;padding:0 15px;font-size:13px;font-weight:600;cursor:pointer;outline:none;transition:border-color .2s,color .2s,background .2s}
.mega-trigger:hover,.mega-trigger:focus-visible{border-color:rgba(85,230,193,.55);color:#fff;background:rgba(85,230,193,.07)}
.mega-panel{position:absolute;right:0;top:calc(100% + 14px);width:720px;max-width:90vw;padding:22px;background:rgba(10,20,35,.92);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.25s;z-index:120}
.mega-trigger-wrap:hover .mega-panel,.mega-trigger-wrap:focus-within .mega-panel{opacity:1;visibility:visible;transform:translateY(0)}
.mega-panel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mega-col-title{color:var(--cyan);font-size:13px;letter-spacing:1px;font-weight:600;margin-bottom:12px;display:flex;gap:8px;align-items:center}
.mega-col-title i{color:var(--blue)}
.mega-col-list{display:flex;flex-direction:column;gap:9px}
.mega-col-list a{color:var(--ink-2);font-size:14px;line-height:1.4;transition:.2s;border-radius:6px;padding:2px 0;outline:none}
.mega-col-list a:hover,.mega-col-list a:focus-visible{color:#fff;text-decoration:underline;text-decoration-color:rgba(85,230,193,.5);text-underline-offset:4px}

/* Hero / Page heading */
.category-hero{position:relative;padding:64px 0 28px;overflow:hidden}
.category-hero .section-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,18,33,.96) 30%,rgba(10,18,33,.72)),url('/assets/images/backpic/back-1.png') center/cover no-repeat;z-index:-1}
.category-hero::after{content:"";position:absolute;right:-120px;top:-80px;width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side, rgba(28,156,255,.3),transparent);filter:blur(20px);z-index:-1}
.category-breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3);margin-bottom:24px;flex-wrap:wrap}
.category-breadcrumb a{color:var(--ink-2);transition:.2s;outline:none}
.category-breadcrumb a:hover,.category-breadcrumb a:focus-visible{color:var(--cyan);text-decoration:underline;text-underline-offset:4px}
.category-breadcrumb .sep{color:rgba(255,255,255,.28)}
.category-hero-text{max-width:900px;margin:0 auto;text-align:center}
.category-hero h1.page-title{color:#fff;font-weight:800;line-height:1.2;font-size:clamp(30px,4.6vw,58px);margin-bottom:16px;letter-spacing:.5px}
.category-hero h1.page-title span{display:inline-block;background:linear-gradient(90deg,#55E6C1,#1C9CFF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:4px}
.category-hero .page-lead{color:var(--ink-2);font-size:16px;max-width:780px;margin:0 auto 30px;line-height:1.8}
.hero-data-row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.hero-data-item{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:10px 18px;font-size:14px;color:var(--ink-2);box-shadow:0 10px 28px rgba(0,0,0,.18)}
.hero-data-item i{color:var(--cyan)}
.hero-data-item strong{color:#fff;font-size:18px}

/* Section utility */
.section{padding:64px 0}
.section-alt{background:transparent;position:relative}
.section-header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:32px;flex-wrap:wrap}
.section-htag{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.section-htag::before{content:"";width:3px;height:17px;border-radius:3px;background:var(--cyan);box-shadow:0 0 12px rgba(85,230,193,.7)}
.section-htag span{color:var(--cyan);font-size:14px;font-weight:600;letter-spacing:1px;text-transform:uppercase}
.section-title{font-size:clamp(24px,3vw,36px);font-weight:800;color:#fff;line-height:1.3;margin-bottom:10px}
.section-desc{color:var(--ink-3);font-size:15px;max-width:720px}
.section-more{white-space:nowrap}
.section-more a{color:var(--ink-2);font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:6px;outline:none;transition:.2s}
.section-more a i{transition:transform .2s}
.section-more a:hover,.section-more a:focus-visible{color:var(--cyan)}
.section-more a:hover i{transform:translateX(4px)}

/* Service feature cards */
.service-feature-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:20px}
.service-card{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s;position:relative}
.service-card::before{content:"";position:absolute;top:0;left:18px;right:18px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}
.service-card:hover{transform:translateY(-5px);border-color:rgba(28,156,255,.4);box-shadow:var(--shadow)}
.card-media{position:relative;overflow:hidden;aspect-ratio:16/9}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.service-card:hover .card-media img{transform:scale(1.04)}
.card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 24%,rgba(4,11,22,.76));z-index:1}
.card-body-e{padding:20px}
.card-badge{display:inline-block;padding:4px 12px;background:rgba(85,230,193,.12);border:1px solid rgba(85,230,193,.3);border-radius:999px;color:var(--cyan);font-size:12px;font-weight:700;margin-bottom:12px}
.card-body-e h3{color:#fff;font-size:19px;font-weight:800;margin-bottom:8px}
.card-body-e p{color:var(--ink-2);font-size:14px;line-height:1.7}
.feature-big{grid-row:span 1}
.feature-side{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:var(--radius-card)}
.feature-side .card-row{display:flex;gap:14px;padding:14px;align-items:flex-start;transition:.2s}
.feature-side .card-row+.card-row{border-top:1px solid rgba(255,255,255,.06)}
.feature-icon{width:42px;height:42px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px}
.fi-blue{background:rgba(28,156,255,.12);color:#7ec9ff;border:1px solid rgba(28,156,255,.2)}
.fi-cyan{background:rgba(85,230,193,.12);color:var(--cyan);border:1px solid rgba(85,230,193,.2)}
.feature-side h4{color:#fff;font-size:16px;font-weight:700;margin-bottom:4px}
.feature-side p{color:var(--ink-3);font-size:13px;line-height:1.6}
.feature-side a.link-more{font-size:13px;color:var(--blue);font-weight:600;display:inline-flex;align-items:center;gap:5px;outline:none}
.feature-side a.link-more:hover{color:var(--cyan)}
.feature-side a.link-more i{transition:.2s}
.feature-side a.link-more:hover i{transform:translateX(3px)}

/* Service scenario split */
.split-scene{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split-img{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.split-img::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(10,18,33,.1),rgba(10,18,33,.55));z-index:1}
.split-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.split-img .img-label{position:absolute;bottom:14px;left:14px;z-index:2;background:rgba(6,14,24,.75);border:1px solid rgba(255,255,255,.15);padding:6px 14px;border-radius:999px;font-size:13px;color:#fff;backdrop-filter:blur(8px)}
.split-content h3{color:#fff;font-size:26px;font-weight:800;margin-bottom:18px}
.check-list{display:flex;flex-direction:column;gap:15px;margin-bottom:24px}
.check-list li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-2);font-size:15px;line-height:1.6}
.check-list li i{color:var(--cyan);margin-top:5px;font-size:14px}
.check-list li strong{color:#fff;display:block}

/* Process Timeline */
.process-section{background:linear-gradient(180deg,rgba(15,27,46,.45),rgba(15,27,46,.12))}
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative;margin-top:50px}
.process-grid::before{content:"";position:absolute;top:42px;left:10%;right:10%;height:2px;border-top:2px dashed rgba(85,230,193,.45);z-index:0}
.process-step{text-align:center;padding:0 20px;position:relative;z-index:1}
.step-icon{width:84px;height:84px;margin:0 auto 18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;color:#041423;background:linear-gradient(135deg,#55E6C1,#1C9CFF);box-shadow:0 0 30px rgba(85,230,193,.3);border:4px solid rgba(255,255,255,.16)}
.step-num{font-size:12px;font-weight:900;letter-spacing:2px;color:var(--cyan);margin-bottom:6px}
.step-title{color:#fff;font-size:18px;font-weight:700;margin-bottom:8px}
.step-text{color:var(--ink-3);font-size:14px;max-width:290px;margin:0 auto 10px;line-height:1.7}
.process-note{text-align:center;margin-top:36px}

/* Resource lists */
.resource-list{display:flex;flex-direction:column;gap:14px}
.resource-item{display:flex;align-items:center;gap:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px 16px;transition:.25s}
.resource-item:hover{background:rgba(255,255,255,.07);border-color:rgba(28,156,255,.35);transform:translateX(4px)}
.resource-thumb{width:88px;height:52px;border-radius:10px;object-fit:cover;flex:none}
.resource-info{flex:1;min-width:0}
.resource-info h4{color:#fff;font-size:15px;font-weight:700;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;outline:none;transition:.2s}
.resource-info h4 a:hover{color:var(--cyan)}
.resource-info p{color:var(--ink-3);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resource-tag{flex:none;background:rgba(28,156,255,.1);border:1px solid rgba(28,156,255,.22);color:#87ceff;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600}

/* two-column with image */
.double-panel{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;margin-top:36px}
.panel-card{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.09);border-radius:var(--radius-card);overflow:hidden}
.panel-img{height:200px;overflow:hidden;position:relative}
.panel-img img{width:100%;height:100%;object-fit:cover;transition:.5s}
.panel-img:hover img{transform:scale(1.04)}
.panel-img .panel-badge{position:absolute;top:12px;left:12px;background:rgba(4,14,24,.72);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:13px;padding:5px 12px;border-radius:999px}
.panel-content{padding:20px 22px}
.panel-content h3{color:#fff;font-size:19px;font-weight:700;margin-bottom:8px}
.panel-content p{color:var(--ink-2);font-size:14px;line-height:1.7}

/* staff/coach cards */
.coach-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px}
.coach-card{display:flex;gap:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:var(--radius-card);padding:16px;align-items:center;transition:.3s}
.coach-card:hover{border-color:rgba(85,230,193,.4);background:rgba(255,255,255,.075)}
.coach-ava{width:72px;height:72px;border-radius:20px;object-fit:cover;flex:none;background:var(--bg2)}
.coach-info h4{color:#fff;font-size:17px;font-weight:700;margin-bottom:4px}
.coach-meta{font-size:13px;color:var(--cyan);margin-bottom:6px}
.coach-info p{color:var(--ink-3);font-size:13px;line-height:1.6}

/* Logo strip / collab */
.collab-strip{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:28px}
.collab-chip{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:9px 20px;color:var(--ink-2);font-size:14px;font-weight:600;display:flex;align-items:center;gap:7px}
.collab-chip i{color:var(--blue)}

/* FAQ */
.faq-wrapper{max-width:920px;margin:10px auto 0}
.accordion-item{background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:14px;margin-bottom:12px;overflow:hidden;transition:border-color .25s}
.accordion-item:has(.accordion-button:not(.collapsed)){border-color:rgba(85,230,193,.5)}
.accordion-button{background:transparent;color:var(--ink);font-size:15px;font-weight:700;padding:18px 20px;box-shadow:none;outline:none;transition:.2s}
.accordion-button:not(.collapsed){color:#fff;background:rgba(85,230,193,.04)}
.accordion-button:focus-visible{box-shadow:0 0 0 3px rgba(85,230,193,.35)}
.accordion-button::after{background-image:none;content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;font-size:14px;color:var(--cyan)}
.accordion-button:not(.collapsed)::after{transform:rotate(180deg)}
.accordion-body{color:var(--ink-2);font-size:14px;line-height:1.8;padding:0 20px 18px}

/* CTA */
.cta-section{position:relative;padding:90px 0}
.cta-section::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(8,14,27,.96),rgba(8,18,34,.82)),url('/assets/images/backpic/back-3.webp') center/cover no-repeat;z-index:-2}
.cta-section::after{content:"";position:absolute;left:10%;right:auto;top:50%;width:600px;height:600px;transform:translateY(-50%);background:radial-gradient(circle,rgba(28,156,255,.12) 0%,transparent 60%);z-index:-1}
.cta-card{background:rgba(12,20,34,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.15);border-radius:24px;padding:40px;box-shadow:var(--shadow);display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center}
.cta-intro h2{color:#fff;font-size:clamp(24px,3vw,34px);font-weight:800;line-height:1.25;margin-bottom:14px}
.cta-intro p{color:var(--ink-2);font-size:15px;margin-bottom:18px}
.cta-points{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.cta-points li{display:flex;align-items:center;gap:9px;color:var(--ink-2);font-size:14px}
.cta-points li i{color:var(--cyan);font-size:12px}
.form-control-custom{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:var(--radius-input);padding:11px 14px;color:#fff;font-size:14px;transition:border-color .2s,box-shadow .2s;outline:none}
.form-control-custom:focus{background:rgba(255,255,255,.07);border-color:rgba(85,230,193,.65);box-shadow:0 0 0 3px rgba(85,230,193,.12);color:#fff}
.form-label-custom{color:var(--ink-2);font-size:13px;font-weight:600;margin-bottom:6px}
.form-select-custom{color-scheme:dark;background-color:rgba(255,255,255,.05)} 
.form-select-custom option{background:#0f1b2e;color:#fff}
.form-submit-btn{width:100%;padding:13px;border:0;border-radius:10px;color:#05111f;font-weight:800;letter-spacing:.3px}
.form-note{font-size:12px;color:var(--ink-3);margin-top:8px}
.form-feedback{display:none;background:rgba(85,230,193,.1);border:1px solid rgba(85,230,193,.45);border-radius:12px;color:var(--cyan);padding:14px 18px;font-size:14px;margin-top:14px;text-align:center}
.form-feedback.success{display:block}

/* Footer */
.site-footer{background:#070e1b;border-top:1px solid rgba(255,255,255,.08);padding:56px 0 0;margin-top:30px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:30px;padding-bottom:26px}
.footer-brand .brand{margin-bottom:14px}
.footer-brand-tip{color:var(--ink-3);font-size:14px;line-height:1.7;max-width:320px;margin-top:10px}
.footer-title{color:#fff;font-size:16px;font-weight:700;margin-bottom:14px;letter-spacing:.3px}
.footer-links{display:flex;flex-direction:column;gap:8px}
.footer-links a{color:var(--ink-2);font-size:14px;transition:.2s;width:fit-content;outline:none}
.footer-links a:hover,.footer-links a:focus-visible{color:var(--cyan);padding-left:3px}
.footer-contact{color:var(--ink-3);font-size:13px;line-height:1.9;display:flex;flex-direction:column;gap:4px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding:18px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;color:var(--ink-3);font-size:13px}

/* Accessibility */
:focus-visible{outline:2px solid rgba(85,230,193,.7);outline-offset:3px;border-radius:6px}

/* Responsive */
@media (max-width:991px){
  .nav-menu-toggle{display:flex}
  .main-nav-list{position:fixed;top:72px;left:0;right:0;background:rgba(8,14,26,.98);flex-direction:column;padding:18px 20px 24px;transform:translateY(-250%);transition:.32s;border-bottom:1px solid rgba(255,255,255,.08);max-height:calc(100vh - 72px);overflow:auto;backdrop-filter:blur(18px)}
  .main-nav-list.open{transform:translateY(0)}
  .main-nav-list .nav-link::after{display:none}
  .mega-trigger-wrap{position:static}
  .mega-panel{position:static;width:100%;opacity:1;visibility:visible;transform:none;order:99;margin-top:6px;box-shadow:none;background:rgba(255,255,255,.04);border-radius:16px}
  .mega-panel-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:768px){
  .section{padding:52px 0}
  .header-actions .btn-nav-cta{display:none}
  .service-feature-grid{grid-template-columns:1fr}
  .double-panel{grid-template-columns:1fr}
  .process-grid{grid-template-columns:1fr;gap:40px;margin-top:20px}
  .process-grid::before{display:none}
  .coach-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .mega-panel-grid{grid-template-columns:1fr}
  .cta-card{grid-template-columns:1fr}
  .split-scene{grid-template-columns:1fr}
  .split-content h3{font-size:22px}
}
@media (max-width:576px){
  .category-hero{padding:44px 0 20px}
  .footer-grid{grid-template-columns:1fr}
  .cta-section{padding:70px 0}
  .cta-card{padding:24px 20px}
  .resource-item{flex-wrap:wrap}
  .resource-thumb{width:100%;height:120px}
  .resource-info h4{white-space:normal}
  .resource-info p{white-space:normal}
  .btn{width:100%;min-height:44px}
  .hero-data-row{flex-direction:column;align-items:center}
}