/* roulang page: index */
:root {
        --c-bg: #0F221A;
        --c-surface: #F0F4EF;
        --c-card: #FFFFFF;
        --c-line: #D5E0D5;
        --c-primary: #C9F73A;
        --c-primary-deep: #00A86B;
        --c-ink: #10241C;
        --c-gray: #5A6A60;
        --c-time: #315D4E;
        --c-error: #F26D6D;
        --c-timer-edge: #2FBE76;
        --radius-xs: 4px;
        --radius-card: 16px;
        --shadow-card: 0 1px 2px rgba(16, 36, 28, 0.06), 0 10px 30px rgba(16, 36, 28, 0.08);
        --shadow-green: 0 12px 38px rgba(47, 190, 118, 0.18);
        --font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
        --font-display: "Barlow Condensed", "Archivo", "PingFang SC", Arial, sans-serif;
    }

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

    html {
        scroll-behavior: smooth;
    }

    body {
        margin: 0;
        background: var(--c-surface);
        color: var(--c-ink);
        font-family: var(--font-sans);
        font-size: 16px;
        line-height: 1.8;
        -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd {
        margin: 0;
        padding: 0;
    }

    ul, ol {
        list-style: none;
    }

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

    button,
    input,
    select,
    textarea {
        font: inherit;
        line-height: inherit;
    }

    a {
        color: inherit;
        text-decoration: none;
        transition: color .2s ease-out, background-color .2s ease-out, border-color .2s ease-out, transform .2s ease-out, box-shadow .2s ease-out, opacity .2s ease-out;
    }

    a:hover {
        color: var(--c-primary-deep);
    }

    button {
        border: 0;
        cursor: pointer;
    }

    :focus-visible {
        outline: 3px solid var(--c-primary);
        outline-offset: 2px;
    }

    .container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding-left: 24px;
        padding-right: 24px;
    }

    .section {
        padding: 84px 0;
    }

    .is-hidden {
        display: none !important;
    }

    .topstrip {
        background: var(--c-primary);
        color: #10241C;
        font-size: 14px;
        line-height: 1.4;
    }

    .topstrip.is-hidden {
        display: none;
    }

    .topstrip__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        min-height: 36px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .topstrip__message {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        font-weight: 500;
    }

    .topstrip__message span {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .signal-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #0F221A;
        animation: pulse-dot 1.6s infinite;
        flex: 0 0 auto;
    }

    @keyframes pulse-dot {
        0%, 100% {
            box-shadow: 0 0 0 0 rgba(15, 34, 26, 0.45);
        }
        55% {
            box-shadow: 0 0 0 7px rgba(15, 34, 26, 0);
        }
    }

    .topstrip__time {
        font-family: "Archivo", monospace;
        font-size: 13px;
        color: #10241C;
        opacity: .78;
        white-space: nowrap;
    }

    .topstrip__close {
        width: 28px;
        height: 28px;
        background: transparent;
        border-radius: var(--radius-xs);
        font-size: 18px;
        line-height: 1;
        color: #10241C;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background .2s ease-out;
    }

    .topstrip__close:hover {
        background: rgba(15, 34, 26, .12);
    }

    .siteheader {
        position: sticky;
        top: 0;
        z-index: 80;
        background: var(--c-bg);
        border-bottom: 1px solid #1C3B2D;
    }

    .siteheader__brandrow {
        min-height: 72px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

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

    .brand-lockup__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        position: relative;
        flex: 0 0 auto;
    }

    .brand-lockup__icon::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 1px solid rgba(201, 247, 58, .35);
    }

    .brand-lockup__text {
        display: flex;
        align-items: baseline;
        gap: 8px;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 24px;
        letter-spacing: .012em;
        color: #ffffff;
        white-space: nowrap;
    }

    .brand-lockup__official {
        color: rgba(240, 244, 239, .52);
        font-family: var(--font-sans);
        font-size: 13px;
        font-weight: 400;
        letter-spacing: .2em;
        transform: translateY(-1px);
    }

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

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

    .btn-primary {
        background: var(--c-primary);
        color: #10241C;
        box-shadow: inset 0 -4px 0 #8fc440;
    }

    .btn-primary:hover {
        background: #D8FF70;
        color: #10241C;
        box-shadow: 0 8px 22px rgba(201, 247, 58, .22), inset 0 -4px 0 #8fc440;
        transform: translateY(-1px);
    }

    .btn-primary:active {
        transform: translateY(2px);
        box-shadow: inset 0 -1px 0 #8fc440;
    }

    .btn-primary.disabled,
    .btn-primary:disabled {
        opacity: .65;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }

    .btn-ghost {
        background: transparent;
        border: 1px solid rgba(240, 244, 239, .55);
        color: #F0F4EF;
    }

    .btn-ghost:hover {
        background: rgba(47, 190, 118, .12);
        color: #ffffff;
        border-color: #C9F73A;
        transform: translateY(-1px);
    }

    .btn-header {
        padding: 10px 18px;
        font-size: 14px;
        min-height: 40px;
        box-shadow: none;
        background: rgba(201, 247, 58, .12);
        border: 1px solid rgba(201, 247, 58, .55);
        color: #C9F73A;
    }

    .btn-header:hover {
        background: var(--c-primary);
        color: #10241C;
    }

    .nav-toggle {
        display: none;
        width: 44px;
        height: 44px;
        background: transparent;
        border: 1px solid rgba(240, 244, 239, .22);
        border-radius: 4px;
        color: #F0F4EF;
        align-items: center;
        justify-content: center;
        gap: 5px;
        flex-direction: column;
    }

    .nav-toggle span {
        display: block;
        width: 20px;
        height: 2px;
        background: currentColor;
        transition: transform .2s ease-out, opacity .2s ease-out;
    }

    .nav-toggle.is-open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .nav-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.is-open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .channelbar {
        border-top: 1px solid #1C3B2D;
        background: var(--c-bg);
    }

    .channelbar__inner {
        display: flex;
        align-items: stretch;
        min-height: 52px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .channelbar__inner::-webkit-scrollbar {
        display: none;
    }

    .channelbar a.channel-link {
        display: inline-flex;
        align-items: center;
        padding: 0 18px;
        font-size: 14px;
        letter-spacing: .02em;
        color: rgba(240, 244, 239, .68);
        white-space: nowrap;
        border-bottom: 4px solid transparent;
        transition: color .2s ease-out, border-color .2s ease-out, background-color .2s ease-out;
    }

    .channelbar a.channel-link:hover {
        color: #C9F73A;
        border-bottom-color: rgba(201, 247, 58, .55);
        background: rgba(201, 247, 58, .04);
    }

    .channelbar a.channel-link.active {
        color: #ffffff;
        border-bottom-color: var(--c-primary);
        font-weight: 600;
    }

    .nav-mask {
        display: none;
    }

    .hero__stage {
        position: relative;
        background: linear-gradient(98deg, rgba(15, 34, 26, .96) 0%, rgba(15, 34, 26, .86) 50%, rgba(15, 34, 26, .44) 100%), url('/assets/images/backpic/back-1.png') center center / cover no-repeat;
        color: #F0F4EF;
        min-height: 84vh;
        display: flex;
        align-items: stretch;
        overflow: hidden;
    }

    .hero__stage::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background-image: linear-gradient(rgba(201, 247, 58, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(201, 247, 58, .035) 1px, transparent 1px);
        background-size: 36px 36px;
    }

    .hero__stage>.container {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        width: 100%;
        padding-top: 36px;
        padding-bottom: 36px;
    }

    .hero__grid {
        display: grid;
        grid-template-columns: minmax(0, 58fr) minmax(380px, 42fr);
        gap: 60px;
        width: 100%;
        align-items: center;
    }

    .hero__content {
        padding: 62px 0 56px;
    }

    .hero__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        letter-spacing: .15em;
        color: #C9F73A;
        border: 1px solid rgba(201, 247, 58, .42);
        background: rgba(15, 34, 26, .42);
        padding: 7px 12px 7px 14px;
        border-radius: 999px;
        margin-bottom: 26px;
    }

    .hero__eyebrow::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--c-primary);
        box-shadow: 0 0 0 5px rgba(201, 247, 58, .14);
    }

    .hero_h1 {
        font-family: var(--font-display);
        color: #ffffff;
        font-size: clamp(42px, 6.4vw, 76px);
        font-weight: 800;
        line-height: 1.02;
        letter-spacing: -0.01em;
        max-width: 900px;
    }

    .hero__lead {
        margin-top: 24px;
        color: rgba(240, 244, 239, .88);
        font-size: 17px;
        line-height: 1.75;
        max-width: 560px;
    }

    .hero__subline {
        margin-top: 8px;
        color: rgba(201, 247, 58, .88);
        font-size: 15px;
        line-height: 1.6;
    }

    .hero__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 14px;
        margin-top: 34px;
    }

    .hero__details {
        display: flex;
        flex-wrap: wrap;
        gap: 18px 30px;
        margin-top: 48px;
        border-top: 1px solid rgba(240, 244, 239, .16);
        padding-top: 20px;
        font-size: 14px;
        color: rgba(240, 244, 239, .62);
    }

    .hero__details strong {
        color: #E4F2E6;
        font-weight: 600;
        display: block;
        font-size: 15px;
    }

    .hero__panel {
        background: var(--c-card);
        color: var(--c-ink);
        border-radius: 20px;
        padding: 26px;
        box-shadow: 0 24px 80px rgba(15, 34, 26, .34), 0 0 0 1px rgba(201, 247, 58, .06);
        width: 100%;
        max-width: 440px;
        justify-self: end;
        position: relative;
    }

    .hero__panel::before {
        content: "";
        position: absolute;
        top: -1px;
        left: -1px;
        width: 76px;
        height: 4px;
        background: var(--c-primary);
        border-radius: 0 0 4px 0;
    }

    .hero__panel-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 22px;
    }

    .hero__panel-title {
        font-size: 18px;
        font-weight: 700;
        color: #10241C;
    }

    .hero__panel-badge {
        font-size: 12px;
        color: #0F6C48;
        background: rgba(0, 168, 107, .13);
        border-radius: 999px;
        padding: 4px 10px;
        white-space: nowrap;
        font-weight: 600;
    }

    .loginwidget {
        display: grid;
        gap: 14px;
        border: 1px dashed var(--c-line);
        border-radius: 14px;
        padding: 16px;
        background: #FBFDF8;
    }

    .loginwidget label {
        display: grid;
        gap: 6px;
        font-size: 13px;
        font-weight: 600;
        color: #315D4E;
    }

    .loginwidget input {
        height: 42px;
        border-radius: 6px;
        border: 1px solid #D5E0D5;
        background: #ffffff;
        padding: 0 12px;
        width: 100%;
        color: #10241C;
        outline: none;
        transition: border-color .2s ease-out, box-shadow .2s ease-out;
    }

    .loginwidget input:focus {
        border-color: #00A86B;
        box-shadow: 0 0 0 4px rgba(0, 168, 107, .15);
    }

    .loginwidget__action {
        margin-top: 4px;
        text-align: right;
        font-size: 13px;
        font-weight: 600;
        color: #10241C;
        background: var(--c-primary);
        display: inline-flex;
        align-items: center;
        gap: 4px;
        justify-content: center;
        border-radius: 4px;
        padding: 9px 12px;
        box-shadow: inset 0 -3px 0 #9CCD40;
        transition: background .2s ease-out, box-shadow .2s ease-out, transform .2s ease-out;
    }

    .loginwidget__action:hover {
        background: #D8FF70;
        transform: translateY(-1px);
    }

    .loginwidget__action span {
        font-size: 18px;
        line-height: 1;
    }

    .hero__panel-note {
        margin-top: 15px;
        font-size: 13px;
        color: var(--c-gray);
    }

    .hero__panel-status {
        margin-top: 22px;
        display: flex;
        align-items: center;
        gap: 18px;
        border-top: 1px solid #E8EEE8;
        padding-top: 16px;
        color: #315D4E;
        font-size: 13px;
    }

    .hero__panel-status .status-ok {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #0F6C48;
        font-weight: 600;
    }

    .hero__panel-status .status-ok::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #00A86B;
        box-shadow: 0 0 0 0 rgba(0, 168, 107, .38);
        animation: pulse-dot 1.8s infinite;
    }

    .signal-strip {
        background: #08140E;
        border-bottom: 1px solid rgba(201, 247, 58, .25);
        color: #F0F4EF;
    }

    .signal-strip__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .signal-strip__item {
        padding: 20px 26px;
        border-right: 1px solid rgba(201, 247, 58, .16);
    }

    .signal-strip__item:first-child {
        padding-left: 0;
    }

    .signal-strip__item:last-child {
        border-right: 0;
    }

    .signal-strip__label {
        font-size: 12px;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: rgba(240, 244, 239, .52);
        display: block;
        margin-bottom: 6px;
    }

    .signal-strip__value {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-display);
        font-size: 22px;
        font-weight: 700;
        color: #C9F73A;
        font-variant-numeric: tabular-nums;
    }

    .signal-strip__icon {
        display: inline-block;
        width: 8px;
        height: 8px;
        background: var(--c-primary);
        border-radius: 50%;
        box-shadow: 0 0 0 5px rgba(201, 247, 58, .14);
    }

    .updates {
        background: var(--c-surface);
        position: relative;
    }

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

    .section-kicker {
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .16em;
        color: #00A86B;
        text-transform: uppercase;
    }

    .section-title {
        font-family: var(--font-display);
        font-size: clamp(32px, 4.6vw, 48px);
        font-weight: 700;
        line-height: 1.16;
        letter-spacing: -.01em;
        color: #10241C;
        margin-top: 6px;
    }

    .section-title::after {
        content: "";
        display: block;
        width: 42px;
        height: 3px;
        background: var(--c-primary);
        margin-top: 12px;
    }

    .section-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #0F6C48;
        font-weight: 600;
        font-size: 14px;
        border-bottom: 1px solid rgba(0, 168, 107, .4);
        padding-bottom: 4px;
        transition: gap .2s ease-out, color .2s ease-out, border-color .2s ease-out, transform .2s ease-out;
    }

    .section-link:hover {
        color: #10241C;
        gap: 12px;
        border-bottom-color: #C9F73A;
    }

    .updates__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
        align-items: stretch;
    }

    .update-card {
        background: var(--c-card);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: var(--shadow-card);
        display: flex;
        flex-direction: column;
        transition: transform .2s ease-out, box-shadow .2s ease-out;
        min-height: 100%;
    }

    .update-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 44px rgba(16, 36, 28, .13);
    }

    .update-card--wide {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
    }

    .update-card--wide .update-card__imgbox {
        height: 100%;
        min-height: 260px;
    }

    .update-card__imgbox {
        background: #E2EEF5;
        position: relative;
        overflow: hidden;
        aspect-ratio: 16 / 9;
    }

    .update-card__imgbox img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .update-card__imgbox::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(15, 34, 26, .1), transparent 46%);
        pointer-events: none;
    }

    .update-card__body {
        padding: 24px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex: 1;
        min-width: 0;
    }

    .update-card__meta {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 12px;
    }

    .meta-badge {
        background: rgba(0, 168, 107, .12);
        color: #0F6C48;
        font-size: 12px;
        font-weight: 600;
        padding: 3px 9px;
        border-radius: 4px;
    }

    .meta-time {
        color: #315D4E;
        font-size: 13px;
    }

    .update-card__title {
        font-size: 20px;
        line-height: 1.4;
        font-weight: 700;
        color: #10241C;
        margin-bottom: 10px;
        display: block;
    }

    .update-card__title a {
        transition: color .2s ease-out;
    }

    .update-card__title a:hover {
        color: #00A86B;
    }

    .update-card__summary {
        color: #5A6A60;
        font-size: 15px;
        line-height: 1.75;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .text-arrow {
        margin-top: auto;
        padding-top: 18px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #10241C;
        font-size: 14px;
        font-weight: 600;
        transition: gap .2s ease-out, color .2s ease-out;
    }

    .text-arrow:hover {
        color: #00A86B;
        gap: 12px;
    }

    .updates__empty {
        background: rgba(255, 255, 255, .76);
        border: 1px solid var(--c-line);
        border-radius: 16px;
        padding: 52px 24px;
        text-align: center;
        color: #5A6A60;
        box-shadow: var(--shadow-card);
    }

    .clock-symbol {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: 1px solid rgba(0, 168, 107, .28);
        color: #0F6C48;
        font-size: 22px;
        margin-bottom: 12px;
    }

    .agenda {
        background: #EAF1EC;
    }

    .agenda__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 168px;
        gap: 28px;
        align-items: start;
    }

    .agenda__track {
        position: relative;
        border-left: 3px solid #10241C;
        padding-left: 34px;
        display: grid;
        gap: 30px;
    }

    .agenda__track::before {
        content: "";
        position: absolute;
        left: 12px;
        top: 4px;
        bottom: 4px;
        width: 6px;
        background: repeating-linear-gradient(180deg, #C9F73A 0 6px, transparent 6px 14px);
        opacity: .7;
    }

    .agenda-item {
        display: grid;
        grid-template-columns: 92px 1fr;
        gap: 22px;
        background: rgba(255, 255, 255, .70);
        padding: 20px 22px;
        border-radius: 12px;
        border: 1px solid #E1EBDF;
        transition: transform .2s ease-out, box-shadow .2s ease-out;
    }

    .agenda-item:hover {
        transform: translateX(4px);
        box-shadow: var(--shadow-card);
    }

    .agenda__time {
        font-family: var(--font-display);
        font-size: 26px;
        font-weight: 700;
        color: #0F6C48;
        font-variant-numeric: tabular-nums;
        line-height: 1.1;
    }

    .agenda__content h3 {
        font-size: 18px;
        font-weight: 700;
        color: #10241C;
        line-height: 1.35;
    }

    .agenda__content p {
        margin-top: 6px;
        color: #5A6A60;
        font-size: 14px;
    }

    .agenda-tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(0, 168, 107, .12);
        color: #0F6C48;
        font-size: 12px;
        padding: 3px 8px;
        border-radius: 3px;
        margin-top: 10px;
    }

    .side-sticky {
        position: sticky;
        top: 130px;
        background: #0F221A;
        border: 1px solid #0F6C48;
        color: #F0F4EF;
        border-radius: 12px;
        padding: 18px;
        text-align: center;
    }

    .side-sticky__name {
        display: block;
        writing-mode: vertical-rl;
        margin: 0 auto;
        font-size: 24px;
        letter-spacing: .35em;
        font-weight: 700;
        color: #C9F73A;
    }

    .side-sticky__btn {
        display: block;
        margin-top: 20px;
        color: #10241C;
        background: var(--c-primary);
        border-radius: 999px;
        font-size: 14px;
        font-weight: 600;
        padding: 10px 14px;
        box-shadow: inset 0 -3px 0 #9CCD40;
    }

    .side-sticky__btn:hover {
        background: #D8FF70;
    }

    .feature-section {
        background: var(--c-surface);
        overflow: hidden;
        position: relative;
    }

    .feature-section::before {
        content: "OFFICIAL";
        position: absolute;
        top: -62px;
        right: -28px;
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 232px;
        line-height: 1;
        color: rgba(15, 34, 26, .04);
        pointer-events: none;
    }

    .feature__grid {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 46px;
        align-items: start;
        position: relative;
    }

    .feature__intro h2 {
        font-family: var(--font-display);
        font-size: clamp(30px, 4vw, 44px);
        line-height: 1.2;
        color: #10241C;
        font-weight: 700;
    }

    .feature__intro p {
        margin-top: 16px;
        color: var(--c-gray);
        line-height: 1.8;
    }

    .feature__intro .section-link {
        margin-top: 16px;
    }

    .feature__cards {
        display: grid;
        gap: 18px;
        grid-template-columns: 1fr 1fr;
    }

    .feature-card {
        border-radius: 16px;
        overflow: hidden;
        background: #fff;
        box-shadow: var(--shadow-card);
        min-height: 210px;
        padding: 0;
        position: relative;
        display: flex;
        flex-direction: column;
        transition: transform .25s ease-out, box-shadow .25s ease-out;
    }

    .feature-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 40px rgba(15, 34, 26, .12);
    }

    .feature-card--photo {
        grid-column: 2;
        gap: 0;
        overflow: hidden;
    }

    .feature-card__imgbox {
        min-height: 230px;
        overflow: hidden;
        position: relative;
        background: #EAF1EC;
    }

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

    .feature-card__imgbox::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(15, 34, 26, .08), rgba(15, 34, 26, .48));
    }

    .feature-card__content {
        padding: 20px 20px 16px;
        z-index: 2;
        position: relative;
    }

    .feature-card--photo .feature-card__content {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        color: #fff;
        padding: 68px 18px 18px;
        background: linear-gradient(180deg, transparent, rgba(15, 34, 26, .84));
        border: 0;
    }

    .feature-card--photo .feature-card__content h3 {
        color: #fff;
    }

    .feature-card--outline {
        background: transparent;
        border: 1px solid rgba(0, 168, 107, .4);
        box-shadow: none;
    }

    .feature-card h3 {
        font-size: 18px;
        line-height: 1.45;
        color: #10241C;
        font-weight: 700;
        margin-bottom: 4px;
    }

    .feature-card p {
        font-size: 14px;
        color: #5A6A60;
        line-height: 1.6;
    }

    .feature-card--photo .feature-card p {
        color: rgba(255, 255, 255, .78);
    }

    .feature-card__arrow {
        margin-top: auto;
        padding-top: 10px;
        font-size: 14px;
        color: #10241C;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .feature-card:hover .feature-card__arrow {
        gap: 12px;
    }

    .pricing {
        background: #0F221A;
        color: #F0F4EF;
    }

    .pricing .section-title {
        color: #fff;
    }

    .pricing .section-link {
        color: #C9F73A;
        border-bottom-color: rgba(201, 247, 58, .44);
    }

    .pricing .section-link:hover {
        color: #D8FF70;
    }

    .pricing__grid {
        display: flex;
        align-items: stretch;
        justify-content: center;
        gap: 22px;
        flex-wrap: wrap;
        margin-top: 48px;
    }

    .price-card {
        background: #fff;
        color: #10241C;
        border-radius: 16px;
        width: 30%;
        min-width: 260px;
        padding: 24px;
        border-top: 6px solid #D5E0D5;
        box-shadow: 0 20px 50px rgba(0, 0, 0, .2);
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .price-card--hot {
        width: 36%;
        min-width: 300px;
        border-top-color: #C9F73A;
        transform: translateY(-12px);
        box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
    }

    .price-card--hot .price-button,
    .price-card--hot .btn-pricing-primary {
        background: var(--c-primary);
        color: #10241C;
        box-shadow: inset 0 -4px 0 #8fc440;
    }

    .price-card--hot .btn-pricing-primary:hover {
        background: #D8FF70;
        color: #10241C;
    }

    .price-card .btn-pricing {
        display: block;
        border-radius: 4px;
        padding: 13px 16px;
        font-weight: 600;
        background: transparent;
        border: 1px solid #A8C3A8;
        color: #10241C;
        text-align: center;
        margin-top: 20px;
    }

    .price-card .btn-pricing:hover {
        background: rgba(0, 168, 107, .12);
    }

    .price-badge {
        position: absolute;
        top: -12px;
        left: 18px;
        background: #C9F73A;
        color: #10241C;
        font-size: 12px;
        font-weight: 700;
        padding: 3px 9px;
        border-radius: 3px;
        letter-spacing: .05em;
    }

    .price-card__head {
        margin-bottom: 18px;
        padding-bottom: 14px;
        border-bottom: 1px solid #EAF1EC;
    }

    .price-card h3 {
        font-size: 20px;
        font-weight: 700;
    }

    .price-card__head p {
        color: #5A6A60;
        font-size: 14px;
        margin-top: 4px;
    }

    .price-list {
        display: grid;
        gap: 10px;
        flex: 1;
    }

    .price-list li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 14px;
        color: #315D4E;
        line-height: 1.55;
    }

    .price-list li::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #00A86B;
        flex: 0 0 auto;
        margin-top: 7px;
    }

    .form-outer {
        background: linear-gradient(rgba(15, 34, 26, .92), rgba(15, 34, 26, .92)), url('/assets/images/backpic/back-3.webp') center / cover no-repeat;
        color: #F0F4EF;
    }

    .form-cta-block {
        text-align: center;
        margin-bottom: 36px;
    }

    .form-cta-block h2 {
        font-family: var(--font-display);
        font-size: clamp(32px, 5vw, 52px);
        color: #fff;
        font-weight: 700;
    }

    .form-cta-block p {
        color: rgba(240, 244, 239, .72);
        max-width: 620px;
        margin: 10px auto 0;
    }

    .registration-form {
        max-width: 700px;
        margin: 0 auto;
        background: #ffffff;
        color: #10241C;
        border-radius: 18px;
        box-shadow: 0 24px 80px rgba(0, 0, 0, .32);
        padding: 30px;
        display: grid;
        gap: 18px;
    }

    .reg-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

    .field {
        display: grid;
        gap: 6px;
    }

    .field label {
        font-size: 14px;
        font-weight: 600;
        color: #10241C;
    }

    .field input,
    .field select,
    .field textarea {
        width: 100%;
        min-height: 44px;
        border: 1px solid #D5E0D5;
        border-radius: 6px;
        padding: 9px 12px;
        background: #fff;
        color: #10241C;
        outline: none;
        transition: border-color .2s ease-out, box-shadow .2s ease-out;
    }

    .field textarea {
        min-height: 120px;
        resize: vertical;
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
        border-color: #00A86B;
        box-shadow: 0 0 0 5px rgba(0, 168, 107, .14);
    }

    .form-error {
        color: #B63E3E;
        background: #FFF1F1;
        border-radius: 6px;
        padding: 8px 12px;
        font-size: 14px;
        display: none;
    }

    .form-error.active {
        display: block;
    }

    .form-success {
        color: #0F6C48;
        background: rgba(0, 168, 107, .12);
        border-radius: 6px;
        padding: 9px 12px;
        font-size: 15px;
        display: none;
    }

    .form-buttons {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 4px;
    }

    .btn-secondary-light {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 20px;
        min-height: 44px;
        border-radius: 4px;
        border: 1px solid #C6D9C6;
        color: #10241C;
        background: #F5F9F3;
        font-weight: 600;
        transition: all .2s ease-out;
    }

    .btn-secondary-light:hover {
        background: rgba(0, 168, 107, .16);
        color: #10241C;
    }

    .form-contact {
        max-width: 700px;
        margin: 24px auto 0;
        display: flex;
        justify-content: center;
        gap: 24px;
        flex-wrap: wrap;
        color: rgba(240, 244, 239, .78);
        font-size: 14px;
    }

    .form-contact a {
        color: #D8FF70;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .form-contact a::after {
        content: "→";
        color: #C9F73A;
    }

    .form-contact a:hover {
        color: #fff;
    }

    .faq-section {
        background: #EAF1EC;
    }

    .faq-grid {
        display: grid;
        grid-template-columns: minmax(0, 6fr) minmax(0, 9fr);
        gap: 56px;
        align-items: start;
    }

    .faq-sidebar {
        position: relative;
    }

    .faq-sidebar h2 {
        font-family: var(--font-display);
        font-size: 38px;
        line-height: 1.18;
        color: #10241C;
        max-width: 360px;
    }

    .faq-sidebar h2 span {
        display: block;
        font-size: 18px;
        color: #00A86B;
        font-weight: 400;
        letter-spacing: .18em;
        margin-bottom: 10px;
        text-transform: uppercase;
    }

    .faq-sidebar p {
        color: #5A6A60;
        margin-top: 12px;
        max-width: 380px;
    }

    .faq-accordion {
        border-top: 1px solid #D5E0D5;
    }

    .faq-item {
        border-bottom: 1px solid #D5E0D5;
        background: transparent;
        transition: background .2s ease-out;
    }

    .faq-item.is-open {
        background: rgba(255, 255, 255, .8);
    }

    .faq-question {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        text-align: left;
        background: transparent;
        color: #10241C;
        font-weight: 700;
        font-size: 16px;
        padding: 18px 18px 18px 0;
        min-height: 54px;
    }

    .faq-question::after {
        content: "+";
        font-size: 26px;
        font-weight: 400;
        color: #0F6C48;
        transition: transform .25s ease-out;
        line-height: 1;
    }

    .faq-item.is-open .faq-question::after {
        content: "−";
    }

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

    .faq-answer__inner {
        padding: 0 26px 20px 12px;
        color: #5A6A60;
        font-size: 15px;
        border-left: 3px solid var(--c-primary);
        margin: 0 0 8px 0;
    }

    .footer {
        background: #0A1812;
        color: rgba(240, 244, 239, .72);
    }

    .footer__main {
        display: flex;
        justify-content: space-between;
        gap: 28px;
        padding: 52px 0 40px;
        flex-wrap: wrap;
    }

    .footer__brand .brand-lockup__text {
        color: #fff;
    }

    .footer__brand p {
        max-width: 360px;
        margin-top: 12px;
        font-size: 14px;
        color: rgba(240, 244, 239, .58);
    }

    .footer__cols {
        display: flex;
        gap: 46px;
        flex-wrap: wrap;
    }

    .footer__col h4 {
        color: #C9F73A;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .05em;
        margin-bottom: 12px;
    }

    .footer__col a {
        display: inline-flex;
        margin-bottom: 8px;
        color: rgba(240, 244, 239, .7);
        font-size: 14px;
    }

    .footer__col a:hover {
        color: #fff;
    }

    .footer__legal {
        border-top: 1px solid rgba(240, 244, 239, .1);
        padding: 14px 0;
        font-size: 13px;
        color: rgba(240, 244, 239, .48);
        display: flex;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
    }

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

        .hero__grid {
            grid-template-columns: minmax(0, 1fr);
            gap: 24px;
        }

        .hero__content {
            padding: 44px 0 20px;
        }

        .hero__panel {
            justify-self: start;
            max-width: 100%;
        }

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

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

        .pricing__grid {
            flex-direction: column;
        }

        .price-card,
        .price-card--hot {
            width: 100%;
            min-width: 0;
            transform: none;
        }

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

    @media (max-width: 900px) {
        .siteheader__brandrow {
            min-height: 64px;
        }

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

        .channelbar {
            position: fixed;
            top: 0;
            right: 0;
            z-index: 100;
            height: 100%;
            width: min(84vw, 340px);
            background: var(--c-bg);
            border-left: 1px solid rgba(201, 247, 58, .14);
            transform: translateX(110%);
            transition: transform .28s ease-out;
            box-shadow: -18px 0 60px rgba(0, 0, 0, .3);
            overflow-y: auto;
        }

        .siteheader.menu-open .channelbar {
            transform: translateX(0);
        }

        .channelbar__inner {
            flex-direction: column;
            padding: 82px 8px 32px 0;
            min-height: auto;
            overflow: visible;
        }

        .channelbar a.channel-link {
            min-height: 52px;
            padding: 12px 18px;
            margin-left: 4px;
            border-bottom: 0;
            border-left: 4px solid transparent;
            border-radius: 0;
            color: rgba(240, 244, 239, .78);
            font-size: 16px;
        }

        .channelbar a.channel-link:hover {
            border-bottom: 0;
            border-left-color: rgba(47, 190, 118, .5);
            background: rgba(201, 247, 58, .04);
        }

        .channelbar a.channel-link.active {
            border-left-color: var(--c-primary);
            border-bottom: 0;
            color: #C9F73A;
            font-weight: 700;
        }

        .nav-mask.is-open {
            display: block;
            position: fixed;
            inset: 0;
            background: rgba(15, 34, 26, .66);
            z-index: 90;
        }

        .brand-lockup__text {
            font-size: 20px;
        }

        .hero__stage {
            min-height: auto;
        }

        .hero_h1 {
            font-size: 36px;
            white-space: normal;
        }

        .topstrip__time {
            display: none;
        }

        .reg-row {
            grid-template-columns: 1fr;
        }

        .update-card--wide {
            display: block;
        }

        .update-card--wide .update-card__imgbox {}

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

        .feature-card--photo {
            grid-column: 1;
        }
    }

    @media (max-width: 620px) {
        body {
            font-size: 15px;
        }

        .container {
            padding-left: 16px;
            padding-right: 16px;
        }

        .section {
            padding: 54px 0;
        }

        .brand-lockup__official {
            display: none;
        }

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

        .hero_h1 {
            font-size: clamp(30px, 12vw, 40px);
            white-space: normal;
        }

        .hero__content {
            padding-top: 34px;
        }

        .hero__actions .btn {
            width: 100%;
        }

        .hero__panel {
            margin-bottom: 34px;
        }

        .signal-strip__grid {
            grid-template-columns: 1fr;
        }

        .signal-strip__item {
            padding: 15px 0;
            border-right: 0;
            border-bottom: 1px solid rgba(201, 247, 58, .14);
        }

        .signal-strip__item:last-child {
            border-bottom: 0;
        }

        .signal-strip__value {
            font-size: 19px;
        }

        .section-head {
            align-items: flex-start;
            flex-direction: column;
            gap: 14px;
            margin-bottom: 24px;
        }

        .update-card--wide .update-card__imgbox {
            aspect-ratio: 16 / 10;
        }

        .update-card__body {
            padding: 18px;
        }

        .update-card__title {
            font-size: 18px;
        }

        .agenda-item {
            grid-template-columns: 1fr;
            gap: 8px;
        }

        .agenda__track {
            padding-left: 24px;
        }

        .faq-sidebar h2 {
            font-size: 30px;
        }

        .registration-form {
            padding: 20px;
        }

        .footer__main {
            gap: 28px;
        }

        .footer__cols {
            gap: 20px;
            flex-direction: column;
        }

        .btn {
            min-height: 44px;
        }
    }

/* roulang page: article */
:root {
    --c-bg: #0F221A;
    --c-surface: #F0F4EF;
    --c-card: #FFFFFF;
    --c-line: #D5E0D5;
    --c-primary: #C9F73A;
    --c-primary-deep: #00A86B;
    --c-ink: #10241C;
    --c-gray: #5A6A60;
    --c-time: #315D4E;
    --c-error: #F26D6D;
    --c-timer-edge: #2FBE76;
    --radius: 16px;
    --shadow-card: 0 1px 2px rgba(16, 36, 28, .06), 0 10px 30px rgba(16, 36, 28, .08);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
    background: var(--c-surface);
    color: var(--c-ink);
    line-height: 1.7;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: all .2s ease-out; }
ul, ol { list-style-position: inside; }
button { font-family: inherit; border: none; background: none; cursor: pointer; }
input, select, textarea { font-family: inherit; }
.container {
    width: min(1200px, 100% - 48px);
    margin-inline: auto;
}
@media (max-width: 640px) {
    .container { width: min(100% - 32px, 1200px); }
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 4px;
    padding: 0 20px;
    height: 44px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .01em;
    border: 1px solid transparent;
    transition: background .2s, border-color .2s, box-shadow .2s, transform .12s;
    white-space: nowrap;
    text-align: center;
    min-width: 44px;
}
.btn-primary {
    background: var(--c-primary);
    color: #10241C;
    border-bottom: 4px solid #9CCB21;
    box-shadow: 0 6px 18px rgba(201, 247, 58, .18);
}
.btn-primary:hover {
    background: #D8FF70;
    border-bottom-width: 2px;
    transform: translateY(2px);
    box-shadow: 0 10px 26px rgba(201, 247, 58, .28);
}
.btn-primary:active { transform: translateY(4px); border-bottom-width: 0; }
.btn-ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .45);
}
.btn-ghost:hover {
    background: rgba(201, 247, 58, .1);
    border-color: var(--c-primary);
    color: var(--c-primary);
}
.btn-dark {
    background: var(--c-ink);
    color: #fff;
}
.btn-dark:hover { background: #1C3E2F; }
.btn-block { width: 100%; }
a:focus-visible, button:focus-visible {
    outline: 3px solid rgba(201, 247, 58, .65);
    outline-offset: 2px;
}
body.article-body { background: #EEF3EC; }
 
/* ===== 顶部导航 ===== */
.siteheader {
    background: var(--c-bg);
    border-bottom: 1px solid rgba(201, 247, 58, .18);
    position: sticky;
    top: 0;
    z-index: 70;
}
.siteheader__brandrow {
    display: flex;
    height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    color: #fff;
}
.brand-lockup__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(201, 247, 58, .08);
    border: 1px solid rgba(201, 247, 58, .25);
    border-radius: 10px;
}
.brand-lockup__icon svg { display: block; }
.brand-lockup__text {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .02em;
    color: #F5FFF2;
    word-break: keep-all;
    line-height: 1.2;
}
.brand-lockup__official {
    font-size: 12px;
    color: rgba(240, 247, 235, .6);
    border: 1px solid rgba(255, 255, 255, .18);
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 2px;
}
.header-actions { display: flex; align-items: center; gap: 12px; }
.btn-header {
    background: var(--c-primary);
    border-bottom: 3px solid #9CCB21;
    color: var(--c-ink);
    height: 40px;
    padding: 0 18px;
    font-weight: 700;
    border-radius: 4px;
}
.btn-header:hover {
    background: #D8FF70;
    transform: translateY(1px);
}
.nav-toggle {
    width: 44px;
    height: 44px;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 6px;
}
.nav-toggle span {
    width: 20px;
    height: 2px;
    background: #F0F7EC;
    display: block;
    transition: transform .25s ease;
}
html.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
html.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
html.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.channelbar {
    border-top: 1px solid rgba(201, 247, 58, .14);
    background: rgba(10, 28, 18, .9);
}
.channelbar__inner {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    scrollbar-width: none;
}
.channelbar__inner::-webkit-scrollbar { display: none; }
.channel-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 13px 22px;
    font-size: 14px;
    letter-spacing: .02em;
    color: rgba(240, 244, 239, .7);
    border-bottom: 3px solid transparent;
    font-weight: 500;
    transition: color .18s, border-color .18s, background .18s;
    min-height: 47px;
    white-space: nowrap;
}
.channel-link:hover { color: #fff; background: rgba(201, 247, 58, .04); }
.channel-link.active {
    color: var(--c-primary);
    border-bottom-color: var(--c-primary);
    background: linear-gradient(to bottom, transparent, rgba(201, 247, 58, .06));
    font-weight: 600;
}
.nav-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 55;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s;
    pointer-events: none;
}
html.nav-open .nav-mask {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
@media (max-width: 920px) {
    .brand-lockup__official { display: none; }
}
@media (max-width: 768px) {
    .siteheader__brandrow { height: 64px; }
    .nav-toggle { display: inline-flex; }
    .header-actions .btn-header { display: none; }
    .channelbar {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        z-index: 60;
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
        visibility: hidden;
    }
    .channelbar__inner {
        flex-direction: column;
        background: var(--c-bg);
        padding: 10px 16px 18px;
    }
    .channel-link {
        display: block;
        padding: 13px 14px;
        border-bottom: none;
        border-left: 4px solid transparent;
        font-size: 16px;
        min-height: 48px;
    }
    .channel-link.active {
        border-bottom: none;
        border-left-color: var(--c-primary);
        background: rgba(201, 247, 58, .06);
    }
    html.nav-open .channelbar {
        max-height: 480px;
        visibility: visible;
    }
}

/* ===== 页脚 ===== */
.footer {
    background: var(--c-bg);
    color: rgba(240, 247, 238, .72);
    padding: 64px 0 0;
    position: relative;
    overflow: hidden;
}
.footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 247, 58, .35), transparent);
}
.footer__main {
    display: grid;
    grid-template-columns: 1.4fr 2fr;
    gap: 56px;
    padding-bottom: 48px;
}
.footer__brand .brand-lockup { margin-bottom: 18px; }
.footer__brand p { font-size: 15px; line-height: 1.8; max-width: 420px; }
.footer__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.footer__col h4 {
    font-size: 14px;
    color: #fff;
    margin-bottom: 16px;
    letter-spacing: .04em;
}
.footer__col a {
    display: flex;
    padding: 6px 0;
    font-size: 14px;
    color: rgba(240, 247, 238, .68);
    transition: color .18s;
    min-height: 32px;
}
.footer__col a:hover { color: var(--c-primary); }
.footer__legal {
    border-top: 1px solid rgba(201, 247, 58, .14);
    padding: 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 30px;
    font-size: 13px;
    color: rgba(240, 247, 238, .5);
}
@media (max-width: 900px) {
    .footer__main { grid-template-columns: 1fr; gap: 36px; }
    .footer__cols { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .footer { padding-top: 44px; }
    .footer__cols { grid-template-columns: 1fr; gap: 20px; }
    .footer__col h4 { margin-bottom: 6px; }
}

/* ===== 文章页首屏头部 ===== */
.article-hero {
    background:
        linear-gradient(119deg, rgba(15, 34, 26, .97) 0%, rgba(15, 34, 26, .9) 42%, rgba(22, 56, 39, .82) 100%),
        repeating-linear-gradient(0deg, rgba(201, 247, 58, .035) 0 1px, transparent 1px 68px),
        repeating-linear-gradient(90deg, rgba(201, 247, 58, .035) 0 1px, transparent 1px 68px),
        url('/assets/images/backpic/back-3.webp') center / cover;
    padding: 68px 0 110px;
    color: #fff;
}
.article-hero__inner { max-width: 860px; margin: 0 auto; }
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(240, 244, 239, .56);
    margin-bottom: 22px;
}
.breadcrumb a { color: rgba(240, 244, 239, .78); }
.breadcrumb a:hover { color: var(--c-primary); }
.breadcrumb__sep { opacity: .4; }
.article-category {
    display: inline-flex;
    align-items: center;
    background: rgba(201, 247, 58, .1);
    color: var(--c-primary);
    border: 1px solid rgba(201, 247, 58, .35);
    font-size: 13px;
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: 600;
    margin-bottom: 14px;
}
.article-hero__title {
    font-size: clamp(34px, 4.6vw, 54px);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.01em;
    word-break: auto-phrase;
    margin: 4px 0 20px;
    color: #F6FFF3;
    text-wrap: balance;
}
.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    align-items: center;
    color: rgba(240, 244, 239, .72);
    font-size: 14px;
    border-top: 1px solid rgba(201, 247, 58, .15);
    padding-top: 18px;
    margin-top: 18px;
}

/* ===== 文章主体阅读卡片 ===== */
.article-main { padding: 0 0 64px; }
.article-card {
    max-width: 880px;
    margin: -86px auto 0;
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: 18px;
    box-shadow: var(--shadow-card);
    padding: 56px 70px 52px;
    position: relative;
}
.article-summary {
    background: #E8F0E4;
    border-left: 5px solid var(--c-primary-deep);
    border-radius: 0 10px 10px 0;
    padding: 20px 24px;
    margin-bottom: 38px;
}
.article-summary__label {
    display: block;
    font-weight: 700;
    color: var(--c-time);
    font-size: 14px;
    letter-spacing: .08em;
    margin-bottom: 8px;
}
.article-summary p {
    color: #415B4B;
    font-size: 16px;
    line-height: 1.85;
}

/* ===== CMS 正文内容 ===== */
.cms-content {
    font-size: 18px;
    line-height: 1.9;
    color: #2B4032;
    word-break: break-word;
}
.cms-content > * + * { margin-top: 0; }
.cms-content p {
    font-size: 17px;
    line-height: 1.9;
    margin-bottom: 26px;
    color: #2B4032;
}
.cms-content h1,
.cms-content h2,
.cms-content h3,
.cms-content h4 {
    color: var(--c-ink);
    font-weight: 750;
    line-height: 1.35;
    margin-top: 44px;
    margin-bottom: 14px;
}
.cms-content h2 {
    font-size: 25px;
    padding-bottom: 12px;
    position: relative;
}
.cms-content h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 32px;
    height: 3px;
    background: var(--c-primary);
    border-radius: 3px;
}
.cms-content h3 { font-size: 20px; }
.cms-content h4 { font-size: 17px; }
.cms-content ul,
.cms-content ol {
    margin-bottom: 26px;
    padding-left: 6px;
}
.cms-content li {
    padding: 7px 0 7px 20px;
    position: relative;
}
.cms-content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--c-primary-deep);
}
.cms-content ol li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    width: 8px;
    height: 8px;
    border: 2px solid var(--c-primary);
    border-radius: 50%;
}
.cms-content a:not(.btn) {
    color: var(--c-primary-deep);
    border-bottom: 1px solid rgba(0, 168, 107, .5);
    padding-bottom: 2px;
}
.cms-content a:not(.btn):hover {
    color: #007B4C;
    border-bottom-color: #007B4C;
}
.cms-content img {
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(16, 36, 28, .1);
    margin: 28px auto;
}
.cms-content figure { margin: 30px auto; }
.cms-content figure img { margin-bottom: 12px; }
.cms-content figure figcaption {
    text-align: center;
    font-size: 13px;
    color: var(--c-gray);
}
.cms-content blockquote {
    border-left: 4px solid var(--c-time);
    background: #EEF3EC;
    border-radius: 0 10px 10px 0;
    padding: 22px 26px;
    font-size: 20px;
    line-height: 1.8;
    color: #203E2E;
    margin: 36px 0;
}
.cms-content blockquote p:last-child { margin-bottom: 0; }
.cms-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.7;
    margin: 32px 0;
    border: 1px solid var(--c-line);
    border-radius: 8px;
    overflow: hidden;
}
.cms-content th {
    background: #DCE8D6;
    text-align: left;
    padding: 11px 14px;
    font-weight: 700;
    color: var(--c-ink);
    border-bottom: 1px solid var(--c-line);
}
.cms-content td {
    padding: 10px 14px;
    border-bottom: 1px solid #EDF0E9;
    color: #2B4032;
}
.cms-content td:first-child { font-weight: 600; }
.cms-content tbody tr:nth-child(even) td {
    background: rgba(201, 247, 58, .1);
}
.cms-content tr:last-child td { border-bottom: none; }
.cms-content .note {
    background: #F0F7EB;
    border-left: 4px solid var(--c-primary);
    padding: 16px 18px;
    border-radius: 0 8px 8px 0;
    font-size: 15px;
    color: #416149;
}

/* ===== 文末标签 ===== */
.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid #E7ECE5;
    margin-top: 40px;
    padding-top: 24px;
}
.article-tags__item {
    display: inline-flex;
    align-items: center;
    background: #EDF2E8;
    border: 1px solid #DCE5D8;
    color: #375148;
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 13px;
}
.article-tags__item:hover {
    color: var(--c-ink);
    border-color: var(--c-primary-deep);
}

/* ===== 未找到 ===== */
.not-found {
    text-align: center;
    padding: 80px 20px 60px;
    color: var(--c-gray);
}
.not-found h2 { font-size: 28px; color: var(--c-ink); margin-bottom: 10px; }
.not-found .btn { margin-top: 22px; display: inline-flex; }

/* ===== 下一篇 / 上一篇 + 栏目跳转 ===== */
.post-transit {
    max-width: 880px;
    margin: 44px auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.transit-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 6px 20px rgba(16, 36, 28, .05);
    transition: all .22s;
}
.transit-card:hover {
    box-shadow: 0 12px 30px rgba(16, 36, 28, .08);
    transform: translateY(-2px);
    border-color: rgba(0, 168, 107, .4);
}
.transit-card__dir {
    font-size: 12px;
    color: var(--c-gray);
    display: flex;
    align-items: center;
    gap: 8px;
}
.transit-card--prev .transit-card__dir::before { content: "←"; }
.transit-card--next .transit-card__dir::after { content: "→"; }
.transit-card__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--c-ink);
    line-height: 1.4;
}
.transit-card:hover .transit-card__title { color: var(--c-time); }

/* ===== CTA 横条 ===== */
.article-cta {
    max-width: 880px;
    margin: 24px auto 0;
    background:
        linear-gradient(90deg, rgba(15, 34, 26, .93) 0%, rgba(18, 53, 35, .93) 100%),
        url('/assets/images/backpic/back-1.png') center / cover;
    border-radius: 16px;
    border: 1px solid rgba(201, 247, 58, .2);
    color: #fff;
    padding: 40px 46px;
    position: relative;
    overflow: hidden;
}
.article-cta::after {
    content: "";
    position: absolute;
    right: -32px;
    top: -32px;
    width: 160px;
    height: 160px;
    border: 30px solid rgba(201, 247, 58, .05);
    border-radius: 50%;
}
.article-cta h2 {
    font-size: 28px;
    line-height: 1.4;
    font-weight: 800;
    margin-bottom: 12px;
    word-break: keep-all;
}
.article-cta p {
    font-size: 15px;
    color: rgba(240, 247, 238, .7);
    margin-bottom: 26px;
    max-width: 620px;
}
.article-cta__actions { display: flex; gap: 14px; }

/* ===== 相关推荐区 ===== */
.related {
    max-width: 880px;
    margin: 52px auto 80px;
}
.related__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.related__head h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--c-ink);
}
.related__head span {
    font-size: 14px;
    color: var(--c-gray);
}
.related__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 0.8fr;
    gap: 18px;
}
.related-card {
    background: var(--c-card);
    border-radius: 14px;
    border: 1px solid var(--c-line);
    overflow: hidden;
    transition: all .2s;
    box-shadow: 0 6px 18px rgba(16, 36, 28, .04);
}
.related-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(16, 36, 28, .08);
    border-color: rgba(0, 168, 107, .35);
}
.related-card__cover { height: 150px; }
.related-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.related-card__body { padding: 18px 20px 20px; }
.related-card__body h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--c-ink);
    line-height: 1.45;
    margin-bottom: 8px;
}
.related-card__body p {
    color: var(--c-gray);
    font-size: 13px;
    line-height: 1.7;
}
.related-card--text .related-card__body { padding-bottom: 14px; }
.related-card__arrow {
    display: inline-flex;
    align-items: center;
    color: var(--c-primary-deep);
    margin-top: 12px;
    font-size: 14px;
    gap: 8px;
    font-weight: 600;
}
.related-card__arrow:hover { color: #007B4C; }
.related-card__arrow:hover::after { transform: translateX(3px); }
.related-card__arrow::after { content: "→"; transition: transform .2s; }
.related-mini {
    background: var(--c-bg);
    color: #fff;
    border: 1px solid rgba(201, 247, 58, .24);
    border-radius: 14px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    gap: 16px;
}
.related-mini h3 {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 750;
}
.related-mini a {
    color: var(--c-primary);
}

/* ===== 响应式 ===== */
@media (max-width: 900px) {
    .article-card { padding: 44px 34px; }
    .related__grid { grid-template-columns: 1fr 1fr; }
    .related-mini { grid-column: span 2; }
    .article-cta { padding: 32px 30px; }
}
@media (max-width: 640px) {
    .article-hero { padding: 40px 0 100px; }
    .article-hero__title { font-size: 30px; }
    .article-card {
        margin: -72px 16px 0;
        border-radius: 14px;
        padding: 24px 18px 32px;
    }
    .article-main { padding-bottom: 44px; }
    .cms-content { font-size: 16px; }
    .cms-content p { font-size: 16px; line-height: 1.85; }
    .cms-content h2 { font-size: 21px; }
    .cms-content blockquote { font-size: 17px; padding: 18px 16px; }
    .post-transit { grid-template-columns: 1fr; margin-top: 24px; }
    .article-cta { padding: 28px 18px; border-radius: 12px; margin: 16px 16px 0; }
    .article-cta h2 { font-size: 23px; }
    .article-cta__actions { flex-direction: column; align-items: stretch; }
    .related { margin: 40px 16px 60px; }
    .related__grid { grid-template-columns: 1fr; }
    .related-mini { grid-column: auto; }
    .related-card__cover { height: 190px; }
    .related-card { min-height: 160px; }
}

/* roulang page: category1 */
:root{
    --c-bg:#0F221A;
    --c-surface:#F0F4EF;
    --c-card:#FFFFFF;
    --c-line:#D5E0D5;
    --c-primary:#C9F73A;
    --c-primary-deep:#00A86B;
    --c-ink:#10241C;
    --c-gray:#5A6A60;
    --c-time:#315D4E;
    --c-error:#F26D6D;
    --c-timer-edge:#2FBE76;
    --radius-card:16px;
    --radius-btn:5px;
    --shadow-card:0 1px 2px rgba(16,36,28,.06),0 10px 30px rgba(16,36,28,.08);
    --font-sans:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
    --font-display:"Barlow Condensed","Archivo","PingFang SC","Microsoft YaHei",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:var(--font-sans);
    font-size:16px;
    line-height:1.8;
    background:var(--c-surface);
    color:var(--c-ink);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
body.menu-open{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:all .2s ease-out}
button{font-family:inherit;background:none;border:none;cursor:pointer;color:inherit}
ul,ol{list-style:none}
section{scroll-margin-top:132px}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--c-primary);outline-offset:3px;border-radius:2px}

.noticebar{
    background:var(--c-primary);
    color:#0C1F17;
    font-size:14px;
    line-height:1.4;
    min-height:38px;
}
.noticebar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding-top:7px;
    padding-bottom:7px;
}
.noticebar p{display:flex;align-items:center;gap:9px}
.pulse-dot{
    width:8px;height:8px;border-radius:50%;
    background:#0C1F17;
    box-shadow:0 0 0 0 rgba(12,31,23,.6);
    animation:pulseGreen 2s infinite;
}
@keyframes pulseGreen{
    0%{box-shadow:0 0 0 0 rgba(12,31,23,.45)}
    70%{box-shadow:0 0 0 8px rgba(12,31,23,0)}
    100%{box-shadow:0 0 0 0 rgba(12,31,23,0)}
}
.notice-meta{
    display:flex;align-items:center;gap:14px;
    flex-shrink:0;
    font-variant-numeric:tabular-nums;
}
.notice-close{
    width:26px;height:26px;border-radius:4px;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:18px;line-height:1;
}
.notice-close:hover{background:rgba(12,31,23,.14)}

.siteheader{
    position:sticky;
    top:0;
    z-index:80;
    background:var(--c-bg);
    border-bottom:1px solid rgba(47,190,118,.28);
}
.siteheader__brandrow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    min-height:72px;
    padding-top:8px;
    padding-bottom:8px;
}
.brand-lockup{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:44px;
    flex-shrink:1;
}
.brand-lockup__icon{
    width:34px;height:34px;
    flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
}
.brand-lockup__text{
    color:#F3FBF6;
    font-size:18px;
    font-weight:700;
    letter-spacing:.01em;
    white-space:nowrap;
    font-family:var(--font-display);
}
.brand-lockup__official{
    font-size:12px;
    color:#9FC7B0;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.05);
    padding:2px 7px;
    border-radius:3px;
    white-space:nowrap;
    margin-left:2px;
}
.header-actions{
    display:flex;
    align-items:center;
    gap:12px;
}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:0 20px;
    font-weight:600;
    font-size:15px;
    line-height:1;
    border-radius:var(--radius-btn);
    transition:all .2s ease-out;
    white-space:nowrap;
}
.btn-primary{
    background:var(--c-primary);
    color:#10241C;
    border:2px solid var(--c-primary);
    box-shadow:0 3px 0 #0E321F;
}
.btn-primary:hover{
    background:#D8FF70;
    border-color:#D8FF70;
    box-shadow:0 1px 0 #0E321F;
    transform:translateY(2px);
}
.btn-primary:active{
    transform:translateY(4px);
    box-shadow:none;
}
.btn-dark{
    background:var(--c-ink);
    color:#F3FBF6;
    border:2px solid var(--c-ink);
    box-shadow:0 3px 0 rgba(0,0,0,.24);
}
.btn-dark:hover{
    background:#1C4230;
    border-color:#1C4230;
    transform:translateY(2px);
    box-shadow:0 1px 0 rgba(0,0,0,.2);
}
.btn-ghost{
    background:transparent;
    color:var(--c-ink);
    border:1px solid var(--c-line);
}
.btn-ghost:hover{
    background:rgba(47,190,118,.12);
    border-color:var(--c-primary-deep);
}
.btn-header{
    background:var(--c-primary);
    color:#10241C;
    min-height:40px;
    padding:0 17px;
    font-size:14px;
    box-shadow:0 2px 0 #0E321F;
}
.btn-header:hover{
    background:#D8FF70;
    transform:translateY(1px);
    box-shadow:none;
}
.nav-toggle{
    display:none;
    width:44px;height:44px;
    border-radius:5px;
    border:1px solid rgba(255,255,255,.14);
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
}
.nav-toggle span{
    display:block;
    width:18px;height:2px;
    background:#E9F8EF;
    border-radius:2px;
    transition:all .2s ease;
}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0;transform:translateX(-8px)}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.channelbar{
    position:relative;
    background:transparent;
    border-top:1px solid rgba(47,190,118,.18);
}
.channelbar__inner{
    display:flex;
    align-items:center;
    gap:32px;
    min-height:48px;
    overflow-x:auto;
    scrollbar-width:none;
    flex-wrap:nowrap;
}
.channelbar__inner::-webkit-scrollbar{display:none}
.channel-link{
    position:relative;
    color:#D6E4DC;
    font-size:14px;
    letter-spacing:.02em;
    padding:12px 0 14px;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:46px;
}
.channel-link::after{
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;
    width:100%;
    height:4px;
    background:transparent;
    border-radius:2px 2px 0 0;
    transform:scaleX(.3);
    transform-origin:left;
    transition:transform .2s ease-out;
}
.channel-link:hover{color:#FFFFFF}
.channel-link:hover::after{background:rgba(201,247,58,.5);transform:scaleX(.8)}
.channel-link.active{color:#FFFFFF;font-weight:600}
.channel-link.active::after{background:var(--c-primary);transform:scaleX(1)}
.nav-mask{
    position:fixed;
    inset:0;
    background:rgba(8,18,13,.6);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease-out;
    z-index:90;
}
body.nav-open .nav-mask{opacity:1;pointer-events:auto}

.hero-cta-arrow{
    display:inline-block;
    transition:transform .2s ease;
}
.btn:hover .hero-cta-arrow,
.arrow-link:hover .hero-cta-arrow{
    transform:translateX(4px);
}

/* Cat hero */
.cat-hero{
    position:relative;
    background:var(--c-bg);
    padding:56px 0 72px;
    color:#EFF7F2;
    overflow:hidden;
    border-bottom:4px solid var(--c-primary);
    background-image:linear-gradient(180deg,rgba(15,34,26,.82),rgba(15,34,26,.9)),url('/assets/images/backpic/back-2.png');
    background-size:cover;
    background-position:center;
}
.cat-hero .grid-lines{
    content:"";
    position:absolute;
    inset:0;
    background-image:linear-gradient(rgba(201,247,58,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(201,247,58,.08) 1px,transparent 1px);
    background-size:42px 42px;
    pointer-events:none;
}
.cat-hero__inner{position:relative;z-index:2}
.cat-hero__tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(201,247,58,.12);
    border:1px solid rgba(201,247,58,.3);
    color:var(--c-primary);
    font-size:12px;
    letter-spacing:.16em;
    padding:6px 14px;
    border-radius:3px;
    margin-bottom:24px;
    font-variant-numeric:tabular-nums;
}
.cat-hero__tag span{color:#C9F73A;font-weight:700}
.cat-hero h1{
    font-family:var(--font-display);
    font-size:clamp(32px,5vw,52px);
    line-height:1.18;
    font-weight:800;
    letter-spacing:.01em;
    max-width:860px;
    color:#FFFFFF;
    margin-bottom:20px;
}
.cat-hero h1 .hlgreen{position:relative;white-space:nowrap}
.cat-hero h1 .hlgreen::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:4px;
    height:8px;
    background:rgba(201,247,58,.32);
    z-index:-1;
}
.cat-hero__lead{
    max-width:760px;
    color:#C8DDD2;
    font-size:17px;
    line-height:1.9;
    margin-bottom:30px;
}
.cat-hero__actions{display:flex;flex-wrap:wrap;gap:14px}
.btn-ghost-light{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:0 22px;
    border:1px solid rgba(255,255,255,.5);
    color:#F2FBF5;
    border-radius:var(--radius-btn);
    font-weight:600;
    font-size:15px;
    gap:8px;
    background:transparent;
}
.btn-ghost-light:hover{
    background:rgba(201,247,58,.18);
    border-color:var(--c-primary);
    color:#FFFFFF;
    transform:translateY(-1px);
}
.cat-hero__meta{
    display:flex;
    flex-wrap:wrap;
    gap:26px;
    margin-top:44px;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.16);
    color:#A9C7B8;
    font-size:13px;
    letter-spacing:.04em;
}
.cat-hero__meta b{color:#E4F4EB;font-weight:600}

/* section common */
.sec-pad{padding:88px 0}
.sec-pad-sm{padding:64px 0}
.sec-head{
    margin-bottom:42px;
}
.sec-kicker{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--c-primary-deep);
    font-size:13px;
    letter-spacing:.14em;
    font-weight:700;
    margin-bottom:10px;
}
.sec-kicker .k-line{width:28px;height:3px;background:var(--c-primary-deep);border-radius:2px;display:inline-block}
.section-title{
    font-size:clamp(28px,4vw,42px);
    font-weight:800;
    line-height:1.25;
    letter-spacing:-.01em;
    color:var(--c-ink);
    max-width:760px;
}
.section-title .mark{
    color:var(--c-primary-deep);
    position:relative;
}
.section-sub{
    color:var(--c-gray);
    max-width:680px;
    margin-top:10px;
    font-size:15px;
    line-height:1.8;
}

/* Quick access */
.cat-quick{
    background:var(--c-card);
    border-bottom:1px solid var(--c-line);
}
.quick-card-main{
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
    align-items:stretch;
    background:#10241C;
    border-radius:var(--radius-card);
    overflow:hidden;
    color:#E7F3EC;
    box-shadow:var(--shadow-card);
    margin-right:8px;
}
.quick-card-main .quick-card-body{padding:34px 34px;display:flex;flex-direction:column;justify-content:center}
.quick-card-main .quick-card-body h3{
    font-size:24px;
    line-height:1.4;
    margin-bottom:14px;
    color:#fff;
}
.quick-card-main p{
    color:#B7D2C4;
    font-size:14px;
    max-width:440px;
}
.quick-card-main img{
    width:100%;
    height:100%;
    min-height:220px;
    object-fit:cover;
}
.quick-card-arrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:22px;
    color:var(--c-primary);
    font-weight:600;
    font-size:14px;
    min-height:44px;
}
.quick-card-arrow:hover .arrow-symbol{transform:translateX(5px)}
.arrow-symbol{transition:transform .2s ease}
.quick-mini-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-top:20px;
}
.quick-mini-card{
    background:var(--c-surface);
    border:1px solid var(--c-line);
    border-radius:var(--radius-card);
    padding:26px 24px;
    transition:all .2s ease;
    min-height:190px;
}
.quick-mini-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)}
.quick-mini-card h4{font-size:17px;font-weight:700;color:var(--c-ink);margin-bottom:10px}
.quick-mini-card p{font-size:13.5px;color:var(--c-gray);line-height:1.75}
.quick-mini-card .card-num{
    font-family:var(--font-display);
    font-size:28px;
    font-weight:800;
    color:var(--c-primary-deep);
    letter-spacing:.05em;
    display:block;
    margin-bottom:22px;
    line-height:1;
}
.quick-mini-card .card-num::after{
    content:"";
    width:22px;height:3px;
    background:var(--c-line);
    display:block;
    margin-top:8px;
}

/* updates filter */
.cat-updates{
    background:var(--c-surface);
}
.filter-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    margin-top:8px;
    margin-bottom:26px;
}
.filter-chip{
    display:inline-flex;
    align-items:center;
    min-height:42px;
    padding:0 18px;
    background:#fff;
    border:1px solid var(--c-line);
    border-radius:999px;
    font-size:13px;
    color:var(--c-gray);
    transition:all .2s;
    font-weight:500;
}
.filter-chip:hover{
    border-color:var(--c-primary-deep);
    color:var(--c-primary-deep);
    background:#F6FBF7;
}
.filter-chip.active{
    background:var(--c-ink);
    color:var(--c-primary);
    border-color:var(--c-ink);
}
.update-item{
    display:grid;
    grid-template-columns:124px 1fr;
    gap:24px;
    background:var(--c-card);
    border:1px solid var(--c-line);
    border-radius:var(--radius-card);
    padding:24px;
    margin-bottom:16px;
    transition:all .2s ease;
    position:relative;
}
.update-item:hover{
    border-color:rgba(0,168,107,.5);
    box-shadow:var(--shadow-card);
    transform:translateY(-2px);
}
.update-thumb{
    width:124px;height:104px;
    border-radius:10px;
    object-fit:cover;
    background:var(--c-line);
}
.update-thumb-placeholder{
    width:124px;height:104px;
    border-radius:10px;
    background:linear-gradient(135deg,var(--c-primary-deep),#07301F);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-display);
    color:rgba(255,255,255,.9);
    font-size:18px;
    letter-spacing:.04em;
    font-weight:700;
}
.update-item__body{
    display:flex;
    flex-direction:column;
    gap:6px;
}
.badge-tag{
    display:inline-flex;
    align-items:center;
    width:auto;
    padding:2px 9px;
    background:rgba(0,168,107,.1);
    color:var(--c-primary-deep);
    font-size:12px;
    line-height:1.6;
    border-radius:3px;
    font-weight:600;
    white-space:nowrap;
}
.update-item__title{
    font-size:18px;
    font-weight:700;
    color:var(--c-ink);
    line-height:1.5;
    display:block;
}
.update-item__title:hover{color:var(--c-primary-deep)}
.update-item__desc{
    color:var(--c-gray);
    font-size:14px;
    line-height:1.75;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.update-item__meta{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin-top:2px;
    color:var(--c-time);
    font-size:12px;
    font-variant-numeric:tabular-nums;
}
.update-item__link{
    position:absolute;
    right:20px;
    bottom:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;height:36px;
    border-radius:50%;
    background:var(--c-surface);
    border:1px solid var(--c-line);
    color:var(--c-ink);
    transition:all .2s ease;
}
.update-item:hover .update-item__link{
    background:var(--c-primary);
    border-color:var(--c-primary);
    color:#10241C;
}
.empty-state{
    display:none;
    text-align:center;
    padding:70px 24px;
    background:var(--c-card);
    border:1px dashed var(--c-line);
    border-radius:var(--radius-card);
    color:var(--c-gray);
}
.empty-state.show{display:block}

/* switch band */
.switch-band{
    background:var(--c-ink);
    border-radius:18px;
    overflow:hidden;
    display:grid;
    grid-template-columns:1fr 1fr;
    color:#fff;
    margin:72px 0 0;
}
.switch-part{
    padding:42px 44px;
    position:relative;
    min-height:200px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.switch-part + .switch-part{
    border-left:1px solid rgba(255,255,255,.12);
}
.switch-part h3{font-size:20px;font-weight:800;color:#fff;margin-bottom:12px}
.switch-part p{font-size:13.5px;color:#AFC8BC;line-height:1.8;margin-bottom:16px}
.switch-part .btn{
    align-self:flex-start;
    margin-top:auto;
}
.switch-part .num-bg{
    position:absolute;
    right:18px;top:6px;
    font-family:var(--font-display);
    font-size:86px;
    line-height:1;
    color:rgba(255,255,255,.04);
    font-weight:800;
}

/* process */
.cat-process{
    background:var(--c-card);
}
.process-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:58px;
    align-items:center;
}
.process-copy h2{
    margin-bottom:18px;
}
.process-copy .scenario-list{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-top:22px;
}
.scenario-list li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    font-size:14px;
    color:var(--c-gray);
    line-height:1.8;
}
.scenario-list li .sc-dot{
    width:8px;height:8px;
    border-radius:50%;
    background:var(--c-primary-deep);
    flex-shrink:0;
    margin-top:10px;
}
.process-track{
    position:relative;
    padding-left:32px;
    border-left:2px solid #DDE9DC;
}
.process-node{
    position:relative;
    padding-bottom:28px;
}
.process-node::before{
    content:"";
    position:absolute;
    left:-39px;
    top:4px;
    width:14px;height:14px;
    border-radius:50%;
    background:var(--c-primary);
    border:3px solid #fff;
    box-shadow:0 0 0 3px var(--c-primary-deep);
}
.process-node .node-time{
    font-size:12px;
    letter-spacing:.1em;
    color:var(--c-primary-deep);
    font-weight:700;
    display:block;
    margin-bottom:6px;
}
.process-node h3{
    font-size:18px;
    font-weight:800;
    margin-bottom:6px;
}
.process-node p{
    font-size:13.5px;
    color:var(--c-gray);
    max-width:390px;
}

/* safe note */
.safe-note{
    background:var(--c-bg);
    color:#E8F6EE;
    position:relative;
    overflow:hidden;
}
.safe-note::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 12% 20%,rgba(201,247,58,.12),transparent 34%);
    pointer-events:none;
}
.safe-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:54px;
    align-items:start;
}
.safe-grid h2{color:#fff;margin-bottom:18px}
.safe-grid .section-sub{color:#AFCBBE}
.safe-list{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:14px;
}
.safe-item{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    border-radius:14px;
    padding:18px 16px;
    min-height:130px;
    transition:all .2s ease;
}
.safe-item:hover{
    border-color:var(--c-primary-deep);
    transform:translateY(-3px);
    background:rgba(201,247,58,.06);
}
.safe-item .safe-index{
    color:var(--c-primary);
    font-size:24px;
    font-weight:800;
    font-family:var(--font-display);
    display:block;
    margin-bottom:8px;
}
.safe-item h3{color:#fff;font-size:14px;margin-bottom:6px}
.safe-item p{color:#9EBDB0;font-size:12.5px;line-height:1.7}

/* FAQ */
.faq-section{
    background:var(--c-surface);
}
.faq-wrap{
    display:grid;
    grid-template-columns:340px 1fr;
    gap:64px;
}
.faq-title-block .section-title{
    font-size:clamp(30px,4vw,42px);
    line-height:1.3;
}
.faq-side-note{
    margin-top:18px;
    padding:18px 20px;
    border-left:4px solid var(--c-primary-deep);
    background:rgba(0,168,107,.06);
    color:var(--c-gray);
    font-size:13.5px;
    border-radius:0 10px 10px 0;
}
.faq-list{
    border-top:1px solid var(--c-line);
}
.faq-item{
    border-bottom:1px solid var(--c-line);
    background:#fff;
    margin-bottom:10px;
    border-radius:12px;
    overflow:hidden;
}
.faq-q{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:20px 20px;
    text-align:left;
    background:transparent;
    font-size:16px;
    font-weight:700;
    color:var(--c-ink);
}
.faq-q:hover{color:var(--c-primary-deep)}
.faq-indicator{
    width:30px;height:30px;
    border-radius:50%;
    flex-shrink:0;
    background:var(--c-surface);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:all .2s ease;
    color:var(--c-primary-deep);
}
.faq-item.faq-open .faq-indicator{
    background:var(--c-primary);
    color:#10241C;
    transform:rotate(45deg);
}
.faq-a{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height .2s ease-out,opacity .2s ease;
}
.faq-a-inner{
    padding:0 22px 20px 22px;
    color:var(--c-gray);
    font-size:14px;
    line-height:1.85;
}
.faq-a-inner::before{
    content:"";
    display:inline-block;
    width:9px;height:9px;
    border-radius:50%;
    background:var(--c-primary-deep);
    margin-right:7px;
}
.faq-item.faq-open .faq-a{
    max-height:700px;
    opacity:1;
}

/* CTA */
.cat-cta{
    background:var(--c-primary);
    position:relative;
    overflow:hidden;
    padding:60px 0;
}
.cat-cta::before{
    content:"";
    position:absolute;
    top:-40%;right:-10%;
    width:46%;height:200%;
    background:repeating-linear-gradient(-28deg,transparent 0 14px,rgba(47,190,118,.12) 14px 16px);
}
.cat-cta__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    position:relative;
    z-index:2;
}
.cat-cta__inner h2{
    font-size:clamp(24px,3vw,34px);
    font-weight:800;
    color:#10241C;
    line-height:1.4;
    max-width:780px;
}
.cat-cta__inner p{
    color:#284A3A;
    font-size:14px;
    max-width:720px;
    margin-top:6px;
}
.cta-btn-group{
    display:flex;gap:12px;flex-shrink:0;flex-wrap:wrap;
    justify-content:flex-end;
}
.cta-btn-dark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 24px;
    background:#10241C;
    color:#fff;
    border-radius:4px;
    font-weight:700;
    font-size:15px;
    box-shadow:0 3px 0 rgba(15,34,26,.35);
    transition:all .2s ease;
}
.cta-btn-dark:hover{
    background:#1C4230;
    transform:translateY(1px);
    box-shadow:0 1px 0 rgba(15,34,26,.3);
}
.cta-btn-outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 22px;
    background:transparent;
    color:#10241C;
    border:2px solid #10241C;
    border-radius:4px;
    font-weight:700;
    font-size:14px;
}
.cta-btn-outline:hover{background:rgba(16,36,28,.1)}

/* footer */
.footer{
    background:#0E1E16;
    color:#E1EFE7;
    padding-top:64px;
    border-top:1px solid rgba(47,190,118,.3);
    position:relative;
}
.footer .brand-lockup__text{color:#fff}
.footer__main{
    display:grid;
    grid-template-columns:2fr 1.1fr 1.1fr .9fr;
    gap:38px;
    padding-bottom:44px;
}
.footer__brand p{
    color:#9CBAAE;
    font-size:13px;
    line-height:1.8;
    max-width:360px;
    margin-top:16px;
}
.footer__cols{
    display:contents;
}
.footer__col h4{
    color:#F1F8F3;
    font-size:13px;
    margin-bottom:16px;
    letter-spacing:.06em;
    font-weight:700;
}
.footer__col a,
.footer__col span{
    display:flex;
    align-items:center;
    min-height:30px;
    color:#9CBAAE;
    font-size:13px;
}
.footer__col a:hover{
    color:var(--c-primary);
    transform:translateX(3px);
}
.footer_note_icon{
    margin-right:7px;opacity:.8;
}
.footer__legal{
    border-top:1px solid rgba(47,190,118,.22);
    padding:20px 0;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:8px 20px;
    color:#6F8C80;
    font-size:12px;
}

/* Responsive */
@media (max-width:1100px){
    .quick-card-main{grid-template-columns:1.2fr 1fr}
    .quick-mini-grid{grid-template-columns:1fr}
    .switch-part{padding:28px}
    .safe-list{grid-template-columns:1fr}
    .process-layout{grid-template-columns:1fr}
    .footer__main{grid-template-columns:1.2fr 1fr 1fr}
    .footer__cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
}
@media (max-width:1023px){
    .channelbar{
        position:fixed;
        top:0;
        right:-320px;
        width:286px;
        height:100%;
        background:var(--c-bg);
        transition:right .25s ease-out;
        padding-top:24px;
        z-index:100;
        box-shadow:-12px 0 34px rgba(0,0,0,.3);
        border-left:1px solid #1F4A37;
    }
    body.nav-open .channelbar{right:0}
    .channelbar__inner{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:0 18px;
        min-height:0;
        overflow-y:auto;
    }
    .channel-link{
        width:100%;
        min-height:48px;
        padding:0 14px;
        color:#CBE0D6;
        border-radius:6px;
        justify-content:space-between;
        align-items:center;
    }
    .channel-link.active{
        background:rgba(201,247,58,.12);
        color:var(--c-primary);
    }
    .channel-link.active::after{
        left:0;
        width:5px;
        height:60%;
        top:20%;
        transform:scaleX(1);
        border-radius:0 3px 3px 0;
        transform-origin:top;
    }
    .channel-link::after{display:none}
    .nav-toggle{
        display:inline-flex;
        min-width:44px;min-height:44px;
    }
    .siteheader__brandrow{
        padding-top:8px;
        padding-bottom:8px;
    }
    .brand-lockup__official{display:none}
}
@media (max-width:900px){
    .cat-updates .sec-head{flex-direction:column}
    .cat-cta__inner{flex-direction:column;align-items:flex-start}
    .cta-btn-group{width:100%;justify-content:flex-start}
    .cat-cta__inner h2{max-width:100%}
    .cat-cta__inner p{max-width:100%}
    .cta-btn-dark,.cta-btn-outline{min-height:48px;flex:1 1 auto;max-width:240px}
}
@media (max-width:768px){
    .sec-pad{padding:62px 0}
    .sec-pad-sm{padding:48px 0}
    .quick-card-main{grid-template-columns:1fr}
    .quick-card-main img{order:2;min-height:180px}
    .quick-card-main .quick-card-body{order:1}
    .quick-mini-grid{grid-template-columns:1fr 1fr}
    .process-layout{grid-template-columns:1fr}
    .safe-grid{grid-template-columns:1fr}
    .safe-list{grid-template-columns:1fr}
    .faq-wrap{grid-template-columns:1fr;gap:28px}
    .switch-band{grid-template-columns:1fr}
    .switch-part + .switch-part{border-left:0;border-top:1px solid rgba(255,255,255,.12)}
    .footer__main{grid-template-columns:1fr}
    .footer__cols{display:block}
    .footer__col{margin-bottom:14px}
    .noticebar-inner{align-items:flex-start;padding-top:9px;padding-bottom:9px}
    .notice-meta span{display:none}
}
@media (max-width:640px){
    .container{padding:0 18px}
    .brand-lockup__text{font-size:14px}
    .brand-lockup__icon{width:28px;height:28px}
    .update-item{grid-template-columns:1fr}
    .update-thumb,.update-thumb-placeholder{width:100%;height:130px}
    .update-item__link{position:absolute;right:12px;bottom:12px;width:38px;height:38px}
    .cat-hero__meta{flex-direction:column;gap:8px}
    .filter-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px}
    .filter-chip{flex-shrink:0}
}

/* roulang page: category2 */
:root{
  --c-bg:#0F221A;
  --c-surface:#F0F4EF;
  --c-card:#FFFFFF;
  --c-line:#D5E0D5;
  --c-primary:#C9F73A;
  --c-primary-deep:#00A86B;
  --c-ink:#10241C;
  --c-gray:#5A6A60;
  --c-time:#315D4E;
  --c-error:#F26D6D;
  --c-timer-edge:#2FBE76;
  --radius-card:16px;
  --shadow-card:0 1px 2px rgba(16,36,28,.06),0 10px 30px rgba(16,36,28,.08);
  --font-cn:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--c-surface);
  color:var(--c-ink);
  font-family:var(--font-cn);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-primary-deep);text-decoration:none;transition:all .2s ease-out}
a:hover{color:#007B4E}
a:focus-visible,.btn:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid var(--c-primary);
  outline-offset:3px;
}
button{font-family:inherit;cursor:pointer}
.container{max-width:1200px;margin-inline:auto;padding-inline:24px}
.section{padding-block:72px}
.section--surface{background:var(--c-surface)}
.section--white{background:#fff}
.section-head{max-width:820px;margin-bottom:42px}
.section-kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:600;letter-spacing:.16em;
  color:var(--c-primary-deep);text-transform:uppercase;margin-bottom:14px;
}
.section-kicker::before{
  content:"";width:28px;height:2px;background:var(--c-primary);display:inline-block;
}
.section-head h2{
  font-size:clamp(32px,4.4vw,48px);
  line-height:1.1;
  letter-spacing:-.01em;
  font-weight:800;
}
.section-head p{margin-top:18px;font-size:16px;color:var(--c-gray)}
.eyebrow-tag{
  display:inline-flex;align-items:center;gap:8px;
  letter-spacing:.12em;
  font-size:13px;
  font-weight:600;
  color:var(--c-primary-deep);
  background:rgba(0,168,107,.08);
  padding:6px 12px;
}

/* ===== Topbar ===== */
.topbar{
  background:var(--c-primary);
  color:#0B2317;
  font-size:14px;
  position:relative;
  z-index:110;
}
.topbar__inner{
  display:flex;align-items:center;gap:12px;
  min-height:38px;
}
.topbar__dot{
  position:relative;width:10px;height:10px;flex:0 0 auto;border-radius:50%;
  background:#0B2317;
}
.topbar__dot::before{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid rgba(11,35,23,.35);
  animation:topPulse 1.8s infinite;
}
@keyframes topPulse{
  0%{transform:scale(.7);opacity:.9}
  70%{transform:scale(1.6);opacity:0}
  100%{opacity:0}
}
.topbar__inner p{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar__time{color:#1E4A32;font-weight:600;font-variant-numeric:tabular-nums;flex:0 0 auto}
.topbar__close{
  border:0;background:rgba(0,0,0,.12);width:26px;height:26px;border-radius:6px;
  color:#0B2317;font-size:16px;line-height:1;flex:0 0 auto;
  transition:background .2s, transform .2s;
}
.topbar__close:hover{background:rgba(0,0,0,.24)}
.topbar.is-hidden{display:none}

/* ===== Header / Navigation ===== */
.siteheader{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(15,34,26,.98);
  border-bottom:1px solid rgba(47,190,118,.25);
}
.siteheader__brandrow{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;
  height:72px;
  padding-top:8px;padding-bottom:8px;
}
.brand-lockup{display:inline-flex;align-items:center;gap:12px;min-width:0}
.brand-lockup__icon{
  width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(201,247,58,.08);
  border:1px solid rgba(201,247,58,.3);
  border-radius:8px;
}
.brand-lockup__icon svg{width:28px;height:28px}
.brand-lockup__text{
  color:var(--c-primary);
  font-size:clamp(17px,2vw,22px);
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
  line-height:1.2;
}
.brand-lockup__official{
  color:#A7C2B0;
  font-size:12px;
  font-weight:500;
  border:1px solid #395F4C;
  border-radius:4px;
  padding:2px 8px;
  margin-left:-4px;
}
.header-actions{display:flex;align-items:center;gap:12px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 20px;
  border:1px solid transparent;border-radius:4px;
  font-weight:600;font-size:15px;line-height:1;
  transition:all .2s ease-out;
}
.btn-primary{
  background:var(--c-primary);
  color:#0B2317!important;
  box-shadow:0 4px 0 #2C5D3B;
}
.btn-primary:hover{
  background:#DFFF6E;
  transform:translateY(-1px);
  box-shadow:0 5px 0 #2C5D3B;
}
.btn-primary:active{transform:translateY(3px);box-shadow:0 1px 0 #2C5D3B}
.btn-outline{
  border-color:#7A9B88;
  color:#D7EAE0!important;
  background:transparent;
}
.btn-outline:hover{border-color:var(--c-timer-edge);background:rgba(47,190,118,.15)}
.btn-light-outline{
  border-color:var(--c-timer-edge);
  color:var(--c-primary-deep)!important;
}
.btn-light-outline:hover{background:rgba(47,190,118,.12);color:#006F44!important}
.btn-header{
  background:var(--c-primary);
  color:#0B2317!important;
  padding:0 18px;
  min-height:40px;
  box-shadow:0 3px 0 #2C5D3B;
}
.btn-header:hover{background:#DFFF6E}
.nav-toggle{
  display:none;border:0;background:transparent;width:44px;height:44px;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--c-primary);transition:all .2s}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.channelbar{background:rgba(8,21,15,.92);border-top:1px solid rgba(47,190,118,.16)}
.channelbar__inner{
  display:flex;align-items:stretch;gap:4px;
  overflow-x:auto;
  scrollbar-width:none;
}
.channelbar__inner::-webkit-scrollbar{display:none}
.channel-link{
  position:relative;
  display:inline-flex;align-items:center;
  padding:12px 20px;
  color:#C8DAD0;
  font-size:14px;font-weight:600;
  letter-spacing:.04em;
  white-space:nowrap;
  border-bottom:3px solid transparent;
}
.channel-link:hover{color:var(--c-primary)}
.channel-link.active{
  color:var(--c-primary);
  border-bottom-color:var(--c-primary);
  background:rgba(201,247,58,.04);
}
.nav-mask{position:fixed;inset:0;background:rgba(6,18,12,.5);z-index:95;opacity:0;visibility:hidden;transition:.25s}
.nav-mask.show{opacity:1;visibility:visible}

/* ===== Buttons with arrow ===== */
.btn-arrow::after{
  content:"→";display:inline-block;margin-left:8px;
  transition:transform .2s ease-out;
}
.btn-arrow:hover::after{transform:translateX(4px)}

/* ===== Cat Hero ===== */
.cat-hero{
  min-height:300px;
  background-position:center;
  background-size:cover;
  display:flex;align-items:center;
  color:#E9F4EC;
  position:relative;
  border-bottom:5px solid var(--c-primary);
}
.cat-hero__inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end;width:100%}
.cat-hero__label{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--c-primary);font-size:13px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;background:rgba(201,247,58,.08);
  border:1px solid rgba(201,247,58,.3);
  padding:6px 12px;border-radius:4px;margin-bottom:18px;
}
.cat-hero h1{
  font-size:clamp(34px,5.5vw,58px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.02em;
}
.cat-hero h1 .hero-glow{
  color:var(--c-primary);
  position:relative;
  display:inline-block;
}
.cat-hero__desc{
  max-width:620px;margin-top:18px;
  color:#C2D7CB;font-size:16px;
}
.cat-hero__meta{
  display:flex;flex-direction:column;gap:12px;
  background:rgba(9,29,19,.62);
  border:1px solid rgba(47,190,118,.35);
  border-radius:12px;
  padding:18px 20px;
  min-width:240px;
  backdrop-filter:blur(4px);
}
.cat-hero__meta span{font-size:13px;color:#BBD0C4}
.cat-hero__meta strong{
  display:block;color:var(--c-primary);font-size:18px;margin-top:4px;
  font-variant-numeric:tabular-nums;letter-spacing:.03em;
}
.hero__dotgrid{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(201,247,58,.14) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(90deg,transparent 20%,#000 80%);
}
@media(max-width:768px){
  .cat-hero__inner{grid-template-columns:1fr}
  .cat-hero__meta{min-width:0;max-width:360px}
}

/* ===== Filter Bar ===== */
.filter-wrap{
  background:#FFFFFF;
  border:1px solid var(--c-line);
  border-radius:18px;
  padding:14px 18px;
  margin-top:-34px;
  position:relative;
  z-index:4;
  box-shadow:var(--shadow-card);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.filter-label{display:flex;align-items:center;gap:8px;color:var(--c-gray);font-size:14px;font-weight:600}
.filter-pills{display:flex;flex-wrap:wrap;gap:6px}
.filter-pill{
  align-items:center;
  display:inline-flex;
  background:#EFF4EF;
  color:#315D4E;
  border:1px solid transparent;
  border-radius:100px;
  padding:8px 14px;
  font-size:14px;
  line-height:1;
  transition:all .18s;
}
.filter-pill:hover{border-color:#9CC4A8;background:#E6EFE8}
.filter-pill.active{background:var(--c-primary);color:#0B2317;font-weight:700}
.filter-follow{
  display:none;
}

/* ===== Updates list ===== */
.updates-section{padding-top:48px}
.feature-card{
  display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  background:var(--c-card);
  border:1px solid var(--c-line);
  border-radius:var(--radius-card);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  margin-bottom:26px;
}
.feature-card__media{position:relative;min-height:260px}
.feature-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature-card__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(107deg,rgba(15,34,26,.12) 0%,rgba(15,34,26,.6) 100%);
}
.feature-card__cat{
  position:absolute;left:18px;top:18px;z-index:2;
  background:rgba(12,35,24,.78);
  color:var(--c-primary);
  border:1px solid rgba(201,247,58,.35);
  font-size:12px;padding:6px 10px;border-radius:4px;
}
.feature-card__content{padding:32px;display:flex;flex-direction:column;justify-content:center}
.feature-card__title{
  font-size:clamp(22px,3vw,30px);
  line-height:1.3;
  font-weight:800;
  letter-spacing:-.01em;
}
.feature-card__title a{color:var(--c-ink)}
.feature-card__title a:hover{color:var(--c-primary-deep)}
.feature-card__summary{
  margin-top:14px;color:var(--c-gray);font-size:15px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.feature-card__meta{margin-top:20px;display:flex;align-items:center;gap:16px;color:var(--c-time);font-size:13px;flex-wrap:wrap}
.postlist-card{
  display:grid;
  grid-template-columns:160px minmax(0,1fr);
  gap:0;
  background:var(--c-card);
  border:1px solid var(--c-line);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:18px;
  box-shadow:0 1px 2px rgba(16,36,28,.03),0 6px 20px rgba(16,36,28,.05);
  transition:transform .25s,box-shadow .25s;
}
.postlist-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.postlist-card__thumb{
  position:relative;min-height:124px;background:#dbe6dc;
}
.postlist-card__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.postlist-card__thumb::after{
  content:"";position:absolute;inset:0;background:rgba(15,34,26,.12);
}
.postlist-card__body{padding:18px 22px;display:flex;flex-direction:column}
.postlist-card__cat{
  color:var(--c-primary-deep);
  background:rgba(0,168,107,.08);
  border-radius:4px;
  display:inline-flex;
  align-items:center;
  font-size:12px;
  font-weight:600;
  line-height:1;
  padding:5px 8px;
  align-self:flex-start;
  margin-bottom:10px;
}
.postlist-card__title{font-size:18px;line-height:1.45;font-weight:700}
.postlist-card__title a{color:var(--c-ink)}
.postlist-card__title a:hover{color:var(--c-primary-deep)}
.postlist-card__summary{
  margin-top:6px;color:var(--c-gray);font-size:14px;line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.postlist-card__meta{
  margin-top:auto;padding-top:10px;
  display:flex;gap:18px;font-size:13px;color:var(--c-time);
}
.postlist-card__read{display:flex;align-items:center;gap:6px}
.is-hidden{display:none!important}
.loadmore-wrap{display:flex;justify-content:center;margin-top:24px}
.loadmore-btn{
  background:transparent;
  border:1px solid #2FBE76;
  color:#007B4E;
  min-height:44px;
  border-radius:5px;
  padding:0 28px;
  font-weight:700;
  transition:all .2s;
}
.loadmore-btn:hover{background:var(--c-primary);color:#0B2317;border-color:var(--c-primary)}
.empty-state{
  display:none;padding:48px;background:#F7FAF6;
  border:1px dashed #B7CDBE;border-radius:16px;
  text-align:center;color:var(--c-gray);
}

/* ===== Info channel ===== */
.info-channel{background:#F0F4EF;border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.info-channel__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:36px;align-items:center}
.info-channel__lead h3{font-size:clamp(28px,3.6vw,40px);line-height:1.15;font-weight:800}
.info-channel__lead p{margin-top:18px;color:var(--c-gray)}
.info-features{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.info-feature{
  background:#fff;border:1px solid var(--c-line);border-radius:14px;
  padding:24px;box-shadow:var(--shadow-card);position:relative;overflow:hidden;
}
.info-feature:first-child{
  grid-column:span 1;
  background:var(--c-bg);
  color:#E9F4EC;
  border-color:var(--c-bg);
}
.info-feature:nth-child(2){
  background:var(--c-primary);
  border-color:var(--c-primary);
}
.info-feature:nth-child(2) p{color:#26402E}
.info-feature:nth-child(3){
  grid-column:span 2;
  border-left:4px solid var(--c-primary);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}
.info-feature__num{
  font-family:"Archivo","Barlow Condensed",Arial,sans-serif;
  font-size:34px;font-weight:800;
  opacity:.92;letter-spacing:-.02em;color:var(--c-primary);
}
.info-feature:nth-child(2) .info-feature__num{color:#142D1D}
.info-feature h4{font-size:18px;margin-top:6px;font-weight:800}
.info-feature:nth-child(odd) h4{color:#D9EBE1}
.info-feature:nth-child(2) h4{color:#0F2A1B}
.info-feature p{margin-top:8px;font-size:14px;line-height:1.7;color:#668177}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.link-arrow::after{content:"→";transition:transform .2s}
.link-arrow:hover::after{transform:translateX(4px)}

/* ===== Release band ===== */
.release-band{
  background:var(--c-bg);
  color:#E8F2EB;
  position:relative;
  overflow:hidden;
}
.release-band::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(201,247,58,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(201,247,58,.06) 1px,transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
}
.section-kicker--light{color:var(--c-primary)}
.release-steps{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;position:relative;
}
.step{
  padding:28px 24px 20px 0;
  position:relative;
  border-top:3px solid rgba(47,190,118,.35);
}
.step::before{
  content:"";position:absolute;top:-7px;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--c-primary);box-shadow:0 0 0 5px rgba(201,247,58,.2);
}
.step__idx{
  font-family:"Archivo","Barlow Condensed",sans-serif;
  font-size:36px;font-weight:800;color:var(--c-primary);
  letter-spacing:-.02em;
}
.step h4{font-size:19px;margin-top:6px;color:#F1F8F2}
.step p{margin-top:8px;color:#A8C4B4;font-size:14px;line-height:1.7}

/* ===== Switch between categories ===== */
.bridge-block{background:linear-gradient(110deg,#10281D 0%,#173C2B 100%);border-radius:20px}
.bridge-grid{display:grid;grid-template-columns:1fr 1fr}
.bridge-cell{padding:34px;color:#E6F1EA}
.bridge-cell + .bridge-cell{border-left:1px solid rgba(47,190,118,.25)}
.bridge-cell__cat{color:var(--c-primary);font-size:12px;letter-spacing:.14em;font-weight:700}
.bridge-cell h3{font-size:clamp(20px,3vw,28px);margin:10px 0;color:#F1F9F3}
.bridge-cell p{color:#BED2C5;font-size:14px;line-height:1.8;max-width:440px}

/* ===== FAQ ===== */
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:42px}
.faq-left h2{font-size:clamp(30px,4vw,42px);line-height:1.1;font-weight:800}
.faq-left .badge-turn{
  display:inline-flex;color:var(--c-primary-deep);font-weight:800;
  transform:rotate(-6deg);
  background:var(--c-primary);
  padding:4px 12px;border-radius:6px;
}
.faq-left p{margin-top:16px;color:var(--c-gray);max-width:360px}
.faq-list{border-top:1px solid var(--c-line)}
.faq-item{border-bottom:1px solid var(--c-line)}
.faq-item__q{
  width:100%;text-align:left;background:transparent;border:0;
  font-size:17px;font-weight:700;color:var(--c-ink);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 6px;
  min-height:58px;
}
.faq-item__q .arrow{
  display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto;
  border:1px solid #BCD0C2;border-radius:50%;
  color:var(--c-primary-deep);font-size:18px;transition:transform .2s;
}
.faq-item.open .faq-item__q .arrow{transform:rotate(45deg)}
.faq-item__a{
  max-height:0;overflow:hidden;
  transition:max-height .25s ease;
}
.faq-item.open .faq-item__a{max-height:360px}
.faq-item__a_inner{
  padding:0 40px 20px 6px;
  display:flex;align-items:flex-start;gap:14px;
  color:var(--c-gray);font-size:15px;line-height:1.85;
}
.faq-item__a_inner::before{
  content:"";width:8px;height:8px;background:var(--c-primary);
  flex:0 0 auto;border-radius:50%;margin-top:8px;
}

/* ===== CTA ===== */
.cta-zone{
  background:var(--c-bg);
  padding:72px 0;
  color:#E4F1E9;
  position:relative;
  overflow:hidden;
}
.cta-zone::after{
  content:"ENTER / 2026";
  position:absolute;right:30px;bottom:-30px;
  font-family:"Archivo","Barlow Condensed",sans-serif;
  font-weight:800;font-size:110px;letter-spacing:.04em;
  color:rgba(201,247,58,.08);pointer-events:none;
}
.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:34px;position:relative}
.cta-inner h2{
  font-size:clamp(30px,4.6vw,52px);
  font-weight:800;
  line-height:1.15;
  color:#F3FAF5;
  margin-bottom:14px;
}
.cta-inner h2 em{color:var(--c-primary);font-style:normal}
.cta-inner p{color:#B7CFC2;max-width:640px;font-size:16px}
.cta-actions{flex:0 0 auto;display:flex;flex-direction:column;gap:14px;min-width:250px}

/* ===== Footer ===== */
.footer{background:var(--c-bg);color:#A7C2B0}
.footer__main{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:40px;
  padding-block:60px 36px;
}
.footer__brand .brand-lockup__text{font-size:18px}
.footer__brand p{margin-top:14px;font-size:14px;line-height:1.8;max-width:520px}
.footer__cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}
.footer__col h4{color:#D6E9DC;font-size:15px;font-weight:700;margin-bottom:14px;letter-spacing:.04em}
.footer__col a{
  display:flex;align-items:center;gap:8px;
  color:#A7C2B0;
  font-size:14px;
  line-height:2.4;
  min-height:28px;
}
.footer__col a:hover{color:var(--c-primary)}
.footer__legal{
  border-top:1px solid rgba(47,190,118,.22);
  padding-block:18px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  color:#67887A;font-size:13px;
}

/* ===== Responsive ===== */
@media(max-width:1024px){
  .container{padding-inline:20px}
  .info-channel__grid{grid-template-columns:1fr}
  .feature-card{grid-template-columns:1fr}
  .feature-card__media{min-height:200px}
  .release-steps{grid-template-columns:1fr 1fr;gap:18px}
  .footer__main{grid-template-columns:1fr;gap:36px}
}
@media(max-width:768px){
  .topbar__time{display:none}
  .topbar__inner p{white-space:normal;font-size:13px}
  .siteheader{position:relative}
  .siteheader__brandrow{height:64px}
  .nav-toggle{display:flex}
  .btn-header{padding:0 12px;min-height:40px}
  .channelbar{
    position:fixed;top:0;right:0;bottom:0;width:min(310px,84vw);
    background:#0D2418;border-left:1px solid rgba(201,247,58,.2);
    transform:translateX(105%);transition:transform .28s ease-out;
    overflow-y:auto;z-index:110;
  }
  .channelbar.is-open{transform:translateX(0)}
  .channelbar__inner{
    display:flex;flex-direction:column;align-items:stretch;padding:18px;
    gap:2px;
  }
  .channel-link{
    border-bottom:0;
    border-left:4px solid transparent;
    padding:13px 12px;
    font-size:16px;
    color:#C2DACB;
  }
  .channel-link.active{
    background:rgba(201,247,58,.06);
    border-left-color:var(--c-primary);
    border-bottom-color:transparent;
  }
  .cat-hero{min-height:300px}
  .cat-hero__meta{min-width:0}
  .feature-card__content{padding:22px}
  .postlist-card{grid-template-columns:1fr}
  .postlist-card__thumb{height:180px;min-height:0}
  .postlist-card__body{padding:16px}
  .bridge-grid{grid-template-columns:1fr}
  .bridge-cell + .bridge-cell{border-left:0;border-top:1px solid rgba(47,190,118,.25)}
  .faq-grid{grid-template-columns:1fr}
  .cta-inner{flex-direction:column;align-items:flex-start}
  .cta-actions{min-width:0;width:100%}
  .footer__cols{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .brand-lockup__official{display:none}
  .brand-lockup__text{font-size:17px}
  .btn-header{font-size:14px;min-height:42px}
  .info-features{grid-template-columns:1fr}
  .info-feature:nth-child(3){grid-column:span 1}
  .release-steps{grid-template-columns:1fr}
  .filter-wrap{flex-direction:column;align-items:stretch}
  .footer__cols{grid-template-columns:1fr}
  .section{padding-block:50px}
}