<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ACE — Global Digital Identity Platform</title>
    
    <!-- ===== PWA Meta Tags ===== -->
    <link rel="manifest" href="/manifest.json">
    <meta name="theme-color" content="#D4AF37">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="ACE">
    <link rel="apple-touch-icon" href="/assets/icon-192x192.png">
    
    <style>
        /* ===== RESET & BASE ===== */
        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #0A0A0F;
            color: #FFFFFF;
            overflow-x: hidden;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        a { text-decoration: none; color: inherit; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }

        /* ===== NAVIGATION ===== */
        .main-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.2rem 2rem;
            background: rgba(10, 10, 15, 0.92);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(212, 175, 55, 0.08);
            position: sticky;
            top: 0;
            z-index: 1000;
            flex-wrap: wrap;
            gap: 1rem;
        }
        .nav-logo {
            font-size: 1.6rem;
            font-weight: 800;
            background: linear-gradient(135deg, #D4AF37, #FBBF24);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .nav-logo span { font-size: 0.9rem; -webkit-text-fill-color: #6A6A8A; }
        .nav-links {
            display: flex;
            gap: 2rem;
            list-style: none;
            flex-wrap: wrap;
        }
        .nav-links a {
            color: #9A9AB0;
            font-size: 0.9rem;
            font-weight: 500;
            transition: color 0.3s ease;
        }
        .nav-links a:hover { color: #D4AF37; }
        .nav-links a.active { color: #D4AF37; }
        .nav-cta {
            background: linear-gradient(135deg, #D4AF37, #FBBF24);
            color: #0A0A0F !important;
            padding: 0.5rem 1.5rem;
            border-radius: 50px;
            font-weight: 700 !important;
        }
        .nav-cta:hover { transform: scale(1.05); box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2); }

        /* ===== HERO ===== */
        .hero {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 4rem 2rem;
            position: relative;
            background: radial-gradient(ellipse at 30% 20%, #1a1a2e 0%, #0A0A0F 70%);
            overflow: hidden;
        }
        .hero::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(from 0deg, transparent, #D4AF37, transparent, #D4AF37, transparent);
            opacity: 0.03;
            animation: rotateGlow 30s linear infinite;
        }
        @keyframes rotateGlow {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .hero-badge {
            display: inline-block;
            background: rgba(212, 175, 55, 0.1);
            border: 1px solid rgba(212, 175, 55, 0.15);
            color: #D4AF37;
            padding: 0.4rem 1.8rem;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
        }
        .hero h1 {
            font-size: 4.8rem;
            font-weight: 800;
            line-height: 1.05;
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
            max-width: 900px;
        }
        .hero h1 .highlight {
            background: linear-gradient(135deg, #D4AF37, #FBBF24);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .hero h1 .highlight2 {
            background: linear-gradient(135deg, #60A5FA, #2563EB);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .hero p {
            font-size: 1.3rem;
            color: #9A9AB0;
            max-width: 700px;
            margin-bottom: 2.5rem;
            position: relative;
            z-index: 1;
        }
        .hero-actions {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            justify-content: center;
            position: relative;
            z-index: 1;
        }
        .btn-primary {
            background: linear-gradient(135deg, #D4AF37, #FBBF24);
            color: #0A0A0F;
            padding: 0.9rem 2.8rem;
            border-radius: 50px;
            font-weight: 700;
            font-size: 1rem;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 20px 40px rgba(212, 175, 55, 0.3);
        }
        .btn-secondary {
            background: rgba(255,255,255,0.04);
            color: #FFFFFF;
            padding: 0.9rem 2.8rem;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1rem;
            border: 1px solid rgba(255,255,255,0.08);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .btn-secondary:hover {
            background: rgba(255,255,255,0.08);
            border-color: #D4AF37;
        }

        .hero-stats {
            display: flex;
            justify-content: center;
            gap: 4rem;
            margin-top: 3.5rem;
            position: relative;
            z-index: 1;
            flex-wrap: wrap;
        }
        .stat-item { text-align: center; }
        .stat-number {
            font-size: 3rem;
            font-weight: 800;
            color: #D4AF37;
        }
        .stat-label {
            font-size: 0.9rem;
            color: #6A6A8A;
            margin-top: 0.2rem;
        }

        /* ===== INDUSTRY BADGES ===== */
        .industry-bar {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.8rem;
            margin: 2rem auto;
            padding: 1rem 1.5rem;
            background: rgba(255,255,255,0.02);
            border-radius: 60px;
            border: 1px solid rgba(255,255,255,0.04);
            max-width: 800px;
        }
        .industry-bar span {
            font-size: 0.75rem;
            padding: 0.3rem 1rem;
            border-radius: 30px;
            background: rgba(255,255,255,0.03);
            color: #9A9AB0;
            border: 1px solid rgba(255,255,255,0.04);
            font-weight: 500;
            letter-spacing: 0.03em;
        }
        .industry-bar span.gold { color: #D4AF37; border-color: rgba(212,175,55,0.1); background: rgba(212,175,55,0.04); }

        /* ===== SECTION HEADERS ===== */
        .section-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 3rem;
        }
        .section-header h2 {
            font-size: 2.8rem;
            font-weight: 700;
            margin-bottom: 0.8rem;
        }
        .section-header h2 .gold { color: #D4AF37; }
        .section-header p {
            color: #9A9AB0;
            font-size: 1.1rem;
        }

        /* ===== 8 CODES ===== */
        .codes-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
            margin: 3rem 0;
        }
        .code-card {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 16px;
            padding: 1.5rem;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .code-card:hover {
            transform: translateY(-6px);
            border-color: rgba(212, 175, 55, 0.2);
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        }
        .code-card .color-dot {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            margin: 0 auto 0.8rem;
            border: 2px solid rgba(255,255,255,0.06);
        }
        .code-card .code {
            font-size: 1.2rem;
            font-weight: 700;
            font-family: 'Courier New', monospace;
        }
        .code-card .name {
            font-size: 0.8rem;
            color: #6A6A8A;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }
        .code-card .desc {
            font-size: 0.85rem;
            color: #9A9AB0;
            margin-top: 0.5rem;
            line-height: 1.4;
        }
        .code-card .btn-card {
            display: inline-block;
            margin-top: 0.8rem;
            padding: 0.4rem 1.5rem;
            border-radius: 30px;
            font-size: 0.8rem;
            font-weight: 600;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.06);
            color: #FFFFFF;
            transition: all 0.3s ease;
        }
        .code-card .btn-card:hover {
            background: rgba(212, 175, 55, 0.1);
            border-color: #D4AF37;
            color: #D4AF37;
        }

        /* ===== ECOSYSTEM ===== */
        .ecosystem-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
            margin: 3rem 0;
        }
        .ecosystem-card {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 16px;
            padding: 1.5rem 1rem;
            text-align: center;
            transition: all 0.3s ease;
            text-decoration: none;
            color: #FFFFFF;
        }
        .ecosystem-card:hover {
            transform: translateY(-6px);
            border-color: #D4AF37;
            background: rgba(212, 175, 55, 0.04);
            box-shadow: 0 20px 40px rgba(212, 175, 55, 0.05);
        }
        .ecosystem-card .icon { font-size: 2.5rem; display: block; margin-bottom: 0.5rem; }
        .ecosystem-card .title { font-weight: 700; font-size: 1rem; margin-bottom: 0.2rem; }
        .ecosystem-card .desc { font-size: 0.8rem; color: #6A6A8A; line-height: 1.3; }
        .ecosystem-card .badge {
            display: inline-block;
            background: rgba(212, 175, 55, 0.1);
            color: #D4AF37;
            padding: 0.2rem 0.8rem;
            border-radius: 20px;
            font-size: 0.6rem;
            font-weight: 700;
            margin-top: 0.5rem;
            border: 1px solid rgba(212, 175, 55, 0.1);
        }

        /* ===== PRICING ===== */
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            margin: 3rem 0;
        }
        .pricing-card {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 20px;
            padding: 2rem;
            text-align: center;
            transition: all 0.3s ease;
        }
        .pricing-card:hover {
            transform: translateY(-4px);
            border-color: rgba(212, 175, 55, 0.1);
        }
        .pricing-card.featured {
            border-color: #D4AF37;
            background: rgba(212, 175, 55, 0.04);
        }
        .pricing-card .plan {
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 0.3rem;
        }
        .pricing-card .price {
            font-size: 2.5rem;
            font-weight: 800;
            color: #D4AF37;
            margin: 0.5rem 0;
        }
        .pricing-card .price span {
            font-size: 1rem;
            font-weight: 400;
            color: #6A6A8A;
        }
        .pricing-card .features {
            list-style: none;
            padding: 0;
            margin: 1rem 0;
        }
        .pricing-card .features li {
            padding: 0.4rem 0;
            color: #C0C0D0;
            font-size: 0.9rem;
            border-bottom: 1px solid rgba(255,255,255,0.03);
        }
        .pricing-card .features li:last-child { border-bottom: none; }
        .pricing-card .btn-pricing {
            display: inline-block;
            padding: 0.7rem 2.5rem;
            border-radius: 50px;
            font-weight: 700;
            font-size: 0.9rem;
            background: linear-gradient(135deg, #D4AF37, #FBBF24);
            color: #0A0A0F;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }
        .pricing-card .btn-pricing:hover {
            transform: scale(1.03);
            box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
        }

        /* ===== TESTIMONIALS ===== */
        .testimonial-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            margin: 2rem 0;
        }
        .testimonial {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.04);
            border-radius: 16px;
            padding: 1.5rem;
        }
        .testimonial .stars { color: #D4AF37; font-size: 1.2rem; margin-bottom: 0.5rem; }
        .testimonial .text { color: #C0C0D0; font-size: 0.95rem; line-height: 1.6; margin-bottom: 0.8rem; }
        .testimonial .author { display: flex; align-items: center; gap: 0.8rem; }
        .testimonial .author .avatar {
            width: 40px; height: 40px; border-radius: 50%;
            background: #D4AF37; display: flex; align-items: center; justify-content: center;
            font-weight: 700; color: #0A0A0F;
        }
        .testimonial .author .info .name { font-weight: 600; font-size: 0.9rem; }
        .testimonial .author .info .company { color: #6A6A8A; font-size: 0.75rem; }

        /* ===== GLOBAL SECTORS ===== */
        .sector-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
            margin: 2rem 0;
        }
        .sector-card {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.04);
            border-radius: 16px;
            padding: 1.5rem;
            text-align: center;
            transition: all 0.3s ease;
        }
        .sector-card:hover {
            border-color: rgba(212, 175, 55, 0.1);
            transform: translateY(-4px);
        }
        .sector-card .icon { font-size: 2.5rem; display: block; margin-bottom: 0.5rem; }
        .sector-card .title { font-weight: 700; font-size: 1rem; }
        .sector-card .desc { font-size: 0.8rem; color: #6A6A8A; margin-top: 0.2rem; }

        /* ===== WHATSAPP ===== */
        .whatsapp-verify {
            background: rgba(37, 211, 102, 0.04);
            border: 1px solid rgba(37, 211, 102, 0.08);
            border-radius: 16px;
            padding: 1.5rem 2rem;
            margin: 2rem auto;
            max-width: 600px;
            text-align: center;
            transition: all 0.3s ease;
        }
        .whatsapp-verify:hover {
            background: rgba(37, 211, 102, 0.06);
            border-color: #25D366;
        }
        .whatsapp-verify .label {
            font-size: 0.7rem;
            text-transform: uppercase;
            color: #25D366;
            letter-spacing: 0.1em;
            display: block;
        }
        .whatsapp-verify a {
            color: #25D366;
            font-weight: 700;
            font-size: 1.1rem;
            text-decoration: none;
        }
        .whatsapp-verify a:hover { text-decoration: underline; }

        /* ===== FOOTER ===== */
        .footer {
            padding: 3rem 2rem;
            text-align: center;
            border-top: 1px solid rgba(255,255,255,0.04);
        }
        .footer .gold {
            color: #D4AF37;
            font-weight: 600;
            font-size: 1.1rem;
            letter-spacing: 0.08em;
        }
        .footer .sub {
            color: #4A4A6A;
            font-size: 0.8rem;
            margin-top: 0.5rem;
        }
        .footer .social {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin-top: 1rem;
        }
        .footer .social a {
            color: #4A4A6A;
            font-size: 0.9rem;
            transition: color 0.3s ease;
        }
        .footer .social a:hover { color: #D4AF37; }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 1024px) {
            .codes-grid { grid-template-columns: repeat(2, 1fr); }
            .pricing-grid { grid-template-columns: 1fr 1fr; }
            .ecosystem-grid { grid-template-columns: repeat(2, 1fr); }
            .sector-grid { grid-template-columns: repeat(2, 1fr); }
            .testimonial-grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 768px) {
            .hero h1 { font-size: 2.8rem; }
            .hero p { font-size: 1rem; }
            .main-nav { flex-direction: column; padding: 1rem; }
            .nav-links { gap: 0.8rem; justify-content: center; }
            .codes-grid { grid-template-columns: 1fr 1fr; }
            .pricing-grid { grid-template-columns: 1fr; }
            .ecosystem-grid { grid-template-columns: 1fr 1fr; }
            .sector-grid { grid-template-columns: 1fr 1fr; }
            .testimonial-grid { grid-template-columns: 1fr; }
            .industry-bar { border-radius: 20px; padding: 0.8rem; }
            .hero-stats { gap: 2rem; }
            .stat-number { font-size: 2rem; }
            .container { padding: 0 1rem; }
        }
        @media (max-width: 480px) {
            .hero h1 { font-size: 2.2rem; }
            .codes-grid { grid-template-columns: 1fr; }
            .ecosystem-grid { grid-template-columns: 1fr; }
            .sector-grid { grid-template-columns: 1fr; }
            .hero-actions { flex-direction: column; align-items: center; }
            .btn-primary, .btn-secondary { width: 100%; text-align: center; }
            .industry-bar span { font-size: 0.65rem; padding: 0.2rem 0.7rem; }
        }
    </style>
</head>
<body>

    <!-- ===== NAVIGATION ===== -->
    <nav class="main-nav">
        <div class="nav-logo">✦ ACE <span>| Global</span></div>
        <ul class="nav-links">
            <li><a href="/" class="active">Home</a></li>
            <li><a href="#codes">Codes</a></li>
            <li><a href="#ecosystem">Ecosystem</a></li>
            <li><a href="#pricing">Pricing</a></li>
            <li><a href="#sectors">Sectors</a></li>
            <li><a href="/portal.html" class="nav-cta">🔐 Portal</a></li>
        </ul>
    </nav>

    <!-- ===== HERO ===== -->
    <section class="hero">
        <span class="hero-badge">✦ Global Digital Identity Platform</span>
        <h1>
            Digital Identity for<br>
            <span class="highlight">Everyone</span> · <span class="highlight2">Everywhere</span>
        </h1>
        <p>One scan. Infinite connections. Your universal digital card for the modern world — from freelancers to governments.</p>

        <div class="industry-bar">
            <span class="gold">✦ 8 Codes</span>
            <span>🏗️ Infrastructure</span>
            <span>🏥 Healthcare</span>
            <span>🏦 Banking</span>
            <span>🏛️ Government</span>
            <span>🏢 Enterprise</span>
            <span>🎨 Creative</span>
        </div>

        <div class="hero-actions">
            <a href="#codes" class="btn-primary">Explore the Codes</a>
            <a href="/portal.html" class="btn-secondary">🔐 Client Portal</a>
        </div>

        <div class="hero-stats">
            <div class="stat-item">
                <div class="stat-number">21</div>
                <div class="stat-label">Active Codes</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">8</div>
                <div class="stat-label">Core Colors</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">∞</div>
                <div class="stat-label">Possibilities</div>
            </div>
            <div class="stat-item">
                <div class="stat-number" id="liveSectors">7</div>
                <div class="stat-label">Sectors Served</div>
            </div>
        </div>
    </section>

    <!-- ===== 8 CODES ===== -->
    <section id="codes" class="container" style="padding: 4rem 0;">
        <div class="section-header">
            <h2>The <span class="gold">8 Codes</span> System</h2>
            <p>Each code represents a unique identity, color, and purpose. Choose yours.</p>
        </div>
        <div class="codes-grid">
            <div class="code-card">
                <div class="color-dot" style="background: #D4AF37;"></div>
                <div class="code">E09E</div>
                <div class="name">Gold</div>
                <div class="desc">Premium leadership. For executives and visionaries.</div>
                <a href="/8codes/e09e-gold.html" class="btn-card">View Card →</a>
            </div>
            <div class="code-card">
                <div class="color-dot" style="background: #2563EB;"></div>
                <div class="code">3603</div>
                <div class="name">Blue</div>
                <div class="desc">Trust and structure. For corporate professionals.</div>
                <a href="/8codes/3603-blue.html" class="btn-card">View Card →</a>
            </div>
            <div class="code-card">
                <div class="color-dot" style="background: #1E3A5F;"></div>
                <div class="code">3903</div>
                <div class="name">Dark Blue</div>
                <div class="desc">Authority and security. For finance and law.</div>
                <a href="/8codes/3903-darkblue.html" class="btn-card">View Card →</a>
            </div>
            <div class="code-card">
                <div class="color-dot" style="background: #C0C0C0;"></div>
                <div class="code">MOON</div>
                <div class="name">Silver</div>
                <div class="desc">Innovation and clarity. For tech and creators.</div>
                <a href="/8codes/moon-silver.html" class="btn-card">View Card →</a>
            </div>
            <div class="code-card">
                <div class="color-dot" style="background: #FBBF24;"></div>
                <div class="code">SUN</div>
                <div class="name">Yellow</div>
                <div class="desc">Energy and creativity. For artists and dreamers.</div>
                <a href="/8codes/sun-yellow.html" class="btn-card">View Card →</a>
            </div>
            <div class="code-card">
                <div class="color-dot" style="background: #FFFFFF; border: 1px solid rgba(255,255,255,0.1);"></div>
                <div class="code">STAR</div>
                <div class="name">White</div>
                <div class="desc">Minimalist elegance. For luxury and purity.</div>
                <a href="/8codes/star-white.html" class="btn-card">View Card →</a>
            </div>
            <div class="code-card">
                <div class="color-dot" style="background: #7C3AED;"></div>
                <div class="code">N018</div>
                <div class="name">Purple</div>
                <div class="desc">Wisdom and spirituality. For healers and leaders.</div>
                <a href="/8codes/n018-purple.html" class="btn-card">View Card →</a>
            </div>
            <div class="code-card">
                <div class="color-dot" style="background: #0D9488;"></div>
                <div class="code">833</div>
                <div class="name">Teal</div>
                <div class="desc">Wellness and balance. For health and harmony.</div>
                <a href="/8codes/833-teal.html" class="btn-card">View Card →</a>
            </div>
        </div>
    </section>

    <!-- ===== ECOSYSTEM ===== -->
    <section id="ecosystem" class="container" style="padding: 4rem 0;">
        <div class="section-header">
            <h2>The <span class="gold">ACE</span> Ecosystem</h2>
            <p>Explore all the tools and features in the ACE platform.</p>
        </div>
        <div class="ecosystem-grid">
            <a href="/gallery.html" class="ecosystem-card">
                <span class="icon">🏛️</span>
                <div class="title">Card Gallery</div>
                <div class="desc">Browse all ACE cards</div>
                <span class="badge">✦ New</span>
            </a>
            <a href="/qr-generator.html" class="ecosystem-card">
                <span class="icon">📱</span>
                <div class="title">QR Generator</div>
                <div class="desc">Generate printable QR codes</div>
                <span class="badge">✦ New</span>
            </a>
            <a href="/testimonials.html" class="ecosystem-card">
                <span class="icon">⭐</span>
                <div class="title">Testimonials</div>
                <div class="desc">What our community says</div>
                <span class="badge">✦ New</span>
            </a>
            <a href="/portal.html" class="ecosystem-card">
                <span class="icon">🔐</span>
                <div class="title">Client Portal</div>
                <div class="desc">Manage your ACE card</div>
                <span class="badge">✦ Live</span>
            </a>
            <a href="/founder-card.html" class="ecosystem-card">
                <span class="icon">👑</span>
                <div class="title">Founder Card</div>
                <div class="desc">The executive ACE card</div>
                <span class="badge">✦ Premium</span>
            </a>
            <a href="/tomiwa-business.html" class="ecosystem-card">
                <span class="icon">🏢</span>
                <div class="title">Business Profile</div>
                <div class="desc">Showcase products & services</div>
                <span class="badge">✦ Business</span>
            </a>
            <a href="/card-template.html" class="ecosystem-card">
                <span class="icon">🃏</span>
                <div class="title">Card Template</div>
                <div class="desc">Master template for clients</div>
                <span class="badge">✦ Template</span>
            </a>
            <a href="/packages.html" class="ecosystem-card">
                <span class="icon">💰</span>
                <div class="title">Packages</div>
                <div class="desc">View all pricing plans</div>
                <span class="badge">✦ Pricing</span>
            </a>
        </div>
    </section>

    <!-- ===== GLOBAL SECTORS ===== -->
    <section id="sectors" class="container" style="padding: 4rem 0;">
        <div class="section-header">
            <h2>Serving <span class="gold">Global</span> Sectors</h2>
            <p>ACE is built for organizations of every size and industry.</p>
        </div>
        <div class="sector-grid">
            <div class="sector-card">
                <span class="icon">🏗️</span>
                <div class="title">Infrastructure</div>
                <div class="desc">Construction, engineering, and real estate</div>
            </div>
            <div class="sector-card">
                <span class="icon">🏥</span>
                <div class="title">Healthcare</div>
                <div class="desc">Hospitals, clinics, and wellness centers</div>
            </div>
            <div class="sector-card">
                <span class="icon">🏦</span>
                <div class="title">Banking & Finance</div>
                <div class="desc">Banks, insurance, and investment firms</div>
            </div>
            <div class="sector-card">
                <span class="icon">🏛️</span>
                <div class="title">Government</div>
                <div class="desc">Public sector, agencies, and ministries</div>
            </div>
            <div class="sector-card">
                <span class="icon">🏢</span>
                <div class="title">Corporate</div>
                <div class="desc">Enterprises, SMEs, and startups</div>
            </div>
            <div class="sector-card">
                <span class="icon">🎨</span>
                <div class="title">Creative & Digital</div>
                <div class="desc">Agencies, media, and content creators</div>
            </div>
            <div class="sector-card">
                <span class="icon">📚</span>
                <div class="title">Education</div>
                <div class="desc">Schools, universities, and training centers</div>
            </div>
            <div class="sector-card">
                <span class="icon">🌍</span>
                <div class="title">Non-Profit</div>
                <div class="desc">NGOs, charities, and social impact</div>
            </div>
        </div>
    </section>

    <!-- ===== TESTIMONIALS ===== -->
    <section class="container" style="padding: 4rem 0;">
        <div class="section-header">
            <h2>What Our <span class="gold">Community</span> Says</h2>
            <p>Real feedback from real users across the globe.</p>
        </div>
        <div class="testimonial-grid">
            <div class="testimonial">
                <div class="stars">★★★★★</div>
                <div class="text">"ACE gave my construction business a professional digital presence in minutes. Clients can scan my QR code and instantly have all my contact info. Game-changer for infrastructure!"</div>
                <div class="author">
                    <div class="avatar">TE</div>
                    <div class="info">
                        <div class="name">Tomiwa Enterprises</div>
                        <div class="company">Building & Property</div>
                    </div>
                </div>
            </div>

            <div class="testimonial">
                <div class="stars">★★★★★</div>
                <div class="text">"As a healthcare provider, having a digital card has made patient networking so much easier. The QR code makes it simple for referrals to reach me instantly."</div>
                <div class="author">
                    <div class="avatar" style="background: #0D9488;">HA</div>
                    <div class="info">
                        <div class="name">Dr. Health Alliance</div>
                        <div class="company">Medical Network</div>
                    </div>
                </div>
            </div>

            <div class="testimonial">
                <div class="stars">★★★★★</div>
                <div class="text">"We deployed ACE across our bank's executive team. The premium design and instant connectivity have transformed how we network with clients and partners."</div>
                <div class="author">
                    <div class="avatar" style="background: #1E3A5F; color: #FFF;">BF</div>
                    <div class="info">
                        <div class="name">Bank of Finance</div>
                        <div class="company">Corporate Banking</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== PRICING ===== -->
    <section id="pricing" class="container" style="padding: 4rem 0;">
        <div class="section-header">
            <h2>Simple, <span class="gold">Transparent</span> Pricing</h2>
            <p>Choose the plan that fits your organization.</p>
        </div>
        <div class="pricing-grid">
            <div class="pricing-card">
                <div class="plan">Digital</div>
                <div class="price">₦10,000</div>
                <ul class="features">
                    <li>✅ QR Code</li>
                    <li>✅ Landing Page</li>
                    <li>✅ Clickable Contacts</li>
                </ul>
                <a href="/portal.html" class="btn-pricing">Get Started</a>
            </div>
            <div class="pricing-card featured">
                <div class="plan">Premium</div>
                <div class="price">₦25,000</div>
                <ul class="features">
                    <li>✅ QR Code</li>
                    <li>✅ Landing Page</li>
                    <li>✅ Premium PVC Card</li>
                    <li>✅ Priority Support</li>
                </ul>
                <a href="/portal.html" class="btn-pricing">Get Started</a>
            </div>
            <div class="pricing-card">
                <div class="plan">Elite</div>
                <div class="price">₦40,000</div>
                <ul class="features">
                    <li>✅ QR Code</li>
                    <li>✅ Landing Page</li>
                    <li>✅ PVC Card</li>
                    <li>✅ Passport Photo</li>
                    <li>✅ 8 Codes</li>
                    <li>✅ Analytics</li>
                </ul>
                <a href="/portal.html" class="btn-pricing">Get Started</a>
            </div>
        </div>
    </section>

    <!-- ===== WHATSAPP ===== -->
    <div class="container">
        <div class="whatsapp-verify">
            <span class="label">🔐 Verify Identity</span>
            <a href="https://wa.me/2348106207182?text=Hello%20Jubril%2C%20I%20just%20scanned%20your%20ACE%20Smart%20Card.">
                Tap to Verify on WhatsApp
            </a>
        </div>
    </div>

    <!-- ===== FOOTER ===== -->
    <footer class="footer">
        <div class="gold">✦ Eight Codes. Infinite Possibilities. ✦</div>
        <div class="sub">ALL-CODES ENTERPRISE — Digital Identity for Everyone, Everywhere</div>
        <div class="social">
            <a href="https://linkedin.com/company/all-codes-enterprise" target="_blank">LinkedIn</a>
            <a href="https://twitter.com/allcodesenter" target="_blank">Twitter</a>
            <a href="https://instagram.com/allcodesenterprise" target="_blank">Instagram</a>
            <a href="https://github.com/all-codes-enterprise" target="_blank">GitHub</a>
        </div>
    </footer>

    <!-- ============================================================ -->
    <!-- PWA INSTALLATION PROMPT & SERVICE WORKER -->
    <!-- ============================================================ -->
    <script>
        // ================================================================
        // Live counter animation
        // ================================================================
        let count = 7;
        setInterval(() => {
            count += Math.floor(Math.random() * 2) + 1;
            document.getElementById('liveSectors').textContent = count;
        }, 4000);

        // ================================================================
        // PWA Installation Prompt
        // ================================================================
        let deferredPrompt;

        window.addEventListener('beforeinstallprompt', function(e) {
            e.preventDefault();
            deferredPrompt = e;
            showInstallBanner();
        });

        function showInstallBanner() {
            if (localStorage.getItem('ace_dismiss_install') === 'true') return;
            if (window.matchMedia('(display-mode: standalone)').matches) return;

            const banner = document.createElement('div');
            banner.id = 'installBanner';
            banner.style.cssText = `
                position: fixed;
                bottom: 20px;
                left: 20px;
                right: 20px;
                background: #1A1A2E;
                border: 1px solid #D4AF37;
                border-radius: 16px;
                padding: 16px 20px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                z-index: 9999;
                max-width: 500px;
                margin: 0 auto;
                box-shadow: 0 20px 60px rgba(0,0,0,0.5);
                animation: slideUp 0.5s ease;
            `;
            banner.innerHTML = `
                <div style="display: flex; align-items: center; gap: 12px;">
                    <span style="font-size: 2rem;">📱</span>
                    <div>
                        <div style="font-weight: 700; font-size: 0.9rem; color: #FFF;">Install ACE App</div>
                        <div style="color: #6A6A8A; font-size: 0.8rem;">Get offline access</div>
                    </div>
                </div>
                <div style="display: flex; gap: 8px;">
                    <button onclick="installApp()" style="background: linear-gradient(135deg, #D4AF37, #FBBF24); color: #0A0A0F; border: none; padding: 8px 20px; border-radius: 30px; font-weight: 700; cursor: pointer;">
                        Install
                    </button>
                    <button onclick="dismissInstall()" style="background: transparent; color: #6A6A8A; border: none; padding: 8px 12px; cursor: pointer; font-size: 1.2rem;">
                        ✕
                    </button>
                </div>
            `;
            document.body.appendChild(banner);
        }

        function installApp() {
            if (deferredPrompt) {
                deferredPrompt.prompt();
                deferredPrompt.userChoice.then(function(choiceResult) {
                    if (choiceResult.outcome === 'accepted') {
                        alert('✅ ACE installed! Check your home screen.');
                    }
                    deferredPrompt = null;
                    document.getElementById('installBanner')?.remove();
                });
            }
        }

        function dismissInstall() {
            document.getElementById('installBanner')?.remove();
            localStorage.setItem('ace_dismiss_install', 'true');
        }

        // ================================================================
        // Register Service Worker
        // ================================================================
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', function() {
                navigator.serviceWorker.register('/service-worker.js')
                    .then(function(registration) {
                        console.log('ACE: Service Worker registered ✅');
                    })
                    .catch(function(err) {
                        console.log('ACE: Service Worker registration failed ❌', err);
                    });
            });
        }

        if (window.matchMedia('(display-mode: standalone)').matches) {
            console.log('ACE: App is installed ✅');
        }
    </script>

    <style>
        @keyframes slideUp {
            from { transform: translateY(100px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
    </style>
    <!-- ============================================================ -->

</body>
</html>