/* Custom styles beyond Tailwind */

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Hero gradient */
.hero-gradient {
  background: linear-gradient(135deg, #2a201c 0%, #3a2e2a 50%, #2a201c 100%);
}

/* Accent color (brand tan) */
.accent-gold {
  color: #d49a5a;
}

.bg-accent-gold {
  background-color: #d49a5a;
}

.border-accent-gold {
  border-color: #d49a5a;
}

/* Card hover */
.service-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

/* Nav active link */
.nav-active {
  color: #d49a5a;
  border-bottom: 2px solid #d49a5a;
}

/* Hero photo */
.hero-photo-frame {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  padding: 5px;
  background: linear-gradient(135deg, #d49a5a, #8a5a2c);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
@media (min-width: 768px) {
  .hero-photo-frame {
    width: 220px;
    height: 220px;
  }
}

/* Tech stack pills */
.tech-pill {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background-color: rgba(212, 154, 90, 0.12);
  border: 1px solid rgba(212, 154, 90, 0.35);
  color: #d49a5a;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Timeline dot for case studies */
.timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #d49a5a;
}