```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Uber Vision</title>
    <style>
        :root {
            --primary-color: #001f3f;
            --secondary-color: #f35f21;
            --light-color: #ffffff;
            --dark-color: #1e293b;
            --text-color: #333333;
            --gray-color: #e2e8f0;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            line-height: 1.6;
            color: var(--text-color);
            overflow-x: hidden;
        }
        
        /* NAVIGATION */
        .nav-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            transition: all 0.3s ease;
            padding: 1.5rem 0;
        }
        
        .nav-scrolled {
            background-color: rgba(0, 31, 63, 0.95);
            backdrop-filter: blur(10px);
            box-shadow: var(--shadow);
        }
        
        .nav-scrolled .nav-links a {
            color: var(--light-color);
        }
        
        .nav-container .nav-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }
        
        .nav-container .nav-logo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            text-decoration: none;
            color: var(--light-color);
            font-weight: 700;
            font-size: 1.8rem;
        }
        
        .nav-container .nav-links {
            display: flex;
            list-style: none;
            gap: 2.5rem;
        }
        
        .nav-container .nav-links a {
            color: var(--light-color);
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .nav-container .nav-links a:before {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--secondary-color);
            transition: width 0.3s ease;
        }
        
        .nav-container .nav-links a:hover:before {
            width: 100%;
        }
        
        .nav-container .nav-links a:hover {
            color: var(--secondary-color);
        }
        
        .nav-container .nav-links a.active {
            color: var(--secondary-color);
        }
        
        .nav-container .nav-links a.active:before {
            width: 100%;
        }
        
        .nav-container .hamburger {
            display: none;
            cursor: pointer;
            flex-direction: column;
            justify-content: space-around;
            width: 30px;
            height: 21px;
            background: transparent;
            border: none;
        }
        
        .nav-container .hamburger div {
            width: 100%;
            height: 3px;
            background-color: var(--light-color);
            transition: all 0.3s linear;
        }
        
        /* HERO SECTION */
        .hero {
            height: 100vh;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
            color: var(--light-color);
            background: linear-gradient(135deg, #001f3f 0%, #0a2540 100%);
        }
        
        .hero::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: radial-gradient(circle at 20% 50%, rgba(243, 95, 33, 0.03) 0%, transparent 40%);
        }
        
        .hero::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background: linear-gradient(transparent, #001f3f);
        }
        
        .hero-bg {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60vh;
            background-size: cover;
            background-position: center;
            filter: brightness(0.7);
            z-index: -1;
        }
        
        .hero-pattern {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.1;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23f35f21' fill-opacity='1' d='M0,128L48,144C96,160,192,192,288,208C384,224,480,192,576,160C672,128,768,96,864,96C960,96,1056,128,1152,154.7C1248,181,1344,224,1392,245.3L1440,267L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
            background-size: 200px;
        }
        
        .hero-gradient {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(transparent 60%, var(--secondary-color) 100%);
            transform: translateX(-100%);
            transition: transform 1s ease;
        }
        
        .hero-content {
            position: relative;
            text-align: center;
            max-width: 1000px;
            padding: 2rem;
            z-index: 10;
        }
        
        .hero-title {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 1rem;
            animation: fadeUp 1s forwards;
            opacity: 0;
            transform: translateY(30px);
        }
        
        .hero-subtitle {
            font-size: 1.5rem;
            max-width: 800px;
            margin: 0 auto 2rem;
            animation: fadeUp 1s forwards 0.2s;
            opacity: 0;
            transform: translateY(30px);
        }
        
        .hero-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            align-items: center;
            margin-top: 2rem;
            animation: fadeUp 1s forwards 0.4s;
            opacity: 0;
        }
        
        .btn {
            padding: 1rem 2rem;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            font-size: 1rem;
        }
        
        .btn-primary {
            background-color: var(--secondary-color);
            color: var(--light-color);
        }
        
        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        
        .btn-secondary {
            background-color: transparent;
            color: var(--light-color);
            border: 2px solid var(--light-color);
        }
        
        .btn-secondary:hover {
            background-color: var(--light-color);
            color: var(--dark-color);
        }
        
        /* INTRO SECTION */
        .intro {
            padding: 6rem 0 4rem;
            background-color: var(--light-color);
        }
        
        .intro-wrapper {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }
        
        .intro-title {
            font-size: 2.5rem;
            text-align: center;
            margin-bottom: 2rem;
            color: var(--primary-color);
        }
        
        .intro-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            align-items: center;
        }
        
        .intro-text {
            line-height: 1.8;
        }
        
        .intro-text h3 {
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
            color: var(--dark-color);
        }
        
        .intro-text p {
            margin-bottom: 1.5rem;
            color: var(--text-color);
        }
        
        /* CARD GRID HIGHLIGHTS */
        .features {
            padding: 6rem 0;
            background-color: var(--gray-color);
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }
        
        .feature-card {
            background-color: var(--light-color);
            border-radius: 10px;
            padding: 2.5rem;
            text-align: center;
            transition: transform 0.3s ease;
            box-shadow: var(--shadow);
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
        }
        
        .feature-icon {
            font-size: 3rem;
            margin-bottom: 1.5rem;
            color: var(--secondary-color);
        }
        
        .feature-title {
            font-size: 1.5rem;
            margin-bottom: 1.2rem;
            color: var(--primary-color);
        }
        
        .feature-desc {
            color: var(--text-color);
        }
        
        /* IMAGE GALLERY */
        .gallery {
            padding: 6rem 0;
            background-color: var(--light-color);
            position: relative;
            overflow: hidden;
        }
        
        .gallery::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23001f3f' fill-opacity='0.04' d='M0,64L48,90.7C96,117,192,171,288,202.7C384,235,480,245,576,234.7C672,224,768,160,864,138.7C960,117,1056,139,1152,154.7C1248,171,1344,181,1392,186.7L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
            background-size: 50px;
            opacity: 0.03;
        }
        
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }
        
        .gallery-item {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: var(--shadow);
            height: 280px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease;
        }
        
        .gallery-item:hover {
            transform: translateY(-10px);
        }
        
        .gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 1rem;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }
        
        .gallery-item:hover .gallery-overlay {
            transform: translateY(0);
        }
        
        .gallery-title {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
        }
        
        .gallery-desc {
            font-size: 0.9rem;
            opacity: 0.8;
        }
        
        /* CONTACT FORM */
        .contact {
            padding: 6rem 0;
            background: linear-gradient(135deg, #001f3f 0%, #0a2540 100%);
            color: var(--light-color);
        }
        
        .contact-wrapper {
            max-width: 800px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }
        
        .contact-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 2rem;
        }
        
        .contact-form {
            display: grid;
            gap: 1.5rem;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .form-group {
            display: flex;
            flex-direction: column;
        }
        
        .form-group label {
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
        
        .form-group input,
        .form-group textarea {
            padding: 1rem;
            border: none;
            border-radius: 5px;
            resize: none;
            font-size: 1rem;
        }
        
        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            box-shadow: 0 0 0 2px var(--secondary-color);
        }
        
        .form-group textarea {
            height: 150px;
            min-height: 150px;
        }
        
        .submit-btn {
            align-self: center;
            padding: 1rem 2.5rem;
            background-color: var(--secondary-color);
            color: var(--light-color);
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .submit-btn:hover {
            background-color: #e85513;
            transform: translateY(-3px);
        }
        
        /* FOOTER */
        .footer {
            background-color: var(--dark-color);
            padding: 3rem 0 1.5rem;
            color: var(--light-color);
        }
        
        .footer-wrapper {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1.5rem;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            align-items: flex-start;
        }
        
        .footer-logo {
            color: var(--secondary-color);
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 1rem;
            text-decoration: none;
            display: block;
        }
        
        .footer-social {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }
        
        .social-icon {
            color: var(--light-color);
            background-color: rgba(255, 255, 255, 0.1);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .social-icon:hover {
            background-color: var(--secondary-color);
            transform: translateY(-3px);
        }
        
        .footer-title {
            font-size: 1.4rem;
            margin-bottom: 1.2rem;
            color: var(--secondary-color);
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 0.8rem;
        }
        
        .footer-links a {
            color: var(--light-color);
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .footer-links a:hover {
            color: var(--secondary-color);
            padding-left: 5px;
        }
        
        .footer-bottom {
            max-width: 1200px;
            margin: 2rem auto 0;
            padding: 1rem 1.5rem 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 2rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.6);
        }
        
        /* ANIMATIONS */
        @keyframes fadeUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        /* RESPONSIVE */
        @media (max-width: 992px) {
            .hero-title {
                font-size: 3rem;
            }
            .hero-buttons {
                flex-direction: column;
                align-items: flex-start;
            }
            .hero-subtitle {
                font-size: 1.3rem;
            }
            .hero-content {
                padding: 1rem;
            }
            .intro-content {
                grid-template-columns: 1fr;
            }
            .feature-card {
                padding: 2rem 1.5rem;
            }
            .gallery-grid {
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            }
            .gallery-item {
                height: 250px;
            }
        }
        
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }
            .hero-subtitle {
                font-size: 1.1rem;
            }
            .intro-title {
                font-size: 2rem;
            }
            .nav-links {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background-color: var(--primary-color);
                flex-direction: column;
                align-items: center;
                padding: 2rem 0;
                gap: 1.5rem;
                box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
            }
            .nav-links.show {
                display: flex;
            }
            .hamburger {
                display: flex;
            }
            .hamburger.active div:nth-child(1) {
                transform: rotate(45deg) translate(5px, 5px);
            }
            .hamburger.active div:nth-child(2) {
                opacity: 0;
            }
            .hamburger.active div:nth-child(3) {
                transform: rotate(-45deg) translate(5px, -5px);
            }
            .feature-card {
                text-align: left;
            }
            .feature-icon {
                margin: 0 auto 1.5rem;
            }
            .gallery-grid {
                grid-template-columns: 1fr;
            }
            .gallery-item {
                height: 220px;
            }
            .contact-form {
                grid-template-columns: 1fr;
            }
            .form-group {
                margin-bottom: 1rem;
            }
            .footer-grid {
                grid-template-columns: 1fr;
            }
            .footer-bottom {
                flex-direction: column;
                gap: 1rem;
            }
        }
        
        @media (max-width: 576px) {
            .hero-title {
                font-size: 2rem;
            }
            .menu-toggle {
                display: block;
            }
            .hero-buttons {
                flex-direction: row;
                width: 100%;
                justify-content: center;
            }
            .btn {
                padding: 0.8rem 1.5rem;
            }
            .gallery-grid {
                gap: 1rem;
            }
            .footer-links li {
                margin-bottom: 0.5rem;
            }
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <div class="nav-container" id="nav">
        <div class="nav-wrapper">
            <a href="#" class="nav-logo" aria-label="Uber Vision Theme">
                <span>Uber Vision</span>
            </a>
            <ul class="nav-links" id="navLinks">
                <li><a href="#intro" class="nav-link active">Vision</a></li>
                <li><a href="#features" class="nav-link">Features</a></li>
                <li><a href="#gallery" class="nav-link">Gallery</a></li>
                <li><a href="#contact" class="nav-link">Contact</a></li>
            </ul>
            <button class="hamburger" id="hamburger" aria-label="Toggle navigation">
                <div></div>
                <div></div>
                <div></div>
            </button>
        </div>
    </div>

    <!-- Hero Section -->
    <section class="hero" id="hero">
        <div class="hero-bg" style="background-image: url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80')"></div>
        <div class="hero-pattern"></div>
        <div class="hero-gradient"></div>
        <div class="hero-content">
            <div class="hero-title" id="heroTitle"></div>
            <div class="hero-subtitle" id="heroSubtitle"></div>
            <div class="hero-buttons">
                <a href="#intro" class="btn btn-primary" id="primaryCta">Learn More</a>
                <a href="#contact" class="btn btn-secondary" id="secondaryCta">Get Started</a>
            </div>
        </div>
    </section>

    <!-- Intro Section -->
    <section class="intro" id="intro">
        <div class="intro-wrapper">
            <h2 class="intro-title" id="introTitle"></h2>
            <div class="intro-content">
                <div class="intro-text">
                    <h3 id="introHeading"></h3>
                    <p id="introParagraph"></p>
                    <p id="introText"></p>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="features" id="features">
        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">🚀</div>
                <h3 class="feature-title" id="feature1Title"></h3>
                <p class="feature-desc" id="feature1Desc"></p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">💡</div>
                <h3 class="feature-title" id="feature2Title"></h3>
                <p class="feature-desc" id="feature2Desc"></p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">🔒</div>
                <h3 class="feature-title" id="feature3Title"></h3>
                <p class="feature-desc" id="feature3Desc"></p>
            </div>
        </div>
    </section>

    <!-- Gallery Section -->
    <section class="gallery" id="gallery">
        <div class="gallery-grid">
            <div class="gallery-item" id="galleryItem1">
                <div class="gallery-overlay">
                    <h4 class="gallery-title" id="galleryTitle1"></h4>
                    <p class="gallery-desc" id="galleryDesc1"></p>
                </div>
            </div>
            <div class="gallery-item" id="galleryItem2">
                <div class="gallery-overlay">
                    <h4 class="gallery-title" id="galleryTitle2"></h4>
                    <p class="gallery-desc" id="galleryDesc2"></p>
                </div>
            </div>
            <div class="gallery-item" id="galleryItem3">
                <div class="gallery-overlay">
                    <h4 class="gallery-title" id="galleryTitle3"></h4>
                    <p class="gallery-desc" id="galleryDesc3"></p>
                </div>
            </div>
            <div class="gallery-item" id="galleryItem4">
                <div class="gallery-overlay">
                    <h4 class="gallery-title" id="galleryTitle4"></h4>
                    <p class="gallery-desc" id="galleryDesc4"></p>
                </div>
            </div>
            <div class="gallery-item" id="galleryItem5">
                <div class="gallery-overlay">
                    <h4 class="gallery-title" id="galleryTitle5"></h4>
                    <p class="gallery-desc" id="galleryDesc5"></p>
                </div>
            </div>
            <div class="gallery-item" id="galleryItem6">
                <div class="gallery-overlay">
                    <h4 class="gallery-title" id="galleryTitle6"></h4>
                    <p class="gallery-desc" id="galleryDesc6"></p>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section class="contact" id="contact">
        <div class="contact-wrapper">
            <h2 class="contact-title">Let's Talk About Vision</h2>
            <form class="contact-form">
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" id="name" name="name" required aria-required="true" placeholder="Enter your name">
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" id="email" name="email" required aria-required="true" placeholder="Enter your email">
                </div>
                <div class="form-group">
                    <label for="message">Message</label>
                    <textarea id="message" name="message" required aria-required="true" placeholder="Tell us about your vision"></textarea>
                </div>
                <div class="form-actions">
                    <button type="submit" class="submit-btn" id="submitBtn">Send Message</button>
                </div>
            </form>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="footer-wrapper">
            <div class="footer-col">
                <a href="#" class="footer-logo" aria-label="Uber Vision">Uber Vision</a>
                <p>Redefining digital experiences with bold design and innovation.</p>
                <div class="footer-social">
                    <a href="#" aria-label="Follow on Twitter">
                        <div class="social-icon">TW</div>
                    </a>
                    <a href="#" aria-label="Like on Facebook">
                        <div class="social-icon">FB</div>
                    </a>
                    <a href="#" aria-label="Connect on LinkedIn">
                        <div class="social-icon">IN</div>
                    </a>
                    <a href="#" aria-label="Follow on Instagram">
                        <div class="social-icon">IG</div>
                    </a>
                </div>
            </div>
            <div class="footer-col">
                <h4 class="footer-title">Company</h4>
                <ul class="footer-links">
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Team</a></li>
                    <li><a href="#">Careers</a></li>
                    <li><a href="#">Vision Statement</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4 class="footer-title">Features</h4>
                <ul class="footer-links">
                    <li><a href="#">UX/UI Design</a></li>
                    <li><a href="#">Brand Identity</a></li>
                    <li><a href="#">Digital Products</a></li>
                    <li><a href="#">E-commerce Solutions</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4 class="footer-title">Resources</h4>
                <ul class="footer-links">
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Case Studies</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">FAQ</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2023 Uber Vision. All rights reserved.</p>
            <p>Designed with <span style="color: var(--secondary-color);">♥</span> for innovative thinkers</p>
        </div>
    </footer>

    <script>
        // Theme variables
        const Brand = {
            name: "Uber",
            website: "uber.com"
        };
        
        const Page = {
            name: "vision",
            title: "Vision Statement",
            subtitle: "Shaping the future of digital experiences with bold innovation and sleek design.",
            introHeading: "About Our Vision",
            introParagraph: `At ${Brand.name}${Brand.website}, we believe in creating digital experiences that not only meet but exceed expectations. Our vision is to revolutionize the way people interact with technology, combining stunning design with intuitive functionality. We're not just building products—we're crafting digital journeys that engage, inspire, and endure in the digital landscape.`,
            introText: "Our mission is to push the boundaries of digital design, focusing on accessibility, simplicity, and cutting-edge technology to create solutions that transform businesses and enhance lives.",
            
            heroTitle: `${Brand.name}'s Digital Vision`,
            heroSubtitle: "Transform your digital presence with our innovative solutions tailored for the modern world.",
            primaryCta: "Explore Our Vision",
            secondaryCta: "Get Your Free Consultation"
        };
        
        // Populate content
        function populateContent() {
            // Hero section
            document.getElementById("heroTitle").textContent = Page.heroTitle;
            document.getElementById("heroSubtitle").textContent = Page.heroSubtitle;
            
            // Intro section
            document.getElementById("introTitle").textContent = Page.title;
            document.getElementById("introHeading").textContent = Page.introHeading;
            document.getElementById("introParagraph").textContent = Page.introParagraph;
            document.getElementById("introText").textContent = Page.introText;
            
            // Feature cards (keeping content placeholder for now)
            document.getElementById("feature1Title").textContent = "Innovative Design";
            document.getElementById("feature1Desc").textContent = "We create intuitive and visually stunning interfaces that prioritize user experience.";
            document.getElementById("feature2Title").textContent = "Cutting-Edge Tech";
            document.getElementById("feature2Desc").textContent = "Leveraging the latest technologies to build responsive and scalable solutions.";
            document.getElementById("feature3Title").textContent = "Sustainable Growth";
            document.getElementById("feature3Desc").textContent = "Our strategies focus on long-term value and sustainable business development.";
            
            // Gallery items
            const galleryTitles = [
                "Corporate Dashboard Design",
                "UI Patterns for Startups",
                "E-commerce Brand Identity",
                "Mobile Banking Interface",
                "Productivity App Portfolio",
                "Customer Support Platform"
            ];
            
            const galleryDescs = [
                "A comprehensive dashboard solution for enterprise clients.",
                "Typography and interaction patterns that guide user journeys.",
                "Minimalist branding with measurable conversion success metrics.",
                "Accessibility-focused design for financial literacy platforms.",
                "Product showcase interfaces that highlight features and benefits.",
                "Support system with ticketing and knowledge base components."
            ];
            
            for (let i = 0; i < 6; i++) {
                document.getElementById(`galleryTitle${i+1}`).textContent = galleryTitles[i];
                document.getElementById(`galleryDesc${i+1}`).textContent = galleryDescs[i];
            }
        }
        
        // Navigation functionality
        function setupNavigation() {
            const navLinks = document.querySelectorAll(".nav-link");
            const navLinksContainer = document.querySelector(".nav-links");
            const hamburger = document.querySelector(".hamburger");
            const navContainer = document.querySelector(".nav-container");
            const navLinksMobile = document.getElementById("navLinks");
            
            // Mobile menu toggle
            hamburger.addEventListener("click", () => {
                navLinksMobile.classList.toggle("show");
                hamburger.classList.toggle("active");
            });
            
            // Close mobile menu if window is resized to larger screen
            window.addEventListener("resize", () => {
                if (window.innerWidth > 768) {
                    if (navLinksMobile.classList.contains("show")) {
                        navLinksMobile.classList.remove("show");
                        hamburger.classList.remove("active");
                    }
                }
            });
            
            // Scroll reveal animation for navigation links
            window.addEventListener("scroll", () => {
                if (window.scrollY > 50) {
                    navContainer.classList.add("nav-scrolled");
                } else {
                    navContainer.classList.remove("nav-scrolled");
                }
                
                // Change active link on scroll
                let fromTop = navContainer.offsetTop;
                let current = window.scrollY;
                
                navLinks.forEach((link, index) => {
                    if (current >= fromTop - (window.innerHeight - 60) * (index + 1)) {
                        link.classList.add("active");
                    } else {
                        link.classList.remove("active");
                    }
                });
            });
            
            // Smooth scrolling for anchor links
            navLinks.forEach(link => {
                link.addEventListener("click", e => {
                    e.preventDefault();
                    const targetId = link.getAttribute("href").substring(1);
                    const targetSection = document.getElementById(targetId);
                    
                    if (targetSection) {
                        window.scrollTo({
                            top: targetSection.offsetTop - 80,
                            behavior: "smooth"
                        });
                        
                        // Close mobile menu if open
                        if (navLinksMobile.classList.contains("show")) {
                            navLinksMobile.classList.remove("show");
                            hamburger.classList.remove("active");
                        }
                    }
                });
            });
        }
        
        // Smooth scroll for CTA buttons
        function setupSmoothScroll() {
            document.getElementById("primaryCta").addEventListener("click", e => {
                e.preventDefault();
                const targetSection = document.getElementById("intro");
                window.scrollTo({
                    top: targetSection.offsetTop - 80,
                    behavior: "smooth"
                });
            });
            
            document.getElementById("secondaryCta").addEventListener("click", e => {
                e.preventDefault();
                const targetSection = document.getElementById("contact");
                window.scrollTo({
                    top: targetSection.offsetTop - 80,
                    behavior: "smooth"
                });
            });
        }
        
        // Gallery hover effect improvement
        function setupGalleryInteractions() {
            const galleryItems = document.querySelectorAll(".gallery-item");
            
            galleryItems.forEach(item => {
                item.addEventListener("mouseenter", () => {
                    const overlay = item.querySelector(".gallery-overlay");
                    if (overlay) {
                        overlay.style.transform = "translateY(0)";
                    }
                });
                
                item.addEventListener("mouseleave", () => {
                    const overlay = item.querySelector(".gallery-overlay");
                    if (overlay) {
                        overlay.style.transform = "translateY(100%)";
                    }
                });
            });
        }
        
        // Form submission
        function setupForm() {
            const form = document.querySelector(".contact-form");
            const submitBtn = document.getElementById("submitBtn");
            
            form.addEventListener("submit", (e) => {
                e.preventDefault();
                
                // Collect form data
                const name = document.getElementById("name").value;
                const email = document.getElementById("email").value;
                const message = document.getElementById("message").value;
                
                // In a real application, you would validate the data here
                // and send it to your server
                alert(`Thank you for your message, ${name}! We'll get back to you shortly.`);
                form.reset();
            });
        }
        
        // Initialize everything
        document.addEventListener("DOMContentLoaded", () => {
            populateContent();
            setupNavigation();
            setupSmoothScroll();
            setupGalleryInteractions();
            setupForm();
            
            // Initial scroll event to set navigation layout
            window.dispatchEvent(new Event("scroll"));
        });
    </script>
</body>
</html>
```