/* roulang page: index */
:root {
            --bg: #050b19;
            --bg-soft: #081329;
            --surface: rgba(13, 29, 58, .76);
            --surface-solid: #0d1d3a;
            --surface-light: rgba(25, 48, 87, .68);
            --primary: #43a9ff;
            --primary-bright: #72ccff;
            --primary-dark: #1678d1;
            --accent: #56e0c2;
            --accent-purple: #a696ff;
            --accent-orange: #ffb45d;
            --text: #f1f7ff;
            --text-soft: #aebdd4;
            --text-muted: #7f91ad;
            --border: rgba(133, 180, 239, .2);
            --border-strong: rgba(91, 187, 255, .48);
            --danger: #ff7f8d;
            --success: #62e6b9;
            --radius-sm: 10px;
            --radius: 18px;
            --radius-lg: 28px;
            --shadow: 0 24px 65px rgba(0, 6, 20, .38);
            --glow: 0 0 0 1px rgba(89, 183, 255, .2), 0 14px 38px rgba(26, 142, 255, .22);
            --transition: 180ms ease;
            --container: 1220px;
        }

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

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

        body {
            margin: 0;
            min-width: 320px;
            color: var(--text);
            background:
                radial-gradient(circle at 18% 12%, rgba(48, 133, 255, .14), transparent 26rem),
                radial-gradient(circle at 84% 30%, rgba(93, 73, 206, .12), transparent 30rem),
                #050b19;
            font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, -apple-system, sans-serif;
            font-size: 16px;
            line-height: 1.78;
            overflow-x: hidden;
        }

        body::before {
            position: fixed;
            inset: 0;
            z-index: -2;
            content: "";
            pointer-events: none;
            background-image:
                linear-gradient(rgba(101, 151, 210, .035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(101, 151, 210, .035) 1px, transparent 1px);
            background-size: 32px 32px;
            mask-image: linear-gradient(to bottom, #000 0%, transparent 82%);
        }

        ::selection {
            color: #03101e;
            background: var(--primary-bright);
        }

        a {
            color: inherit;
            text-decoration: none;
            transition: color var(--transition), border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
        }

        button, input {
            font: inherit;
        }

        button, a {
            -webkit-tap-highlight-color: transparent;
        }

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

        :focus-visible {
            outline: 3px solid rgba(114, 204, 255, .85);
            outline-offset: 3px;
        }

        .container {
            width: min(100% - 32px, var(--container));
            max-width: var(--container);
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 1040;
            padding: 14px 0 0;
            background: linear-gradient(to bottom, rgba(5, 11, 25, .94), rgba(5, 11, 25, .58), transparent);
            backdrop-filter: blur(10px);
        }

        .nav-panel {
            min-height: 76px;
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: 20px;
            background: rgba(10, 23, 46, .86);
            box-shadow: 0 16px 48px rgba(0, 5, 18, .3), inset 0 1px rgba(255,255,255,.04);
            backdrop-filter: blur(18px);
        }

        .navbar-brand {
            display: flex;
            align-items: center;
            gap: 11px;
            max-width: 390px;
            margin-right: 22px;
            color: var(--text);
            font-size: 18px;
            font-weight: 800;
            line-height: 1.25;
            letter-spacing: -.02em;
        }

        .brand-mark {
            position: relative;
            flex: 0 0 42px;
            width: 42px;
            height: 42px;
            border: 1px solid var(--border-strong);
            border-radius: 11px 11px 4px 11px;
            background:
                linear-gradient(90deg, transparent 46%, rgba(255,255,255,.12) 46% 54%, transparent 54%),
                linear-gradient(transparent 46%, rgba(255,255,255,.12) 46% 54%, transparent 54%),
                #126cb6;
            box-shadow: 0 0 22px rgba(67, 169, 255, .25);
        }

        .brand-mark::after {
            position: absolute;
            right: 7px;
            bottom: 7px;
            width: 7px;
            height: 7px;
            content: "";
            background: var(--accent);
            box-shadow: -11px 0 var(--primary-bright), 0 -11px var(--accent-purple);
        }

        .brand-status {
            display: block;
            margin-top: 3px;
            color: var(--text-muted);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: .12em;
        }

        .nav-card-link {
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: 44px;
            margin: 0 4px;
            padding: 8px 13px !important;
            color: var(--text-soft) !important;
            border: 1px solid transparent;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 700;
        }

        .nav-card-link::before {
            width: 7px;
            height: 7px;
            content: "";
            border: 1px solid #607594;
            background: #263a5a;
            transition: var(--transition);
        }

        .nav-card-link:hover {
            color: var(--text) !important;
            border-color: var(--border);
            background: rgba(77, 145, 218, .08);
        }

        .nav-card-link:hover::before,
        .nav-card-link.active::before {
            border-color: var(--accent);
            background: var(--accent);
            box-shadow: 0 0 10px rgba(86, 224, 194, .65);
        }

        .nav-card-link.active {
            color: var(--text) !important;
            border-color: rgba(67, 169, 255, .36);
            background: rgba(42, 135, 221, .14);
        }

        .navbar-toggler {
            padding: 8px 10px;
            color: var(--text);
            border: 1px solid var(--border-strong);
            border-radius: 10px;
            box-shadow: none !important;
        }

        .toggler-lines {
            display: grid;
            gap: 4px;
        }

        .toggler-lines i {
            display: block;
            width: 21px;
            height: 2px;
            background: var(--primary-bright);
        }

        .btn-glow,
        .btn-outline-soft,
        .btn-quiet {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 46px;
            padding: 11px 19px;
            border-radius: 12px;
            font-weight: 800;
            line-height: 1.25;
            border: 1px solid transparent;
            cursor: pointer;
        }

        .btn-glow {
            color: #03111f;
            border-color: #8bd8ff;
            background: #69c8ff;
            box-shadow: 0 10px 28px rgba(49, 167, 244, .28), inset 0 1px rgba(255,255,255,.45);
        }

        .btn-glow:hover {
            color: #020c17;
            background: #88d6ff;
            box-shadow: 0 14px 36px rgba(49, 167, 244, .4);
            transform: translateY(-2px);
        }

        .btn-glow:active,
        .btn-outline-soft:active {
            transform: scale(.98);
        }

        .btn-outline-soft {
            color: var(--text);
            border-color: var(--border-strong);
            background: rgba(25, 54, 94, .34);
        }

        .btn-outline-soft:hover {
            color: #fff;
            border-color: var(--primary-bright);
            background: rgba(49, 129, 205, .2);
            box-shadow: 0 10px 26px rgba(0,0,0,.2);
            transform: translateY(-2px);
        }

        .btn-quiet {
            min-height: 40px;
            padding: 8px 13px;
            color: var(--primary-bright);
            border-color: var(--border);
            background: rgba(14, 31, 60, .55);
            font-size: 14px;
        }

        .btn-quiet:hover {
            color: #fff;
            border-color: var(--border-strong);
            background: rgba(46, 116, 184, .2);
        }

        main {
            display: block;
        }

        section {
            position: relative;
            padding: 92px 0;
        }

        .hero {
            min-height: 710px;
            padding: 52px 0 82px;
            overflow: hidden;
        }

        .hero::after {
            position: absolute;
            right: -8%;
            bottom: 8%;
            width: 46vw;
            height: 46vw;
            max-width: 640px;
            max-height: 640px;
            content: "";
            pointer-events: none;
            border: 1px solid rgba(95, 183, 255, .1);
            transform: rotate(18deg);
            background: repeating-linear-gradient(90deg, rgba(77, 165, 255, .035) 0 4px, transparent 4px 20px);
        }

        .hero-stage {
            position: relative;
            isolation: isolate;
            min-height: 565px;
            padding: 64px clamp(24px, 5vw, 70px) 50px;
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: 32px 32px 32px 6px;
            background:
                linear-gradient(118deg, rgba(14, 34, 68, .94) 0 64%, rgba(22, 49, 91, .72) 64%),
                var(--surface-solid);
            box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.055);
        }

        .hero-stage::before {
            position: absolute;
            inset: 0;
            z-index: -1;
            content: "";
            background:
                linear-gradient(135deg, transparent 0 60%, rgba(64, 159, 255, .1) 60% 61%, transparent 61%),
                radial-gradient(circle at 72% 30%, rgba(86, 224, 194, .16), transparent 22rem);
        }

        .hero-stage::after {
            position: absolute;
            top: 0;
            right: 14%;
            width: 150px;
            height: 100%;
            z-index: -1;
            content: "";
            opacity: .3;
            transform: skewX(-18deg);
            background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(96, 188, 255, .13) 12px 16px);
        }

        .pixel-kicker,
        .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            color: var(--primary-bright);
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .1em;
        }

        .pixel-kicker::before,
        .section-kicker::before {
            width: 9px;
            height: 9px;
            content: "";
            background: var(--accent);
            box-shadow: 13px 0 rgba(86, 224, 194, .35);
        }

        .hero h1 {
            max-width: 900px;
            margin: 22px 0 18px;
            font-size: clamp(42px, 6vw, 78px);
            font-weight: 900;
            line-height: 1.08;
            letter-spacing: -.055em;
            text-wrap: balance;
        }

        .hero h1 span {
            color: var(--primary-bright);
            text-shadow: 0 0 26px rgba(80, 181, 255, .18);
        }

        .hero-lead {
            max-width: 760px;
            margin: 0;
            color: #c2d0e5;
            font-size: clamp(16px, 2vw, 19px);
            line-height: 1.85;
        }

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

        .burst-badge {
            position: absolute;
            top: 44px;
            right: 48px;
            display: grid;
            place-items: center;
            width: 126px;
            height: 126px;
            padding: 20px;
            color: #071426;
            background: var(--accent-orange);
            clip-path: polygon(50% 0, 61% 17%, 79% 8%, 82% 29%, 100% 34%, 87% 50%, 100% 66%, 81% 72%, 77% 93%, 59% 83%, 48% 100%, 38% 82%, 18% 92%, 17% 71%, 0 65%, 13% 49%, 0 33%, 20% 28%, 22% 7%, 40% 17%);
            transform: rotate(8deg);
            font-size: 14px;
            font-weight: 900;
            line-height: 1.25;
            text-align: center;
            filter: drop-shadow(0 15px 28px rgba(0,0,0,.3));
        }

        .hero-console {
            display: grid;
            grid-template-columns: 1.2fr .8fr .8fr;
            gap: 12px;
            max-width: 930px;
            margin-top: 52px;
        }

        .console-cell {
            min-height: 104px;
            padding: 17px;
            border: 1px solid var(--border);
            border-radius: 14px 14px 5px 14px;
            background: rgba(5, 15, 33, .6);
            backdrop-filter: blur(9px);
        }

        .console-label {
            display: flex;
            align-items: center;
            gap: 7px;
            margin-bottom: 8px;
            color: var(--text-muted);
            font-size: 12px;
            font-weight: 700;
        }

        .status-light {
            width: 7px;
            height: 7px;
            background: var(--success);
            box-shadow: 0 0 10px rgba(98, 230, 185, .7);
        }

        .console-value {
            color: var(--text);
            font-size: 18px;
            font-weight: 850;
        }

        .console-note {
            margin-top: 3px;
            color: var(--text-soft);
            font-size: 13px;
        }

        .trust-strip {
            margin-top: -26px;
            position: relative;
            z-index: 3;
        }

        .trust-panel {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 18px 22px;
            border: 1px solid var(--border);
            border-radius: 16px;
            background: rgba(8, 20, 42, .94);
            box-shadow: var(--shadow);
        }

        .trust-item {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            color: var(--text-soft);
            font-size: 14px;
            font-weight: 700;
        }

        .trust-item b {
            color: var(--accent);
            font-size: 12px;
        }

        .section-heading {
            display: grid;
            grid-template-columns: minmax(0, 1.05fr) minmax(280px, .75fr);
            align-items: end;
            gap: 40px;
            margin-bottom: 38px;
        }

        .section-heading h2 {
            margin: 10px 0 0;
            font-size: clamp(30px, 4vw, 48px);
            font-weight: 900;
            line-height: 1.18;
            letter-spacing: -.035em;
        }

        .section-heading p {
            margin: 0;
            color: var(--text-soft);
            font-size: 16px;
        }

        .value-band {
            padding-top: 84px;
        }

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

        .glass-card {
            position: relative;
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            background: var(--surface);
            box-shadow: 0 18px 52px rgba(0, 5, 18, .26), inset 0 1px rgba(255,255,255,.045);
            backdrop-filter: blur(14px);
            transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
        }

        .glass-card:hover {
            border-color: rgba(91, 187, 255, .38);
            background: rgba(17, 37, 70, .86);
            box-shadow: var(--glow);
            transform: translateY(-3px);
        }

        .value-main {
            display: grid;
            grid-template-columns: 1fr .72fr;
            gap: 26px;
            min-height: 310px;
            padding: 34px;
        }

        .pixel-number {
            display: inline-flex;
            min-width: 44px;
            height: 32px;
            align-items: center;
            justify-content: center;
            color: var(--accent);
            border: 1px solid rgba(86, 224, 194, .3);
            background: rgba(86, 224, 194, .08);
            font-size: 12px;
            font-weight: 900;
        }

        .value-main h3,
        .value-small h3,
        .feature-stage h3,
        .scene-card h3,
        .result-main h3,
        .plan-card h3 {
            margin: 18px 0 10px;
            font-size: 24px;
            font-weight: 850;
        }

        .value-main p,
        .value-small p,
        .feature-stage p,
        .scene-card p,
        .result-main p,
        .plan-card p {
            color: var(--text-soft);
        }

        .tag-matrix {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            align-content: center;
            gap: 8px;
        }

        .tag-chip {
            padding: 10px 11px;
            color: #c4d5eb;
            border: 1px solid var(--border);
            background: rgba(5, 16, 36, .55);
            font-size: 13px;
            font-weight: 700;
            text-align: center;
        }

        .tag-chip:nth-child(2),
        .tag-chip:nth-child(5) {
            color: var(--accent);
            border-color: rgba(86, 224, 194, .25);
        }

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

        .value-small {
            min-height: 146px;
            padding: 23px;
        }

        .inline-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 10px;
            color: var(--primary-bright);
            font-size: 14px;
            font-weight: 800;
        }

        .inline-link:hover {
            color: #fff;
            gap: 12px;
        }

        .feature-band {
            background: rgba(7, 17, 37, .58);
            border-top: 1px solid rgba(131, 174, 226, .08);
            border-bottom: 1px solid rgba(131, 174, 226, .08);
        }

        .feature-layout {
            display: grid;
            grid-template-columns: 300px minmax(0, 1fr);
            gap: 22px;
        }

        .feature-index {
            display: grid;
            align-content: start;
            gap: 9px;
        }

        .feature-tab {
            width: 100%;
            padding: 16px;
            color: var(--text-soft);
            border: 1px solid var(--border);
            border-radius: 12px;
            background: rgba(12, 29, 57, .62);
            font-weight: 800;
            text-align: left;
            cursor: pointer;
            transition: var(--transition);
        }

        .feature-tab span {
            margin-right: 10px;
            color: var(--text-muted);
            font-size: 12px;
        }

        .feature-tab:hover,
        .feature-tab.active {
            color: var(--text);
            border-color: var(--border-strong);
            background: rgba(39, 105, 171, .18);
        }

        .feature-tab.active span {
            color: var(--accent);
        }

        .feature-stage {
            min-height: 415px;
            padding: 34px;
        }

        .feature-pane {
            display: none;
        }

        .feature-pane.active {
            display: block;
            animation: paneIn .26s ease both;
        }

        @keyframes paneIn {
            from { opacity: 0; transform: translateY(7px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .feature-preview {
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 15px;
            margin-top: 25px;
        }

        .preview-panel,
        .preview-list {
            min-height: 190px;
            padding: 20px;
            border: 1px solid var(--border);
            background: rgba(4, 14, 31, .57);
        }

        .preview-panel {
            border-radius: 14px 14px 4px 14px;
        }

        .preview-list {
            border-radius: 14px;
        }

        .mini-bar {
            height: 8px;
            margin: 12px 0;
            background: rgba(125, 164, 211, .12);
        }

        .mini-bar span {
            display: block;
            width: 68%;
            height: 100%;
            background: var(--primary);
            box-shadow: 0 0 12px rgba(67, 169, 255, .3);
        }

        .preview-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 12px 0;
            color: var(--text-soft);
            border-bottom: 1px dashed rgba(132, 177, 229, .16);
            font-size: 14px;
        }

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

        .preview-row em {
            color: var(--accent);
            font-style: normal;
            font-size: 12px;
        }

        .scenes-track {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            position: relative;
            gap: 20px;
        }

        .scenes-track::before {
            position: absolute;
            top: 31px;
            left: 15%;
            right: 15%;
            height: 1px;
            z-index: -1;
            content: "";
            background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
        }

        .scene-card {
            padding: 24px;
        }

        .scene-step {
            display: grid;
            place-items: center;
            width: 48px;
            height: 48px;
            color: var(--primary-bright);
            border: 1px solid var(--border-strong);
            border-radius: 3px 12px 12px 12px;
            background: #0c2141;
            box-shadow: 0 0 22px rgba(67, 169, 255, .12);
            font-size: 13px;
            font-weight: 900;
        }

        .scene-meta {
            margin-top: 18px;
            color: var(--accent);
            font-size: 12px;
            font-weight: 850;
            letter-spacing: .08em;
        }

        .results-band {
            background: linear-gradient(90deg, rgba(11, 29, 57, .65), rgba(5, 11, 25, .2));
        }

        .results-layout {
            display: grid;
            grid-template-columns: 1.45fr .55fr;
            gap: 18px;
        }

        .result-main {
            min-height: 430px;
            padding: 38px;
        }

        .result-main::after {
            position: absolute;
            right: -60px;
            bottom: -70px;
            width: 280px;
            height: 280px;
            content: "";
            border: 36px solid rgba(67, 169, 255, .07);
            transform: rotate(25deg);
        }

        .result-path {
            display: grid;
            gap: 12px;
            max-width: 640px;
            margin-top: 28px;
        }

        .path-row {
            display: grid;
            grid-template-columns: 86px 1fr auto;
            align-items: center;
            gap: 15px;
            padding: 14px 16px;
            border-left: 3px solid var(--primary);
            background: rgba(4, 14, 31, .52);
        }

        .path-row b {
            color: var(--primary-bright);
            font-size: 13px;
        }

        .path-row span {
            color: var(--text-soft);
            font-size: 14px;
        }

        .path-row small {
            color: var(--accent);
        }

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

        .result-mini {
            padding: 23px;
        }

        .result-mini strong {
            display: block;
            margin: 12px 0 7px;
            font-size: 20px;
        }

        .result-mini p {
            margin: 0;
            color: var(--text-soft);
            font-size: 14px;
        }

        .quote-mark {
            color: var(--accent-purple);
            font-size: 30px;
            line-height: 1;
        }

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

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

        .news-item {
            display: grid;
            grid-template-columns: 110px minmax(0, 1fr) auto;
            align-items: center;
            gap: 20px;
            padding: 22px 4px;
            border-bottom: 1px solid var(--border);
        }

        .news-date {
            color: var(--text-muted);
            font-size: 13px;
        }

        .news-title {
            color: var(--text);
            font-size: 17px;
            font-weight: 800;
        }

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

        .news-summary {
            display: block;
            margin-top: 4px;
            color: var(--text-soft);
            font-size: 14px;
        }

        .status-badge,
        .soft-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            width: fit-content;
            padding: 5px 9px;
            color: var(--accent);
            border: 1px solid rgba(86, 224, 194, .26);
            border-radius: 4px;
            background: rgba(86, 224, 194, .08);
            font-size: 11px;
            font-weight: 850;
        }

        .news-recommend {
            padding: 28px;
            background:
                linear-gradient(145deg, rgba(33, 85, 140, .18), transparent 55%),
                var(--surface);
        }

        .news-recommend h3 {
            margin: 18px 0 10px;
            font-size: 27px;
            font-weight: 900;
        }

        .news-recommend p {
            color: var(--text-soft);
        }

        .recommend-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 20px 0;
        }

        .plans-band {
            border-top: 1px solid rgba(131, 174, 226, .08);
            border-bottom: 1px solid rgba(131, 174, 226, .08);
            background: rgba(8, 21, 43, .54);
        }

        .plans-layout {
            display: grid;
            grid-template-columns: .8fr 1.25fr .8fr;
            align-items: stretch;
            gap: 18px;
        }

        .plan-card {
            padding: 28px;
        }

        .plan-card.featured {
            border-color: var(--border-strong);
            background: rgba(17, 42, 78, .9);
            box-shadow: var(--glow);
            transform: translateY(-10px);
        }

        .plan-card.featured:hover {
            transform: translateY(-13px);
        }

        .plan-price {
            margin: 22px 0;
            color: var(--primary-bright);
            font-size: 30px;
            font-weight: 900;
        }

        .plan-price small {
            color: var(--text-muted);
            font-size: 13px;
            font-weight: 600;
        }

        .plan-list {
            display: grid;
            gap: 11px;
            padding: 0;
            margin: 0 0 24px;
            list-style: none;
        }

        .plan-list li {
            position: relative;
            padding-left: 21px;
            color: var(--text-soft);
            font-size: 14px;
        }

        .plan-list li::before {
            position: absolute;
            top: .65em;
            left: 0;
            width: 8px;
            height: 8px;
            content: "";
            border: 1px solid var(--accent);
            background: rgba(86, 224, 194, .15);
        }

        .plan-note {
            margin-top: 18px;
            padding-top: 15px;
            color: var(--text-muted);
            border-top: 1px dashed var(--border);
            font-size: 12px;
        }

        .faq-layout {
            display: grid;
            grid-template-columns: .68fr 1.32fr;
            gap: 34px;
        }

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

        .faq-intro h2 {
            margin: 11px 0 14px;
            font-size: clamp(32px, 4vw, 48px);
            font-weight: 900;
        }

        .faq-intro p {
            color: var(--text-soft);
        }

        .accordion {
            display: grid;
            gap: 12px;
            --bs-accordion-bg: transparent;
            --bs-accordion-border-color: transparent;
        }

        .accordion-item {
            overflow: hidden;
            color: var(--text);
            border: 1px solid var(--border) !important;
            border-radius: 14px !important;
            background: rgba(12, 29, 57, .68);
            box-shadow: inset 0 1px rgba(255,255,255,.035);
        }

        .accordion-button {
            padding: 20px 22px;
            color: var(--text);
            background: transparent;
            font-weight: 800;
            box-shadow: none !important;
        }

        .accordion-button:not(.collapsed) {
            color: var(--primary-bright);
            background: rgba(44, 117, 184, .12);
        }

        .accordion-button::after {
            filter: invert(85%) sepia(23%) saturate(817%) hue-rotate(174deg);
        }

        .accordion-body {
            padding: 2px 22px 22px;
            color: var(--text-soft);
            line-height: 1.85;
        }

        .cta-section {
            padding-top: 54px;
        }

        .cta-panel {
            position: relative;
            display: grid;
            grid-template-columns: 1fr .9fr;
            gap: 42px;
            padding: clamp(28px, 5vw, 56px);
            overflow: hidden;
            border: 1px solid var(--border-strong);
            border-radius: 28px 28px 6px 28px;
            background:
                linear-gradient(115deg, rgba(20, 58, 103, .96), rgba(11, 30, 59, .93));
            box-shadow: var(--glow);
        }

        .cta-panel::after {
            position: absolute;
            right: -100px;
            bottom: -170px;
            width: 390px;
            height: 390px;
            content: "";
            border: 1px solid rgba(105, 200, 255, .2);
            border-radius: 50%;
            box-shadow: 0 0 0 45px rgba(105, 200, 255, .025), 0 0 0 90px rgba(105, 200, 255, .018);
        }

        .cta-copy,
        .reminder-form {
            position: relative;
            z-index: 2;
        }

        .cta-copy h2 {
            margin: 12px 0 14px;
            font-size: clamp(31px, 4vw, 48px);
            font-weight: 900;
            line-height: 1.18;
        }

        .cta-copy p {
            color: #c6d6e9;
        }

        .form-label {
            margin-bottom: 8px;
            color: var(--text);
            font-size: 14px;
            font-weight: 800;
        }

        .form-control {
            min-height: 50px;
            color: var(--text);
            border: 1px solid var(--border);
            border-radius: 11px;
            background: rgba(4, 15, 34, .72);
            box-shadow: none;
        }

        .form-control::placeholder {
            color: #7487a4;
        }

        .form-control:hover {
            border-color: rgba(108, 179, 234, .4);
        }

        .form-control:focus {
            color: var(--text);
            border-color: var(--primary-bright);
            background: rgba(4, 15, 34, .88);
            box-shadow: 0 0 0 4px rgba(67, 169, 255, .14);
        }

        .form-hint {
            margin: 8px 0 14px;
            color: #94a8c3;
            font-size: 12px;
        }

        .form-message {
            display: none;
            margin-top: 12px;
            padding: 10px 12px;
            border-radius: 8px;
            font-size: 13px;
        }

        .form-message.success {
            display: block;
            color: #b8f7df;
            border: 1px solid rgba(98, 230, 185, .28);
            background: rgba(98, 230, 185, .09);
        }

        .form-message.error {
            display: block;
            color: #ffc2ca;
            border: 1px solid rgba(255, 127, 141, .3);
            background: rgba(255, 127, 141, .09);
        }

        .form-message.processing {
            display: block;
            color: #cceaff;
            border: 1px solid rgba(105, 200, 255, .28);
            background: rgba(105, 200, 255, .09);
        }

        .site-footer {
            padding: 72px 0 100px;
            border-top: 1px solid rgba(131, 174, 226, .1);
            background: #040916;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.35fr .65fr .8fr;
            gap: 55px;
        }

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

        .footer-logo {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            margin-bottom: 17px;
            font-size: 20px;
            font-weight: 900;
        }

        .footer-brand p {
            color: var(--text-soft);
        }

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

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

        .footer-links a {
            width: fit-content;
            color: var(--text-soft);
            font-size: 14px;
        }

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

        .privacy-box {
            padding: 16px;
            color: var(--text-soft);
            border: 1px solid var(--border);
            background: rgba(10, 23, 46, .58);
            font-size: 13px;
        }

        .footer-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            margin-top: 42px;
            padding-top: 22px;
            color: var(--text-muted);
            border-top: 1px solid var(--border);
            font-size: 12px;
        }

        .floating-cta {
            position: fixed;
            left: 50%;
            bottom: 16px;
            z-index: 1030;
            display: flex;
            align-items: center;
            gap: 18px;
            width: min(calc(100% - 32px), 720px);
            padding: 11px 12px 11px 18px;
            border: 1px solid var(--border-strong);
            border-radius: 16px;
            background: rgba(7, 22, 45, .94);
            box-shadow: 0 18px 55px rgba(0, 3, 14, .5), 0 0 28px rgba(49, 153, 236, .12);
            backdrop-filter: blur(16px);
            transform: translateX(-50%);
            transition: opacity var(--transition), transform var(--transition);
        }

        .floating-cta.is-hidden {
            opacity: 0;
            pointer-events: none;
            transform: translate(-50%, 20px);
        }

        .floating-copy {
            flex: 1;
            min-width: 0;
            font-size: 13px;
            line-height: 1.4;
        }

        .floating-copy strong {
            display: block;
            color: var(--text);
        }

        .floating-copy span {
            color: var(--text-muted);
        }

        .floating-close {
            display: grid;
            place-items: center;
            flex: 0 0 34px;
            width: 34px;
            height: 34px;
            color: var(--text-soft);
            border: 1px solid var(--border);
            border-radius: 8px;
            background: transparent;
        }

        .floating-close:hover {
            color: var(--text);
            border-color: var(--border-strong);
            background: rgba(67, 169, 255, .1);
        }

        .pixel-corner::before,
        .pixel-corner::after {
            position: absolute;
            width: 8px;
            height: 8px;
            content: "";
            background: var(--primary);
        }

        .pixel-corner::before {
            top: 9px;
            right: 9px;
        }

        .pixel-corner::after {
            top: 21px;
            right: 9px;
            opacity: .35;
        }

        @media (max-width: 1199.98px) {
            .navbar-brand {
                max-width: 330px;
                font-size: 16px;
            }

            .hero h1 {
                max-width: 780px;
            }

            .burst-badge {
                right: 32px;
                width: 110px;
                height: 110px;
            }

            .plans-layout {
                grid-template-columns: .82fr 1.15fr .82fr;
            }
        }

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

            .navbar-collapse {
                margin-top: 12px;
                padding: 12px;
                border-top: 1px solid var(--border);
            }

            .nav-card-link {
                margin: 4px 0;
            }

            .nav-cta {
                width: 100%;
                margin-top: 9px;
            }

            .hero {
                min-height: auto;
                padding-top: 38px;
            }

            .hero-stage {
                min-height: 590px;
                padding-top: 54px;
            }

            .hero h1 {
                max-width: 680px;
                padding-right: 70px;
            }

            .burst-badge {
                top: 24px;
                right: 22px;
                width: 92px;
                height: 92px;
                font-size: 12px;
            }

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

            .hero-console .console-cell:first-child {
                grid-column: 1 / -1;
            }

            .section-heading,
            .cta-panel {
                grid-template-columns: 1fr;
                gap: 22px;
            }

            .value-layout,
            .results-layout,
            .news-layout,
            .faq-layout {
                grid-template-columns: 1fr;
            }

            .feature-layout {
                grid-template-columns: 240px minmax(0, 1fr);
            }

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

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

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

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

            .plan-card.featured {
                grid-column: 1 / -1;
                grid-row: 1;
                transform: none;
            }

            .plan-card.featured:hover {
                transform: translateY(-3px);
            }

            .faq-intro {
                position: static;
            }

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

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

        @media (max-width: 767.98px) {
            body {
                line-height: 1.72;
            }

            body::before {
                background-size: 24px 24px;
            }

            .container {
                width: min(100% - 24px, var(--container));
            }

            .site-header {
                padding-top: 8px;
            }

            .nav-panel {
                min-height: 64px;
                border-radius: 14px;
                backdrop-filter: blur(7px);
            }

            .navbar-brand {
                max-width: calc(100% - 58px);
                margin-right: 8px;
                font-size: 14px;
            }

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

            .brand-status {
                display: none;
            }

            section {
                padding: 62px 0;
            }

            .hero {
                padding: 28px 0 68px;
            }

            .hero-stage {
                min-height: auto;
                padding: 102px 22px 30px;
                border-radius: 22px 22px 22px 5px;
                backdrop-filter: none;
            }

            .hero h1 {
                padding-right: 0;
                font-size: clamp(36px, 11vw, 53px);
                letter-spacing: -.045em;
            }

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

            .burst-badge {
                top: 16px;
                right: 18px;
                width: 82px;
                height: 82px;
                padding: 14px;
                font-size: 11px;
            }

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

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

            .hero-console {
                grid-template-columns: 1fr;
                margin-top: 34px;
            }

            .hero-console .console-cell:first-child {
                grid-column: auto;
            }

            .trust-panel {
                justify-content: flex-start;
                padding: 16px;
            }

            .trust-item {
                width: calc(50% - 8px);
                font-size: 12px;
            }

            .section-heading {
                margin-bottom: 28px;
            }

            .section-heading h2 {
                font-size: 32px;
            }

            .value-main,
            .feature-preview {
                grid-template-columns: 1fr;
            }

            .value-main,
            .feature-stage {
                padding: 24px;
            }

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

            .feature-index {
                display: flex;
                overflow-x: auto;
                padding-bottom: 6px;
                scrollbar-width: thin;
            }

            .feature-tab {
                flex: 0 0 auto;
                width: auto;
                white-space: nowrap;
            }

            .result-main {
                min-height: auto;
                padding: 26px;
            }

            .path-row {
                grid-template-columns: 70px 1fr;
            }

            .path-row small {
                grid-column: 2;
            }

            .result-side,
            .plans-layout {
                grid-template-columns: 1fr;
            }

            .plan-card.featured {
                grid-column: auto;
            }

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

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

            .news-item > div:nth-child(2) {
                grid-column: 1 / -1;
                grid-row: 2;
            }

            .news-item .status-badge {
                grid-column: 2;
                grid-row: 1;
            }

            .cta-panel {
                padding: 27px 21px;
                border-radius: 20px 20px 5px 20px;
            }

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

            .footer-brand {
                grid-column: auto;
            }

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

            .floating-cta {
                bottom: 9px;
                gap: 9px;
                width: calc(100% - 18px);
                padding-left: 12px;
            }

            .floating-copy span {
                display: none;
            }

            .floating-cta .btn-glow {
                min-height: 40px;
                padding: 9px 12px;
                font-size: 13px;
            }
        }

        @media (max-width: 575.98px) {
            .navbar-brand {
                font-size: 13px;
            }

            .brand-mark {
                display: none;
            }

            .hero-stage {
                padding-inline: 18px;
            }

            .hero h1 {
                font-size: 36px;
            }

            .trust-item {
                width: 100%;
            }

            .value-main,
            .value-small,
            .feature-stage,
            .scene-card,
            .news-recommend,
            .plan-card {
                padding: 21px;
            }

            .tag-matrix {
                grid-template-columns: 1fr 1fr;
            }

            .accordion-button {
                padding: 17px;
                font-size: 15px;
            }

            .accordion-body {
                padding: 0 17px 18px;
                font-size: 14px;
            }

            .floating-copy {
                font-size: 12px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            *, *::before, *::after {
                transition-duration: .01ms !important;
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
            }
        }

/* roulang page: category1 */
:root{
 --bg:#050b19;--bg-soft:#081329;--surface:rgba(13,29,58,.76);--surface-solid:#0d1d3a;
 --surface-light:rgba(25,48,87,.68);--primary:#43a9ff;--primary-bright:#72ccff;
 --primary-dark:#1678d1;--accent:#56e0c2;--accent-purple:#a696ff;--accent-orange:#ffb45d;
 --text:#f1f7ff;--text-soft:#aebdd4;--text-muted:#7f91ad;--border:rgba(133,180,239,.2);
 --border-strong:rgba(91,187,255,.48);--danger:#ff7f8d;--success:#62e6b9;
 --radius-sm:10px;--radius:18px;--radius-lg:28px;--shadow:0 24px 65px rgba(0,6,20,.38);
 --glow:0 0 0 1px rgba(89,183,255,.2),0 14px 38px rgba(26,142,255,.22);
 --transition:180ms ease;--container:1220px
}
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;min-width:320px;color:var(--text);background:radial-gradient(circle at 18% 12%,rgba(48,133,255,.14),transparent 26rem),radial-gradient(circle at 84% 30%,rgba(93,73,206,.12),transparent 30rem),#050b19;font-family:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",system-ui,sans-serif;font-size:16px;line-height:1.78;overflow-x:hidden}
body:before{position:fixed;inset:0;z-index:-2;content:"";pointer-events:none;background-image:linear-gradient(rgba(101,151,210,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(101,151,210,.035) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,#000 0%,transparent 82%)}
a{color:inherit;text-decoration:none;transition:color var(--transition),border-color var(--transition),background var(--transition),transform var(--transition),box-shadow var(--transition)}
button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}img{display:block;max-width:100%}
.container{width:min(100% - 32px,var(--container));max-width:var(--container)}
.site-header{position:sticky;top:0;z-index:1040;padding:14px 0 0;background:linear-gradient(to bottom,rgba(5,11,25,.94),rgba(5,11,25,.58),transparent);backdrop-filter:blur(10px)}
.nav-panel{min-height:76px;padding:10px 12px;border:1px solid var(--border);border-radius:20px;background:rgba(10,23,46,.86);box-shadow:0 16px 48px rgba(0,5,18,.3),inset 0 1px rgba(255,255,255,.04);backdrop-filter:blur(18px)}
.navbar-brand{display:flex;align-items:center;gap:11px;max-width:390px;margin-right:22px;color:var(--text);font-size:18px;font-weight:800;line-height:1.25;letter-spacing:-.02em}
.brand-mark{position:relative;flex:0 0 42px;width:42px;height:42px;border:1px solid var(--border-strong);border-radius:11px 11px 4px 11px;background:linear-gradient(90deg,transparent 46%,rgba(255,255,255,.12) 46% 54%,transparent 54%),linear-gradient(transparent 46%,rgba(255,255,255,.12) 46% 54%,transparent 54%),#126cb6;box-shadow:0 0 22px rgba(67,169,255,.25)}
.brand-mark:after{position:absolute;right:7px;bottom:7px;width:7px;height:7px;content:"";background:var(--accent);box-shadow:-11px 0 var(--primary-bright),0 -11px var(--accent-purple)}
.brand-status{display:block;margin-top:3px;color:var(--text-muted);font-size:11px;font-weight:600;letter-spacing:.12em}
.nav-card-link{display:flex;align-items:center;gap:8px;min-height:44px;margin:0 4px;padding:8px 13px!important;color:var(--text-soft)!important;border:1px solid transparent;border-radius:12px;font-size:14px;font-weight:700}
.nav-card-link:before{width:7px;height:7px;content:"";border:1px solid #607594;background:#263a5a;transition:var(--transition)}
.nav-card-link:hover{color:var(--text)!important;border-color:var(--border);background:rgba(77,145,218,.08)}
.nav-card-link:hover:before,.nav-card-link.active:before{border-color:var(--accent);background:var(--accent);box-shadow:0 0 10px rgba(86,224,194,.65)}
.nav-card-link.active{color:var(--text)!important;border-color:rgba(67,169,255,.36);background:rgba(42,135,221,.14)}
.navbar-toggler{padding:8px 10px;color:var(--text);border:1px solid var(--border);border-radius:10px}
.navbar-toggler:focus{box-shadow:0 0 0 3px rgba(67,169,255,.24)}
.toggler-lines{display:grid;gap:4px}.toggler-lines i{display:block;width:21px;height:2px;background:var(--primary-bright)}
.btn-glow,.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:10px 18px;border-radius:12px;font-size:14px;font-weight:800;transition:var(--transition)}
.btn-glow{color:#031326;background:var(--primary);box-shadow:0 0 0 1px rgba(114,204,255,.55),0 0 24px rgba(67,169,255,.3)}
.btn-glow:hover{color:#031326;background:var(--primary-bright);transform:translateY(-2px);box-shadow:0 0 0 1px var(--primary-bright),0 12px 30px rgba(67,169,255,.34)}
.btn-glow:active{transform:translateY(0) scale(.98)}
.btn-outline{color:var(--text-soft);border:1px solid var(--border-strong);background:rgba(11,30,58,.45)}
.btn-outline:hover{color:var(--text);border-color:var(--primary);background:rgba(67,169,255,.1)}
.btn-glow:focus-visible,.btn-outline:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(86,224,194,.65);outline-offset:3px}
.page-main{padding:32px 0 90px}.crumbs{display:flex;gap:9px;align-items:center;margin:14px 0 25px;color:var(--text-muted);font-size:13px}.crumbs a:hover{color:var(--primary-bright)}.crumb-sep{color:#506887}
.category-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:end;padding:52px 52px 46px;border:1px solid var(--border-strong);border-radius:var(--radius-lg);background:linear-gradient(110deg,rgba(16,44,85,.9),rgba(11,24,52,.75));box-shadow:var(--shadow)}
.category-hero:after{position:absolute;right:7%;top:16%;width:130px;height:130px;content:"";opacity:.4;background-image:radial-gradient(var(--primary) 1px,transparent 1px);background-size:12px 12px}
.eyebrow,.section-kicker{color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.category-hero h1{position:relative;z-index:1;margin:12px 0 13px;font-size:clamp(32px,5vw,58px);line-height:1.14;letter-spacing:-.045em}
.category-hero p{max-width:680px;margin:0;color:var(--text-soft);font-size:17px}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.tag{display:inline-flex;align-items:center;padding:5px 10px;border:1px solid var(--border);border-radius:7px;color:var(--text-soft);background:rgba(4,15,35,.42);font-size:12px}.tag strong{color:var(--accent);margin-right:5px}
.hero-stats{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat-box{padding:18px;border:1px solid var(--border);border-radius:14px;background:rgba(4,16,37,.56)}.stat-box b{display:block;color:var(--primary-bright);font-size:28px;line-height:1.1}.stat-box span{display:block;margin-top:7px;color:var(--text-muted);font-size:12px}
.filter-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:28px 0;padding:15px;border:1px solid var(--border);border-radius:16px;background:rgba(13,29,58,.58)}.filter-label{margin-right:auto;color:var(--text-soft);font-size:14px;font-weight:700}.filter-btn{padding:8px 13px;color:var(--text-muted);border:1px solid var(--border);border-radius:9px;background:transparent;font-size:13px;cursor:pointer}.filter-btn:hover,.filter-btn.active{color:var(--text);border-color:var(--primary);background:rgba(67,169,255,.13)}
.content-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:25px}.content-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:17px}.topic-card{position:relative;overflow:hidden;padding:0;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:0 14px 36px rgba(0,5,20,.22);transition:var(--transition)}.topic-card:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:var(--glow)}.topic-card.featured{grid-row:span 2}.topic-visual{position:relative;height:155px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,#102c58,#101b43 55%,#1b2251)}.featured .topic-visual{height:245px}.topic-visual:before{position:absolute;inset:22px;content:"";border:1px solid rgba(114,204,255,.25);background:linear-gradient(90deg,transparent 49%,rgba(114,204,255,.1) 50%,transparent 51%),linear-gradient(transparent 49%,rgba(114,204,255,.1) 50%,transparent 51%);background-size:24px 24px}.pixel-label{position:absolute;left:15px;top:15px;padding:4px 8px;color:#031326;background:var(--accent);font-size:11px;font-weight:800;letter-spacing:.08em}.topic-symbol{position:absolute;right:22px;bottom:18px;color:rgba(114,204,255,.75);font-size:42px;font-weight:900}.topic-body{padding:21px}.topic-meta{display:flex;justify-content:space-between;gap:10px;color:var(--text-muted);font-size:12px}.topic-card h2,.topic-card h3{margin:10px 0 8px;font-size:20px;line-height:1.35}.topic-card p{margin:0;color:var(--text-soft);font-size:14px;line-height:1.7}.topic-link{display:inline-flex;margin-top:17px;color:var(--primary-bright);font-size:13px;font-weight:800}.topic-link:hover{color:var(--accent);gap:6px}
.side-stack{display:grid;gap:17px;align-content:start}.side-card{padding:22px;border:1px solid var(--border);border-radius:var(--radius);background:rgba(12,27,55,.68)}.side-card h2{margin:0 0 15px;font-size:17px}.side-tags{display:flex;flex-wrap:wrap;gap:8px}.side-tags a{padding:5px 9px;color:var(--text-soft);border:1px solid var(--border);border-radius:7px;font-size:12px}.side-tags a:hover{color:var(--accent);border-color:var(--accent)}.update-list{margin:0;padding:0;list-style:none}.update-list li{padding:11px 0;border-bottom:1px solid rgba(133,180,239,.12);font-size:13px}.update-list li:last-child{border:0}.update-list span{display:block;color:var(--text-muted);font-size:11px}.side-cta{background:linear-gradient(145deg,rgba(28,79,132,.65),rgba(18,30,69,.75))}.side-cta p{margin:0 0 16px;color:var(--text-soft);font-size:13px}
.section{padding-top:75px}.section-heading{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:25px}.section-heading h2{margin:7px 0 0;font-size:clamp(25px,3vw,36px);line-height:1.25}.section-heading p{max-width:540px;margin:0;color:var(--text-muted);font-size:14px}
.accordion-item{margin-bottom:10px;border:1px solid var(--border)!important;border-radius:13px!important;overflow:hidden;background:rgba(13,29,58,.65)!important}.accordion-button{color:var(--text)!important;background:transparent!important;box-shadow:none!important;font-weight:700}.accordion-button:after{filter:invert(1) opacity(.65)}.accordion-body{padding-top:0;color:var(--text-soft);font-size:14px}.accordion-button:not(.collapsed){color:var(--primary-bright)!important}
.cta-panel{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:32px;border:1px solid var(--border-strong);border-radius:var(--radius-lg);background:linear-gradient(100deg,rgba(21,69,119,.72),rgba(25,35,78,.58));box-shadow:var(--shadow)}.cta-panel h2{margin:7px 0;font-size:28px}.cta-panel p{margin:0;color:var(--text-soft);font-size:14px}.notice-form{display:flex;gap:9px;min-width:390px}.notice-form input{width:100%;min-height:46px;padding:10px 13px;color:var(--text);border:1px solid var(--border-strong);border-radius:11px;background:rgba(3,13,30,.65)}.notice-form input::placeholder{color:#7185a3}.form-note{margin-top:7px;color:var(--text-muted);font-size:11px}
.site-footer{padding:65px 0 25px;border-top:1px solid rgba(133,180,239,.12);background:rgba(3,9,22,.42)}.footer-grid{display:grid;grid-template-columns:1.5fr .7fr 1fr;gap:50px}.footer-logo{display:flex;align-items:center;gap:10px;font-weight:800}.footer-logo .brand-mark{transform:scale(.72);transform-origin:left center;margin-right:-8px}.footer-brand p{max-width:480px;margin:13px 0 0;color:var(--text-muted);font-size:13px}.footer-title{margin-bottom:13px;color:var(--text-soft);font-size:13px;font-weight:800}.footer-links{display:grid;gap:8px;color:var(--text-muted);font-size:13px}.footer-links a:hover{color:var(--primary-bright)}.privacy-box{padding:13px;color:var(--text-muted);border:1px solid var(--border);border-radius:10px;background:rgba(13,29,58,.38);font-size:12px}.footer-bottom{display:flex;justify-content:space-between;gap:15px;margin-top:45px;padding-top:18px;border-top:1px solid rgba(133,180,239,.12);color:#647895;font-size:11px}
.empty-state{display:none;padding:38px;text-align:center;border:1px dashed var(--border-strong);border-radius:16px;color:var(--text-muted);background:rgba(13,29,58,.32)}.empty-state strong{display:block;color:var(--text-soft);margin-bottom:5px}
@media(max-width:992px){.navbar-brand{margin-right:5px}.category-hero{grid-template-columns:1fr;padding:38px}.content-layout{grid-template-columns:1fr}.side-stack{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media(max-width:768px){.site-header{padding-top:8px}.nav-panel{min-height:64px}.navbar-collapse{padding:15px 4px 5px}.nav-card-link{margin:4px 0}.nav-cta{width:100%;margin-top:8px}.category-hero{padding:30px 23px}.category-hero h1{font-size:35px}.hero-stats{max-width:430px}.content-grid{grid-template-columns:1fr}.topic-card.featured{grid-row:auto}.featured .topic-visual{height:190px}.side-stack{grid-template-columns:1fr}.section{padding-top:55px}.cta-panel{display:block}.notice-form{min-width:0;margin-top:20px}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:6px}}
@media(max-width:576px){body{font-size:15px}.container{width:min(100% - 22px,var(--container))}.crumbs{margin:10px 0 17px}.category-hero{border-radius:19px;padding:25px 18px}.category-hero h1{font-size:30px}.category-hero p{font-size:15px}.hero-stats{gap:7px}.stat-box{padding:13px}.stat-box b{font-size:22px}.filter-bar{align-items:stretch}.filter-label{width:100%;margin-bottom:1px}.filter-btn{flex:1}.topic-body{padding:17px}.cta-panel{padding:25px 19px}.cta-panel h2{font-size:23px}.notice-form{display:block}.notice-form .btn-glow{width:100%;margin-top:9px}}