.rockit-cube-ad {
  --rk-ink: #0B1220;
  --rk-panel: #131B2E;
  --rk-text: #EDEFF7;
  --rk-muted: #9AA4BF;
  --rk-blue: #3E7BFA;
  --rk-size: 260px;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.rockit-cube-ad * { box-sizing: border-box; }
.rockit-cube-ad .rk-label {
  display: block;
  font-size: 11px;
  color: var(--rk-muted);
  margin-bottom: 8px;
}
.rockit-cube-ad .rk-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  perspective: 1000px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--rk-ink);
  box-shadow: 0 20px 40px -14px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3);
}
.rockit-cube-ad .rk-tilt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  transform: rotateX(-16deg);
}
.rockit-cube-ad .rk-cube {
  position: relative;
  width: var(--rk-size);
  height: var(--rk-size);
  transform-style: preserve-3d;
  animation: rockit-cube-spin 34s linear infinite;
}
.rockit-cube-ad .rk-scene:hover .rk-cube,
.rockit-cube-ad .rk-scene:focus-within .rk-cube {
  animation-play-state: paused;
}
@keyframes rockit-cube-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(-360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .rockit-cube-ad .rk-cube { animation-duration: 120s; }
}
.rockit-cube-ad .rk-face {
  position: absolute;
  width: var(--rk-size);
  height: var(--rk-size);
  top: 0; left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px 20px 20px;
  background-color: var(--rk-panel);
  background-image:
    radial-gradient(120% 90% at 15% 0%, var(--face-glow, rgba(62,123,250,.4)) 0%, transparent 55%),
    linear-gradient(180deg, rgba(11,18,32,.10) 0%, rgba(11,18,32,.50) 42%, rgba(7,11,20,.95) 100%),
    var(--face-img, none);
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  box-shadow:
    inset 10px 0 18px -14px rgba(0,0,0,.75),
    inset -10px 0 18px -14px rgba(255,255,255,.16);
  backface-visibility: hidden;
  text-decoration: none;
  color: var(--rk-text);
  border: 1px solid rgba(255,255,255,.06);
}
.rockit-cube-ad .rk-f1 { transform: rotateY(0deg)   translateZ(calc(var(--rk-size) / 2)); }
.rockit-cube-ad .rk-f2 { transform: rotateY(90deg)  translateZ(calc(var(--rk-size) / 2)); }
.rockit-cube-ad .rk-f3 { transform: rotateY(180deg) translateZ(calc(var(--rk-size) / 2)); }
.rockit-cube-ad .rk-f4 { transform: rotateY(270deg) translateZ(calc(var(--rk-size) / 2)); }

.rockit-cube-ad .rk-top,
.rockit-cube-ad .rk-bottom {
  justify-content: center;
  align-items: center;
  background-image:
    linear-gradient(rgba(11,18,32,.86), rgba(11,18,32,.86)),
    var(--face-img, none);
  background-size: cover, cover;
  background-position: center, center;
  box-shadow: none;
}
.rockit-cube-ad .rk-top    { transform: rotateX(90deg)  translateZ(calc(var(--rk-size) / 2)); }
.rockit-cube-ad .rk-bottom { transform: rotateX(-90deg) translateZ(calc(var(--rk-size) / 2)); }
.rockit-cube-ad .rk-mark {
  font-weight: 700;
  font-size: 15px;
  color: rgba(237,239,247,.6);
  letter-spacing: .02em;
}
.rockit-cube-ad .rk-mark span { color: var(--rk-blue); }

.rockit-cube-ad .rk-headline {
  font-size: 18px; line-height: 1.2; font-weight: 600; margin: 0 0 7px;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.rockit-cube-ad .rk-sub {
  font-size: 12px; line-height: 1.5; color: var(--rk-muted); margin: 0; max-width: 190px;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

.rockit-cube-ad .rk-gloss {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(115deg,
    rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 24%,
    rgba(255,255,255,0) 76%, rgba(255,255,255,.05) 100%);
  mix-blend-mode: screen;
}
.rockit-cube-ad .rk-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 12px 14px 14px;
  background: linear-gradient(0deg, rgba(11,18,32,.94) 0%, rgba(11,18,32,.78) 60%, transparent 100%);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.rockit-cube-ad .rk-brand {
  font-size: 12.5px; font-weight: 600; color: var(--rk-text); white-space: nowrap;
}
.rockit-cube-ad .rk-brand span { color: var(--rk-blue); }
.rockit-cube-ad .rk-cta {
  flex-shrink: 0;
  font-size: 11.5px; font-weight: 600; color: var(--rk-ink);
  background: var(--rk-text);
  padding: 7px 12px; border-radius: 8px;
  text-decoration: none; white-space: nowrap;
  transition: transform .15s ease, background .15s ease;
}
.rockit-cube-ad .rk-cta:hover { background: var(--rk-blue); color: #fff; transform: translateY(-1px); }