<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Okularity - Own Your Image</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollToPlugin.min.js"></script>

    <style>
        /* --- CSS Styles --- */

        /* Reset and Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* --- THEME VARIABLES --- */
        :root {
            /* Color Palette */
            --okularity-blue: #3b82f6;
            --okularity-dark-blue: #1e40af;
            --okularity-purple: #8b5cf6;
            --okularity-green: #10b981;
            --accent-orange: #f59e0b;
            --accent-gold: #d4af37;
            --white: #ffffff;
            --gray-100: #f8f9fa;
            --gray-200: #e9ecef;
            --gray-300: #dee2e6;
            --gray-400: #ced4da;
            --gray-500: #adb5bd;
            --gray-600: #6c757d;
            --gray-700: #495057;
            --gray-800: #343a40;
            --gray-900: #212529;
            --black: #000000;

            /* Dark Theme (Default) */
            --bg-primary: #0f0f0f;
            --bg-secondary: #1a1a1a;
            --bg-card: #1e1e1e;
            --bg-card-highlight: #282828;
            --bg-hero-gradient-start: rgba(59, 130, 246, 0.1);
            --bg-hero-gradient-end: rgba(15, 15, 15, 0.9);
            --text-primary: var(--gray-100);
            --text-secondary: var(--gray-400);
            --text-heading: var(--white);
            --text-hero: var(--white);
            --text-link: var(--okularity-blue);
            --text-link-hover: var(--okularity-purple);
            --border-color: var(--gray-700);
            --divider-color: #444;
            --shadow-color: rgba(0, 0, 0, 0.5);
            --card-shadow-color: rgba(0, 0, 0, 0.3);
            --card-hover-shadow-color: rgba(59, 130, 246, 0.2);
            --parallax-opacity: 0.08;
            --nav-menu-bg: rgba(15, 15, 15, 0.95);
            --header-scrolled-bg: rgba(15, 15, 15, 0.98);
            --accent-1: var(--okularity-blue);
            --accent-2: var(--accent-gold);
            --accent-3: var(--okularity-purple);
            --hero-text-shadow: 0 3px 15px rgba(0, 0, 0, 0.5);

            /* Transitions */
            --transition-slow: 0.5s cubic-bezier(0.23, 1, 0.32, 1);
            --transition-medium: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
            --transition-fast: 0.2s cubic-bezier(0.23, 1, 0.32, 1);
        }

        body.light-theme {
            /* Light Theme Overrides */
            --bg-primary: var(--gray-100);
            --bg-secondary: var(--white);
            --bg-card: var(--white);
            --bg-card-highlight: var(--gray-100);
            --bg-hero-gradient-start: rgba(200, 220, 255, 0.85);
            --bg-hero-gradient-end: rgba(240, 240, 240, 0.85);
            --text-primary: var(--gray-900);
            --text-secondary: var(--gray-700);
            --text-heading: var(--gray-900);
            --text-hero: var(--gray-900);
            --text-link: var(--okularity-blue);
            --text-link-hover: var(--okularity-blue);
            --border-color: var(--gray-300);
            --divider-color: var(--gray-300);
            --shadow-color: rgba(0, 0, 0, 0.15);
            --card-shadow-color: rgba(0, 0, 0, 0.1);
            --card-hover-shadow-color: rgba(59, 130, 246, 0.15);
            --parallax-opacity: 0.1;
            --nav-menu-bg: rgba(255, 255, 255, 0.95);
            --header-scrolled-bg: rgba(255, 255, 255, 0.98);
            --accent-1: var(--okularity-blue);
            --accent-2: var(--accent-gold);
            --accent-3: var(--okularity-blue);
            --hero-text-shadow: none;
        }

        html {
            scroll-behavior: smooth;
        }



        body {
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
            background-color: var(--bg-primary);
            color: var(--text-primary);
            overflow-x: hidden;
            transition: background-color var(--transition-medium), color var(--transition-medium);
            position: relative;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--text-heading);
        }

        p {
            margin-bottom: 1.5rem;
            font-size: 1.05rem;
            color: var(--text-secondary);
        }

        p:last-child {
            margin-bottom: 0;
        }

        a {
            color: var(--text-link);
            text-decoration: none;
            transition: color var(--transition-fast);
        }

        a:hover {
            color: var(--text-link-hover);
        }

        .container {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
        }

        /* Scroll Progress Indicator */
        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 3px;
            background: linear-gradient(90deg, var(--accent-1), var(--accent-3));
            z-index: 9999;
            transition: width 0.3s ease;
        }

        /* NEW HEADER STYLES - Mobile First Approach */
        .new-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: var(--bg-secondary);
            box-shadow: 0 2px 10px var(--shadow-color);
            z-index: 1000;
            border: none;
            margin: 0;
            padding: 0;
        }

        .new-header.scrolled {
            background: var(--header-scrolled-bg);
            backdrop-filter: blur(10px);
        }

        .header-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            max-width: 1400px;
            margin: 0 auto;
            height: 60px;
            box-sizing: border-box;
        }

        .header-logo {
            display: flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            color: var(--text-heading);
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .header-logo img {
            height: 36px;
            width: auto;
            display: block;
        }

        .desktop-nav {
            display: none;
            list-style: none;
            margin: 0;
            padding: 0;
            gap: 32px;
            align-items: center;
        }

        .desktop-nav a {
            color: var(--text-secondary);
            text-decoration: none;
            font-weight: 500;
            padding: 8px 0;
            position: relative;
        }

        .desktop-nav a:hover {
            color: var(--text-heading);
        }

        .desktop-nav a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent-1);
            transition: width 0.2s ease;
        }

        .desktop-nav a:hover::after {
            width: 100%;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }

        .new-theme-btn {
            width: 36px;
            height: 36px;
            border: 1px solid var(--border-color);
            background: transparent;
            color: var(--text-primary);
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            transition: none;
        }

        .new-theme-btn:hover {
            background: var(--bg-card);
            border-color: var(--accent-1);
            color: var(--accent-1);
        }

        .new-login-btn {
            padding: 8px 16px;
            border: 1px solid var(--border-color);
            background: transparent;
            color: var(--text-heading);
            text-decoration: none;
            border-radius: 6px;
            font-weight: 500;
            font-size: 14px;
            white-space: nowrap;
            transition: none;
            font-family: 'Inter', sans-serif;
        }

        .new-login-btn:hover {
            background: var(--accent-1);
            border-color: var(--accent-1);
            color: white;
        }

        .mobile-menu-btn {
            display: block;
            width: 36px;
            height: 36px;
            border: none;
            background: transparent;
            color: var(--text-primary);
            cursor: pointer;
            font-size: 18px;
            margin-left: 8px;
        }

        .mobile-nav {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--nav-menu-bg);
            border-top: 1px solid var(--border-color);
            backdrop-filter: blur(10px);
        }

        .mobile-nav.active {
            display: block;
        }

        .mobile-nav ul {
            list-style: none;
            margin: 0;
            padding: 16px 0;
        }

        .mobile-nav a {
            display: block;
            padding: 12px 16px;
            color: var(--text-secondary);
            text-decoration: none;
            font-weight: 500;
            border-bottom: 1px solid var(--border-color);
        }

        .mobile-nav a:hover {
            color: var(--text-heading);
            background: var(--bg-card);
        }

        /* Desktop Styles */
        @media (min-width: 769px) {
            .header-content {
                padding: 16px 32px;
                height: 70px;
            }

            .header-logo {
                font-size: 1.5rem;
                gap: 12px;
            }

            .header-logo img {
                height: 45px;
            }

            .new-header.scrolled .header-logo img {
                height: 40px;
            }

            .desktop-nav {
                display: flex;
            }

            .mobile-menu-btn {
                display: none;
            }

            .header-actions {
                gap: 16px;
            }

            .new-theme-btn {
                width: 40px;
                height: 40px;
                font-size: 16px;
            }

            .new-login-btn {
                padding: 10px 20px;
                font-size: 15px;
            }

            /* Re-enable hover transitions on desktop */
            .new-theme-btn,
            .new-login-btn {
                transition: all 0.2s ease;
            }
        }

        /* Hero Section */
        .hero {
            background: transparent;
            color: var(--text-hero);
            padding: 120px 0 80px;
            text-align: center;
            position: relative;
            overflow: hidden;
            min-height: 100vh;
            display: flex;
            align-items: center;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 30% 20%, var(--bg-hero-gradient-start) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
        }

        .hero-content {
            position: relative;
            z-index: 1;
            width: 100%;
        }

        .hero h1 {
            font-size: 4.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            line-height: 1.1;
            color: var(--text-hero);
            font-family: 'Poppins', sans-serif;
            letter-spacing: -0.02em;
            text-shadow: var(--hero-text-shadow);
        }

        .hero .tagline {
            font-size: 1.8rem;
            font-weight: 400;
            margin-bottom: 1rem;
            opacity: 0.9;
            color: var(--accent-1);
            font-family: 'Poppins', sans-serif;
        }

        .hero .subtitle {
            font-size: 1.3rem;
            margin-bottom: 3rem;
            opacity: 0.8;
            color: var(--text-secondary);
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .cta-button {
            display: inline-block;
            background: var(--accent-1);
            color: white;
            padding: 1rem 2.5rem;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1rem;
            transition: all var(--transition-fast);
            font-family: 'Inter', sans-serif;
            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
            position: relative;
            overflow: hidden;
        }

        .cta-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }

        .cta-button:hover::before {
            left: 100%;
        }

        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
        }

        /* Main Content Sections */
        main {
            padding-top: 80px;
        }

        section {
            padding: 120px 0;
            position: relative;
        }

        .section-title {
            font-size: 3rem;
            text-align: center;
            margin-bottom: 1rem;
            color: var(--text-heading);
            font-family: 'Poppins', sans-serif;
            font-weight: 700;
            letter-spacing: -0.02em;
            position: relative;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, var(--accent-1), var(--accent-3));
            border-radius: 2px;
        }

        .section-subtitle {
            text-align: center;
            font-size: 1.2rem;
            color: var(--text-secondary);
            max-width: 800px;
            margin: 0 auto 4rem;
        }

        /* Company Description */
        .company-desc {
            background: var(--bg-secondary);
            position: relative;
        }

        .company-desc::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.03) 0%, transparent 50%);
        }

        /* Services Section */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
            margin-top: 4rem;
        }

        .service-card {
            background: var(--bg-card);
            padding: 2.5rem;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            text-align: center;
            transition: all var(--transition-medium);
            position: relative;
            overflow: hidden;
        }

        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-3) 100%);
            opacity: 0;
            transition: opacity var(--transition-medium);
            z-index: 1;
        }

        .service-card:hover::before {
            opacity: 0.05;
        }

        .service-card:hover {
            transform: translateY(-8px);
            border-color: var(--accent-1);
            box-shadow: 0 20px 40px var(--card-hover-shadow-color);
        }

        .service-icon {
            position: relative;
            z-index: 2;
            margin-bottom: 1.5rem;
            color: var(--accent-1);
            font-size: 3rem;
            transition: all var(--transition-medium);
        }

        .service-card:hover .service-icon {
            color: var(--accent-3);
            transform: scale(1.1);
        }

        .service-card h3 {
            position: relative;
            z-index: 2;
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: var(--text-heading);
        }

        .service-card p {
            position: relative;
            z-index: 2;
            color: var(--text-secondary);
            line-height: 1.6;
        }

        /* Team Section */
        .team-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 2rem;
            margin-top: 4rem;
        }

        .team-member {
            background: var(--bg-card);
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid var(--border-color);
            transition: all var(--transition-medium);
            text-align: center;
        }

        .team-member:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px var(--card-hover-shadow-color);
            border-color: var(--accent-1);
        }

        .team-img {
            width: 100%;
            height: 300px;
            object-fit: cover;
            filter: grayscale(30%);
            transition: filter var(--transition-medium), transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .team-member:hover .team-img {
            filter: grayscale(0%);
            transform: scale(1.05);
        }

        .team-info {
            padding: 2rem;
        }

        .team-name {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--text-heading);
            margin-bottom: 0.5rem;
        }

        .team-role {
            color: var(--accent-1);
            font-weight: 500;
            margin-bottom: 1rem;
        }

        .team-description {
            color: var(--text-secondary);
            font-size: 0.95rem;
            line-height: 1.5;
        }

        /* Mobile Marquee */
        .team-marquee {
            display: none;
            overflow: hidden;
            width: 100%;
            margin-top: 4rem;
            padding: 1rem 0;
        }

        .team-marquee-track {
            display: flex;
            gap: 1.5rem;
            width: max-content;
            transition: transform 0.3s ease-out;
            cursor: grab;
        }

        .team-marquee-track.dragging {
            cursor: grabbing;
            transition: none;
        }

        .team-marquee-track.auto-scroll {
            animation: marquee 25s linear infinite;
        }

        .team-marquee .team-member {
            flex-shrink: 0;
            width: 160px;
            background: var(--bg-card);
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid var(--border-color);
            text-align: center;
        }

        .team-marquee .team-img {
            height: 160px;
            width: 100%;
            object-fit: cover;
            filter: grayscale(30%);
        }

        .team-marquee .team-info {
            padding: 1rem 0.75rem;
        }

        .team-marquee .team-name {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text-heading);
            margin-bottom: 0.25rem;
        }

        .team-marquee .team-role {
            font-size: 0.75rem;
            color: var(--accent-1);
            font-weight: 500;
            margin-bottom: 0.5rem;
        }

        .team-marquee .team-description {
            font-size: 0.7rem;
            color: var(--text-secondary);
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        .team-marquee:hover .team-marquee-track.auto-scroll {
            animation-play-state: paused;
        }

        /* Mobile swipe indicators */
        .team-marquee::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, var(--accent-1), var(--accent-3));
            border-radius: 2px;
            opacity: 0.5;
        }

        /* Contact Section */
        .contact {
            background: var(--bg-secondary);
        }

        .contact-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            margin-top: 4rem;
        }

        .contact-info h3 {
            color: var(--text-heading);
            margin-bottom: 1.5rem;
        }

        .contact-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .contact-item i {
            color: var(--accent-1);
            font-size: 1.2rem;
            width: 20px;
        }

        .contact-form {
            background: var(--bg-card);
            padding: 2.5rem;
            border-radius: 12px;
            border: 1px solid var(--border-color);
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            color: var(--text-heading);
            margin-bottom: 0.5rem;
            font-weight: 500;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 0.8rem;
            background: var(--bg-primary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: var(--text-primary);
            font-family: 'Inter', sans-serif;
            transition: border-color var(--transition-fast);
        }

        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--accent-1);
        }

        .form-group textarea {
            resize: vertical;
            min-height: 120px;
        }

        .submit-btn {
            background: var(--accent-1);
            color: white;
            padding: 0.8rem 2rem;
            border: none;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            transition: all var(--transition-fast);
            font-family: 'Inter', sans-serif;
        }

        .submit-btn:hover {
            background: var(--okularity-dark-blue);
            transform: translateY(-1px);
        }

        /* Footer */
        .site-footer {
            background: var(--bg-primary);
            padding: 3rem 0;
            border-top: 1px solid var(--border-color);
        }

        .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .footer-left {
            color: var(--text-secondary);
        }

        .footer-right {
            display: flex;
            gap: 2rem;
        }

        .footer-right a {
            color: var(--text-secondary);
            transition: color var(--transition-fast);
        }

        .footer-right a:hover {
            color: var(--accent-1);
        }

        /* Animations */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
        }

        /* Additional Mobile Responsive Design */
        @media (max-width: 768px) {
            .container {
                padding: 0 1rem;
            }

            .hero h1 {
                font-size: 3rem;
            }

            .hero .tagline {
                font-size: 1.4rem;
            }

            .section-title {
                font-size: 2.5rem;
            }

            .contact-content {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .services-grid {
                grid-template-columns: 1fr;
            }

            .team-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .footer-content {
                flex-direction: column;
                gap: 1rem;
                text-align: center;
            }
        }

        @media (max-width: 768px) {
            .team-grid {
                display: none;
            }

            .team-marquee {
                display: block;
            }
        }

        @media (max-width: 480px) {

            .hero h1 {
                font-size: 2.5rem;
            }

            .service-card,
            .contact-form {
                padding: 2rem;
            }

            .team-marquee .team-member {
                width: 140px;
            }

            .team-marquee .team-img {
                height: 140px;
            }

            .team-marquee .team-info {
                padding: 0.75rem 0.5rem;
            }

            .team-marquee .team-name {
                font-size: 0.85rem;
            }

            .team-marquee .team-role {
                font-size: 0.7rem;
            }

            .team-marquee .team-description {
                font-size: 0.65rem;
            }
        }

        @media (max-width: 360px) {
            .new-header .header-content {
                padding: 10px 12px;
            }

            .header-actions {
                gap: 6px;
            }

            .new-theme-btn {
                width: 32px;
                height: 32px;
                font-size: 12px;
            }

            .new-login-btn {
                padding: 6px 12px;
                font-size: 13px;
            }
        }

        /* Parallax Background Effects */
        .parallax-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-size: 100px 100px;
            background-image: 
                radial-gradient(circle at 25px 25px, rgba(59, 130, 246, 0.1) 2px, transparent 2px);
            opacity: var(--parallax-opacity);
            animation: drift 20s linear infinite;
        }

        @keyframes drift {
            from { transform: translateX(0px); }
            to { transform: translateX(100px); }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .scale-animation {
            display: inline-block;
            animation: scale 2s ease-in-out infinite;
        }

        @keyframes scale {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
    </style>
</head>
<body>
    <div class="scroll-progress"></div>

    <header class="new-header" id="header">
        <div class="header-content">
            <a href="#home" class="header-logo">
                <img src="images/logo.png" alt="Okularity Logo">
            </a>
            
            <nav class="desktop-nav">
                <a href="#home">Home</a>
                <a href="#about">About</a>
                <a href="#services">Services</a>
                <a href="#team">Our Team</a>
                <a href="#contact">Contact</a>
            </nav>
            
            <div class="header-actions">
                <button class="new-theme-btn" id="theme-toggle-btn" aria-label="Toggle theme">
                    <i class="fas fa-moon"></i>
                </button>
                <a href="#" class="new-login-btn">Login</a>
                <button class="mobile-menu-btn" id="mobile-menu-btn" aria-label="Toggle menu">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>
        
        <nav class="mobile-nav" id="mobile-nav">
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#team">Our Team</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="hero" id="home">
            <div class="container">
                <div class="hero-content fade-in">
                    <h1>Own Your <span class="scale-animation">Image</span></h1>
                    <p class="tagline">Your Art. Your Rights. Our Mission.</p>
                    <p class="subtitle">Champions of copyright infringement mitigation and digital rights management</p>
                    <a href="#contact" class="cta-button">Get Protected Today</a>
                </div>
            </div>
        </section>

        <section class="company-desc parallax-bg" id="about">
            <div class="container">
                <h2 class="section-title fade-in">Advanced Image Protection Technology</h2>
                <div class="section-subtitle fade-in">
                    <p>We are your champions of copyright infringement mitigation and digital rights management. Okularity excels in tracking media across the vast expanse of the Internet, including the dynamic world of social media. Based in Beverly Hills, our advanced software reliably secures your likeness and creative content at no cost to you.</p>
                    <p>We represent hundreds of photographers, protecting millions of photographs and videos across the internet and social media. We're not just in the business of protection; we're guardians of creativity.</p>
                </div>
            </div>
        </section>

        <section class="services" id="services">
            <div class="container">
                <h2 class="section-title fade-in">
                    <i class="fas fa-shield-alt" style="color: var(--accent-1); margin-right: 1rem;"></i>
                    Our Services
                </h2>
                <div class="services-grid">
                    <div class="service-card fade-in">
                        <div class="service-icon">
                            <i class="fas fa-search"></i>
                        </div>
                        <h3>Image Tracking</h3>
                        <p>Advanced algorithms scan the internet 24/7 to detect unauthorized use of your copyrighted images across websites, social media, and digital platforms.</p>
                    </div>
                    <div class="service-card fade-in">
                        <div class="service-icon">
                            <i class="fas fa-gavel"></i>
                        </div>
                        <h3>Legal Protection</h3>
                        <p>Comprehensive legal support for copyright enforcement, DMCA takedowns, and litigation when necessary to protect your intellectual property.</p>
                    </div>
                    <div class="service-card fade-in">
                        <div class="service-icon">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <h3>Revenue Recovery</h3>
                        <p>Systematic approach to recovering licensing fees and damages from unauthorized commercial use of your creative works.</p>
                    </div>
                    <div class="service-card fade-in">
                        <div class="service-icon">
                            <i class="fas fa-eye"></i>
                        </div>
                        <h3>Monitoring & Analytics</h3>
                        <p>Real-time monitoring dashboard with detailed analytics on image usage, infringement patterns, and protection metrics.</p>
                    </div>
                    <div class="service-card fade-in">
                        <div class="service-icon">
                            <i class="fas fa-users"></i>
                        </div>
                        <h3>Personal Rights Management</h3>
                        <p>Specialized protection for personality rights, ensuring your likeness and image are used only with proper authorization.</p>
                    </div>
                    <div class="service-card fade-in">
                        <div class="service-icon">
                            <i class="fas fa-globe"></i>
                        </div>
                        <h3>Global Coverage</h3>
                        <p>Worldwide monitoring and enforcement capabilities across multiple jurisdictions and international copyright frameworks.</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="team parallax-bg" id="team">
            <div class="container">
                <h2 class="section-title fade-in">Our Expert Team</h2>
                <p class="section-subtitle fade-in">Meet the professionals dedicated to protecting your creative rights</p>
                <div class="team-grid">
                    <div class="team-member fade-in">
                        <img src="images/jon.jpg" alt="Jon Nicolini" class="team-img">
                        <div class="team-info">
                            <h3 class="team-name">Jon Nicolini</h3>
                            <p class="team-role">CEO</p>
                            <p class="team-description">Leading Okularity's mission to protect creative rights and combat copyright infringement across digital platforms.</p>
                        </div>
                    </div>
                    <div class="team-member fade-in">
                        <img src="images/peter.jpg" alt="Peter Perkowski" class="team-img">
                        <div class="team-info">
                            <h3 class="team-name">Peter Perkowski</h3>
                            <p class="team-role">General Counsel</p>
                            <p class="team-description">Overseeing legal strategy and copyright enforcement with extensive expertise in intellectual property law.</p>
                        </div>
                    </div>
                    <div class="team-member fade-in">
                        <img src="images/paige.jpg" alt="Paige Hosler" class="team-img">
                        <div class="team-info">
                            <h3 class="team-name">Paige Hosler</h3>
                            <p class="team-role">Board Member</p>
                            <p class="team-description">Providing strategic guidance and oversight to ensure Okularity's continued growth and innovation.</p>
                        </div>
                    </div>
                    <div class="team-member fade-in">
                        <img src="images/susan.jpg" alt="Susan Yin" class="team-img">
                        <div class="team-info">
                            <h3 class="team-name">Susan Yin</h3>
                            <p class="team-role">Board Member</p>
                            <p class="team-description">Contributing valuable insights and strategic direction to advance our digital rights protection services.</p>
                        </div>
                    </div>
                    <div class="team-member fade-in">
                        <img src="images/ecole.jpg" alt="École Weinstein" class="team-img">
                        <div class="team-info">
                            <h3 class="team-name">École Weinstein</h3>
                            <p class="team-role">Board Member</p>
                            <p class="team-description">Bringing expertise and vision to help shape Okularity's future in creative content protection.</p>
                        </div>
                    </div>
                    <div class="team-member fade-in">
                        <img src="images/mike.jpg" alt="Mike Gavigan" class="team-img">
                        <div class="team-info">
                            <h3 class="team-name">Mike Gavigan</h3>
                            <p class="team-role">Board Member</p>
                            <p class="team-description">Supporting strategic initiatives and business development to expand our market reach and impact.</p>
                        </div>
                    </div>

                    <div class="team-member fade-in">
                        <img src="images/kevin.jpg" alt="Kevin Nicolini" class="team-img">
                        <div class="team-info">
                            <h3 class="team-name">Kevin Nicolini</h3>
                            <p class="team-role">Board Member</p>
                            <p class="team-description">Contributing to strategic planning and operational excellence in our mission to protect creative works.</p>
                        </div>
                    </div>
                    <div class="team-member fade-in">
                        <img src="images/alex.jpg" alt="Alexander Hepler" class="team-img">
                        <div class="team-info">
                            <h3 class="team-name">Alexander Hepler</h3>
                            <p class="team-role">Board Member</p>
                            <p class="team-description">Providing leadership and strategic oversight to advance Okularity's technology and business objectives.</p>
                        </div>
                    </div>
                    <div class="team-member fade-in">
                        <img src="images/quinn.jpg" alt="Quinn" class="team-img">
                        <div class="team-info">
                            <h3 class="team-name">Quinn</h3>
                            <p class="team-role">Mascot</p>
                            <p class="team-description">Bringing joy and positive energy to the Okularity team while keeping spirits high during long days of protecting creative rights.</p>
                        </div>
                    </div>
                    <div class="team-member fade-in">
                        <img src="images/phoebe.jpg" alt="Phoebe" class="team-img">
                        <div class="team-info">
                            <h3 class="team-name">Phoebe</h3>
                            <p class="team-role">Cheerleader</p>
                            <p class="team-description">Inspiring the team with boundless enthusiasm and ensuring everyone stays motivated in our important work.</p>
                        </div>
                    </div>
                </div>

                <!-- Mobile Marquee -->
                <div class="team-marquee">
                    <div class="team-marquee-track">
                        <!-- First set of team members -->
                        <div class="team-member">
                            <img src="images/jon.jpg" alt="Jon Nicolini" class="team-img">
                            <div class="team-info">
                                <h3 class="team-name">Jon Nicolini</h3>
                                <p class="team-role">CEO</p>
                                <p class="team-description">Leading Okularity's mission to protect creative rights and combat copyright infringement across digital platforms.</p>
                            </div>
                        </div>
                        <div class="team-member">
                            <img src="images/peter.jpg" alt="Peter Perkowski" class="team-img">
                            <div class="team-info">
                                <h3 class="team-name">Peter Perkowski</h3>
                                <p class="team-role">General Counsel</p>
                                <p class="team-description">Overseeing legal strategy and copyright enforcement with extensive expertise in intellectual property law.</p>
                            </div>
                        </div>
                        <div class="team-member">
                            <img src="images/paige.jpg" alt="Paige Hosler" class="team-img">
                            <div class="team-info">
                                <h3 class="team-name">Paige Hosler</h3>
                                <p class="team-role">Board Member</p>
                                <p class="team-description">Providing strategic guidance and oversight to ensure Okularity's continued growth and innovation.</p>
                            </div>
                        </div>
                        <div class="team-member">
                            <img src="images/susan.jpg" alt="Susan Yin" class="team-img">
                            <div class="team-info">
                                <h3 class="team-name">Susan Yin</h3>
                                <p class="team-role">Board Member</p>
                                <p class="team-description">Contributing valuable insights and strategic direction to advance our digital rights protection services.</p>
                            </div>
                        </div>
                        <div class="team-member">
                            <img src="images/ecole.jpg" alt="École Weinstein" class="team-img">
                            <div class="team-info">
                                <h3 class="team-name">École Weinstein</h3>
                                <p class="team-role">Board Member</p>
                                <p class="team-description">Bringing expertise and vision to help shape Okularity's future in creative content protection.</p>
                            </div>
                        </div>
                        <div class="team-member">
                            <img src="images/mike.jpg" alt="Mike Gavigan" class="team-img">
                            <div class="team-info">
                                <h3 class="team-name">Mike Gavigan</h3>
                                <p class="team-role">Board Member</p>
                                <p class="team-description">Supporting strategic initiatives and business development to expand our market reach and impact.</p>
                            </div>
                        </div>
                        <div class="team-member">
                            <img src="images/kevin.jpg" alt="Kevin Nicolini" class="team-img">
                            <div class="team-info">
                                <h3 class="team-name">Kevin Nicolini</h3>
                                <p class="team-role">Board Member</p>
                                <p class="team-description">Contributing to strategic planning and operational excellence in our mission to protect creative works.</p>
                            </div>
                        </div>
                        <div class="team-member">
                            <img src="images/alex.jpg" alt="Alexander Hepler" class="team-img">
                            <div class="team-info">
                                <h3 class="team-name">Alexander Hepler</h3>
                                <p class="team-role">Board Member</p>
                                <p class="team-description">Providing leadership and strategic oversight to advance Okularity's technology and business objectives.</p>
                            </div>
                        </div>
                        <div class="team-member">
                            <img src="images/quinn.jpg" alt="Quinn" class="team-img">
                            <div class="team-info">
                                <h3 class="team-name">Quinn</h3>
                                <p class="team-role">Mascot</p>
                                <p class="team-description">Bringing joy and positive energy to the Okularity team while keeping spirits high during long days of protecting creative rights.</p>
                            </div>
                        </div>
                        <div class="team-member">
                            <img src="images/phoebe.jpg" alt="Phoebe" class="team-img">
                            <div class="team-info">
                                <h3 class="team-name">Phoebe</h3>
                                <p class="team-role">Cheerleader</p>
                                <p class="team-description">Inspiring the team with boundless enthusiasm and ensuring everyone stays motivated in our important work.</p>
                            </div>
                        </div>
                        <!-- Duplicate set for seamless loop -->
                        <div class="team-member">
                            <img src="images/jon.jpg" alt="Jon Nicolini" class="team-img">
                            <div class="team-info">
                                <h3 class="team-name">Jon Nicolini</h3>
                                <p class="team-role">CEO</p>
                                <p class="team-description">Leading Okularity's mission to protect creative rights and combat copyright infringement across digital platforms.</p>
                            </div>
                        </div>
                        <div class="team-member">
                            <img src="images/peter.jpg" alt="Peter Perkowski" class="team-img">
                            <div class="team-info">
                                <h3 class="team-name">Peter Perkowski</h3>
                                <p class="team-role">General Counsel</p>
                                <p class="team-description">Overseeing legal strategy and copyright enforcement with extensive expertise in intellectual property law.</p>
                            </div>
                        </div>
                        <div class="team-member">
                            <img src="images/paige.jpg" alt="Paige Hosler" class="team-img">
                            <div class="team-info">
                                <h3 class="team-name">Paige Hosler</h3>
                                <p class="team-role">Board Member</p>
                                <p class="team-description">Providing strategic guidance and oversight to ensure Okularity's continued growth and innovation.</p>
                            </div>
                        </div>
                        <div class="team-member">
                            <img src="images/susan.jpg" alt="Susan Yin" class="team-img">
                            <div class="team-info">
                                <h3 class="team-name">Susan Yin</h3>
                                <p class="team-role">Board Member</p>
                                <p class="team-description">Contributing valuable insights and strategic direction to advance our digital rights protection services.</p>
                            </div>
                        </div>
                        <div class="team-member">
                            <img src="images/ecole.jpg" alt="École Weinstein" class="team-img">
                            <div class="team-info">
                                <h3 class="team-name">École Weinstein</h3>
                                <p class="team-role">Board Member</p>
                                <p class="team-description">Bringing expertise and vision to help shape Okularity's future in creative content protection.</p>
                            </div>
                        </div>
                        <div class="team-member">
                            <img src="images/mike.jpg" alt="Mike Gavigan" class="team-img">
                            <div class="team-info">
                                <h3 class="team-name">Mike Gavigan</h3>
                                <p class="team-role">Board Member</p>
                                <p class="team-description">Supporting strategic initiatives and business development to expand our market reach and impact.</p>
                            </div>
                        </div>
                        <div class="team-member">
                            <img src="images/kevin.jpg" alt="Kevin Nicolini" class="team-img">
                            <div class="team-info">
                                <h3 class="team-name">Kevin Nicolini</h3>
                                <p class="team-role">Board Member</p>
                                <p class="team-description">Contributing to strategic planning and operational excellence in our mission to protect creative works.</p>
                            </div>
                        </div>
                        <div class="team-member">
                            <img src="images/alex.jpg" alt="Alexander Hepler" class="team-img">
                            <div class="team-info">
                                <h3 class="team-name">Alexander Hepler</h3>
                                <p class="team-role">Board Member</p>
                                <p class="team-description">Providing leadership and strategic oversight to advance Okularity's technology and business objectives.</p>
                            </div>
                        </div>
                        <div class="team-member">
                            <img src="images/quinn.jpg" alt="Quinn" class="team-img">
                            <div class="team-info">
                                <h3 class="team-name">Quinn</h3>
                                <p class="team-role">Mascot</p>
                                <p class="team-description">Bringing joy and positive energy to the Okularity team while keeping spirits high during long days of protecting creative rights.</p>
                            </div>
                        </div>
                        <div class="team-member">
                            <img src="images/phoebe.jpg" alt="Phoebe" class="team-img">
                            <div class="team-info">
                                <h3 class="team-name">Phoebe</h3>
                                <p class="team-role">Cheerleader</p>
                                <p class="team-description">Inspiring the team with boundless enthusiasm and ensuring everyone stays motivated in our important work.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="contact" id="contact">
            <div class="container">
                <h2 class="section-title fade-in">Get Started Today</h2>
                <p class="section-subtitle fade-in">Ready to protect your creative assets? Contact our team for a consultation.</p>
                <div class="contact-content">
                    <div class="contact-info fade-in">
                        <h3>Contact Information</h3>
                        <div class="contact-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>Beverly Hills, California</span>
                        </div>
                        <div class="contact-item">
                            <i class="fas fa-envelope"></i>
                            <span>info@okularity.com</span>
                        </div>
                        <div class="contact-item">
                            <i class="fas fa-phone"></i>
                            <span>+1 (555) 123-4567</span>
                        </div>
                        <div class="contact-item">
                            <i class="fas fa-clock"></i>
                            <span>24/7 Monitoring & Support</span>
                        </div>
                    </div>
                    <div class="contact-form fade-in">
                        <h3>Send us a Message</h3>
                        <form>
                            <div class="form-group">
                                <label for="name">Full Name</label>
                                <input type="text" id="name" name="name" required>
                            </div>
                            <div class="form-group">
                                <label for="email">Email Address</label>
                                <input type="email" id="email" name="email" required>
                            </div>
                            <div class="form-group">
                                <label for="subject">Subject</label>
                                <input type="text" id="subject" name="subject" required>
                            </div>
                            <div class="form-group">
                                <label for="message">Message</label>
                                <textarea id="message" name="message" required></textarea>
                            </div>
                            <button type="submit" class="submit-btn">Send Message</button>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer class="site-footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-left">
                    <p>&copy; 2024 Okularity. All rights reserved.</p>
                </div>
                <div class="footer-right">
                    <a href="#privacy">Privacy Policy</a>
                    <a href="#terms">Terms of Service</a>
                    <a href="#support">Support</a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // Theme Toggle
        const themeToggleButton = document.getElementById('theme-toggle-btn');
        const body = document.body;
        const moonIconClass = 'fa-moon';
        const sunIconClass = 'fa-sun';

        function setTheme(theme) {
            body.classList.remove('light-theme');
            if (theme === 'light') {
                body.classList.add('light-theme');
                if (themeToggleButton && themeToggleButton.querySelector('i')) {
                    themeToggleButton.querySelector('i').className = `fas ${sunIconClass}`;
                }
                localStorage.setItem('theme', 'light');
            } else {
                if (themeToggleButton && themeToggleButton.querySelector('i')) {
                    themeToggleButton.querySelector('i').className = `fas ${moonIconClass}`;
                }
                localStorage.setItem('theme', 'dark');
            }
        }

        if (themeToggleButton) {
            themeToggleButton.addEventListener('click', () => {
                const isLightTheme = body.classList.contains('light-theme');
                setTheme(isLightTheme ? 'dark' : 'light');
            });
        }

        const savedTheme = localStorage.getItem('theme');
        setTheme(savedTheme || 'dark');

        // NEW HEADER FUNCTIONALITY
        document.addEventListener('DOMContentLoaded', () => {
            // Mobile menu toggle
            const mobileMenuBtn = document.getElementById('mobile-menu-btn');
            const mobileNav = document.getElementById('mobile-nav');
            
            if (mobileMenuBtn && mobileNav) {
                mobileMenuBtn.addEventListener('click', () => {
                    mobileNav.classList.toggle('active');
                    const icon = mobileMenuBtn.querySelector('i');
                    if (mobileNav.classList.contains('active')) {
                        icon.className = 'fas fa-times';
                    } else {
                        icon.className = 'fas fa-bars';
                    }
                });

                // Close mobile menu when clicking on a link
                const mobileLinks = mobileNav.querySelectorAll('a');
                mobileLinks.forEach(link => {
                    link.addEventListener('click', () => {
                        mobileNav.classList.remove('active');
                        mobileMenuBtn.querySelector('i').className = 'fas fa-bars';
                    });
                });

                // Close mobile menu when clicking outside
                document.addEventListener('click', (e) => {
                    if (!mobileMenuBtn.contains(e.target) && !mobileNav.contains(e.target)) {
                        mobileNav.classList.remove('active');
                        mobileMenuBtn.querySelector('i').className = 'fas fa-bars';
                    }
                });
            }

            // Header scroll effect
            const header = document.getElementById('header');
            if (header) {
                window.addEventListener('scroll', () => {
                    header.classList.toggle('scrolled', window.scrollY > 50);
                }, { passive: true });
            }

            // Scroll Progress Indicator
            const progressBar = document.querySelector('.scroll-progress');
            if (progressBar) {
                window.addEventListener('scroll', () => {
                    const scrollPosition = window.scrollY;
                    const totalHeight = document.body.scrollHeight - window.innerHeight;
                    const scrollProgress = totalHeight > 0 ? (scrollPosition / totalHeight) * 100 : 0;
                    progressBar.style.width = `${scrollProgress}%`;
                }, { passive: true });
            }

            // GSAP Animations & Scroll Logic
            if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined' && typeof ScrollToPlugin !== 'undefined') {
                gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);

                // General Fade-in Animations
                const fadeElements = document.querySelectorAll('.fade-in');
                fadeElements.forEach(element => {
                    gsap.fromTo(element,
                        { opacity: 0, y: 30 },
                        {
                            opacity: 1,
                            y: 0,
                            duration: 0.8,
                            ease: "power2.out",
                            scrollTrigger: {
                                trigger: element,
                                start: "top 85%",
                                toggleActions: "play none none reset"
                            }
                        }
                    );
                });

                // Staggered animations for grids
                const staggerFadeIn = (selector, triggerSelector, delay = 0, stagger = 0.15) => {
                    const elements = document.querySelectorAll(selector);
                    if (elements.length > 0) {
                        gsap.fromTo(elements,
                            { opacity: 0, y: 30 },
                            {
                                opacity: 1,
                                y: 0,
                                duration: 0.6,
                                ease: "power2.out",
                                stagger: stagger,
                                delay: delay,
                                scrollTrigger: {
                                    trigger: triggerSelector || selector,
                                    start: "top 85%",
                                    toggleActions: "play none none reset"
                                }
                            }
                        );
                    }
                };

                // Apply staggered animations
                staggerFadeIn('.service-card', '.services-grid');
                staggerFadeIn('.team-member', '.team-grid');

                // Smooth scrolling for navigation links
                document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                    anchor.addEventListener('click', function (e) {
                        e.preventDefault();
                        const target = document.querySelector(this.getAttribute('href'));
                        if (target) {
                            gsap.to(window, {
                                duration: 1,
                                scrollTo: { y: target, offsetY: 80 },
                                ease: "power2.inOut"
                            });
                        }
                    });
                });
            } else {
                console.log("GSAP libraries not loaded, using fallback animations");
                // Fallback for fade-in without GSAP
                const fadeElements = document.querySelectorAll('.fade-in');
                const observerOptions = {
                    threshold: 0.1,
                    rootMargin: '0px 0px -50px 0px'
                };

                const observer = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            entry.target.style.opacity = '1';
                            entry.target.style.transform = 'translateY(0)';
                            observer.unobserve(entry.target);
                        }
                    });
                }, observerOptions);

                fadeElements.forEach(element => {
                    element.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
                    observer.observe(element);
                });

                // Header scroll effect fallback
                const header = document.getElementById('header');
                if (header) {
                    window.addEventListener('scroll', () => {
                        header.classList.toggle('scrolled', window.scrollY > 50);
                    }, { passive: true });
                }

                // Scroll progress fallback
                const progressBar = document.querySelector('.scroll-progress');
                if (progressBar) {
                    window.addEventListener('scroll', () => {
                        const scrollPosition = window.scrollY;
                        const totalHeight = document.body.scrollHeight - window.innerHeight;
                        const scrollProgress = totalHeight > 0 ? (scrollPosition / totalHeight) * 100 : 0;
                        progressBar.style.width = `${scrollProgress}%`;
                    }, { passive: true });
                }
            }
        });

                 // Form submission handler
         document.querySelector('.contact-form form').addEventListener('submit', function(e) {
             e.preventDefault();
             alert('Thank you for your message! We will get back to you soon.');
         });

         // Team Marquee Swipe Functionality
         function initTeamMarqueeSwipe() {
             const marquee = document.querySelector('.team-marquee');
             const track = document.querySelector('.team-marquee-track');
             
             if (!marquee || !track) return;

             let startX = 0;
             let currentX = 0;
             let translateX = 0;
             let isDragging = false;
             let isAutoScrolling = true;
             let autoScrollTimeout = null;

             // Check if we're on mobile
             const isMobile = window.innerWidth <= 768;
             
             // Always start with auto-scroll enabled
             track.classList.add('auto-scroll');

             function resumeAutoScroll() {
                 if (autoScrollTimeout) {
                     clearTimeout(autoScrollTimeout);
                 }
                 autoScrollTimeout = setTimeout(() => {
                     if (!isDragging) {
                         isAutoScrolling = true;
                         track.classList.add('auto-scroll');
                         // Reset position for seamless auto-scroll restart
                         track.style.transform = 'translateX(0)';
                         translateX = 0;
                     }
                 }, 3000); // Resume auto-scroll after 3 seconds of inactivity
             }

             function pauseAutoScroll() {
                 isAutoScrolling = false;
                 track.classList.remove('auto-scroll');
                 if (autoScrollTimeout) {
                     clearTimeout(autoScrollTimeout);
                 }
             }

             // Touch Events
             marquee.addEventListener('touchstart', handleStart, { passive: false });
             marquee.addEventListener('touchmove', handleMove, { passive: false });
             marquee.addEventListener('touchend', handleEnd, { passive: false });

             // Mouse Events (for desktop testing)
             marquee.addEventListener('mousedown', handleStart);
             marquee.addEventListener('mousemove', handleMove);
             marquee.addEventListener('mouseup', handleEnd);
             marquee.addEventListener('mouseleave', handleEnd);

             function handleStart(e) {
                 if (!isMobile && e.type.includes('mouse')) return; // Only allow mouse on desktop for testing
                 
                 e.preventDefault();
                 isDragging = true;
                 
                 const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX;
                 startX = clientX;
                 currentX = translateX;
                 
                 track.classList.add('dragging');
                 pauseAutoScroll();
             }

             function handleMove(e) {
                 if (!isDragging) return;
                 e.preventDefault();
                 
                 const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX;
                 const deltaX = clientX - startX;
                 const newTranslateX = currentX + deltaX;
                 
                 // Constrain movement
                 const maxTranslate = 0;
                 const minTranslate = -(track.scrollWidth - marquee.offsetWidth);
                 const constrainedX = Math.max(minTranslate, Math.min(maxTranslate, newTranslateX));
                 
                 track.style.transform = `translateX(${constrainedX}px)`;
                 translateX = constrainedX;
             }

             function handleEnd(e) {
                 if (!isDragging) return;
                 isDragging = false;
                 
                 track.classList.remove('dragging');
                 
                 // Add momentum/snap behavior
                 const velocity = (translateX - currentX) / 10;
                 let finalX = translateX + velocity * 5;
                 
                 // Constrain final position
                 const maxTranslate = 0;
                 const minTranslate = -(track.scrollWidth - marquee.offsetWidth);
                 finalX = Math.max(minTranslate, Math.min(maxTranslate, finalX));
                 
                 // Snap to nearest card
                 const cardWidth = isMobile ? (window.innerWidth <= 480 ? 140 + 24 : 160 + 24) : 160 + 24;
                 const nearestCard = Math.round(Math.abs(finalX) / cardWidth);
                 finalX = -nearestCard * cardWidth;
                 finalX = Math.max(minTranslate, Math.min(maxTranslate, finalX));
                 
                 track.style.transform = `translateX(${finalX}px)`;
                 translateX = finalX;
                 
                 // Resume auto-scroll after inactivity
                 resumeAutoScroll();
             }

             // Touch interaction also pauses auto-scroll
             marquee.addEventListener('touchstart', function(e) {
                 // Any touch interaction pauses auto-scroll temporarily
                 pauseAutoScroll();
             });

             // Single tap also resets the auto-scroll timer
             marquee.addEventListener('touchend', function(e) {
                 if (!isDragging) {
                     resumeAutoScroll();
                 }
             });

             // Handle window resize
             window.addEventListener('resize', function() {
                 const newIsMobile = window.innerWidth <= 768;
                 if (newIsMobile !== isMobile) {
                     location.reload(); // Simple solution - reload on mobile/desktop switch
                 }
             });
         }

         // Initialize swipe functionality
         document.addEventListener('DOMContentLoaded', initTeamMarqueeSwipe);
    </script>
</body>
</html>