/* Hero Section Styles */
.hero {
  background: url('hero-background.jpg') center/cover no-repeat;
  /* Example: a dark overlay on the background image for contrast */
  position: relative;
  color: #fff;
  text-align: center;
  padding: 4rem 2rem;
}
.hero::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5); /* dark overlay */
}
.hero-content {
  position: relative; /* to position content above overlay */
  max-width: 600px;
  margin: 0 auto;
}
.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.hero .subtitle {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}
.cta-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: #6C63FF; /* vibrant accent color, e.g., a neon purple/blue */
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  transition: background 0.3s ease;
}
.cta-button:hover {
  background: #5852d6; /* slightly darker shade on hover */
}

<header class="hero">
  <div class="hero-content">
    <h1>Clear Speech, Connected World.</h1>
    <p class="subtitle">
      Break language barriers with AI that removes accents, translates in real time, and enhances speech clarity.
    </p>
    <a href="#contact" class="cta-button">Request a Demo</a>
  </div>
</header>