ベント・ヒーロー

あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「ベント・ヒーロー」の効果を追加してください。

# 追加してほしい効果
ベント・ヒーロー（ヒーロー & タイトル）
見出しブロックの周囲に統計・写真・CTA・導入企業ロゴのタイルを非対称グリッドで配置したベント構成。情報を1画面に凝縮したいSaaSのトップページに使えます。

# 追加する場所
👉【ここに対象箇所を記入：例「トップのヒーローセクション」「お問い合わせボタン」「記事カードの一覧」など】

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- ベント・ヒーロー：見出しブロックの周囲に統計/写真/CTA/導入企業ロゴのタイルを非対称グリッドで配置 -->
<section class="hb">
  <div class="hb__grid">
    <div class="hb__tile hb__tile--head">
      <span class="hb__k">PRODUCT LAUNCH</span>
      <h1 class="hb__title">仕事の流れを、<br>ひとつの画面に。</h1>
      <p class="hb__sub">タスク・進捗・レポートを1つのビューへ集約する、チームのための新しい管理画面。</p>
      <a class="hb__btn" href="#" onclick="return false">今すぐ始める</a>
    </div>
    <div class="hb__tile hb__tile--stat">
      <span class="hb__k">導入継続率</span>
      <b class="hb__num">98.4<span>%</span></b>
      <p class="hb__note">導入企業の平均値</p>
    </div>
    <div class="hb__tile hb__tile--img" style="--img:url('https://picsum.photos/id/1015/640/900')">
      <span class="hb__img-tag">Real-time View</span>
    </div>
    <a class="hb__tile hb__tile--cta" href="#" onclick="return false">
      <span class="hb__k">Resources</span>
      <b>資料をダウンロード</b>
      <span class="hb__arrow" aria-hidden="true">&rarr;</span>
    </a>
    <div class="hb__tile hb__tile--logos">
      <span class="hb__k">導入企業</span>
      <div class="hb__logos">
        <span>NOVA</span><span>ORBIT</span><span>ZETA</span><span>ARC</span>
      </div>
    </div>
  </div>
</section>

【CSS】
* { box-sizing: border-box; }
body {
  margin: 0;
  display: block;
  background: #0e1016;
  font-family: "Segoe UI", "Hiragino Sans", system-ui, sans-serif;
}

/* ルート：全幅フル、ベントグリッドを縦中央に配置 */
.hb {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: radial-gradient(120% 100% at 50% -10%, #171a2b, #0b0d15 65%);
  color: #eef0fb;
  padding: 26px 28px;
  display: flex;
  align-items: center;
}

.hb__grid {
  width: 100%; max-width: 1080px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, minmax(72px, auto));
  grid-template-areas:
    "head head head stat"
    "head head head img"
    "logo cta  cta  img";
  gap: 12px;
}

.hb__tile {
  position: relative; overflow: hidden; border-radius: 16px;
  background: #141726; border: 1px solid #262a42;
  padding: 15px; display: flex; flex-direction: column; justify-content: center;
  min-height: 84px;
  transition: transform .25s ease, border-color .25s ease;
}
.hb__tile:hover { transform: translateY(-3px); border-color: #3a3f66; }

.hb__tile--head {
  grid-area: head; justify-content: center; min-height: 168px;
  background: linear-gradient(155deg, #1c2036, #141726 60%);
}
.hb__k { font-size: 10px; font-weight: 800; letter-spacing: .2em; color: #8b91c9; }
.hb__title { margin: 10px 0 0; font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; line-height: 1.32; }
.hb__sub { margin: 10px 0 0; max-width: 420px; font-size: 13px; line-height: 1.65; color: #a9adcf; }
.hb__btn {
  align-self: flex-start; margin-top: 14px; padding: 10px 20px; border-radius: 10px;
  background: linear-gradient(135deg, #818cf8, #22d3ee); color: #0a0c14;
  font-size: 13px; font-weight: 800; text-decoration: none;
  transition: transform .2s ease;
}
.hb__btn:hover { transform: translateY(-2px); }

.hb__tile--stat { grid-area: stat; }
.hb__num { margin-top: 8px; font-size: 30px; font-weight: 800; color: #fff; }
.hb__num span { font-size: 18px; color: #8b91c9; }
.hb__note { margin: 6px 0 0; font-size: 11.5px; color: #8b91c9; }

.hb__tile--img {
  grid-area: img; padding: 0; justify-content: flex-end; min-height: 150px;
  background-image: var(--img); background-size: 112% auto; background-position: center;
  animation: hbZoom 14s ease-in-out infinite alternate;
}
@keyframes hbZoom { from { background-size: 112% auto; } to { background-size: 128% auto; } }
.hb__tile--img::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(9, 10, 18, .85), transparent 60%);
}
.hb__img-tag {
  position: relative; z-index: 1; margin: 14px; align-self: flex-start;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #eef0fb;
  background: rgba(10, 12, 20, .5); padding: 6px 10px; border-radius: 999px;
}

.hb__tile--cta {
  grid-area: cta; text-decoration: none; color: #0a0c14; cursor: pointer;
  background: linear-gradient(120deg, #22d3ee, #818cf8);
  flex-direction: row; align-items: center; justify-content: space-between; gap: 12px;
}
.hb__tile--cta .hb__k { color: rgba(10, 12, 20, .55); }
.hb__tile--cta b { font-size: 15px; font-weight: 800; }
.hb__arrow { font-size: 18px; font-weight: 800; transition: transform .2s ease; }
.hb__tile--cta:hover .hb__arrow { transform: translateX(4px); }

.hb__tile--logos { grid-area: logo; }
.hb__logos { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
.hb__logos span { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #6b7196; font-family: Consolas, monospace; }

@media (max-width: 760px) {
  .hb { padding: 18px 16px; }
  /* モバイルは2カラムのまま保持し、統計/CTAを横並びにして縦積みの高さを抑える */
  .hb__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "head head"
      "img  img"
      "stat cta"
      "logo logo";
    gap: 8px;
  }
  .hb__tile { padding: 12px; }
  .hb__tile--head { min-height: 0; }
  .hb__title { font-size: clamp(19px, 5.6vw, 24px); margin-top: 8px; }
  .hb__sub { font-size: 12.5px; line-height: 1.55; margin-top: 8px; }
  .hb__btn { margin-top: 10px; padding: 9px 18px; }
  .hb__tile--img { min-height: 96px; }
  .hb__tile--cta { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; }
}
@media (max-width: 420px) {
  .hb__grid { grid-template-columns: 1fr; grid-template-areas: "head" "img" "stat" "cta" "logo"; }
}

@media (prefers-reduced-motion: reduce) {
  .hb__tile--img { animation: none; }
}

【JavaScript】
// ベント・ヒーロー：写真タイルのゆっくりズームはCSSアニメーションのみで完結。
// JSでの追加処理は不要（IIFEのみ・将来の拡張用に空で保持）。
(() => {})();

# 外部ライブラリ
なし（追加ライブラリ不要）

# 守ってほしいこと
- 既存のHTML構造・レイアウト・デザインを壊さないこと。必要に応じてクラス名・色・サイズを私のサイトに合わせて調整してよい。
- クラス名やidが既存と衝突しないよう、必要なら接頭辞で名前空間を分けること。
- レスポンシブ対応と prefers-reduced-motion への配慮を入れること。
- 私のサイトのフレームワーク（React / Vue / 素のHTML など）に合わせて実装すること。不明な場合は素のHTML/CSS/JSで提示し、組み込み手順も説明すること。
- 変更後の確認手順も簡潔に教えてください。