/* roulang page: index */
:root {
            --bg: #0d0a12;
            --bg-2: #120d18;
            --panel: #15111d;
            --panel-2: #1e1728;
            --line: rgba(255, 255, 255, 0.09);
            --text: #f5eefb;
            --muted: #b9aec7;
            --pink: #ff3d9a;
            --violet: #a855f7;
            --amber: #ffb020;
            --green: #20e3b2;
            --danger: #ff5a5f;
            --shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            min-height: 100vh;
            color: var(--text);
            background:
                linear-gradient(180deg, #0d0a12 0%, #110d17 44%, #0d0a12 100%);
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
            line-height: 1.7;
            overflow-x: hidden;
        }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            z-index: -2;
            pointer-events: none;
            background:
                linear-gradient(135deg, rgba(255, 61, 154, 0.11) 0%, rgba(255, 61, 154, 0) 34%),
                linear-gradient(300deg, rgba(168, 85, 247, 0.11) 0%, rgba(168, 85, 247, 0) 38%),
                linear-gradient(180deg, rgba(13, 10, 18, 0.1) 0%, rgba(13, 10, 18, 0.1) 100%);
        }

        body::after {
            content: "";
            position: fixed;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            opacity: 0.16;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
            background-size: 36px 36px;
            mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.96), transparent 92%);
        }

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

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

        button,
        input {
            font: inherit;
        }

        button,
        input,
        select,
        textarea {
            outline: none;
        }

        :focus-visible {
            outline: 2px solid rgba(255, 61, 154, 0.76);
            outline-offset: 3px;
        }

        main section[id] {
            scroll-margin-top: 110px;
        }

        .container {
            width: min(100%, 1240px);
            margin-inline: auto;
            padding-inline: clamp(16px, 3vw, 24px);
        }

        .site-header {
            transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
        }

        .site-header .nav-shell {
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(17, 13, 24, 0.52);
            backdrop-filter: blur(18px);
        }

        .site-header.is-solid {
            background: rgba(13, 10, 18, 0.92);
            box-shadow: 0 14px 32px rgba(0, 0, 0, 0.42);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .site-header.is-solid .nav-shell {
            background: rgba(18, 15, 25, 0.84);
            border-color: rgba(255, 255, 255, 0.06);
        }

        .brand-mark {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            font-weight: 800;
            letter-spacing: 0;
        }

        .brand-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 2.65rem;
            height: 1.78rem;
            padding: 0 0.7rem;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(255, 61, 154, 0.26), rgba(168, 85, 247, 0.26));
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #fff;
            font-size: 0.76rem;
            line-height: 1;
        }

        .nav-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.62rem 0.88rem;
            border-radius: 999px;
            color: rgba(245, 238, 251, 0.88);
            transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
        }

        .nav-link:hover,
        .nav-link:focus-visible {
            background: rgba(255, 255, 255, 0.07);
            color: #fff;
            transform: translateY(-1px);
        }

        .nav-link.active {
            background: linear-gradient(135deg, rgba(255, 61, 154, 0.18), rgba(168, 85, 247, 0.16));
            border: 1px solid rgba(255, 61, 154, 0.26);
            color: #fff;
        }

        .nav-search {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            min-width: 250px;
            padding: 0.56rem 0.82rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.045);
            border: 1px solid rgba(255, 255, 255, 0.085);
            transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
        }

        .nav-search:focus-within {
            border-color: rgba(255, 61, 154, 0.42);
            box-shadow: 0 0 0 1px rgba(255, 61, 154, 0.14);
            background: rgba(255, 255, 255, 0.055);
        }

        .nav-search input {
            width: 100%;
            background: transparent;
            border: 0;
            color: var(--text);
        }

        .nav-search input::placeholder {
            color: rgba(185, 174, 199, 0.76);
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.55rem;
            border-radius: 999px;
            padding: 0.88rem 1.2rem;
            font-weight: 700;
            transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease, filter 0.2s ease;
        }

        .btn:hover,
        .btn:focus-visible {
            transform: translateY(-1px);
        }

        .btn-primary {
            color: #fff;
            background: linear-gradient(135deg, var(--pink), var(--violet));
            box-shadow: 0 18px 30px rgba(255, 61, 154, 0.18);
        }

        .btn-primary:hover {
            box-shadow: 0 22px 34px rgba(255, 61, 154, 0.28), 0 0 0 1px rgba(255, 61, 154, 0.18);
        }

        .btn-secondary {
            color: var(--text);
            background: rgba(255, 255, 255, 0.045);
            border: 1px solid rgba(255, 255, 255, 0.095);
        }

        .btn-secondary:hover {
            border-color: rgba(255, 61, 154, 0.28);
            background: rgba(255, 61, 154, 0.08);
        }

        .btn-soft {
            color: var(--muted);
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .btn-soft:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.04);
        }

        .badge-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.42rem;
            padding: 0.34rem 0.72rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.045);
            border: 1px solid rgba(255, 255, 255, 0.09);
            color: #eee;
            font-size: 0.82rem;
            line-height: 1;
        }

        .card-panel {
            position: relative;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
            border: 1px solid rgba(255, 255, 255, 0.085);
            border-radius: 22px;
            box-shadow: var(--shadow);
            overflow: hidden;
        }

        .card-panel::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            opacity: 0.55;
            background: linear-gradient(135deg, rgba(255, 61, 154, 0.16) 0%, rgba(255, 61, 154, 0) 36%, rgba(168, 85, 247, 0.12) 72%, rgba(168, 85, 247, 0) 100%);
        }

        .hero-bg {
            position: relative;
            background:
                linear-gradient(180deg, rgba(22, 17, 31, 0.96), rgba(13, 10, 18, 0.96)),
                linear-gradient(135deg, rgba(255, 61, 154, 0.1), transparent 33%),
                linear-gradient(300deg, rgba(168, 85, 247, 0.12), transparent 42%);
            overflow: hidden;
        }

        .hero-bg::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.04) 10%, transparent 22%, rgba(255, 61, 154, 0.05) 42%, transparent 58%, rgba(168, 85, 247, 0.05) 78%, transparent 92%);
        }

        .task-card {
            position: relative;
            padding: 1rem;
            border-radius: 18px;
            background: linear-gradient(180deg, rgba(30, 23, 40, 0.96), rgba(21, 17, 29, 0.98));
            border: 1px solid rgba(255, 255, 255, 0.075);
            overflow: hidden;
        }

        .task-card::after {
            content: "";
            position: absolute;
            left: -12%;
            right: -12%;
            top: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(255, 61, 154, 0.9), rgba(168, 85, 247, 0.8), transparent);
            opacity: 0.75;
        }

        .progress {
            height: 5px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.07);
            overflow: hidden;
        }

        .progress > span {
            display: block;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--pink), var(--violet), var(--green));
        }

        .mini-panel {
            padding: 1rem;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.045);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .step-card {
            position: relative;
            padding: 1.2rem;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.035);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .step-index {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.2rem;
            height: 2.2rem;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(255, 61, 154, 0.22), rgba(168, 85, 247, 0.22));
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #fff;
            font-weight: 800;
        }

        .timeline-line {
            position: absolute;
            top: 2.3rem;
            left: calc(16.666% + 1rem);
            right: calc(16.666% + 1rem);
            height: 2px;
            background: linear-gradient(90deg, rgba(255, 61, 154, 0.55), rgba(168, 85, 247, 0.55), rgba(32, 227, 178, 0.45));
            opacity: 0.8;
        }

        .scenario-tab {
            width: 100%;
            text-align: left;
            padding: 1rem;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.035);
            border: 1px solid rgba(255, 255, 255, 0.075);
            color: var(--muted);
            transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, color 0.2s ease;
        }

        .scenario-tab:hover,
        .scenario-tab.active {
            transform: translateY(-1px);
            color: #fff;
            background: rgba(255, 61, 154, 0.08);
            border-color: rgba(255, 61, 154, 0.28);
        }

        .news-list a {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 0.85rem;
            align-items: center;
            padding: 1rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.075);
            color: var(--text);
            transition: color 0.2s ease, transform 0.2s ease;
        }

        .news-list a:hover {
            color: #fff;
            transform: translateX(4px);
        }

        .faq-item {
            border-radius: 18px;
            border: 1px solid rgba(255, 255, 255, 0.085);
            background: rgba(255, 255, 255, 0.035);
            overflow: hidden;
            transition: border-color 0.2s ease, background 0.2s ease;
        }

        .faq-item.open {
            border-color: rgba(255, 61, 154, 0.32);
            background: linear-gradient(135deg, rgba(255, 61, 154, 0.08), rgba(168, 85, 247, 0.06));
        }

        .faq-question {
            min-height: 56px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 1rem 1.15rem;
            text-align: left;
            color: #fff;
            font-weight: 750;
        }

        .faq-icon {
            flex: 0 0 auto;
            width: 1.75rem;
            height: 1.75rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.06);
            transition: transform 0.2s ease, background 0.2s ease;
        }

        .faq-item.open .faq-icon {
            transform: rotate(45deg);
            background: rgba(255, 61, 154, 0.18);
        }

        .faq-answer {
            display: none;
            padding: 0 1.15rem 1.1rem;
            color: var(--muted);
        }

        .faq-item.open .faq-answer {
            display: block;
        }

        .cta-panel {
            position: relative;
            overflow: hidden;
            border-radius: 28px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background:
                linear-gradient(135deg, rgba(255, 61, 154, 0.16), rgba(168, 85, 247, 0.12) 48%, rgba(32, 227, 178, 0.08)),
                linear-gradient(180deg, rgba(30, 23, 40, 0.98), rgba(18, 13, 25, 0.98));
            box-shadow: 0 28px 70px rgba(255, 61, 154, 0.11), var(--shadow);
        }

        .cta-panel::before {
            content: "";
            position: absolute;
            inset: -1px;
            pointer-events: none;
            background:
                linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.08), transparent),
                radial-gradient(circle at 14% 24%, rgba(255, 61, 154, 0.18), transparent 28%),
                radial-gradient(circle at 82% 75%, rgba(32, 227, 178, 0.12), transparent 26%);
        }

        .footer-link {
            color: rgba(245, 238, 251, 0.72);
            transition: color 0.2s ease;
        }

        .footer-link:hover,
        .footer-link:focus-visible {
            color: #fff;
        }

        .mobile-drawer {
            display: none;
            transform: translateY(-8px);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease, transform 0.2s ease;
        }

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

        @media (max-width: 1024px) {
            .nav-search {
                min-width: 210px;
            }

            .timeline-line {
                display: none;
            }
        }

        @media (max-width: 860px) {
            .desktop-nav,
            .desktop-actions {
                display: none !important;
            }

            .mobile-menu-button {
                display: inline-flex !important;
            }

            .hero-min {
                min-height: auto;
                padding-top: 7.5rem;
            }

            .news-list a {
                grid-template-columns: 1fr;
                gap: 0.35rem;
            }
        }

        @media (max-width: 520px) {
            .container {
                padding-inline: 14px;
            }

            .btn {
                width: 100%;
                padding-inline: 1rem;
                white-space: normal;
            }

            .brand-mark {
                gap: 0.5rem;
                font-size: 0.95rem;
            }

            .brand-badge {
                min-width: 2.35rem;
                height: 1.55rem;
                padding-inline: 0.55rem;
            }

            .card-panel,
            .cta-panel {
                border-radius: 20px;
            }

            .faq-question {
                align-items: flex-start;
            }
        }

/* roulang page: category2 */
:root {
            --bg: #0d0a12;
            --bg-deep: #09070d;
            --panel: #15111d;
            --panel-2: #1e1728;
            --panel-3: #241b31;
            --text: #fff7ff;
            --muted: #b9aec7;
            --soft: #8f839d;
            --line: rgba(255,255,255,.12);
            --line-strong: rgba(255,255,255,.2);
            --primary: #ff3d9a;
            --primary-2: #a855f7;
            --accent: #20e3b2;
            --warn: #ffb020;
            --danger: #ff5a5f;
            --radius: 20px;
            --radius-sm: 14px;
            --shadow: 0 24px 80px rgba(0,0,0,.44);
            --glow: 0 0 32px rgba(255,61,154,.25);
            --container: 1200px;
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            min-height: 100vh;
            background:
                radial-gradient(circle at 20% 8%, rgba(255,61,154,.16), transparent 34%),
                radial-gradient(circle at 78% 0%, rgba(32,227,178,.12), transparent 26%),
                linear-gradient(180deg, #0d0a12 0%, #100c17 48%, #0b0810 100%);
            color: var(--text);
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
            line-height: 1.65;
            letter-spacing: 0;
            overflow-x: hidden;
        }

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

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

        button, input {
            font: inherit;
        }

        button {
            cursor: pointer;
        }

        ::selection {
            color: #fff;
            background: rgba(255,61,154,.55);
        }

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

        .site-header {
            transition: background .28s ease, padding .28s ease, transform .28s ease;
        }

        .site-header.is-solid {
            background: rgba(13,10,18,.9);
            border-bottom: 1px solid rgba(255,255,255,.08);
            box-shadow: 0 16px 48px rgba(0,0,0,.3);
            backdrop-filter: blur(18px);
        }

        .nav-shell {
            background: rgba(21,17,29,.58);
            border: 1px solid rgba(255,255,255,.12);
            box-shadow: 0 18px 50px rgba(0,0,0,.24);
            backdrop-filter: blur(18px);
        }

        .brand-mark {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: #fff;
            font-weight: 900;
            letter-spacing: 0;
            white-space: nowrap;
        }

        .brand-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 38px;
            height: 22px;
            padding: 0 8px;
            border-radius: 999px;
            background: rgba(255,90,95,.14);
            border: 1px solid rgba(255,90,95,.42);
            color: #ffd4d6;
            font-size: 12px;
            font-weight: 800;
        }

        .nav-link {
            display: inline-flex;
            align-items: center;
            min-height: 40px;
            padding: 8px 15px;
            border-radius: 999px;
            color: #d8cfe3;
            transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
        }

        .nav-link:hover,
        .nav-link:focus-visible {
            color: #fff;
            background: rgba(255,255,255,.08);
            outline: none;
        }

        .nav-link.active {
            color: #fff;
            background: linear-gradient(135deg, rgba(255,61,154,.28), rgba(168,85,247,.22));
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
        }

        .nav-search {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-width: 220px;
            height: 42px;
            padding: 0 14px;
            border-radius: 999px;
            color: var(--soft);
            background: rgba(255,255,255,.06);
            border: 1px solid rgba(255,255,255,.11);
            transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
        }

        .nav-search:focus-within {
            border-color: rgba(255,61,154,.7);
            background: rgba(255,255,255,.09);
            box-shadow: 0 0 0 4px rgba(255,61,154,.12);
        }

        .nav-search input {
            width: 100%;
            min-width: 0;
            border: 0;
            outline: 0;
            color: #fff;
            background: transparent;
            font-size: 14px;
        }

        .nav-search input::placeholder {
            color: #93889f;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 42px;
            border-radius: 999px;
            border: 1px solid transparent;
            font-weight: 800;
            line-height: 1;
            white-space: nowrap;
            transition: transform .2s ease, filter .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
        }

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

        .btn:active {
            transform: translateY(0);
        }

        .btn:focus-visible,
        .mobile-menu-button:focus-visible,
        .faq-trigger:focus-visible {
            outline: 3px solid rgba(32,227,178,.55);
            outline-offset: 3px;
        }

        .btn-primary {
            color: #fff;
            background: linear-gradient(135deg, var(--primary), var(--primary-2));
            box-shadow: 0 12px 34px rgba(255,61,154,.28);
        }

        .btn-primary:hover {
            filter: brightness(1.08);
            box-shadow: 0 18px 46px rgba(255,61,154,.36);
        }

        .btn-secondary {
            color: #fff;
            background: rgba(255,255,255,.06);
            border-color: rgba(255,255,255,.16);
        }

        .btn-secondary:hover {
            border-color: rgba(32,227,178,.55);
            background: rgba(32,227,178,.08);
        }

        .mobile-drawer {
            display: none;
        }

        .mobile-drawer.is-open {
            display: block;
        }

        .mobile-menu-button {
            display: none;
            transition: border-color .2s ease, background .2s ease, transform .2s ease;
        }

        .mobile-menu-button:hover {
            border-color: rgba(255,61,154,.55);
            background: rgba(255,61,154,.12);
        }

        .page-shell {
            position: relative;
            padding-top: 118px;
        }

        .page-shell::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            opacity: .38;
            background-image:
                linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
            background-size: 42px 42px;
            mask-image: linear-gradient(to bottom, #000, transparent 78%);
        }

        .channel-head {
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid rgba(255,255,255,.08);
            padding: 46px 0 36px;
        }

        .channel-head::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 10%;
            width: min(980px, 90vw);
            height: 300px;
            transform: translateX(-50%) rotate(-5deg);
            background: linear-gradient(90deg, transparent, rgba(255,61,154,.13), rgba(32,227,178,.09), transparent);
            filter: blur(4px);
            pointer-events: none;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 28px;
            padding: 4px 10px;
            border-radius: 999px;
            color: #ffdeec;
            background: rgba(255,61,154,.13);
            border: 1px solid rgba(255,61,154,.28);
            font-size: 13px;
            font-weight: 800;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--accent);
            box-shadow: 0 0 14px rgba(32,227,178,.8);
        }

        h1 {
            margin: 18px 0 0;
            max-width: 980px;
            font-size: clamp(32px, 5vw, 56px);
            line-height: 1.12;
            font-weight: 900;
            letter-spacing: 0;
        }

        .lead {
            max-width: 850px;
            margin-top: 18px;
            color: #d8cfe3;
            font-size: clamp(16px, 2vw, 18px);
        }

        .rule-strip {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1.1fr .9fr auto;
            gap: 14px;
            align-items: center;
            margin-top: 28px;
            padding: 16px;
            border-radius: var(--radius);
            background: linear-gradient(135deg, rgba(21,17,29,.88), rgba(36,27,49,.76));
            border: 1px solid rgba(255,255,255,.12);
            box-shadow: var(--shadow);
        }

        .rule-strip strong {
            color: #fff;
            font-size: 15px;
        }

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

        .quick-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 14px;
            margin-top: 26px;
        }

        .quick-card,
        .panel-card,
        .side-card,
        .compare-card,
        .faq-item,
        .cta-panel {
            background: rgba(21,17,29,.78);
            border: 1px solid rgba(255,255,255,.11);
            box-shadow: 0 18px 58px rgba(0,0,0,.26);
            backdrop-filter: blur(14px);
        }

        .quick-card {
            position: relative;
            overflow: hidden;
            min-height: 138px;
            padding: 18px;
            border-radius: var(--radius);
            transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
        }

        .quick-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 20% 0%, rgba(255,61,154,.18), transparent 38%);
            opacity: 0;
            transition: opacity .22s ease;
        }

        .quick-card:hover {
            transform: translateY(-4px);
            border-color: rgba(255,61,154,.36);
            box-shadow: 0 24px 70px rgba(255,61,154,.12);
        }

        .quick-card:hover::before {
            opacity: 1;
        }

        .quick-card > * {
            position: relative;
        }

        .icon-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            border-radius: 16px;
            background: rgba(255,255,255,.07);
            border: 1px solid rgba(255,255,255,.12);
            color: #fff;
            font-weight: 900;
        }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-height: 26px;
            padding: 4px 10px;
            border-radius: 999px;
            color: #dffcf5;
            background: rgba(32,227,178,.1);
            border: 1px solid rgba(32,227,178,.25);
            font-size: 12px;
            font-weight: 800;
        }

        .badge.warn {
            color: #ffe8ba;
            background: rgba(255,176,32,.1);
            border-color: rgba(255,176,32,.28);
        }

        .badge.danger {
            color: #ffd5d8;
            background: rgba(255,90,95,.11);
            border-color: rgba(255,90,95,.3);
        }

        .layout-grid {
            display: grid;
            grid-template-columns: 280px minmax(0, 1fr);
            gap: 28px;
            padding: 72px 0 88px;
        }

        .sidebar {
            position: sticky;
            top: 110px;
            align-self: start;
        }

        .side-card {
            border-radius: var(--radius);
            padding: 18px;
        }

        .side-nav {
            display: grid;
            gap: 8px;
            margin-top: 16px;
        }

        .side-nav a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            min-height: 46px;
            padding: 10px 12px;
            border-radius: 14px;
            color: #d8cfe3;
            background: rgba(255,255,255,.04);
            border: 1px solid transparent;
            transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
        }

        .side-nav a:hover,
        .side-nav a.active {
            color: #fff;
            background: rgba(255,61,154,.12);
            border-color: rgba(255,61,154,.3);
            transform: translateX(2px);
        }

        .side-note {
            margin-top: 16px;
            padding: 14px;
            border-radius: 16px;
            color: #f3d9dc;
            background: rgba(255,90,95,.1);
            border: 1px solid rgba(255,90,95,.22);
            font-size: 13px;
        }

        .content-flow {
            display: grid;
            gap: 54px;
            min-width: 0;
        }

        .section-kicker {
            color: var(--accent);
            font-size: 13px;
            font-weight: 900;
        }

        .section-title {
            margin: 8px 0 0;
            font-size: clamp(24px, 3vw, 36px);
            line-height: 1.18;
            font-weight: 900;
            letter-spacing: 0;
        }

        .section-summary {
            margin-top: 12px;
            max-width: 760px;
            color: var(--muted);
            font-size: 16px;
        }

        .bento {
            display: grid;
            grid-template-columns: 1.15fr .85fr;
            grid-auto-rows: minmax(156px, auto);
            gap: 16px;
            margin-top: 22px;
        }

        .panel-card {
            position: relative;
            overflow: hidden;
            border-radius: var(--radius);
            padding: 22px;
            transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
        }

        .panel-card:hover {
            transform: translateY(-3px);
            border-color: rgba(32,227,178,.28);
            box-shadow: 0 24px 72px rgba(0,0,0,.34), 0 0 26px rgba(32,227,178,.08);
        }

        .panel-card.large {
            grid-row: span 2;
            background:
                radial-gradient(circle at 20% 12%, rgba(255,61,154,.22), transparent 35%),
                linear-gradient(145deg, rgba(30,23,40,.94), rgba(15,12,21,.88));
            border-color: rgba(255,61,154,.22);
        }

        .panel-card h3,
        .quick-card h3,
        .compare-card h3 {
            margin: 12px 0 0;
            font-size: 20px;
            line-height: 1.28;
            font-weight: 900;
        }

        .panel-card p,
        .quick-card p,
        .compare-card p {
            margin-top: 8px;
            color: var(--muted);
            font-size: 14px;
        }

        .task-line {
            display: grid;
            gap: 12px;
            margin-top: 18px;
        }

        .task-row {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 12px;
            align-items: center;
            padding: 12px;
            border-radius: 16px;
            background: rgba(255,255,255,.05);
            border: 1px solid rgba(255,255,255,.08);
        }

        .task-row span:first-child {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 10px;
            background: linear-gradient(135deg, rgba(255,61,154,.5), rgba(168,85,247,.42));
            font-weight: 900;
        }

        .filter-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 20px;
            padding: 12px;
            border-radius: 18px;
            background: rgba(255,255,255,.04);
            border: 1px solid rgba(255,255,255,.09);
        }

        .filter-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 38px;
            padding: 8px 13px;
            border-radius: 999px;
            color: #e6dfee;
            background: rgba(255,255,255,.05);
            border: 1px solid rgba(255,255,255,.1);
            font-size: 14px;
            transition: background .2s ease, border-color .2s ease, color .2s ease;
        }

        .filter-pill:hover,
        .filter-pill.active {
            color: #fff;
            background: rgba(255,61,154,.13);
            border-color: rgba(255,61,154,.32);
        }

        .compare-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
            margin-top: 22px;
        }

        .compare-card {
            border-radius: var(--radius);
            padding: 22px;
        }

        .check-list {
            display: grid;
            gap: 11px;
            margin-top: 16px;
        }

        .check-list li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            color: #d8cfe3;
            font-size: 14px;
        }

        .check-list li::before {
            content: "✓";
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 22px;
            width: 22px;
            height: 22px;
            border-radius: 8px;
            color: #08120f;
            background: var(--accent);
            font-weight: 900;
            line-height: 1;
            margin-top: 1px;
        }

        .meter {
            height: 8px;
            overflow: hidden;
            border-radius: 999px;
            background: rgba(255,255,255,.08);
            margin-top: 18px;
        }

        .meter > span {
            display: block;
            height: 100%;
            width: 76%;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--accent), var(--warn), var(--primary));
            box-shadow: 0 0 20px rgba(32,227,178,.28);
        }

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

        .faq-item {
            border-radius: 18px;
            overflow: hidden;
            transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
        }

        .faq-item.is-open {
            border-color: rgba(255,61,154,.35);
            background: linear-gradient(135deg, rgba(255,61,154,.08), rgba(32,227,178,.04));
            box-shadow: 0 0 28px rgba(255,61,154,.08);
        }

        .faq-trigger {
            width: 100%;
            min-height: 56px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            padding: 16px 18px;
            color: #fff;
            background: transparent;
            border: 0;
            text-align: left;
            font-weight: 900;
        }

        .faq-trigger .mark {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 30px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            color: #fff;
            background: rgba(255,255,255,.07);
            transition: transform .2s ease, background .2s ease;
        }

        .faq-item.is-open .mark {
            transform: rotate(45deg);
            background: rgba(255,61,154,.24);
        }

        .faq-panel {
            display: none;
            padding: 0 18px 18px;
            color: var(--muted);
            font-size: 15px;
        }

        .faq-item.is-open .faq-panel {
            display: block;
        }

        .cta-panel {
            position: relative;
            overflow: hidden;
            border-radius: 28px;
            padding: clamp(26px, 5vw, 42px);
            background:
                radial-gradient(circle at 85% 15%, rgba(32,227,178,.18), transparent 32%),
                linear-gradient(135deg, rgba(255,61,154,.18), rgba(168,85,247,.12) 38%, rgba(21,17,29,.92));
            border-color: rgba(255,255,255,.14);
        }

        .cta-panel::before {
            content: "";
            position: absolute;
            inset: 12px;
            border: 1px dashed rgba(255,255,255,.12);
            border-radius: 22px;
            pointer-events: none;
        }

        .cta-inner {
            position: relative;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 22px;
            align-items: center;
        }

        .confirm-box {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-top: 18px;
            color: #d8cfe3;
            font-size: 14px;
        }

        .fake-check {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 22px;
            width: 22px;
            height: 22px;
            border-radius: 7px;
            background: rgba(32,227,178,.13);
            border: 1px solid rgba(32,227,178,.4);
            color: var(--accent);
            font-weight: 900;
        }

        .footer-link {
            color: #b9aec7;
            transition: color .2s ease, transform .2s ease;
        }

        .footer-link:hover {
            color: #fff;
            transform: translateX(2px);
        }

        @media (max-width: 1100px) {
            .desktop-nav,
            .desktop-actions {
                display: none !important;
            }

            .mobile-menu-button {
                display: inline-flex !important;
            }

            .layout-grid {
                grid-template-columns: 1fr;
                padding-top: 54px;
            }

            .sidebar {
                position: relative;
                top: auto;
                z-index: 2;
            }

            .side-card {
                padding: 14px;
            }

            .side-nav {
                display: flex;
                overflow-x: auto;
                padding-bottom: 4px;
                scrollbar-width: thin;
            }

            .side-nav a {
                flex: 0 0 auto;
                min-width: 152px;
                transform: none !important;
            }

            .side-note {
                display: none;
            }

            .quick-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .rule-strip {
                grid-template-columns: 1fr;
            }

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

            .panel-card.large {
                grid-row: auto;
            }
        }

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

            .page-shell {
                padding-top: 96px;
            }

            .channel-head {
                padding: 34px 0 28px;
            }

            .brand-mark {
                gap: 8px;
                font-size: 14px;
            }

            .brand-badge {
                min-width: 34px;
                height: 20px;
                padding: 0 7px;
                font-size: 11px;
            }

            .quick-grid,
            .compare-grid {
                grid-template-columns: 1fr;
            }

            .quick-card {
                min-height: auto;
            }

            .content-flow {
                gap: 42px;
            }

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

            .task-row .badge {
                grid-column: 2;
                width: fit-content;
            }

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

            .cta-inner .flex {
                justify-content: flex-start;
            }
        }

        @media (max-width: 520px) {
            .nav-shell {
                border-radius: 24px;
            }

            .brand-mark span:nth-child(2) {
                max-width: 132px;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            h1 {
                font-size: 32px;
            }

            .lead,
            .section-summary {
                font-size: 15px;
            }

            .filter-bar {
                flex-wrap: nowrap;
                overflow-x: auto;
            }

            .filter-pill {
                flex: 0 0 auto;
            }

            .btn {
                width: 100%;
            }

            .desktop-actions + .flex .btn {
                width: auto;
            }

            .cta-inner .flex {
                width: 100%;
                flex-direction: column;
            }
        }

/* roulang page: category1 */
:root{
            --bg:#0d0a12;
            --bg-soft:#15111d;
            --panel:#1e1728;
            --panel-2:#241c31;
            --text:#f4ecff;
            --muted:#b9aec7;
            --line:rgba(255,255,255,.09);
            --line-strong:rgba(255,255,255,.14);
            --accent:#ff3d9a;
            --accent-2:#a855f7;
            --accent-3:#20e3b2;
            --warn:#ffb020;
            --danger:#ff5a5f;
            --shadow:0 22px 60px rgba(0,0,0,.32);
            --radius:22px;
        }

        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            min-height:100vh;
            background:
                linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
                var(--bg);
            color:var(--text);
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
            text-rendering:optimizeLegibility;
            -webkit-font-smoothing:antialiased;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            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:36px 36px;
            opacity:.16;
            mask-image:linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.18));
        }
        body::after{
            content:"";
            position:fixed;
            inset:-10% -15% auto -15%;
            height:48vh;
            pointer-events:none;
            background:linear-gradient(135deg, rgba(255,61,154,.18), rgba(168,85,247,.14) 42%, transparent 74%);
            filter:blur(40px);
            opacity:.52;
        }
        a{color:inherit;text-decoration:none}
        img,svg{display:block;max-width:100%}
        button,input,textarea,select{font:inherit}
        ::selection{background:rgba(255,61,154,.32);color:#fff}

        .container{
            width:min(1280px, calc(100% - 1.5rem));
            margin-inline:auto;
        }
        .site-header{
            transition:padding .24s ease, transform .24s ease;
        }
        .nav-shell{
            background:rgba(21,17,29,.48);
            border:1px solid rgba(255,255,255,.08);
            backdrop-filter:blur(18px);
            -webkit-backdrop-filter:blur(18px);
            box-shadow:0 16px 46px rgba(0,0,0,.24);
        }
        .site-header.scrolled .nav-shell{
            background:rgba(13,10,18,.96);
            border-color:rgba(255,255,255,.12);
            box-shadow:0 18px 44px rgba(0,0,0,.5);
        }
        .brand-mark{
            display:inline-flex;
            align-items:center;
            gap:.65rem;
            color:#fff;
            font-weight:800;
            letter-spacing:0;
        }
        .brand-badge{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:.35rem .58rem;
            border-radius:999px;
            background:rgba(255,255,255,.06);
            border:1px solid rgba(255,255,255,.12);
            color:var(--warn);
            font-size:.72rem;
            font-weight:800;
        }
        .nav-link{
            display:inline-flex;
            align-items:center;
            padding:.56rem .96rem;
            border-radius:999px;
            border:1px solid transparent;
            color:var(--muted);
            transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
        }
        .nav-link:hover{
            color:#fff;
            background:rgba(255,255,255,.05);
        }
        .nav-link.active{
            color:#fff;
            background:linear-gradient(135deg, rgba(255,61,154,.18), rgba(168,85,247,.16));
            border-color:rgba(255,61,154,.32);
            box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
        }
        .nav-search{
            display:flex;
            align-items:center;
            gap:.5rem;
            min-width:15rem;
            padding:.53rem .82rem;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.1);
            background:rgba(255,255,255,.04);
            color:#e9def4;
            transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
        }
        .nav-search:focus-within{
            border-color:rgba(255,61,154,.44);
            background:rgba(255,61,154,.08);
            box-shadow:0 0 0 3px rgba(255,61,154,.12);
        }
        .nav-search input{
            width:100%;
            min-width:0;
            border:0;
            outline:none;
            background:transparent;
            color:#fff;
        }
        .nav-search input::placeholder{
            color:#8f839d;
        }
        .btn-primary,
        .btn-secondary{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:.5rem;
            border-radius:999px;
            line-height:1;
            transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, filter .2s ease;
            font-weight:800;
            letter-spacing:0;
        }
        .btn-primary{
            padding:.88rem 1.22rem;
            color:#fff;
            background:linear-gradient(135deg, var(--accent), var(--accent-2));
            box-shadow:0 14px 32px rgba(255,61,154,.24);
        }
        .btn-primary:hover{
            transform:translateY(-1px);
            filter:brightness(1.05);
            box-shadow:0 18px 38px rgba(168,85,247,.28);
        }
        .btn-secondary{
            padding:.88rem 1.22rem;
            color:var(--text);
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.12);
        }
        .btn-secondary:hover{
            transform:translateY(-1px);
            border-color:rgba(255,61,154,.4);
            background:rgba(255,61,154,.08);
        }
        .btn-ghost{
            display:inline-flex;
            align-items:center;
            gap:.4rem;
            color:#d8c8ea;
            font-weight:700;
            transition:color .2s ease,transform .2s ease;
        }
        .btn-ghost:hover{
            color:#fff;
            transform:translateX(2px);
        }
        .btn-primary:focus-visible,
        .btn-secondary:focus-visible,
        .btn-ghost:focus-visible,
        .nav-link:focus-visible,
        .faq-button:focus-visible,
        .scenario-tab:focus-visible,
        input:focus-visible,
        button:focus-visible{
            outline:2px solid rgba(255,61,154,.84);
            outline-offset:2px;
        }

        .hero-band{
            background:
                linear-gradient(120deg, rgba(255,61,154,.08), transparent 32%, rgba(168,85,247,.11) 56%, transparent 82%),
                linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
        }
        .hero-panel{
            position:relative;
            border-radius:24px;
            border:1px solid rgba(255,255,255,.1);
            background:linear-gradient(180deg, rgba(29,23,40,.98), rgba(18,14,26,.97));
            box-shadow:var(--shadow);
            overflow:hidden;
        }
        .hero-panel::before{
            content:"";
            position:absolute;
            inset:0;
            border-radius:inherit;
            padding:1px;
            background:linear-gradient(135deg, rgba(255,61,154,.38), rgba(168,85,247,.16), rgba(32,227,178,.08));
            -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite:xor;
            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite:exclude;
            opacity:.5;
            pointer-events:none;
        }
        .panel{
            position:relative;
            border-radius:22px;
            border:1px solid rgba(255,255,255,.09);
            background:linear-gradient(180deg, rgba(30,23,40,.95), rgba(18,14,26,.97));
            box-shadow:var(--shadow);
            overflow:hidden;
        }
        .panel-soft{
            border-radius:20px;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.03);
        }
        .panel::after{
            content:"";
            position:absolute;
            inset:0;
            border-radius:inherit;
            background:linear-gradient(135deg, rgba(255,255,255,.03), transparent 40%, transparent 60%, rgba(255,255,255,.02));
            pointer-events:none;
        }
        .section-kicker{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            color:var(--warn);
            font-size:.82rem;
            font-weight:800;
            letter-spacing:.02em;
        }
        .section-title{
            font-size:2rem;
            line-height:1.15;
            font-weight:800;
            color:#fff;
        }
        .section-copy{
            color:var(--muted);
            line-height:1.75;
        }
        .badge-state{
            display:inline-flex;
            align-items:center;
            gap:.38rem;
            padding:.4rem .74rem;
            border-radius:999px;
            background:rgba(255,255,255,.05);
            border:1px solid rgba(255,255,255,.1);
            color:#eadff5;
            font-size:.78rem;
            font-weight:700;
        }
        .badge-state strong{
            color:var(--accent-3);
        }
        .card-tile{
            position:relative;
            border-radius:18px;
            border:1px solid rgba(255,255,255,.09);
            background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.03));
            padding:1rem;
            transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
            overflow:hidden;
        }
        .card-tile:hover{
            transform:translateY(-2px);
            border-color:rgba(255,61,154,.35);
            background:rgba(255,255,255,.06);
            box-shadow:0 14px 32px rgba(0,0,0,.24);
        }
        .card-title{
            font-size:1.02rem;
            font-weight:800;
            color:#fff;
        }
        .card-copy{
            margin-top:.45rem;
            color:var(--muted);
            font-size:.94rem;
            line-height:1.7;
        }
        .card-tag{
            display:inline-flex;
            align-items:center;
            gap:.35rem;
            padding:.28rem .58rem;
            border-radius:999px;
            border:1px solid rgba(255,61,154,.24);
            background:rgba(255,61,154,.12);
            color:#ff93c2;
            font-size:.74rem;
            font-weight:800;
        }
        .progress{
            height:.38rem;
            border-radius:999px;
            background:rgba(255,255,255,.08);
            overflow:hidden;
        }
        .progress > span{
            display:block;
            height:100%;
            border-radius:999px;
            background:linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3));
        }
        .timeline-line{
            position:absolute;
            left:1.25rem;
            right:1.25rem;
            top:2.15rem;
            height:1px;
            background:linear-gradient(90deg, rgba(255,61,154,.16), rgba(255,255,255,.18), rgba(168,85,247,.16));
        }
        .step-index{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            width:2.15rem;
            height:2.15rem;
            border-radius:999px;
            background:linear-gradient(135deg, var(--accent), var(--accent-2));
            color:#fff;
            font-weight:900;
            box-shadow:0 0 0 6px rgba(255,61,154,.08);
        }
        .pill{
            display:inline-flex;
            align-items:center;
            padding:.48rem .82rem;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.1);
            background:rgba(255,255,255,.03);
            color:#d8c8ea;
            font-size:.84rem;
            font-weight:700;
        }
        .pill.active{
            color:#fff;
            background:rgba(255,61,154,.12);
            border-color:rgba(255,61,154,.28);
        }
        .scenario-tab{
            width:100%;
            text-align:left;
            border:1px solid rgba(255,255,255,.09);
            background:rgba(255,255,255,.04);
            color:#eadff5;
            border-radius:16px;
            padding:.92rem 1rem;
            transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
        }
        .scenario-tab:hover{
            background:rgba(255,255,255,.06);
            border-color:rgba(255,61,154,.35);
            transform:translateY(-1px);
        }
        .scenario-tab.active{
            border-color:rgba(255,61,154,.48);
            background:linear-gradient(135deg, rgba(255,61,154,.14), rgba(168,85,247,.11));
            box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
        }
        .faq-item{
            border:1px solid rgba(255,255,255,.09);
            background:rgba(255,255,255,.03);
            border-radius:18px;
            overflow:hidden;
        }
        .faq-button{
            width:100%;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:1rem;
            padding:1rem 1.1rem;
            text-align:left;
            color:#fff;
            font-weight:800;
        }
        .faq-panel{
            max-height:0;
            overflow:hidden;
            transition:max-height .3s ease;
        }
        .faq-item.active .faq-panel{
            max-height:280px;
        }
        .faq-answer{
            padding:0 1.1rem 1rem;
            color:var(--muted);
            line-height:1.75;
        }
        .faq-icon{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            width:2rem;
            height:2rem;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.1);
            background:rgba(255,255,255,.04);
            transition:transform .25s ease,background .25s ease;
            flex-shrink:0;
        }
        .faq-item.active .faq-icon{
            transform:rotate(45deg);
            background:rgba(255,61,154,.15);
        }
        .footer-link{
            display:block;
            padding:.55rem 0;
            color:#c5b8d5;
            transition:color .2s ease,transform .2s ease;
        }
        .footer-link:hover{
            color:#fff;
            transform:translateX(2px);
        }
        .small-note{
            color:#a99ab8;
            font-size:.88rem;
            line-height:1.65;
        }
        .divider{
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
        }

        @media (min-width: 768px){
            .section-title{font-size:2.55rem}
        }
        @media (min-width: 1024px){
            .section-title{font-size:3rem}
        }
        @media (max-width: 1023px){
            .desktop-nav,.desktop-actions{display:none !important}
            .site-header .nav-shell{border-radius:1.5rem}
        }
        @media (max-width: 640px){
            .container{width:min(calc(100% - 1rem), 1280px)}
            .nav-search input{min-width:0;width:100%}
            .hero-panel,.panel,.card-tile{border-radius:18px}
            .faq-button{padding:.95rem 1rem}
        }