/* roulang page: index */
:root {
            --primary: #5b4bff;
            --primary-dark: #4030c8;
            --secondary: #12b9d6;
            --accent: #ffba43;
            --ink: #17172d;
            --muted: #676781;
            --surface: #ffffff;
            --surface-soft: #f7f8fc;
            --line: #e7e8f1;
            --success: #14966f;
            --danger: #d94d67;
            --radius-sm: 12px;
            --radius-md: 20px;
            --radius-lg: 30px;
            --shadow-sm: 0 8px 24px rgba(31, 29, 78, .07);
            --shadow-lg: 0 22px 64px rgba(31, 29, 78, .14);
            --header-height: 74px;
            --sidebar-width: 252px;
        }

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

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

        body {
            margin: 0;
            color: var(--ink);
            background: var(--surface-soft);
            font-family: Inter, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
            font-size: 16px;
            line-height: 1.72;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

        body.menu-open { overflow: hidden; }

        a {
            color: inherit;
            text-decoration: none;
            transition: color .22s ease, background-color .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
        }

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

        button, select { cursor: pointer; }

        button:focus-visible,
        a:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible {
            outline: 3px solid rgba(34, 211, 238, .46);
            outline-offset: 3px;
        }

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

        .site-header {
            position: sticky;
            top: 0;
            z-index: 80;
            height: var(--header-height);
            background: rgba(255, 255, 255, .92);
            border-bottom: 1px solid rgba(225, 226, 238, .92);
            backdrop-filter: blur(18px);
        }

        .header-inner {
            width: min(1480px, calc(100% - 32px));
            height: 100%;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 18px;
        }

        .brand-logo {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            gap: 11px;
            min-width: 220px;
            font-weight: 900;
            letter-spacing: -.03em;
        }

        .logo-mark {
            width: 42px;
            height: 42px;
            display: grid;
            place-items: center;
            color: #fff;
            border-radius: 14px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            box-shadow: 0 9px 24px rgba(91, 75, 255, .28);
        }

        .logo-copy {
            display: flex;
            flex-direction: column;
            line-height: 1.15;
        }

        .logo-copy strong { font-size: 16px; }
        .logo-copy span {
            margin-top: 4px;
            color: var(--muted);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .08em;
        }

        .header-search {
            position: relative;
            flex: 1 1 420px;
            max-width: 560px;
        }

        .header-search input {
            width: 100%;
            height: 44px;
            padding: 0 88px 0 43px;
            color: var(--ink);
            border: 1px solid var(--line);
            border-radius: 14px;
            background: #f7f8fb;
            transition: all .22s ease;
        }

        .header-search input:focus {
            border-color: rgba(91, 75, 255, .5);
            background: #fff;
            box-shadow: 0 0 0 4px rgba(91, 75, 255, .08);
            outline: none;
        }

        .search-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            width: 18px;
            height: 18px;
            transform: translateY(-50%);
            color: #8b8ba1;
        }

        .search-shortcut {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            padding: 3px 8px;
            color: #85859b;
            border: 1px solid #dddfea;
            border-radius: 7px;
            background: #fff;
            font-size: 11px;
            font-weight: 700;
        }

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

        .top-nav a {
            padding: 9px 12px;
            color: #58586e;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 700;
            white-space: nowrap;
        }

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

        .top-nav a.active {
            color: var(--primary);
            background: var(--brand-soft, #f1efff);
        }

        .header-select {
            height: 38px;
            padding: 0 30px 0 11px;
            color: #55556b;
            border: 1px solid var(--line);
            border-radius: 10px;
            background-color: #fff;
            font-size: 12px;
            font-weight: 700;
        }

        .menu-toggle {
            display: none;
            width: 42px;
            height: 42px;
            place-items: center;
            border: 1px solid var(--line);
            border-radius: 12px;
            background: #fff;
            color: var(--ink);
        }

        .page-shell {
            width: min(1480px, 100%);
            margin: 0 auto;
            display: grid;
            grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
        }

        .doc-sidebar {
            position: sticky;
            top: var(--header-height);
            height: calc(100vh - var(--header-height));
            padding: 26px 20px 36px;
            overflow-y: auto;
            background: rgba(255, 255, 255, .88);
            border-right: 1px solid var(--line);
        }

        .side-label {
            margin: 0 10px 10px;
            color: #9999aa;
            font-size: 11px;
            font-weight: 900;
            letter-spacing: .12em;
        }

        .side-nav {
            display: grid;
            gap: 4px;
        }

        .side-nav a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 11px;
            color: #5f5f75;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 650;
        }

        .side-nav a::before {
            content: "";
            width: 6px;
            height: 6px;
            flex: 0 0 6px;
            border-radius: 50%;
            background: #c9cad6;
        }

        .side-nav a:hover,
        .side-nav a.active {
            color: var(--primary);
            background: #f2f0ff;
        }

        .side-nav a.active::before { background: var(--primary); }

        .sidebar-note {
            margin-top: 24px;
            padding: 14px;
            color: #5e5e73;
            border: 1px solid #e7e5ff;
            border-radius: 15px;
            background: linear-gradient(145deg, #f8f7ff, #effcff);
            font-size: 12px;
        }

        .sidebar-note strong {
            display: block;
            margin-bottom: 4px;
            color: var(--ink);
            font-size: 13px;
        }

        .content {
            min-width: 0;
            background: #fff;
        }

        .container {
            width: min(1120px, calc(100% - 48px));
            margin: 0 auto;
        }

        main section {
            position: relative;
            padding: 86px 0;
            border-bottom: 1px solid var(--line);
        }

        main section.alt { background: var(--surface-soft); }
        main section.dark {
            color: #fff;
            background: #17152f;
            border-bottom-color: rgba(255,255,255,.08);
        }

        .section-head {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 32px;
            margin-bottom: 38px;
        }

        .section-head > div:first-child { max-width: 760px; }

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

        .eyebrow::before {
            content: "";
            width: 20px;
            height: 3px;
            border-radius: 99px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
        }

        .section-title {
            margin: 0;
            color: var(--ink);
            font-size: clamp(28px, 3.5vw, 46px);
            line-height: 1.18;
            letter-spacing: -.045em;
            font-weight: 900;
        }

        .section-copy {
            margin: 15px 0 0;
            color: var(--muted);
            font-size: 16px;
            line-height: 1.85;
        }

        .dark .section-title,
        .dark .section-copy { color: #fff; }

        .dark .section-copy { color: #bcb9d4; }
        .dark .eyebrow { color: #7ee8f6; }

        .hero {
            min-height: 720px;
            padding: 0;
            overflow: hidden;
            color: #fff;
            border-bottom: 0;
            background:
                radial-gradient(circle at 80% 20%, rgba(34,211,238,.28), transparent 30%),
                radial-gradient(circle at 10% 86%, rgba(255,186,67,.16), transparent 28%),
                linear-gradient(128deg, #18143e 0%, #3d2db7 47%, #086f91 100%);
        }

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

        .hero-orb {
            position: absolute;
            width: 440px;
            height: 440px;
            right: -130px;
            top: 80px;
            border: 1px solid rgba(255,255,255,.2);
            border-radius: 50%;
            box-shadow:
                inset 0 0 80px rgba(255,255,255,.08),
                0 0 0 52px rgba(255,255,255,.035),
                0 0 0 104px rgba(255,255,255,.025);
        }

        .hero-inner {
            position: relative;
            z-index: 2;
            min-height: 720px;
            padding: 92px 0 42px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .hero-kicker {
            display: inline-flex;
            align-items: center;
            align-self: flex-start;
            gap: 9px;
            padding: 7px 12px;
            border: 1px solid rgba(255,255,255,.2);
            border-radius: 999px;
            background: rgba(255,255,255,.1);
            backdrop-filter: blur(10px);
            font-size: 13px;
            font-weight: 800;
        }

        .live-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #60f4c2;
            box-shadow: 0 0 0 6px rgba(96,244,194,.13);
            animation: pulse 1.8s infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(.75); opacity: .65; }
        }

        .hero h1 {
            max-width: 970px;
            margin: 26px 0 22px;
            font-size: clamp(42px, 6.6vw, 82px);
            line-height: 1.03;
            letter-spacing: -.062em;
            font-weight: 950;
            text-wrap: balance;
        }

        .hero h1 .gradient-text {
            color: #95f2ff;
            text-shadow: 0 8px 32px rgba(34,211,238,.24);
        }

        .hero-description {
            max-width: 860px;
            margin: 0;
            color: rgba(255,255,255,.79);
            font-size: clamp(16px, 1.8vw, 19px);
            line-height: 1.9;
        }

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

        .btn {
            min-height: 48px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            padding: 0 20px;
            border: 1px solid transparent;
            border-radius: 13px;
            font-weight: 850;
            line-height: 1;
            transition: all .24s ease;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-sm);
        }

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

        .btn-primary {
            color: #fff;
            background: linear-gradient(135deg, var(--primary), #7c65ff);
            box-shadow: 0 12px 28px rgba(91,75,255,.24);
        }

        .btn-primary:hover { background: linear-gradient(135deg, var(--primary-dark), #6954f4); }

        .btn-light {
            color: #332785;
            background: #fff;
        }

        .btn-outline-light {
            color: #fff;
            border-color: rgba(255,255,255,.3);
            background: rgba(255,255,255,.08);
        }

        .btn-outline-light:hover {
            border-color: rgba(255,255,255,.6);
            background: rgba(255,255,255,.16);
        }

        .hero-bottom {
            margin-top: 50px;
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 1px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,.15);
            border-radius: 20px;
            background: rgba(255,255,255,.13);
            backdrop-filter: blur(16px);
        }

        .hero-stat {
            padding: 19px 20px;
            background: rgba(17,15,55,.35);
        }

        .hero-stat strong {
            display: block;
            font-size: 23px;
            line-height: 1.25;
        }

        .hero-stat span {
            color: rgba(255,255,255,.66);
            font-size: 12px;
        }

        .countdown-section {
            padding: 30px 0;
            background: #fff;
        }

        .countdown-wrap {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 30px;
            padding: 25px 30px;
            border: 1px solid #dfdcff;
            border-radius: var(--radius-md);
            background: linear-gradient(110deg, #f4f1ff, #effcff);
            box-shadow: var(--shadow-sm);
        }

        .countdown-copy h2 {
            margin: 0 0 5px;
            font-size: 20px;
            font-weight: 900;
        }

        .countdown-copy p {
            margin: 0;
            color: var(--muted);
            font-size: 13px;
        }

        .countdown {
            display: flex;
            gap: 9px;
        }

        .time-box {
            min-width: 72px;
            padding: 11px 10px;
            text-align: center;
            border-radius: 14px;
            background: #fff;
            box-shadow: 0 6px 18px rgba(51,42,130,.09);
        }

        .time-box strong {
            display: block;
            color: var(--primary);
            font-size: 24px;
            line-height: 1.15;
        }

        .time-box span {
            color: #9292a3;
            font-size: 10px;
            font-weight: 800;
        }

        .highlight-layout {
            display: grid;
            grid-template-columns: 1.2fr .8fr;
            gap: 24px;
        }

        .feature-stage {
            position: relative;
            min-height: 420px;
            padding: 38px;
            overflow: hidden;
            color: #fff;
            border-radius: var(--radius-lg);
            background:
                radial-gradient(circle at 82% 18%, rgba(34,211,238,.35), transparent 30%),
                linear-gradient(145deg, #221c68, #4d3add);
            box-shadow: var(--shadow-lg);
        }

        .feature-stage::after {
            content: "S16";
            position: absolute;
            right: -18px;
            bottom: -55px;
            color: rgba(255,255,255,.08);
            font-size: 190px;
            line-height: 1;
            font-weight: 950;
            letter-spacing: -.1em;
        }

        .feature-stage h3 {
            position: relative;
            z-index: 2;
            max-width: 520px;
            margin: 45px 0 15px;
            font-size: clamp(30px, 4vw, 48px);
            line-height: 1.12;
            font-weight: 900;
        }

        .feature-stage p {
            position: relative;
            z-index: 2;
            max-width: 600px;
            margin: 0;
            color: rgba(255,255,255,.75);
        }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 10px;
            border-radius: 999px;
            color: var(--primary);
            background: #efedff;
            font-size: 11px;
            font-weight: 900;
        }

        .badge-light {
            color: #fff;
            border: 1px solid rgba(255,255,255,.18);
            background: rgba(255,255,255,.12);
        }

        .stack-cards {
            display: grid;
            gap: 18px;
        }

        .info-card {
            padding: 25px;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: #fff;
            box-shadow: var(--shadow-sm);
            transition: all .25s ease;
        }

        .info-card:hover {
            transform: translateY(-4px);
            border-color: #d6d1ff;
            box-shadow: var(--shadow-lg);
        }

        .card-icon {
            width: 44px;
            height: 44px;
            display: grid;
            place-items: center;
            margin-bottom: 17px;
            color: var(--primary);
            border-radius: 14px;
            background: #f0eeff;
            font-size: 21px;
            font-weight: 900;
        }

        .info-card h3 {
            margin: 0 0 8px;
            font-size: 18px;
            font-weight: 900;
        }

        .info-card p {
            margin: 0;
            color: var(--muted);
            font-size: 14px;
            line-height: 1.75;
        }

        .benefit-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0,1fr));
            gap: 18px;
        }

        .benefit-card {
            grid-column: span 4;
            min-height: 238px;
            padding: 26px;
            border: 1px solid var(--line);
            border-radius: 22px;
            background: #fff;
            transition: all .24s ease;
        }

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

        .benefit-card:nth-child(2),
        .benefit-card:nth-child(3) { grid-column: span 3.5; }

        .benefit-card:hover {
            border-color: #cec8ff;
            box-shadow: var(--shadow-sm);
            transform: translateY(-3px);
        }

        .benefit-index {
            display: inline-grid;
            width: 34px;
            height: 34px;
            place-items: center;
            color: #fff;
            border-radius: 10px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            font-size: 12px;
            font-weight: 900;
        }

        .benefit-card h3 {
            margin: 21px 0 9px;
            font-size: 19px;
            font-weight: 900;
        }

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

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

        .steps::before {
            content: "";
            position: absolute;
            top: 27px;
            left: 8%;
            right: 8%;
            height: 2px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
        }

        .step {
            position: relative;
            z-index: 1;
            text-align: left;
        }

        .step-number {
            width: 56px;
            height: 56px;
            display: grid;
            place-items: center;
            margin-bottom: 20px;
            color: #fff;
            border: 7px solid #f7f8fc;
            border-radius: 50%;
            background: var(--primary);
            box-shadow: 0 0 0 1px #dcd8ff;
            font-weight: 900;
        }

        .step h3 {
            margin: 0 0 8px;
            font-size: 17px;
            font-weight: 900;
        }

        .step p {
            margin: 0;
            color: var(--muted);
            font-size: 13px;
        }

        .reward-grid {
            display: grid;
            grid-template-columns: 1.15fr .85fr;
            gap: 22px;
        }

        .reward-main {
            padding: 34px;
            overflow: hidden;
            border: 1px solid #e1dcff;
            border-radius: 26px;
            background: linear-gradient(135deg, #f5f2ff, #effcff);
        }

        .reward-main h3 {
            margin: 14px 0 10px;
            font-size: 25px;
            font-weight: 900;
        }

        .reward-main p {
            margin: 0;
            color: var(--muted);
        }

        .progress-row {
            margin-top: 28px;
            display: grid;
            gap: 12px;
        }

        .progress-meta {
            display: flex;
            justify-content: space-between;
            color: #5d5d74;
            font-size: 12px;
            font-weight: 800;
        }

        .progress {
            height: 10px;
            overflow: hidden;
            border-radius: 999px;
            background: #deddec;
        }

        .progress span {
            display: block;
            width: 72%;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
        }

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

        .reward-item {
            display: flex;
            gap: 16px;
            align-items: center;
            padding: 19px;
            border: 1px solid var(--line);
            border-radius: 18px;
            background: #fff;
        }

        .reward-symbol {
            width: 52px;
            height: 52px;
            flex: 0 0 52px;
            display: grid;
            place-items: center;
            border-radius: 16px;
            background: #fff6df;
            font-size: 25px;
        }

        .reward-item strong {
            display: block;
            font-size: 15px;
        }

        .reward-item span {
            display: block;
            margin-top: 3px;
            color: var(--muted);
            font-size: 12px;
        }

        .metric-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 17px;
        }

        .metric-card {
            padding: 26px;
            border: 1px solid var(--line);
            border-radius: 20px;
            background: #fff;
        }

        .metric-label {
            display: flex;
            justify-content: space-between;
            color: var(--muted);
            font-size: 12px;
            font-weight: 800;
        }

        .metric-value {
            margin: 17px 0 9px;
            color: var(--ink);
            font-size: 36px;
            line-height: 1;
            font-weight: 950;
            letter-spacing: -.04em;
        }

        .metric-note {
            color: var(--success);
            font-size: 11px;
            font-weight: 800;
        }

        .metric-card p {
            margin: 13px 0 0;
            color: var(--muted);
            font-size: 12px;
        }

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

        .matrix-card {
            position: relative;
            padding: 27px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,.1);
            border-radius: 22px;
            background: rgba(255,255,255,.06);
        }

        .matrix-card::after {
            content: "";
            position: absolute;
            width: 90px;
            height: 90px;
            right: -35px;
            bottom: -35px;
            border-radius: 50%;
            background: rgba(34,211,238,.12);
        }

        .matrix-card h3 {
            margin: 18px 0 9px;
            font-size: 19px;
            font-weight: 900;
        }

        .matrix-card p {
            margin: 0;
            color: #bcb9d4;
            font-size: 13px;
        }

        .compare-wrap {
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: 24px;
            background: #fff;
            box-shadow: var(--shadow-sm);
        }

        .compare-row {
            display: grid;
            grid-template-columns: 1.1fr 1fr 1fr;
            border-bottom: 1px solid var(--line);
        }

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

        .compare-row > div {
            padding: 18px 24px;
            font-size: 14px;
        }

        .compare-row > div + div { border-left: 1px solid var(--line); }

        .compare-head {
            color: #fff;
            background: #211b5e;
            font-weight: 900;
        }

        .compare-head > div + div { border-left-color: rgba(255,255,255,.12); }
        .compare-label { font-weight: 850; }
        .good { color: var(--success); font-weight: 800; }
        .warning { color: #aa7522; font-weight: 750; }

        .timeline {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0;
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: 24px;
            background: #fff;
        }

        .timeline-item {
            position: relative;
            min-height: 230px;
            padding: 27px;
            border-right: 1px solid var(--line);
        }

        .timeline-item:last-child { border-right: 0; }

        .timeline-item small {
            color: var(--primary);
            font-weight: 900;
        }

        .timeline-item h3 {
            margin: 16px 0 9px;
            font-size: 18px;
            font-weight: 900;
        }

        .timeline-item p {
            margin: 0;
            color: var(--muted);
            font-size: 13px;
        }

        .timeline-dot {
            position: absolute;
            right: 20px;
            top: 24px;
            width: 11px;
            height: 11px;
            border: 3px solid #cbc5ff;
            border-radius: 50%;
            background: var(--primary);
        }

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

        .featured-news {
            min-height: 400px;
            display: flex;
            flex-direction: column;
            justify-content: end;
            padding: 32px;
            color: #fff;
            border-radius: 26px;
            background:
                linear-gradient(to top, rgba(19,17,58,.98), rgba(19,17,58,.22)),
                radial-gradient(circle at 80% 20%, #22d3ee, transparent 35%),
                linear-gradient(135deg, #5343df, #1c174c);
            box-shadow: var(--shadow-lg);
        }

        .featured-news h3 {
            max-width: 600px;
            margin: 13px 0 10px;
            font-size: 29px;
            line-height: 1.25;
            font-weight: 900;
        }

        .featured-news p {
            margin: 0;
            color: rgba(255,255,255,.72);
            font-size: 14px;
        }

        .news-list {
            display: grid;
            gap: 13px;
        }

        .news-item {
            display: grid;
            grid-template-columns: 76px 1fr;
            gap: 17px;
            padding: 17px;
            border: 1px solid var(--line);
            border-radius: 18px;
            background: #fff;
            transition: all .22s ease;
        }

        .news-item:hover {
            border-color: #cec9ff;
            transform: translateX(4px);
            box-shadow: var(--shadow-sm);
        }

        .news-date {
            display: grid;
            place-items: center;
            align-content: center;
            min-height: 72px;
            color: var(--primary);
            border-radius: 13px;
            background: #f1efff;
            font-size: 11px;
            font-weight: 900;
        }

        .news-date strong {
            font-size: 24px;
            line-height: 1;
        }

        .news-item h3 {
            margin: 2px 0 6px;
            font-size: 15px;
            font-weight: 900;
        }

        .news-item p {
            margin: 0;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.65;
        }

        .news-more {
            margin-top: 17px;
            display: inline-flex;
            color: var(--primary);
            font-size: 13px;
            font-weight: 900;
        }

        .guarantee-bar {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: 24px;
            background: #fff;
        }

        .guarantee-item {
            padding: 26px;
            text-align: center;
            border-right: 1px solid var(--line);
        }

        .guarantee-item:last-child { border-right: 0; }

        .guarantee-icon {
            width: 52px;
            height: 52px;
            display: grid;
            place-items: center;
            margin: 0 auto 14px;
            color: var(--primary);
            border-radius: 16px;
            background: #f0eeff;
            font-size: 22px;
        }

        .guarantee-item strong {
            display: block;
            font-size: 15px;
        }

        .guarantee-item span {
            display: block;
            margin-top: 6px;
            color: var(--muted);
            font-size: 11px;
        }

        .answer-grid {
            display: grid;
            grid-template-columns: .85fr 1.15fr;
            gap: 26px;
        }

        .answer-intro {
            padding: 30px;
            border-radius: 24px;
            background: linear-gradient(145deg, #28206f, #4433c3);
            color: #fff;
        }

        .answer-intro h3 {
            margin: 15px 0 12px;
            font-size: 28px;
            font-weight: 900;
        }

        .answer-intro p {
            margin: 0;
            color: rgba(255,255,255,.74);
            font-size: 14px;
        }

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

        details {
            border: 1px solid var(--line);
            border-radius: 16px;
            background: #fff;
            transition: border-color .2s ease, box-shadow .2s ease;
        }

        details[open] {
            border-color: #d3ceff;
            box-shadow: var(--shadow-sm);
        }

        summary {
            position: relative;
            padding: 19px 52px 19px 20px;
            cursor: pointer;
            list-style: none;
            font-size: 15px;
            font-weight: 900;
        }

        summary::-webkit-details-marker { display: none; }

        summary::after {
            content: "+";
            position: absolute;
            right: 19px;
            top: 50%;
            width: 25px;
            height: 25px;
            display: grid;
            place-items: center;
            color: var(--primary);
            border-radius: 8px;
            background: #f0eeff;
            transform: translateY(-50%);
        }

        details[open] summary::after { content: "−"; }

        details p {
            margin: 0;
            padding: 0 20px 20px;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.78;
        }

        .quote-grid {
            display: grid;
            grid-template-columns: 1.2fr .8fr .8fr;
            gap: 18px;
        }

        .quote {
            padding: 27px;
            border: 1px solid var(--line);
            border-radius: 22px;
            background: #fff;
        }

        .quote:first-child {
            color: #fff;
            border: 0;
            background: linear-gradient(145deg, #251e6e, #4a38cf);
        }

        .quote-mark {
            color: var(--secondary);
            font-size: 44px;
            line-height: .8;
            font-weight: 950;
        }

        .quote p {
            margin: 18px 0 24px;
            color: var(--muted);
            font-size: 14px;
        }

        .quote:first-child p { color: rgba(255,255,255,.78); }

        .quote-user {
            display: flex;
            align-items: center;
            gap: 11px;
        }

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

        .quote-user strong {
            display: block;
            font-size: 13px;
        }

        .quote-user span {
            color: #9292a5;
            font-size: 10px;
        }

        .signup-section {
            padding: 92px 0;
            overflow: hidden;
            border-bottom: 0;
            background:
                radial-gradient(circle at 0% 100%, rgba(34,211,238,.26), transparent 28%),
                linear-gradient(125deg, #1a1745, #3f2eb7);
        }

        .signup-card {
            display: grid;
            grid-template-columns: .9fr 1.1fr;
            gap: 50px;
            align-items: center;
            color: #fff;
        }

        .signup-copy h2 {
            margin: 13px 0 17px;
            font-size: clamp(32px, 4vw, 49px);
            line-height: 1.13;
            font-weight: 950;
            letter-spacing: -.04em;
        }

        .signup-copy p {
            margin: 0;
            color: rgba(255,255,255,.7);
        }

        .signup-points {
            margin: 24px 0 0;
            padding: 0;
            display: grid;
            gap: 10px;
            list-style: none;
        }

        .signup-points li {
            display: flex;
            gap: 9px;
            color: rgba(255,255,255,.82);
            font-size: 13px;
        }

        .signup-points li::before {
            content: "✓";
            color: #68edc1;
            font-weight: 900;
        }

        .signup-form {
            padding: 30px;
            border: 1px solid rgba(255,255,255,.14);
            border-radius: 25px;
            background: rgba(255,255,255,.1);
            backdrop-filter: blur(18px);
        }

        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .field {
            display: grid;
            gap: 7px;
        }

        .field.full { grid-column: 1 / -1; }

        .field label {
            color: rgba(255,255,255,.82);
            font-size: 12px;
            font-weight: 800;
        }

        .field input,
        .field select {
            width: 100%;
            height: 48px;
            padding: 0 14px;
            color: #fff;
            border: 1px solid rgba(255,255,255,.2);
            border-radius: 12px;
            background: rgba(9,8,35,.35);
            outline: none;
        }

        .field select option { color: var(--ink); background: #fff; }

        .field input:focus,
        .field select:focus {
            border-color: #75e9f7;
            box-shadow: 0 0 0 4px rgba(34,211,238,.12);
        }

        .check-row {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            color: rgba(255,255,255,.67);
            font-size: 11px;
        }

        .check-row input {
            margin-top: 4px;
            accent-color: var(--secondary);
        }

        .form-submit {
            width: 100%;
            margin-top: 17px;
            min-height: 50px;
            border: 0;
            border-radius: 13px;
            color: #302477;
            background: #fff;
            font-weight: 900;
            transition: all .22s ease;
        }

        .form-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 28px rgba(0,0,0,.18);
        }

        .form-message {
            min-height: 21px;
            margin: 11px 0 0;
            color: #84f1ce;
            font-size: 12px;
            font-weight: 800;
        }

        .site-footer {
            color: #c2c0d3;
            background: #111023;
        }

        .footer-inner {
            padding: 58px 0 27px;
        }

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

        .footer-brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            color: #fff;
            font-weight: 900;
        }

        .footer-description {
            max-width: 520px;
            margin: 18px 0 0;
            color: #858399;
            font-size: 13px;
        }

        .footer-title {
            margin: 0 0 15px;
            color: #fff;
            font-size: 13px;
            font-weight: 900;
        }

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

        .footer-links a {
            color: #9290a5;
            font-size: 12px;
        }

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

        .footer-warning {
            padding: 15px;
            color: #aaa8bb;
            border: 1px solid rgba(255,255,255,.08);
            border-radius: 14px;
            background: rgba(255,255,255,.035);
            font-size: 11px;
        }

        .copyright {
            margin-top: 38px;
            padding-top: 22px;
            display: flex;
            justify-content: space-between;
            gap: 20px;
            color: #6f6d82;
            border-top: 1px solid rgba(255,255,255,.08);
            font-size: 11px;
        }

        .mobile-overlay {
            display: none;
            position: fixed;
            z-index: 69;
            inset: var(--header-height) 0 0;
            background: rgba(14,13,35,.55);
            backdrop-filter: blur(4px);
        }

        @media (max-width: 1180px) {
            :root { --sidebar-width: 218px; }
            .brand-logo { min-width: auto; }
            .logo-copy span { display: none; }
            .header-search { max-width: 360px; }
            .header-select.language-select { display: none; }
            .benefit-card,
            .benefit-card:nth-child(1),
            .benefit-card:nth-child(2),
            .benefit-card:nth-child(3),
            .benefit-card:nth-child(4) { grid-column: span 6; }
        }

        @media (max-width: 1024px) {
            .header-search { max-width: none; }
            .top-nav, .header-select { display: none; }
            .menu-toggle { display: grid; margin-left: auto; }
            .page-shell { display: block; }
            .doc-sidebar {
                position: fixed;
                z-index: 75;
                left: 0;
                top: var(--header-height);
                width: min(320px, 86vw);
                height: calc(100vh - var(--header-height));
                transform: translateX(-105%);
                transition: transform .28s ease;
                box-shadow: 20px 0 60px rgba(14,13,35,.18);
            }
            .menu-open .doc-sidebar { transform: translateX(0); }
            .menu-open .mobile-overlay { display: block; }
            .hero-inner { min-height: 650px; }
            .highlight-layout,
            .reward-grid,
            .news-layout,
            .answer-grid,
            .signup-card { grid-template-columns: 1fr; }
            .metric-grid,
            .steps,
            .timeline { grid-template-columns: repeat(2, 1fr); }
            .steps::before { display: none; }
            .matrix { grid-template-columns: repeat(2, 1fr); }
            .timeline-item:nth-child(2) { border-right: 0; }
            .timeline-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
            .quote-grid { grid-template-columns: 1fr 1fr; }
            .quote:first-child { grid-column: 1 / -1; }
            .guarantee-bar { grid-template-columns: repeat(2, 1fr); }
            .guarantee-item:nth-child(2) { border-right: 0; }
            .guarantee-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .footer-grid > div:first-child { grid-column: 1 / -1; }
        }

        @media (max-width: 768px) {
            :root { --header-height: 66px; }
            .header-inner { width: min(100% - 22px, 1480px); gap: 10px; }
            .brand-logo { min-width: auto; }
            .logo-mark { width: 38px; height: 38px; }
            .logo-copy strong { font-size: 14px; }
            .header-search { display: none; }
            .container { width: min(100% - 30px, 1120px); }
            main section { padding: 65px 0; }
            .hero { min-height: auto; }
            .hero-inner { min-height: 620px; padding: 68px 0 28px; }
            .hero h1 { font-size: clamp(38px, 11vw, 62px); }
            .hero-description { font-size: 15px; }
            .hero-bottom { grid-template-columns: repeat(2, 1fr); }
            .countdown-wrap { grid-template-columns: 1fr; padding: 22px; }
            .countdown { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }
            .time-box { min-width: 0; }
            .section-head { display: block; }
            .feature-stage { min-height: 360px; padding: 27px; }
            .benefit-card,
            .benefit-card:nth-child(1),
            .benefit-card:nth-child(2),
            .benefit-card:nth-child(3),
            .benefit-card:nth-child(4) { grid-column: 1 / -1; min-height: auto; }
            .matrix,
            .metric-grid { grid-template-columns: 1fr 1fr; }
            .compare-wrap { overflow-x: auto; }
            .compare-row { min-width: 690px; }
            .quote-grid { grid-template-columns: 1fr; }
            .quote:first-child { grid-column: auto; }
            .signup-card { gap: 30px; }
            .footer-grid { gap: 34px; }
        }

        @media (max-width: 520px) {
            .logo-copy span { display: none; }
            .hero h1 { font-size: 39px; }
            .hero-actions { display: grid; }
            .hero-actions .btn { width: 100%; }
            .hero-bottom { grid-template-columns: 1fr 1fr; }
            .hero-stat { padding: 15px; }
            .hero-stat strong { font-size: 18px; }
            .countdown { gap: 6px; }
            .time-box { padding: 9px 5px; }
            .time-box strong { font-size: 19px; }
            .section-title { font-size: 29px; }
            .metric-grid,
            .matrix,
            .steps,
            .timeline,
            .guarantee-bar,
            .form-grid,
            .footer-grid { grid-template-columns: 1fr; }
            .timeline-item,
            .timeline-item:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
            .timeline-item:last-child { border-bottom: 0; }
            .guarantee-item,
            .guarantee-item:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
            .guarantee-item:last-child { border-bottom: 0; }
            .reward-main,
            .signup-form { padding: 23px; }
            .news-item { grid-template-columns: 62px 1fr; gap: 12px; padding: 13px; }
            .footer-grid > div:first-child { grid-column: auto; }
            .copyright { display: block; }
            .copyright span { display: block; margin-top: 6px; }
        }

/* roulang page: category1 */
:root {
      --primary:#5b4bff; --primary-dark:#4030c8; --secondary:#12b9d6;
      --accent:#ffba43; --ink:#17172d; --muted:#676781;
      --surface:#fff; --surface-soft:#f7f8fc; --line:#e7e8f1;
      --success:#14966f; --danger:#d94d67;
      --radius-sm:12px; --radius-md:20px; --radius-lg:30px;
      --shadow-sm:0 8px 24px rgba(31,29,78,.07);
      --shadow-lg:0 22px 64px rgba(31,29,78,.14);
      --header-height:66px; --sidebar-width:218px;
      --brand-soft:#f1efff;
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth;scroll-padding-top:88px}
    body{margin:0;color:var(--ink);background:var(--surface-soft);font-family:Inter,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;font-size:16px;line-height:1.72;-webkit-font-smoothing:antialiased;overflow-x:hidden}
    body.menu-open{overflow:hidden}
    a{color:inherit;text-decoration:none;transition:color .22s,background-color .22s,border-color .22s,transform .22s,box-shadow .22s}
    button,input,select,textarea{font:inherit}
    button,select{cursor:pointer}
    button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid rgba(34,211,238,.46);outline-offset:3px}
    img,svg{display:block;max-width:100%}
    [id]{scroll-margin-top:90px}
    .container{width:min(1180px,calc(100% - 48px));margin-inline:auto}
    .site-header{position:sticky;top:0;z-index:80;height:var(--header-height);background:rgba(255,255,255,.92);border-bottom:1px solid rgba(225,226,238,.92);backdrop-filter:blur(18px)}
    .header-inner{width:min(1480px,calc(100% - 32px));height:100%;margin:auto;display:flex;align-items:center;gap:18px}
    .brand-logo{flex:0 0 auto;display:inline-flex;align-items:center;gap:11px;min-width:220px;font-weight:900;letter-spacing:-.03em}
    .logo-mark{width:42px;height:42px;display:grid;place-items:center;color:#fff;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--secondary));box-shadow:0 9px 24px rgba(91,75,255,.28);font-weight:900;flex:none}
    .logo-copy{display:flex;flex-direction:column;line-height:1.15}
    .logo-copy strong{font-size:16px}.logo-copy span{margin-top:4px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.08em}
    .header-search{position:relative;flex:1 1 420px;max-width:560px}
    .header-search input{width:100%;height:44px;padding:0 88px 0 43px;color:var(--ink);border:1px solid var(--line);border-radius:14px;background:#f7f8fb;transition:all .22s}
    .header-search input:focus{border-color:rgba(91,75,255,.5);background:#fff;box-shadow:0 0 0 4px rgba(91,75,255,.08);outline:none}
    .search-icon{position:absolute;left:15px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:#8b8ba1}
    .search-shortcut{position:absolute;right:10px;top:50%;transform:translateY(-50%);padding:3px 8px;color:#85859b;border:1px solid #dddfea;border-radius:7px;background:#fff;font-size:11px;font-weight:700}
    .top-nav{display:flex;align-items:center;gap:5px;margin-left:auto}
    .top-nav a{padding:9px 12px;color:#58586e;border-radius:10px;font-size:14px;font-weight:700;white-space:nowrap}
    .top-nav a:hover{color:var(--primary);background:var(--surface-soft)}
    .top-nav a.active{color:var(--primary);background:var(--brand-soft)}
    .header-select{height:38px;padding:0 12px;color:#55556b;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:12px;font-weight:700}
    .menu-toggle{display:none;width:42px;height:42px;place-items:center;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
    .site-layout{display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr);max-width:1600px;margin:auto}
    .sidebar{position:sticky;top:var(--header-height);height:calc(100vh - var(--header-height));overflow:auto;padding:26px 13px 30px 20px;background:#fff;border-right:1px solid var(--line)}
    .sidebar-label{padding:0 11px 12px;font-size:11px;font-weight:800;letter-spacing:.12em;color:#9797ab}
    .side-nav{display:grid;gap:4px}
    .side-nav a{display:flex;align-items:center;gap:10px;padding:9px 11px;color:#5f5f75;border-radius:10px;font-size:13px;font-weight:650}
    .side-nav a::before{content:"";width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:#c9cad6}
    .side-nav a:hover,.side-nav a.active{color:var(--primary);background:#f2f0ff}
    .side-nav a.active::before{background:var(--primary)}
    .page-main{min-width:0}
    .section{padding:76px 0;border-bottom:1px solid var(--line)}
    .section.white{background:#fff}
    .section-heading{max-width:770px;margin-bottom:30px}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--primary-dark);font-size:12px;font-weight:850;letter-spacing:.08em}
    .eyebrow::before{content:"";width:18px;height:3px;border-radius:9px;background:var(--secondary)}
    h1,h2,h3,p{margin-top:0}
    h1{font-size:clamp(32px,4vw,55px);line-height:1.16;letter-spacing:-.045em;font-weight:900}
    h2{margin:10px 0 12px;font-size:clamp(25px,2.7vw,36px);line-height:1.25;letter-spacing:-.035em;font-weight:850}
    h3{font-size:18px;font-weight:800;line-height:1.4}
    .lead,.section-heading p{color:var(--muted);font-size:16px}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:10px 19px;border:1px solid transparent;border-radius:13px;font-size:14px;font-weight:800;line-height:1.4;transition:transform .22s,box-shadow .22s,background .22s,border-color .22s}
    .btn:hover{transform:translateY(-2px)}
    .btn:active{transform:translateY(0)}
    .btn-primary{color:#fff;background:var(--primary);box-shadow:0 10px 25px rgba(91,75,255,.22)}
    .btn-primary:hover{color:#fff;background:var(--primary-dark);box-shadow:0 14px 30px rgba(91,75,255,.3)}
    .btn-light{color:var(--primary-dark);background:#fff;border-color:#dcdafc}
    .btn-light:hover{background:#f5f3ff;border-color:var(--primary)}
    .badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid #dedbff;border-radius:999px;background:#f2f0ff;color:var(--primary-dark);font-size:12px;font-weight:800}
    .badge.green{background:#eaf8f3;color:var(--success);border-color:#c8eadc}
    .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:transform .22s,box-shadow .22s,border-color .22s}
    .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#dad7ff}
    .hero{padding:56px 0 66px;background:radial-gradient(circle at 86% 8%,rgba(18,185,214,.15),transparent 36%),linear-gradient(145deg,#f3f1ff 0%,#fff 58%,#ecfbfd 100%);border-bottom:1px solid var(--line)}
    .hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);gap:36px;align-items:center}
    .hero h1{margin:18px 0}.hero .lead{max-width:690px;font-size:17px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin:25px 0}
    .hero-note{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:13px}
    .hero-note span{padding:6px 10px;background:rgba(255,255,255,.8);border:1px solid var(--line);border-radius:9px}
    .preview{padding:24px;background:#fff;border:1px solid #e3e1f9;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
    .preview-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:21px}
    .preview-title{font-size:14px;font-weight:850}
    .ring-row{display:flex;align-items:center;gap:20px}
    .progress-ring{width:128px;aspect-ratio:1;flex:none;display:grid;place-items:center;border-radius:50%;background:conic-gradient(var(--primary) 0 75%,#e9e7fb 75% 100%);box-shadow:0 10px 26px rgba(91,75,255,.13)}
    .ring-inner{width:103px;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:#fff;line-height:1.2}
    .ring-inner strong{font-size:29px;color:var(--primary-dark)}.ring-inner small{margin-top:5px;color:var(--muted);font-size:11px}
    .ring-copy strong{display:block;font-size:17px}.ring-copy p{margin:5px 0 0;color:var(--muted);font-size:13px}
    .tier-list{display:grid;gap:9px;margin-top:22px}
    .tier{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:11px 13px;border-radius:12px;background:#f7f8fc;font-size:13px}
    .tier strong{font-weight:800}.tier span{color:var(--muted)}
    .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .stat{padding:24px}.stat-number{display:block;color:var(--primary-dark);font-size:30px;font-weight:900;line-height:1.2}
    .stat h3{margin:10px 0 5px;font-size:15px}.stat p{margin:0;color:var(--muted);font-size:13px}
    .status-strip{display:flex;align-items:center;gap:12px;margin-top:18px;padding:16px 18px;border:1px solid #d7ebea;border-radius:var(--radius-sm);background:#f0fbfa;color:#315c60;font-size:14px}
    .status-dot{width:10px;height:10px;flex:none;border-radius:50%;background:var(--secondary);box-shadow:0 0 0 5px rgba(18,185,214,.12)}
    .service-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .feature-card{padding:26px;min-height:216px}
    .feature-card.feature-primary{background:linear-gradient(140deg,#5143dd,#7669ff);color:#fff;border-color:transparent}
    .feature-primary p{color:#e7e4ff!important}
    .feature-card .icon{width:42px;height:42px;display:grid;place-items:center;margin-bottom:20px;border-radius:12px;background:#f0eeff;color:var(--primary);font-size:19px;font-weight:900}
    .feature-primary .icon{background:rgba(255,255,255,.17);color:#fff}
    .feature-card h3{margin-bottom:8px}.feature-card p{margin:0;color:var(--muted);font-size:14px}
    .comparison{display:grid;grid-template-columns:1fr 1fr;gap:18px}
    .compare-card{padding:27px}.compare-card.official{border-color:#bee9db;background:#f8fffb}.compare-card.risk{background:#fffafb}
    .compare-card h3{display:flex;align-items:center;gap:9px;margin-bottom:15px}
    .compare-card ul,.check-list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
    .compare-card li,.check-list li{position:relative;padding-left:24px;color:#55566e;font-size:14px}
    .compare-card li::before,.check-list li::before{position:absolute;left:0;top:1px;color:var(--success);content:"✓";font-weight:900}
    .risk li::before{content:"!";color:var(--danger)}
    .timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
    .timeline-item{position:relative;padding:23px 19px;border:1px solid var(--line);border-radius:18px;background:#fff}
    .timeline-item::before{content:"";display:block;width:12px;height:12px;margin-bottom:18px;border-radius:50%;background:var(--secondary);box-shadow:0 0 0 5px #e9f9fb}
    .timeline-item strong{display:block;font-size:15px}.timeline-item p{margin:7px 0 0;color:var(--muted);font-size:13px}
    .news-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
    .news-feature{padding:30px;background:linear-gradient(145deg,#242354,#4540a4);color:#fff;border:0}
    .news-feature .badge{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2)}
    .news-feature h3{margin:22px 0 10px;font-size:23px}.news-feature p{color:#e3e1fa;font-size:14px}
    .news-stack{display:grid;gap:12px}
    .news-item{padding:19px 21px}.news-item h3{margin:9px 0 5px;font-size:16px}.news-item p{margin:0;color:var(--muted);font-size:13px}
    .security-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:30px;align-items:center}
    .security-panel{padding:27px;border-radius:var(--radius-lg);background:linear-gradient(145deg,#eae8ff,#e8fafb);border:1px solid #dcdcf5}
    .security-panel strong{display:block;font-size:26px;line-height:1.35}.security-panel p{margin:13px 0 0;color:var(--muted);font-size:14px}
    .security-list{display:grid;gap:13px}.security-list .card{padding:17px 20px}
    .security-list strong{font-size:15px}.security-list p{margin:4px 0 0;color:var(--muted);font-size:13px}
    .answer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
    .answer-card{padding:23px}.answer-card h3{margin:12px 0 8px;font-size:16px}.answer-card p{margin:0;color:var(--muted);font-size:13px}
    .faq-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:32px}
    .faq-list{display:grid;gap:10px}
    .faq-list details{padding:0 20px;border:1px solid var(--line);border-radius:15px;background:#fff;transition:border-color .22s,box-shadow .22s}
    .faq-list details[open]{border-color:#d8d3ff;box-shadow:var(--shadow-sm)}
    .faq-list summary{position:relative;list-style:none;cursor:pointer;padding:17px 30px 17px 0;font-weight:800;font-size:15px}
    .faq-list summary::-webkit-details-marker{display:none}
    .faq-list summary::after{content:"+";position:absolute;right:0;top:13px;color:var(--primary);font-size:23px;line-height:1}
    .faq-list details[open] summary::after{content:"−"}
    .faq-list details p{margin:0;padding:0 0 18px;color:var(--muted);font-size:14px}
    .signup-box{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:center;padding:34px;border-radius:var(--radius-lg);background:linear-gradient(125deg,#4c3ed9,#6457ee 55%,#428acb);color:#fff;box-shadow:var(--shadow-lg)}
    .signup-box .eyebrow{color:#c9f7ff}.signup-box .eyebrow::before{background:var(--accent)}
    .signup-box h2{margin:12px 0;color:#fff}.signup-box p{margin:0;color:#e8e6ff;font-size:14px}
    .signup-form{display:grid;gap:12px;padding:20px;border-radius:19px;background:#fff;color:var(--ink)}
    .signup-form label{font-size:13px;font-weight:800}
    .signup-form select{width:100%;height:43px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#f8f8fc;color:var(--ink)}
    .signup-form .btn{width:100%}.form-result{min-height:22px;margin:0!important;color:var(--primary-dark)!important;font-size:13px!important}
    .site-footer{background:#17172d;color:#fff}
    .footer-inner{padding-top:55px;padding-bottom:24px}
    .footer-grid{display:grid;grid-template-columns:1.35fr .55fr 1fr;gap:42px}
    .footer-brand{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:850}
    .footer-brand:hover,.footer-links a:hover{color:#a9eeff}
    .footer-description{max-width:430px;margin:17px 0 0;color:#b5b5c8;font-size:13px}
    .footer-title{margin:4px 0 17px;font-size:14px;color:#fff}
    .footer-links{display:grid;gap:10px}.footer-links a{width:max-content;color:#b5b5c8;font-size:13px}
    .footer-warning{color:#b5b5c8;font-size:13px}
    .copyright{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:44px;padding-top:19px;border-top:1px solid rgba(255,255,255,.13);color:#9393ae;font-size:12px}
    @media(max-width:1200px){.header-search{max-width:360px}.brand-logo{min-width:205px}.hero-grid{gap:22px}}
    @media(max-width:1024px){
      .site-layout{grid-template-columns:1fr}.sidebar{position:fixed;z-index:75;top:var(--header-height);left:0;width:min(300px,85vw);height:calc(100dvh - var(--header-height));transform:translateX(-110%);box-shadow:var(--shadow-lg);transition:transform .25s}.menu-open .sidebar{transform:translateX(0)}
      .menu-toggle{display:grid}.header-search{max-width:none}.header-select{display:none}
      .sidebar-backdrop{display:none;position:fixed;z-index:74;inset:var(--header-height) 0 0;background:rgba(20,20,47,.4)}.menu-open .sidebar-backdrop{display:block}
    }
    @media(max-width:768px){
      .section{padding:56px 0}.hero{padding:42px 0 54px}.hero-grid,.security-layout,.faq-layout,.signup-box{grid-template-columns:1fr}
      .preview{max-width:560px}.timeline{grid-template-columns:repeat(2,1fr)}.answer-grid{grid-template-columns:repeat(2,1fr)}
      .news-layout{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-grid>div:first-child{grid-column:1/-1}
      .header-search{display:none}
    }
    @media(max-width:520px){
      .container{width:calc(100% - 32px)}.header-inner{gap:8px}.brand-logo{min-width:0;margin-right:auto}.logo-copy strong{font-size:13px}.logo-copy span{font-size:10px}.logo-mark{width:36px;height:36px;border-radius:11px}.top-nav{gap:0;margin-left:0}.top-nav a{padding:7px 8px;font-size:12px}.menu-toggle{width:37px;height:37px}
      h1{font-size:33px}.hero .lead{font-size:15px}.hero-actions .btn{flex:1 1 100%}
      .stats-grid,.service-layout,.comparison,.timeline,.answer-grid{grid-template-columns:1fr}
      .stat{padding:18px}.stats-grid{gap:10px}.ring-row{gap:12px}.progress-ring{width:108px}.ring-inner{width:86px}.ring-inner strong{font-size:24px}
      .section{padding:47px 0}.signup-box{padding:22px}.footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}
    }
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}