/* roulang page: index */
:root {
            --primary: #7657e8;
            --primary-dark: #5635c3;
            --primary-soft: #eee9ff;
            --accent: #ff8fba;
            --accent-strong: #f45f9a;
            --mint: #55d6bd;
            --ink: #211c35;
            --text: #4f4962;
            --muted: #7c758f;
            --surface: #ffffff;
            --surface-soft: #f8f6fc;
            --surface-lilac: #f1edff;
            --dark: #17122c;
            --dark-soft: #251e42;
            --border: rgba(55, 42, 91, .12);
            --border-dark: rgba(255, 255, 255, .12);
            --success: #278f78;
            --warning: #d27932;
            --danger: #c84f67;
            --shadow-sm: 0 10px 28px rgba(38, 28, 71, .08);
            --shadow-md: 0 20px 55px rgba(38, 28, 71, .14);
            --shadow-lg: 0 30px 80px rgba(20, 13, 48, .2);
            --radius-sm: 12px;
            --radius-md: 20px;
            --radius-lg: 32px;
            --radius-pill: 999px;
            --container: 1200px;
            --section-space: clamp(72px, 8vw, 112px);
            --transition: 220ms ease;
        }

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

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

        body {
            margin: 0;
            color: var(--text);
            background: var(--surface);
            font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
            font-size: 16px;
            line-height: 1.8;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

        body.menu-open {
            overflow: hidden;
        }

        h1,
        h2,
        h3,
        h4,
        p,
        ul,
        ol,
        figure,
        blockquote {
            margin-top: 0;
        }

        h1,
        h2,
        h3,
        h4 {
            color: var(--ink);
            font-weight: 800;
            line-height: 1.25;
            letter-spacing: -.025em;
        }

        h1 {
            font-size: clamp(2.35rem, 5.2vw, 4.85rem);
        }

        h2 {
            font-size: clamp(1.85rem, 3.5vw, 3.05rem);
        }

        h3 {
            font-size: clamp(1.12rem, 1.7vw, 1.42rem);
        }

        p {
            margin-bottom: 1.2rem;
        }

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

        button,
        input {
            font: inherit;
        }

        button {
            cursor: pointer;
        }

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

        ul {
            padding-left: 0;
        }

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

        :focus-visible {
            outline: 3px solid rgba(118, 87, 232, .35);
            outline-offset: 4px;
        }

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

        .section {
            position: relative;
            padding: var(--section-space) 0;
        }

        .section-soft {
            background: var(--surface-soft);
        }

        .section-lilac {
            background: var(--surface-lilac);
        }

        .section-dark {
            color: rgba(255,255,255,.78);
            background:
                radial-gradient(circle at 10% 20%, rgba(118,87,232,.28), transparent 32%),
                radial-gradient(circle at 88% 75%, rgba(255,143,186,.16), transparent 34%),
                var(--dark);
        }

        .section-dark h2,
        .section-dark h3 {
            color: #fff;
        }

        .section-heading {
            max-width: 780px;
            margin-bottom: 44px;
        }

        .section-heading.centered {
            margin-inline: auto;
            text-align: center;
        }

        .section-heading p {
            margin-bottom: 0;
            color: var(--muted);
            font-size: 1.05rem;
        }

        .section-dark .section-heading p {
            color: rgba(255,255,255,.67);
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 16px;
            color: var(--primary-dark);
            font-size: .78rem;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
        }

        .eyebrow::before {
            width: 28px;
            height: 2px;
            content: "";
            background: currentColor;
            border-radius: 2px;
        }

        .section-dark .eyebrow {
            color: #beaefe;
        }

        .badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-height: 30px;
            padding: 5px 12px;
            color: var(--primary-dark);
            background: var(--primary-soft);
            border: 1px solid rgba(118, 87, 232, .14);
            border-radius: var(--radius-pill);
            font-size: .78rem;
            font-weight: 800;
            line-height: 1.2;
        }

        .badge-mint {
            color: #166f5e;
            background: #e4faf4;
            border-color: rgba(39,143,120,.16);
        }

        .badge-pink {
            color: #a33263;
            background: #fff0f6;
            border-color: rgba(244,95,154,.16);
        }

        .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 50px;
            margin: 0;
            padding: 13px 22px;
            color: #fff;
            background: var(--primary);
            border: 1px solid var(--primary);
            border-radius: var(--radius-pill);
            box-shadow: 0 12px 28px rgba(86, 53, 195, .24);
            font-weight: 800;
            line-height: 1.2;
        }

        .button:hover,
        .button:focus {
            color: #fff;
            background: var(--primary-dark);
            border-color: var(--primary-dark);
            box-shadow: 0 16px 34px rgba(86, 53, 195, .32);
            transform: translateY(-2px);
        }

        .button.hollow {
            color: var(--ink);
            background: rgba(255,255,255,.8);
            border-color: var(--border);
            box-shadow: none;
        }

        .button.hollow:hover,
        .button.hollow:focus {
            color: var(--primary-dark);
            background: #fff;
            border-color: rgba(118,87,232,.34);
        }

        .button.small {
            min-height: 42px;
            padding: 10px 18px;
            font-size: .9rem;
        }

        .icon-box {
            display: inline-grid;
            width: 46px;
            height: 46px;
            flex: 0 0 46px;
            place-items: center;
            color: var(--primary-dark);
            background: var(--primary-soft);
            border-radius: 14px;
            font-size: 1.15rem;
            font-weight: 900;
        }

        .site-header {
            position: sticky;
            z-index: 1000;
            top: 0;
            background: rgba(255,255,255,.9);
            border-bottom: 1px solid var(--border);
            box-shadow: 0 8px 30px rgba(38,28,71,.05);
            backdrop-filter: blur(18px);
        }

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

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

        .brand-mark {
            position: relative;
            display: grid;
            width: 44px;
            height: 44px;
            color: #fff;
            background: linear-gradient(145deg, var(--primary), var(--accent));
            border-radius: 15px;
            box-shadow: 0 10px 24px rgba(118,87,232,.25);
            place-items: center;
            font-size: 1.02rem;
            font-weight: 900;
            letter-spacing: -.05em;
            overflow: hidden;
        }

        .brand-mark::after {
            position: absolute;
            width: 24px;
            height: 24px;
            right: -9px;
            bottom: -8px;
            content: "";
            background: rgba(255,255,255,.3);
            border-radius: 50%;
        }

        .brand-copy {
            display: flex;
            flex-direction: column;
            line-height: 1.25;
        }

        .brand-copy strong {
            color: var(--ink);
            font-size: 1.02rem;
            letter-spacing: -.02em;
        }

        .brand-copy small {
            color: var(--muted);
            font-size: .7rem;
        }

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

        .desktop-nav a {
            position: relative;
            padding: 10px 16px;
            color: var(--text);
            border-radius: var(--radius-pill);
            font-size: .94rem;
            font-weight: 700;
        }

        .desktop-nav a:hover {
            color: var(--primary-dark);
            background: var(--primary-soft);
        }

        .desktop-nav a.active {
            color: #fff;
            background: var(--primary);
        }

        .location-chip {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            margin-left: 8px;
            padding: 9px 13px;
            color: var(--text);
            background: var(--surface-soft);
            border: 1px solid var(--border);
            border-radius: var(--radius-pill);
            font-size: .82rem;
            font-weight: 700;
        }

        .location-dot {
            position: relative;
            width: 10px;
            height: 10px;
            background: var(--accent-strong);
            border-radius: 50%;
        }

        .location-dot::after {
            position: absolute;
            inset: -4px;
            content: "";
            border: 1px solid rgba(244,95,154,.35);
            border-radius: 50%;
        }

        .menu-toggle {
            display: none;
            width: 44px;
            height: 44px;
            margin-left: auto;
            padding: 0;
            background: var(--surface-soft);
            border: 1px solid var(--border);
            border-radius: 13px;
        }

        .menu-toggle span,
        .menu-toggle::before,
        .menu-toggle::after {
            display: block;
            width: 20px;
            height: 2px;
            margin: 4px auto;
            content: "";
            background: var(--ink);
            border-radius: 2px;
            transition: transform var(--transition), opacity var(--transition);
        }

        .menu-toggle.active span {
            opacity: 0;
        }

        .menu-toggle.active::before {
            transform: translateY(6px) rotate(45deg);
        }

        .menu-toggle.active::after {
            transform: translateY(-6px) rotate(-45deg);
        }

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

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

        .mobile-nav a {
            display: block;
            margin-top: 10px;
            padding: 13px 15px;
            color: var(--text);
            background: var(--surface-soft);
            border-radius: 13px;
            font-weight: 750;
        }

        .mobile-nav a.active {
            color: #fff;
            background: var(--primary);
        }

        .mobile-location {
            display: flex;
            align-items: center;
            gap: 9px;
            margin-top: 10px;
            padding: 13px 15px;
            color: var(--muted);
            border: 1px dashed var(--border);
            border-radius: 13px;
            font-size: .86rem;
        }

        .hero {
            position: relative;
            min-height: 780px;
            padding: clamp(72px, 9vw, 125px) 0 80px;
            color: #fff;
            background:
                radial-gradient(circle at 15% 20%, rgba(255,143,186,.3), transparent 28%),
                radial-gradient(circle at 83% 18%, rgba(85,214,189,.18), transparent 26%),
                linear-gradient(135deg, #17112f 0%, #282052 48%, #422a6f 100%);
            overflow: hidden;
        }

        .hero::before {
            position: absolute;
            inset: 0;
            content: "";
            opacity: .26;
            background-image:
                linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
            background-size: 52px 52px;
            mask-image: linear-gradient(to bottom, #000, transparent 90%);
        }

        .hero-orb {
            position: absolute;
            border: 1px solid rgba(255,255,255,.18);
            border-radius: 50%;
            animation: float 8s ease-in-out infinite;
        }

        .hero-orb.one {
            width: 160px;
            height: 160px;
            top: 110px;
            left: -70px;
        }

        .hero-orb.two {
            width: 90px;
            height: 90px;
            right: 5%;
            bottom: 90px;
            animation-delay: -3s;
        }

        @keyframes float {
            50% { transform: translateY(-18px) rotate(8deg); }
        }

        .hero-stage {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: minmax(0, 1fr) 360px minmax(0, .72fr);
            align-items: center;
            gap: clamp(28px, 5vw, 68px);
        }

        .hero-copy {
            max-width: 660px;
        }

        .hero-kicker {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            margin-bottom: 20px;
            padding: 7px 13px;
            color: #f1ebff;
            background: rgba(255,255,255,.1);
            border: 1px solid rgba(255,255,255,.16);
            border-radius: var(--radius-pill);
            font-size: .82rem;
            font-weight: 800;
            backdrop-filter: blur(10px);
        }

        .hero-kicker i {
            width: 8px;
            height: 8px;
            background: var(--mint);
            border-radius: 50%;
            box-shadow: 0 0 0 5px rgba(85,214,189,.12);
        }

        .hero h1 {
            max-width: 780px;
            margin-bottom: 24px;
            color: #fff;
            text-wrap: balance;
        }

        .hero-lead {
            max-width: 650px;
            margin-bottom: 30px;
            color: rgba(255,255,255,.76);
            font-size: clamp(1rem, 1.45vw, 1.13rem);
            line-height: 2;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .hero .button {
            background: linear-gradient(135deg, #9174ff, #f574aa);
            border: 0;
        }

        .hero .button:hover {
            background: linear-gradient(135deg, #7d5de9, #e85d99);
        }

        .hero .button.hollow {
            color: #fff;
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.2);
            box-shadow: none;
        }

        .hero .button.hollow:hover {
            background: rgba(255,255,255,.15);
        }

        .portrait-panel {
            position: relative;
            min-height: 560px;
            padding: 20px;
            background: linear-gradient(165deg, rgba(255,255,255,.17), rgba(255,255,255,.06));
            border: 1px solid rgba(255,255,255,.22);
            border-radius: 44px;
            box-shadow: var(--shadow-lg);
            backdrop-filter: blur(16px);
            overflow: hidden;
        }

        .portrait-panel::before {
            position: absolute;
            inset: 70px 30px 100px;
            content: "";
            background:
                radial-gradient(circle at 50% 30%, rgba(255,255,255,.8) 0 7%, transparent 8%),
                radial-gradient(ellipse at 50% 76%, rgba(118,87,232,.92) 0 34%, transparent 35%),
                linear-gradient(160deg, transparent 35%, rgba(255,143,186,.75) 36% 56%, transparent 57%);
            border-radius: 180px 180px 42px 42px;
            filter: saturate(1.15);
        }

        .portrait-panel::after {
            position: absolute;
            inset: 0;
            content: "";
            background: linear-gradient(to bottom, transparent 52%, rgba(18,12,45,.82));
        }

        .portrait-top,
        .portrait-bottom {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .portrait-status {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 10px;
            color: #fff;
            background: rgba(16,11,42,.38);
            border: 1px solid rgba(255,255,255,.15);
            border-radius: var(--radius-pill);
            font-size: .72rem;
            font-weight: 800;
        }

        .portrait-status::before {
            width: 7px;
            height: 7px;
            content: "";
            background: var(--mint);
            border-radius: 50%;
        }

        .portrait-counter {
            color: rgba(255,255,255,.75);
            font-size: .74rem;
            font-weight: 700;
        }

        .portrait-bottom {
            position: absolute;
            right: 20px;
            bottom: 22px;
            left: 20px;
            display: block;
        }

        .portrait-bottom strong {
            display: block;
            margin-bottom: 7px;
            color: #fff;
            font-size: 1.32rem;
        }

        .portrait-bottom span {
            color: rgba(255,255,255,.67);
            font-size: .83rem;
        }

        .hero-side {
            display: grid;
            gap: 14px;
        }

        .side-note {
            padding: 19px;
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.14);
            border-radius: 20px;
            backdrop-filter: blur(10px);
        }

        .side-note strong {
            display: block;
            margin-bottom: 5px;
            color: #fff;
            font-size: 1rem;
        }

        .side-note span {
            color: rgba(255,255,255,.62);
            font-size: .82rem;
            line-height: 1.65;
        }

        .safety-ribbon {
            position: relative;
            z-index: 5;
            margin-top: -34px;
        }

        .ribbon-inner {
            display: grid;
            grid-template-columns: 1.15fr repeat(3, 1fr);
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 24px;
            box-shadow: var(--shadow-md);
            overflow: hidden;
        }

        .ribbon-title,
        .ribbon-item {
            padding: 24px;
        }

        .ribbon-title {
            color: #fff;
            background: var(--primary);
        }

        .ribbon-title strong {
            display: block;
            margin-bottom: 4px;
            font-size: 1.12rem;
        }

        .ribbon-title span,
        .ribbon-item span {
            font-size: .82rem;
            line-height: 1.6;
        }

        .ribbon-item {
            border-left: 1px solid var(--border);
        }

        .ribbon-item strong {
            display: block;
            margin-bottom: 4px;
            color: var(--ink);
            font-size: .96rem;
        }

        .ribbon-item span {
            color: var(--muted);
        }

        .claim-layout {
            display: grid;
            grid-template-columns: .88fr 1.12fr;
            gap: 56px;
            align-items: center;
        }

        .claim-visual {
            position: relative;
            min-height: 460px;
            padding: 42px;
            background:
                radial-gradient(circle at 75% 25%, rgba(255,143,186,.34), transparent 28%),
                linear-gradient(150deg, #ede7ff, #faf8ff);
            border: 1px solid rgba(118,87,232,.14);
            border-radius: var(--radius-lg);
            overflow: hidden;
        }

        .shield {
            display: grid;
            width: 180px;
            height: 210px;
            margin: 55px auto 0;
            color: #fff;
            background: linear-gradient(145deg, var(--primary), var(--accent));
            clip-path: polygon(50% 0, 92% 17%, 86% 72%, 50% 100%, 14% 72%, 8% 17%);
            place-items: center;
            font-size: 3.5rem;
            font-weight: 900;
            filter: drop-shadow(0 24px 24px rgba(86,53,195,.25));
        }

        .floating-label {
            position: absolute;
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 11px 14px;
            color: var(--ink);
            background: rgba(255,255,255,.88);
            border: 1px solid rgba(118,87,232,.12);
            border-radius: var(--radius-pill);
            box-shadow: var(--shadow-sm);
            font-size: .82rem;
            font-weight: 800;
            backdrop-filter: blur(10px);
        }

        .floating-label::before {
            width: 9px;
            height: 9px;
            content: "";
            background: var(--mint);
            border-radius: 50%;
        }

        .floating-label.first {
            top: 34px;
            left: 28px;
        }

        .floating-label.second {
            right: 24px;
            bottom: 48px;
        }

        .claim-list {
            display: grid;
            gap: 14px;
            margin: 30px 0 0;
            list-style: none;
        }

        .claim-list li {
            display: flex;
            gap: 14px;
            padding: 16px 18px;
            background: var(--surface-soft);
            border: 1px solid var(--border);
            border-radius: 16px;
        }

        .claim-list b {
            color: var(--ink);
        }

        .check-grid {
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 24px;
        }

        .check-board,
        .warning-board {
            padding: clamp(26px, 4vw, 42px);
            border-radius: var(--radius-lg);
        }

        .check-board {
            background: #fff;
            border: 1px solid var(--border);
            box-shadow: var(--shadow-sm);
        }

        .check-items {
            display: grid;
            gap: 0;
            margin: 25px 0 0;
            list-style: none;
        }

        .check-items li {
            display: grid;
            grid-template-columns: 42px 1fr auto;
            align-items: center;
            gap: 14px;
            padding: 18px 0;
            border-bottom: 1px solid var(--border);
        }

        .check-items li:last-child {
            border-bottom: 0;
        }

        .check-number {
            display: grid;
            width: 38px;
            height: 38px;
            color: var(--primary-dark);
            background: var(--primary-soft);
            border-radius: 12px;
            place-items: center;
            font-size: .8rem;
            font-weight: 900;
        }

        .check-copy strong {
            display: block;
            color: var(--ink);
        }

        .check-copy span {
            color: var(--muted);
            font-size: .86rem;
        }

        .check-state {
            color: var(--success);
            font-size: .78rem;
            font-weight: 800;
        }

        .warning-board {
            position: relative;
            color: rgba(255,255,255,.75);
            background: linear-gradient(155deg, #30275a, #17122c);
            overflow: hidden;
        }

        .warning-board::after {
            position: absolute;
            width: 220px;
            height: 220px;
            right: -80px;
            bottom: -90px;
            content: "";
            background: rgba(255,143,186,.17);
            border-radius: 50%;
        }

        .warning-board h3 {
            color: #fff;
        }

        .warning-list {
            position: relative;
            z-index: 2;
            display: grid;
            gap: 14px;
            margin: 28px 0 0;
            list-style: none;
        }

        .warning-list li {
            padding: 14px 16px;
            background: rgba(255,255,255,.07);
            border: 1px solid rgba(255,255,255,.1);
            border-radius: 14px;
            font-size: .91rem;
        }

        .badge-wall {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
        }

        .policy-badge {
            position: relative;
            min-height: 250px;
            padding: 28px;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 24px;
            overflow: hidden;
            transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
        }

        .policy-badge:hover {
            border-color: rgba(118,87,232,.28);
            box-shadow: var(--shadow-md);
            transform: translateY(-6px);
        }

        .policy-badge::after {
            position: absolute;
            width: 80px;
            height: 80px;
            right: -25px;
            bottom: -25px;
            content: "";
            background: var(--primary-soft);
            border-radius: 50%;
        }

        .policy-seal {
            display: grid;
            width: 54px;
            height: 54px;
            margin-bottom: 22px;
            color: #fff;
            background: linear-gradient(145deg, var(--primary), var(--accent));
            border-radius: 50%;
            box-shadow: 0 10px 25px rgba(118,87,232,.24);
            place-items: center;
            font-weight: 900;
        }

        .policy-badge p {
            margin-bottom: 0;
            color: var(--muted);
            font-size: .9rem;
        }

        .boundary-wrap {
            display: grid;
            grid-template-columns: .8fr 1.2fr;
            gap: 60px;
            align-items: start;
        }

        .boundary-sticky {
            position: sticky;
            top: 120px;
        }

        .boundary-stack {
            display: grid;
            gap: 16px;
        }

        .boundary-card {
            display: grid;
            grid-template-columns: 54px 1fr;
            gap: 18px;
            padding: 24px;
            background: rgba(255,255,255,.07);
            border: 1px solid var(--border-dark);
            border-radius: 20px;
        }

        .boundary-card .icon-box {
            color: #fff;
            background: rgba(255,255,255,.1);
        }

        .boundary-card h3 {
            margin-bottom: 8px;
        }

        .boundary-card p {
            margin-bottom: 0;
            color: rgba(255,255,255,.62);
            font-size: .92rem;
        }

        .pain-strip {
            display: grid;
            grid-template-columns: 1.25fr repeat(3, 1fr);
            gap: 0;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
        }

        .pain-intro,
        .pain-item {
            padding: 30px;
        }

        .pain-intro {
            color: #fff;
            background: linear-gradient(145deg, var(--primary), var(--primary-dark));
        }

        .pain-intro h2 {
            color: #fff;
            font-size: 1.72rem;
        }

        .pain-intro p {
            margin-bottom: 0;
            color: rgba(255,255,255,.73);
        }

        .pain-item {
            border-left: 1px solid var(--border);
        }

        .pain-item span {
            display: block;
            margin-bottom: 18px;
            color: var(--accent-strong);
            font-size: 2rem;
            font-weight: 900;
        }

        .pain-item p {
            margin-bottom: 0;
            color: var(--muted);
            font-size: .9rem;
        }

        .solution-bento {
            display: grid;
            grid-template-columns: 1.15fr .85fr .85fr;
            grid-template-rows: auto auto;
            gap: 18px;
        }

        .solution-card {
            padding: 30px;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 24px;
            transition: transform var(--transition), box-shadow var(--transition);
        }

        .solution-card:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-4px);
        }

        .solution-card.large {
            grid-row: span 2;
            min-height: 410px;
            color: rgba(255,255,255,.76);
            background:
                radial-gradient(circle at 80% 20%, rgba(255,143,186,.28), transparent 28%),
                var(--dark-soft);
        }

        .solution-card.large h3 {
            color: #fff;
            font-size: 1.8rem;
        }

        .solution-card .mini-visual {
            display: grid;
            height: 180px;
            margin-top: 36px;
            background: linear-gradient(145deg, rgba(118,87,232,.35), rgba(255,143,186,.18));
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 24px;
            place-items: center;
        }

        .mini-rings {
            position: relative;
            width: 90px;
            height: 90px;
            border: 2px solid rgba(255,255,255,.5);
            border-radius: 50%;
        }

        .mini-rings::before,
        .mini-rings::after {
            position: absolute;
            content: "";
            border: 1px solid rgba(255,255,255,.3);
            border-radius: 50%;
        }

        .mini-rings::before {
            inset: 13px;
        }

        .mini-rings::after {
            inset: 28px;
            background: var(--mint);
            border: 0;
        }

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

        .steps::before {
            position: absolute;
            top: 28px;
            right: 10%;
            left: 10%;
            height: 1px;
            content: "";
            background: linear-gradient(90deg, var(--primary), var(--accent));
        }

        .step {
            position: relative;
            z-index: 2;
        }

        .step-index {
            display: grid;
            width: 56px;
            height: 56px;
            margin-bottom: 22px;
            color: #fff;
            background: var(--primary);
            border: 7px solid var(--surface-soft);
            border-radius: 50%;
            box-shadow: 0 8px 22px rgba(86,53,195,.2);
            place-items: center;
            font-size: .82rem;
            font-weight: 900;
        }

        .step p {
            margin-bottom: 0;
            color: var(--muted);
            font-size: .9rem;
        }

        .metric-panel {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1px;
            background: var(--border-dark);
            border: 1px solid var(--border-dark);
            border-radius: 26px;
            overflow: hidden;
        }

        .metric {
            padding: 32px 26px;
            background: rgba(255,255,255,.055);
        }

        .metric strong {
            display: block;
            margin-bottom: 7px;
            color: #fff;
            font-size: clamp(1.8rem, 3vw, 2.8rem);
            line-height: 1;
        }

        .metric span {
            color: rgba(255,255,255,.62);
            font-size: .84rem;
        }

        .voice-grid {
            display: grid;
            grid-template-columns: .9fr 1.1fr;
            gap: 28px;
            align-items: stretch;
        }

        .voice-feature {
            padding: 38px;
            color: rgba(255,255,255,.72);
            background:
                radial-gradient(circle at 90% 10%, rgba(85,214,189,.18), transparent 28%),
                var(--dark-soft);
            border-radius: var(--radius-lg);
        }

        .voice-feature h2 {
            color: #fff;
        }

        .voice-feature .quote-mark {
            display: block;
            color: var(--accent);
            font-family: Georgia, serif;
            font-size: 4rem;
            line-height: .8;
        }

        .voice-list {
            display: grid;
            gap: 14px;
        }

        .voice-item {
            display: flex;
            gap: 16px;
            padding: 22px;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 20px;
        }

        .voice-item strong {
            display: block;
            margin-bottom: 4px;
            color: var(--ink);
        }

        .voice-item p {
            margin-bottom: 0;
            color: var(--muted);
            font-size: .9rem;
        }

        .audience-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
        }

        .audience-card {
            padding: 28px;
            background: linear-gradient(180deg, #fff, #fbfaff);
            border: 1px solid var(--border);
            border-radius: 22px;
        }

        .audience-card:nth-child(2) {
            transform: translateY(18px);
        }

        .audience-card h3 {
            margin-top: 18px;
        }

        .audience-card p {
            margin-bottom: 0;
            color: var(--muted);
            font-size: .91rem;
        }

        .release-box {
            display: grid;
            grid-template-columns: .82fr 1.18fr;
            color: #fff;
            background:
                radial-gradient(circle at 10% 80%, rgba(255,143,186,.2), transparent 25%),
                linear-gradient(135deg, #211944, #442c72);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
            overflow: hidden;
        }

        .release-copy {
            padding: clamp(32px, 5vw, 58px);
        }

        .release-copy h2 {
            color: #fff;
        }

        .release-copy p {
            color: rgba(255,255,255,.66);
        }

        .release-countdown {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-top: 28px;
        }

        .count-unit {
            padding: 17px 10px;
            text-align: center;
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 16px;
        }

        .count-unit strong {
            display: block;
            color: #fff;
            font-size: 1.65rem;
            line-height: 1.2;
        }

        .count-unit span {
            color: rgba(255,255,255,.54);
            font-size: .72rem;
        }

        .release-notes {
            display: grid;
            align-content: center;
            gap: 14px;
            padding: clamp(30px, 5vw, 55px);
            background: rgba(255,255,255,.07);
        }

        .release-note {
            display: grid;
            grid-template-columns: 74px 1fr;
            gap: 14px;
            padding: 16px;
            background: rgba(255,255,255,.07);
            border: 1px solid rgba(255,255,255,.1);
            border-radius: 16px;
        }

        .release-note time {
            color: #cdbfff;
            font-size: .8rem;
            font-weight: 800;
        }

        .release-note strong {
            display: block;
            color: #fff;
        }

        .release-note span {
            color: rgba(255,255,255,.58);
            font-size: .84rem;
        }

        .feature-stage {
            position: relative;
            min-height: 430px;
        }

        .feature-slide {
            display: none;
            grid-template-columns: .9fr 1.1fr;
            gap: 50px;
            align-items: center;
            animation: slideFade .45s ease;
        }

        .feature-slide.active {
            display: grid;
        }

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

        .feature-art {
            position: relative;
            min-height: 360px;
            background:
                radial-gradient(circle at 30% 20%, rgba(255,143,186,.4), transparent 25%),
                linear-gradient(145deg, #e9e2ff, #fdfbff);
            border: 1px solid rgba(118,87,232,.14);
            border-radius: var(--radius-lg);
            overflow: hidden;
        }

        .feature-art .art-card {
            position: absolute;
            padding: 22px;
            background: rgba(255,255,255,.87);
            border: 1px solid rgba(118,87,232,.12);
            border-radius: 20px;
            box-shadow: var(--shadow-md);
            backdrop-filter: blur(10px);
        }

        .feature-art .art-card.main {
            width: 62%;
            top: 62px;
            left: 18%;
        }

        .feature-art .art-card.mini {
            right: 8%;
            bottom: 35px;
        }

        .art-lines i {
            display: block;
            height: 9px;
            margin-top: 11px;
            background: var(--primary-soft);
            border-radius: 8px;
        }

        .art-lines i:nth-child(2) {
            width: 72%;
            background: #ffe8f1;
        }

        .art-lines i:nth-child(3) {
            width: 48%;
            background: #def7f1;
        }

        .feature-copy ul {
            display: grid;
            gap: 10px;
            margin: 24px 0 0;
            list-style: none;
        }

        .feature-copy li {
            display: flex;
            gap: 10px;
            color: var(--text);
        }

        .feature-copy li::before {
            color: var(--success);
            content: "✓";
            font-weight: 900;
        }

        .slider-controls {
            display: flex;
            gap: 9px;
            margin-top: 28px;
        }

        .slider-dot {
            width: 36px;
            height: 8px;
            padding: 0;
            background: #ddd7ec;
            border: 0;
            border-radius: var(--radius-pill);
            transition: width var(--transition), background var(--transition);
        }

        .slider-dot.active {
            width: 66px;
            background: var(--primary);
        }

        .spec-layout {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 48px;
            align-items: start;
        }

        .spec-list {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 24px;
            overflow: hidden;
        }

        .spec-row {
            display: grid;
            grid-template-columns: 160px 1fr;
            gap: 20px;
            padding: 20px 24px;
            border-bottom: 1px solid var(--border);
        }

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

        .spec-row strong {
            color: var(--ink);
        }

        .spec-row span {
            color: var(--muted);
        }

        .channel-grid {
            display: grid;
            grid-template-columns: 1.35fr .85fr .85fr;
            gap: 18px;
        }

        .channel-card {
            position: relative;
            min-height: 260px;
            padding: 30px;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 24px;
            overflow: hidden;
        }

        .channel-card.primary {
            color: rgba(255,255,255,.73);
            background:
                radial-gradient(circle at 85% 20%, rgba(255,143,186,.26), transparent 28%),
                var(--dark-soft);
        }

        .channel-card.primary h3 {
            color: #fff;
        }

        .channel-card p {
            color: var(--muted);
        }

        .channel-card.primary p {
            color: rgba(255,255,255,.65);
        }

        .channel-link {
            position: absolute;
            bottom: 26px;
            left: 30px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--primary-dark);
            font-weight: 800;
        }

        .channel-card.primary .channel-link {
            color: #d8ccff;
        }

        .channel-link:hover {
            gap: 13px;
        }

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

        .news-feature {
            min-height: 430px;
            padding: 38px;
            color: rgba(255,255,255,.72);
            background:
                linear-gradient(to top, rgba(18,12,44,.96), rgba(42,29,86,.35)),
                radial-gradient(circle at 70% 15%, #b28cff, #5a3a91 45%, #211737 80%);
            border-radius: var(--radius-lg);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }

        .news-feature h3 {
            max-width: 520px;
            color: #fff;
            font-size: 1.8rem;
        }

        .news-feature p {
            margin-bottom: 0;
            color: rgba(255,255,255,.66);
        }

        .news-list {
            display: grid;
            gap: 0;
        }

        .news-item {
            display: grid;
            grid-template-columns: 78px 1fr;
            gap: 20px;
            padding: 22px 0;
            border-bottom: 1px solid var(--border);
        }

        .news-item:first-child {
            padding-top: 0;
        }

        .news-date {
            color: var(--primary-dark);
            font-size: .8rem;
            font-weight: 900;
        }

        .news-item h3 {
            margin-bottom: 6px;
            font-size: 1.08rem;
        }

        .news-item p {
            margin-bottom: 0;
            color: var(--muted);
            font-size: .87rem;
        }

        .more-row {
            margin-top: 24px;
        }

        .trust-grid {
            display: grid;
            grid-template-columns: .8fr 1.2fr;
            gap: 48px;
            align-items: center;
        }

        .trust-seal {
            position: relative;
            display: grid;
            width: min(340px, 100%);
            aspect-ratio: 1;
            margin-inline: auto;
            background: rgba(255,255,255,.05);
            border: 1px solid var(--border-dark);
            border-radius: 50%;
            place-items: center;
        }

        .trust-seal::before,
        .trust-seal::after {
            position: absolute;
            content: "";
            border: 1px dashed rgba(255,255,255,.22);
            border-radius: 50%;
        }

        .trust-seal::before {
            inset: 28px;
        }

        .trust-seal::after {
            inset: 66px;
        }

        .trust-seal span {
            position: relative;
            z-index: 2;
            color: #fff;
            font-size: 2.6rem;
            font-weight: 900;
        }

        .trust-points {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
            margin-top: 28px;
        }

        .trust-point {
            padding: 18px;
            background: rgba(255,255,255,.055);
            border: 1px solid var(--border-dark);
            border-radius: 16px;
        }

        .trust-point strong {
            display: block;
            margin-bottom: 5px;
            color: #fff;
        }

        .trust-point span {
            color: rgba(255,255,255,.56);
            font-size: .84rem;
        }

        .faq-layout {
            display: grid;
            grid-template-columns: .72fr 1.28fr;
            gap: 58px;
            align-items: start;
        }

        .faq-side {
            position: sticky;
            top: 120px;
        }

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

        .faq-item {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 18px;
            overflow: hidden;
            transition: border-color var(--transition), box-shadow var(--transition);
        }

        .faq-item.open {
            border-color: rgba(118,87,232,.28);
            box-shadow: var(--shadow-sm);
        }

        .faq-question {
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 21px 22px;
            color: var(--ink);
            background: transparent;
            border: 0;
            text-align: left;
            font-weight: 800;
        }

        .faq-icon {
            position: relative;
            width: 26px;
            height: 26px;
            flex: 0 0 26px;
            background: var(--primary-soft);
            border-radius: 50%;
        }

        .faq-icon::before,
        .faq-icon::after {
            position: absolute;
            top: 12px;
            left: 7px;
            width: 12px;
            height: 2px;
            content: "";
            background: var(--primary-dark);
            transition: transform var(--transition);
        }

        .faq-icon::after {
            transform: rotate(90deg);
        }

        .faq-item.open .faq-icon::after {
            transform: rotate(0);
        }

        .faq-answer {
            display: none;
            padding: 0 22px 22px;
            color: var(--muted);
            font-size: .94rem;
        }

        .faq-answer p {
            margin-bottom: 0;
        }

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

        .site-footer {
            padding: 62px 0 26px;
            color: rgba(255,255,255,.65);
            background: #100c22;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.25fr .75fr .75fr;
            gap: 50px;
            padding-bottom: 42px;
        }

        .footer-brand .brand-copy strong {
            color: #fff;
        }

        .footer-brand .brand-copy small {
            color: rgba(255,255,255,.47);
        }

        .footer-brand p {
            max-width: 480px;
            margin-top: 22px;
            color: rgba(255,255,255,.52);
            font-size: .9rem;
        }

        .footer-title {
            margin-bottom: 18px;
            color: #fff;
            font-size: .95rem;
        }

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

        .footer-links a {
            color: rgba(255,255,255,.58);
            font-size: .88rem;
        }

        .footer-links a:hover {
            color: #d8ccff;
        }

        .footer-note {
            padding: 16px 18px;
            background: rgba(255,255,255,.045);
            border: 1px solid var(--border-dark);
            border-radius: 15px;
            font-size: .82rem;
        }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding-top: 24px;
            border-top: 1px solid var(--border-dark);
            color: rgba(255,255,255,.4);
            font-size: .78rem;
        }

        .back-top {
            position: fixed;
            z-index: 100;
            right: 22px;
            bottom: 22px;
            display: grid;
            width: 46px;
            height: 46px;
            color: #fff;
            background: var(--primary);
            border: 0;
            border-radius: 50%;
            box-shadow: 0 12px 28px rgba(86,53,195,.28);
            place-items: center;
            opacity: 0;
            pointer-events: none;
            transform: translateY(12px);
            transition: opacity var(--transition), transform var(--transition), background var(--transition);
        }

        .back-top.visible {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }

        .back-top:hover {
            background: var(--primary-dark);
        }

        @media screen and (max-width: 1024px) {
            .hero-stage {
                grid-template-columns: 1.1fr .9fr;
            }

            .hero-side {
                grid-column: 1 / -1;
                grid-template-columns: repeat(3, 1fr);
            }

            .portrait-panel {
                min-height: 500px;
            }

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

            .ribbon-item:nth-child(3) {
                border-left: 0;
                border-top: 1px solid var(--border);
            }

            .ribbon-item:nth-child(4) {
                border-top: 1px solid var(--border);
            }

            .badge-wall,
            .metric-panel {
                grid-template-columns: repeat(2, 1fr);
            }

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

            .pain-item:nth-child(3) {
                border-left: 0;
                border-top: 1px solid var(--border);
            }

            .pain-item:nth-child(4) {
                border-top: 1px solid var(--border);
            }

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

            .solution-card.large {
                grid-column: 1 / -1;
                grid-row: auto;
            }

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

            .steps::before {
                display: none;
            }

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

            .channel-card.primary {
                grid-column: 1 / -1;
            }
        }

        @media screen and (max-width: 768px) {
            :root {
                --section-space: 72px;
            }

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

            .desktop-nav,
            .location-chip {
                display: none;
            }

            .menu-toggle {
                display: block;
            }

            .nav-shell {
                min-height: 68px;
            }

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

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

            .hero-copy {
                text-align: center;
                margin-inline: auto;
            }

            .hero-actions {
                justify-content: center;
            }

            .portrait-panel {
                width: min(390px, 100%);
                min-height: 520px;
                margin-inline: auto;
            }

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

            .ribbon-inner,
            .claim-layout,
            .check-grid,
            .boundary-wrap,
            .voice-grid,
            .release-box,
            .feature-slide,
            .spec-layout,
            .news-layout,
            .trust-grid,
            .faq-layout,
            .footer-grid {
                grid-template-columns: 1fr;
            }

            .ribbon-item {
                border-top: 1px solid var(--border);
                border-left: 0;
            }

            .claim-visual {
                min-height: 390px;
            }

            .boundary-sticky,
            .faq-side {
                position: static;
            }

            .solution-bento,
            .audience-grid,
            .channel-grid {
                grid-template-columns: 1fr;
            }

            .solution-card.large,
            .channel-card.primary {
                grid-column: auto;
            }

            .audience-card:nth-child(2) {
                transform: none;
            }

            .release-notes {
                padding-top: 0;
            }

            .feature-art {
                min-height: 330px;
            }

            .trust-seal {
                width: 280px;
            }

            .footer-grid {
                gap: 30px;
            }

            .footer-bottom {
                flex-direction: column;
            }
        }

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

            .brand-copy small {
                display: none;
            }

            .hero {
                padding-top: 48px;
            }

            .hero-actions {
                flex-direction: column;
            }

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

            .portrait-panel {
                min-height: 450px;
                border-radius: 30px;
            }

            .badge-wall,
            .metric-panel,
            .pain-strip,
            .steps,
            .trust-points {
                grid-template-columns: 1fr;
            }

            .pain-item,
            .pain-item:nth-child(3),
            .pain-item:nth-child(4) {
                border-top: 1px solid var(--border);
                border-left: 0;
            }

            .policy-badge {
                min-height: auto;
            }

            .check-items li {
                grid-template-columns: 38px 1fr;
            }

            .check-state {
                grid-column: 2;
            }

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

            .release-note {
                grid-template-columns: 1fr;
            }

            .spec-row {
                grid-template-columns: 1fr;
                gap: 5px;
            }

            .news-item {
                grid-template-columns: 1fr;
                gap: 7px;
            }

            .feature-art .art-card.main {
                width: 78%;
                left: 11%;
            }

            .back-top {
                right: 14px;
                bottom: 14px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                scroll-behavior: auto !important;
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .01ms !important;
            }
        }

/* roulang page: category1 */
:root {
 --primary: #7657e8;
 --primary-dark: #5635c3;
 --primary-soft: #eee9ff;
 --accent: #ff8fba;
 --accent-strong: #f45f9a;
 --mint: #55d6bd;
 --ink: #211c35;
 --text: #4f4962;
 --muted: #7c758f;
 --surface: #ffffff;
 --surface-soft: #f8f6fc;
 --surface-lilac: #f1edff;
 --dark: #17122c;
 --dark-soft: #251e42;
 --border: rgba(55, 42, 91, .12);
 --border-dark: rgba(255, 255, 255, .12);
 --success: #278f78;
 --warning: #d27932;
 --danger: #c84f67;
 --shadow-sm: 0 10px 28px rgba(38, 28, 71, .08);
 --shadow-md: 0 20px 55px rgba(38, 28, 71, .14);
 --shadow-lg: 0 30px 80px rgba(20, 13, 48, .2);
 --radius-sm: 12px;
 --radius-md: 20px;
 --radius-lg: 32px;
 --radius-pill: 999px;
 --container: 1200px;
 --section-space: clamp(72px, 8vw, 112px);
 --transition: 220ms ease;
}

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

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

body {
 margin: 0;
 color: var(--text);
 background: var(--surface);
 font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
 font-size: 16px;
 line-height: 1.8;
 -webkit-font-smoothing: antialiased;
 overflow-x: hidden;
}

body.menu-open {
 overflow: hidden;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
blockquote {
 margin-top: 0;
}

h1,
h2,
h3,
h4 {
 color: var(--ink);
 font-weight: 900;
 line-height: 1.25;
 letter-spacing: -.025em;
}

h1 {
 font-size: clamp(2.35rem, 5vw, 4.5rem);
}

h2 {
 font-size: clamp(1.85rem, 3.3vw, 3rem);
}

h3 {
 font-size: 1.25rem;
}

p {
 margin-bottom: 1.25rem;
}

ul,
ol {
 margin-bottom: 0;
}

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

button,
input {
 font: inherit;
}

button {
 cursor: pointer;
}

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

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

:focus-visible {
 outline: 3px solid rgba(118, 87, 232, .34);
 outline-offset: 3px;
}

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

.section {
 position: relative;
 padding: var(--section-space) 0;
}

.section-soft {
 background: var(--surface-soft);
}

.section-lilac {
 background: var(--surface-lilac);
}

.section-dark {
 color: rgba(255,255,255,.78);
 background:
  radial-gradient(circle at 10% 20%, rgba(118,87,232,.28), transparent 32%),
  radial-gradient(circle at 88% 75%, rgba(255,143,186,.16), transparent 34%),
  var(--dark);
}

.section-dark h2,
.section-dark h3 {
 color: #fff;
}

.section-heading {
 max-width: 780px;
 margin-bottom: 44px;
}

.section-heading.centered {
 margin-inline: auto;
 text-align: center;
}

.section-heading p {
 margin-bottom: 0;
 color: var(--muted);
 font-size: 1.05rem;
}

.section-dark .section-heading p {
 color: rgba(255,255,255,.67);
}

.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 16px;
 color: var(--primary-dark);
 font-size: .78rem;
 font-weight: 800;
 letter-spacing: .14em;
}

.eyebrow::before {
 width: 28px;
 height: 2px;
 content: "";
 background: currentColor;
 border-radius: 2px;
}

.section-dark .eyebrow {
 color: #beaefe;
}

.badge {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 7px;
 min-height: 30px;
 padding: 5px 12px;
 color: var(--primary-dark);
 background: var(--primary-soft);
 border: 1px solid rgba(118, 87, 232, .14);
 border-radius: var(--radius-pill);
 font-size: .78rem;
 font-weight: 800;
 line-height: 1.2;
}

.badge-mint {
 color: #166f5e;
 background: #e4faf4;
 border-color: rgba(39,143,120,.16);
}

.badge-pink {
 color: #a33263;
 background: #fff0f6;
 border-color: rgba(244,95,154,.16);
}

.button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 9px;
 min-height: 50px;
 margin: 0;
 padding: 13px 22px;
 color: #fff;
 background: var(--primary);
 border: 1px solid var(--primary);
 border-radius: var(--radius-pill);
 box-shadow: 0 12px 28px rgba(86, 53, 195, .24);
 font-weight: 800;
 line-height: 1.2;
}

.button:hover,
.button:focus {
 color: #fff;
 background: var(--primary-dark);
 border-color: var(--primary-dark);
 box-shadow: 0 16px 34px rgba(86, 53, 195, .32);
 transform: translateY(-2px);
}

.button.hollow {
 color: var(--ink);
 background: rgba(255,255,255,.8);
 border-color: var(--border);
 box-shadow: none;
}

.button.hollow:hover,
.button.hollow:focus {
 color: var(--primary-dark);
 background: #fff;
 border-color: rgba(118,87,232,.34);
}

.button.small {
 min-height: 42px;
 padding: 10px 18px;
 font-size: .9rem;
}

/* 导航 */
.site-header {
 position: sticky;
 top: 0;
 z-index: 1000;
 background: rgba(255,255,255,.88);
 border-bottom: 1px solid var(--border);
 box-shadow: 0 8px 30px rgba(36,28,68,.05);
 backdrop-filter: blur(18px);
}

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

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

.brand-mark {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 46px;
 height: 46px;
 color: #fff;
 background:
  radial-gradient(circle at 28% 20%, rgba(255,255,255,.42), transparent 28%),
  linear-gradient(145deg, var(--primary), var(--accent-strong));
 border-radius: 15px;
 box-shadow: 0 10px 24px rgba(86,53,195,.25);
 font-weight: 900;
 letter-spacing: -.04em;
}

.brand-copy {
 display: flex;
 flex-direction: column;
 line-height: 1.25;
}

.brand-copy strong {
 color: var(--ink);
 font-size: 1rem;
}

.brand-copy small {
 margin-top: 3px;
 color: var(--muted);
 font-size: .7rem;
}

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

.desktop-nav a {
 position: relative;
 padding: 10px 16px;
 color: var(--text);
 border-radius: var(--radius-pill);
 font-weight: 800;
 font-size: .94rem;
}

.desktop-nav a:hover {
 color: var(--primary-dark);
 background: var(--primary-soft);
}

.desktop-nav a.active {
 color: #fff;
 background: var(--primary);
 box-shadow: 0 8px 20px rgba(86,53,195,.2);
}

.location-chip {
 display: inline-flex;
 align-items: center;
 gap: 9px;
 margin-left: auto;
 padding: 9px 14px;
 color: var(--text);
 background: var(--surface-soft);
 border: 1px solid var(--border);
 border-radius: var(--radius-pill);
 font-size: .8rem;
 font-weight: 700;
 white-space: nowrap;
}

.location-dot {
 position: relative;
 width: 10px;
 height: 10px;
 background: var(--mint);
 border-radius: 50%;
 box-shadow: 0 0 0 5px rgba(85,214,189,.14);
}

.menu-toggle {
 display: none;
 width: 46px;
 height: 46px;
 padding: 0;
 background: var(--surface-soft);
 border: 1px solid var(--border);
 border-radius: 14px;
}

.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
 display: block;
 width: 20px;
 height: 2px;
 margin: auto;
 content: "";
 background: var(--ink);
 border-radius: 2px;
 transition: transform var(--transition), opacity var(--transition);
}

.menu-toggle span {
 position: relative;
}

.menu-toggle span::before {
 position: absolute;
 top: -6px;
 left: 0;
}

.menu-toggle span::after {
 position: absolute;
 top: 6px;
 left: 0;
}

.menu-toggle.is-open span {
 background: transparent;
}

.menu-toggle.is-open span::before {
 top: 0;
 transform: rotate(45deg);
}

.menu-toggle.is-open span::after {
 top: 0;
 transform: rotate(-45deg);
}

.mobile-nav {
 display: none;
 padding: 0 0 18px;
}

.mobile-nav a {
 display: block;
 padding: 12px 14px;
 color: var(--text);
 border-radius: 12px;
 font-weight: 800;
}

.mobile-nav a:hover,
.mobile-nav a.active {
 color: var(--primary-dark);
 background: var(--primary-soft);
}

.mobile-location {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-top: 10px;
 padding: 13px 14px;
 color: var(--muted);
 border-top: 1px solid var(--border);
 font-size: .82rem;
}

/* 分类页首屏 */
.help-hero {
 position: relative;
 overflow: hidden;
 padding: clamp(82px, 10vw, 132px) 0 78px;
 text-align: center;
 background:
  radial-gradient(circle at 16% 16%, rgba(255,143,186,.20), transparent 25%),
  radial-gradient(circle at 82% 20%, rgba(85,214,189,.16), transparent 27%),
  linear-gradient(180deg, #fbfaff 0%, #f2eeff 100%);
}

.help-hero::before,
.help-hero::after {
 position: absolute;
 content: "";
 border: 1px solid rgba(118,87,232,.15);
 border-radius: 50%;
 pointer-events: none;
}

.help-hero::before {
 top: 52px;
 left: -90px;
 width: 260px;
 height: 260px;
}

.help-hero::after {
 right: -55px;
 bottom: -90px;
 width: 220px;
 height: 220px;
}

.hero-orbit {
 position: absolute;
 width: 52px;
 height: 52px;
 color: var(--primary);
 background: rgba(255,255,255,.8);
 border: 1px solid var(--border);
 border-radius: 18px;
 box-shadow: var(--shadow-sm);
 display: grid;
 place-items: center;
 font-weight: 900;
}

.orbit-one {
 top: 80px;
 left: max(4vw, 28px);
 transform: rotate(-8deg);
}

.orbit-two {
 right: max(5vw, 32px);
 bottom: 90px;
 color: var(--accent-strong);
 transform: rotate(9deg);
}

.hero-inner {
 position: relative;
 z-index: 2;
 max-width: 920px;
 margin-inline: auto;
}

.hero-kicker {
 margin-bottom: 18px;
}

.help-hero h1 {
 max-width: 870px;
 margin: 0 auto 22px;
}

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

.hero-summary {
 max-width: 760px;
 margin: 0 auto 34px;
 color: var(--text);
 font-size: clamp(1rem, 1.8vw, 1.18rem);
}

.search-box {
 display: flex;
 max-width: 760px;
 margin: 0 auto;
 padding: 8px;
 background: rgba(255,255,255,.94);
 border: 1px solid rgba(118,87,232,.19);
 border-radius: var(--radius-pill);
 box-shadow: var(--shadow-md);
}

.search-icon {
 display: grid;
 place-items: center;
 width: 50px;
 flex: 0 0 50px;
 color: var(--primary);
}

.search-box input {
 min-width: 0;
 flex: 1;
 height: 52px;
 margin: 0;
 padding: 0 10px;
 color: var(--ink);
 background: transparent;
 border: 0;
 box-shadow: none;
}

.search-box input:focus {
 background: transparent;
 border: 0;
 box-shadow: none;
}

.search-box input::placeholder {
 color: #9992aa;
}

.search-box button {
 min-width: 116px;
 height: 52px;
 color: #fff;
 background: var(--primary);
 border: 0;
 border-radius: var(--radius-pill);
 font-weight: 800;
 transition: background var(--transition), transform var(--transition);
}

.search-box button:hover,
.search-box button:focus {
 background: var(--primary-dark);
 transform: translateY(-1px);
}

.search-message {
 min-height: 28px;
 margin: 12px 0 0;
 color: var(--primary-dark);
 font-size: .88rem;
 font-weight: 700;
}

.popular-chips {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 10px;
 margin-top: 20px;
}

.popular-chips a {
 padding: 8px 14px;
 color: var(--text);
 background: rgba(255,255,255,.68);
 border: 1px solid var(--border);
 border-radius: var(--radius-pill);
 font-size: .84rem;
 font-weight: 700;
}

.popular-chips a:hover {
 color: var(--primary-dark);
 background: #fff;
 border-color: rgba(118,87,232,.32);
 transform: translateY(-2px);
}

/* 卡片与内容 */
.risk-layout,
.verify-layout,
.audience-layout {
 display: grid;
 grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
 gap: clamp(36px, 6vw, 76px);
 align-items: center;
}

.copy-block p {
 color: var(--muted);
 font-size: 1.03rem;
}

.alert-list {
 display: grid;
 gap: 14px;
 margin-top: 28px;
}

.alert-item {
 display: flex;
 gap: 15px;
 padding: 18px;
 background: #fff;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 box-shadow: var(--shadow-sm);
}

.alert-icon,
.topic-icon,
.step-number,
.audience-icon {
 flex: 0 0 auto;
 display: grid;
 place-items: center;
 width: 44px;
 height: 44px;
 color: var(--primary-dark);
 background: var(--primary-soft);
 border-radius: 14px;
 font-weight: 900;
}

.alert-item:nth-child(2) .alert-icon {
 color: #a33263;
 background: #fff0f6;
}

.alert-item:nth-child(3) .alert-icon {
 color: #166f5e;
 background: #e4faf4;
}

.alert-item strong {
 display: block;
 margin-bottom: 3px;
 color: var(--ink);
}

.alert-item p {
 margin: 0;
 color: var(--muted);
 font-size: .92rem;
}

.visual-panel {
 position: relative;
 min-height: 440px;
 padding: 30px;
 overflow: hidden;
 color: rgba(255,255,255,.78);
 background:
  radial-gradient(circle at 85% 15%, rgba(255,143,186,.24), transparent 27%),
  linear-gradient(145deg, var(--dark-soft), var(--dark));
 border: 1px solid var(--border-dark);
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow-lg);
}

.visual-panel::after {
 position: absolute;
 right: -65px;
 bottom: -80px;
 width: 230px;
 height: 230px;
 content: "";
 border: 36px solid rgba(118,87,232,.20);
 border-radius: 50%;
}

.visual-head {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 16px;
 padding-bottom: 22px;
 border-bottom: 1px solid var(--border-dark);
}

.visual-head strong {
 color: #fff;
 font-size: 1.1rem;
}

.signal {
 display: inline-flex;
 align-items: center;
 gap: 7px;
 font-size: .78rem;
}

.signal::before {
 width: 9px;
 height: 9px;
 content: "";
 background: var(--mint);
 border-radius: 50%;
 box-shadow: 0 0 0 5px rgba(85,214,189,.12);
}

.visual-stack {
 position: relative;
 z-index: 2;
 display: grid;
 gap: 14px;
 margin-top: 26px;
}

.visual-row {
 display: grid;
 grid-template-columns: 48px 1fr auto;
 gap: 13px;
 align-items: center;
 padding: 15px;
 background: rgba(255,255,255,.07);
 border: 1px solid rgba(255,255,255,.09);
 border-radius: 16px;
}

.visual-row .mini-symbol {
 display: grid;
 place-items: center;
 width: 48px;
 height: 48px;
 color: #fff;
 background: rgba(118,87,232,.34);
 border-radius: 14px;
 font-weight: 900;
}

.visual-row strong {
 display: block;
 color: #fff;
 font-size: .94rem;
}

.visual-row small {
 color: rgba(255,255,255,.58);
}

.visual-status {
 color: #9aead9;
 font-size: .78rem;
 font-weight: 800;
}

/* 专题入口 */
.topic-grid {
 display: grid;
 grid-template-columns: repeat(12, 1fr);
 gap: 20px;
}

.topic-card {
 position: relative;
 grid-column: span 4;
 min-height: 250px;
 padding: 28px;
 overflow: hidden;
 background: #fff;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 box-shadow: var(--shadow-sm);
 transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.topic-card:nth-child(1),
.topic-card:nth-child(4) {
 grid-column: span 6;
}

.topic-card:hover {
 border-color: rgba(118,87,232,.28);
 box-shadow: var(--shadow-md);
 transform: translateY(-5px);
}

.topic-card::after {
 position: absolute;
 right: -30px;
 bottom: -30px;
 width: 110px;
 height: 110px;
 content: "";
 background: var(--primary-soft);
 border-radius: 50%;
 opacity: .7;
}

.topic-card .topic-icon {
 margin-bottom: 42px;
}

.topic-card h3 {
 margin-bottom: 10px;
}

.topic-card p {
 position: relative;
 z-index: 2;
 margin-bottom: 0;
 color: var(--muted);
 font-size: .93rem;
}

.topic-card a {
 position: absolute;
 inset: 0;
 z-index: 3;
}

.topic-card .card-label {
 position: relative;
 z-index: 2;
 display: inline-flex;
 margin-top: 18px;
 color: var(--primary-dark);
 font-size: .84rem;
 font-weight: 800;
}

/* 步骤 */
.steps-track {
 position: relative;
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 20px;
}

.steps-track::before {
 position: absolute;
 top: 31px;
 left: 10%;
 right: 10%;
 height: 2px;
 content: "";
 background: linear-gradient(90deg, var(--primary), var(--accent), var(--mint));
 opacity: .35;
}

.step-card {
 position: relative;
 z-index: 2;
 padding: 0 16px;
 text-align: left;
}

.step-number {
 width: 64px;
 height: 64px;
 margin-bottom: 22px;
 color: #fff;
 background: var(--primary);
 border: 7px solid var(--surface-lilac);
 border-radius: 22px;
 box-shadow: 0 10px 24px rgba(86,53,195,.22);
}

.step-card:nth-child(2) .step-number {
 background: var(--accent-strong);
}

.step-card:nth-child(3) .step-number {
 background: var(--success);
}

.step-card:nth-child(4) .step-number {
 background: var(--dark-soft);
}

.step-card p {
 margin: 0;
 color: var(--muted);
 font-size: .92rem;
}

/* 数据与反馈 */
.metric-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 18px;
}

.metric-card {
 padding: 28px 24px;
 background: rgba(255,255,255,.06);
 border: 1px solid var(--border-dark);
 border-radius: var(--radius-md);
}

.metric-value {
 display: block;
 margin-bottom: 8px;
 color: #fff;
 font-size: clamp(2rem, 4vw, 3.3rem);
 font-weight: 900;
 line-height: 1;
 letter-spacing: -.05em;
}

.metric-card strong {
 display: block;
 color: #fff;
 margin-bottom: 7px;
}

.metric-card p {
 margin: 0;
 color: rgba(255,255,255,.58);
 font-size: .86rem;
}

.feedback-wrap {
 display: grid;
 grid-template-columns: .75fr 1.25fr;
 gap: 52px;
 align-items: start;
}

.feedback-intro {
 position: sticky;
 top: 120px;
}

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

.feedback-card {
 position: relative;
 padding: 28px 30px 26px 76px;
 background: #fff;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 box-shadow: var(--shadow-sm);
}

.feedback-card::before {
 position: absolute;
 top: 25px;
 left: 26px;
 content: "“";
 color: var(--primary);
 font-family: Georgia, serif;
 font-size: 3.6rem;
 font-weight: 900;
 line-height: 1;
}

.feedback-card blockquote {
 margin: 0 0 14px;
 color: var(--ink);
 font-size: 1.02rem;
 font-weight: 700;
}

.feedback-card footer {
 color: var(--muted);
 font-size: .84rem;
}

/* 适用人群 */
.audience-figure {
 position: relative;
 min-height: 430px;
 display: grid;
 place-items: center;
 overflow: hidden;
 background:
  radial-gradient(circle at center, rgba(118,87,232,.15), transparent 45%),
  #fff;
 border: 1px solid var(--border);
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow-sm);
}

.audience-center {
 position: relative;
 z-index: 2;
 display: grid;
 place-items: center;
 width: 152px;
 height: 152px;
 color: #fff;
 background: linear-gradient(145deg, var(--primary), var(--primary-dark));
 border: 12px solid #ede8ff;
 border-radius: 50%;
 box-shadow: var(--shadow-md);
 text-align: center;
 font-weight: 900;
 line-height: 1.35;
}

.audience-dot {
 position: absolute;
 display: flex;
 align-items: center;
 gap: 9px;
 padding: 10px 14px;
 color: var(--ink);
 background: #fff;
 border: 1px solid var(--border);
 border-radius: var(--radius-pill);
 box-shadow: var(--shadow-sm);
 font-size: .82rem;
 font-weight: 800;
}

.audience-dot:nth-child(2) { top: 18%; left: 8%; }
.audience-dot:nth-child(3) { top: 16%; right: 8%; }
.audience-dot:nth-child(4) { bottom: 18%; left: 7%; }
.audience-dot:nth-child(5) { right: 7%; bottom: 16%; }

.audience-list {
 display: grid;
 gap: 15px;
}

.audience-item {
 display: flex;
 gap: 16px;
 padding: 20px;
 background: #fff;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
}

.audience-item h3 {
 margin-bottom: 5px;
}

.audience-item p {
 margin: 0;
 color: var(--muted);
 font-size: .92rem;
}

/* 资讯 */
.update-layout {
 display: grid;
 grid-template-columns: 1.1fr .9fr;
 gap: 24px;
}

.feature-update {
 position: relative;
 min-height: 450px;
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 padding: 38px;
 overflow: hidden;
 color: rgba(255,255,255,.75);
 background:
  linear-gradient(180deg, transparent 12%, rgba(23,18,44,.94) 100%),
  radial-gradient(circle at 78% 18%, rgba(255,143,186,.55), transparent 25%),
  linear-gradient(145deg, #7657e8, #35226c);
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow-md);
}

.feature-update::before {
 position: absolute;
 top: 58px;
 right: 55px;
 width: 150px;
 height: 150px;
 content: "AI";
 display: grid;
 place-items: center;
 color: rgba(255,255,255,.9);
 background: rgba(255,255,255,.1);
 border: 1px solid rgba(255,255,255,.2);
 border-radius: 48px;
 font-size: 3rem;
 font-weight: 900;
 transform: rotate(8deg);
 backdrop-filter: blur(10px);
}

.feature-update > * {
 position: relative;
 z-index: 2;
}

.feature-update h3 {
 max-width: 540px;
 margin: 15px 0 12px;
 color: #fff;
 font-size: clamp(1.6rem, 3vw, 2.5rem);
}

.feature-update p {
 max-width: 590px;
 margin-bottom: 0;
}

.update-list {
 display: grid;
 gap: 16px;
}

.update-card {
 padding: 24px;
 background: #fff;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 box-shadow: var(--shadow-sm);
}

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

.update-meta time {
 color: var(--muted);
 font-size: .8rem;
}

.update-card h3 {
 margin-bottom: 8px;
}

.update-card p {
 margin: 0;
 color: var(--muted);
 font-size: .9rem;
}

/* FAQ */
.faq-layout {
 display: grid;
 grid-template-columns: .72fr 1.28fr;
 gap: 58px;
 align-items: start;
}

.faq-aside {
 padding: 28px;
 color: rgba(255,255,255,.75);
 background: var(--dark-soft);
 border-radius: var(--radius-md);
}

.faq-aside strong {
 display: block;
 margin-bottom: 10px;
 color: #fff;
 font-size: 1.1rem;
}

.faq-aside p {
 margin: 0;
 font-size: .9rem;
}

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

.faq-item {
 overflow: hidden;
 background: #fff;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 transition: border-color var(--transition), box-shadow var(--transition);
}

.faq-item[open] {
 border-color: rgba(118,87,232,.3);
 box-shadow: var(--shadow-sm);
}

.faq-item summary {
 position: relative;
 padding: 21px 58px 21px 24px;
 color: var(--ink);
 cursor: pointer;
 list-style: none;
 font-weight: 900;
}

.faq-item summary::-webkit-details-marker {
 display: none;
}

.faq-item summary::after {
 position: absolute;
 top: 50%;
 right: 22px;
 width: 28px;
 height: 28px;
 content: "+";
 display: grid;
 place-items: center;
 color: var(--primary-dark);
 background: var(--primary-soft);
 border-radius: 50%;
 transform: translateY(-50%);
 transition: transform var(--transition);
}

.faq-item[open] summary::after {
 transform: translateY(-50%) rotate(45deg);
}

.faq-answer {
 padding: 0 24px 22px;
 color: var(--muted);
}

.faq-answer p {
 margin: 0;
}

/* CTA */
.cta-section {
 padding: 40px 0 88px;
 background: var(--surface);
}

.cta-shell {
 position: relative;
 display: grid;
 grid-template-columns: 1fr auto;
 gap: 34px;
 align-items: center;
 padding: clamp(34px, 6vw, 62px);
 overflow: hidden;
 color: rgba(255,255,255,.72);
 background:
  radial-gradient(circle at 88% 18%, rgba(255,143,186,.23), transparent 28%),
  linear-gradient(135deg, var(--dark), #302461);
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow-lg);
}

.cta-shell::after {
 position: absolute;
 right: 18%;
 bottom: -100px;
 width: 210px;
 height: 210px;
 content: "";
 border: 34px solid rgba(118,87,232,.2);
 border-radius: 50%;
}

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

.cta-shell h2 {
 margin-bottom: 12px;
 color: #fff;
}

.cta-shell p {
 max-width: 680px;
 margin: 0;
}

.cta-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
}

.cta-actions .button.hollow {
 color: #fff;
 background: rgba(255,255,255,.08);
 border-color: rgba(255,255,255,.2);
}

.cta-actions .button.hollow:hover {
 color: #fff;
 background: rgba(255,255,255,.15);
}

/* 页脚 */
.site-footer {
 padding: 68px 0 24px;
 color: rgba(255,255,255,.66);
 background: var(--dark);
 border-top: 1px solid var(--border-dark);
}

.footer-grid {
 display: grid;
 grid-template-columns: 1.3fr .6fr 1fr;
 gap: 56px;
 padding-bottom: 45px;
}

.site-footer .brand-copy strong {
 color: #fff;
}

.site-footer .brand-copy small {
 color: rgba(255,255,255,.52);
}

.footer-brand p {
 max-width: 520px;
 margin: 22px 0 0;
 font-size: .9rem;
}

.footer-title {
 margin-bottom: 18px;
 color: #fff;
 font-size: 1rem;
 letter-spacing: 0;
}

.footer-links {
 margin: 0;
 list-style: none;
}

.footer-links li + li {
 margin-top: 10px;
}

.footer-links a:hover {
 color: #fff;
 padding-left: 4px;
}

.footer-note {
 padding: 20px;
 background: rgba(255,255,255,.05);
 border: 1px solid var(--border-dark);
 border-radius: var(--radius-md);
 font-size: .88rem;
}

.footer-bottom {
 display: flex;
 justify-content: space-between;
 gap: 24px;
 padding-top: 24px;
 border-top: 1px solid var(--border-dark);
 color: rgba(255,255,255,.45);
 font-size: .78rem;
}

/* 搜索过滤状态 */
.searchable-item.is-hidden {
 display: none;
}

.searchable-item.is-match {
 border-color: rgba(118,87,232,.48);
 box-shadow: 0 18px 45px rgba(86,53,195,.16);
}

/* 响应式 */
@media screen and (max-width: 1024px) {
 .desktop-nav {
  margin-left: 6px;
 }

 .location-chip {
  display: none;
 }

 .risk-layout,
 .verify-layout,
 .audience-layout {
  grid-template-columns: 1fr 1fr;
  gap: 34px;
 }

 .topic-card,
 .topic-card:nth-child(1),
 .topic-card:nth-child(4) {
  grid-column: span 6;
 }

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

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

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

@media screen and (max-width: 768px) {
 :root {
  --section-space: 72px;
 }

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

 .nav-shell {
  min-height: 72px;
 }

 .desktop-nav {
  display: none;
 }

 .menu-toggle {
  display: block;
  margin-left: auto;
 }

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

 .brand-copy small {
  display: none;
 }

 .help-hero {
  padding-top: 72px;
 }

 .hero-orbit {
  display: none;
 }

 .risk-layout,
 .verify-layout,
 .audience-layout,
 .update-layout,
 .feedback-wrap,
 .faq-layout,
 .cta-shell {
  grid-template-columns: 1fr;
 }

 .visual-panel {
  min-height: 400px;
 }

 .steps-track {
  grid-template-columns: repeat(2, 1fr);
  gap: 34px 18px;
 }

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

 .feedback-intro {
  position: static;
 }

 .feedback-card {
  padding-left: 64px;
 }

 .audience-figure {
  min-height: 380px;
 }

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

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

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

 .footer-bottom {
  flex-direction: column;
  gap: 8px;
 }
}

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

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

 .brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 13px;
 }

 .brand-copy strong {
  font-size: .92rem;
 }

 .help-hero {
  padding: 58px 0 54px;
 }

 .help-hero h1 {
  font-size: 2.25rem;
 }

 .search-box {
  display: grid;
  grid-template-columns: 42px 1fr;
  padding: 7px;
  border-radius: 22px;
 }

 .search-icon {
  width: 42px;
  flex-basis: 42px;
 }

 .search-box input {
  width: 100%;
  height: 48px;
 }

 .search-box button {
  grid-column: 1 / -1;
  width: 100%;
  height: 46px;
  margin-top: 5px;
 }

 .popular-chips {
  justify-content: flex-start;
 }

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

 .topic-grid,
 .steps-track,
 .metric-grid {
  grid-template-columns: 1fr;
 }

 .topic-card,
 .topic-card:nth-child(1),
 .topic-card:nth-child(4) {
  grid-column: auto;
  min-height: 230px;
 }

 .step-card {
  padding: 0;
 }

 .visual-panel {
  min-height: 370px;
  padding: 22px;
 }

 .visual-row {
  grid-template-columns: 42px 1fr;
 }

 .visual-status {
  grid-column: 2;
 }

 .audience-figure {
  min-height: 430px;
 }

 .audience-center {
  width: 130px;
  height: 130px;
 }

 .audience-dot:nth-child(2) { top: 10%; left: 4%; }
 .audience-dot:nth-child(3) { top: 23%; right: 3%; }
 .audience-dot:nth-child(4) { bottom: 22%; left: 3%; }
 .audience-dot:nth-child(5) { right: 4%; bottom: 8%; }

 .feature-update {
  min-height: 420px;
  padding: 28px;
 }

 .feature-update::before {
  top: 40px;
  right: 30px;
  width: 110px;
  height: 110px;
  border-radius: 34px;
 }

 .faq-item summary {
  padding-left: 19px;
 }

 .cta-shell {
  padding: 34px 24px;
 }

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

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

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

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

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