```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Learn about our technology company - our mission, team, and values">
  <title>About Us | Tech Company</title>
  <style>
    /* === CSS Variables === */
    :root {
      --primary-color: #0069d9;
      --secondary-color: #004a99;
      --accent-color: #00dcb0;
      --dark-text: #222;
      --mid-text: #444;
      --light-text: #f8f9fa;
      --background-light: #fff;
      --background-alt: #f0f4f8;
      --shadow: 0 4px 8px rgba(0,0,0,0.04);
      --transition: all 0.3s ease;
    }

    /* === Base Styles === */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: var(--dark-text);
      line-height: 1.6;
      background-color: var(--background-light);
    }

    h1, h2, h3, h4, h5 {
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 1rem;
    }

    h1 {
      font-size: 2.5rem;
    }

    h2 {
      font-size: 2rem;
      color: var(--primary-color);
    }

    h3 {
      font-size: 1.5rem;
    }

    p {
      margin-bottom: 1.25rem;
      color: var(--mid-text);
    }

    img {
      max-width: 100%;
      height: auto;
    }

    a {
      text-decoration: none;
      color: var(--primary-color);
      transition: var(--transition);
    }

    .container {
      width: 100%;
      padding: 0 1.5rem;
      margin: 0 auto;
    }

    .btn {
      display: inline-block;
      padding: 0.75rem 1.5rem;
      background-color: var(--primary-color);
      color: var(--light-text);
      border-radius: 4px;
      border: none;
      cursor: pointer;
      font-weight: 600;
      transition: var(--transition);
    }

    .btn:hover {
      background-color: var(--secondary-color);
    }

    .section {
      padding: 4rem 0;
    }

    .section-title {
      text-align: center;
      margin-bottom: 3rem;
    }

    /* === Layout === */
    /* Header */
    header {
      background-color: var(--background-light);
      box-shadow: var(--shadow);
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .header-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.25rem 0;
    }

    .logo {
      font-size: 1.5rem;
      font-weight: 900;
      color: var(--primary-color);
    }

    /* Navigation */
    nav ul {
      display: flex;
      list-style: none;
      gap: 1.25rem;
    }

    nav a {
      font-weight: 600;
      position: relative;
    }

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

    nav a:hover::after,
    nav a:focus::after {
      width: 100%;
    }

    /* Hero Section */
    .hero {
      background: linear-gradient(120deg, rgba(0, 105, 217, 0.2) 0%, rgba(37, 59, 100, 0.1) 100%);
      text-align: center;
      padding: 7rem 0 5rem;
    }

    .hero-content {
      max-width: 800px;
      margin: 0 auto;
    }

    /* Values Section */
    .values {
      background-color: var(--background-alt);
    }

    .values-grid {
      display: grid;
      gap: 2rem;
    }

    .value-card {
      background: var(--background-light);
      border-radius: 8px;
      box-shadow: var(--shadow);
      padding: 2rem;
      transition: transform 0.3s ease;
    }

    .value-card:hover {
      transform: translateY(-5px);
    }

    .value-card h3 {
      margin: 1.5rem 0 1rem;
      color: var(--primary-color);
    }

    /* Team Section */
    .team-grid {
      display: grid;
      gap: 2rem;
    }

    .team-card {
      border-radius: 8px;
      overflow: hidden;
    }

    .team-card img {
      width: 100%;
      height: 250px;
      object-fit: cover;
      transition: var(--transition);
    }

    .team-card:hover img {
      transform: scale(1.05);
    }

    .team-info {
      padding: 1.5rem;
      background: var(--background-light);
    }

    /* Call to Action */
    .cta {
      background: linear-gradient(120deg, var(--primary-color), var(--secondary-color));
      color: var(--light-text);
      text-align: center;
    }

    .cta-content {
      max-width: 800px;
      margin: 0 auto;
    }

    .cta h2 {
      color: white;
    }

    .cta p {
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 2rem;
    }

    .btn-light {
      background: var(--accent-color);
      color: var(--dark-text);
    }

    .btn-light:hover {
      background: #00ae8d;
    }

    /* Footer */
    footer {
      background-color: #001a33;
      color: var(--light-text);
      padding: 3.5rem 0 2rem;
    }

    .footer-grid {
      display: grid;
      gap: 2rem;
      margin-bottom: 3rem;
    }

    .footer-col h3 {
      color: var(--accent-color);
      font-size: 1.2rem;
      margin-bottom: 1.25rem;
    }

    .footer-links {
      list-style: none;
    }

    .footer-links li {
      margin-bottom: 0.7rem;
    }

    .footer-links a {
      color: rgba(255, 255, 255, 0.8);
    }

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

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

    .social-icon {
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      transition: var(--transition);
    }

    .social-icon:hover {
      background: var(--accent-color);
      transform: translateY(-3px);
    }

    .copyright {
      text-align: center;
      padding-top: 2rem;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.6);
      font-size: 0.9rem;
    }

    /* === Responsive Design === */
    @media (min-width: 768px) {
      .container {
        max-width: 720px;
        padding: 0;
      }

      nav ul {
        gap: 2rem;
      }

      h1 {
        font-size: 3.2rem;
      }

      .values-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .team-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 992px) {
      .container {
        max-width: 960px;
      }

      .hero {
        padding: 10rem 0 8rem;
      }

      .content-block {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
      }

      .content-block img {
        border-radius: 12px;
        box-shadow: var(--shadow);
      }

      .content-block.reverse {
        grid-template-columns: 1fr 1fr;
        direction: rtl;
      }

      .content-block.reverse .block-text {
        direction: ltr;
      }

      .team-grid {
        grid-template-columns: repeat(4, 1fr);
      }

      .footer-grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }
  </style>
</head>
<body>
  <header id="top">
    <div class="container header-container">
      <a href="#" class="logo" aria-label="Tech Company">TechCo</a>
      <nav aria-label="Main Navigation">
        <ul>
          <li><a href="#about">About</a></li>
          <li><a href="#team">Team</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main>
    <section class="hero" aria-labelledby="hero-heading">
      <div class="container hero-content">
        <h1 id="hero-heading">About Us</h1>
        <p>We're crafting the future of technology through innovation, dedication, and exceptional expertise to solve tomorrow's challenges.</p>
      </div>
    </section>

    <section id="about" class="section" aria-labelledby="about-heading">
      <div class="container">
        <h2 id="about-heading" class="section-title">Who We Are</h2>
        <div class="content-block">
          <div>
            <h3>Our Journey</h3>
            <p>Founded in 2015, we started as a small team with big ideas. Today, we've grown into an industry-leading technology company serving clients worldwide.</p>
            <p>Driven by our passion for innovation, we've built a reputation for creating secure and scalable solutions that transform businesses.</p>
          </div>
          <!-- Unsplash placeholder image for tech company -->
          <img src="https://source.unsplash.com/random/600x400/?technology,office" alt="Modern tech workspace with innovative office equipment">
        </div>
        
        <div class="content-block reverse">
          <div class="block-text">
            <h3>Our Mission</h3>
            <p>We believe technology should empower people and solve real-world problems. Our mission is to create intuitive solutions that accelerate progress and innovation.</p>
            <p>Every product we build focuses on enhancing human potential while remaining ethical and responsible in our approach to technology.</p>
          </div>
          <!-- Unsplash placeholder image for mission -->
          <img src="https://source.unsplash.com/random/600x400/?innovation,technology" alt="Team collaborating around a digital interface">
        </div>
      </div>
    </section>

    <section class="values section" aria-labelledby="values-heading">
      <div class="container">
        <h2 id="values-heading" class="section-title">Our Core Values</h2>
        <div class="values-grid">
          <div class="value-card">
            <h3>Innovation Driven</h3>
            <p>We constantly push boundaries through research and prototyping to deliver cutting-edge technology solutions.</p>
          </div>
          <div class="value-card">
            <h3>Client Focused</h3>
            <p>Our solutions are crafted around specific client needs with exceptional service and dedicated support.</p>
          </div>
          <div class="value-card">
            <h3>Integrity First</h3>
            <p>We conduct business with honesty and transparency, upholding the highest ethical standards in our work.</p>
          </div>
        </div>
      </div>
    </section>

    <section id="team" class="section" aria-labelledby="team-heading">
      <div class="container">
        <h2 id="team-heading" class="section-title">Our Leadership Team</h2>
        <div class="team-grid">
          <!-- Team member 1 -->
          <div class="team-card">
            <!-- Unsplash placeholder image for team member -->
            <img src="https://source.unsplash.com/random/300x300/?executive,female" alt="Sarah Chen, CEO">
            <div class="team-info">
              <h3>Sarah Chen</h3>
              <p>Chief Executive Officer</p>
            </div>
          </div>
          
          <!-- Team member 2 -->
          <div class="team-card">
            <img src="https://source.unsplash.com/random/300x300/?executive,male" alt="Marcus Johnson, CTO">
            <div class="team-info">
              <h3>Marcus Johnson</h3>
              <p>Chief Technology Officer</p>
            </div>
          </div>
          
          <!-- Team member 3 -->
          <div class="team-card">
            <img src="https://source.unsplash.com/random/300x300/?professional,woman" alt="Elena Rodriguez, VP Design">
            <div class="team-info">
              <h3>Elena Rodriguez</h3>
              <p>VP of Design</p>
            </div>
          </div>
          
          <!-- Team member 4 -->
          <div class="team-card">
            <img src="https://source.unsplash.com/random/300x300/?business,man" alt="David Park, VP Engineering">
            <div class="team-info">
              <h3>David Park</h3>
              <p>VP of Engineering</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section id="contact" class="cta section" aria-labelledby="cta-heading">
      <div class="container cta-content">
        <h2 id="cta-heading">Join Us in Shaping Tomorrow</h2>
        <p>We're always looking for passionate individuals who want to make a difference. Explore opportunities to collaborate with us.</p>
        <a href="#contact" class="btn btn-light">Contact Our Team</a>
      </div>
    </section>
  </main>

  <footer>
    <div class="container">
      <div class="footer-grid">
        <div class="footer-col">
          <h3>TechCo</h3>
          <p>Building innovative technology solutions for a smarter future.</p>
          <div class="social-links">
            <a href="#" class="social-icon" aria-label="Follow us on LinkedIn">
              <svg width="16" height="16" fill="white" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
            </a>
            <a href="#" class="social-icon" aria-label="Follow us on Twitter">
              <svg width="16" height="16" fill="white" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>
            </a>
          </div>
        </div>
        
        <div class="footer-col">
          <h3>Quick Links</h3>
          <ul class="footer-links">
            <li><a href="#about">About Company</a></li>
            <li><a href="#team">Our Team</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Case Studies</a></li>
            <li><a href="#">Careers</a></li>
          </ul>
        </div>
        
        <div class="footer-col">
          <h3>Services</h3>
          <ul class="footer-links">
            <li><a href="#">Software Development</a></li>
            <li><a href="#">Cloud Solutions</a></li>
            <li><a href="#">AI Solutions</a></li>
            <li><a href="#">Data Analytics</a></li>
            <li><a href="#">Cybersecurity</a></li>
          </ul>
        </div>
        
        <div class="footer-col">
          <h3>Contact Info</h3>
          <address>
            <p>123 Innovation Drive</p>
            <p>Tech City, TC 10001</p>
            <p>contact@techco.example</p>
            <p>+1 (123) 456-7890</p>
          </address>
        </div>
      </div>
      
      <div class="copyright">
        <p>&copy; 2023 TechCo. All rights reserved.</p>
      </div>
    </div>
  </footer>
</body>
</html>
```