:root {
            --mb-primary: #e67e22;
            --mb-primary-dark: #b95600;
            --mb-bg: #080a0d;
            --mb-surface: #14171c;
            --mb-border: rgba(230, 126, 34, 0.32);
            --mb-text: #d4dbe1;
            --mb-muted: #aeb6bd;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            color: var(--mb-text);
            background:
                radial-gradient(circle at 12% 10%, rgba(230, 126, 34, 0.18), rgba(230, 126, 34, 0) 28%),
                radial-gradient(circle at 90% 84%, rgba(230, 126, 34, 0.1), rgba(230, 126, 34, 0) 34%),
                linear-gradient(180deg, #0a0d10 0%, #07090c 100%);
            min-height: 100vh;
        }

        .mb-topbar {
            position: sticky;
            top: 0;
            z-index: 20;
            background: rgba(10, 12, 15, 0.9);
            backdrop-filter: blur(8px);
            border-bottom: 1px solid var(--mb-border);
        }

        .mb-topbar-inner {
            min-height: 84px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .mb-logo {
            width: min(240px, 100%);
            display: block;
        }

        .mb-back {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #ffffff;
            text-decoration: none;
            border: 1px solid rgba(230, 126, 34, 0.46);
            border-radius: 999px;
            padding: 10px 14px;
            font-size: 14px;
            font-weight: 600;
            background: rgba(230, 126, 34, 0.12);
        }

        .mb-hero {
            padding: 72px 0 42px;
        }

        .mb-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 1px solid rgba(230, 126, 34, 0.48);
            background: rgba(230, 126, 34, 0.12);
            color: #ffffff;
            border-radius: 999px;
            font-size: 12px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            padding: 7px 12px;
            margin-bottom: 16px;
        }

        .mb-hero h1 {
            margin: 0 0 14px;
            color: #ffffff;
            font-size: clamp(34px, 5.2vw, 62px);
            line-height: 1.05;
        }

        .mb-hero p {
            margin: 0;
            color: var(--mb-text);
            line-height: 1.7;
            font-size: 18px;
            max-width: 680px;
        }

        .mb-highlight {
            color: var(--mb-primary);
            font-weight: 700;
        }

        .mb-actions {
            margin-top: 28px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .mb-btn {
            height: 46px;
            border-radius: 999px;
            border: 1px solid transparent;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 0 18px;
            text-decoration: none;
            font-weight: 700;
            transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
        }

        .mb-btn:hover,
        .mb-btn:focus {
            transform: translateY(-2px);
            text-decoration: none;
        }

        .mb-btn-primary {
            color: #ffffff;
            background: linear-gradient(130deg, var(--mb-primary), var(--mb-primary-dark));
            box-shadow: 0 12px 24px rgba(185, 86, 0, 0.34);
        }

        .mb-btn-outline {
            color: #ffffff;
            border-color: rgba(230, 126, 34, 0.55);
            background: rgba(230, 126, 34, 0.1);
        }

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

        .mb-points li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            color: #d7dee4;
            line-height: 1.55;
        }

        .mb-points li i {
            color: var(--mb-primary);
            margin-top: 4px;
            font-size: 12px;
        }

        .mb-hero-card {
            border: 1px solid var(--mb-border);
            border-radius: 18px;
            padding: 16px;
            background: linear-gradient(165deg, rgba(23, 26, 31, 0.9), rgba(14, 16, 20, 0.82));
            box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
        }

        .mb-hero-card img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 12px;
            border: 1px solid rgba(230, 126, 34, 0.3);
        }

        .mb-grid {
            padding: 26px 0 24px;
        }

        .mb-feature {
            height: 100%;
            border: 1px solid var(--mb-border);
            border-radius: 14px;
            background: rgba(20, 23, 28, 0.74);
            padding: 18px;
        }

        .mb-feature i {
            color: var(--mb-primary);
            font-size: 18px;
            margin-bottom: 10px;
        }

        .mb-feature h3 {
            margin: 0 0 8px;
            color: #ffffff;
            font-size: 20px;
        }

        .mb-feature p {
            margin: 0;
            color: var(--mb-muted);
            line-height: 1.6;
        }

        .mb-steps {
            padding: 28px 0 80px;
        }

        .mb-steps-wrap {
            border-top: 1px solid rgba(230, 126, 34, 0.26);
            padding-top: 28px;
        }

        .mb-steps h2 {
            color: #ffffff;
            margin-bottom: 14px;
            font-size: clamp(28px, 3.6vw, 40px);
        }

        .mb-steps p {
            color: var(--mb-muted);
            line-height: 1.7;
            margin-bottom: 18px;
        }

        .mb-step-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 10px;
        }

        .mb-step-list li {
            border: 1px solid rgba(230, 126, 34, 0.24);
            border-radius: 10px;
            background: rgba(230, 126, 34, 0.07);
            padding: 10px 12px;
            color: #d5dde3;
        }

        .mb-step-list strong {
            color: #ffffff;
        }

        .mb-footer {
            padding: 18px 0 32px;
            border-top: 1px solid rgba(230, 126, 34, 0.22);
            color: #919aa2;
            font-size: 14px;
        }

        @media (max-width: 991px) {
            .mb-hero {
                padding-top: 52px;
            }

            .mb-hero-copy {
                margin-bottom: 20px;
            }
        }

        @media (max-width: 767px) {
            .mb-topbar-inner {
                min-height: 74px;
            }

            .mb-logo {
                width: 178px;
            }

            .mb-hero p {
                font-size: 16px;
            }
        }