:root {
  --agency-gold: #d4a373;
  --agency-dark: #0a0a0a;
}

body {
  background-color: var(--agency-dark);
  color: white;
  margin: 0;
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

.font-serif {
  font-family: 'Playfair Display', serif;
}

/* Portfolio Stage */
.portfolio-stage {
  perspective: 1200px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding-bottom: 100px;
}

@media (min-width: 768px) {
  .portfolio-stage {
    grid-template-columns: 1fr 1fr;
  }
}

/* Simplified Spinning Card (No Frame) */
.device-wrapper {
  position: relative;
  width: 280px;
  height: 580px;
  margin: 0 auto;
  transform-style: preserve-3d;
  border-radius: 40px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
  overflow: visible;
}

.device-content {
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: black;
}

.device-content img, .device-content video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Glassmorphism */
.glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.text-gradient {
  background: linear-gradient(135deg, #fff 0%, var(--agency-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Reveal Animation */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.cursor-dot { width: 8px; height: 8px; background: var(--agency-gold); border-radius: 50%; position: fixed; pointer-events: none; z-index: 10000; transform: translate(-50%, -50%); }
.cursor-outline { width: 40px; height: 40px; border: 1px solid var(--agency-gold); border-radius: 50%; position: fixed; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: all 0.2s ease-out; }

@media (max-width: 768px) {
  .cursor-dot, .cursor-outline { display: none; }
}