/* ===== Black Fox Development Corporation — Custom Styles ===== */

/* Hero gradient background */
.hero-gradient {
  background: radial-gradient(ellipse 80% 60% at 50% 0%, #12141E 0%, #06080E 100%);
}

/* Subtle grid overlay */
.grid-overlay {
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Hero gradient text */
.hero-gradient-text {
  background: linear-gradient(135deg, #F97316 0%, #FBBF24 50%, #F97316 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
}

/* Scroll-based navbar shrink */
#navbar.scrolled {
  background-color: rgba(6, 8, 14, 0.97);
  border-color: #1F2438;
}

/* Service card subtle glow on hover */
.service-card:hover {
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.15), 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Phone mockup subtle depth */
.phone-mockup {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05),
    0 30px 60px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

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

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #06080E;
}
::-webkit-scrollbar-thumb {
  background: #1F2438;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #F97316;
}

/* Focus styles */
input:focus, textarea:focus, select:focus {
  outline: none;
}

/* Select arrow */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7A99' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* Nav active state */
.nav-link.active {
  color: white;
}

/* Shimmer animation */
@keyframes shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Fade in up for sections */
.fade-in-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Tech pill hover ring */
.tech-pill:hover {
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.3);
}

/* Button press */
button:active, a:active {
  transform: scale(0.98);
}