/* ==========================================================================
   FlexOps Custom Theme – 2026 Style Guide
   Purely aesthetic updates – no functionality changed
   ========================================================================== */

/* 1. Color Palette from Style Guide */
:root {
  --primary:      #14B8A6;     /* Main Teal */
  --deep-teal:    #0F766E;     /* Dark Accent */
  --soft-gray:    #F8FAFC;     /* Page Background */
  --brand-dark:   #0F172A;
  --text-secondary: #64748B;
  --primary-hover: #0D9488;
}

/* 2. Main Background */
body {
  background-color: var(--soft-gray) !important;
}

/* 3. Rounder Corners (16px) */
.rounded-custom,
.rounded-2xl,
.rounded-xl,
.rounded-lg,
.rounded-2xl {
  border-radius: 16px !important;
}

/* 4. Card Hover Effect (Lift + Glow) */
.service-card,
.bg-white.rounded-custom,
.shadow-sm,
.shadow-2xl {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.service-card:hover,
.bg-white.rounded-custom:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.12), 
              0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
  border-color: var(--primary) !important;
}

/* 5. Buttons – New Primary Style */
.bg-primary,
button.bg-primary {
  background-color: var(--primary) !important;
  border-radius: 16px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

.bg-primary:hover,
button.bg-primary:hover {
  background-color: var(--primary-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 20px rgba(20, 184, 166, 0.3) !important;
}

/* 6. Service Cards Hover Overlay Fix */
.service-card {
  position: relative;
  overflow: hidden;
}

.task-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.95);
  padding: 32px 24px;
  color: white;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.service-card:hover .task-overlay {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Keep "Book Hours" button clickable */
.service-card .bg-primary {
  position: relative;
  z-index: 20;
}

/* 7. How It Works Section */
#how-it-works {
  background-color: var(--deep-teal) !important;
}

/* 8. Scroll Reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* 9. Minor Typography Polish */
.font-heading {
  letter-spacing: -0.025em;
}

.text-primary {
  color: var(--primary) !important;
}