/* 
  Tradies Voice - Master Styles 
  Engineered to match johnni.ai visual DNA in Orange 
*/

:root {
  --primary-orange: #ff6b00;
  --dark-navy: #103047;
  --bg-orange-tint: #fdf5ef;
  --accent-gradient: linear-gradient(90deg, #ff6b00 20%, #ff5400 52%, #fbb034);
  --shimmer-btn: linear-gradient(45deg, #ff8c00, #ff5400);
}

/* 1. Global Font Force (Mulish is the GHL equivalent) */
body,
h1,
h2,
h3,
h4,
p {
  font-family: 'Mulish', sans-serif !important;
  letter-spacing: -0.04em !important;
}

/* 2. Hero Background Logic */
.hero-section {
  background: linear-gradient(0deg, #8b3a00, #ff6b00 32%, #fff3d9 78%, #ffffff) !important;
  padding-bottom: 50px !important;
}

/* 3. Gradient Text Highlight */
.highlight-text {
  -webkit-text-fill-color: transparent;
  background-image: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  display: inline-block;
}

/* 4. Shimmer Get Started Button */
.shimmer-btn {
  position: relative;
  background: var(--shimmer-btn) !important;
  border: none !important;
  color: white !important;
  padding: 12px 24px !important;
  font-weight: bold !important;
  border-radius: 50px !important;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease;
}

.shimmer-btn::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.8) 50%,
      rgba(255, 255, 255, 0) 100%);
  transform: rotate(45deg);
  animation: shimmer-effect 3s infinite;
}

@keyframes shimmer-effect {
  0% {
    transform: rotate(45deg) translate(-50%, -50%);
  }

  100% {
    transform: rotate(45deg) translate(50%, 50%);
  }
}

/* 5. Pricing/FAQ Card Styles */
.custom-card {
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.08) !important;
  padding: 24px;
}