:root {
  --background: 228 32% 8%;
  --foreground: 220 20% 96%;
  --primary: 283 88% 62%;
  --secondary: 191 90% 58%;
  --muted: 224 18% 18%;
  --muted-foreground: 222 12% 70%;
  --destructive: 0 72% 58%;
  --border: 225 16% 24%;
  --card: 228 25% 12%;
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 18px 40px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 20px 60px rgba(161, 79, 255, 0.25);
  --transition-fast: 160ms ease;
  --transition-smooth: 320ms cubic-bezier(0.22, 1, 0.36, 1);
  --radius-sm: 0.7rem;
  --radius-md: 1rem;
  --radius-lg: 1.6rem;
}

.dark {
  --background: 228 32% 8%;
  --foreground: 220 20% 96%;
  --primary: 283 88% 62%;
  --secondary: 191 90% 58%;
  --muted: 224 18% 18%;
  --muted-foreground: 222 12% 70%;
  --destructive: 0 72% 58%;
  --border: 225 16% 24%;
  --card: 228 25% 12%;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

::selection {
  background: hsl(var(--primary) / 0.35);
  color: hsl(var(--foreground));
}

.scene-3d {
  perspective: 1200px;
}

.scene-3d > div {
  transform-style: preserve-3d;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.cube {
  position: absolute;
  transform-style: preserve-3d;
  animation: orbitCube 11s linear infinite;
}

.cube-face {
  position: absolute;
  inset: 0;
  border-radius: 1.25rem;
  border: 1px solid hsla(0, 0%, 100%, 0.14);
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.12), 0 14px 32px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
}

.cube-front { transform: translateZ(88px); }
.cube-back { transform: rotateY(180deg) translateZ(88px); }
.cube-left { transform: rotateY(-90deg) translateZ(88px); }
.cube-right { transform: rotateY(90deg) translateZ(88px); }
.cube-top { transform: rotateX(90deg) translateZ(88px); }
.cube-bottom { transform: rotateX(-90deg) translateZ(88px); }

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

@keyframes orbitCube {
  0% { transform: rotateX(-18deg) rotateY(0deg); }
  50% { transform: rotateX(14deg) rotateY(180deg); }
  100% { transform: rotateX(-18deg) rotateY(360deg); }
}

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

.product-card:hover .card-tilt {
  transform: rotateX(8deg) rotateY(-8deg) translateY(-2px);
}

.card-tilt {
  transform-style: preserve-3d;
  transition: transform var(--transition-smooth);
}

.story-panel {
  position: relative;
  overflow: hidden;
}

.story-panel::after {
  content: '';
  position: absolute;
  inset: auto -30% -60% auto;
  width: 10rem;
  height: 10rem;
  border-radius: 999px;
  background: radial-gradient(circle, hsl(var(--primary) / 0.18), transparent 65%);
  pointer-events: none;
}

input,
button,
a {
  transition: all var(--transition-fast);
}