<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VECTORGRAPHIC — Visual Identity & Web Design</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        body { background-color: #0d0f12; color: #ffffff; line-height: 1.6; }
        
        /* Navigation */
        nav { display: flex; justify-content: space-between; align-items: center; padding: 20px 8%; background: #15181e; border-bottom: 1px solid #282c34; }
        .logo { font-size: 22px; font-weight: 800; tracking: 2px; color: #ffffff; text-transform: uppercase; }
        .logo span { color: #ff7a00; }
        .nav-links { list-style: none; display: flex; gap: 30px; }
        .nav-links a { color: #a0a6b1; text-decoration: none; font-weight: 500; transition: 0.3s; }
        .nav-links a:hover { color: #ffffff; }
        .cta-btn { background: linear-gradient(135deg, #ff7a00, #a236eb); color: #fff; padding: 10px 24px; text-decoration: none; border-radius: 6px; font-weight: 600; }
        
        /* Hero Section */
        .hero { text-align: center; padding: 100px 10%; background: radial-gradient(circle at center, #1e1b2e 0%, #0d0f12 70%); }
        .hero h1 { font-size: 52px; font-weight: 800; margin-bottom: 20px; line-height: 1.2; }
        .hero p { font-size: 18px; color: #9fa6b2; max-width: 650px; margin: 0 auto 35px auto; }
        .hero-btns { display: flex; justify-content: center; gap: 15px; }
        .btn-secondary { border: 1px solid #3a3f4d; color: #fff; padding: 12px 28px; text-decoration: none; border-radius: 6px; font-weight: 600; }
        
        /* Services Section */
        .services { padding: 80px 8%; text-align: center; }
        .services h2 { font-size: 32px; margin-bottom: 40px; }
        .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
        .card { background: #15181e; padding: 40px 30px; border-radius: 12px; border: 1px solid #232730; text-align: left; }
        .card h3 { font-size: 20px; margin-bottom: 12px; color: #ff7a00; }
        .card p { color: #9fa6b2; font-size: 15px; }
        
        /* Footer Banner */
        .cta-banner { background: #15181e; margin: 60px 8%; padding: 50px; border-radius: 12px; text-align: center; border: 1px solid #2a2f3a; }
        .cta-banner h2 { margin-bottom: 15px; }
        .cta-banner p { color: #9fa6b2; margin-bottom: 25px; }
    </style>
</head>
<body>

    <!-- Header Navigation -->
    <nav>
        <div class="logo">VECTOR<span>GRAPHIC</span></div>
        <ul class="nav-links">
            <li><a href="#home">Home</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#about">About</a></li>
        </ul>
        <a href="#contact" class="cta-btn">Get Started</a>
    </nav>

    <!-- Hero Section -->
    <section class="hero" id="home">
        <h1>Transforming Ideas Into Iconic Brands</h1>
        <p>We create bold vector logos, high-converting websites, and complete visual identities engineered to elevate your business.</p>
        <div class="hero-btns">
            <a href="#portfolio" class="cta-btn">View Portfolio</a>
            <a href="#contact" class="btn-secondary">Book a Call</a>
        </div>
    </section>

    <!-- Services Section -->
    <section class="services" id="services">
        <h2>Our Core Offerings</h2>
        <div class="grid">
            <div class="card">
                <h3>🎨 Brand Identity</h3>
                <p>Custom vector logo design, distinct color palettes, typography specs, and comprehensive brand style guides.</p>
            </div>
            <div class="card">
                <h3>💻 Web Design</h3>
                <p>Modern, responsive landing pages and full website platforms tailored for high engagement and conversion.</p>
            </div>
            <div class="card">
                <h3>👕 Apparel & Promo</h3>
                <p>Custom merchandise mockups, promotional flyers, social media ad kits, and print graphics.</p>
            </div>
        </div>
    </section>

    <!-- CTA Banner -->
    <section class="cta-banner" id="contact">
        <h2>Ready to Elevate Your Brand?</h2>
        <p>Let's collaborate and build a digital identity that drives growth.</p>
        <a href="mailto:contact@vectorgraphic.com" class="cta-btn">Contact Vectorgraphic</a>
    </section>

</body>
</html>
