/* ============================================================
   HERO 3D SHOWCASE  (pure CSS 3D — no external libraries)
   ============================================================ */
.hero { overflow: hidden; }
.hero .container { position: relative; z-index: 2; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-3d { display: none; }
}

/* --- 3D scene --- */
.hero-3d {
  position: relative;
  height: 460px;
  perspective: 1200px;
  perspective-origin: 50% 45%;
}
.scene {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: sceneSpin 26s linear infinite;
}
@keyframes sceneSpin {
  from { transform: rotateX(-14deg) rotateY(0deg); }
  to   { transform: rotateX(-14deg) rotateY(360deg); }
}

/* --- central globe --- */
.globe {
  position: absolute;
  top: 50%; left: 50%;
  width: 210px; height: 210px;
  margin: -105px 0 0 -105px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #2f7fd6 0%, #0E4C92 42%, #072a52 78%, #04182f 100%);
  box-shadow:
    inset -18px -22px 46px rgba(0,0,0,.55),
    inset 12px 14px 30px rgba(120,190,255,.35),
    0 0 60px rgba(14,76,146,.55),
    0 0 120px rgba(201,162,39,.18);
  transform-style: preserve-3d;
}
.globe::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background-image:
    repeating-linear-gradient(0deg, rgba(231,206,107,.16) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(231,206,107,.16) 0 1px, transparent 1px 26px);
  mask: radial-gradient(circle at 50% 50%, #000 62%, transparent 72%);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 62%, transparent 72%);
  opacity: .8;
}
.globe .shine {
  position: absolute;
  top: 16%; left: 20%;
  width: 70px; height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.55), transparent 70%);
  filter: blur(4px);
}

/* --- orbiting rings --- */
.ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1.5px solid rgba(231,206,107,.42);
  transform-style: preserve-3d;
}
.ring.r1 { width: 300px; height: 300px; margin: -150px 0 0 -150px; transform: rotateX(74deg) rotateZ(0deg); animation: ringSpin 14s linear infinite; }
.ring.r2 { width: 380px; height: 380px; margin: -190px 0 0 -190px; border-color: rgba(120,190,255,.35); transform: rotateX(66deg) rotateZ(60deg); animation: ringSpin 20s linear infinite reverse; }
.ring.r3 { width: 460px; height: 460px; margin: -230px 0 0 -230px; border-color: rgba(255,255,255,.16); transform: rotateX(80deg) rotateZ(120deg); animation: ringSpin 28s linear infinite; }
@keyframes ringSpin {
  from { transform: rotateX(72deg) rotateZ(0deg); }
  to   { transform: rotateX(72deg) rotateZ(360deg); }
}

/* --- orbiting nodes --- */
.node {
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #E7CE6B 55%, #C9A227);
  box-shadow: 0 0 14px rgba(231,206,107,.9);
  transform-style: preserve-3d;
}
.node.n1 { animation: orbit1 14s linear infinite; }
.node.n2 { animation: orbit2 20s linear infinite; }
.node.n3 { animation: orbit3 28s linear infinite; }
@keyframes orbit1 { from { transform: rotate(0deg) translateX(150px) rotate(0deg); } to { transform: rotate(360deg) translateX(150px) rotate(-360deg); } }
@keyframes orbit2 { from { transform: rotate(60deg) translateX(190px) rotate(-60deg); } to { transform: rotate(420deg) translateX(190px) rotate(-420deg); } }
@keyframes orbit3 { from { transform: rotate(120deg) translateX(230px) rotate(-120deg); } to { transform: rotate(480deg) translateX(230px) rotate(-480deg); } }

/* --- floating glass cards --- */
.float-card {
  position: absolute;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border-radius: 14px;
  padding: 12px 16px;
  color: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  transform-style: preserve-3d;
}
.float-card .fc-lbl { font-size: .68rem; letter-spacing: 1.4px; text-transform: uppercase; color: #b9c7d6; }
.float-card .fc-val { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; color: var(--brand-accent-soft); }
.float-card .fc-sub { font-size: .72rem; color: #9fd0a0; }
.float-card.fc1 { top: 6%; left: 2%; animation: floaty 6s ease-in-out infinite; }
.float-card.fc2 { top: 40%; right: 0%; animation: floaty 7.5s ease-in-out infinite .8s; }
.float-card.fc3 { bottom: 6%; left: 12%; animation: floaty 6.8s ease-in-out infinite 1.6s; }
@keyframes floaty {
  0%,100% { transform: translateY(0) translateZ(40px); }
  50%     { transform: translateY(-16px) translateZ(60px); }
}

/* --- soft glow behind scene --- */
.hero-3d::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 520px; height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14,76,146,.45), transparent 62%);
  filter: blur(10px);
  z-index: -1;
}

/* --- animated gradient sheen on hero --- */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 500px at 78% 30%, rgba(201,162,39,.14), transparent 60%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .scene, .ring, .node, .float-card { animation: none !important; }
}