<?php include __DIR__ . '/../includes/header.php'; ?>
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500&display=swap"
    rel="stylesheet" />
<style>
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    :root {
        --gold: #c39a37;
        --dark: #1A1F2E;
        --mid: #3A4058;
        --light: #F8F9FC;
        --white: #ffffff;
        --border: #E8EAF0;
        --shadow: 0 8px 32px rgba(26, 31, 46, 0.10);
    }

    body {
        font-family: 'Sora', sans-serif;
        background:
            radial-gradient(circle at 12% 0%, #fff6e6 0%, rgba(255, 246, 230, 0) 36%),
            radial-gradient(circle at 88% 18%, #f8fbff 0%, rgba(248, 251, 255, 0) 38%),
            var(--white);
        color: var(--dark);
        overflow-x: hidden;
    }

    /* ── HERO ── */
    .hero {
        text-align: center;
        padding: clamp(44px, 7vw, 84px) clamp(14px, 3.5vw, 36px) 26px;
        background: linear-gradient(160deg, #fff 60%, #fff9ee 100%);
        position: relative;
        isolation: isolate;
        overflow: hidden;
    }

    .hero::before,
    .hero::after {
        content: "";
        position: absolute;
        border-radius: 999px;
        filter: blur(4px);
        z-index: -1;
    }

    .hero::before {
        width: 240px;
        height: 240px;
        background: rgba(245, 166, 35, 0.14);
        top: -130px;
        left: -70px;
    }

    .hero::after {
        width: 220px;
        height: 220px;
        background: rgba(37, 99, 235, 0.09);
        right: -70px;
        bottom: -130px;
    }

    .hero h1 {
        font-size: clamp(2rem, 5vw, 3.4rem);
        font-weight: 800;
        color: var(--dark);
        line-height: 1.15;
        letter-spacing: -0.02em;
    }

    .hero h1 span {
        color: #c39a37;
        display: block;
    }

    .hero p {
        margin: 18px auto 0;
        max-width: 760px;
        font-size: 1rem;
        color: var(--mid);
        line-height: 1.7;
        font-family: 'Inter', sans-serif;
    }

    .hero p strong {
        display: block;
        font-weight: 600;
        color: var(--dark);
        font-size: 1.05rem;
    }

    /* ── DOWNLOAD GRID ── */
    .download-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: clamp(14px, 1.7vw, 22px);
        padding: 16px clamp(12px, 2.6vw, 28px) 72px;
        width: min(1280px, 96vw);
        margin: 0 auto;
    }

    .dl-card {
        position: relative;
        width: 128px;
        height: 128px;
        background: linear-gradient(180deg, #ffffff 0%, #fffdf8 100%);
        border: 1.5px solid var(--border);
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: border-color 0.25s, box-shadow 0.25s, transform 0.22s;
        overflow: hidden;
        text-decoration: none;
        box-shadow: 0 7px 22px rgba(26, 31, 46, 0.07);
    }

    .dl-card:hover {
        border-color: var(--gold);
        box-shadow: 0 8px 28px rgba(245, 166, 35, 0.22);
        transform: translateY(-6px) scale(1.01);
    }

    /* Icon layer */
    .dl-card .icon-layer {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: opacity 0.25s, transform 0.25s;
    }

    .dl-card:hover .icon-layer {
        opacity: 0;
        transform: scale(0.75);
    }

    /* Download overlay */
    .dl-card .hover-layer {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, var(--gold) 0%, #fcdb47 100%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        opacity: 0;
        transform: scale(1.1);
        transition: opacity 0.25s, transform 0.25s;
        border-radius: 18px;
    }

    .dl-card:hover .hover-layer {
        opacity: 1;
        transform: scale(1);
    }

    .dl-card .hover-layer svg {
        width: 36px;
        height: 36px;
        color: var(--white);
        animation: bounce 0.5s ease infinite alternate;
    }

    @keyframes bounce {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-5px);
        }
    }

    .dl-card .hover-layer span {
        color: var(--white);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    /* Card label below */
    .dl-card .card-label {
        position: absolute;
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%);
        width: 140px;
        text-align: center;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--mid);
        transition: color 0.2s;
        white-space: nowrap;
    }

    .dl-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        margin-bottom: 22px;
    }

    .dl-wrapper:hover .card-label {
        color: var(--gold);
    }

    /* QR card – no hover overlay */
    .dl-card.qr-card:hover {
        border-color: var(--gold);
        transform: translateY(-4px);
    }

    .dl-card.qr-card .hover-layer {
        display: none;
    }

    .dl-card.qr-card:hover .icon-layer {
        opacity: 1;
        transform: scale(1);
    }

    .qr-img {
        width: 88px;
        height: 88px;
        object-fit: contain;
    }

    /* SVG icons */
    .dl-icon {
        width: 52px;
        height: 52px;
        color: var(--dark);
    }

    /* ── MOCKUP ── */
    .mockup-section {
        background: linear-gradient(170deg, #fff9ee 0%, #fff 60%);
        padding: 72px clamp(14px, 3vw, 34px);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mockup-inner {
        max-width: 1160px;
        width: min(1160px, 96vw);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Fake browser / desktop shell */
    .desktop-shell {
        width: 72%;
        background: #1e2230;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 24px 64px rgba(26, 31, 46, 0.22);
        position: relative;
        z-index: 1;
    }

    .browser-bar {
        background: #2a2f45;
        padding: 10px 16px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .browser-dot {
        width: 11px;
        height: 11px;
        border-radius: 50%;
    }

    .browser-dot:nth-child(1) {
        background: #ff5f57;
    }

    .browser-dot:nth-child(2) {
        background: #febc2e;
    }

    .browser-dot:nth-child(3) {
        background: #28c840;
    }

    .browser-content {
        background: var(--white);
        padding: 16px 14px 10px;
    }

    .mock-topbar {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
    }

    .mock-logo {
        background: var(--gold);
        border-radius: 6px;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mock-logo span {
        color: #fff;
        font-size: 0.55rem;
        font-weight: 800;
    }

    .mock-nav {
        display: flex;
        gap: 8px;
    }

    .mock-nav-item {
        font-size: 0.5rem;
        color: var(--mid);
        font-family: 'Inter', sans-serif;
        padding: 2px 5px;
        border-radius: 3px;
        background: var(--light);
    }

    .mock-nav-item.active {
        background: var(--gold);
        color: #fff;
    }

    .mock-broker-row {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-bottom: 10px;
    }

    .mock-broker-badge {
        font-size: 0.42rem;
        padding: 2px 7px;
        border-radius: 4px;
        border: 1px solid var(--border);
        color: var(--mid);
        font-weight: 600;
        font-family: 'Inter', sans-serif;
    }

    .mock-stat {
        font-size: 0.42rem;
        color: var(--mid);
        margin-bottom: 8px;
        font-family: 'Inter', sans-serif;
    }

    .mock-stat strong {
        color: var(--gold);
        font-size: 0.52rem;
    }

    .mock-cards-row {
        display: flex;
        gap: 6px;
    }

    .mock-card {
        flex: 1;
        background: var(--light);
        border-radius: 6px;
        padding: 6px 8px;
        font-size: 0.4rem;
        color: var(--mid);
        font-family: 'Inter', sans-serif;
    }

    .mock-card .mc-title {
        font-weight: 700;
        color: var(--dark);
        font-size: 0.44rem;
        margin-bottom: 4px;
    }

    .mock-rank-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 2px;
    }

    .rank-tag {
        background: #e8f4ff;
        color: #2563eb;
        padding: 1px 4px;
        border-radius: 2px;
        font-size: 0.38rem;
    }

    .reg-tag {
        background: #e8ffed;
        color: #16a34a;
        padding: 1px 4px;
        border-radius: 2px;
        font-size: 0.38rem;
    }

    /* Phone shell */
    .phone-shell {
        width: 28%;
        position: absolute;
        left: 1%;
        z-index: 3;
        background: #1e2230;
        border-radius: 32px;
        padding: 14px 10px;
        box-shadow: 0 20px 50px rgba(26, 31, 46, 0.28);
    }

    .phone-notch {
        width: 50%;
        height: 10px;
        background: #2a2f45;
        border-radius: 8px;
        margin: 0 auto 10px;
    }

    .phone-content {
        background: var(--white);
        border-radius: 18px;
        padding: 8px 7px;
        min-height: 200px;
    }

    .ph-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
    }

    .ph-logo {
        background: var(--gold);
        border-radius: 4px;
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ph-logo span {
        color: #fff;
        font-size: 0.3rem;
        font-weight: 800;
    }

    .ph-search {
        flex: 1;
        margin: 0 5px;
        height: 12px;
        background: var(--light);
        border-radius: 6px;
        border: 1px solid var(--border);
    }

    .ph-broker-row {
        display: flex;
        gap: 4px;
        margin-bottom: 6px;
        flex-wrap: wrap;
    }

    .ph-badge {
        font-size: 0.32rem;
        padding: 1px 4px;
        border-radius: 3px;
        border: 1px solid var(--border);
        color: var(--mid);
        font-weight: 600;
        font-family: 'Inter', sans-serif;
    }

    .ph-promo {
        background: linear-gradient(90deg, var(--gold), #e8941a);
        border-radius: 6px;
        height: 26px;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        padding: 0 8px;
        font-size: 0.35rem;
        color: #fff;
        font-weight: 700;
    }

    .ph-stat {
        font-size: 0.3rem;
        color: var(--mid);
        margin-bottom: 4px;
        font-family: 'Inter', sans-serif;
    }

    .ph-row {
        display: flex;
        gap: 4px;
        margin-bottom: 3px;
    }

    .ph-item {
        flex: 1;
        background: var(--light);
        border-radius: 4px;
        padding: 3px 4px;
        font-size: 0.28rem;
        color: var(--mid);
        font-family: 'Inter', sans-serif;
    }

    .ph-item b {
        display: block;
        color: var(--dark);
        font-size: 0.3rem;
        margin-bottom: 1px;
    }

    /* ── FEATURES ── */
    .features {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 0;
        border-top: 1.5px solid var(--border);
        width: min(1280px, 96vw);
        margin: 20px auto auto;
        border: 1.5px solid var(--border);
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 12px 36px rgba(26, 31, 46, 0.08);
        background: #fff;
    }

    .feature-card {
        margin: 10px;
        padding: 52px 40px;
        text-align: center;
        border-right: 1.5px solid var(--border);
        transition: background 0.25s, transform 0.25s;
    }

    .feature-card:last-child {
        border-right: none;
    }

    .feature-card:hover {
        background: #fff9ee;
        transform: translateY(-2px);
    }

    .feat-icon {
        width: 52px;
        height: 52px;
        background: linear-gradient(135deg, var(--gold), #e8941a);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        box-shadow: 0 6px 20px rgba(245, 166, 35, 0.3);
    }

    .feat-icon svg {
        width: 26px;
        height: 26px;
        color: #fff;
    }

    .feature-card h3 {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--dark);
        margin-bottom: 12px;
        letter-spacing: -0.01em;
    }

    .feature-card p {
        font-size: 0.875rem;
        color: var(--mid);
        line-height: 1.65;
        font-family: 'Inter', sans-serif;
    }

    /* responsive */
    @media (max-width: 900px) {
        .mockup-inner {
            flex-direction: column;
            gap: 20px;
        }

        .phone-shell {
            position: relative;
            left: auto;
            width: min(320px, 78vw);
            order: 2;
        }

        .desktop-shell {
            width: min(780px, 100%);
            order: 1;
        }
    }

    @media (max-width: 640px) {
        .download-grid {
            gap: 14px;
            padding-bottom: 48px;
        }

        .dl-card {
            width: 100px;
            height: 100px;
        }

        .dl-icon {
            width: 40px;
            height: 40px;
        }

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

        .feature-card {
            border-right: none;
            border-bottom: 1.5px solid var(--border);
        }

        .feature-card:last-child {
            border-bottom: none;
        }

        .feature-card {
            padding: 38px 24px;
        }

        .mockup-section {
            padding: 40px 12px;
        }
    }
</style>
</head>

<body>

    <!-- ── HERO ── -->
    <section class="hero">
        <h1>
            Global Brokers
            <span>Regulatory Inquiry APP</span>
        </h1>
        <p>
            <strong>Support Windows, Android, and iOS system.</strong>
            Know More hidden risks &nbsp;·&nbsp; Enjoy More valuable rights and interests
        </p>
    </section>

    <!-- ── DOWNLOAD GRID ── -->
    <div class="download-grid">

        <!-- TraderSafety Global (iOS) -->
        <div class="dl-wrapper">
            <a class="dl-card" href="#" aria-label="Download WikiFX Global">
                <div class="icon-layer">
                    <svg class="dl-icon" viewBox="0 0 24 24" fill="currentColor">
                        <path
                            d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
                    </svg>
                </div>
                <div class="hover-layer">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M12 2v13M6 10l6 6 6-6" />
                        <path d="M3 18h18v3H3z" />
                    </svg>
                    <span>Download</span>
                </div>
            </a>
            <span class="card-label">TraderSafety (Global)</span>
        </div>

        <!-- TraderSafety Hong Kong (iOS) -->
        <div class="dl-wrapper">
            <a class="dl-card" href="#" aria-label="Download WikiFX Hong Kong">
                <div class="icon-layer">
                    <svg class="dl-icon" viewBox="0 0 24 24" fill="currentColor">
                        <path
                            d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
                    </svg>
                </div>
                <div class="hover-layer">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M12 2v13M6 10l6 6 6-6" />
                        <path d="M3 18h18v3H3z" />
                    </svg>
                    <span>Download</span>
                </div>
            </a>
            <span class="card-label">TraderSafety (Hong Kong)</span>
        </div>

        <!-- Google Play -->
        <div class="dl-wrapper">
            <a class="dl-card" href="#" aria-label="Download on Google Play">
                <div class="icon-layer">
                    <svg class="dl-icon" viewBox="0 0 512 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path d="M325.3 234.3L104.6 13l280.8 161.2-60.1 60.1zM47 0C34 6.8 25.3 19.2 25.3 35.3v441.3c0 16.1 8.7 28.5 21.7 35.3l256.6-256L47 0zm425.2 225.6l-58.9-34.1-65.7 64.5 65.7 64.5 60.1-34.1c18-14.3 18-46.5-1.2-60.8zM104.6 499l280.8-161.2-60.1-60.1L104.6 499z" />
                    </svg>
                </div>
                <div class="hover-layer">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M12 2v13M6 10l6 6 6-6" />
                        <path d="M3 18h18v3H3z" />
                    </svg>
                    <span>Download</span>
                </div>
            </a>
            <span class="card-label">Google Play</span>
        </div>

        <!-- TraderSafety Ultra -->
        <div class="dl-wrapper">
            <a class="dl-card" href="#" aria-label="Download WikiFX Ultra">
                <div class="icon-layer">
                    <!-- Android robot -->
                    <svg class="dl-icon" viewBox="0 0 24 24" fill="currentColor">
                        <path
                            d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-5.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48A5.84 5.84 0 0 0 12 1.5c-.69 0-1.35.12-1.97.33L8.55.35c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.3 1.3A5.977 5.977 0 0 0 6 7h12c0-1.99-.97-3.75-2.47-4.84zM10 5H9V4h1v1zm5 0h-1V4h1v1z" />
                    </svg>
                </div>
                <div class="hover-layer">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M12 2v13M6 10l6 6 6-6" />
                        <path d="M3 18h18v3H3z" />
                    </svg>
                    <span>Download</span>
                </div>
            </a>
            <span class="card-label">TraderSafety Ultra (80M)</span>
        </div>

        <!-- TraderSafety Mini -->
        <div class="dl-wrapper">
            <a class="dl-card" href="#" aria-label="Download WikiFX Mini">
                <div class="icon-layer">
                    <svg class="dl-icon" viewBox="0 0 24 24" fill="currentColor">
                        <path
                            d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-5.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48A5.84 5.84 0 0 0 12 1.5c-.69 0-1.35.12-1.97.33L8.55.35c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.3 1.3A5.977 5.977 0 0 0 6 7h12c0-1.99-.97-3.75-2.47-4.84zM10 5H9V4h1v1zm5 0h-1V4h1v1z" />
                    </svg>
                </div>
                <div class="hover-layer">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M12 2v13M6 10l6 6 6-6" />
                        <path d="M3 18h18v3H3z" />
                    </svg>
                    <span>Download</span>
                </div>
            </a>
            <span class="card-label">TraderSafety Mini (20M)</span>
        </div>


        <!-- PC Client -->
        <div class="dl-wrapper">
            <a class="dl-card" href="#" aria-label="Download PC Client">
                <div class="icon-layer">
                    <!-- Windows logo -->
                    <svg class="dl-icon" viewBox="0 0 24 24" fill="currentColor">
                        <path
                            d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801" />
                    </svg>
                </div>
                <div class="hover-layer">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M12 2v13M6 10l6 6 6-6" />
                        <path d="M3 18h18v3H3z" />
                    </svg>
                    <span>Download</span>
                </div>
            </a>
            <span class="card-label">PC Client</span>
        </div>


        <!-- Scan to Download – QR stays -->
        <div class="dl-wrapper">
            <a class="dl-card qr-card" href="#" aria-label="Scan to Download">
                <div class="icon-layer">
                    <!-- inline QR-style SVG pattern -->
                    <svg class="qr-img" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                        <!-- outer frame TL -->
                        <rect x="5" y="5" width="38" height="38" rx="4" fill="none" stroke="#1A1F2E" stroke-width="5" />
                        <rect x="14" y="14" width="20" height="20" rx="2" fill="#1A1F2E" />
                        <!-- outer frame TR -->
                        <rect x="57" y="5" width="38" height="38" rx="4" fill="none" stroke="#1A1F2E"
                            stroke-width="5" />
                        <rect x="66" y="14" width="20" height="20" rx="2" fill="#1A1F2E" />
                        <!-- outer frame BL -->
                        <rect x="5" y="57" width="38" height="38" rx="4" fill="none" stroke="#1A1F2E"
                            stroke-width="5" />
                        <rect x="14" y="66" width="20" height="20" rx="2" fill="#1A1F2E" />
                        <!-- data dots -->
                        <rect x="57" y="57" width="7" height="7" rx="1" fill="#1A1F2E" />
                        <rect x="68" y="57" width="7" height="7" rx="1" fill="#1A1F2E" />
                        <rect x="79" y="57" width="7" height="7" rx="1" fill="#1A1F2E" />
                        <rect x="90" y="57" width="5" height="7" rx="1" fill="#1A1F2E" />
                        <rect x="57" y="68" width="7" height="7" rx="1" fill="#1A1F2E" />
                        <rect x="79" y="68" width="7" height="7" rx="1" fill="#1A1F2E" />
                        <rect x="57" y="79" width="7" height="7" rx="1" fill="#1A1F2E" />
                        <rect x="68" y="79" width="7" height="7" rx="1" fill="#1A1F2E" />
                        <rect x="90" y="79" width="5" height="7" rx="1" fill="#1A1F2E" />
                        <rect x="57" y="90" width="7" height="5" rx="1" fill="#1A1F2E" />
                        <rect x="79" y="90" width="7" height="5" rx="1" fill="#1A1F2E" />
                        <rect x="90" y="90" width="5" height="5" rx="1" fill="#1A1F2E" />
                    </svg>
                </div>
            </a>
            <span class="card-label">Scan to Download</span>
        </div>

    </div>

    <!-- ── MOCKUP SECTION ── -->
    <section class="mockup-section">
        <div class="mockup-inner">

            <!-- Phone -->
            <div class="phone-shell">
                <div class="phone-notch"></div>
                <div class="phone-content">
                    <div class="ph-topbar">
                        <div class="ph-logo"><span>W</span></div>
                        <div class="ph-search"></div>
                    </div>
                    <div class="ph-broker-row">
                        <span class="ph-badge">FXTM</span>
                        <span class="ph-badge">FXCM</span>
                        <span class="ph-badge">XM</span>
                        <span class="ph-badge">Exness</span>
                    </div>
                    <div class="ph-promo">⚡ SILEOX: Is This a New Block?</div>
                    <div class="ph-stat"><strong>75,174</strong> Brokers Included</div>
                    <div class="ph-row">
                        <div class="ph-item"><b>IC Markets</b>FXTM · FXCM</div>
                        <div class="ph-item"><b>Rankings</b>ATFX · 9.26</div>
                    </div>
                    <div class="ph-row">
                        <div class="ph-item"><b>Exness</b>Regulated</div>
                        <div class="ph-item"><b>eightcap</b>9.04</div>
                    </div>
                </div>
            </div>

            <!-- Desktop shell -->
            <div class="desktop-shell">
                <div class="browser-bar">
                    <div class="browser-dot"></div>
                    <div class="browser-dot"></div>
                    <div class="browser-dot"></div>
                </div>
                <div class="browser-content">
                    <div class="mock-topbar">
                        <div class="mock-logo"><span>W</span></div>
                        <div class="mock-nav">
                            <span class="mock-nav-item active">Home</span>
                            <span class="mock-nav-item">Rankings</span>
                            <span class="mock-nav-item">Exposure</span>
                            <span class="mock-nav-item">News</span>
                            <span class="mock-nav-item">EXPO</span>
                        </div>
                    </div>
                    <div class="mock-broker-row">
                        <span class="mock-broker-badge">FXCM</span>
                        <span class="mock-broker-badge">FXTM</span>
                        <span class="mock-broker-badge">AVATRADE</span>
                        <span class="mock-broker-badge">exness</span>
                        <span class="mock-broker-badge">ATFX</span>
                        <span class="mock-broker-badge">XM</span>
                    </div>
                    <div class="mock-stat">Total of <strong>75,174</strong> Brokers Included &nbsp;·&nbsp; 60
                        Regulators, Available in 17 Languages</div>
                    <div class="mock-cards-row">
                        <div class="mock-card">
                            <div class="mc-title">VPS Standard</div>
                            <div class="mock-rank-row"><span>FXTM</span><span class="rank-tag">9.26</span><span
                                    class="reg-tag">Regulated</span></div>
                            <div class="mock-rank-row"><span>eightcap</span><span class="rank-tag">9.04</span><span
                                    class="reg-tag">Regulated</span></div>
                            <div class="mock-rank-row"><span>FOREX.com</span><span class="rank-tag">8.9</span><span
                                    class="reg-tag">Regulated</span></div>
                        </div>
                        <div class="mock-card">
                            <div class="mc-title">Latest Exposure</div>
                            <div style="font-size:0.36rem;color:var(--mid);line-height:1.6">
                                Withdrawals not processed...<br />
                                Unable to withdraw funds...<br />
                                FX Brokers No License...
                            </div>
                        </div>
                        <div class="mock-card">
                            <div class="mc-title">News Flash</div>
                            <div style="font-size:0.36rem;color:var(--mid);line-height:1.6">
                                Robinhood Launches Prediction...<br />
                                SILEOX Block Alert...<br />
                                Geo Political Market Update...
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>

    <!-- ── FEATURES ── -->
    <div class="features">

        <div class="feature-card">
            <div class="feat-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                    <polyline points="14 2 14 8 20 8" />
                    <line x1="16" y1="13" x2="8" y2="13" />
                    <line x1="16" y1="17" x2="8" y2="17" />
                    <polyline points="10 9 9 9 8 9" />
                </svg>
            </div>
            <h3>Detailed Information</h3>
            <p>From regulatory licenses to spreads and fees — all in one place.</p>
        </div>

        <div class="feature-card">
            <div class="feat-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round">
                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
                    <polyline points="9 12 11 14 15 10" />
                </svg>
            </div>
            <h3>Tell Legitimacy Brokers from Scams</h3>
            <p>TraderSafety Score: Big-data risk ratings. Software checks. Real-time scam detection.</p>
        </div>

        <div class="feature-card">
            <div class="feat-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round">
                    <circle cx="18" cy="5" r="3" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="19" r="3" />
                    <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
                    <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
                </svg>
            </div>
            <h3>Map the Corporate Web</h3>
            <p>Uncover the hidden ties behind the scenes.</p>
        </div>

    </div>

    <?php include __DIR__ . '/../includes/footer.php'; ?>