:root {
  --background: 225 18% 7%;
  --foreground: 0 0% 98%;
  --primary: 355 86% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 10%;
  --secondary-foreground: 0 0% 96%;
  --muted: 230 10% 19%;
  --muted-foreground: 225 9% 70%;
  --destructive: 0 88% 58%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 21%;
  --card: 230 16% 11%;
  --card-foreground: 0 0% 97%;
  --shadow-sm: 0 8px 20px hsl(0 0% 0% / 0.22);
  --shadow-md: 0 18px 45px hsl(0 0% 0% / 0.34);
  --shadow-lg: 0 32px 80px hsl(355 86% 20% / 0.38);
  --transition-fast: 160ms ease;
  --transition-smooth: 320ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 0.75rem;
  --radius-md: 1.1rem;
  --radius-lg: 1.75rem;
}

.dark {
  --background: 225 18% 7%;
  --foreground: 0 0% 98%;
  --primary: 355 86% 50%;
  --secondary: 0 0% 10%;
  --muted: 230 10% 19%;
  --destructive: 0 88% 58%;
  --border: 0 0% 21%;
  --card: 230 16% 11%;
}

.light {
  --background: 0 0% 96%;
  --foreground: 230 18% 8%;
  --primary: 355 82% 46%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 100%;
  --secondary-foreground: 230 18% 8%;
  --muted: 0 0% 88%;
  --muted-foreground: 230 8% 37%;
  --destructive: 0 78% 48%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 82%;
  --card: 0 0% 100%;
  --card-foreground: 230 18% 8%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 15%, hsl(var(--primary) / 0.22), transparent 30rem),
    radial-gradient(circle at 86% 8%, hsl(0 0% 100% / 0.08), transparent 24rem),
    linear-gradient(145deg, hsl(var(--background)), hsl(0 0% 2%));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

.scene-3d { perspective: 1200px; }
.tilt-card {
  transform-style: preserve-3d;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}
.tilt-card:hover {
  transform: translateY(-10px) rotateX(7deg) rotateY(-7deg);
  box-shadow: var(--shadow-lg);
  border-color: hsl(var(--primary) / 0.55);
}
.float-3d { animation: float3d 5.5s ease-in-out infinite; }
@keyframes float3d {
  0%, 100% { transform: translateY(0) rotateX(0deg) rotateY(0deg); }
  50% { transform: translateY(-16px) rotateX(6deg) rotateY(-8deg); }
}
.shine {
  position: relative;
  overflow: hidden;
}
.shine::after {
  content: "";
  position: absolute;
  inset: -40% auto auto -80%;
  width: 55%;
  height: 180%;
  background: linear-gradient(90deg, transparent, hsl(0 0% 100% / 0.25), transparent);
  transform: rotate(25deg);
  transition: left 650ms ease;
}
.shine:hover::after { left: 125%; }
.focus-ring:focus-visible {
  outline: 3px solid hsl(var(--primary) / 0.45);
  outline-offset: 3px;
}