/* ================================================================================
 * ファイル名: app/assets/stylesheets/landing_cta.css
 * 📊 リファクタリング基準（コメント行は行数カウントから除外）
 *   ✅ 500行未満: 完璧
 *   ✅ 800行未満: 問題なし
 *   ⚠️  1200行未満: 注意喚起・リファクタリング要検討
 *   🚨 1200行以上: リファクタリング必須
 * 現在のコード行数: 約55行（コメント除く） / 総行数 74行 → ✅ 完璧
 *
 * 🎯 作成日: 2026-05-03（Phase 2 セクション別分離）
 * 📝 目的: ランディングページ 最終CTAセクション（ラジアルグラデ背景 + ボタン群）
 *
 * 【分離元】landing.css のセクション11（最終CTA）を抽出
 *
 * 【セクション構成】
 *   1. landing-cta ベース（position: relative + overflow: hidden）
 *   2. background / gradient（背景レイヤー、絶対配置 + ラジアルグラデ）
 *   3. content（中央寄せ + max-width: 1100px）
 *   4. title / subtitle（タイトル + 説明）
 *   5. buttons（ボタン群 flex 中央寄せ）
 *   6. note（注釈テキスト）
 *
 * 【ジュニアエンジニア向け解説】
 *   - background は absolute で背面に配置し、content は z-index: 1 で前面に
 *   - radial-gradient(ellipse 80% 60% at 50% 120%) は下部から上に伸びる楕円グラデ
 *
 * 【関連ファイル】
 *   - app/assets/stylesheets/landing.css（CSS変数・ベーススタイル）
 *   - app/views/landing/sections/_cta.html.erb
 *
 * 【変更履歴】
 *   2026-05-03: 新規作成（landing.css のセクション11 から分離）
 * ================================================================================ */

/* ----------------------------------------
   CTAセクション（最終行動喚起）
   下部に紫のグラデーション背景効果。中央揃えのタイトル・
   サブタイトル・ボタン群・補足テキストを配置。
   ---------------------------------------- */
.landing-cta {
  position: relative;
  overflow: hidden;
}

.landing-cta__background {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.landing-cta__gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 120%, rgba(99, 102, 241, 0.2), transparent);
}

.landing-cta__content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
}

.landing-cta__title {
  font-family: var(--landing-font-display);
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  font-weight: 800;
  margin-bottom: 20px;
}

.landing-cta__subtitle {
  color: var(--landing-text-muted);
  font-size: 1.125rem;
  margin-bottom: 32px;
}

.landing-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.landing-cta__note {
  font-size: 0.85rem;
  color: var(--landing-text-muted);
}