/* roulang page: index */
:root {
            --ink: #142033;
            --ink-soft: #536174;
            --ink-muted: #7d8999;
            --surface: #ffffff;
            --surface-soft: #f6f8fc;
            --surface-deep: #101827;
            --surface-deeper: #0a1020;
            --line: #e6eaf0;
            --line-dark: rgba(255,255,255,.13);
            --primary: #7657ed;
            --primary-dark: #5738cc;
            --primary-pale: #f0edff;
            --mint: #35c8a2;
            --mint-pale: #e5faf4;
            --orange: #f5a34c;
            --shadow-sm: 0 8px 20px rgba(26, 39, 63, .06);
            --shadow-md: 0 18px 45px rgba(25, 35, 57, .10);
            --shadow-lg: 0 28px 70px rgba(8, 17, 34, .17);
            --radius-sm: 12px;
            --radius-md: 20px;
            --radius-lg: 30px;
            --container: 1190px;
            --ease: all .26s cubic-bezier(.2,.75,.25,1);
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--surface);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.72;
            overflow-x: hidden;
        }
        a { color: inherit; text-decoration: none; transition: var(--ease); }
        img { max-width: 100%; height: auto; }
        button, input { font: inherit; }
        button { border: 0; cursor: pointer; }
        ::selection { background: #dcd4ff; color: #251a59; }
        :focus-visible { outline: 3px solid rgba(118,87,237,.35); outline-offset: 3px; }

        .site-container { width: min(calc(100% - 48px), var(--container)); margin: 0 auto; }
        .section { padding: 102px 0; }
        .section-soft { background: var(--surface-soft); }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 0 0 16px;
            color: var(--primary);
            font-size: .82rem;
            font-weight: 800;
            letter-spacing: .12em;
        }
        .eyebrow::before {
            content: "";
            width: 20px;
            height: 2px;
            border-radius: 5px;
            background: currentColor;
        }
        .section-heading { max-width: 670px; margin-bottom: 45px; }
        .section-heading h2 {
            margin: 0 0 14px;
            font-size: clamp(1.9rem, 3.2vw, 3rem);
            font-weight: 800;
            letter-spacing: -.045em;
            line-height: 1.2;
        }
        .section-heading p { margin: 0; color: var(--ink-soft); font-size: 1.03rem; }
        .text-muted-custom { color: var(--ink-soft)!important; }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 1000;
            border-bottom: 1px solid rgba(230,234,240,.8);
            background: rgba(255,255,255,.88);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }
        .navbar { min-height: 76px; padding: 12px 0; }
        .navbar-brand {
            display: flex;
            align-items: center;
            min-width: 0;
            margin-right: 34px;
            color: var(--ink)!important;
            font-size: .96rem;
            font-weight: 800;
            letter-spacing: -.025em;
            line-height: 1.25;
        }
        .brand-mark {
            display: inline-grid;
            place-items: center;
            width: 33px;
            height: 33px;
            flex: 0 0 33px;
            margin-right: 10px;
            border-radius: 11px;
            color: #fff;
            font-size: .77rem;
            background: var(--primary);
            box-shadow: 0 7px 15px rgba(118,87,237,.28);
        }
        .brand-copy { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .nav-link {
            position: relative;
            padding: .52rem .82rem!important;
            color: var(--ink-soft)!important;
            font-size: .93rem;
            font-weight: 700;
        }
        .nav-link::after {
            position: absolute;
            right: 12px;
            bottom: 2px;
            left: 12px;
            height: 2px;
            border-radius: 5px;
            content: "";
            background: var(--primary);
            opacity: 0;
            transform: scaleX(.2);
            transition: var(--ease);
        }
        .nav-link:hover, .nav-link.active { color: var(--ink)!important; }
        .nav-link:hover::after, .nav-link.active::after { opacity: 1; transform: scaleX(1); }
        .header-actions { gap: 10px; }
        .command-search {
            display: flex;
            align-items: center;
            width: 190px;
            height: 40px;
            gap: 8px;
            padding: 0 10px 0 13px;
            border: 1px solid var(--line);
            border-radius: 12px;
            color: var(--ink-muted);
            background: #fafbfe;
            transition: var(--ease);
        }
        .command-search:hover, .command-search:focus-within {
            border-color: rgba(118,87,237,.45);
            background: #fff;
            box-shadow: 0 0 0 4px rgba(118,87,237,.08);
        }
        .command-search input {
            width: 100%;
            min-width: 0;
            border: 0;
            outline: 0;
            color: var(--ink);
            font-size: .83rem;
            background: transparent;
        }
        .command-search input::placeholder { color: #9ba5b5; }
        .key-hint {
            padding: 1px 5px;
            border: 1px solid var(--line);
            border-radius: 5px;
            color: var(--ink-muted);
            font-family: Arial, sans-serif;
            font-size: .66rem;
            line-height: 1.4;
            background: #fff;
        }
        .header-shortcut {
            display: inline-grid;
            place-items: center;
            width: 40px;
            height: 40px;
            border: 1px solid var(--line);
            border-radius: 12px;
            color: var(--ink-soft);
            background: #fff;
        }
        .header-shortcut:hover { color: var(--primary); border-color: var(--primary); transform: translateY(-1px); }
        .btn-brand {
            padding: .72rem 1.12rem;
            border: 1px solid var(--primary);
            border-radius: 12px;
            color: #fff;
            font-size: .9rem;
            font-weight: 800;
            background: var(--primary);
            box-shadow: 0 8px 16px rgba(118,87,237,.2);
            transition: var(--ease);
        }
        .btn-brand:hover { color: #fff; border-color: var(--primary-dark); background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 12px 22px rgba(118,87,237,.28); }
        .navbar-toggler { padding: .4rem .55rem; border: 1px solid var(--line); border-radius: 10px; box-shadow: none!important; }
        .navbar-toggler-icon { width: 1.2em; height: 1.2em; }

        .hero {
            position: relative;
            padding: 88px 0 72px;
            isolation: isolate;
            overflow: hidden;
            background: #fbfcff;
        }
        .hero::before {
            position: absolute;
            z-index: -1;
            top: -280px;
            right: -190px;
            width: 690px;
            height: 690px;
            border-radius: 50%;
            content: "";
            background: radial-gradient(circle at center, rgba(118,87,237,.19), rgba(118,87,237,0) 67%);
        }
        .hero::after {
            position: absolute;
            z-index: -1;
            bottom: -185px;
            left: -120px;
            width: 450px;
            height: 450px;
            border-radius: 50%;
            content: "";
            background: radial-gradient(circle at center, rgba(53,200,162,.14), rgba(53,200,162,0) 68%);
        }
        .hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(400px, .98fr); align-items: center; gap: 70px; }
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            margin-bottom: 20px;
            padding: 7px 12px 7px 9px;
            border: 1px solid #ded7ff;
            border-radius: 999px;
            color: #5e46c8;
            font-size: .8rem;
            font-weight: 800;
            background: rgba(255,255,255,.74);
        }
        .hero-badge i {
            display: inline-grid;
            place-items: center;
            width: 21px;
            height: 21px;
            border-radius: 50%;
            color: #fff;
            font-size: .65rem;
            background: var(--primary);
        }
        .hero h1 {
            max-width: 690px;
            margin: 0 0 22px;
            color: #10192b;
            font-size: clamp(2.35rem, 5vw, 4.45rem);
            font-weight: 850;
            letter-spacing: -.075em;
            line-height: 1.08;
        }
        .hero h1 span { color: var(--primary); }
        .hero-lead { max-width: 600px; margin: 0 0 30px; color: var(--ink-soft); font-size: clamp(1rem, 1.55vw, 1.15rem); }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 30px; }
        .btn-hero {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 51px;
            padding: .75rem 1.25rem;
            border-radius: 14px;
            font-weight: 800;
        }
        .btn-hero-primary { color: #fff; background: var(--primary); box-shadow: 0 12px 24px rgba(118,87,237,.23); }
        .btn-hero-primary:hover { color: #fff; background: var(--primary-dark); transform: translateY(-2px); }
        .btn-hero-light { border: 1px solid var(--line); color: var(--ink); background: #fff; }
        .btn-hero-light:hover { border-color: #c6baff; color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
        .trust-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 23px; color: var(--ink-muted); font-size: .84rem; font-weight: 650; }
        .trust-row span { display: inline-flex; align-items: center; gap: 7px; }
        .trust-row i { color: var(--mint); }

        .player-shell {
            position: relative;
            min-height: 410px;
            padding: 18px;
            border: 1px solid rgba(255,255,255,.73);
            border-radius: 28px;
            background: rgba(255,255,255,.67);
            box-shadow: var(--shadow-lg);
            backdrop-filter: blur(11px);
        }
        .player-canvas {
            position: relative;
            height: 374px;
            overflow: hidden;
            border-radius: 20px;
            color: #fff;
            background:
                linear-gradient(120deg, rgba(13,20,42,.11) 0%, rgba(11,17,34,.6) 100%),
                radial-gradient(circle at 75% 25%, #7657ed 0%, #4733a9 24%, rgba(51,37,111,.12) 46%, transparent 47%),
                linear-gradient(145deg, #243651 0%, #18263d 44%, #0b1525 100%);
        }
        .player-canvas::before {
            position: absolute;
            top: 50%;
            left: -5%;
            width: 112%;
            height: 100px;
            content: "";
            opacity: .28;
            background: repeating-linear-gradient(90deg, transparent 0 8px, #bdadff 8px 11px, transparent 11px 18px);
            clip-path: polygon(0 55%, 4% 15%, 7% 76%, 12% 31%, 15% 62%, 20% 0, 24% 85%, 29% 35%, 33% 56%, 39% 15%, 43% 82%, 48% 42%, 52% 60%, 58% 12%, 62% 74%, 68% 28%, 72% 67%, 77% 7%, 81% 81%, 87% 39%, 91% 58%, 96% 16%, 100% 52%, 100% 100%, 0 100%);
        }
        .player-top { position: absolute; top: 19px; left: 20px; right: 20px; display: flex; align-items: center; justify-content: space-between; }
        .live-dot { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 800; letter-spacing: .06em; }
        .live-dot::before { width: 7px; height: 7px; border-radius: 50%; content: ""; background: #ff7e72; box-shadow: 0 0 0 4px rgba(255,126,114,.16); }
        .canvas-menu { display: flex; gap: 5px; }
        .canvas-menu i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.8); }
        .player-title { position: absolute; right: 24px; bottom: 93px; left: 24px; }
        .player-title small { display: block; margin-bottom: 7px; color: #c5ceea; font-size: .75rem; font-weight: 700; letter-spacing: .08em; }
        .player-title strong { display: block; max-width: 330px; font-size: clamp(1.3rem, 2.4vw, 1.85rem); letter-spacing: -.04em; line-height: 1.25; }
        .player-controls {
            position: absolute;
            right: 20px;
            bottom: 18px;
            left: 20px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .play-button {
            display: inline-grid;
            place-items: center;
            width: 42px;
            height: 42px;
            flex: 0 0 42px;
            border-radius: 50%;
            color: #281c67;
            background: #fff;
            transition: var(--ease);
        }
        .play-button:hover { color: #fff; background: var(--primary); transform: scale(1.07); }
        .progress { height: 4px; flex-grow: 1; border-radius: 9px; background: rgba(255,255,255,.24); }
        .progress-bar { width: 37%; border-radius: 9px; background: #c2b3ff; }
        .time-label { color: #e3e8f7; font-size: .7rem; font-weight: 700; white-space: nowrap; }
        .player-caption {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 15px 3px 1px;
            color: var(--ink-soft);
            font-size: .8rem;
        }
        .player-caption i { color: var(--primary); }

        .metrics { margin-top: -1px; padding: 0 0 42px; background: #fbfcff; }
        .metrics-inner {
            display: grid;
            grid-template-columns: 1.2fr repeat(3, 1fr);
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: 18px;
            background: #fff;
            box-shadow: var(--shadow-sm);
        }
        .metric-intro, .metric { padding: 22px 26px; }
        .metric-intro { color: var(--ink-soft); font-size: .88rem; font-weight: 650; }
        .metric-intro strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 1rem; }
        .metric { border-left: 1px solid var(--line); }
        .metric-number { display: block; margin-bottom: 2px; color: var(--primary); font-size: 1.45rem; font-weight: 850; letter-spacing: -.04em; }
        .metric-label { color: var(--ink-muted); font-size: .78rem; font-weight: 650; }

        .feature-card {
            height: 100%;
            padding: 29px;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: #fff;
            box-shadow: 0 5px 16px rgba(34,49,74,.025);
            transition: var(--ease);
        }
        .feature-card:hover { border-color: #d4caff; transform: translateY(-6px); box-shadow: var(--shadow-md); }
        .feature-icon {
            display: inline-grid;
            place-items: center;
            width: 48px;
            height: 48px;
            margin-bottom: 20px;
            border-radius: 15px;
            color: var(--primary);
            font-size: 1.1rem;
            background: var(--primary-pale);
        }
        .feature-card:nth-child(2) .feature-icon { color: #159979; background: var(--mint-pale); }
        .feature-card:nth-child(3) .feature-icon { color: #cc7b24; background: #fff3e5; }
        .feature-card h3 { margin: 0 0 9px; font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; }
        .feature-card p { margin: 0; color: var(--ink-soft); font-size: .91rem; }

        .showcase-wrap { display: grid; grid-template-columns: .86fr 1.14fr; gap: 55px; align-items: center; }
        .content-art {
            position: relative;
            min-height: 467px;
            overflow: hidden;
            border-radius: var(--radius-lg);
            background: #142036;
            box-shadow: var(--shadow-lg);
        }
        .content-art::before {
            position: absolute;
            top: -15%;
            right: -24%;
            width: 93%;
            aspect-ratio: 1;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 50%;
            content: "";
            box-shadow: 0 0 0 38px rgba(255,255,255,.035), 0 0 0 77px rgba(255,255,255,.025);
        }
        .content-art::after {
            position: absolute;
            bottom: -30px;
            left: -25px;
            width: 95%;
            height: 155px;
            content: "";
            opacity: .52;
            background: repeating-linear-gradient(90deg, #42d2b0 0 7px, transparent 7px 14px);
            clip-path: polygon(0 75%, 5% 51%, 9% 80%, 14% 20%, 18% 65%, 23% 38%, 28% 86%, 33% 49%, 38% 61%, 43% 15%, 48% 75%, 53% 28%, 57% 58%, 62% 6%, 67% 82%, 72% 42%, 77% 71%, 82% 22%, 87% 67%, 92% 35%, 100% 59%, 100% 100%, 0 100%);
        }
        .art-text { position: absolute; z-index: 1; top: 46px; left: 43px; right: 25px; color: #fff; }
        .art-text span { display: inline-flex; margin-bottom: 13px; padding: 5px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #cceae4; font-size: .71rem; font-weight: 800; letter-spacing: .08em; }
        .art-text h3 { max-width: 280px; margin: 0; font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 800; letter-spacing: -.055em; line-height: 1.18; }
        .art-card {
            position: absolute;
            z-index: 2;
            right: 28px;
            bottom: 46px;
            left: 28px;
            display: flex;
            align-items: center;
            gap: 13px;
            padding: 15px;
            border: 1px solid rgba(255,255,255,.15);
            border-radius: 16px;
            color: #fff;
            background: rgba(14,25,43,.64);
            backdrop-filter: blur(10px);
        }
        .art-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #213d42; background: #9ee3d2; }
        .art-card strong { display: block; font-size: .87rem; }
        .art-card small { display: block; color: #b7c7d6; font-size: .72rem; }
        .showcase-copy .eyebrow { color: #159979; }
        .showcase-copy h2 { margin: 0 0 17px; font-size: clamp(1.85rem, 3vw, 2.7rem); font-weight: 800; letter-spacing: -.05em; line-height: 1.22; }
        .showcase-copy > p { margin-bottom: 24px; color: var(--ink-soft); }
        .curated-list { margin: 0; padding: 0; list-style: none; }
        .curated-list li { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
        .curated-list li:last-child { border-bottom: 1px solid var(--line); }
        .list-check { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 25px; margin-top: 1px; border-radius: 8px; color: #159979; font-size: .72rem; background: var(--mint-pale); }
        .curated-list strong { display: block; margin-bottom: 1px; font-size: .94rem; }
        .curated-list span { display: block; color: var(--ink-muted); font-size: .83rem; }

        .collection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
        .collection-card {
            position: relative;
            min-height: 265px;
            overflow: hidden;
            padding: 23px;
            border-radius: var(--radius-md);
            color: #fff;
            background: #1d2d46;
            box-shadow: var(--shadow-sm);
            transition: var(--ease);
        }
        .collection-card:hover { color: #fff; transform: translateY(-6px); box-shadow: var(--shadow-md); }
        .collection-card::before {
            position: absolute;
            width: 250px;
            height: 250px;
            border-radius: 50%;
            content: "";
            opacity: .8;
            transition: var(--ease);
        }
        .collection-card:hover::before { transform: scale(1.12) translate(-8px, 5px); }
        .collection-card:nth-child(1) { background: #263358; }
        .collection-card:nth-child(1)::before { right: -72px; bottom: -80px; background: radial-gradient(circle at 38% 37%, #a99aff 0 5%, #6c53d6 6% 34%, #3d2e8d 35% 57%, transparent 58%); }
        .collection-card:nth-child(2) { background: #193d45; }
        .collection-card:nth-child(2)::before { right: -58px; bottom: -74px; background: radial-gradient(circle at 39% 34%, #b1f0de 0 6%, #39b99a 7% 35%, #1f6f69 36% 59%, transparent 60%); }
        .collection-card:nth-child(3) { background: #493341; }
        .collection-card:nth-child(3)::before { right: -62px; bottom: -77px; background: radial-gradient(circle at 37% 37%, #ffe0b7 0 5%, #e89a5a 6% 32%, #9d4d4d 34% 58%, transparent 59%); }
        .collection-card > * { position: relative; z-index: 1; }
        .collection-card .tag { display: inline-flex; padding: 5px 9px; border: 1px solid rgba(255,255,255,.17); border-radius: 999px; color: rgba(255,255,255,.87); font-size: .71rem; font-weight: 800; background: rgba(255,255,255,.1); }
        .collection-card h3 { max-width: 220px; margin: 51px 0 9px; font-size: 1.34rem; font-weight: 800; letter-spacing: -.035em; }
        .collection-card p { max-width: 210px; margin: 0; color: rgba(255,255,255,.73); font-size: .84rem; line-height: 1.58; }
        .collection-arrow { position: absolute!important; right: 20px; bottom: 18px; display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; color: #283451; background: #fff; }

        .process-area { position: relative; overflow: hidden; color: #fff; background: var(--surface-deep); }
        .process-area::before { position: absolute; top: -250px; right: -170px; width: 610px; height: 610px; border: 1px solid rgba(170,155,255,.16); border-radius: 50%; content: ""; box-shadow: 0 0 0 55px rgba(170,155,255,.025), 0 0 0 110px rgba(170,155,255,.02); }
        .process-area .section-heading { position: relative; }
        .process-area .eyebrow { color: #b9aeff; }
        .process-area .section-heading h2 { color: #fff; }
        .process-area .section-heading p { color: #bdc5d4; }
        .process-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
        .process-card { min-height: 250px; padding: 27px; border: 1px solid var(--line-dark); border-radius: var(--radius-md); background: rgba(255,255,255,.045); transition: var(--ease); }
        .process-card:hover { border-color: rgba(185,174,255,.52); background: rgba(255,255,255,.075); transform: translateY(-5px); }
        .process-number { display: block; margin-bottom: 39px; color: #ad9eff; font-size: .76rem; font-weight: 800; letter-spacing: .13em; }
        .process-card i { display: block; margin-bottom: 15px; color: #a9f0de; font-size: 1.35rem; }
        .process-card h3 { margin: 0 0 8px; color: #fff; font-size: 1.08rem; font-weight: 800; }
        .process-card p { margin: 0; color: #b8c2d2; font-size: .87rem; }

        .insight-list { border-top: 1px solid var(--line); }
        .insight-item { display: grid; grid-template-columns: 115px 1fr auto; gap: 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
        .insight-type { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-width: 75px; padding: 5px 9px; border-radius: 7px; color: #5f47c8; font-size: .72rem; font-weight: 800; background: var(--primary-pale); }
        .insight-item:nth-child(2) .insight-type { color: #168b70; background: var(--mint-pale); }
        .insight-item:nth-child(3) .insight-type { color: #b6671f; background: #fff1df; }
        .insight-content h3 { margin: 0 0 3px; font-size: 1.04rem; font-weight: 800; }
        .insight-content p { margin: 0; color: var(--ink-muted); font-size: .86rem; }
        .read-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: .84rem; font-weight: 800; white-space: nowrap; }
        .read-link:hover { color: var(--primary); transform: translateX(3px); }

        .faq-shell { display: grid; grid-template-columns: .74fr 1.26fr; gap: 75px; align-items: start; }
        .faq-side { position: sticky; top: 105px; }
        .faq-side h2 { margin: 0 0 15px; font-size: clamp(1.9rem, 3vw, 2.65rem); font-weight: 800; letter-spacing: -.05em; line-height: 1.18; }
        .faq-side p { margin: 0 0 23px; color: var(--ink-soft); }
        .faq-link { display: inline-flex; align-items: center; gap: 9px; color: var(--primary); font-size: .9rem; font-weight: 800; }
        .faq-link:hover { color: var(--primary-dark); gap: 13px; }
        .accordion { --bs-accordion-border-color: var(--line); --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-btn-icon: none; --bs-accordion-btn-active-icon: none; }
        .accordion-item { overflow: hidden; margin-bottom: 11px; border: 1px solid var(--line)!important; border-radius: 13px!important; background: #fff; }
        .accordion-button { padding: 19px 48px 19px 20px; color: var(--ink); font-size: .96rem; font-weight: 800; line-height: 1.45; background: #fff; box-shadow: none!important; }
        .accordion-button::after { position: absolute; right: 19px; width: 23px; height: 23px; border: 0; border-radius: 7px; color: var(--primary); content: "+"; font-size: 1.25rem; font-weight: 400; line-height: 21px; text-align: center; background: var(--primary-pale); transform: none!important; }
        .accordion-button:not(.collapsed) { color: var(--primary); background: #fcfbff; }
        .accordion-button:not(.collapsed)::after { content: "−"; }
        .accordion-body { padding: 0 20px 19px; color: var(--ink-soft); font-size: .9rem; }

        .cta-section { padding: 20px 0 104px; }
        .cta-box { position: relative; overflow: hidden; padding: 67px 58px; border-radius: var(--radius-lg); color: #fff; background: #6c50dc; box-shadow: 0 23px 50px rgba(86,62,183,.23); }
        .cta-box::before { position: absolute; top: -164px; right: -66px; width: 490px; height: 490px; border: 1px solid rgba(255,255,255,.19); border-radius: 50%; content: ""; box-shadow: 0 0 0 48px rgba(255,255,255,.07), 0 0 0 98px rgba(255,255,255,.05); }
        .cta-box::after { position: absolute; bottom: -195px; left: 17%; width: 500px; height: 250px; border-radius: 50%; content: ""; opacity: .2; background: #c3b8ff; filter: blur(30px); }
        .cta-content { position: relative; z-index: 1; max-width: 670px; }
        .cta-content .eyebrow { color: #ded8ff; }
        .cta-content h2 { margin: 0 0 16px; font-size: clamp(2rem, 3.5vw, 3.25rem); font-weight: 850; letter-spacing: -.06em; line-height: 1.17; }
        .cta-content p { max-width: 620px; margin: 0 0 27px; color: rgba(255,255,255,.84); }
        .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
        .btn-cta-white { display: inline-flex; align-items: center; gap: 9px; padding: .82rem 1.15rem; border-radius: 12px; color: #5039bd; font-size: .9rem; font-weight: 800; background: #fff; }
        .btn-cta-white:hover { color: #422aa9; transform: translateY(-2px); box-shadow: 0 10px 18px rgba(31,17,86,.2); }
        .btn-cta-ghost { display: inline-flex; align-items: center; gap: 9px; padding: .8rem 1.1rem; border: 1px solid rgba(255,255,255,.38); border-radius: 12px; color: #fff; font-size: .9rem; font-weight: 800; }
        .btn-cta-ghost:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.12); }

        .site-footer { padding: 58px 0 25px; color: #b6c0d0; background: var(--surface-deeper); }
        .footer-top { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 46px; padding-bottom: 42px; }
        .footer-brand { display: flex; align-items: flex-start; gap: 11px; color: #fff; font-size: 1rem; font-weight: 800; line-height: 1.42; }
        .footer-brand .brand-mark { margin: 0; }
        .footer-desc { max-width: 415px; margin: 16px 0 0; color: #94a1b5; font-size: .86rem; }
        .footer-col h3 { margin: 0 0 15px; color: #fff; font-size: .85rem; font-weight: 800; }
        .footer-col p, .footer-col a { display: block; margin-bottom: 8px; color: #9ca9bd; font-size: .84rem; }
        .footer-col a:hover { color: #d5ccff; }
        .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); color: #77849a; font-size: .77rem; }
        .footer-bottom span:last-child { text-align: right; }

        @media (max-width: 1199px) {
            .navbar-brand { max-width: 285px; margin-right: 18px; }
            .command-search { width: 155px; }
            .hero-grid { gap: 42px; }
            .showcase-wrap { gap: 40px; }
        }
        @media (max-width: 1024px) {
            .section { padding: 80px 0; }
            .hero { padding-top: 70px; }
            .hero-grid { grid-template-columns: 1fr .86fr; gap: 30px; }
            .player-shell { min-height: 370px; }
            .player-canvas { height: 334px; }
            .faq-shell { gap: 45px; }
            .cta-box { padding: 53px 44px; }
        }
        @media (max-width: 991px) {
            .navbar { min-height: 68px; }
            .navbar-collapse { padding: 14px 0 5px; }
            .navbar-nav { padding: 7px 0 13px; }
            .nav-link { padding: .65rem .2rem!important; }
            .nav-link::after { right: auto; bottom: 3px; left: 2px; width: 24px; }
            .header-actions { align-items: center; padding-top: 5px; }
            .command-search { width: min(100%, 265px); }
            .hero-grid, .showcase-wrap, .faq-shell { grid-template-columns: 1fr; }
            .hero-grid { gap: 40px; }
            .hero-copy { max-width: 710px; }
            .player-shell { max-width: 630px; }
            .showcase-copy { max-width: 710px; }
            .content-art { max-width: 570px; min-height: 410px; }
            .faq-side { position: static; }
            .faq-side p { max-width: 600px; }
            .footer-top { grid-template-columns: 1.2fr 1fr; }
            .footer-top > :first-child { grid-column: 1 / -1; }
        }
        @media (max-width: 767px) {
            .site-container { width: min(calc(100% - 32px), var(--container)); }
            .section { padding: 66px 0; }
            .hero { padding: 55px 0 32px; }
            .hero h1 { font-size: clamp(2.25rem, 10vw, 3.35rem); }
            .hero-lead { font-size: 1rem; }
            .hero-actions .btn-hero { flex: 1 1 210px; }
            .player-shell { min-height: 340px; padding: 12px; border-radius: 22px; }
            .player-canvas { height: 312px; border-radius: 15px; }
            .metrics { padding-bottom: 28px; }
            .metrics-inner { grid-template-columns: 1fr 1fr; }
            .metric-intro { grid-column: 1 / -1; border-bottom: 1px solid var(--line); }
            .metric:nth-child(2) { border-left: 0; }
            .metric:nth-child(4) { border-top: 1px solid var(--line); border-left: 0; }
            .metric:nth-child(3) { border-top: 1px solid var(--line); }
            .collection-grid, .process-grid { grid-template-columns: 1fr; }
            .collection-card { min-height: 230px; }
            .process-card { min-height: 205px; }
            .process-number { margin-bottom: 25px; }
            .insight-item { grid-template-columns: 95px 1fr; gap: 14px; }
            .read-link { grid-column: 2; width: fit-content; }
            .cta-section { padding-bottom: 70px; }
            .cta-box { padding: 43px 27px; border-radius: 23px; }
            .footer-top { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
        }
        @media (max-width: 520px) {
            .navbar-brand { max-width: calc(100vw - 104px); margin-right: 0; font-size: .82rem; }
            .brand-mark { width: 30px; height: 30px; flex-basis: 30px; margin-right: 8px; }
            .header-actions { gap: 8px; }
            .header-shortcut { display: none; }
            .btn-brand { padding: .63rem .75rem; font-size: .8rem; }
            .command-search { width: 100%; }
            .hero-badge { font-size: .73rem; }
            .trust-row { gap: 10px 15px; }
            .player-title { right: 17px; bottom: 82px; left: 17px; }
            .player-title strong { font-size: 1.22rem; }
            .player-top, .player-controls { right: 14px; left: 14px; }
            .metrics-inner { display: block; }
            .metric-intro, .metric { border: 0!important; border-bottom: 1px solid var(--line)!important; }
            .metric:last-child { border-bottom: 0!important; }
            .feature-card { padding: 24px; }
            .content-art { min-height: 365px; }
            .art-text { top: 31px; left: 28px; }
            .art-card { right: 17px; bottom: 24px; left: 17px; }
            .insight-item { grid-template-columns: 1fr; gap: 9px; }
            .read-link { grid-column: auto; margin-top: 4px; }
            .footer-top { grid-template-columns: 1fr; }
            .footer-top > :first-child { grid-column: auto; }
            .footer-bottom { display: block; }
            .footer-bottom span { display: block; }
            .footer-bottom span + span { margin-top: 5px; text-align: left; }
        }