<section class="hs-sop" aria-label="Hero">
  <div class="hs-sop-inner">
    <span class="hs-sop-stars" aria-label="Rated 4.9 out of 5"
      >★★★★★ <em>4.9 from 12,400 reviews</em></span
    >
    <h2>Recipes from <em>real grandmothers,</em> measured for real kitchens.</h2>
    <p>Saved by 500,000 home cooks who never want to scroll past life-stories again.</p>
    <a class="hs-sop-cta" href="#start">Open the cookbook</a>
    <ul class="hs-sop-logos" aria-label="Featured by">
      <li>NYT</li>
      <li>BON APPÉTIT</li>
      <li>EATER</li>
      <li>GUARDIAN</li>
      <li>SAVEUR</li>
    </ul>
  </div>
</section>

.hs-sop {
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background:
    radial-gradient(70% 60% at 50% 0%, #f7ecd3, transparent 70%),
    #faf3e3;
  font-family: 'Inter', system-ui, sans-serif;
  color: #3a2845;
  box-sizing: border-box;
}
.hs-sop-inner { max-width: 720px; text-align: center; width: 100%; }
.hs-sop-stars {
  display: inline-block; padding: 6px 14px;
  background: #fff; border: 1px solid #e2c89a;
  border-radius: 999px; color: #c9962b;
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  margin-bottom: 22px;
}
.hs-sop-stars em { color: #6b614f; font-style: normal; font-weight: 500; margin-left: 6px; }
.hs-sop h2 {
  margin: 0 0 16px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 600; letter-spacing: -0.01em; line-height: 1.1;
  color: #3a4f2a;
}
.hs-sop h2 em { color: #6b1e4a; font-style: italic; }
.hs-sop p { margin: 0 auto 28px; font-size: 16px; line-height: 1.55; color: #6b614f; max-width: 480px; }
.hs-sop-cta {
  display: inline-block; padding: 13px 26px;
  background: #6b1e4a; color: #faf3e3;
  border-radius: 4px; text-decoration: none;
  font-weight: 700; font-size: 14px; letter-spacing: 0.04em;
  margin-bottom: 32px;
  transition: background 0.18s;
}
.hs-sop-cta:hover { background: #4a1232; }
.hs-sop-logos {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 38px); justify-content: center;
  padding-top: 24px; border-top: 1px solid #e2c89a;
}
.hs-sop-logos li {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
  color: #6b614f;
}
@media (prefers-reduced-motion: reduce) { .hs-sop-cta { transition: none; } }