ダーク発光ヒーロー

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

# 追加してほしい効果
ダーク発光ヒーロー（ヒーロー & タイトル）
漆黒の背景に発光する見出しとオーロラ状のグラデーションを重ねた先進的なヒーロー。淡い格子とテキストの発光パルスが未来的な雰囲気を演出します。

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

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- ダーク発光ヒーロー：漆黒背景に発光する見出し＋オーロラ状グラデ＋CTA。先進的な雰囲気 -->
<section class="hdg">
  <div class="hdg__aurora" aria-hidden="true"></div>
  <div class="hdg__grid" aria-hidden="true"></div>
  <div class="hdg__inner">
    <span class="hdg__kicker">NEXT GENERATION ENGINE</span>
    <h1 class="hdg__title">未知を、<br><span class="hdg__glow-text">動かす力に。</span></h1>
    <p class="hdg__sub">推論・生成・実行を1つのランタイムへ。次のプロダクトの基盤になる、静かで圧倒的な計算基盤です。</p>
    <div class="hdg__cta">
      <a class="hdg__btn hdg__btn--primary" href="#" onclick="return false">アクセスを申請</a>
      <a class="hdg__btn hdg__btn--ghost" href="#" onclick="return false">技術資料を見る</a>
    </div>
  </div>
</section>

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

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

/* オーロラ状に揺れるグラデーション（背景アニメ） */
.hdg__aurora {
  position: absolute; inset: -25%;
  background:
    radial-gradient(32% 40% at 24% 22%, rgba(56, 189, 248, .38), transparent 60%),
    radial-gradient(30% 38% at 76% 18%, rgba(168, 85, 247, .34), transparent 62%),
    radial-gradient(34% 42% at 50% 88%, rgba(16, 185, 129, .22), transparent 65%);
  filter: blur(30px);
  animation: hdgAurora 20s ease-in-out infinite alternate;
}
@keyframes hdgAurora {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(-4%, 4%) scale(1.1) rotate(3deg); }
  100% { transform: translate(4%, -3%) scale(1) rotate(-2deg); }
}

/* 淡い格子（先進感の演出） */
.hdg__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(60% 60% at 50% 45%, #000, transparent 75%);
}

.hdg__inner { position: relative; z-index: 1; max-width: 700px; }
.hdg__kicker {
  display: inline-block; padding: 7px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .16);
  font-size: 11px; font-weight: 700; letter-spacing: .18em; color: #93c5fd;
}
.hdg__title {
  margin: 18px 0 0; font-size: clamp(30px, 5vw, 48px); font-weight: 800; line-height: 1.24;
  color: #f2f4ff;
}
.hdg__glow-text {
  display: inline-block; color: #eafcff;
  text-shadow:
    0 0 18px rgba(103, 232, 249, .85),
    0 0 46px rgba(168, 85, 247, .55);
  animation: hdgPulse 3.6s ease-in-out infinite;
}
@keyframes hdgPulse {
  0%, 100% {
    text-shadow: 0 0 18px rgba(103, 232, 249, .7), 0 0 46px rgba(168, 85, 247, .45);
  }
  50% {
    text-shadow: 0 0 26px rgba(103, 232, 249, 1), 0 0 64px rgba(168, 85, 247, .75);
  }
}
.hdg__sub { margin: 16px auto 0; max-width: 460px; font-size: 14.5px; line-height: 1.8; color: #a9adcf; }
.hdg__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hdg__btn {
  padding: 12px 26px; border-radius: 10px; font-size: 14px; font-weight: 700; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.hdg__btn--primary {
  color: #04070d; background: linear-gradient(135deg, #67e8f9, #a855f7);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 14px 34px rgba(103, 232, 249, .28);
}
.hdg__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset, 0 18px 40px rgba(168, 85, 247, .38); }
.hdg__btn--ghost { color: #f2f4ff; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .22); }
.hdg__btn--ghost:hover { border-color: rgba(255, 255, 255, .55); transform: translateY(-2px); }

@media (max-width: 560px) {
  .hdg { padding: 28px 20px; }
  .hdg__title { font-size: clamp(25px, 8vw, 32px); }
}

@media (prefers-reduced-motion: reduce) {
  .hdg__aurora, .hdg__glow-text { animation: none; }
}

【JavaScript】
// ダーク発光ヒーロー：オーロラの揺れと見出しの発光は全てCSSアニメーションで完結。
// JSでの追加処理は不要（IIFEのみ・将来の拡張用に空で保持）。
(() => {})();

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

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