ダーク背景に光が差すファーストビュー

選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。

書き換える項目

プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。

[キャッチコピー]

例：開発の「待ち時間」を、なくす。

[サブコピー]

見出しを補足する1〜2文

[バッジの文言]

例：新バージョンを公開しました。不要なら削除

[ボタン文言]

例：無料ではじめる

[使用技術]

例：HTML/CSS、React + Tailwind CSS

あなたはWebデザイナー兼フロントエンドエンジニアです。
以下の条件で「ダーク背景に光が差すファーストビュー」を実装してください。

## 表示内容
- バッジ：[バッジの文言]
- メイン見出し：[キャッチコピー]
- サブコピー：[サブコピー]
- メインボタン：[ボタン文言]
- サブボタン：「ドキュメントを見る」

## レイアウト
- すべて中央揃えで、上から バッジ → 見出し → サブコピー → ボタン2つ（横並び、間隔 12px）
- コンテンツ最大幅 820px、上下の padding PC 128px / スマホ 72px
- スマホではボタンを縦に並べ、幅100%にする

## 背景
- ベースの色：#0B1220
- セクションの上端中央から、#1463F0 の光が下に向かって広がるように見せる
  （radial-gradient：中心は上端の中央、横 60%・縦 80% の楕円、中心の不透明度 55% → 外側は透明）
- その上に、ごく薄い格子模様（1px の線、rgba(255,255,255,.05)、間隔 48px）を重ね、下に向かってマスクで消す
- セクションの下端は、次のセクションの背景色へ 120px かけてなじませる

## デザイン
- バッジ：高さ 30px、左右の padding 14px、角丸 9999px、背景 rgba(255,255,255,.08)、枠線 1px solid rgba(255,255,255,.16)、文字 13px、色 rgba(255,255,255,.85)
- 見出し：clamp(34px, 6vw, 64px)、font-weight 700、line-height 1.25、色 #FFFFFF、text-wrap: balance、バッジの下 24px
- 見出しの一部を強調する場合は、白から #1463F0 の淡い色へのグラデーション文字にできるようにする
- サブコピー：17px（スマホ 15px）、line-height 1.9、色 rgba(255,255,255,.72)、見出しの下 20px
- メインボタン：高さ 52px、左右の padding 28px、角丸 9999px、背景 #FFFFFF、文字 #0B1220・15px・font-weight 700
- サブボタン：同じ大きさで、背景は透明、枠線 1px solid rgba(255,255,255,.3)、文字 #FFFFFF
- hover：メインボタンは 1px 上に動かす。サブボタンは背景を rgba(255,255,255,.08) にする

## 実装方法
- 背景の光と格子は、画像を使わずCSSのグラデーションと疑似要素で描く
- 光の色・強さ・広がりをCSS変数にまとめ、色を変えるだけで調整できるようにする
- ヘッダーを重ねる場合に備え、ヘッダーの文字色を白に切り替える指定を補足する

## アクセシビリティ
- 見出しは h1
- サブコピーなど薄い色の文字も、背景とのコントラスト比 4.5:1 以上を保つ
- 背景の装飾は、スクリーンリーダーに読み上げられないようにする
- フォーカスリングは白の2px線で、暗い背景でも見えるようにする

## 出力形式
- [使用技術]のコードを1つ出力
- 光の強さを調整する箇所をコメントで説明