TaskFlow landing page audit

Fixes in priority order

1. Page foundation is missing. There's no <!doctype>, lang, <meta viewport>, <title> or meta description. Without the viewport tag the page renders as a zoomed-out desktop page on phones. There's also no <main> or <header>, and no skip link.
2. The CTAs aren't usable.
   • Both buttons are bare <button>s with no action, so they do nothing.
   • The ghost button has no padding.
   • Neither has hover, focus or pressed styles.
   • "Get Started!" and "Learn More" are vague.
   • They should be links styled as buttons.
3. The features row breaks on mobile and is crowded.
   • display:flex with width:33% never wraps, so cards get crushed on phones.
   • There's no gap, no padding and no max-width container.
   • The black shadow (rgba(0,0,0,.3)) is invisible on a #000 background, so the cards have no visible edges.
4. Content problems.
   • "99.99% uptime" sits under "Insights", which is a mismatch.
   • It's also an unsourced claim. If it's true, show it as a sourced stat. If not, drop it.
   • "Launch quickly" and "Your data is safe" say nothing specific.
   • The testimonial ("Great tool!" - John Doe) reads as a placeholder and hurts trust. Use a real quote with a name, role and company.
5. Accessibility details.
   • The images have no alt. Here they're decorative next to headings, so use alt="".
   • Headings jump from h1 to h3, so the features need an h2.
   • 100vh jumps on iOS Safari. Use min-height:100dvh.
   • Add prefers-reduced-motion handling.
6. Visual polish.
   • Pure #000 is harsh, so use an off-black.
   • The 45° purple-to-blue gradient is a very common template look. Use one muted accent with a soft radial glow instead.
   • Use a centered headline only when it earns it. Left-aligned reads more editorial.
   • The three equal cards are the most generic feature layout, so I made the grid asymmetric.
   • The headline needs tighter tracking and text-wrap: balance.
   • Rocket and shield are cliché icons. I kept your files since I can't see the assets, but consider swapping them.
7. Copy clichés. "Elevate", "Seamlessly", "Unleash" and "next-gen" are filler. The replacement copy below is a draft. Check it against what TaskFlow actually does.
8. Inline styles. Move them to a stylesheet, as below.

Corrected hero and features

Brand name and links are unchanged. I assumed the CTAs point to /login and #features. Change "Get Started" to your signup URL if you have one.

<style>
  :root {
    --bg: #0c0c10;
    --surface: #14141a;
    --border: rgba(255, 255, 255, .08);
    --text: #f4f4f6;
    --muted: #a0a0ad;
    --accent: #7c6cf0;        /* single accent, saturation kept low */
    --accent-hover: #9183f5;
    --on-accent: #0c0c10;
    --max: 1200px;
  }

  .hero {
    min-height: 100dvh;
    display: grid;
    align-items: center;
    padding: 6rem 1.5rem;
    background:
      radial-gradient(60rem 30rem at 15% 0%, rgba(124, 108, 240, .22), transparent 70%),
      var(--bg);
  }
  .hero__inner { width: min(100%, var(--max)); margin-inline: auto; }
  .hero h1 {
    max-width: 14ch;
    margin: 0 0 1.5rem;
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -.035em;
    text-wrap: balance;
  }
  .hero p {
    max-width: 52ch;
    margin: 0 0 2.5rem;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--muted);
    text-wrap: pretty;
  }
  .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }

  .btn {
    display: inline-block;
    padding: .875rem 1.5rem;
    border-radius: .625rem;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, transform .2s;
  }
  .btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
  .btn:active { transform: scale(.98); }
  .link-quiet { color: var(--text); text-underline-offset: .3em; }
  .btn:focus-visible, .link-quiet:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 3px;
  }

  .features { padding: 6rem 1.5rem 7rem; background: var(--bg); }
  .features__inner { width: min(100%, var(--max)); margin-inline: auto; }
  .features h2 {
    max-width: 20ch;
    margin: 0 0 3rem;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.1;
    text-wrap: balance;
  }
  .features__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
  }
  .card {
    grid-column: span 12;
    padding: 2rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
  }
  .card img { width: 2rem; height: 2rem; margin-bottom: 1.5rem; }
  .card h3 { margin: 0 0 .5rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }
  .card p { margin: 0; max-width: 46ch; line-height: 1.6; color: var(--muted); }

  @media (min-width: 52rem) {
    .card--wide   { grid-column: span 7; }
    .card--narrow { grid-column: span 5; }
  }
  @media (prefers-reduced-motion: reduce) {
    .btn { transition: none; }
    .btn:hover, .btn:active { transform: none; }
  }
</style>

<section class="hero">
  <div class="hero__inner">
    <h1>Plan the work. Ship it on time.</h1>
    <p>TaskFlow keeps tasks, owners and deadlines in one place, so your team always knows what's next.</p>
    <div class="hero__actions">
      <a class="btn" href="/login">Get started</a>
      <a class="link-quiet" href="#features">See how it works</a>
    </div>
  </div>
</section>

<section class="features" id="features" aria-labelledby="features-title">
  <div class="features__inner">
    <h2 id="features-title">Everything your team needs to keep projects moving</h2>
    <div class="features__grid">
      <article class="card card--wide">
        <img src="/i/rocket.svg" alt="" width="32" height="32">
        <h3>Add tasks in seconds</h3>
        <p>Capture a task, assign an owner and set a due date from a single quick-entry box.</p>
      </article>
      <article class="card card--narrow">
        <img src="/i/shield.svg" alt="" width="32" height="32">
        <h3>Control who sees what</h3>
        <p>Set access per project and per person.</p>
      </article>
      <article class="card">
        <img src="/i/chart.svg" alt="" width="32" height="32">
        <h3>See where projects stand</h3>
        <p>Track progress across projects and spot slipping deadlines before they become problems.</p>
      </article>
    </div>
  </div>
</section>

Things to do outside these two sections

• Add <!doctype html>, <html lang="en">, the viewport meta, a <title> and a meta description.
• Set body to background: var(--bg) and margin: 0.
• Wrap the page content in <main>.
• Wrap the nav in <header> and add focus styles to its links.
• Load your font with a <link>. I'd try Geist or Outfit in place of Inter, but that's your call as a brand decision.
• Replace the testimonial with a real quote, styled as a <figure> with a <blockquote> and <figcaption>.
• Add a footer with privacy and terms links.
• The feature copy is a draft. Rewrite any line that doesn't match what the product does. If you want to keep the uptime claim, show it as its own sourced stat.