/* roulang page: index */
:root {
            --nav: #07111f;
            --nav-soft: #0b1728;
            --primary: #2563eb;
            --primary-2: #3b82f6;
            --primary-light: #eff6ff;
            --cyan: #22d3ee;
            --purple: #7c3aed;
            --orange: #f59e0b;
            --success: #059669;
            --danger: #dc6b37;
            --bg: #f7faff;
            --surface: #ffffff;
            --surface-soft: #f1f6ff;
            --text: #12213a;
            --muted: #64748b;
            --border: #dce7f5;
            --border-strong: #bfd4ef;
            --radius-sm: 12px;
            --radius: 18px;
            --radius-lg: 26px;
            --shadow: 0 12px 36px rgba(37, 99, 235, .10);
            --shadow-hover: 0 20px 50px rgba(37, 99, 235, .17);
            --container: 1220px;
            --transition: .24s ease;
        }

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

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

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

        body.age-locked {
            overflow: hidden;
        }

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

        a:hover {
            color: #1d4ed8;
        }

        button, input, select, textarea {
            font: inherit;
        }

        button, .button {
            cursor: pointer;
        }

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

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

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

        h1 {
            font-size: clamp(2rem, 5vw, 3.15rem);
        }

        h2 {
            font-size: clamp(1.75rem, 3.6vw, 2.35rem);
        }

        h3 {
            font-size: 1.25rem;
        }

        p {
            color: var(--muted);
        }

        :focus-visible {
            outline: 3px solid rgba(34, 211, 238, .55);
            outline-offset: 3px;
        }

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

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

        .section-soft {
            background: linear-gradient(180deg, #f0f6ff 0%, #f8fbff 100%);
            border-top: 1px solid rgba(191, 212, 239, .65);
            border-bottom: 1px solid rgba(191, 212, 239, .65);
        }

        .section-heading {
            max-width: 750px;
            margin-bottom: 34px;
        }

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

        .section-heading p {
            margin: 12px 0 0;
            font-size: 1.04rem;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 30px;
            margin-bottom: 14px;
            padding: 4px 12px;
            border: 1px solid #b9d5fa;
            border-radius: 999px;
            color: #1d4ed8;
            background: #eff6ff;
            font-size: .82rem;
            font-weight: 800;
        }

        .eyebrow::before {
            width: 7px;
            height: 7px;
            content: "";
            border-radius: 50%;
            background: var(--cyan);
            box-shadow: 0 0 12px rgba(34, 211, 238, .8);
        }

        .badge-soft, .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 10px;
            border-radius: 999px;
            font-size: .76rem;
            font-weight: 800;
            white-space: nowrap;
        }

        .badge-soft {
            color: #1e40af;
            border: 1px solid #c7dcfb;
            background: #eff6ff;
        }

        .status-badge.success {
            color: #047857;
            background: #dff8ee;
        }

        .status-badge.info {
            color: #1d4ed8;
            background: #e8f1ff;
        }

        .status-badge.warning {
            color: #a15b06;
            background: #fff4d6;
        }

        .status-badge.neutral {
            color: #52647d;
            background: #edf2f8;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: currentColor;
        }

        .button {
            min-height: 48px;
            margin: 0;
            padding: .9rem 1.35rem;
            border: 0;
            border-radius: 999px;
            font-size: .96rem;
            font-weight: 800;
            line-height: 1.2;
            transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
        }

        .button.primary-action {
            color: #fff;
            background: linear-gradient(135deg, var(--primary), var(--primary-2));
            box-shadow: 0 10px 24px rgba(37, 99, 235, .27);
        }

        .button.primary-action:hover,
        .button.primary-action:focus {
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 15px 32px rgba(37, 99, 235, .35);
        }

        .button.secondary-action {
            color: var(--primary);
            border: 1px solid #9fc3f2;
            background: #fff;
        }

        .button.secondary-action:hover,
        .button.secondary-action:focus {
            color: #1d4ed8;
            border-color: var(--primary);
            background: #eff6ff;
            transform: translateY(-2px);
        }

        .button.dark-action {
            color: #fff;
            border: 1px solid rgba(34, 211, 238, .45);
            background: #0e2038;
        }

        .button.dark-action:hover {
            color: #fff;
            border-color: var(--cyan);
            box-shadow: 0 0 22px rgba(34, 211, 238, .18);
        }

        .button i {
            margin-right: 7px;
        }

        .top-shell {
            position: sticky;
            z-index: 1000;
            top: 0;
            background: var(--nav);
            box-shadow: 0 10px 30px rgba(3, 10, 21, .2);
        }

        .top-shell::after {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: 1px;
            content: "";
            background: linear-gradient(90deg, transparent, var(--primary-2), var(--cyan), var(--purple), transparent);
            box-shadow: 0 0 13px rgba(34, 211, 238, .65);
        }

        .top-bar {
            width: min(calc(100% - 40px), var(--container));
            min-height: 72px;
            margin-inline: auto;
            padding: 0;
            color: #fff;
            background: transparent;
        }

        .top-bar, .top-bar ul {
            background: transparent;
        }

        .top-bar-left, .top-bar-right {
            display: flex;
            align-items: center;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            max-width: 390px;
            color: #fff;
            font-size: 1rem;
            font-weight: 900;
            line-height: 1.3;
        }

        .brand:hover {
            color: #fff;
        }

        .brand-mark {
            display: grid;
            width: 38px;
            height: 38px;
            flex: 0 0 38px;
            place-items: center;
            border: 1px solid rgba(34, 211, 238, .55);
            border-radius: 12px;
            color: var(--cyan);
            background: linear-gradient(145deg, rgba(37, 99, 235, .28), rgba(124, 58, 237, .18));
            box-shadow: inset 0 0 14px rgba(34, 211, 238, .08), 0 0 18px rgba(34, 211, 238, .12);
        }

        .site-menu {
            align-items: center;
            gap: 3px;
        }

        .site-menu > li > a {
            position: relative;
            padding: 1.65rem .9rem;
            color: #b9c7dc;
            font-size: .91rem;
            font-weight: 700;
        }

        .site-menu > li > a::after {
            position: absolute;
            right: 30%;
            bottom: 7px;
            left: 30%;
            height: 2px;
            content: "";
            border-radius: 99px;
            background: transparent;
            transition: var(--transition);
        }

        .site-menu > li > a:hover,
        .site-menu > li > a.active {
            color: #fff;
        }

        .site-menu > li > a:hover::after,
        .site-menu > li > a.active::after {
            right: 18%;
            left: 18%;
            background: var(--cyan);
            box-shadow: 0 0 10px var(--cyan);
        }

        .nav-cta {
            margin-left: 12px;
            min-height: 42px;
            padding: .78rem 1.1rem;
            color: #06111f !important;
            background: linear-gradient(135deg, #67e8f9, #60a5fa);
            box-shadow: 0 8px 22px rgba(34, 211, 238, .2);
        }

        .nav-cta:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 26px rgba(34, 211, 238, .3);
        }

        .title-bar {
            min-height: 62px;
            padding: 0;
            color: #fff;
            background: transparent;
        }

        .title-bar-title {
            width: calc(100% - 48px);
        }

        .menu-icon {
            width: 32px;
            height: 32px;
            margin: 0;
        }

        .menu-icon::after {
            top: 7px;
            width: 28px;
            height: 2px;
            background: #fff;
            box-shadow: 0 8px 0 #fff, 0 16px 0 #fff;
        }

        .hero {
            position: relative;
            min-height: 710px;
            padding: 74px 0 68px;
            overflow: hidden;
            background:
                radial-gradient(circle at 12% 12%, rgba(34, 211, 238, .13), transparent 24%),
                radial-gradient(circle at 89% 22%, rgba(124, 58, 237, .10), transparent 25%),
                linear-gradient(180deg, #edf6ff 0%, #f9fcff 73%, #fff 100%);
        }

        .hero::before {
            position: absolute;
            inset: 0;
            content: "";
            pointer-events: none;
            opacity: .35;
            background-image:
                linear-gradient(rgba(37, 99, 235, .06) 1px, transparent 1px),
                linear-gradient(90deg, rgba(37, 99, 235, .06) 1px, transparent 1px);
            background-size: 44px 44px;
            mask-image: linear-gradient(to bottom, #000, transparent 90%);
        }

        .hero-inner {
            position: relative;
            z-index: 2;
            text-align: center;
        }

        .hero-kickers {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 9px;
            margin-bottom: 18px;
        }

        .hero-kicker {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 6px 12px;
            border: 1px solid #c4d8f1;
            border-radius: 999px;
            color: #304766;
            background: rgba(255,255,255,.82);
            box-shadow: 0 5px 16px rgba(37, 99, 235, .07);
            font-size: .82rem;
            font-weight: 800;
        }

        .hero h1 {
            max-width: 1050px;
            margin: 0 auto 19px;
        }

        .gradient-text {
            color: var(--primary);
            background: linear-gradient(100deg, #1d4ed8, #2563eb 48%, #7c3aed);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero-copy {
            max-width: 850px;
            margin: 0 auto 26px;
            color: #51657f;
            font-size: 1.07rem;
            line-height: 1.9;
        }

        .hero-actions {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 20px;
        }

        .countdown-line {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-height: 44px;
            padding: 7px 14px;
            border: 1px solid #f5d58f;
            border-radius: 14px;
            color: #7e4b06;
            background: #fff9e8;
            font-size: .88rem;
            font-weight: 800;
        }

        .countdown {
            display: inline-flex;
            gap: 5px;
            color: #b45309;
            font-variant-numeric: tabular-nums;
        }

        .promo-sticker {
            position: absolute;
            z-index: 3;
            top: 28px;
            right: 4%;
            display: grid;
            width: 108px;
            height: 108px;
            place-items: center;
            padding: 12px;
            border: 5px solid rgba(255,255,255,.9);
            border-radius: 50%;
            color: #fff;
            background: linear-gradient(145deg, #f97316, #dc6b37);
            box-shadow: 0 15px 35px rgba(220, 107, 55, .25);
            font-size: .93rem;
            font-weight: 900;
            line-height: 1.25;
            text-align: center;
            transform: rotate(8deg);
        }

        .product-stage {
            max-width: 1080px;
            margin: 38px auto 0;
            padding: 16px;
            border: 1px solid #ceddf0;
            border-radius: var(--radius-lg);
            background: rgba(255,255,255,.89);
            box-shadow: 0 26px 70px rgba(37, 99, 235, .14);
            backdrop-filter: blur(8px);
        }

        .stage-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            min-height: 44px;
            padding: 0 8px 12px;
            border-bottom: 1px solid var(--border);
        }

        .window-dots {
            display: flex;
            gap: 7px;
        }

        .window-dots i {
            display: block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #f87171;
        }

        .window-dots i:nth-child(2) {
            background: #fbbf24;
        }

        .window-dots i:nth-child(3) {
            background: #34d399;
        }

        .stage-status {
            color: var(--muted);
            font-size: .8rem;
            font-weight: 700;
        }

        .stage-grid {
            display: grid;
            grid-template-columns: 1.25fr .8fr .8fr;
            gap: 14px;
            padding-top: 14px;
        }

        .stage-panel {
            min-height: 148px;
            padding: 19px;
            border: 1px solid var(--border);
            border-radius: 18px;
            text-align: left;
            background: #fbfdff;
        }

        .stage-panel.primary {
            color: #fff;
            border-color: #1d4ed8;
            background: linear-gradient(140deg, #164fc4, #2563eb 58%, #4f46e5);
        }

        .stage-panel h3 {
            margin-bottom: 8px;
            font-size: 1.08rem;
        }

        .stage-panel.primary h3,
        .stage-panel.primary p {
            color: #fff;
        }

        .stage-panel p {
            margin-bottom: 12px;
            font-size: .88rem;
            line-height: 1.65;
        }

        .metric-row {
            display: flex;
            gap: 18px;
            flex-wrap: wrap;
        }

        .metric strong {
            display: block;
            color: inherit;
            font-size: 1.22rem;
        }

        .metric span {
            color: inherit;
            opacity: .82;
            font-size: .75rem;
        }

        .stage-list {
            margin: 0;
            list-style: none;
        }

        .stage-list li {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 5px 0;
            color: #3d526d;
            font-size: .84rem;
        }

        .stage-list i {
            color: var(--success);
        }

        .track-shell {
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            background: #fff;
            box-shadow: var(--shadow);
        }

        .track-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            padding: 18px 22px;
            border-bottom: 1px solid var(--border);
            background: #fbfdff;
        }

        .track-head strong {
            font-size: 1rem;
        }

        .orbit {
            margin: 0;
        }

        .orbit-container {
            min-height: 400px;
        }

        .orbit-slide {
            padding: 34px 60px 48px;
        }

        .screen-card {
            display: grid;
            grid-template-columns: 1.25fr .75fr;
            gap: 28px;
            align-items: center;
        }

        .abstract-screen {
            min-height: 280px;
            padding: 18px;
            border: 1px solid #c8daf1;
            border-radius: 20px;
            background: linear-gradient(145deg, #eaf3ff, #f9fcff);
            box-shadow: inset 0 0 40px rgba(37, 99, 235, .05);
        }

        .screen-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }

        .screen-top span {
            color: #51657f;
            font-size: .77rem;
            font-weight: 800;
        }

        .screen-search {
            height: 44px;
            margin-bottom: 14px;
            border: 1px solid #bcd1ed;
            border-radius: 12px;
            background: #fff;
        }

        .screen-row {
            display: grid;
            grid-template-columns: 42px 1fr auto;
            gap: 12px;
            align-items: center;
            margin-bottom: 10px;
            padding: 12px;
            border: 1px solid #d9e6f6;
            border-radius: 14px;
            background: rgba(255,255,255,.88);
        }

        .screen-icon {
            display: grid;
            width: 42px;
            height: 42px;
            place-items: center;
            border-radius: 12px;
            color: var(--primary);
            background: #e7f0ff;
        }

        .screen-lines span {
            display: block;
            height: 7px;
            margin: 5px 0;
            border-radius: 99px;
            background: #dce8f7;
        }

        .screen-lines span:first-child {
            width: 78%;
            background: #a8c7ee;
        }

        .screen-button {
            width: 66px;
            height: 29px;
            border-radius: 99px;
            background: linear-gradient(135deg, var(--primary), var(--primary-2));
        }

        .slide-copy h3 {
            margin-bottom: 12px;
            font-size: 1.55rem;
        }

        .feature-checks {
            margin: 18px 0 0;
            list-style: none;
        }

        .feature-checks li {
            display: flex;
            gap: 10px;
            margin: 9px 0;
            color: #425670;
        }

        .feature-checks i {
            margin-top: 6px;
            color: var(--success);
        }

        .orbit-previous, .orbit-next {
            color: var(--primary);
            border-radius: 12px;
            background: rgba(255,255,255,.95);
            box-shadow: 0 6px 18px rgba(37, 99, 235, .14);
        }

        .orbit-previous:hover, .orbit-next:hover {
            color: #fff;
            background: var(--primary);
        }

        .orbit-bullets button {
            width: 9px;
            height: 9px;
            background: #c6d8ee;
        }

        .orbit-bullets button.is-active {
            width: 25px;
            border-radius: 99px;
            background: var(--primary);
        }

        .requirements-strip {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            padding: 0 22px 22px;
        }

        .requirement-item {
            display: flex;
            align-items: flex-start;
            gap: 11px;
            padding: 15px;
            border: 1px solid var(--border);
            border-radius: 14px;
            background: #f8fbff;
            transition: var(--transition);
        }

        .requirement-item:hover {
            border-color: #9fc3f2;
            background: #eff6ff;
        }

        .requirement-item i {
            margin-top: 5px;
            color: var(--primary);
        }

        .requirement-item strong {
            display: block;
            margin-bottom: 2px;
            font-size: .9rem;
        }

        .requirement-item span {
            display: block;
            color: var(--muted);
            font-size: .78rem;
            line-height: 1.5;
        }

        .inventory-layout {
            display: grid;
            grid-template-columns: 1.15fr .85fr;
            gap: 24px;
        }

        .availability-card,
        .rank-card,
        .invite-card,
        .news-panel,
        .recommend-panel,
        .download-card {
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            background: #fff;
            box-shadow: var(--shadow);
        }

        .availability-card {
            padding: 28px;
        }

        .availability-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 18px;
            margin-bottom: 20px;
        }

        .availability-top h3 {
            margin-bottom: 7px;
        }

        .availability-top p {
            margin: 0;
            font-size: .9rem;
        }

        .progress {
            height: 12px;
            margin-bottom: 10px;
            overflow: hidden;
            border-radius: 99px;
            background: #e6eef9;
        }

        .progress-meter {
            border-radius: 99px;
            background: linear-gradient(90deg, var(--primary), var(--cyan));
            box-shadow: 0 0 15px rgba(34, 211, 238, .3);
        }

        .progress-meta {
            display: flex;
            justify-content: space-between;
            gap: 15px;
            color: var(--muted);
            font-size: .82rem;
        }

        .availability-points {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-top: 24px;
        }

        .availability-point {
            padding: 16px;
            border: 1px solid var(--border);
            border-radius: 14px;
            background: #f8fbff;
        }

        .availability-point strong {
            display: block;
            color: var(--primary);
            font-size: 1.18rem;
        }

        .availability-point span {
            color: var(--muted);
            font-size: .78rem;
        }

        .rank-card {
            padding: 22px;
        }

        .rank-card h3 {
            margin-bottom: 15px;
        }

        .rank-list {
            margin: 0;
            list-style: none;
        }

        .rank-list li {
            display: grid;
            grid-template-columns: 30px 1fr auto;
            gap: 10px;
            align-items: center;
            padding: 11px 0;
            border-bottom: 1px solid var(--border);
        }

        .rank-list li:last-child {
            border-bottom: 0;
        }

        .rank-number {
            display: grid;
            width: 26px;
            height: 26px;
            place-items: center;
            border-radius: 9px;
            color: #1d4ed8;
            background: #e8f1ff;
            font-size: .76rem;
            font-weight: 900;
        }

        .rank-list li:first-child .rank-number {
            color: #fff;
            background: linear-gradient(135deg, var(--orange), #f97316);
        }

        .rank-label {
            color: #324860;
            font-size: .88rem;
            font-weight: 700;
        }

        .rank-trend {
            color: var(--success);
            font-size: .76rem;
            font-weight: 800;
        }

        .invite-card {
            position: relative;
            padding: 30px;
            overflow: hidden;
            background:
                radial-gradient(circle at 90% 10%, rgba(34, 211, 238, .18), transparent 25%),
                linear-gradient(135deg, #0b1b31, #102a4c);
        }

        .invite-card::after {
            position: absolute;
            right: -45px;
            bottom: -65px;
            width: 190px;
            height: 190px;
            content: "";
            border: 1px solid rgba(34, 211, 238, .2);
            border-radius: 50%;
            box-shadow: 0 0 0 22px rgba(34,211,238,.04), 0 0 0 44px rgba(124,58,237,.035);
        }

        .invite-content {
            position: relative;
            z-index: 2;
        }

        .invite-card h2, .invite-card p {
            color: #fff;
        }

        .invite-card p {
            max-width: 760px;
            color: #b9c7dc;
        }

        .invite-grid {
            display: grid;
            grid-template-columns: 1fr .75fr;
            gap: 28px;
            align-items: center;
        }

        .invite-progress {
            padding: 20px;
            border: 1px solid rgba(121, 193, 255, .22);
            border-radius: 18px;
            background: rgba(255,255,255,.06);
        }

        .invite-progress strong {
            display: block;
            margin-bottom: 10px;
            color: #fff;
        }

        .invite-progress .progress {
            background: rgba(255,255,255,.13);
        }

        .invite-progress small {
            color: #b9c7dc;
        }

        .invite-actions {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

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

        .privacy-note {
            display: flex;
            gap: 10px;
            margin-top: 14px;
            color: #92a8c6;
            font-size: .78rem;
        }

        .news-layout {
            display: grid;
            grid-template-columns: 1.3fr .7fr;
            gap: 24px;
        }

        .news-panel, .recommend-panel {
            padding: 26px;
        }

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

        .panel-heading h3 {
            margin: 0;
        }

        .panel-heading a {
            font-size: .84rem;
            font-weight: 800;
        }

        .news-list {
            margin: 0;
            list-style: none;
        }

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

        .news-list li:last-child {
            border-bottom: 0;
        }

        .news-list a {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 13px;
            align-items: center;
            padding: 16px 3px;
            color: var(--text);
        }

        .news-list a:hover {
            padding-right: 7px;
            padding-left: 7px;
            color: var(--primary);
            background: #f7faff;
        }

        .news-type {
            padding: 3px 8px;
            border-radius: 999px;
            color: #1d4ed8;
            background: #e8f1ff;
            font-size: .72rem;
            font-weight: 800;
        }

        .news-title {
            font-weight: 750;
        }

        .news-meta {
            color: var(--muted);
            font-size: .76rem;
        }

        .recommend-panel {
            background: linear-gradient(155deg, #f5f9ff, #fff);
        }

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

        .topic-link {
            display: block;
            padding: 16px;
            border: 1px solid var(--border);
            border-radius: 15px;
            color: var(--text);
            background: #fff;
        }

        .topic-link:hover {
            border-color: #9fc3f2;
            transform: translateY(-2px);
            box-shadow: 0 10px 22px rgba(37,99,235,.10);
        }

        .topic-link strong {
            display: block;
            margin-bottom: 5px;
        }

        .topic-link span {
            color: var(--muted);
            font-size: .8rem;
            line-height: 1.55;
        }

        .feedback-row {
            display: flex;
            gap: 15px;
            margin-top: 24px;
            overflow-x: auto;
            padding: 4px 2px 14px;
            scrollbar-width: thin;
        }

        .feedback-card {
            min-width: 260px;
            padding: 18px;
            border: 1px solid var(--border);
            border-radius: 16px;
            background: #fff;
        }

        .feedback-head {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 9px;
        }

        .avatar {
            display: grid;
            width: 35px;
            height: 35px;
            flex: 0 0 35px;
            place-items: center;
            border-radius: 50%;
            color: #fff;
            background: linear-gradient(135deg, var(--primary), var(--purple));
            font-size: .8rem;
            font-weight: 900;
        }

        .feedback-head strong {
            display: block;
            font-size: .86rem;
        }

        .feedback-head span {
            display: block;
            color: var(--muted);
            font-size: .7rem;
        }

        .feedback-card p {
            margin: 0;
            font-size: .83rem;
            line-height: 1.65;
        }

        .download-card {
            position: relative;
            padding: 48px;
            overflow: hidden;
            text-align: center;
            background:
                radial-gradient(circle at 10% 10%, rgba(34, 211, 238, .16), transparent 25%),
                radial-gradient(circle at 90% 90%, rgba(124, 58, 237, .11), transparent 27%),
                linear-gradient(135deg, #eef6ff, #fff);
        }

        .download-card::before,
        .download-card::after {
            position: absolute;
            content: "";
            border: 1px solid rgba(37,99,235,.12);
            border-radius: 50%;
        }

        .download-card::before {
            top: -90px;
            left: -60px;
            width: 220px;
            height: 220px;
        }

        .download-card::after {
            right: -80px;
            bottom: -120px;
            width: 290px;
            height: 290px;
        }

        .download-inner {
            position: relative;
            z-index: 2;
            max-width: 860px;
            margin: 0 auto;
        }

        .download-card p {
            max-width: 730px;
            margin: 0 auto 23px;
        }

        .download-actions {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 12px;
        }

        .download-meta {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px 18px;
            margin-top: 22px;
            color: var(--muted);
            font-size: .8rem;
        }

        .download-meta span {
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }

        .download-meta i {
            color: var(--success);
        }

        .safe-callout {
            max-width: 900px;
            margin: 24px auto 0;
            padding: 15px 18px;
            border: 1px solid #f0d595;
            border-radius: 14px;
            color: #7b550c;
            background: #fff9e8;
            font-size: .83rem;
            text-align: left;
        }

        .faq-wrap {
            max-width: 920px;
            margin: 0 auto;
        }

        .accordion {
            margin: 0;
            background: transparent;
        }

        .accordion-item {
            margin-bottom: 12px;
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: 16px;
            background: #fff;
            box-shadow: 0 7px 20px rgba(37, 99, 235, .06);
            transition: var(--transition);
        }

        .accordion-item.is-active {
            border-color: #8eb8ee;
            box-shadow: 0 12px 28px rgba(37, 99, 235, .10);
        }

        .accordion-title {
            padding: 1.2rem 3.2rem 1.2rem 1.3rem;
            border: 0;
            color: var(--text);
            font-size: .98rem;
            font-weight: 800;
        }

        .accordion-title:hover,
        .accordion-title:focus {
            color: var(--primary);
            background: #f4f8ff;
        }

        .accordion-title::before {
            right: 1.25rem;
            margin-top: -.65rem;
            color: var(--primary);
            font-size: 1.4rem;
        }

        .accordion-content {
            padding: 0 1.3rem 1.3rem;
            border: 0;
            color: var(--muted);
            background: #f8fbff;
            font-size: .92rem;
            line-height: 1.8;
        }

        .site-footer {
            position: relative;
            padding: 56px 0 24px;
            color: #b8c6d9;
            background: var(--nav);
        }

        .site-footer::before {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            height: 1px;
            content: "";
            background: linear-gradient(90deg, transparent, var(--cyan), var(--primary-2), transparent);
            box-shadow: 0 0 12px rgba(34, 211, 238, .5);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.3fr .7fr .7fr;
            gap: 40px;
            padding-bottom: 35px;
        }

        .footer-brand {
            margin-bottom: 14px;
        }

        .footer-copy {
            max-width: 520px;
            margin: 0;
            color: #91a4bd;
            font-size: .87rem;
        }

        .footer-title {
            margin-bottom: 13px;
            color: #fff;
            font-size: .92rem;
            font-weight: 900;
        }

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

        .footer-links li {
            margin: 7px 0;
        }

        .footer-links a {
            color: #9eb0c7;
            font-size: .86rem;
        }

        .footer-links a:hover {
            color: var(--cyan);
        }

        .footer-alert {
            padding: 13px 15px;
            border: 1px solid rgba(245, 158, 11, .25);
            border-radius: 13px;
            color: #d7c391;
            background: rgba(245, 158, 11, .06);
            font-size: .79rem;
            line-height: 1.65;
        }

        .footer-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            padding-top: 22px;
            border-top: 1px solid rgba(148, 163, 184, .16);
            color: #71859e;
            font-size: .78rem;
        }

        .back-top {
            color: #a9bdd5;
            font-weight: 800;
        }

        .back-top:hover {
            color: var(--cyan);
        }

        .reveal-overlay {
            background: rgba(2, 8, 18, .78);
            backdrop-filter: blur(5px);
        }

        .age-modal {
            width: min(92%, 560px);
            padding: 0;
            overflow: hidden;
            border: 0;
            border-radius: 22px;
            box-shadow: 0 28px 90px rgba(0,0,0,.35);
        }

        .age-modal-head {
            display: flex;
            align-items: center;
            gap: 13px;
            padding: 22px 25px;
            color: #fff;
            background: linear-gradient(135deg, var(--nav), #123158);
        }

        .age-modal-head i {
            display: grid;
            width: 42px;
            height: 42px;
            place-items: center;
            border: 1px solid rgba(34,211,238,.4);
            border-radius: 13px;
            color: var(--cyan);
            background: rgba(34,211,238,.08);
        }

        .age-modal-head h2 {
            margin: 0;
            color: #fff;
            font-size: 1.25rem;
        }

        .age-modal-body {
            padding: 25px;
            background: #fff;
        }

        .age-modal-body p {
            margin-bottom: 15px;
            font-size: .93rem;
        }

        .age-list {
            margin: 0 0 20px;
            list-style: none;
        }

        .age-list li {
            display: flex;
            gap: 9px;
            margin: 8px 0;
            color: #425670;
            font-size: .87rem;
        }

        .age-list i {
            margin-top: 6px;
            color: var(--success);
        }

        .modal-actions {
            display: flex;
            gap: 10px;
        }

        .modal-actions .button {
            flex: 1;
        }

        .toast {
            position: fixed;
            z-index: 3000;
            right: 24px;
            bottom: 24px;
            max-width: 380px;
            padding: 15px 18px;
            border: 1px solid #9bc0ef;
            border-radius: 15px;
            color: #17385f;
            background: #fff;
            box-shadow: 0 18px 45px rgba(37,99,235,.2);
            font-size: .87rem;
            font-weight: 700;
            opacity: 0;
            pointer-events: none;
            transform: translateY(15px);
            transition: var(--transition);
        }

        .toast.show {
            opacity: 1;
            transform: translateY(0);
        }

        .mobile-only {
            display: none;
        }

        @media screen and (max-width: 1024px) {
            .brand {
                max-width: 290px;
                font-size: .88rem;
            }

            .site-menu > li > a {
                padding-right: .55rem;
                padding-left: .55rem;
                font-size: .84rem;
            }

            .nav-cta {
                display: none;
            }

            .hero {
                min-height: auto;
            }

            .promo-sticker {
                width: 92px;
                height: 92px;
                top: 18px;
                right: 2%;
                font-size: .8rem;
            }

            .stage-grid {
                grid-template-columns: 1.15fr .85fr;
            }

            .stage-panel:last-child {
                grid-column: 1 / -1;
            }

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

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

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

        @media screen and (max-width: 768px) {
            html {
                scroll-padding-top: 66px;
            }

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

            .section {
                padding: 60px 0;
            }

            .top-bar {
                width: 100%;
                min-height: 0;
                padding: 0 14px 15px;
                background: var(--nav);
            }

            .top-bar-left,
            .top-bar-right {
                display: block;
                width: 100%;
            }

            .site-menu {
                display: block;
            }

            .site-menu > li > a {
                margin: 3px 0;
                padding: .8rem .9rem;
                border-radius: 10px;
            }

            .site-menu > li > a::after {
                display: none;
            }

            .site-menu > li > a.active {
                color: var(--cyan);
                background: rgba(34,211,238,.08);
            }

            .nav-cta {
                display: block;
                width: 100%;
                margin: 9px 0 0;
            }

            .mobile-only {
                display: flex;
            }

            .desktop-brand {
                display: none;
            }

            .hero {
                padding: 50px 0 52px;
            }

            .hero-copy {
                font-size: 1rem;
            }

            .promo-sticker {
                position: relative;
                top: auto;
                right: auto;
                width: auto;
                height: auto;
                margin: 0 auto 18px;
                display: inline-flex;
                border-width: 3px;
                border-radius: 999px;
                transform: none;
            }

            .stage-grid,
            .screen-card {
                grid-template-columns: 1fr;
            }

            .stage-panel:last-child {
                grid-column: auto;
            }

            .orbit-container {
                min-height: 690px;
            }

            .orbit-slide {
                padding: 24px 26px 46px;
            }

            .orbit-previous, .orbit-next {
                top: 31%;
            }

            .requirements-strip,
            .availability-points {
                grid-template-columns: 1fr;
            }

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

            .news-meta {
                display: none;
            }

            .download-card {
                padding: 36px 22px;
            }

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

            .footer-grid > :first-child {
                grid-column: auto;
            }

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

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

            .section {
                padding: 48px 0;
            }

            .title-bar {
                min-height: 62px;
            }

            .brand {
                max-width: 255px;
                font-size: .79rem;
            }

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

            .hero h1 {
                font-size: 2rem;
            }

            .hero-kickers {
                gap: 6px;
            }

            .hero-kicker {
                padding: 5px 9px;
                font-size: .72rem;
            }

            .hero-actions,
            .download-actions,
            .modal-actions {
                flex-direction: column;
            }

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

            .countdown-line {
                width: 100%;
                justify-content: center;
                flex-wrap: wrap;
            }

            .product-stage {
                padding: 10px;
            }

            .stage-status {
                display: none;
            }

            .metric-row {
                gap: 12px;
            }

            .track-head {
                align-items: flex-start;
                flex-direction: column;
            }

            .orbit-container {
                min-height: 730px;
            }

            .orbit-slide {
                padding-right: 17px;
                padding-left: 17px;
            }

            .abstract-screen {
                min-height: 250px;
                padding: 12px;
            }

            .screen-row {
                grid-template-columns: 36px 1fr;
            }

            .screen-button {
                display: none;
            }

            .requirements-strip {
                padding-right: 14px;
                padding-left: 14px;
            }

            .availability-card,
            .rank-card,
            .invite-card,
            .news-panel,
            .recommend-panel {
                padding: 20px;
            }

            .availability-top {
                flex-direction: column;
            }

            .progress-meta {
                flex-direction: column;
                gap: 2px;
            }

            .download-meta {
                align-items: flex-start;
                flex-direction: column;
            }

            .toast {
                right: 14px;
                bottom: 14px;
                left: 14px;
            }
        }

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

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

/* roulang page: category1 */
:root{
      --color-primary:#2563EB;
      --color-primary-2:#3B82F6;
      --color-primary-soft:#DBEAFE;
      --color-cyan:#22D3EE;
      --color-purple:#7C3AED;
      --color-bg:#F7FAFF;
      --color-bg-2:#EEF6FF;
      --color-white:#FFFFFF;
      --color-dark:#07111F;
      --color-dark-2:#0B1220;
      --color-text:#0F172A;
      --color-muted:#64748B;
      --color-border:#D8E5F8;
      --color-line:#E6EEF9;
      --color-success:#16A34A;
      --color-warning:#F59E0B;
      --color-danger:#EF4444;
      --shadow-sm:0 8px 24px rgba(37,99,235,.08);
      --shadow-md:0 14px 40px rgba(37,99,235,.12);
      --shadow-lg:0 24px 70px rgba(15,23,42,.14);
      --radius-sm:12px;
      --radius-md:18px;
      --radius-lg:24px;
      --radius-pill:999px;
      --container:1200px;
      --section:86px;
      --transition:all .24s ease;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      color:var(--color-text);
      background:
        radial-gradient(circle at 12% 8%, rgba(96,165,250,.20), transparent 32%),
        radial-gradient(circle at 88% 18%, rgba(34,211,238,.14), transparent 28%),
        linear-gradient(180deg,#F7FAFF 0%,#FFFFFF 45%,#F7FAFF 100%);
      line-height:1.75;
      font-size:16px;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none;transition:var(--transition)}
    a:hover,a:focus{color:var(--color-primary)}
    img{max-width:100%;height:auto;display:block}
    button,input,select,textarea{font:inherit}
    button,.button{transition:var(--transition)}
    :focus-visible{outline:3px solid rgba(34,211,238,.45);outline-offset:3px}
    .site-container{
      width:min(100% - 32px,var(--container));
      margin-inline:auto;
    }
    .section{padding:var(--section) 0}
    .section-tight{padding:58px 0}
    .section-head{
      max-width:760px;
      margin-bottom:32px;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border-radius:var(--radius-pill);
      color:#075985;
      background:rgba(219,234,254,.78);
      border:1px solid rgba(96,165,250,.32);
      font-weight:700;
      font-size:13px;
      letter-spacing:.02em;
    }
    h1,h2,h3,h4{line-height:1.18;font-weight:850;color:#0B1220;margin:0 0 16px}
    h1{font-size:clamp(30px,4.2vw,48px);letter-spacing:-.04em}
    h2{font-size:clamp(26px,3.2vw,36px);letter-spacing:-.03em}
    h3{font-size:22px;letter-spacing:-.02em}
    p{margin:0 0 14px;color:var(--color-muted)}
    .lead{font-size:17px;color:#475569;max-width:760px}
    .muted{color:var(--color-muted)}
    .hide-small{display:inline}

    .top-shell{
      position:sticky;
      top:0;
      z-index:50;
      background:var(--color-dark);
      box-shadow:0 12px 34px rgba(2,6,23,.22);
    }
    .top-shell:after{
      content:"";
      display:block;
      height:1px;
      background:linear-gradient(90deg,transparent,var(--color-primary),var(--color-cyan),var(--color-purple),transparent);
      opacity:.9;
    }
    .title-bar.mobile-only{
      display:none;
      background:#07111F;
      padding:14px 18px;
    }
    .top-bar{
      background:linear-gradient(180deg,#07111F 0%,#0B1220 100%);
      min-height:72px;
      width:min(100%,var(--container));
      margin:0 auto;
      padding:0 16px;
    }
    .top-bar ul{background:transparent}
    .brand{
      display:inline-flex;
      align-items:center;
      gap:10px;
      color:#F8FAFC;
      font-weight:900;
      letter-spacing:-.02em;
      min-width:0;
    }
    .brand:hover,.brand:focus{color:#FFFFFF}
    .brand-mark{
      width:38px;
      height:38px;
      display:inline-grid;
      place-items:center;
      border-radius:13px;
      color:#E0F2FE;
      background:linear-gradient(135deg,var(--color-primary),var(--color-cyan));
      box-shadow:0 0 22px rgba(34,211,238,.35);
      flex:0 0 auto;
    }
    .desktop-brand{display:flex;align-items:center}
    .site-menu{
      align-items:center;
      gap:6px;
    }
    .site-menu a:not(.button){
      position:relative;
      color:#CBD5E1;
      font-weight:750;
      padding:24px 13px;
      border-radius:12px;
    }
    .site-menu a:not(.button):hover{
      color:#F8FAFC;
      background:rgba(148,163,184,.08);
    }
    .site-menu a.active{
      color:#67E8F9 !important;
      text-shadow:0 0 16px rgba(34,211,238,.55);
    }
    .site-menu a.active:after{
      content:"";
      position:absolute;
      left:16px;
      right:16px;
      bottom:12px;
      height:3px;
      border-radius:999px;
      background:linear-gradient(90deg,var(--color-primary),var(--color-cyan));
      box-shadow:0 0 18px rgba(34,211,238,.7);
    }
    .button.nav-cta{
      margin-left:8px;
      border-radius:var(--radius-pill);
      background:linear-gradient(135deg,var(--color-primary),var(--color-cyan));
      color:#fff;
      font-weight:850;
      padding:12px 18px;
      box-shadow:0 10px 24px rgba(37,99,235,.28);
    }
    .button.nav-cta:hover,.button.nav-cta:focus{
      transform:translateY(-2px);
      color:#fff;
      box-shadow:0 14px 32px rgba(34,211,238,.26);
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      min-height:48px;
      padding:13px 20px;
      border-radius:var(--radius-pill);
      font-weight:850;
      border:1px solid transparent;
      cursor:pointer;
      line-height:1.2;
    }
    .btn-primary{
      color:#fff;
      background:linear-gradient(135deg,var(--color-primary),var(--color-primary-2) 58%,var(--color-cyan));
      box-shadow:0 14px 34px rgba(37,99,235,.24);
    }
    .btn-primary:hover,.btn-primary:focus{
      color:#fff;
      transform:translateY(-2px);
      box-shadow:0 18px 44px rgba(37,99,235,.30);
    }
    .btn-secondary{
      color:var(--color-primary);
      background:#fff;
      border-color:#BBD4FF;
      box-shadow:var(--shadow-sm);
    }
    .btn-secondary:hover,.btn-secondary:focus{
      background:#F8FBFF;
      border-color:var(--color-primary-2);
      transform:translateY(-2px);
    }
    .btn-soft{
      background:#EFF6FF;
      border-color:#C7DBFF;
      color:#1D4ED8;
    }
    .btn-soft:hover{background:#DBEAFE;color:#1E40AF}
    .button-group-wrap{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      align-items:center;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      border-radius:var(--radius-pill);
      padding:6px 10px;
      font-size:12px;
      font-weight:850;
      border:1px solid transparent;
      white-space:nowrap;
    }
    .badge.recommend{color:#1D4ED8;background:#DBEAFE;border-color:#BBD4FF}
    .badge.required{color:#047857;background:#D1FAE5;border-color:#A7F3D0}
    .badge.warning{color:#B45309;background:#FEF3C7;border-color:#FDE68A}
    .badge.neutral{color:#475569;background:#F1F5F9;border-color:#E2E8F0}
    .tag-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
    .tag{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:8px 12px;
      border:1px solid rgba(37,99,235,.18);
      background:rgba(255,255,255,.72);
      border-radius:var(--radius-pill);
      color:#1E3A8A;
      font-weight:750;
      font-size:13px;
      box-shadow:0 6px 18px rgba(37,99,235,.05);
    }

    .page-hero{
      padding:58px 0 40px;
      position:relative;
      overflow:hidden;
      background:
        linear-gradient(135deg,rgba(219,234,254,.92),rgba(255,255,255,.88) 50%,rgba(236,254,255,.72)),
        repeating-linear-gradient(90deg,rgba(37,99,235,.06) 0 1px,transparent 1px 72px);
    }
    .page-hero:before{
      content:"";
      position:absolute;
      width:340px;
      height:340px;
      border-radius:999px;
      background:radial-gradient(circle,rgba(34,211,238,.22),transparent 68%);
      right:-120px;
      top:-140px;
    }
    .breadcrumb-line{
      display:flex;
      gap:8px;
      align-items:center;
      color:#64748B;
      font-size:14px;
      margin-bottom:20px;
      flex-wrap:wrap;
    }
    .breadcrumb-line a{color:#1D4ED8;font-weight:750}
    .hero-card{
      background:rgba(255,255,255,.86);
      border:1px solid rgba(187,212,255,.82);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow-md);
      padding:24px;
      position:relative;
      overflow:hidden;
    }
    .hero-card:before{
      content:"";
      position:absolute;
      left:0;right:0;top:0;height:4px;
      background:linear-gradient(90deg,var(--color-primary),var(--color-cyan),var(--color-purple));
    }
    .qualification{
      display:grid;
      gap:12px;
      margin-top:18px;
    }
    .qualification-item{
      display:flex;
      gap:12px;
      align-items:flex-start;
      padding:13px;
      border-radius:16px;
      background:#F8FBFF;
      border:1px solid var(--color-line);
    }
    .qualification-item i{
      width:30px;height:30px;
      display:grid;place-items:center;
      flex:0 0 auto;
      border-radius:11px;
      color:var(--color-primary);
      background:#EAF2FF;
    }
    .qualification-item strong{display:block;color:#0F172A;line-height:1.35}
    .qualification-item span{display:block;color:#64748B;font-size:14px;line-height:1.55;margin-top:2px}

    .filter-panel{
      margin-top:-12px;
      position:relative;
      z-index:2;
    }
    .filter-bar{
      background:#FFFFFF;
      border:1px solid var(--color-border);
      border-radius:var(--radius-lg);
      padding:16px;
      box-shadow:var(--shadow-md);
    }
    .filter-label{
      display:block;
      color:#334155;
      font-size:13px;
      font-weight:850;
      margin-bottom:8px;
    }
    .filter-bar select,
    .filter-bar input{
      height:44px;
      border-radius:14px;
      border:1px solid #CADBF4;
      background:#F8FBFF;
      box-shadow:none;
      margin-bottom:0;
      color:#0F172A;
    }
    .filter-bar select:focus,
    .filter-bar input:focus{
      border-color:var(--color-primary-2);
      box-shadow:0 0 0 4px rgba(59,130,246,.14);
      background:#fff;
    }

    .version-list{
      display:grid;
      gap:18px;
    }
    .version-card{
      display:grid;
      grid-template-columns:74px 1fr auto;
      gap:18px;
      align-items:center;
      padding:20px;
      background:#FFFFFF;
      border:1px solid var(--color-border);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow-sm);
      transition:var(--transition);
    }
    .version-card:hover{
      transform:translateY(-4px);
      border-color:#B8D3FF;
      box-shadow:var(--shadow-md);
    }
    .version-icon{
      width:64px;
      height:64px;
      border-radius:22px;
      display:grid;
      place-items:center;
      color:#fff;
      background:linear-gradient(135deg,var(--color-primary),var(--color-cyan));
      box-shadow:0 14px 30px rgba(37,99,235,.20);
      font-size:24px;
    }
    .version-card.alt .version-icon{background:linear-gradient(135deg,#7C3AED,#60A5FA)}
    .version-card.safe .version-icon{background:linear-gradient(135deg,#0EA5E9,#16A34A)}
    .version-card.light .version-icon{background:linear-gradient(135deg,#2563EB,#93C5FD)}
    .version-main h3{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
      margin-bottom:8px;
    }
    .version-points{
      margin:10px 0 0;
      padding:0;
      list-style:none;
      display:grid;
      gap:6px;
    }
    .version-points li{
      display:flex;
      gap:8px;
      color:#475569;
      font-size:15px;
    }
    .version-points i{color:var(--color-primary);margin-top:5px}
    .version-side{
      min-width:190px;
      display:grid;
      gap:10px;
      justify-items:end;
    }
    .status-line{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .version-meta{
      color:#64748B;
      font-size:13px;
      text-align:right;
    }

    .notice-grid{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:22px;
      align-items:stretch;
    }
    .notice-card,.mini-card,.cta-panel,.feedback-card{
      background:#FFFFFF;
      border:1px solid var(--color-border);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow-sm);
      padding:24px;
    }
    .notice-card{
      background:
        linear-gradient(135deg,#FFFFFF,#F8FBFF);
      position:relative;
      overflow:hidden;
    }
    .notice-card:before{
      content:"";
      position:absolute;
      right:-90px;
      bottom:-110px;
      width:240px;
      height:240px;
      border-radius:999px;
      background:rgba(96,165,250,.14);
    }
    .notice-list{
      list-style:none;
      margin:20px 0 0;
      padding:0;
      display:grid;
      gap:12px;
      position:relative;
    }
    .notice-list li{
      display:flex;
      gap:12px;
      padding:13px;
      border-radius:16px;
      background:#F8FBFF;
      border:1px solid #E6EEF9;
    }
    .notice-list i{
      color:#1D4ED8;
      width:28px;height:28px;
      display:grid;place-items:center;
      border-radius:10px;
      background:#DBEAFE;
      flex:0 0 auto;
    }
    .mini-stack{
      display:grid;
      gap:14px;
    }
    .mini-card{
      padding:18px;
      display:flex;
      gap:13px;
      align-items:flex-start;
    }
    .mini-card i{
      width:38px;height:38px;
      border-radius:14px;
      display:grid;
      place-items:center;
      color:#fff;
      background:linear-gradient(135deg,var(--color-primary),var(--color-cyan));
      flex:0 0 auto;
    }
    .mini-card strong{display:block;margin-bottom:4px}
    .mini-card span{font-size:14px;color:#64748B}

    .process-wrap{
      background:linear-gradient(180deg,#F8FBFF,#FFFFFF);
      border-top:1px solid #E6EEF9;
      border-bottom:1px solid #E6EEF9;
    }
    .step-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
    }
    .step-card{
      position:relative;
      padding:22px;
      background:#fff;
      border:1px solid var(--color-border);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow-sm);
      transition:var(--transition);
    }
    .step-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
    .step-num{
      width:38px;height:38px;
      border-radius:14px;
      display:grid;place-items:center;
      margin-bottom:14px;
      color:#fff;
      font-weight:900;
      background:linear-gradient(135deg,var(--color-primary),var(--color-cyan));
    }
    .step-card p{font-size:15px}

    .feedback-card label{
      font-weight:850;
      color:#334155;
      font-size:14px;
      margin-bottom:7px;
    }
    .feedback-card input,
    .feedback-card select,
    .feedback-card textarea{
      border-radius:15px;
      border-color:#CADBF4;
      box-shadow:none;
      background:#F8FBFF;
    }
    .feedback-card input:focus,
    .feedback-card select:focus,
    .feedback-card textarea:focus{
      border-color:var(--color-primary-2);
      box-shadow:0 0 0 4px rgba(59,130,246,.14);
      background:#fff;
    }
    .form-tip{
      font-size:13px;
      color:#64748B;
      background:#F8FBFF;
      border:1px dashed #BBD4FF;
      border-radius:14px;
      padding:10px 12px;
      margin-bottom:16px;
    }

    .faq-section .accordion{
      background:transparent;
      border:0;
    }
    .faq-section .accordion-item{
      margin-bottom:12px;
      border:1px solid var(--color-border);
      border-radius:18px;
      background:#FFFFFF;
      overflow:hidden;
      box-shadow:var(--shadow-sm);
    }
    .faq-section .accordion-title{
      border:0;
      color:#0F172A;
      font-weight:850;
      font-size:16px;
      padding:18px 48px 18px 22px;
      background:#FFFFFF;
    }
    .faq-section .accordion-title:before{
      color:var(--color-primary);
      font-size:22px;
      right:20px;
      margin-top:-12px;
    }
    .faq-section .is-active>.accordion-title,
    .faq-section .accordion-title:hover,
    .faq-section .accordion-title:focus{
      background:#F0F7FF;
      color:#1D4ED8;
    }
    .faq-section .accordion-content{
      border:0;
      border-top:1px solid #E6EEF9;
      color:#475569;
      padding:18px 22px 22px;
      background:#FBFDFF;
    }

    .cta-panel{
      padding:34px;
      background:
        radial-gradient(circle at 15% 10%,rgba(34,211,238,.18),transparent 30%),
        linear-gradient(135deg,#FFFFFF,#EFF6FF 60%,#ECFEFF);
      border-color:#BBD4FF;
      overflow:hidden;
      position:relative;
    }
    .cta-panel:after{
      content:"";
      position:absolute;
      right:26px;
      top:26px;
      width:118px;
      height:118px;
      border-radius:32px;
      border:1px solid rgba(37,99,235,.16);
      transform:rotate(12deg);
      background:rgba(255,255,255,.42);
    }
    .cta-content{position:relative;z-index:1}
    .cta-meta{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      margin-top:16px;
      color:#475569;
      font-size:14px;
    }
    .cta-meta span{
      display:inline-flex;
      gap:7px;
      align-items:center;
      padding:7px 10px;
      background:rgba(255,255,255,.74);
      border:1px solid rgba(187,212,255,.76);
      border-radius:var(--radius-pill);
    }

    .site-footer{
      background:#07111F;
      color:#CBD5E1;
      padding:54px 0 24px;
      position:relative;
    }
    .site-footer:before{
      content:"";
      position:absolute;
      top:0;left:0;right:0;
      height:1px;
      background:linear-gradient(90deg,transparent,var(--color-cyan),var(--color-primary),transparent);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.4fr .7fr 1fr;
      gap:36px;
      padding-bottom:30px;
      border-bottom:1px solid rgba(148,163,184,.18);
    }
    .footer-brand{margin-bottom:14px}
    .footer-copy{
      color:#94A3B8;
      max-width:520px;
      font-size:14px;
    }
    .footer-title{
      color:#F8FAFC;
      font-weight:900;
      margin-bottom:14px;
    }
    .footer-links{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      gap:9px;
    }
    .footer-links a{
      color:#94A3B8;
      font-size:14px;
    }
    .footer-links a:hover{color:#67E8F9}
    .footer-alert{
      padding:14px;
      border:1px solid rgba(34,211,238,.22);
      background:rgba(15,23,42,.72);
      border-radius:18px;
      color:#CBD5E1;
      font-size:14px;
    }
    .footer-bottom{
      padding-top:20px;
      display:flex;
      justify-content:space-between;
      gap:16px;
      align-items:center;
      color:#94A3B8;
      font-size:13px;
      flex-wrap:wrap;
    }
    .back-top{
      color:#CFFAFE;
      display:inline-flex;
      gap:8px;
      align-items:center;
      font-weight:800;
    }

    .reveal.age-modal{
      border:0;
      border-radius:24px;
      overflow:hidden;
      box-shadow:var(--shadow-lg);
      padding:0;
      max-width:520px;
    }
    .modal-head{
      background:#07111F;
      color:#fff;
      padding:20px 24px;
      display:flex;
      align-items:center;
      gap:12px;
    }
    .modal-head i{
      width:40px;height:40px;
      display:grid;place-items:center;
      border-radius:14px;
      background:linear-gradient(135deg,var(--color-primary),var(--color-cyan));
    }
    .modal-body{padding:24px}
    .modal-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

    @media (max-width:1024px){
      :root{--section:70px}
      .version-card{grid-template-columns:64px 1fr}
      .version-side{grid-column:1 / -1;justify-items:start;min-width:0}
      .status-line{justify-content:flex-start}
      .version-meta{text-align:left}
      .step-grid{grid-template-columns:repeat(2,1fr)}
      .notice-grid{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr 1fr}
    }
    @media (max-width:767px){
      :root{--section:56px}
      body{font-size:15.5px}
      .title-bar.mobile-only{display:flex;justify-content:space-between;align-items:center}
      .desktop-brand{display:none}
      .top-bar{
        display:none;
        width:100%;
        padding:10px 18px 18px;
        min-height:auto;
      }
      .top-bar.is-open{display:block}
      .top-bar-right,.site-menu{width:100%}
      .site-menu{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:4px;
      }
      .site-menu li{width:100%}
      .site-menu a:not(.button){
        display:block;
        padding:13px 12px;
      }
      .site-menu a.active:after{display:none}
      .button.nav-cta{
        width:100%;
        margin:8px 0 0;
      }
      .brand{font-size:15px}
      .brand-mark{width:34px;height:34px;border-radius:12px}
      .page-hero{padding:40px 0 32px}
      .hide-small{display:none}
      .hero-card{margin-top:22px;padding:20px}
      .filter-bar{padding:14px}
      .filter-bar .cell{margin-bottom:12px}
      .version-card{
        grid-template-columns:1fr;
        padding:18px;
      }
      .version-icon{width:58px;height:58px}
      .version-side{width:100%}
      .button-group-wrap .btn{width:100%}
      .btn{width:100%;min-height:46px}
      .step-grid{grid-template-columns:1fr}
      .notice-card,.mini-card,.cta-panel,.feedback-card{padding:20px}
      .cta-panel{padding:24px}
      .cta-panel:after{display:none}
      .footer-grid{grid-template-columns:1fr;gap:24px}
      .footer-bottom{align-items:flex-start;flex-direction:column}
      .modal-actions .btn{width:100%}
    }
    @media (max-width:520px){
      .site-container{width:min(100% - 24px,var(--container))}
      .tag-row{gap:8px}
      .tag{font-size:12px}
      .version-main h3{font-size:20px}
      .breadcrumb-line{font-size:13px}
      .section-head{margin-bottom:24px}
    }

/* roulang page: category2 */
:root{
      --primary:#2563eb;
      --primary-2:#3b82f6;
      --primary-3:#60a5fa;
      --cyan:#22d3ee;
      --purple:#7c3aed;
      --ink:#0f172a;
      --muted:#64748b;
      --weak:#94a3b8;
      --line:#dbeafe;
      --line-2:#e2e8f0;
      --bg:#f7faff;
      --bg-2:#eef6ff;
      --white:#ffffff;
      --dark:#07111f;
      --dark-2:#0b1220;
      --green:#10b981;
      --orange:#f59e0b;
      --red:#ef4444;
      --radius-sm:12px;
      --radius:20px;
      --radius-lg:28px;
      --shadow:0 12px 36px rgba(37,99,235,.10);
      --shadow-hover:0 18px 46px rgba(37,99,235,.16);
      --container:1200px;
      --nav-h:74px;
      --ease:all .24s ease;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
      color:var(--ink);
      background:
        radial-gradient(circle at 10% 0%, rgba(96,165,250,.20), transparent 34%),
        radial-gradient(circle at 92% 8%, rgba(34,211,238,.16), transparent 30%),
        linear-gradient(180deg,#f7faff 0%,#ffffff 42%,#f7faff 100%);
      line-height:1.75;
      font-size:16px;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none;transition:var(--ease)}
    a:hover,a:focus{color:var(--primary)}
    img{max-width:100%;height:auto}
    button,input,select,textarea{font:inherit}
    input,select,textarea{
      width:100%;
      border:1px solid var(--line);
      border-radius:14px;
      padding:13px 14px;
      background:#fff;
      color:var(--ink);
      outline:none;
      transition:var(--ease);
    }
    input:focus,select:focus,textarea:focus{
      border-color:var(--primary-2);
      box-shadow:0 0 0 4px rgba(59,130,246,.14);
    }
    .site-container{
      width:min(var(--container), calc(100% - 40px));
      margin:0 auto;
    }
    .section{padding:86px 0}
    .section-tight{padding:64px 0}
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:28px;
      margin-bottom:30px;
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:13px;
      font-weight:800;
      color:var(--primary);
      letter-spacing:.03em;
      background:rgba(37,99,235,.08);
      border:1px solid rgba(37,99,235,.15);
      border-radius:999px;
      padding:7px 12px;
      margin-bottom:12px;
    }
    .section-title{
      margin:0;
      font-size:clamp(28px,3.2vw,38px);
      line-height:1.2;
      letter-spacing:-.03em;
      color:var(--ink);
    }
    .section-desc{
      max-width:650px;
      color:var(--muted);
      margin:10px 0 0;
      font-size:16.5px;
    }

    .top-shell{
      position:sticky;
      top:0;
      z-index:1000;
      background:var(--dark);
      box-shadow:0 12px 28px rgba(2,8,23,.24);
    }
    .top-shell:after{
      content:"";
      display:block;
      height:1px;
      background:linear-gradient(90deg, transparent, var(--cyan), var(--primary-2), var(--purple), transparent);
      opacity:.9;
    }
    .title-bar.mobile-only{
      background:var(--dark);
      color:#fff;
      min-height:64px;
      padding:12px 20px;
    }
    .mobile-only{display:none}
    .top-bar{
      max-width:var(--container);
      min-height:var(--nav-h);
      margin:0 auto;
      padding:0 20px;
      background:transparent;
      color:#fff;
    }
    .top-bar ul{background:transparent}
    .desktop-brand{display:flex;align-items:center}
    .brand{
      display:inline-flex;
      align-items:center;
      gap:10px;
      color:#fff;
      font-weight:900;
      letter-spacing:-.02em;
      line-height:1.2;
    }
    .brand:hover,.brand:focus{color:#fff}
    .brand-mark{
      width:38px;
      height:38px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:13px;
      background:linear-gradient(135deg,var(--primary),var(--cyan));
      color:#fff;
      box-shadow:0 0 18px rgba(34,211,238,.35);
      flex:0 0 auto;
    }
    .site-menu{
      gap:6px;
      align-items:center;
    }
    .site-menu a:not(.button){
      position:relative;
      color:#dbeafe;
      font-weight:700;
      padding:25px 14px;
      border-radius:12px;
    }
    .site-menu a:not(.button):hover{
      color:#fff;
      background:rgba(96,165,250,.10);
    }
    .site-menu a.active{
      color:#67e8f9;
      text-shadow:0 0 14px rgba(34,211,238,.52);
    }
    .site-menu a.active:after{
      content:"";
      position:absolute;
      left:16px;
      right:16px;
      bottom:14px;
      height:3px;
      border-radius:999px;
      background:linear-gradient(90deg,var(--cyan),var(--primary-2));
      box-shadow:0 0 14px rgba(34,211,238,.65);
    }
    .nav-cta{
      margin-left:8px;
      margin-bottom:0;
      border-radius:999px;
      padding:13px 18px;
      font-weight:900;
      color:#06111f !important;
      background:linear-gradient(135deg,#67e8f9,#60a5fa);
      box-shadow:0 10px 24px rgba(34,211,238,.22);
    }
    .nav-cta:hover,.nav-cta:focus{
      transform:translateY(-1px);
      box-shadow:0 14px 30px rgba(34,211,238,.34);
      background:linear-gradient(135deg,#a5f3fc,#3b82f6);
      color:#06111f !important;
    }

    .button{
      border-radius:999px;
      font-weight:900;
      letter-spacing:.01em;
      transition:var(--ease);
    }
    .btn-primary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      min-height:48px;
      padding:14px 22px;
      color:#fff;
      background:linear-gradient(135deg,var(--primary),var(--primary-2));
      box-shadow:0 14px 30px rgba(37,99,235,.24);
    }
    .btn-primary:hover,.btn-primary:focus{
      color:#fff;
      transform:translateY(-2px);
      box-shadow:0 18px 40px rgba(37,99,235,.30);
    }
    .btn-secondary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      min-height:48px;
      padding:13px 20px;
      color:var(--primary);
      background:#fff;
      border:1px solid rgba(37,99,235,.22);
      box-shadow:0 10px 24px rgba(37,99,235,.08);
    }
    .btn-secondary:hover,.btn-secondary:focus{
      color:#fff;
      border-color:transparent;
      background:linear-gradient(135deg,var(--primary-2),var(--cyan));
      transform:translateY(-2px);
    }
    .btn-soft{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:44px;
      padding:11px 16px;
      color:#92400e;
      border:1px solid rgba(245,158,11,.28);
      background:#fffbeb;
    }
    .btn-soft:hover{color:#78350f;background:#fef3c7}

    .hero{
      position:relative;
      padding:74px 0 80px;
      overflow:hidden;
    }
    .hero:before{
      content:"";
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(rgba(37,99,235,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37,99,235,.055) 1px, transparent 1px);
      background-size:42px 42px;
      mask-image:linear-gradient(180deg,#000 0%,transparent 82%);
      pointer-events:none;
    }
    .breadcrumb{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      align-items:center;
      margin:0 0 18px;
      padding:0;
      list-style:none;
      color:var(--muted);
      font-size:14px;
    }
    .breadcrumb a{color:var(--primary);font-weight:800}
    .hero-card{
      position:relative;
      z-index:1;
      border:1px solid rgba(219,234,254,.95);
      border-radius:var(--radius-lg);
      background:rgba(255,255,255,.88);
      box-shadow:var(--shadow);
      padding:36px;
      overflow:hidden;
    }
    .hero-card:after{
      content:"";
      position:absolute;
      right:-80px;
      top:-80px;
      width:260px;
      height:260px;
      background:radial-gradient(circle, rgba(34,211,238,.24), transparent 66%);
      pointer-events:none;
    }
    .hero h1{
      margin:12px 0 16px;
      font-size:clamp(30px,4vw,48px);
      line-height:1.12;
      letter-spacing:-.04em;
      color:#0b1220;
    }
    .hero-sub{
      max-width:720px;
      color:var(--muted);
      font-size:17px;
      margin:0 0 24px;
    }
    .badge-row,.pill-row{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:7px;
      border-radius:999px;
      padding:7px 11px;
      font-size:13px;
      font-weight:900;
      line-height:1;
      border:1px solid rgba(37,99,235,.16);
      color:var(--primary);
      background:#eff6ff;
    }
    .badge.cyan{color:#0891b2;background:#ecfeff;border-color:rgba(34,211,238,.24)}
    .badge.orange{color:#b45309;background:#fffbeb;border-color:rgba(245,158,11,.25)}
    .badge.green{color:#047857;background:#ecfdf5;border-color:rgba(16,185,129,.23)}
    .hero-actions{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      margin-top:26px;
    }
    .qualification{
      display:grid;
      gap:14px;
      margin-top:22px;
    }
    .q-item{
      display:flex;
      gap:12px;
      padding:14px;
      border:1px solid var(--line);
      background:#f8fbff;
      border-radius:18px;
    }
    .q-icon{
      width:38px;
      height:38px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:14px;
      background:#fff;
      color:var(--primary);
      box-shadow:0 8px 18px rgba(37,99,235,.10);
      flex:0 0 auto;
    }
    .q-item strong{display:block;margin-bottom:2px}
    .q-item span{display:block;color:var(--muted);font-size:14.5px}

    .status-panel{
      position:relative;
      z-index:1;
      border-radius:24px;
      background:#07111f;
      color:#e5f2ff;
      box-shadow:0 22px 48px rgba(7,17,31,.22);
      border:1px solid rgba(96,165,250,.28);
      overflow:hidden;
    }
    .status-panel:before{
      content:"";
      display:block;
      height:4px;
      background:linear-gradient(90deg,var(--cyan),var(--primary-2),var(--purple));
    }
    .panel-inner{padding:24px}
    .panel-title{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      margin-bottom:16px;
    }
    .panel-title strong{font-size:20px}
    .pulse{
      display:inline-flex;
      align-items:center;
      gap:7px;
      color:#86efac;
      font-weight:900;
      font-size:13px;
    }
    .pulse:before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:#22c55e;
      box-shadow:0 0 0 6px rgba(34,197,94,.15);
    }
    .check-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
      margin-top:16px;
    }
    .check-tile{
      padding:14px;
      border-radius:16px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(219,234,254,.13);
    }
    .check-tile b{display:block;color:#fff;margin-bottom:4px}
    .check-tile span{font-size:13.5px;color:#bfd4ee}
    .mini-note{
      margin-top:16px;
      border-radius:16px;
      padding:13px 14px;
      background:rgba(34,211,238,.10);
      border:1px solid rgba(34,211,238,.22);
      color:#dff9ff;
      font-size:14px;
    }

    .layout-doc{
      align-items:flex-start;
    }
    .anchor-card{
      position:sticky;
      top:104px;
      border-radius:var(--radius);
      border:1px solid var(--line);
      background:#fff;
      box-shadow:var(--shadow);
      padding:18px;
    }
    .anchor-title{
      font-size:14px;
      font-weight:900;
      color:var(--ink);
      margin-bottom:12px;
      display:flex;
      align-items:center;
      gap:8px;
    }
    .anchor-list{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      gap:8px;
    }
    .anchor-list a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:10px 12px;
      border-radius:13px;
      color:var(--muted);
      font-weight:800;
      border:1px solid transparent;
    }
    .anchor-list a:hover,.anchor-list a:focus,.anchor-list a.is-current{
      color:var(--primary);
      background:#eff6ff;
      border-color:rgba(37,99,235,.14);
    }

    .content-card{
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      background:#fff;
      box-shadow:var(--shadow);
      padding:28px;
      margin-bottom:22px;
      transition:var(--ease);
    }
    .content-card:hover{
      transform:translateY(-2px);
      box-shadow:var(--shadow-hover);
    }
    .content-card h2{
      margin:0 0 12px;
      font-size:clamp(24px,2.6vw,32px);
      line-height:1.25;
      letter-spacing:-.025em;
    }
    .content-card p{color:var(--muted);margin:0 0 16px}
    .step-list{
      display:grid;
      gap:14px;
      margin-top:18px;
    }
    .step-item{
      display:grid;
      grid-template-columns:48px 1fr auto;
      gap:14px;
      align-items:center;
      padding:16px;
      border:1px solid var(--line);
      border-radius:18px;
      background:linear-gradient(180deg,#fff,#f8fbff);
    }
    .step-no{
      width:48px;
      height:48px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:16px;
      background:linear-gradient(135deg,var(--primary),var(--primary-3));
      color:#fff;
      font-weight:900;
      box-shadow:0 12px 22px rgba(37,99,235,.20);
    }
    .step-text strong{display:block;font-size:17px;margin-bottom:2px}
    .step-text span{display:block;color:var(--muted);font-size:14.5px}
    .state-badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      border-radius:999px;
      padding:6px 10px;
      font-size:12.5px;
      font-weight:900;
      white-space:nowrap;
    }
    .state-badge.required{background:#eff6ff;color:var(--primary)}
    .state-badge.notice{background:#fffbeb;color:#b45309}
    .state-badge.safe{background:#ecfdf5;color:#047857}

    .compare-wrap{
      overflow:hidden;
      border:1px solid var(--line);
      border-radius:22px;
      background:#fff;
      box-shadow:var(--shadow);
    }
    .compare-row{
      display:grid;
      grid-template-columns:1fr 1fr;
      border-bottom:1px solid var(--line-2);
    }
    .compare-row:last-child{border-bottom:none}
    .compare-cell{
      padding:18px;
      min-height:72px;
    }
    .compare-cell:first-child{
      border-right:1px solid var(--line-2);
      background:#f8fbff;
    }
    .compare-head{
      font-weight:900;
      color:var(--ink);
      background:#eff6ff !important;
    }
    .good{color:#047857;font-weight:900}
    .bad{color:#b45309;font-weight:900}
    .compare-cell p{margin:4px 0 0;color:var(--muted);font-size:14.5px}

    .tips-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
    }
    .tip-card{
      border-radius:22px;
      border:1px solid var(--line);
      background:#fff;
      box-shadow:var(--shadow);
      padding:22px;
      transition:var(--ease);
    }
    .tip-card:hover{
      transform:translateY(-3px);
      box-shadow:var(--shadow-hover);
      border-color:rgba(37,99,235,.24);
    }
    .tip-icon{
      width:48px;
      height:48px;
      border-radius:17px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:#eff6ff;
      color:var(--primary);
      margin-bottom:14px;
      font-size:20px;
    }
    .tip-card h3{
      font-size:20px;
      margin:0 0 8px;
      letter-spacing:-.02em;
    }
    .tip-card p{
      margin:0;
      color:var(--muted);
      font-size:15px;
    }

    .feedback-card{
      border-radius:var(--radius-lg);
      border:1px solid var(--line);
      background:linear-gradient(180deg,#ffffff,#f8fbff);
      box-shadow:var(--shadow);
      padding:26px;
    }
    .form-note{
      display:flex;
      align-items:flex-start;
      gap:10px;
      padding:13px 14px;
      border-radius:16px;
      background:#ecfeff;
      color:#0e7490;
      border:1px solid rgba(34,211,238,.22);
      margin-bottom:18px;
      font-size:14px;
    }
    .form-actions{
      display:flex;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
      margin-top:16px;
    }
    label{
      color:#334155;
      font-weight:900;
      margin-bottom:7px;
    }

    .faq-zone{background:linear-gradient(180deg,#eef6ff 0%,#f7faff 100%)}
    .accordion{
      background:transparent;
    }
    .accordion-item{
      margin-bottom:12px;
      border:1px solid var(--line);
      border-radius:18px;
      overflow:hidden;
      background:#fff;
      box-shadow:0 10px 28px rgba(37,99,235,.07);
    }
    .accordion-title{
      border:0 !important;
      color:var(--ink);
      font-weight:900;
      font-size:16px;
      padding:18px 48px 18px 20px;
      background:#fff;
    }
    .accordion-title:hover,.accordion-title:focus{
      background:#f8fbff;
      color:var(--primary);
    }
    .accordion-title:before{
      color:var(--primary);
      font-weight:900;
    }
    .accordion-content{
      border:0 !important;
      border-top:1px solid var(--line);
      color:var(--muted);
      padding:18px 20px 20px;
      background:#fbfdff;
    }

    .cta-band{
      position:relative;
      overflow:hidden;
      border-radius:32px;
      border:1px solid rgba(37,99,235,.15);
      background:
        radial-gradient(circle at 12% 18%, rgba(34,211,238,.20), transparent 30%),
        linear-gradient(135deg,#eff6ff 0%,#ffffff 54%,#e0f2fe 100%);
      box-shadow:var(--shadow-hover);
      padding:38px;
    }
    .cta-band:after{
      content:"";
      position:absolute;
      right:-54px;
      bottom:-70px;
      width:230px;
      height:230px;
      border-radius:50%;
      border:34px solid rgba(37,99,235,.07);
    }
    .cta-content{position:relative;z-index:1}
    .cta-title{
      margin:0 0 10px;
      font-size:clamp(26px,3vw,38px);
      letter-spacing:-.035em;
      line-height:1.18;
    }
    .cta-text{
      max-width:720px;
      margin:0 0 22px;
      color:var(--muted);
    }
    .cta-meta{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:18px;
      color:var(--muted);
      font-size:14px;
    }

    .site-footer{
      background:#07111f;
      color:#dbeafe;
      padding:56px 0 22px;
      position:relative;
    }
    .site-footer:before{
      content:"";
      position:absolute;
      top:0;left:0;right:0;
      height:1px;
      background:linear-gradient(90deg,transparent,var(--cyan),var(--primary-2),var(--purple),transparent);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.4fr .75fr 1fr;
      gap:32px;
      align-items:start;
    }
    .footer-brand{margin-bottom:14px}
    .footer-copy{
      max-width:460px;
      color:#a8c2df;
      margin:0;
      font-size:14.5px;
    }
    .footer-title{
      color:#fff;
      font-weight:900;
      margin-bottom:12px;
    }
    .footer-links{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      gap:9px;
    }
    .footer-links a{
      color:#a8c2df;
      font-weight:700;
    }
    .footer-links a:hover{color:#67e8f9}
    .footer-alert{
      border:1px solid rgba(34,211,238,.20);
      background:rgba(34,211,238,.08);
      color:#dff9ff;
      border-radius:18px;
      padding:14px;
      font-size:14px;
    }
    .footer-bottom{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:16px;
      flex-wrap:wrap;
      margin-top:36px;
      padding-top:20px;
      border-top:1px solid rgba(219,234,254,.12);
      color:#94a3b8;
      font-size:14px;
    }
    .back-top{
      color:#dbeafe;
      font-weight:900;
      display:inline-flex;
      align-items:center;
      gap:7px;
    }
    .back-top:hover{color:#67e8f9}

    .reveal{
      border:0;
      border-radius:24px;
      overflow:hidden;
      box-shadow:0 24px 80px rgba(2,8,23,.35);
      padding:0;
    }
    .modal-head{
      background:#07111f;
      color:#fff;
      padding:20px 24px;
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:900;
    }
    .modal-body{padding:24px}
    .modal-body p{color:var(--muted)}
    .modal-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
    .close-button{color:#fff}

    @media (max-width:1024px){
      .site-container{width:min(100% - 32px, var(--container))}
      .section{padding:70px 0}
      .hero-card{padding:28px}
      .check-grid{grid-template-columns:1fr}
      .tips-grid{grid-template-columns:1fr 1fr}
      .footer-grid{grid-template-columns:1fr 1fr}
      .anchor-card{position:relative;top:auto;margin-bottom:22px}
      .anchor-list{
        display:flex;
        overflow-x:auto;
        padding-bottom:4px;
      }
      .anchor-list li{flex:0 0 auto}
    }
    @media (max-width:767px){
      .mobile-only{display:flex}
      .desktop-brand{display:none}
      .top-bar{
        padding:10px 20px 18px;
        min-height:auto;
        align-items:stretch;
      }
      .top-bar-right{width:100%}
      .site-menu{
        width:100%;
        display:grid;
        gap:6px;
      }
      .site-menu li{width:100%}
      .site-menu a:not(.button){
        display:block;
        padding:12px 14px;
      }
      .site-menu a.active:after{display:none}
      .nav-cta{
        width:100%;
        justify-content:center;
        margin:8px 0 0;
      }
      .hero{padding:46px 0 58px}
      .section{padding:56px 0}
      .section-tight{padding:46px 0}
      .section-head{
        display:block;
      }
      .hero-card{padding:22px;border-radius:24px}
      .hero-actions .button,.cta-band .button,.form-actions .button{
        width:100%;
      }
      .step-item{
        grid-template-columns:42px 1fr;
      }
      .step-no{width:42px;height:42px;border-radius:14px}
      .step-item .state-badge{grid-column:1 / -1;justify-self:start}
      .compare-row{grid-template-columns:1fr}
      .compare-cell:first-child{border-right:0;border-bottom:1px solid var(--line-2)}
      .tips-grid{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr}
      .footer-bottom{display:block}
      .footer-bottom .back-top{margin-top:12px}
      .cta-band{padding:26px;border-radius:24px}
    }
    @media (max-width:520px){
      body{font-size:15.5px}
      .site-container{width:min(100% - 24px, var(--container))}
      .brand span:last-child{font-size:14px}
      .brand-mark{width:34px;height:34px;border-radius:12px}
      .badge-row,.pill-row{gap:8px}
      .badge{font-size:12px}
      .content-card{padding:20px;border-radius:22px}
      .feedback-card{padding:20px}
    }