/*
  ============================================================
  亀田商会 HP  デザイン v2 — 重厚感レイヤー型
  適用: kameda-hp-3d-draft のみ（本番 kameda-hp-vercel は変更しない）
  Three.js 不使用 / CSS 中心 / GSAP 不使用
  ============================================================
*/

/* ─────────────────────────────────────────────
   §0  深度シャドウ変数
───────────────────────────────────────────── */
:root {
  --depth-1:
    0 1px 3px  rgba(26,42,58,.06),
    0 2px 6px  rgba(36,122,193,.04);
  --depth-2:
    0 2px 8px  rgba(26,42,58,.08),
    0 6px 20px rgba(36,122,193,.07),
    0 1px 2px  rgba(26,42,58,.05);
  --depth-3:
    0 4px 16px rgba(26,42,58,.10),
    0 12px 36px rgba(36,122,193,.09),
    0 2px 4px  rgba(26,42,58,.06);
  --depth-4:
    0 8px 28px rgba(26,42,58,.12),
    0 24px 60px rgba(36,122,193,.11),
    0 3px 6px  rgba(26,42,58,.07);
  --depth-hover:
    0 16px 48px rgba(26,42,58,.15),
    0 40px 80px rgba(36,122,193,.14),
    0 4px 8px  rgba(26,42,58,.08);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --ease-smooth: cubic-bezier(0.25,0.46,0.45,0.94);
  --persp: 1000px;
}

/* ─────────────────────────────────────────────
   §1  ヘッダー — スクロール時の重厚シャドウ
───────────────────────────────────────────── */
header.scrolled {
  box-shadow:
    0 2px 8px  rgba(26,42,58,.08),
    0 8px 32px rgba(36,122,193,.10),
    0 1px 0   rgba(36,122,193,.06) !important;
}

/* ─────────────────────────────────────────────
   §2  HERO — 奥行き強化
───────────────────────────────────────────── */
/* 3層のラジアルグラデーションで光源と影を演出 */
.hero {
  background:
    radial-gradient(ellipse 70% 50% at 12% 30%, rgba(36,122,193,.14) 0%, transparent 60%),
    radial-gradient(ellipse 55% 60% at 88% 80%, rgba(123,189,232,.12) 0%, transparent 55%),
    radial-gradient(ellipse 80% 35% at 50% 0%,  rgba(36,122,193,.06) 0%, transparent 70%),
    linear-gradient(160deg, rgba(240,248,255,1) 0%, rgba(255,255,255,.96) 55%, rgba(232,243,251,.65) 100%) !important;
}

/* 第3のブロブ（左からの光源） */
.hero::before {
  content: '';
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(36,122,193,.10) 0%, transparent 70%);
  filter: blur(48px);
  top: 35%; left: -60px;
  pointer-events: none;
  z-index: 0;
  animation: blobMove 14s ease-in-out 6s infinite;
  opacity: .6;
}

/* Blob 1 — より存在感 */
.hero-blob-1 {
  width: 680px; height: 680px;
  background: radial-gradient(circle at 40% 40%,
    rgba(36,122,193,.18) 0%,
    rgba(36,122,193,.07) 45%,
    transparent 70%) !important;
  filter: blur(46px) !important;
  top: -120px !important; right: -80px !important;
  opacity: .75 !important;
}
/* Blob 2 */
.hero-blob-2 {
  width: 480px; height: 480px;
  background: radial-gradient(circle at 55% 55%,
    rgba(123,189,232,.22) 0%,
    rgba(36,122,193,.06) 50%,
    transparent 72%) !important;
  filter: blur(40px) !important;
  bottom: 80px !important; left: 10% !important;
  opacity: .65 !important;
}

/* ヒーローバッジ — グラスモーフィズム */
.hero-badge {
  background: rgba(36,122,193,.13) !important;
  border: 1.5px solid rgba(36,122,193,.30) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(36,122,193,.14), inset 0 1px 0 rgba(255,255,255,.55) !important;
  color: var(--blue-dark) !important;
}

/* タイトルに奥行き感 */
.hero-title {
  text-shadow: 0 1px 4px rgba(26,42,58,.10), 0 4px 12px rgba(36,122,193,.07) !important;
}

/* メインボタン — 3Dソリッドシャドウ強化 */
.btn-main {
  box-shadow:
    0 4px 0   var(--blue-dark),
    0 6px 20px rgba(36,122,193,.28),
    0 12px 36px rgba(36,122,193,.16),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-smooth) !important;
}
.btn-main:hover {
  transform: translateY(-6px) !important;
  box-shadow:
    0 10px 0  var(--blue-dark),
    0 14px 32px rgba(36,122,193,.34),
    0 22px 52px rgba(36,122,193,.18),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}

/* サブボタン */
.btn-sub {
  box-shadow: 0 4px 0 var(--border), 0 6px 16px rgba(36,122,193,.10) !important;
  transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-smooth), background .25s !important;
}
.btn-sub:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 10px 0 var(--border), 0 14px 32px rgba(36,122,193,.16) !important;
}

/* ヒーロー写真（右側）に奥行きシャドウ */
.hero-img {
  filter: brightness(.97) contrast(1.03);
  box-shadow:
    -8px 0   40px rgba(26,42,58,.12),
    -20px 8px 60px rgba(36,122,193,.10),
    -1px  0   0   rgba(36,122,193,.08);
}

/* 路面帯に縦グラデーション */
.hero-road {
  background: linear-gradient(
    to right,
    var(--blue-light) 0%,
    rgba(232,243,251,.82) 50%,
    var(--blue-light) 100%
  ) !important;
  box-shadow: 0 -2px 16px rgba(36,122,193,.07);
}

/* ─────────────────────────────────────────────
   §3  マーキー帯 — 立体グラデーション
───────────────────────────────────────────── */
.marquee-wrap {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 50%, var(--blue-mid) 100%) !important;
  box-shadow:
    0  4px 20px rgba(36,122,193,.28),
    0 -2px  8px rgba(26,42,58,.06);
  position: relative;
  z-index: 2;
}
.marquee-wrap::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 0%,
    transparent 30%,
    transparent 70%,
    rgba(255,255,255,.04) 100%);
  pointer-events: none;
}

/* ─────────────────────────────────────────────
   §4  STATSセクション — 多層シャドウカード
───────────────────────────────────────────── */
.stats-section {
  background:
    linear-gradient(180deg, rgba(240,248,255,.55) 0%, white 35%) !important;
  box-shadow: inset 0 -1px 0 var(--border);
}

.stat-card {
  box-shadow: var(--depth-2) !important;
  border-bottom: 3px solid var(--border) !important;
  transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease-smooth) !important;
  will-change: transform;
}
.stat-card:hover {
  transform: translateY(-10px) perspective(var(--persp)) rotateX(3deg) !important;
  box-shadow: var(--depth-hover) !important;
  border-bottom-color: var(--blue) !important;
  z-index: 2;
}
.stat-card:hover::before {
  background: linear-gradient(180deg, var(--blue-light), rgba(232,243,251,.4)) !important;
}

/* ─────────────────────────────────────────────
   §5  ABOUTセクション — 写真を立体額装
───────────────────────────────────────────── */
.about {
  background:
    radial-gradient(ellipse 65% 55% at 0% 100%, rgba(36,122,193,.07) 0%, transparent 60%),
    var(--blue-pale) !important;
}

/* 上部にアクセントライン */
.about::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(36,122,193,.20) 20%,
    rgba(36,122,193,.50) 50%,
    rgba(36,122,193,.20) 80%,
    transparent 100%);
}

/* 写真の多層シャドウ */
.about-img {
  box-shadow:
    0  8px 24px rgba(26,42,58,.12),
    0 24px 56px rgba(36,122,193,.14),
    0 48px 80px rgba(26,42,58,.08),
    inset 0 0 0 1px rgba(255,255,255,.35) !important;
  border-radius: 28px !important;
}
.about-img:hover {
  transform: scale(1.02) rotate(-0.5deg) !important;
  box-shadow:
    0 16px 40px rgba(26,42,58,.15),
    0 40px 80px rgba(36,122,193,.18),
    0 60px 100px rgba(26,42,58,.10) !important;
}

/* デコ枠 — 繊細に */
.about-img-deco {
  border: 2px solid rgba(36,122,193,.22) !important;
  box-shadow: 0 0 0 1px rgba(36,122,193,.07);
}

/* 創業年タグ — 浮遊感強化 */
.about-year-tag {
  box-shadow:
    0 4px 12px rgba(0,0,0,.12),
    0 10px 28px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.5) !important;
}

/* ─────────────────────────────────────────────
   §6  CARGOセクション — 立体パネルカード
───────────────────────────────────────────── */
.cargo {
  background:
    linear-gradient(180deg, white 0%, rgba(240,248,255,.45) 100%) !important;
  position: relative;
}
/* 上部アクセントライン */
.cargo::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(36,122,193,.15) 15%,
    rgba(36,122,193,.45) 50%,
    rgba(36,122,193,.15) 85%,
    transparent 100%);
}

.cargo-card {
  background: white !important;
  border: 1px solid var(--border) !important;
  border-bottom: 3px solid var(--border) !important;
  box-shadow: var(--depth-2) !important;
  border-radius: 16px !important;
  transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease-smooth), border-color .25s !important;
  will-change: transform;
}
.cargo-card:hover {
  transform: translateY(-10px) perspective(var(--persp)) rotateX(2deg) rotateY(-1deg) !important;
  border-color: var(--blue) !important;
  border-bottom-color: var(--blue-dark) !important;
  box-shadow:
    0 12px 0 rgba(36,122,193,.08),
    var(--depth-hover) !important;
}

/* 事業CTAバナー — 深海グラデーション */
.cargo-cta {
  background: linear-gradient(135deg,
    #071a2e 0%,
    #0e2a4a 30%,
    #1a5a96 65%,
    #2e88c8 100%) !important;
  box-shadow:
    0  8px 32px rgba(26,42,58,.25),
    0 20px 60px rgba(36,122,193,.20),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
}

/* 白ボタン強化 */
.btn-white {
  box-shadow:
    0 4px 0   rgba(0,0,0,.10),
    0 6px 20px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
  transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-smooth) !important;
}
.btn-white:hover {
  transform: translateY(-6px) scale(1.03) !important;
  box-shadow:
    0 10px 0  rgba(0,0,0,.10),
    0 18px 36px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

/* ─────────────────────────────────────────────
   §7  FLEETセクション — 浮き上がりカード
───────────────────────────────────────────── */
.fleet {
  background:
    radial-gradient(ellipse 75% 50% at 100% 0%, rgba(36,122,193,.07) 0%, transparent 55%),
    var(--blue-pale) !important;
}
.fleet::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(36,122,193,.18) 20%,
    rgba(36,122,193,.48) 50%,
    rgba(36,122,193,.18) 80%,
    transparent 100%);
}

.fleet-card {
  border: 1px solid var(--border) !important;
  border-bottom: 4px solid var(--border) !important;
  box-shadow: var(--depth-3) !important;
  border-radius: 20px !important;
  transition: transform .45s var(--ease-spring), box-shadow .45s var(--ease-smooth), border-color .25s !important;
  will-change: transform;
}
.fleet-card:hover {
  transform: translateY(-14px) perspective(var(--persp)) rotateX(3deg) !important;
  border-bottom-color: var(--blue) !important;
  box-shadow:
    0 14px 0 rgba(36,122,193,.12),
    0 28px 56px rgba(26,42,58,.18),
    0 48px 80px rgba(36,122,193,.14),
    inset 0 0 0 1px rgba(36,122,193,.08) !important;
}

/* 画像下部に影グラデーション */
.fleet-card-img {
  position: relative;
}
.fleet-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 55%,
    rgba(26,42,58,.07) 100%);
  pointer-events: none;
}

/* ─────────────────────────────────────────────
   §8  COMPANYセクション — 深度テーブル
───────────────────────────────────────────── */
.company {
  background:
    linear-gradient(160deg, white 0%, rgba(240,248,255,.50) 100%) !important;
}

.ceo-card {
  box-shadow: var(--depth-3) !important;
  border-color: rgba(36,122,193,.12) !important;
  background:
    radial-gradient(ellipse 80% 60% at 0% 100%, rgba(36,122,193,.06) 0%, transparent 60%),
    var(--blue-pale) !important;
  transition: transform .4s var(--ease-smooth), box-shadow .4s var(--ease-smooth) !important;
}
.ceo-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--depth-4) !important;
}

/* ─────────────────────────────────────────────
   §9  BLOGセクション — カード立体化
───────────────────────────────────────────── */
.blog::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(36,122,193,.18) 20%,
    rgba(36,122,193,.45) 50%,
    rgba(36,122,193,.18) 80%,
    transparent 100%);
}

.blog-card {
  box-shadow: var(--depth-2) !important;
  border-color: rgba(36,122,193,.08) !important;
  transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease-smooth), border-color .25s !important;
}
.blog-card:hover {
  transform: translateY(-10px) !important;
  box-shadow: var(--depth-hover) !important;
  border-color: var(--blue) !important;
}
.blog-card-sm {
  box-shadow: var(--depth-1) !important;
  border-color: rgba(36,122,193,.08) !important;
  transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-smooth), border-color .25s !important;
}
.blog-card-sm:hover {
  transform: translateX(8px) !important;
  box-shadow: var(--depth-3) !important;
  border-color: var(--blue) !important;
}

/* ─────────────────────────────────────────────
   §10  RECRUITセクション — 深海グラデーション
───────────────────────────────────────────── */
.recruit {
  background: linear-gradient(148deg,
    #061829 0%,
    #0d2540 28%,
    #1a509a 60%,
    #2e88c8 100%) !important;
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.12);
}
.recruit-point {
  box-shadow: 0 2px 12px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.07) !important;
  transition: transform .35s var(--ease-spring), background .3s, box-shadow .3s !important;
}
.recruit-point:hover {
  background: rgba(255,255,255,.22) !important;
  transform: translateX(10px) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.recruit-img {
  box-shadow:
    0  8px 24px rgba(0,0,0,.25),
    0 24px 56px rgba(0,0,0,.20),
    0 -2px  8px rgba(255,255,255,.05) !important;
}

/* ─────────────────────────────────────────────
   §11  CONTACTセクション
───────────────────────────────────────────── */
.contact-tel-card {
  background: linear-gradient(135deg,
    var(--blue-dark) 0%,
    var(--blue) 55%,
    #3a9ad4 100%) !important;
  box-shadow:
    0  8px 24px rgba(36,122,193,.28),
    0 16px 48px rgba(36,122,193,.18),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease-smooth) !important;
}
.contact-tel-card:hover {
  transform: scale(1.03) rotate(-0.5deg) !important;
  box-shadow:
    0 16px 40px rgba(36,122,193,.36),
    0 32px 64px rgba(36,122,193,.22),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.gform-wrap {
  box-shadow: var(--depth-3) !important;
  border: 1px solid rgba(36,122,193,.09) !important;
}

/* ─────────────────────────────────────────────
   §12  フッター — 濃紺グラデーション
───────────────────────────────────────────── */
footer {
  background: linear-gradient(160deg, #07101c 0%, #0f1e2d 50%, #091623 100%) !important;
  box-shadow: 0 -4px 32px rgba(0,0,0,.18);
}
.footer-top {
  border-bottom: 1px solid rgba(255,255,255,.055) !important;
}

/* ─────────────────────────────────────────────
   §13  スクロールリビール — 視点付きで立ち上がる
───────────────────────────────────────────── */
.reveal {
  opacity: 0 !important;
  transform: perspective(var(--persp)) translateY(30px) rotateX(5deg) !important;
  transition: opacity .7s var(--ease-smooth), transform .7s var(--ease-smooth) !important;
}
.reveal.visible {
  opacity: 1 !important;
  transform: perspective(var(--persp)) translateY(0) rotateX(0deg) !important;
}
.reveal-left {
  opacity: 0 !important;
  transform: perspective(var(--persp)) translateX(-30px) rotateY(-4deg) !important;
  transition: opacity .7s var(--ease-smooth), transform .7s var(--ease-smooth) !important;
}
.reveal-left.visible {
  opacity: 1 !important;
  transform: perspective(var(--persp)) translateX(0) rotateY(0deg) !important;
}
.reveal-right {
  opacity: 0 !important;
  transform: perspective(var(--persp)) translateX(30px) rotateY(4deg) !important;
  transition: opacity .7s var(--ease-smooth), transform .7s var(--ease-smooth) !important;
}
.reveal-right.visible {
  opacity: 1 !important;
  transform: perspective(var(--persp)) translateX(0) rotateY(0deg) !important;
}

/* ─────────────────────────────────────────────
   §14  recruit_page.html 強化
───────────────────────────────────────────── */
.recruit-hero {
  background:
    radial-gradient(ellipse 65% 50% at 80% 20%, rgba(123,189,232,.22) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 10% 80%, rgba(6,18,40,.38) 0%, transparent 58%),
    linear-gradient(135deg, #061829 0%, #0e2a4a 30%, #247ac1 68%, #4aa3d8 100%) !important;
}

.appeal-card {
  box-shadow: var(--depth-2) !important;
  border: 1px solid rgba(36,122,193,.10) !important;
  transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease-smooth) !important;
}
.appeal-card:hover {
  transform: translateY(-8px) perspective(var(--persp)) rotateX(2deg) !important;
  box-shadow: var(--depth-hover) !important;
}

.job-card {
  box-shadow: var(--depth-3) !important;
  border: 1px solid rgba(36,122,193,.14) !important;
}

.benefit-item {
  box-shadow: var(--depth-2) !important;
  border: 1px solid rgba(36,122,193,.08) !important;
  transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-smooth) !important;
}
.benefit-item:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--depth-4) !important;
}

/* ─────────────────────────────────────────────
   §15  blog/index.html 強化
───────────────────────────────────────────── */
.blog-hero {
  background:
    radial-gradient(ellipse 60% 50% at 78% 22%, rgba(123,189,232,.18) 0%, transparent 55%),
    linear-gradient(135deg, #061829 0%, #0e2a4a 30%, #247ac1 65%, #4aa3d8 100%) !important;
}

.coming-card {
  box-shadow: var(--depth-3) !important;
  border: 1px solid rgba(36,122,193,.12) !important;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(36,122,193,.06) 0%, transparent 60%),
    var(--blue-pale) !important;
}

.btn-back {
  box-shadow:
    0 4px 0 var(--blue-dark),
    0 6px 20px rgba(36,122,193,.24) !important;
  transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-smooth), background .25s !important;
}
.btn-back:hover {
  transform: translateY(-5px) !important;
  box-shadow:
    0 9px 0 var(--blue-dark),
    0 14px 32px rgba(36,122,193,.30) !important;
}

/* ─────────────────────────────────────────────
   §16  カウントアップ — 数字の強調スタイル
───────────────────────────────────────────── */
.count-num {
  display: inline-block;
  transition: transform .15s var(--ease-spring);
}
/* カウント中の微振動 */
.stat-card.counting .count-num {
  animation: countTick .08s ease infinite;
}
@keyframes countTick {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.04); }
}

/* ─────────────────────────────────────────────
   §17  prefers-reduced-motion 完全対応
───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:      0.01ms !important;
    scroll-behavior:          auto   !important;
  }
  /* リビール：初期状態から表示 */
  .reveal,
  .reveal-left,
  .reveal-right {
    opacity:    1    !important;
    transform:  none !important;
    transition: none !important;
  }
  /* アニメーション停止 */
  .hero-blob,
  .hero::before    { animation: none !important; }
  .marquee-track   { animation: none !important; }
  .recruit-circle  { animation: none !important; }
  .about-img-deco  { animation: none !important; }
  .hero-truck      { animation: none !important; }
  .road-line       { animation: none !important; }
  .badge-dot       { animation: none !important; }
  .hero-scroll-line{ animation: none !important; }
  .count-num       { animation: none !important; }
  /* 3D hover 無効化 */
  .stat-card:hover,
  .cargo-card:hover,
  .fleet-card:hover,
  .blog-card:hover,
  .appeal-card:hover,
  .benefit-item:hover,
  .ceo-card:hover {
    transform: none !important;
  }
}

/* ─────────────────────────────────────────────
   §18  モバイル最適化
   （3D回転はタッチ操作と干渉するため無効）
───────────────────────────────────────────── */
@media (max-width: 768px) {
  /* perspective付きrotate系を無効化、縦移動のみ残す */
  .stat-card:hover {
    transform: translateY(-6px) !important;
  }
  .cargo-card:hover {
    transform: translateY(-6px) !important;
  }
  .fleet-card:hover {
    transform: translateY(-8px) !important;
  }
  .appeal-card:hover {
    transform: translateY(-5px) !important;
  }
  /* タップフィードバック */
  .fleet-card:active,
  .cargo-card:active,
  .blog-card:active,
  .appeal-card:active {
    transform: scale(.98) !important;
    transition-duration: .1s !important;
  }
  /* ヒーロー追加ブロブを非表示（描画負荷低減） */
  .hero::before {
    display: none;
  }
  /* ヒーロー背景をシンプルに（モバイル） */
  .hero {
    background:
      radial-gradient(ellipse 80% 50% at 10% 20%, rgba(36,122,193,.12) 0%, transparent 60%),
      linear-gradient(160deg, rgba(240,248,255,1) 0%, white 70%) !important;
  }
}

@media (max-width: 480px) {
  /* 極小画面では全hover 3D OFF */
  .stat-card:hover,
  .cargo-card:hover,
  .fleet-card:hover,
  .blog-card:hover,
  .appeal-card:hover,
  .benefit-item:hover,
  .ceo-card:hover,
  .fleet-card:hover {
    transform: none !important;
  }
}