/* ==========================================================================
   Business-in-a-Box by Zenix Marketing
   Static Standalone Styles (No build tools required)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* Sticky header, scrolled state. Defined as a plain CSS class rather than
   Tailwind utilities toggled via classList — the Tailwind CDN's runtime JIT
   scans HTML at load and does not reliably pick up arbitrary-value classes
   (bg-[#...]/85, shadow-black/60) added later purely through JavaScript, which
   left the header permanently transparent with page content bleeding through
   it while scrolling. A real stylesheet rule always applies regardless. */
#site-header.header-scrolled {
  background-color: rgba(8, 7, 13, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(63, 63, 70, 0.6);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

body {
  font-family: var(--font-sans);
  background-color: #08070d;
  color: #f4f4f5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* 3D Transform Utilities for the Centerpiece Cube */
.perspective-1200 {
  perspective: 1200px;
}

.preserve-3d {
  transform-style: preserve-3d;
}

.backface-hidden {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 3D Cube Faces Coordinates (based on 220px cube size) */
.cube-face-front  { transform: rotateY(0deg) translateZ(110px); }
.cube-face-back   { transform: rotateY(180deg) translateZ(110px); }
.cube-face-right  { transform: rotateY(90deg) translateZ(110px); }
.cube-face-left   { transform: rotateY(-90deg) translateZ(110px); }
.cube-face-top    { transform: rotateX(90deg) translateZ(110px); }
.cube-face-bottom { transform: rotateX(-90deg) translateZ(110px); }

@media (max-width: 640px) {
  .cube-face-front  { transform: rotateY(0deg) translateZ(95px); }
  .cube-face-back   { transform: rotateY(180deg) translateZ(95px); }
  .cube-face-right  { transform: rotateY(90deg) translateZ(95px); }
  .cube-face-left   { transform: rotateY(-90deg) translateZ(95px); }
  .cube-face-top    { transform: rotateX(90deg) translateZ(95px); }
  .cube-face-bottom { transform: rotateX(-90deg) translateZ(95px); }
}

/* Smooth Rotation Animations */
@keyframes spinSlow {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.animate-spin-slow {
  animation: spinSlow 40s linear infinite;
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(1.04); }
}

.animate-pulse-glow {
  animation: pulseGlow 6s ease-in-out infinite;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #08070d;
}
::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3f3f46;
}

/* Tooltip helper */
.tooltip-box {
  display: none;
}
.has-tooltip:hover .tooltip-box {
  display: block;
}

/* Glass effect */
.glass-panel {
  background: rgba(15, 13, 26, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(99, 102, 241, 0.15);
}