:root {
            --pri: #667eea;
            --pri2: #764ba2;
            --dark: #0f0c29;
            --ink: #1f2937;
            --muted: #6b7280;
            --line: #e9ecf6;
            --soft: #f8f9ff;
        }
        html { scroll-behavior: smooth; }
        body { overflow-x: hidden; background: #fff; font-family: 'Segoe UI', system-ui, sans-serif; color: var(--ink); }
        a { text-decoration: none; }

        /* ── Hero ──────────────────────────────────────────────────── */
        .page-hero {
            position: relative;
            background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
            padding: 92px 0 72px;
            overflow: hidden;
        }
        .page-hero::before {
            content: "";
            position: absolute;
            width: 460px;
            height: 460px;
            right: -120px;
            top: -160px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 72%);
        }
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            background: rgba(255,255,255,.14);
            border: 1px solid rgba(255,255,255,.28);
            color: #fff;
            border-radius: 999px;
            padding: .45rem .95rem;
            font-size: .82rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }
        .hero-lead { color: rgba(255,255,255,.84); max-width: 760px; margin-inline: auto; }

        /* ── Terms content ─────────────────────────────────────────── */
        .terms-section { padding: 84px 0; background: linear-gradient(180deg, #ffffff 0%, #fbfbff 100%); }
        .toc-card,
        .terms-card {
            border: 1px solid var(--line);
            border-radius: 16px;
            background: #fff;
            box-shadow: 0 10px 24px rgba(15,12,41,.05);
        }
        .toc-card {
            position: sticky;
            top: 92px;
            padding: 1.15rem;
        }
        .toc-title { font-size: .88rem; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-bottom: .8rem; font-weight: 700; }
        .toc-link {
            display: flex;
            align-items: flex-start;
            gap: .45rem;
            color: #374151;
            border-radius: 10px;
            padding: .55rem .65rem;
            font-size: .92rem;
            transition: all .2s ease;
        }
        .toc-link:hover { background: var(--soft); color: var(--pri); }

        .terms-card { padding: 2rem; }
        .terms-header {
            border: 1px solid #e9ecfb;
            background: linear-gradient(135deg, #f8f9ff 0%, #f4efff 100%);
            border-radius: 14px;
            padding: 1rem 1rem;
            margin-bottom: 1.5rem;
        }
        .term-item {
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: 1.2rem 1.2rem;
            margin-bottom: 1rem;
            background: #fff;
        }
        .term-item h3 {
            font-size: 1.05rem;
            margin-bottom: .55rem;
            font-weight: 700;
        }
        .term-item p { margin-bottom: 0; color: var(--muted); line-height: 1.72; }
        .term-index {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            font-size: .85rem;
            font-weight: 700;
            color: #fff;
            background: linear-gradient(135deg, var(--pri), var(--pri2));
            margin-right: .55rem;
            flex-shrink: 0;
        }

        .disclaimer-box {
            border: 1px solid #f6d17f;
            background: linear-gradient(135deg, #fff8e8 0%, #fff5db 100%);
            border-radius: 14px;
            padding: 1rem 1rem;
            margin-top: .65rem;
        }

        .terms-cta {
            border-radius: 16px;
            background: linear-gradient(135deg, var(--pri), var(--pri2));
            color: #fff;
            padding: 1.8rem 1.3rem;
            text-align: center;
            margin-top: 1.2rem;
        }
        .terms-cta .btn { border-radius: 999px; }

        @media (max-width: 991.98px) {
            .terms-section { padding: 70px 0; }
            .toc-card { position: static; margin-bottom: 1rem; }
            .terms-card { padding: 1.2rem; }
            .page-hero { padding: 80px 0 62px; }
        }