<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personalized Eye Glasses | Custom 3D Eyewear by iAyez</title>
    <meta name="description" content="Discover iAyez — your destination for personalized eyeglasses and custom-made eyewear crafted with 3D printing for style, comfort, and eco-friendly design.">
    <meta name="keywords" content="personalized eye glasses, customized eye glasses, custom made eyeglasses, custom eyewear, personalized eyewear">
    
    <!-- Open Graph -->
    <meta property="og:title" content="Personalized Eye Glasses | Custom 3D Eyewear by iAyez">
    <meta property="og:description" content="Discover iAyez — your destination for personalized eyeglasses and custom-made eyewear crafted with 3D printing for style, comfort, and eco-friendly design.">
    <meta property="og:image" content="https://iayez.com/images/og-image.jpg">
    
    <!-- Schema.org -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Organization",
        "name": "iAyez",
        "url": "https://iayez.com",
        "logo": "https://i.ibb.co/ZRWxkWpn/logo168751753858.png",
        "description": "Custom 3D printed eyewear using AI face scanning and PA12 nylon",
        "foundingDate": "2023",
        "contactPoint": {
            "@type": "ContactPoint",
            "telephone": "+1-323-759-3721",
            "contactType": "customer service",
            "email": "support@iayez.com"
        }
    }
    </script>
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary-blue: #4A90E2;
            --secondary-blue: #5AB9EA;
            --accent-green: #7ED321;
            --light-gray: #F8F9FA;
            --dark-gray: #2C3E50;
            --text-gray: #555;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            line-height: 1.6;
            color: var(--text-gray);
            overflow-x: hidden;
        }

        /* Header */
        header {
            position: fixed;
            top: 0;
            width: 100%;
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 20px rgba(0,0,0,0.05);
            z-index: 1000;
            transition: all 0.3s ease;
        }

        nav {
            max-width: 1400px;
            margin: 0 auto;
            padding: 1rem 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo-container {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .logo-img {
            height: 50px;
            width: auto;
        }

        .nav-menu {
            display: flex;
            gap: 2.5rem;
            align-items: center;
            list-style: none;
        }

        .nav-menu a {
            text-decoration: none;
            color: var(--dark-gray);
            font-weight: 500;
            font-size: 0.95rem;
            transition: color 0.3s;
            position: relative;
        }

        .nav-menu a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--primary-blue);
            transition: width 0.3s;
        }

        .nav-menu a:hover {
            color: var(--primary-blue);
        }

        .nav-menu a:hover::after {
            width: 100%;
        }

        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 1.8rem;
            cursor: pointer;
            color: var(--dark-gray);
        }

        /* Hero Section */
        .hero {
            margin-top: 80px;
            min-height: 90vh;
            background: linear-gradient(135deg, #E3F2FD 0%, #F1F8E9 100%);
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding: 4rem 5%;
        }

        .hero-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .gradient-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 50%, rgba(74, 144, 226, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(126, 211, 33, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 40% 20%, rgba(90, 185, 234, 0.12) 0%, transparent 50%);
            animation: gradientShift 20s ease infinite;
        }

        @keyframes gradientShift {
            0%, 100% { transform: translate(0, 0); opacity: 1; }
            25% { transform: translate(30px, -30px); opacity: 0.8; }
            50% { transform: translate(-30px, 30px); opacity: 1; }
            75% { transform: translate(30px, 30px); opacity: 0.9; }
        }

        .particles {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .particle {
            position: absolute;
            background: linear-gradient(135deg, rgba(74, 144, 226, 0.2), rgba(126, 211, 33, 0.2));
            border-radius: 50%;
            filter: blur(60px);
            animation: float-particle 25s infinite ease-in-out;
        }

        .particle:nth-child(1) { width: 400px; height: 400px; left: -10%; top: 20%; animation-delay: 0s; }
        .particle:nth-child(2) { width: 300px; height: 300px; right: -5%; top: 40%; animation-delay: 5s; }
        .particle:nth-child(3) { width: 350px; height: 350px; left: 30%; bottom: -10%; animation-delay: 10s; }

        @keyframes float-particle {
            0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
            33% { transform: translate(50px, -50px) scale(1.1); opacity: 0.8; }
            66% { transform: translate(-50px, 50px) scale(0.9); opacity: 0.7; }
        }

        .hero-container {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .hero-content h1 {
            font-size: 3.5rem;
            color: var(--dark-gray);
            margin-bottom: 1.5rem;
            line-height: 1.2;
            font-weight: 800;
            background: linear-gradient(135deg, #4A90E2 0%, #2C3E50 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-content p {
            font-size: 1.3rem;
            color: var(--text-gray);
            margin-bottom: 2.5rem;
            line-height: 1.8;
        }

        .app-download-buttons {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            margin-bottom: 2rem;
        }

        .app-store-btn {
            display: inline-flex;
            align-items: center;
            text-decoration: none;
            transition: all 0.3s;
        }

        .app-store-btn:hover {
            transform: translateY(-3px);
            opacity: 0.9;
        }

        .app-store-btn img {
            transition: all 0.3s;
        }

        .cta-button {
            display: inline-block;
            padding: 1.2rem 3rem;
            background: var(--accent-green);
            color: white;
            text-decoration: none;
            border-radius: 50px;
            font-weight: 700;
            font-size: 1.1rem;
            transition: all 0.3s;
            box-shadow: 0 5px 20px rgba(126, 211, 33, 0.3);
        }

        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(126, 211, 33, 0.4);
        }

        .hero-mockup {
            position: relative;
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }

        .mockup-placeholder {
            width: 100%;
            max-width: 500px;
            aspect-ratio: 1;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border-radius: 30px;
            border: 1px solid rgba(74, 144, 226, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 8rem;
            box-shadow: 
                0 20px 60px rgba(74, 144, 226, 0.15),
                0 0 0 1px rgba(255, 255, 255, 0.8) inset;
            position: relative;
            overflow: hidden;
        }

        .mockup-placeholder::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                45deg,
                transparent 30%,
                rgba(74, 144, 226, 0.05) 50%,
                transparent 70%
            );
            animation: shimmer 3s infinite;
        }

        @keyframes shimmer {
            0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
            100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
        }

        .mockup-placeholder span {
            position: relative;
            z-index: 1;
            filter: drop-shadow(0 4px 8px rgba(74, 144, 226, 0.2));
        }

        .hero-promo {
            background: rgba(255, 255, 255, 0.9);
            padding: 1rem 1.5rem;
            border-radius: 10px;
            display: inline-block;
            margin-top: 1rem;
            font-weight: 600;
            color: var(--primary-blue);
        }

        /* Trust Signals */
        .trust-signals {
            background: white;
            padding: 2rem 5%;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .trust-grid {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            text-align: center;
        }

        .trust-item {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-weight: 500;
        }

        .trust-icon {
            color: var(--accent-green);
            font-size: 1.3rem;
        }

        /* Section Styles */
        .section {
            padding: 6rem 5%;
        }

        .section-title {
            text-align: center;
            font-size: 2.8rem;
            color: var(--dark-gray);
            margin-bottom: 1rem;
            font-weight: 700;
        }

        .section-subtitle {
            text-align: center;
            font-size: 1.2rem;
            color: var(--text-gray);
            margin-bottom: 4rem;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Features Grid */
        .feature-grid {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2.5rem;
        }

        .feature-card {
            background: white;
            padding: 2.5rem;
            border-radius: 20px;
            text-align: center;
            transition: all 0.3s;
            border: 1px solid rgba(74, 144, 226, 0.1);
        }

        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(74, 144, 226, 0.15);
        }

        .feature-icon {
            font-size: 3.5rem;
            margin-bottom: 1.5rem;
        }

        .feature-card h3 {
            font-size: 1.5rem;
            color: var(--dark-gray);
            margin-bottom: 1rem;
        }

        .feature-card p {
            color: var(--text-gray);
            line-height: 1.8;
        }

        /* Comparison Table */
        .comparison-table {
            max-width: 1200px;
            margin: 3rem auto;
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 30px rgba(0,0,0,0.1);
        }

        .comparison-table table {
            width: 100%;
            border-collapse: collapse;
        }

        .comparison-table th {
            background: var(--primary-blue);
            color: white;
            padding: 1.2rem;
            text-align: left;
            font-weight: 600;
        }

        .comparison-table td {
            padding: 1.2rem;
            border-bottom: 1px solid #eee;
        }

        .comparison-table .highlight {
            background: rgba(74, 144, 226, 0.05);
            font-weight: 600;
            color: var(--primary-blue);
        }

        /* Steps Container */
        .steps-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 3rem;
        }

        .step {
            text-align: center;
            position: relative;
        }

        .step-number {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            font-weight: 700;
            margin: 0 auto 1.5rem;
            box-shadow: 0 10px 30px rgba(74, 144, 226, 0.3);
        }

        .step h3 {
            font-size: 1.4rem;
            color: var(--dark-gray);
            margin-bottom: 1rem;
        }

        .step p {
            color: var(--text-gray);
            line-height: 1.8;
        }

        /* Testimonials */
        .testimonials-grid {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .testimonial-card {
            background: white;
            padding: 2rem;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.08);
        }

        .stars {
            color: #ffc107;
            margin-bottom: 1rem;
            font-size: 1.2rem;
        }

        .testimonial-text {
            color: var(--text-gray);
            margin-bottom: 1.5rem;
            line-height: 1.8;
        }

        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .author-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--light-gray);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }

        /* Footer */
        footer {
            background: var(--dark-gray);
            color: white;
            padding: 4rem 5% 2rem;
        }

        .footer-content {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 3rem;
            margin-bottom: 3rem;
        }

        .footer-section h3 {
            margin-bottom: 1.5rem;
            font-size: 1.3rem;
        }

        .footer-section ul {
            list-style: none;
        }

        .footer-section ul li {
            margin-bottom: 0.8rem;
        }

        .footer-section a {
            color: rgba(255,255,255,0.8);
            text-decoration: none;
            transition: color 0.3s;
        }

        .footer-section a:hover {
            color: var(--accent-green);
        }

        .social-links {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .social-links a {
            width: 40px;
            height: 40px;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            transition: all 0.3s;
        }

        .social-links a:hover {
            background: var(--primary-blue);
            transform: translateY(-3px);
        }

        .footer-bottom {
            max-width: 1400px;
            margin: 0 auto;
            padding-top: 2rem;
            border-top: 1px solid rgba(255,255,255,0.1);
            text-align: center;
            color: rgba(255,255,255,0.6);
        }

        /* Responsive */
        @media (max-width: 968px) {
            .nav-menu {
                position: fixed;
                left: -100%;
                top: 80px;
                flex-direction: column;
                background: white;
                width: 100%;
                text-align: center;
                transition: 0.3s;
                box-shadow: 0 10px 27px rgba(0,0,0,0.05);
                padding: 2rem 0;
                gap: 1.5rem;
            }

            .nav-menu.active {
            left: 0;
            }

            .mobile-menu-btn {
                display: block;
            }

            .hero-container {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .hero-content h1 {
                font-size: 2.5rem;
            }

            .mockup-placeholder {
                margin: 0 auto;
            }

            .app-download-buttons {
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header>
    <nav>
            <div class="logo-container">
                <img src="https://i.ibb.co/ZRWxkWpn/logo168751753858.png" alt="iAyez Logo" class="logo-img">
        </div>
            <ul class="nav-menu" id="navMenu">
                <li><a href="/">Home</a></li>
                <li><a href="/technology">Our Technology</a></li>
                <li><a href="#products">Custom Glasses</a></li>
                <li><a href="/how-it-works">How It Works</a></li>
                <li><a href="/app">Get App</a></li>
                <li><a href="#contact">Contact</a></li>
                <li><a href="#about">About Us</a></li>
            </ul>
            <button class="mobile-menu-btn" onclick="toggleMenu()">☰</button>
    </nav>
    </header>

    <!-- Hero Section -->
    <section class="hero" id="home">
        <div class="hero-bg">
            <div class="gradient-bg"></div>
            <div class="particles">
                <div class="particle"></div>
                <div class="particle"></div>
                <div class="particle"></div>
            </div>
        </div>
        
        <div class="hero-container">
        <div class="hero-content">
                <h1>Glasses That Actually Fit Your Face (Finally! 🙌)</h1>
                <p>Stop compromising with mass-produced frames. We scan your face with AI, 3D print PA12 nylon glasses custom to YOU, and ship them in 7-10 days. Add your name, a message, or keep it clean—your choice. Lightweight, earth-friendly (50% recycled powder!), and actually comfortable. Your face deserves better than one-size-fits-most.</p>
                
                <div class="app-download-buttons">
                    <a href="#" class="app-store-btn">
                        <img src="https://i.ibb.co/F4X94zFM/Download-on-the-App-Store-Badge-svg-1.png" alt="Download on the App Store" style="height: 60px; width: auto;">
                    </a>
                    <a href="#" class="app-store-btn">
                        <img src="https://i.ibb.co/cKz72GGd/Google-Play-Store-Button-1.png" alt="Get it on Google Play" style="height: 60px; width: auto;">
                    </a>
                </div>

                <a href="#how-it-works" class="cta-button">Get Started</a>
                
                <div class="hero-promo">
                    🔥 Launch Offer: Save 40% on Your First Pair
                </div>
            </div>

            <div class="hero-mockup">
                <div class="mockup-placeholder">
                    <video autoplay loop muted playsinline style="width: 100%; height: 100%; object-fit: cover; border-radius: 30px;">
                        <source src="https://khanna-media-bucket.s3.us-east-1.amazonaws.com/VIDEO-2025-10-14-16-33-46.mp4" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                </div>
            </div>
        </div>
    </section>

    <!-- Trust Signals -->
    <section class="trust-signals">
        <div class="trust-grid">
            <div class="trust-item">
                <span class="trust-icon">✓</span>
                <span>30 Years Expertise</span>
            </div>
            <div class="trust-item">
                <span class="trust-icon">✓</span>
                <span>10,000+ Perfect Fits</span>
            </div>
            <div class="trust-item">
                <span class="trust-icon">✓</span>
                <span>Zero Fit Returns</span>
            </div>
            <div class="trust-item">
                <span class="trust-icon">✓</span>
                <span>FSA/HSA Accepted</span>
            </div>
            <div class="trust-item">
                <span class="trust-icon">✓</span>
                <span>7-10 Day Delivery</span>
            </div>
            <div class="trust-item">
                <span class="trust-icon">✓</span>
                <span>100% Satisfaction</span>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="section" id="technology" style="background: var(--light-gray);">
        <h2 class="section-title">Our Technology</h2>
        <p class="section-subtitle">Advanced features that make your eyewear experience exceptional</p>
        
        <div class="feature-grid">
            <div class="feature-card">
                <div class="feature-icon">📸</div>
                <h3>AI Face Scanning</h3>
                <p>30,000 data points capture every unique contour of your face for the perfect fit. Takes just 30 seconds with your phone.</p>
            </div>

            <div class="feature-card">
                <div class="feature-icon">🏗️</div>
                <h3>PA12 3D Printing</h3>
                <p>State-of-the-art SLS 3D printing with aerospace-grade PA12 nylon. 70% lighter than traditional frames, titanium-strength durability.</p>
            </div>

            <div class="feature-card">
                <div class="feature-icon">🌱</div>
                <h3>Earth-Friendly</h3>
                <p>50% recycled powder in every frame. Zero-waste manufacturing. Sustainable from scan to delivery.</p>
            </div>

            <div class="feature-card">
                <div class="feature-icon">🎨</div>
                <h3>Personalization</h3>
                <p>Stencil or emboss your name, a message, or custom text on the temple. Choose from unlimited colors and patterns.</p>
            </div>

            <div class="feature-card">
                <div class="feature-icon">🔬</div>
                <h3>Advanced Lens Tech</h3>
                <p>High-quality optical lenses with anti-glare, UV protection, and blue light filtering included.</p>
            </div>

            <div class="feature-card">
                <div class="feature-icon">🔒</div>
                <h3>Secure & Private</h3>
                <p>Military-grade encryption ensures your prescription data and facial measurements stay completely secure.</p>
            </div>
        </div>
    </section>

    <!-- How It Works -->
    <section class="section" id="how-it-works" style="background: white;">
        <h2 class="section-title">How It Works</h2>
        <p class="section-subtitle">Get your perfect frames in four simple steps</p>
        
        <div class="steps-container">
            <div class="step">
                <div class="step-number">1</div>
                <h3>📱 Scan Your Face</h3>
                <p>Use our app's AI-powered scanner to capture your facial measurements in seconds. Our technology maps 30,000 unique data points.</p>
            </div>

            <div class="step">
                <div class="step-number">2</div>
                <h3>🎨 Customize Style</h3>
                <p>Choose frame style, colors, and add personalization like your name or a message. See instant 3D preview on your face.</p>
            </div>

            <div class="step">
                <div class="step-number">3</div>
                <h3>🖨️ We 3D Print</h3>
                <p>We 3D print your frames using precision PA12 nylon manufacturing. Sustainable, lightweight, perfectly fitted to you.</p>
            </div>

            <div class="step">
                <div class="step-number">4</div>
                <h3>📦 Receive & Enjoy</h3>
                <p>Receive your custom eyewear in 7-10 days and experience unmatched comfort. Perfect fit guaranteed.</p>
            </div>
        </div>
    </section>

    <!-- Comparison Table -->
    <section class="section" id="products" style="background: var(--light-gray);">
        <h2 class="section-title">Why Choose iAyez?</h2>
        <p class="section-subtitle">See how custom-fit beats one-size-fits-all</p>
        
        <div class="comparison-table">
            <table>
                <thead>
                    <tr>
                        <th>Feature</th>
                        <th class="highlight">iAyez</th>
                        <th>Warby Parker</th>
                        <th>Zenni</th>
                        <th>LensCrafters</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><strong>Custom Fit</strong></td>
                        <td class="highlight">✅ AI-designed for YOU</td>
                        <td>❌ Standard sizes</td>
                        <td>❌ Standard sizes</td>
                        <td>❌ Standard sizes</td>
                    </tr>
                    <tr>
                        <td><strong>Production</strong></td>
                        <td class="highlight">3D Printed On-Demand</td>
                        <td>Mass produced</td>
                        <td>Mass produced</td>
                        <td>Mass produced</td>
                    </tr>
                    <tr>
                        <td><strong>Personalization</strong></td>
                        <td class="highlight">✅ Name/message embossing</td>
                        <td>❌ None</td>
                        <td>❌ None</td>
                        <td>❌ None</td>
                    </tr>
                    <tr>
                        <td><strong>Sustainability</strong></td>
                        <td class="highlight">50% recycled, zero waste</td>
                        <td>Standard manufacturing</td>
                        <td>Standard manufacturing</td>
                        <td>Standard manufacturing</td>
                    </tr>
                    <tr>
                        <td><strong>Delivery</strong></td>
                        <td class="highlight">7-10 days</td>
                        <td>5-7 business days</td>
                        <td>7-14 days</td>
                        <td>1 hour (limited)</td>
                    </tr>
                    <tr>
                        <td><strong>Price</strong></td>
                        <td class="highlight">$295</td>
                        <td>$95-145</td>
                        <td>$6.95-50</td>
                        <td>$100-400+</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>

    <!-- Testimonials -->
    <section class="section" style="background: white;">
        <h2 class="section-title">Join 100+ Happy Customers</h2>
        <p class="section-subtitle">Real people, real results</p>
        
        <div class="testimonials-grid">
            <div class="testimonial-card">
                <div class="stars">⭐⭐⭐⭐⭐</div>
                <p class="testimonial-text">"After 20 years of wearing glasses, these are the first that don't leave marks on my nose. The face scanning was simple and the fit is absolutely perfect."</p>
                <div class="testimonial-author">
                    <div class="author-avatar">👩</div>
                    <div>
                        <strong>Sarah J.</strong><br>
                        <small>Verified Purchase</small>
                    </div>
                </div>
            </div>

            <div class="testimonial-card">
                <div class="stars">⭐⭐⭐⭐⭐</div>
                <p class="testimonial-text">"The 3D printing quality is incredible. They're lighter than my old frames but feel much more durable. Plus I love having my name embossed on them!"</p>
                <div class="testimonial-author">
                    <div class="author-avatar">👨</div>
                    <div>
                        <strong>David K.</strong><br>
                        <small>Verified Purchase</small>
                    </div>
                </div>
    </div>

            <div class="testimonial-card">
                <div class="stars">⭐⭐⭐⭐⭐</div>
                <p class="testimonial-text">"I was skeptical about ordering glasses online, but the AI fitting was more accurate than any in-store experience. Delivered in 8 days as promised!"</p>
                <div class="testimonial-author">
                    <div class="author-avatar">👩</div>
                    <div>
                        <strong>Maria L.</strong><br>
                        <small>Verified Purchase</small>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Final CTA -->
    <section class="section" id="app" style="background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue)); color: white; text-align: center;">
        <h2 style="font-size: 3rem; margin-bottom: 1.5rem; color: white;">Ready for Glasses That Actually Fit?</h2>
        <p style="font-size: 1.3rem; margin-bottom: 3rem; opacity: 0.95;">Join thousands who've discovered the perfect fit difference</p>
        
        <div style="background: rgba(255,255,255,0.15); padding: 3rem; border-radius: 20px; max-width: 700px; margin: 0 auto; backdrop-filter: blur(10px);">
            <h3 style="margin-bottom: 1.5rem; font-size: 2rem;">🎉 Limited Launch Offer</h3>
            <p style="font-size: 2rem; font-weight: bold; margin-bottom: 1rem;">Save 40% on Your First Pair</p>
            <p style="margin-bottom: 2rem; font-size: 1.2rem;">Use code: PERFECTFIT40</p>
            <a href="#" class="cta-button" style="background: white; color: var(--primary-blue); font-size: 1.3rem; padding: 1.2rem 3rem;">Download App & Start Scanning →</a>
        </div>
        
        <p style="margin-top: 2rem; opacity: 0.9;">No credit card required • 30-day guarantee • FSA/HSA accepted</p>
    </section>

    <!-- Footer -->
    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h3>iAyez</h3>
                <p>Revolutionizing eyewear with AI-powered customization and 3D printing technology. 30 years of innovation.</p>
            </div>

            <div class="footer-section">
                <h3>Products</h3>
                <ul>
                    <li><a href="#technology">Our Technology</a></li>
                    <li><a href="#products">Custom Glasses</a></li>
                    <li><a href="#how-it-works">How It Works</a></li>
                    <li><a href="#app">Get App</a></li>
                </ul>
            </div>

            <div class="footer-section">
                <h3>Support</h3>
                <ul>
                    <li><a href="#faq">FAQ</a></li>
                    <li><a href="#contact">Contact Us</a></li>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#blog">Blog</a></li>
                </ul>
            </div>

            <div class="footer-section">
                <h3>Legal</h3>
                <ul>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Terms of Service</a></li>
                    <li><a href="#">Refund Policy</a></li>
                    <li><a href="#">Shipping Info</a></li>
                </ul>
            </div>
        </div>

        <div class="footer-bottom">
            <p>&copy; 2025 iAyez. All rights reserved. | Designed with care for your vision.</p>
            <p style="margin-top: 0.5rem;">📞 323-759-3721 | 📧 support@iayez.com</p>
        </div>
    </footer>

    <script>
        function toggleMenu() {
            const navMenu = document.getElementById('navMenu');
            navMenu.classList.toggle('active');
        }

        // Smooth scrolling
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                const href = this.getAttribute('href');
                if (href !== '#') {
                e.preventDefault();
                const target = document.querySelector(href);
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                        document.getElementById('navMenu').classList.remove('active');
                    }
                }
            });
        });

        // Header shadow on scroll
        window.addEventListener('scroll', () => {
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.style.boxShadow = '0 2px 30px rgba(0,0,0,0.1)';
            } else {
                header.style.boxShadow = '0 2px 20px rgba(0,0,0,0.05)';
            }
        });
    </script>
</body>
</html>