Minimalist Centered Hero

<!DOCTYPE html>
<title>My Example</title>

<style>
    :root {
        --mch-padding: 4rem 1.5rem;
        --mch-min-height: 400px;
        --mch-bg-color: #ffffff;
        --mch-text-color: #4b5563;
        --mch-headline-color: #111827;
        --mch-cta-bg: #111827;
        --mch-cta-hover-bg: #374151;
        --mch-cta-text-color: #ffffff;
        --mch-max-width: 900px;
    }
    .minimal-centered-hero {
        box-sizing: border-box;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        background-color: var(--mch-bg-color);
        min-height: var(--mch-min-height);
        padding: var(--mch-padding);
        width: 100%;

display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .minimal-centered-hero * {
         box-sizing: border-box;
    }
    .mch-content {
        max-width: var(--mch-max-width);
    }
    .mch-content .title {
        color: var(--mch-headline-color);
        margin: 0 0 1rem 0;
        font-size: clamp(2.5rem, 5vw, 4rem);
        font-weight: 800;
        line-height: 1.2;
    }
    .mch-content .subtitle {
        color: var(--mch-text-color);
        line-height: 1.6;
        font-size: 1.15rem;
        margin: 0 auto 2.5rem;
        max-width: 650px;
    }
    .mch-content .cta-button {
        display: inline-block;
        background-color: var(--mch-cta-bg);
        color: var(--mch-cta-text-color);
        padding: 1rem 2.5rem;
        border-radius: 8px;
        font-size: 1.05rem;
        font-weight: 600;
        text-decoration: none;
        transition: background-color 0.3s ease;
    }
    .mch-content .cta-button:hover {
        background-color: var(--mch-cta-hover-bg);
    }
</style>

<section class="minimal-centered-hero">
    <div class="mch-content">
        <h1 class="title">Clarity in Complexity</h1>
        <p class="subtitle">We build elegant, high-performance software that solves real-world business problems simply and efficiently.</p>
        <a href="#" role="button" class="cta-button">Explore Our Work</a>
    </div>
</section>