/* roulang page: index */
:root {
            --bg: #120d16;
            --bg-soft: #1a121e;
            --panel: #211725;
            --panel-light: #2a1c2f;
            --panel-deep: #160f1a;
            --text: #f8f2f5;
            --muted: #b9aab9;
            --muted-light: #d2c7d0;
            --primary: #ff725c;
            --primary-hover: #ff8b78;
            --secondary: #ff4f8b;
            --accent: #ffd166;
            --success: #53d6b1;
            --danger: #ff6c7a;
            --border: rgba(236, 214, 229, .14);
            --border-strong: rgba(255, 114, 92, .42);
            --shadow: 0 24px 70px rgba(5, 2, 8, .38);
            --shadow-soft: 0 14px 35px rgba(5, 2, 8, .24);
            --radius-sm: 12px;
            --radius: 18px;
            --radius-lg: 26px;
            --container: 1220px;
        }

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

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 96px;
        }

        body {
            margin: 0;
            min-width: 320px;
            overflow-x: hidden;
            color: var(--text);
            background:
                radial-gradient(circle at 78% 8%, rgba(255, 79, 139, .09), transparent 30%),
                radial-gradient(circle at 8% 32%, rgba(255, 114, 92, .07), transparent 26%),
                var(--bg);
            font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }

        body.menu-open {
            overflow: hidden;
        }

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

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

        button, input, select {
            font: inherit;
        }

        button {
            border: 0;
            cursor: pointer;
        }

        ::selection {
            color: #180f15;
            background: var(--primary);
        }

        ::-webkit-scrollbar {
            width: 10px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: var(--bg);
        }

        ::-webkit-scrollbar-thumb {
            background: #49364d;
            border: 2px solid var(--bg);
            border-radius: 999px;
        }

        .site-container {
            width: min(calc(100% - 40px), var(--container));
            margin-inline: auto;
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 50;
            border-bottom: 1px solid var(--border);
            background: rgba(18, 13, 22, .89);
            box-shadow: 0 8px 28px rgba(7, 3, 9, .16);
            backdrop-filter: blur(18px);
        }

        .nav-wrap {
            display: flex;
            min-height: 78px;
            align-items: center;
            gap: 28px;
        }

        .brand {
            display: inline-flex;
            flex-shrink: 0;
            align-items: center;
            gap: 12px;
            max-width: 370px;
            font-weight: 900;
            line-height: 1.22;
            letter-spacing: -.02em;
        }

        .brand-mark {
            position: relative;
            display: grid;
            width: 43px;
            height: 43px;
            flex: 0 0 43px;
            place-items: center;
            overflow: hidden;
            color: #1b1015;
            background: var(--primary);
            border-radius: 13px 5px 13px 5px;
            box-shadow: 0 9px 24px rgba(255, 114, 92, .24);
        }

        .brand-mark::after {
            position: absolute;
            right: -7px;
            bottom: -9px;
            width: 25px;
            height: 25px;
            content: "";
            background: var(--accent);
            border-radius: 50%;
            opacity: .9;
        }

        .brand-mark svg {
            position: relative;
            z-index: 1;
            width: 23px;
        }

        .brand-text {
            font-size: 16px;
        }

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

        .nav-link {
            position: relative;
            display: inline-flex;
            min-height: 44px;
            align-items: center;
            gap: 8px;
            padding: 0 16px;
            color: var(--muted-light);
            border: 1px solid transparent;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 750;
            transition: .22s ease;
        }

        .nav-link::after {
            position: absolute;
            right: 16px;
            bottom: 4px;
            left: 16px;
            height: 2px;
            content: "";
            background: var(--primary);
            border-radius: 999px;
            opacity: 0;
            transform: scaleX(.35);
            transition: .22s ease;
        }

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

        .nav-link.active {
            color: var(--text);
            background: rgba(255, 114, 92, .09);
            border-color: rgba(255, 114, 92, .22);
        }

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

        .nav-number {
            display: inline-grid;
            min-width: 22px;
            height: 22px;
            place-items: center;
            padding: 0 6px;
            color: var(--primary);
            background: rgba(255, 114, 92, .11);
            border-radius: 7px;
            font-size: 11px;
        }

        .button {
            display: inline-flex;
            min-height: 50px;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 0 21px;
            color: #1c1015;
            background: var(--primary);
            border: 1px solid var(--primary);
            border-radius: 14px;
            box-shadow: 0 12px 28px rgba(255, 114, 92, .19);
            font-size: 15px;
            font-weight: 850;
            transition: transform .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
        }

        .button:hover {
            background: var(--primary-hover);
            border-color: var(--primary-hover);
            box-shadow: 0 16px 34px rgba(255, 114, 92, .27);
            transform: translateY(-2px);
        }

        .button:active {
            transform: translateY(0) scale(.98);
        }

        .button-outline {
            color: var(--text);
            background: rgba(25, 17, 29, .6);
            border-color: rgba(255, 114, 92, .48);
            box-shadow: none;
        }

        .button-outline:hover {
            color: var(--text);
            background: rgba(255, 114, 92, .1);
            border-color: var(--primary);
        }

        .button-small {
            min-height: 42px;
            padding-inline: 17px;
            font-size: 14px;
        }

        .nav-cta {
            margin-left: 4px;
        }

        .menu-button {
            display: none;
            width: 46px;
            height: 46px;
            margin-left: auto;
            padding: 11px;
            color: var(--text);
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 13px;
        }

        .menu-button span {
            display: block;
            width: 100%;
            height: 2px;
            margin: 5px 0;
            background: currentColor;
            border-radius: 99px;
            transition: .22s ease;
        }

        .mobile-menu {
            display: none;
            padding: 0 20px 20px;
            border-top: 1px solid var(--border);
        }

        .mobile-menu-inner {
            display: grid;
            gap: 9px;
            padding-top: 16px;
        }

        .mobile-menu .nav-link,
        .mobile-menu .button {
            width: 100%;
        }

        .status-strip {
            border-bottom: 1px solid var(--border);
            background: #171019;
        }

        .status-inner {
            display: flex;
            min-height: 38px;
            align-items: center;
            gap: 15px;
            overflow: hidden;
            color: var(--muted);
            font-size: 12px;
            font-weight: 650;
            white-space: nowrap;
        }

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

        .status-dot {
            width: 7px;
            height: 7px;
            background: var(--success);
            border-radius: 50%;
            box-shadow: 0 0 0 5px rgba(83, 214, 177, .08);
        }

        .status-separator {
            width: 1px;
            height: 14px;
            background: var(--border);
        }

        .hero {
            position: relative;
            min-height: 720px;
            overflow: hidden;
            border-bottom: 1px solid var(--border);
        }

        .hero-stage {
            position: absolute;
            inset: 0;
            background:
                linear-gradient(90deg, rgba(18, 13, 22, .98) 0%, rgba(18, 13, 22, .82) 44%, rgba(18, 13, 22, .3) 78%, rgba(18, 13, 22, .77) 100%),
                linear-gradient(135deg, #2f1730 0%, #6c263b 46%, #241321 100%);
        }

        .hero-stage::before {
            position: absolute;
            inset: 0;
            content: "";
            background-image:
                linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
            background-size: 56px 56px;
            mask-image: linear-gradient(to right, transparent 6%, black 48%, black 100%);
        }

        .hero-orbit {
            position: absolute;
            top: 10%;
            right: 5%;
            width: min(48vw, 650px);
            aspect-ratio: 1.32;
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: 42% 58% 60% 40% / 50% 38% 62% 50%;
            background:
                radial-gradient(circle at 32% 36%, rgba(255, 209, 102, .52), transparent 9%),
                radial-gradient(circle at 68% 57%, rgba(255, 79, 139, .48), transparent 13%),
                linear-gradient(145deg, rgba(255, 114, 92, .22), rgba(31, 19, 36, .54));
            box-shadow: inset 0 0 90px rgba(255, 255, 255, .03), 0 40px 100px rgba(0, 0, 0, .23);
            transform: rotate(-6deg);
        }

        .hero-orbit::before,
        .hero-orbit::after {
            position: absolute;
            content: "";
            border: 1px solid rgba(255, 255, 255, .11);
            border-radius: inherit;
        }

        .hero-orbit::before {
            inset: 12%;
        }

        .hero-orbit::after {
            inset: 27%;
            background: rgba(15, 9, 17, .18);
        }

        .hero-content {
            position: relative;
            z-index: 2;
            display: flex;
            min-height: 680px;
            align-items: center;
            padding-block: 86px;
        }

        .hero-copy {
            width: min(760px, 68%);
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            margin-bottom: 20px;
            padding: 7px 12px;
            color: #ffd8d0;
            background: rgba(255, 114, 92, .1);
            border: 1px solid rgba(255, 114, 92, .28);
            border-radius: 999px;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .08em;
        }

        .eyebrow-line {
            width: 22px;
            height: 2px;
            background: var(--primary);
        }

        .hero h1 {
            max-width: 850px;
            margin: 0;
            font-size: clamp(44px, 6.1vw, 78px);
            font-weight: 950;
            line-height: 1.08;
            letter-spacing: -.055em;
            text-wrap: balance;
        }

        .hero h1 span {
            color: var(--primary);
        }

        .hero-description {
            max-width: 710px;
            margin: 26px 0 0;
            color: #d6cad4;
            font-size: 17px;
            line-height: 1.9;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 13px;
            margin-top: 32px;
        }

        .hero-facts {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 34px;
        }

        .hero-fact {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            min-height: 39px;
            padding: 0 13px;
            color: var(--muted-light);
            background: rgba(19, 12, 22, .64);
            border: 1px solid var(--border);
            border-radius: 10px;
            font-size: 13px;
            font-weight: 700;
            backdrop-filter: blur(10px);
        }

        .hero-fact strong {
            color: var(--accent);
        }

        .play-control {
            position: absolute;
            z-index: 3;
            right: 13%;
            bottom: 15%;
            display: grid;
            width: 82px;
            height: 82px;
            place-items: center;
            color: #1c1015;
            background: var(--accent);
            border: 10px solid rgba(255, 255, 255, .12);
            border-radius: 50%;
            background-clip: padding-box;
            box-shadow: 0 22px 50px rgba(0, 0, 0, .3);
            transition: .24s ease;
        }

        .play-control:hover {
            background-color: #ffe092;
            transform: scale(1.06);
        }

        .play-control svg {
            width: 24px;
            margin-left: 4px;
        }

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

        .section-compact {
            padding: 82px 0;
        }

        .section-alt {
            background: var(--bg-soft);
            border-block: 1px solid var(--border);
        }

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

        .section-heading-main {
            max-width: 700px;
        }

        .section-index {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
            color: var(--primary);
            font-size: 12px;
            font-weight: 900;
            letter-spacing: .12em;
        }

        .section-index::after {
            width: 44px;
            height: 1px;
            content: "";
            background: var(--primary);
        }

        .section-title {
            margin: 0;
            font-size: clamp(29px, 4vw, 43px);
            font-weight: 900;
            line-height: 1.2;
            letter-spacing: -.035em;
        }

        .section-copy {
            max-width: 660px;
            margin: 14px 0 0;
            color: var(--muted);
            font-size: 16px;
            line-height: 1.85;
        }

        .section-aside {
            max-width: 340px;
            color: var(--muted);
            font-size: 13px;
            text-align: right;
        }

        .badge {
            display: inline-flex;
            min-height: 27px;
            align-items: center;
            gap: 6px;
            padding: 0 10px;
            color: var(--muted-light);
            background: rgba(255, 255, 255, .045);
            border: 1px solid var(--border);
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
        }

        .badge-hot {
            color: #ffd4cb;
            background: rgba(255, 114, 92, .1);
            border-color: rgba(255, 114, 92, .26);
        }

        .badge-success {
            color: #b9f6e4;
            background: rgba(83, 214, 177, .08);
            border-color: rgba(83, 214, 177, .23);
        }

        .feature-layout {
            display: grid;
            grid-template-columns: 250px 1fr;
            gap: 22px;
        }

        .feature-tabs {
            display: grid;
            align-content: start;
            gap: 9px;
            padding: 10px;
            background: var(--panel-deep);
            border: 1px solid var(--border);
            border-radius: var(--radius);
        }

        .feature-tab {
            display: flex;
            min-height: 58px;
            align-items: center;
            gap: 12px;
            padding: 0 15px;
            color: var(--muted);
            background: transparent;
            border: 1px solid transparent;
            border-radius: 12px;
            text-align: left;
            transition: .2s ease;
        }

        .feature-tab:hover,
        .feature-tab.active {
            color: var(--text);
            background: var(--panel);
            border-color: var(--border);
        }

        .feature-tab.active {
            border-color: rgba(255, 114, 92, .28);
            box-shadow: inset 3px 0 var(--primary);
        }

        .tab-number {
            color: var(--primary);
            font-size: 12px;
            font-weight: 900;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: 1.3fr .7fr;
            grid-template-rows: auto auto;
            gap: 18px;
        }

        .feature-card {
            position: relative;
            min-height: 220px;
            overflow: hidden;
            padding: 28px;
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-soft);
            transition: transform .23s ease, border-color .23s ease, background-color .23s ease;
        }

        .feature-card:hover {
            z-index: 2;
            background: #281b2d;
            border-color: rgba(255, 114, 92, .36);
            transform: translateY(-4px);
        }

        .feature-card-wide {
            grid-row: span 2;
            min-height: 458px;
            background:
                radial-gradient(circle at 80% 15%, rgba(255, 79, 139, .14), transparent 28%),
                var(--panel);
        }

        .feature-number {
            position: absolute;
            top: 18px;
            right: 22px;
            color: rgba(255, 255, 255, .1);
            font-size: 54px;
            font-weight: 950;
            line-height: 1;
        }

        .feature-icon {
            display: grid;
            width: 46px;
            height: 46px;
            place-items: center;
            color: var(--primary);
            background: rgba(255, 114, 92, .09);
            border: 1px solid rgba(255, 114, 92, .22);
            border-radius: 14px;
        }

        .feature-icon svg {
            width: 23px;
        }

        .feature-card h3 {
            margin: 23px 0 8px;
            font-size: 22px;
            font-weight: 850;
        }

        .feature-card p {
            max-width: 530px;
            margin: 0;
            color: var(--muted);
            font-size: 14px;
        }

        .mini-track {
            display: grid;
            gap: 12px;
            margin-top: 34px;
        }

        .track-row {
            display: grid;
            grid-template-columns: 94px 1fr 55px;
            align-items: center;
            gap: 12px;
            color: var(--muted-light);
            font-size: 12px;
            font-weight: 700;
        }

        .track-line {
            height: 7px;
            overflow: hidden;
            background: rgba(255, 255, 255, .07);
            border-radius: 99px;
        }

        .track-line span {
            display: block;
            height: 100%;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            border-radius: inherit;
        }

        .track-row strong {
            color: var(--text);
            text-align: right;
        }

        .scenario-track {
            position: relative;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px;
        }

        .scenario-track::before {
            position: absolute;
            top: 43px;
            right: 10%;
            left: 10%;
            height: 2px;
            content: "";
            background: linear-gradient(90deg, var(--primary), rgba(255, 114, 92, .1));
        }

        .scenario-card {
            position: relative;
            z-index: 1;
            padding: 24px;
            background: var(--panel-deep);
            border: 1px solid var(--border);
            border-radius: 16px;
            transition: .22s ease;
        }

        .scenario-card:hover {
            border-color: rgba(255, 114, 92, .35);
            transform: translateY(-3px);
        }

        .scenario-step {
            display: grid;
            width: 38px;
            height: 38px;
            place-items: center;
            margin-bottom: 31px;
            color: #1a0e14;
            background: var(--primary);
            border: 6px solid var(--bg-soft);
            border-radius: 50%;
            box-shadow: 0 0 0 1px rgba(255, 114, 92, .35);
            font-size: 11px;
            font-weight: 950;
        }

        .scenario-card h3 {
            margin: 0 0 8px;
            font-size: 18px;
            font-weight: 850;
        }

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

        .feedback-layout {
            display: grid;
            grid-template-columns: 1.35fr .65fr;
            gap: 18px;
        }

        .feedback-main {
            position: relative;
            min-height: 350px;
            overflow: hidden;
            padding: 36px;
            background:
                linear-gradient(130deg, rgba(255, 114, 92, .1), transparent 43%),
                var(--panel);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
        }

        .quote-mark {
            color: var(--primary);
            font-family: Georgia, serif;
            font-size: 78px;
            font-weight: 900;
            line-height: .8;
        }

        .feedback-quote {
            max-width: 670px;
            margin: 22px 0 30px;
            font-size: clamp(21px, 3vw, 31px);
            font-weight: 760;
            line-height: 1.55;
        }

        .feedback-meta {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 12px;
            color: var(--muted);
            font-size: 13px;
        }

        .feedback-side {
            display: grid;
            gap: 18px;
        }

        .metric-card {
            display: flex;
            min-height: 166px;
            flex-direction: column;
            justify-content: space-between;
            padding: 25px;
            background: var(--panel-deep);
            border: 1px solid var(--border);
            border-radius: var(--radius);
        }

        .metric-label {
            color: var(--muted);
            font-size: 13px;
            font-weight: 750;
        }

        .metric-value {
            color: var(--accent);
            font-size: 38px;
            font-weight: 950;
            line-height: 1;
        }

        .metric-note {
            color: var(--muted);
            font-size: 12px;
        }

        .access-layout {
            display: grid;
            grid-template-columns: 1.25fr .75fr;
            gap: 20px;
        }

        .access-main {
            position: relative;
            overflow: hidden;
            padding: 38px;
            background: var(--primary);
            border-radius: var(--radius-lg);
            color: #1c1015;
            box-shadow: 0 28px 65px rgba(255, 114, 92, .18);
        }

        .access-main::after {
            position: absolute;
            right: -80px;
            bottom: -120px;
            width: 310px;
            height: 310px;
            content: "";
            border: 55px solid rgba(255, 255, 255, .13);
            border-radius: 50%;
        }

        .access-main > * {
            position: relative;
            z-index: 1;
        }

        .access-type {
            font-size: 13px;
            font-weight: 900;
            letter-spacing: .1em;
        }

        .access-price {
            display: flex;
            align-items: end;
            gap: 9px;
            margin: 22px 0;
        }

        .access-price strong {
            font-size: 56px;
            font-weight: 950;
            line-height: .9;
        }

        .access-price span {
            font-size: 14px;
            font-weight: 800;
        }

        .access-main h3 {
            margin: 0 0 10px;
            font-size: 29px;
            font-weight: 950;
        }

        .access-main p {
            max-width: 650px;
            margin: 0;
            color: rgba(28, 16, 21, .78);
            font-size: 15px;
        }

        .access-main .button {
            margin-top: 28px;
            color: var(--text);
            background: #21151f;
            border-color: #21151f;
            box-shadow: none;
        }

        .access-main .button:hover {
            background: #342132;
        }

        .access-notes {
            display: grid;
            gap: 14px;
        }

        .access-note {
            display: flex;
            gap: 15px;
            padding: 21px;
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 16px;
        }

        .note-check {
            display: grid;
            width: 31px;
            height: 31px;
            flex: 0 0 31px;
            place-items: center;
            color: var(--success);
            background: rgba(83, 214, 177, .08);
            border-radius: 9px;
        }

        .access-note h4 {
            margin: 0 0 4px;
            font-size: 15px;
            font-weight: 850;
        }

        .access-note p {
            margin: 0;
            color: var(--muted);
            font-size: 12px;
        }

        .topic-layout {
            display: grid;
            grid-template-columns: 1.25fr .75fr;
            gap: 20px;
        }

        .topic-feature {
            min-height: 360px;
            padding: 33px;
            background:
                radial-gradient(circle at 88% 18%, rgba(255, 209, 102, .18), transparent 26%),
                linear-gradient(145deg, #311d34, #211522);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
        }

        .topic-visual {
            position: relative;
            height: 155px;
            margin-bottom: 28px;
            overflow: hidden;
            background:
                linear-gradient(125deg, rgba(255, 114, 92, .62), rgba(255, 79, 139, .13)),
                #281b2d;
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: 18px;
        }

        .topic-visual::before {
            position: absolute;
            inset: 20px 28px;
            content: "";
            background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .15) 0 1px, transparent 1px 65px);
            transform: skewX(-14deg);
        }

        .topic-feature h3 {
            margin: 14px 0 8px;
            font-size: 27px;
            font-weight: 900;
        }

        .topic-feature p {
            margin: 0;
            color: var(--muted);
            font-size: 14px;
        }

        .topic-stack {
            display: grid;
            gap: 15px;
        }

        .topic-card {
            display: flex;
            min-height: 105px;
            align-items: center;
            gap: 17px;
            padding: 18px;
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 16px;
            transition: .22s ease;
        }

        .topic-card:hover {
            border-color: rgba(255, 114, 92, .38);
            transform: translateX(4px);
        }

        .topic-code {
            display: grid;
            width: 48px;
            height: 48px;
            flex: 0 0 48px;
            place-items: center;
            color: var(--primary);
            background: rgba(255, 114, 92, .08);
            border-radius: 14px;
            font-size: 12px;
            font-weight: 950;
        }

        .topic-card h4 {
            margin: 0 0 3px;
            font-size: 16px;
            font-weight: 850;
        }

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

        .news-layout {
            display: grid;
            grid-template-columns: 1fr 350px;
            gap: 28px;
        }

        .news-list {
            border-top: 1px solid var(--border);
        }

        .news-item {
            display: grid;
            grid-template-columns: 82px 1fr auto;
            align-items: center;
            gap: 20px;
            padding: 21px 8px;
            border-bottom: 1px solid var(--border);
            transition: .2s ease;
        }

        .news-item:hover {
            padding-inline: 15px;
            background: rgba(255, 255, 255, .025);
        }

        .news-date {
            color: var(--muted);
            font-size: 12px;
            font-weight: 750;
        }

        .news-title {
            font-size: 16px;
            font-weight: 800;
        }

        .news-title:hover {
            color: var(--primary);
        }

        .news-arrow {
            display: grid;
            width: 34px;
            height: 34px;
            place-items: center;
            color: var(--muted);
            border: 1px solid var(--border);
            border-radius: 10px;
        }

        .news-item:hover .news-arrow {
            color: var(--text);
            border-color: var(--primary);
        }

        .news-panel {
            padding: 27px;
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: var(--radius);
        }

        .news-panel h3 {
            margin: 0 0 8px;
            font-size: 21px;
            font-weight: 900;
        }

        .news-panel > p {
            margin: 0;
            color: var(--muted);
            font-size: 13px;
        }

        .tag-cloud {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
            margin-top: 22px;
        }

        .tag-link {
            display: inline-flex;
            min-height: 36px;
            align-items: center;
            padding: 0 12px;
            color: var(--muted-light);
            background: var(--panel-deep);
            border: 1px solid var(--border);
            border-radius: 10px;
            font-size: 12px;
            font-weight: 750;
            transition: .2s ease;
        }

        .tag-link:hover {
            color: var(--text);
            border-color: var(--primary);
            background: rgba(255, 114, 92, .07);
        }

        .faq-layout {
            display: grid;
            grid-template-columns: 330px 1fr;
            gap: 48px;
        }

        .faq-intro {
            position: sticky;
            top: 120px;
            align-self: start;
        }

        .faq-intro p {
            color: var(--muted);
            font-size: 14px;
        }

        .faq-list {
            display: grid;
            gap: 12px;
        }

        .faq-item {
            overflow: hidden;
            background: var(--panel-deep);
            border: 1px solid var(--border);
            border-radius: 15px;
            transition: .22s ease;
        }

        .faq-item.open {
            background: var(--panel);
            border-color: rgba(255, 114, 92, .35);
        }

        .faq-question {
            display: flex;
            width: 100%;
            min-height: 70px;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 17px 21px;
            color: var(--text);
            background: transparent;
            text-align: left;
            font-size: 16px;
            font-weight: 820;
        }

        .faq-icon {
            position: relative;
            width: 24px;
            height: 24px;
            flex: 0 0 24px;
            border: 1px solid var(--border);
            border-radius: 50%;
            transition: .22s ease;
        }

        .faq-icon::before,
        .faq-icon::after {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 10px;
            height: 2px;
            content: "";
            background: var(--primary);
            transform: translate(-50%, -50%);
            transition: .22s ease;
        }

        .faq-icon::after {
            transform: translate(-50%, -50%) rotate(90deg);
        }

        .faq-item.open .faq-icon {
            border-color: var(--primary);
            transform: rotate(90deg);
        }

        .faq-item.open .faq-icon::after {
            opacity: 0;
        }

        .faq-answer {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows .28s ease;
        }

        .faq-item.open .faq-answer {
            grid-template-rows: 1fr;
        }

        .faq-answer-inner {
            overflow: hidden;
        }

        .faq-answer p {
            margin: 0;
            padding: 0 21px 22px;
            color: var(--muted);
            font-size: 14px;
            line-height: 1.85;
        }

        .final-cta {
            padding: 20px 0 100px;
        }

        .cta-panel {
            position: relative;
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 35px;
            overflow: hidden;
            padding: 42px 46px;
            background:
                linear-gradient(110deg, rgba(255, 114, 92, .18), transparent 52%),
                #241725;
            border: 1px solid rgba(255, 114, 92, .29);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow);
        }

        .cta-panel::after {
            position: absolute;
            top: -85px;
            right: 18%;
            width: 210px;
            height: 210px;
            content: "";
            border: 38px solid rgba(255, 79, 139, .09);
            border-radius: 50%;
        }

        .cta-copy {
            position: relative;
            z-index: 1;
        }

        .cta-copy h2 {
            margin: 9px 0;
            font-size: clamp(27px, 4vw, 39px);
            font-weight: 930;
            line-height: 1.22;
        }

        .cta-copy p {
            max-width: 650px;
            margin: 0;
            color: var(--muted);
            font-size: 14px;
        }

        .cta-actions {
            position: relative;
            z-index: 1;
            display: flex;
            gap: 11px;
        }

        .site-footer {
            background: #0e0a11;
            border-top: 1px solid var(--border);
        }

        .footer-main {
            display: grid;
            grid-template-columns: 1.35fr .65fr .65fr;
            gap: 50px;
            padding: 65px 0 42px;
        }

        .footer-brand {
            max-width: 470px;
        }

        .footer-brand .brand {
            max-width: none;
        }

        .footer-brand p {
            margin: 19px 0 0;
            color: var(--muted);
            font-size: 13px;
        }

        .footer-title {
            margin: 0 0 17px;
            color: var(--text);
            font-size: 14px;
            font-weight: 850;
        }

        .footer-links {
            display: grid;
            gap: 10px;
        }

        .footer-link {
            color: var(--muted);
            font-size: 13px;
            transition: .2s ease;
        }

        .footer-link:hover {
            color: var(--primary);
            transform: translateX(3px);
        }

        .footer-note {
            padding: 18px;
            color: var(--muted);
            background: rgba(255, 255, 255, .025);
            border: 1px solid var(--border);
            border-radius: 13px;
            font-size: 12px;
        }

        .footer-bottom {
            display: flex;
            min-height: 70px;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            color: #8f808f;
            border-top: 1px solid var(--border);
            font-size: 12px;
        }

        .loading-state,
        .empty-state,
        .error-state {
            padding: 20px;
            color: var(--muted);
            background: var(--panel);
            border: 1px dashed var(--border);
            border-radius: var(--radius-sm);
            text-align: center;
        }

        .error-state {
            color: #ffc0c7;
            border-color: rgba(255, 108, 122, .35);
        }

        a:focus-visible,
        button:focus-visible,
        input:focus-visible,
        select:focus-visible {
            outline: 3px solid rgba(255, 209, 102, .85);
            outline-offset: 3px;
        }

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

            .menu-button {
                display: block;
            }

            .mobile-menu.open {
                display: block;
            }

            .hero {
                min-height: 660px;
            }

            .hero-copy {
                width: 78%;
            }

            .hero-orbit {
                right: -10%;
                opacity: .7;
            }

            .play-control {
                right: 8%;
            }

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

            .feature-tabs {
                display: flex;
                overflow-x: auto;
                padding-bottom: 10px;
                scrollbar-width: none;
            }

            .feature-tabs::-webkit-scrollbar {
                display: none;
            }

            .feature-tab {
                min-width: 170px;
            }

            .scenario-track {
                grid-template-columns: repeat(2, 1fr);
            }

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

            .scenario-step {
                margin-bottom: 20px;
            }

            .feedback-layout,
            .access-layout,
            .topic-layout {
                grid-template-columns: 1fr;
            }

            .feedback-side {
                grid-template-columns: repeat(2, 1fr);
            }

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

            .faq-intro {
                position: static;
            }

            .footer-main {
                grid-template-columns: 1.2fr .8fr;
            }

            .footer-main > :last-child {
                grid-column: 1 / -1;
            }
        }

        @media (max-width: 768px) {
            .site-container {
                width: min(calc(100% - 36px), var(--container));
            }

            .nav-wrap {
                min-height: 70px;
            }

            .brand-text {
                max-width: 215px;
                font-size: 14px;
            }

            .status-inner {
                overflow-x: auto;
                scrollbar-width: none;
            }

            .hero {
                min-height: auto;
            }

            .hero-content {
                min-height: 650px;
                align-items: flex-end;
                padding-block: 90px 70px;
            }

            .hero-copy {
                width: 100%;
            }

            .hero h1 {
                font-size: clamp(38px, 11vw, 57px);
            }

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

            .hero-orbit {
                top: 4%;
                right: -18%;
                width: 85vw;
                opacity: .52;
            }

            .play-control {
                top: 72px;
                right: 28px;
                bottom: auto;
                width: 68px;
                height: 68px;
            }

            .section {
                padding: 78px 0;
            }

            .section-compact {
                padding: 64px 0;
            }

            .section-heading {
                display: block;
                margin-bottom: 31px;
            }

            .section-aside {
                margin-top: 14px;
                text-align: left;
            }

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

            .feature-card-wide {
                grid-row: auto;
                min-height: 370px;
            }

            .scenario-track {
                grid-template-columns: 1fr;
            }

            .scenario-card {
                display: grid;
                grid-template-columns: 47px 1fr;
                column-gap: 15px;
            }

            .scenario-step {
                grid-row: span 2;
                margin-bottom: 0;
            }

            .feedback-main {
                min-height: 320px;
                padding: 28px;
            }

            .topic-feature,
            .access-main {
                padding: 29px;
            }

            .news-item {
                grid-template-columns: 70px 1fr auto;
                gap: 12px;
            }

            .cta-panel {
                grid-template-columns: 1fr;
                padding: 34px 28px;
            }

            .cta-actions {
                flex-wrap: wrap;
            }

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

            .footer-brand {
                grid-column: 1 / -1;
            }
        }

        @media (max-width: 520px) {
            .site-container {
                width: min(calc(100% - 32px), var(--container));
            }

            .brand-mark {
                width: 39px;
                height: 39px;
                flex-basis: 39px;
            }

            .brand-text {
                max-width: 190px;
                font-size: 12px;
            }

            .hero-content {
                min-height: 630px;
                padding-bottom: 55px;
            }

            .hero h1 {
                font-size: 36px;
                letter-spacing: -.045em;
            }

            .hero-actions {
                display: grid;
                grid-template-columns: 1fr;
            }

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

            .hero-facts {
                display: grid;
                grid-template-columns: 1fr 1fr;
            }

            .hero-fact {
                justify-content: center;
                padding-inline: 8px;
                font-size: 11px;
            }

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

            .feature-card {
                min-height: auto;
                padding: 23px;
            }

            .feature-card-wide {
                min-height: 395px;
            }

            .track-row {
                grid-template-columns: 74px 1fr 40px;
                gap: 8px;
            }

            .feedback-side {
                grid-template-columns: 1fr;
            }

            .metric-card {
                min-height: 145px;
            }

            .access-main,
            .topic-feature {
                padding: 24px;
            }

            .access-price strong {
                font-size: 47px;
            }

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

            .news-date {
                grid-column: 1 / -1;
            }

            .faq-question {
                font-size: 15px;
            }

            .cta-actions {
                display: grid;
                grid-template-columns: 1fr;
            }

            .cta-actions .button {
                width: 100%;
            }

            .footer-main {
                grid-template-columns: 1fr;
            }

            .footer-brand,
            .footer-main > :last-child {
                grid-column: auto;
            }

            .footer-bottom {
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;
                padding-block: 18px;
            }
        }

/* roulang page: category1 */
:root {
      --bg:#120d16;
      --bg-soft:#1a121e;
      --panel:#211725;
      --panel-light:#2a1c2f;
      --panel-deep:#160f1a;
      --text:#f8f2f5;
      --muted:#b9aab9;
      --muted-light:#d2c7d0;
      --primary:#ff725c;
      --primary-hover:#ff8b78;
      --secondary:#ff4f8b;
      --accent:#ffd166;
      --success:#53d6b1;
      --danger:#ff6c7a;
      --border:rgba(236,214,229,.14);
      --border-strong:rgba(255,114,92,.42);
      --shadow:0 24px 70px rgba(5,2,8,.38);
      --shadow-soft:0 14px 35px rgba(5,2,8,.24);
      --radius-sm:12px;
      --radius:18px;
      --radius-lg:26px;
      --container:1220px;
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth;scroll-padding-top:96px}
    body{
      margin:0;min-width:320px;overflow-x:hidden;color:var(--text);
      background:
        radial-gradient(circle at 78% 8%,rgba(255,79,139,.09),transparent 30%),
        radial-gradient(circle at 8% 32%,rgba(255,114,92,.07),transparent 26%),var(--bg);
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
      line-height:1.75;-webkit-font-smoothing:antialiased;
    }
    body.menu-open{overflow:hidden}
    a{color:inherit;text-decoration:none}
    img,svg{display:block;max-width:100%}
    button,input,select{font:inherit}
    button{border:0;cursor:pointer}
    .site-container{width:min(calc(100% - 40px),var(--container));margin-inline:auto}
    .site-header{
      position:sticky;top:0;z-index:50;border-bottom:1px solid var(--border);
      background:rgba(18,13,22,.89);box-shadow:0 8px 28px rgba(7,3,9,.16);
      backdrop-filter:blur(18px)
    }
    .nav-wrap{display:flex;min-height:78px;align-items:center;gap:28px}
    .brand{display:inline-flex;flex-shrink:0;align-items:center;gap:12px;max-width:370px;font-weight:900;line-height:1.22;letter-spacing:-.02em}
    .brand-mark{position:relative;display:grid;width:43px;height:43px;flex:0 0 43px;place-items:center;overflow:hidden;color:#1b1015;background:var(--primary);border-radius:13px 5px 13px 5px;box-shadow:0 9px 24px rgba(255,114,92,.24)}
    .brand-mark::after{position:absolute;right:-7px;bottom:-9px;width:25px;height:25px;content:"";background:var(--accent);border-radius:50%;opacity:.9}
    .brand-mark svg{position:relative;z-index:1;width:23px}
    .brand-text{font-size:16px}
    .desktop-nav{display:flex;align-items:center;gap:8px;margin-left:auto}
    .nav-link{position:relative;display:inline-flex;min-height:44px;align-items:center;gap:8px;padding:0 16px;color:var(--muted-light);border:1px solid transparent;border-radius:12px;font-size:14px;font-weight:750;transition:.22s ease}
    .nav-link::after{position:absolute;right:16px;bottom:4px;left:16px;height:2px;content:"";background:var(--primary);border-radius:999px;opacity:0;transform:scaleX(.35);transition:.22s ease}
    .nav-link:hover{color:var(--text);background:rgba(255,255,255,.04);border-color:var(--border)}
    .nav-link.active{color:var(--text);background:rgba(255,114,92,.09);border-color:rgba(255,114,92,.22)}
    .nav-link.active::after{opacity:1;transform:scaleX(1)}
    .nav-number{display:inline-grid;min-width:22px;height:22px;place-items:center;padding:0 6px;color:var(--primary);background:rgba(255,114,92,.11);border-radius:7px;font-size:11px}
    .button{display:inline-flex;min-height:50px;align-items:center;justify-content:center;gap:10px;padding:0 21px;color:#1c1015;background:var(--primary);border:1px solid var(--primary);border-radius:14px;box-shadow:0 12px 28px rgba(255,114,92,.19);font-size:15px;font-weight:850;transition:transform .22s ease,background-color .22s ease,border-color .22s ease,box-shadow .22s ease}
    .button:hover{background:var(--primary-hover);border-color:var(--primary-hover);box-shadow:0 16px 34px rgba(255,114,92,.27);transform:translateY(-2px)}
    .button:active{transform:translateY(0) scale(.98)}
    .button-small{min-height:44px;padding:0 17px;font-size:14px}
    .button-outline{color:var(--text);background:rgba(25,17,29,.6);border-color:rgba(255,114,92,.48);box-shadow:none}
    .button-outline:hover{color:var(--text);background:rgba(255,114,92,.12);border-color:var(--primary)}
    .menu-button{display:none;width:44px;height:44px;padding:10px;color:var(--text);background:var(--panel);border:1px solid var(--border);border-radius:12px}
    .menu-button span{display:block;width:22px;height:2px;margin:4px auto;background:currentColor;border-radius:4px;transition:.2s}
    .mobile-menu{display:none;border-top:1px solid var(--border);background:rgba(18,13,22,.98)}
    .mobile-menu-inner{display:grid;gap:10px;width:min(calc(100% - 40px),var(--container));margin:auto;padding:18px 0 24px}
    .section{padding:92px 0}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--primary);font-size:12px;font-weight:850;letter-spacing:.12em}
    .eyebrow::before{width:26px;height:2px;content:"";background:var(--primary);border-radius:10px}
    .section-heading{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:34px}
    .section-heading h2{margin:10px 0 0;font-size:clamp(28px,4vw,42px);line-height:1.15;letter-spacing:-.04em}
    .section-heading p{max-width:480px;margin:0;color:var(--muted);font-size:15px}
    .category-hero{padding:76px 0 64px;border-bottom:1px solid var(--border)}
    .hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(350px,.85fr);gap:62px;align-items:center}
    .hero-title{max-width:720px;margin:16px 0 20px;font-size:clamp(38px,6vw,68px);line-height:1.1;letter-spacing:-.065em}
    .hero-copy{max-width:650px;margin:0;color:var(--muted-light);font-size:17px;line-height:1.9}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
    .status-panel{position:relative;overflow:hidden;padding:26px;background:linear-gradient(145deg,var(--panel-light),var(--panel-deep));border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
    .status-panel::before{position:absolute;top:0;right:0;width:45%;height:5px;content:"";background:var(--primary)}
    .panel-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:22px;border-bottom:1px solid var(--border)}
    .panel-label{color:var(--muted);font-size:12px;font-weight:750;letter-spacing:.08em}
    .live-dot{display:inline-flex;align-items:center;gap:7px;color:var(--success);font-size:12px;font-weight:800}
    .live-dot::before{width:8px;height:8px;content:"";background:var(--success);border-radius:50%;box-shadow:0 0 0 5px rgba(83,214,177,.1)}
    .status-number{margin:24px 0 2px;color:var(--text);font-size:56px;font-weight:900;line-height:1}
    .status-caption{color:var(--muted);font-size:14px}
    .status-row{display:flex;justify-content:space-between;gap:14px;margin-top:26px;padding-top:18px;border-top:1px solid var(--border);font-size:13px}
    .status-row strong{color:var(--accent)}
    .info-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:26px;background:var(--border);border:1px solid var(--border);border-radius:16px;overflow:hidden}
    .info-cell{padding:17px 20px;background:rgba(33,23,37,.78)}
    .info-cell small{display:block;color:var(--muted);font-size:12px}
    .info-cell b{display:block;margin-top:4px;font-size:17px}
    .index-bar{padding:22px 0;background:rgba(26,18,30,.68);border-bottom:1px solid var(--border)}
    .chips{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none}
    .chips::-webkit-scrollbar{display:none}
    .chip{flex:0 0 auto;padding:10px 16px;color:var(--muted-light);background:var(--panel);border:1px solid var(--border);border-radius:999px;font-size:13px;font-weight:750;transition:.2s}
    .chip:hover,.chip.active{color:#211016;background:var(--accent);border-color:var(--accent)}
    .feature-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:20px}
    .feature-card,.entry-card,.filter-panel,.notice-card{background:rgba(33,23,37,.88);border:1px solid var(--border);box-shadow:var(--shadow-soft)}
    .feature-card{display:grid;grid-template-columns:.9fr 1.1fr;min-height:330px;overflow:hidden;border-radius:var(--radius-lg)}
    .cover{position:relative;min-height:210px;overflow:hidden;background:linear-gradient(135deg,#4b203b 0%,#24162d 52%,#a33e4d 100%)}
    .cover::before{position:absolute;inset:18px;content:"";border:1px solid rgba(255,255,255,.22);border-radius:16px;transform:skewY(-7deg)}
    .cover::after{position:absolute;right:-35px;bottom:-55px;width:190px;height:190px;content:"";background:var(--primary);border-radius:50%;opacity:.32}
    .cover-word{position:absolute;right:20px;bottom:20px;left:20px;color:rgba(255,255,255,.86);font-size:13px;font-weight:800;letter-spacing:.16em}
    .feature-body{display:flex;flex-direction:column;justify-content:center;padding:32px}
    .tag{display:inline-flex;width:max-content;align-items:center;gap:6px;padding:5px 10px;color:var(--accent);background:rgba(255,209,102,.1);border:1px solid rgba(255,209,102,.24);border-radius:999px;font-size:12px;font-weight:800}
    .feature-body h3,.entry-card h3{margin:17px 0 8px;font-size:24px;line-height:1.3}
    .feature-body p,.entry-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.8}
    .feature-meta{display:flex;flex-wrap:wrap;gap:14px;margin:20px 0;color:var(--muted-light);font-size:12px}
    .mini-stack{display:grid;gap:20px}
    .entry-card{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center;padding:18px;border-radius:var(--radius)}
    .entry-card .cover{min-height:120px;border-radius:13px}
    .entry-card h3{margin:0 0 6px;font-size:18px}
    .entry-card .button{min-height:38px;margin-top:13px;padding:0 13px;font-size:12px}
    .content-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:28px;align-items:start}
    .filter-panel{position:sticky;top:104px;padding:22px;border-radius:var(--radius)}
    .filter-panel h3{margin:0 0 18px;font-size:17px}
    .filter-list{display:grid;gap:7px}
    .filter-item{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;color:var(--muted);border-radius:10px;font-size:13px;transition:.2s}
    .filter-item:hover,.filter-item.active{color:var(--text);background:rgba(255,114,92,.12)}
    .filter-item.active{border-left:3px solid var(--primary)}
    .filter-count{color:var(--primary);font-size:11px}
    .list-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px}
    .list-head h3{margin:0;font-size:22px}
    .list-head span{color:var(--muted);font-size:13px}
    .entry-list{display:grid;gap:12px}
    .list-item{display:grid;grid-template-columns:74px minmax(0,1fr) auto;gap:18px;align-items:center;padding:15px 18px;background:rgba(33,23,37,.7);border:1px solid var(--border);border-radius:15px;transition:.22s}
    .list-item:hover{border-color:var(--border-strong);background:rgba(42,28,47,.9);transform:translateX(3px)}
    .list-thumb{height:60px;border-radius:10px;background:linear-gradient(135deg,#6d314b,#291a35 65%,#ff725c)}
    .list-item h4{margin:0 0 4px;font-size:16px}
    .list-item p{margin:0;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .list-meta{display:flex;gap:12px;margin-top:7px;color:var(--muted);font-size:11px}
    .list-item .button{min-height:40px;padding:0 14px;font-size:12px}
    .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
    .step{position:relative;padding:28px;background:var(--panel);border-right:1px solid var(--border)}
    .step:last-child{border-right:0}
    .step-num{color:var(--primary);font-size:13px;font-weight:900;letter-spacing:.12em}
    .step h3{margin:23px 0 8px;font-size:19px}
    .step p{margin:0;color:var(--muted);font-size:14px}
    .feedback-layout{display:grid;grid-template-columns:1.3fr .7fr;gap:20px}
    .feedback-main{padding:32px;background:linear-gradient(135deg,rgba(255,114,92,.15),rgba(42,28,47,.82));border:1px solid var(--border-strong);border-radius:var(--radius-lg)}
    .feedback-main blockquote{margin:20px 0;color:var(--muted-light);font-size:19px;line-height:1.8}
    .feedback-main cite{color:var(--accent);font-size:13px;font-style:normal}
    .metric-stack{display:grid;gap:20px}
    .metric{padding:26px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius)}
    .metric b{display:block;color:var(--primary);font-size:34px;line-height:1}
    .metric span{display:block;margin-top:10px;color:var(--muted);font-size:13px}
    .access-panel{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;padding:34px;background:var(--panel-light);border:1px solid var(--border);border-radius:var(--radius-lg)}
    .access-panel h2{margin:8px 0;font-size:30px;line-height:1.2}
    .access-panel p{max-width:650px;margin:0;color:var(--muted)}
    .faq-list{display:grid;gap:10px;max-width:850px}
    details{background:rgba(33,23,37,.75);border:1px solid var(--border);border-radius:14px;transition:.2s}
    details[open]{border-color:var(--border-strong);background:rgba(42,28,47,.9)}
    summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 22px;cursor:pointer;font-weight:750;list-style:none}
    summary::-webkit-details-marker{display:none}
    summary::after{content:"＋";color:var(--primary);font-size:22px;font-weight:400}
    details[open] summary::after{content:"－"}
    .answer{padding:0 22px 20px;color:var(--muted);font-size:14px;line-height:1.8}
    .cta-band{padding:36px 0;background:linear-gradient(100deg,#3a1d34,#24162c 55%,#44202c);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
    .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}
    .cta-inner h2{margin:0 0 5px;font-size:28px}
    .cta-inner p{margin:0;color:var(--muted-light);font-size:14px}
    .site-footer{padding:62px 0 24px;background:var(--panel-deep);border-top:1px solid var(--border)}
    .footer-main{display:grid;grid-template-columns:1.4fr .7fr .9fr;gap:55px}
    .footer-brand p{max-width:430px;margin:18px 0 0;color:var(--muted);font-size:13px;line-height:1.9}
    .footer-title{margin:0 0 17px;font-size:14px}
    .footer-links{display:grid;gap:10px}
    .footer-link{width:max-content;color:var(--muted);font-size:13px;transition:.2s}
    .footer-link:hover{color:var(--primary);transform:translateX(3px)}
    .footer-note{padding:15px;color:var(--muted);background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;font-size:13px;line-height:1.8}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:44px;padding-top:20px;color:#897b89;border-top:1px solid var(--border);font-size:12px}
    :focus-visible{outline:3px solid var(--accent);outline-offset:3px}
    @media(max-width:900px){
      .desktop-nav{display:none}.nav-cta{display:none}.menu-button{display:block;margin-left:auto}
      .mobile-menu.is-open{display:block}
      .hero-grid,.feature-layout,.content-layout,.feedback-layout{grid-template-columns:1fr}
      .filter-panel{position:static}.mini-stack{grid-template-columns:1fr 1fr}
      .footer-main{grid-template-columns:1fr 1fr}
      .footer-brand{grid-column:1/-1}
    }
    @media(max-width:700px){
      .site-container{width:min(calc(100% - 36px),var(--container))}
      .category-hero{padding:55px 0 45px}.hero-title{font-size:clamp(36px,11vw,52px)}
      .hero-copy{font-size:15px}.status-panel{padding:22px}
      .info-strip,.steps{grid-template-columns:1fr}.info-cell{border-bottom:1px solid var(--border)}
      .info-cell:last-child{border-bottom:0}.feature-card{grid-template-columns:1fr}
      .feature-card .cover{min-height:190px}.feature-body{padding:25px}
      .mini-stack{grid-template-columns:1fr}.entry-card{grid-template-columns:100px 1fr}
      .entry-card .cover{min-height:100px}.section{padding:66px 0}
      .section-heading{display:block}.section-heading p{margin-top:14px}
      .step{border-right:0;border-bottom:1px solid var(--border)}.step:last-child{border-bottom:0}
      .list-item{grid-template-columns:58px minmax(0,1fr)}.list-item .button{grid-column:2;width:max-content}
      .list-thumb{height:55px}.access-panel,.cta-inner{display:block}.access-panel .button,.cta-inner .button{width:100%;margin-top:22px}
      .footer-main{grid-template-columns:1fr;gap:30px}.footer-brand{grid-column:auto}.footer-bottom{display:grid;gap:8px;margin-top:32px}
    }
    @media(max-width:480px){
      .site-container{width:min(calc(100% - 32px),var(--container))}
      .brand-text{max-width:190px;font-size:14px}.brand-mark{width:39px;height:39px;flex-basis:39px}
      .hero-actions .button{width:100%}.status-number{font-size:48px}
      .list-item{padding:13px;gap:12px}.list-item h4{font-size:14px}.list-item p{font-size:11px}
      .feature-body h3{font-size:21px}.section-heading h2{font-size:30px}
    }