<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>About Us – Microsoft</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* ===== Variables ===== */
:root{
  --primary:#0078d4;
  --secondary:#f3f3f3;
  --text:#333;
  --bg:#fff;
  --font-sans:Arial,Helvetica,sans-serif;
  --space:1rem;
}

/* ===== Base ===== */
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font-sans);color:var(--text);background:var(--bg);line-height:1.6;}
a{color:var(--primary);text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
ul{list-style:none;}
h1,h2,h3{margin-bottom:.5rem;}

/* ===== Layout ===== */
.container{max-width:1200px;margin:auto;padding:var(--space);}
header{background:var(--primary);color:var(--bg);padding:var(--space) 0;}
main{padding:var(--space) 0;}
footer{background:var(--secondary);color:var(--text);text-align:center;padding:var(--space) 0;}

/* ===== Components ===== */
nav{display:flex;justify-content:space-between;align-items:center;}
nav a{color:var(--bg);font-weight:500;}
nav ul{display:flex;gap:1.5rem;}
.hero{position:relative;background:url('https://images.unsplash.com/photo-1525097487452-c2c624ba96fb?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=75') center/cover no-repeat;color:var(--bg);text-align:center;padding:6rem 1rem;}
.hero h1{font-size:2.5rem;font-weight:700;margin:auto;max-width:80ch;}
.hero p{font-size:1.2rem;margin:auto;margin-top:1rem;max-width:60ch;}
.team-img{margin-top:2rem;}

/* ===== Responsive ===== */
@media(min-width:600px){
  .hero h1{font-size:3.5rem;}
  .hero p{font-size:1.5rem;}
}
@media(min-width:900px){
  nav ul{gap:2.5rem;}
  .hero{padding:10rem 1rem;}
}
</style>
</head>
<body>
<header aria-label="Top" role="banner">
  <nav aria-label="Main navigation">
    <div class="container">
      <a href="/">Microsoft</a>
      <ul>
        <li><a href="/home">Home</a></li>
        <li><a href="/about">About Us</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </div>
  </nav>
</header>

<main role="main" class="container">
  <section class="hero" aria-label="About Us Hero">
    <h1>About Us</h1>
    <p>Discover our mission, values, and the people who bring Microsoft’s vision to life.</p>
  </section>

  <section aria-labelledby="team-heading">
    <h2 id="team-heading">Our Team</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel sapien eu sapien faucibus aliquet non ac dolor.</p>
    <figure class="team-img">
      <img src="https://images.unsplash.com/photo-1564760602454-061527c75b88?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Team collaborating">
      <figcaption>Collaborative work environment.</figcaption>
    </figure>
  </section>
</main>

<footer role="contentinfo">
  <div class="container">© 2025 Microsoft. All rights reserved.</div>
</footer>
</body>
</html>