/* Hero 3D layout (replaces older .hero rules) */
.hero3d {
  position: relative;
  padding: 80px 0 0;
  overflow: hidden;
  isolation: isolate;
  min-height: 100vh;
}
.hero3d-inner { position: relative; z-index: 2; }
.hero3d-grid-cols {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 32px 0 64px;
}
@media (max-width: 980px) { .hero3d-grid-cols { grid-template-columns: 1fr; gap: 40px; padding: 24px 0 48px; } }

.hero3d-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.4vw, 86px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 18px 0 22px;
  color: var(--ink);
  text-wrap: balance;
}
html[lang="ar"] .hero3d-title { font-family: var(--font-ar-display); letter-spacing: -0.01em; line-height: 1.15; }

.hero3d-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.hero3d-stat { display: flex; gap: 12px; align-items: center; }
.hero3d-stat strong { display: block; font-family: var(--font-display); font-size: 14px; color: var(--ink); }
.hero3d-stat span { font-size: 12px; color: var(--ink-3); }
html[lang="ar"] .hero3d-stat strong { font-family: var(--font-ar-display); font-size: 15px; }
@media (max-width: 640px) {
  .hero3d-stats { grid-template-columns: 1fr; gap: 14px; padding-top: 24px; margin-top: 28px; }
  .hero3d-stat .num-badge { width: 48px; height: 48px; font-size: 16px; border-radius: 14px; }
}

/* Stage with deck of floating cards */
.hero3d-stage {
  position: relative;
  perspective: 1400px;
  perspective-origin: 50% 50%;
}
.hero3d-deck {
  position: relative;
  transform-style: preserve-3d;
  animation: deckFloat 8s ease-in-out infinite alternate;
}
@keyframes deckFloat {
  from { transform: rotateY(-6deg) rotateX(4deg); }
  to   { transform: rotateY(6deg)  rotateX(-2deg); }
}
.hero3d-deck > * { transform-style: preserve-3d; }

.float-card {
  position: absolute;
  display: flex; gap: 12px; align-items: center;
  padding: 14px 18px;
  border-radius: 16px;
  z-index: 3;
  font-size: 13px;
}
.float-card .fc-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.float-card strong { display: block; font-size: 14px; color: var(--ink); font-family: var(--font-display); }
.float-card span { font-size: 12px; color: var(--ink-3); }
html[lang="ar"] .float-card strong { font-family: var(--font-ar-display); }

.float-card-a {
  top: -18px;
  inset-inline-end: -28px;
  transform: translateZ(80px) rotate(3deg);
  animation: floatA 6s ease-in-out infinite alternate;
}
.float-card-b {
  bottom: 24px;
  inset-inline-start: -36px;
  transform: translateZ(60px) rotate(-2deg);
  animation: floatB 7s ease-in-out infinite alternate;
}
@keyframes floatA { to { transform: translateZ(80px) translateY(-10px) rotate(2deg); } }
@keyframes floatB { to { transform: translateZ(60px) translateY(8px) rotate(-3deg); } }

.float-strip {
  position: absolute;
  top: 30%;
  inset-inline-start: -54px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  z-index: 4;
  transform: translateZ(100px) rotate(-90deg);
  white-space: nowrap;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html[lang="ar"] .float-strip { letter-spacing: 0; text-transform: none; }
.float-strip-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #00D4FF;
  box-shadow: 0 0 12px #00D4FF;
  animation: pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot { 50% { box-shadow: 0 0 22px #00D4FF; transform: scale(1.3); } }

.avatars3d { display: flex; }
.avatars3d span {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  border: 2px solid #fff;
  margin-inline-start: -8px;
}
.avatars3d span:first-child { margin-inline-start: 0; }

@media (max-width: 980px) {
  .hero3d-deck { animation: none; transform: none; }
  .float-card-a { top: 8px; inset-inline-end: 0; transform: rotate(2deg); animation: none; }
  .float-card-b { bottom: 16px; inset-inline-start: 0; transform: rotate(-2deg); animation: none; }
  .float-strip { display: none; }
}
@media (max-width: 520px) {
  .hero3d { padding-top: 60px; min-height: auto; }
  .float-card { padding: 10px 12px; font-size: 12px; }
  .float-card .fc-icon { width: 34px; height: 34px; }
  .float-card strong { font-size: 12.5px; }
  .float-card span { font-size: 11px; }
}