:root {
            --pri: #667eea;
            --pri2: #764ba2;
            --dark: #0f0c29;
            --ink: #222b45;
            --muted: #6b7280;
            --line: #eceef5;
            --soft: #f8f9ff;
        }

        body { overflow-x: hidden; background: #fff; font-family: 'Segoe UI', system-ui, sans-serif; color: var(--ink); }
        a { text-decoration: none; }
        .section-pad { padding: 88px 0; }
        .section-title { font-weight: 800; letter-spacing: -.4px; }
        .section-subtitle { color: var(--muted); max-width: 760px; }

        /* ── Page Hero ─────────────────────────────────────────────── */
        .page-hero {
            position: relative;
            background: linear-gradient(135deg, #0f0c29 0%, #302b63 48%, #24243e 100%);
            padding: 96px 0 82px;
            overflow: hidden;
        }
        .page-hero::before {
            content: "";
            position: absolute;
            width: 520px;
            height: 520px;
            right: -160px;
            top: -180px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 72%);
            pointer-events: none;
        }
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            background: rgba(255,255,255,.14);
            border: 1px solid rgba(255,255,255,.24);
            color: #fff;
            border-radius: 999px;
            padding: .45rem .95rem;
            font-size: .83rem;
            font-weight: 600;
            margin-bottom: 1.2rem;
        }
        .hero-title { font-weight: 800; letter-spacing: -.6px; }
        .hero-lead { color: rgba(255,255,255,.84); max-width: 760px; margin-inline: auto; }
        .hero-actions .btn { border-radius: 999px; padding: .72rem 1.35rem; font-weight: 700; }
        .btn-hero-light { background: #fff; color: #2c2f67; }
        .btn-hero-light:hover { background: #f3f4ff; color: #2c2f67; }
        .btn-hero-outline { border: 1px solid rgba(255,255,255,.52); color: #fff; }
        .btn-hero-outline:hover { background: rgba(255,255,255,.1); color: #fff; }
        .hero-trust {
            margin-top: 1.3rem;
            color: rgba(255,255,255,.82);
            font-size: .92rem;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        /* ── Cards & Surfaces ──────────────────────────────────────── */
        .glass-card {
            background: linear-gradient(180deg, #ffffff 0%, #fdfdff 100%);
            border: 1px solid #edf0ff;
            border-radius: 18px;
            box-shadow: 0 10px 30px rgba(15,12,41,.08);
            transition: transform .25s ease, box-shadow .25s ease;
        }
        .glass-card:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(15,12,41,.12); }

        .feature-card,
        .value-card,
        .timeline-card,
        .stat-card {
            border: 1px solid var(--line);
            border-radius: 16px;
            background: #fff;
            box-shadow: 0 10px 24px rgba(15,12,41,.04);
            transition: all .25s ease;
        }
        .feature-card:hover,
        .value-card:hover,
        .timeline-card:hover,
        .stat-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(15,12,41,.08); }

        .icon-badge {
            width: 62px;
            height: 62px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            background: linear-gradient(135deg, var(--pri), var(--pri2));
            box-shadow: 0 8px 16px rgba(102,126,234,.28);
        }

        .soft-section { background: var(--soft); }
        .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }

        /* ── Timeline ──────────────────────────────────────────────── */
        .timeline-wrap { position: relative; }
        .timeline-wrap::before {
            content: "";
            position: absolute;
            left: 22px;
            top: 12px;
            bottom: 12px;
            width: 2px;
            background: linear-gradient(180deg, rgba(102,126,234,.35), rgba(118,75,162,.35));
        }
        .timeline-item { position: relative; padding-left: 62px; }
        .timeline-dot {
            position: absolute;
            left: 12px;
            top: 10px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 3px solid #fff;
            background: linear-gradient(135deg, var(--pri), var(--pri2));
            box-shadow: 0 0 0 4px rgba(102,126,234,.18);
        }

        @media (max-width: 991.98px) {
            .section-pad { padding: 74px 0; }
            .page-hero { padding: 86px 0 72px; }
            .hero-title { font-size: 2rem; }
        }