/* =============================================================================
   PRO ELEVATION LAYER  —  合同会社ステップアップ トップページ
   ui-ux-pro-max「Trust & Authority」方向 ＋ frontend-design-pro の規律で“正統進化”。
   ・既存 styles.css の後に読み込む追記専用レイヤー（上書き最小・可逆）。
   ・このファイルへの <link> を外せば 100% 元のデザインに戻ります。
   ・既存トークン（--navy-dark / --brand-yellow など）にハーモナイズ。
   ============================================================================= */

/* --- 1. ヒーロー：複数スライドをまとめるシネマティック・グレード -----------------
   バラつく建設写真を1枚絵のように統一し、白文字の可読性も底上げ（multiplyで締める）。
   z-index:1 はオーバーレイ(::before)と同層・本文(z2)の下。pointer-events:none。 */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(135% 105% at 76% 24%, transparent 46%, rgba(3,20,26,.50) 100%),
    linear-gradient(180deg, rgba(3,20,26,.26) 0%, transparent 22%, transparent 68%, rgba(3,20,26,.40) 100%);
  mix-blend-mode: multiply;
}

/* ヒーロー見出し：トラッキングと影をわずかに整え、重厚感を一段引き上げる */
.hero-title { letter-spacing: -.025em; text-shadow: 0 2px 26px rgba(3,20,26,.6); }
.hero-eyebrow { box-shadow: 0 4px 18px rgba(3,20,26,.28); }

/* ガラスカード：枠と内側ハイライトを締めて“信頼パネル”らしく */
.hero-card {
  border-color: rgba(255,255,255,.34);
  box-shadow: 0 22px 56px rgba(3,20,26,.42), inset 0 1px 0 rgba(255,255,255,.4);
}
.hero-card-label::before {
  content: ""; display: inline-block; width: 18px; height: 2px; margin-right: .55em;
  background: var(--brand-yellow); vertical-align: middle; border-radius: 2px;
}

/* --- 2. プライマリCTA：プレミアムなシーン（光沢スウィープ） --------------------
   建設業オーナー層にも“良いものを頼んでいる”感。reduced-motion では無効化。 */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::before {
  content: ""; position: absolute; top: 0; left: -135%; z-index: -1;
  width: 55%; height: 100%; transform: skewX(-18deg);
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transition: left .6s cubic-bezier(.2,.7,.2,1);
}
.btn-primary:hover::before { left: 135%; }
@media (prefers-reduced-motion: reduce) { .btn-primary::before { display: none; } }

/* --- 3. 強み3本柱：ホバーで持ち上げて“カードらしい”反応に ----------------------- */
.strength { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.strength:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.strength:hover h3 { color: var(--accent-dark); }

/* --- 4. 実績数字バンド：権威づけの小ラベル＋数字の発光で“実績”を主役に --------- */
.impact .container { position: relative; }
.impact-lead::before {
  content: "実績と特長"; display: block; margin: 0 auto 1rem;
  width: max-content; font-size: .74rem; font-weight: 800; letter-spacing: .22em;
  color: rgba(244,178,35,.92);
  padding: .35em 1.1em; border: 1px solid rgba(244,178,35,.42); border-radius: 999px;
}
.impact-grid strong { text-shadow: 0 0 26px rgba(244,178,35,.16); }
.impact-grid li:nth-child(2) strong { text-shadow: 0 0 26px rgba(24,166,78,.18); }
.impact-grid li:nth-child(3) strong { text-shadow: 0 0 26px rgba(31,180,212,.18); }

/* --- 5. ミニ講習カード：ホバーで色が灯る（信頼＝丁寧な反応） -------------------- */
.mini-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.mini-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow); }

/* --- 6. セクション間の余白リズムを少しゆったり（上質さは余白から） -------------- */
@media (min-width: 768px) {
  .section { padding-block: 7.5rem; }
}

/* --- 7. 仕上げ：本文の最大行長を抑え、読みやすさ（非IT層配慮） ------------------ */
.hero-lead { max-width: 34em; }
.section-desc { max-width: 42em; margin-inline: auto; }