中央グラデ・ヒーロー

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

# 追加してほしい効果
中央グラデ・ヒーロー（ヒーロー & タイトル）
中央に大見出し（グラデーション文字）とCTAを置き、背景に揺れるメッシュグラデと点滅する微粒子を敷いた構成。プロダクトのトップやローンチLPの一枚目に向きます。

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

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- 中央グラデ・ヒーロー：中央に大見出し（グラデ文字）+サブ+CTA。背景は揺れるメッシュグラデと点滅する微粒子 -->
<section class="hcg">
  <div class="hcg__stars" id="hcgStars" aria-hidden="true"></div>
  <div class="hcg__inner">
    <span class="hcg__kicker">&#9670; AI Workflow Studio</span>
    <h1 class="hcg__title">アイデアを、<br><span>瞬時にプロダクトへ。</span></h1>
    <p class="hcg__sub">仕様書からプロトタイプまでを1つのワークスペースで。思考の速度のまま、手を動かせます。</p>
    <div class="hcg__cta">
      <a class="hcg__btn hcg__btn--primary" href="#" onclick="return false">無料で始める</a>
      <a class="hcg__btn hcg__btn--ghost" href="#" onclick="return false">製品ツアーを見る</a>
    </div>
  </div>
</section>

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

/* ルート：全幅フル、中央寄せの土台（自前でflex centerを組む） */
.hcg {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #0b0d18;
  color: #f4f3ff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px 24px;
}

/* 揺れるメッシュグラデーション（背景アニメ） */
.hcg::before {
  content: "";
  position: absolute; inset: -20%;
  background:
    radial-gradient(38% 42% at 20% 24%, rgba(124, 58, 237, .55), transparent 60%),
    radial-gradient(34% 40% at 82% 20%, rgba(34, 211, 238, .4), transparent 62%),
    radial-gradient(40% 46% at 55% 86%, rgba(236, 72, 153, .32), transparent 65%);
  filter: blur(10px);
  animation: hcgMesh 18s ease-in-out infinite alternate;
}
@keyframes hcgMesh {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-3%, 3%) scale(1.06); }
  100% { transform: translate(3%, -2%) scale(1); }
}

.hcg__stars { position: absolute; inset: 0; }
.hcg__stars span {
  position: absolute; border-radius: 50%;
  background: #fff; opacity: .5;
  animation: hcgTwinkle 3.2s ease-in-out infinite;
}
@keyframes hcgTwinkle {
  0%, 100% { opacity: .12; transform: scale(1); }
  50%      { opacity: .9;  transform: scale(1.6); }
}

.hcg__inner { position: relative; z-index: 1; max-width: 720px; }
.hcg__kicker {
  display: inline-block; padding: 7px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: #c9c2ff;
}
.hcg__title {
  margin: 16px 0 0; font-size: clamp(28px, 4.6vw, 44px); font-weight: 800; line-height: 1.2;
  color: #f4f3ff;
}
.hcg__title span {
  display: inline-block;
  background: linear-gradient(90deg, #a78bfa, #67e8f9 55%, #f0abfc);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% auto;
  animation: hcgShine 6s linear infinite;
}
@keyframes hcgShine { to { background-position: 200% center; } }

.hcg__sub { margin: 14px auto 0; max-width: 440px; font-size: 14.5px; line-height: 1.75; color: #b9b6cf; }
.hcg__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hcg__btn {
  padding: 12px 26px; border-radius: 12px; font-size: 14px; font-weight: 700; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.hcg__btn--primary { color: #100c22; background: linear-gradient(135deg, #f4f3ff, #c9c2ff); box-shadow: 0 14px 30px rgba(124, 58, 237, .35); }
.hcg__btn--primary:hover { transform: translateY(-2px); }
.hcg__btn--ghost { color: #f4f3ff; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .22); }
.hcg__btn--ghost:hover { border-color: rgba(255, 255, 255, .5); transform: translateY(-2px); }

@media (max-width: 560px) {
  .hcg { padding: 26px 20px; }
  .hcg__title { font-size: clamp(24px, 7.6vw, 32px); }
}

@media (prefers-reduced-motion: reduce) {
  .hcg::before, .hcg__title span, .hcg__stars span { animation: none; }
}

【JavaScript】
// 中央グラデ・ヒーロー：背景に点滅する微粒子（星）をランダム生成して敷き詰める。
(() => {
  const host = document.getElementById('hcgStars');
  if (!host) return;

  const COUNT = 34;
  const frag = document.createDocumentFragment();
  for (let i = 0; i < COUNT; i++) {
    const s = document.createElement('span');
    const size = 1 + Math.random() * 2; // 1〜3px
    s.style.left = (Math.random() * 100).toFixed(2) + '%';
    s.style.top = (Math.random() * 100).toFixed(2) + '%';
    s.style.width = size.toFixed(2) + 'px';
    s.style.height = size.toFixed(2) + 'px';
    s.style.animationDelay = (Math.random() * 3.2).toFixed(2) + 's';
    s.style.animationDuration = (2.6 + Math.random() * 2.4).toFixed(2) + 's';
    frag.appendChild(s);
  }
  host.appendChild(frag);
})();

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

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