.puniking-3d-hero-section {
  position: relative !important;
  overflow: hidden !important;
  min-height: 760px !important;
  padding: clamp(70px, 8vw, 120px) clamp(18px, 5vw, 72px) !important;
  color: #f7f1e8 !important;
  background:
    radial-gradient(circle at 80% 12%, rgba(216,183,109,.22), transparent 28%),
    radial-gradient(circle at 12% 20%, rgba(142,199,223,.15), transparent 26%),
    linear-gradient(135deg, #06080c, #111722 52%, #050609) !important;
}

.puniking-3d-hero-section * {
  box-sizing: border-box !important;
}

.puniking-3d-hero-bg {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) !important;
  background-size: 44px 44px !important;
  mask-image: radial-gradient(circle at 50% 20%, black, transparent 78%) !important;
}

.puniking-3d-hero-inner {
  position: relative !important;
  z-index: 2 !important;
  max-width: 1480px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: .95fr 1.05fr !important;
  align-items: center !important;
  gap: clamp(32px, 5vw, 70px) !important;
}

.puniking-3d-eyebrow {
  margin: 0 0 18px !important;
  color: #fff0b7 !important;
  font-size: 12px !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
}

.puniking-3d-hero-copy h1 {
  margin: 0 !important;
  max-width: 760px !important;
  color: #f7f1e8 !important;
  font-size: clamp(46px, 6.2vw, 92px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.065em !important;
  font-weight: 800 !important;
}

.puniking-3d-lead {
  max-width: 660px !important;
  margin: 24px 0 0 !important;
  color: #aeb5c2 !important;
  font-size: 19px !important;
  line-height: 1.75 !important;
}

.puniking-3d-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-top: 32px !important;
}

.puniking-3d-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}

.puniking-3d-btn:hover {
  transform: translateY(-2px) !important;
}

.puniking-3d-btn.primary {
  color: #111 !important;
  background: linear-gradient(135deg, #fff0b7, #d8b76d) !important;
  box-shadow: 0 18px 55px rgba(216,183,109,.24) !important;
}

.puniking-3d-btn.secondary {
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.06) !important;
}

.puniking-3d-points {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-top: 42px !important;
}

.puniking-3d-points div {
  min-width: 150px !important;
  padding: 18px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.065) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  backdrop-filter: blur(16px) !important;
}

.puniking-3d-points strong {
  display: block !important;
  color: #fff0b7 !important;
  font-size: 18px !important;
}

.puniking-3d-points span {
  display: block !important;
  margin-top: 5px !important;
  color: #aeb5c2 !important;
  font-size: 13px !important;
}

.puniking-3d-stage-wrap {
  min-height: 620px !important;
  display: grid !important;
  place-items: center !important;
}

.puniking-3d-stage {
  position: relative !important;
  width: min(720px, 92vw) !important;
  height: min(620px, 88vw) !important;
  min-height: 520px !important;
  border-radius: 42px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background:
    radial-gradient(circle at 48% 34%, rgba(255,255,255,.20), transparent 34%),
    radial-gradient(circle at 68% 18%, rgba(216,183,109,.18), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.045)),
    #111722 !important;
  box-shadow:
    0 40px 110px rgba(0,0,0,.48),
    inset 0 0 70px rgba(255,255,255,.06) !important;
}

.puniking-3d-stage::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 8 !important;
  pointer-events: none !important;
  background:
    linear-gradient(115deg, rgba(255,255,255,.10), transparent 28%, transparent 70%, rgba(216,183,109,.12)),
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.15), transparent 36%) !important;
  mix-blend-mode: screen !important;
}

.puniking-3d-stage::after {
  content: "" !important;
  position: absolute !important;
  inset: 18px !important;
  z-index: 9 !important;
  border-radius: 30px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  pointer-events: none !important;
}

.puniking-3d-viewer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
}

.puniking-3d-viewer canvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.puniking-3d-loading {
  position: absolute !important;
  inset: 0 !important;
  z-index: 30 !important;
  display: grid !important;
  place-items: center !important;
  color: #fff0b7 !important;
  background: rgba(5,6,9,.22) !important;
  backdrop-filter: blur(6px) !important;
  transition: opacity .35s ease, visibility .35s ease !important;
}

.puniking-3d-loading.is-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
}

.puniking-3d-badge {
  position: absolute !important;
  z-index: 20 !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  color: #fff !important;
  font-size: 14px !important;
  letter-spacing: .02em !important;
  background: rgba(8,10,14,.42) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.38) !important;
}

.puniking-3d-badge.badge-a {
  right: 28px !important;
  top: 28px !important;
}

.puniking-3d-badge.badge-b {
  left: 28px !important;
  bottom: 28px !important;
}

.puniking-3d-badge.badge-c {
  right: 28px !important;
  bottom: 96px !important;
}

@media (max-width: 1024px) {
  .puniking-3d-hero-inner {
    grid-template-columns: 1fr !important;
  }

  .puniking-3d-stage-wrap {
    min-height: 520px !important;
  }
}

@media (max-width: 720px) {
  .puniking-3d-hero-section {
    padding-top: 60px !important;
    min-height: auto !important;
  }

  .puniking-3d-hero-copy h1 {
    font-size: clamp(42px, 13vw, 64px) !important;
  }

  .puniking-3d-stage {
    height: min(560px, 96vw) !important;
    min-height: 420px !important;
    border-radius: 32px !important;
  }

  .puniking-3d-badge {
    font-size: 12px !important;
    padding: 10px 12px !important;
  }

  .puniking-3d-badge.badge-c {
    display: none !important;
  }
}