/* ============================================================
   ShramSetu - Shared Gradient & Interactive Styles
   ============================================================ */

/* ── Gradient Utilities ── */
.grad-brand {
  background: linear-gradient(135deg, #0D2137 0%, #1A5276 60%, #0D9488 100%);
}
.grad-orange {
  background: linear-gradient(135deg, #F39C12 0%, #E67E22 100%);
}
.grad-teal {
  background: linear-gradient(135deg, #0D9488 0%, #0D7377 100%);
}
.grad-text {
  background: linear-gradient(135deg, #F39C12 0%, #E67E22 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.grad-text-blue {
  background: linear-gradient(135deg, #1A5276 0%, #0D9488 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Glassmorphism Cards ── */
.glass-card {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.glass-card-light {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(26,82,118,0.12);
  box-shadow: 0 4px 24px rgba(26,82,118,0.10);
}

/* ── Interactive Card Hover ── */
.interactive-card {
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.32s cubic-bezier(0.4,0,0.2,1),
              border-color 0.32s ease;
  will-change: transform;
}
.interactive-card:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 20px 48px rgba(26,82,118,0.18), 0 4px 12px rgba(230,126,34,0.10);
  border-color: rgba(230,126,34,0.35) !important;
}

/* ── Gradient Border Cards ── */
.grad-border-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
}
.grad-border-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  background: linear-gradient(135deg, #1A5276, #E67E22, #0D9488);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.grad-border-card:hover::before {
  opacity: 1;
}

/* ── Shimmer Button ── */
.shimmer-btn {
  position: relative;
  overflow: hidden;
}
.shimmer-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left 0.5s ease;
}
.shimmer-btn:hover::after {
  left: 150%;
}

/* ── Animated Gradient Background ── */
@keyframes gradShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.animated-grad-bg {
  background: linear-gradient(135deg, #0D2137, #1A5276, #0D9488, #1A5276, #0D2137);
  background-size: 300% 300%;
  animation: gradShift 12s ease infinite;
}

/* ── Pulse Ring ── */
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(230,126,34,0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(230,126,34,0); }
  100% { box-shadow: 0 0 0 0 rgba(230,126,34,0); }
}
.pulse-ring {
  animation: pulseRing 2.2s cubic-bezier(0.455,0.03,0.515,0.955) infinite;
}

/* ── Floating animation ── */
@keyframes floatUp {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
.float-anim {
  animation: floatUp 4s ease-in-out infinite;
}

/* ── Icon Gradient Backgrounds ── */
.icon-grad-orange {
  background: linear-gradient(135deg, #F39C12, #E67E22);
  box-shadow: 0 4px 16px rgba(230,126,34,0.35);
}
.icon-grad-blue {
  background: linear-gradient(135deg, #1A5276, #2980B9);
  box-shadow: 0 4px 16px rgba(26,82,118,0.35);
}
.icon-grad-teal {
  background: linear-gradient(135deg, #0D9488, #0D7377);
  box-shadow: 0 4px 16px rgba(13,148,136,0.35);
}
.icon-grad-purple {
  background: linear-gradient(135deg, #8E44AD, #6C3483);
  box-shadow: 0 4px 16px rgba(142,68,173,0.35);
}

/* ── Stats Counter ── */
.stat-counter {
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease;
}

/* ── Gradient Section Divider ── */
.section-divider {
  height: 4px;
  background: linear-gradient(90deg, transparent, #E67E22, #1A5276, #0D9488, transparent);
  border: none;
  margin: 0;
}

/* ── Scroll Reveal Animation ── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ── Nav Scroll Effect ── */
.nav-scrolled {
  background: rgba(13,33,55,0.97) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 24px rgba(0,0,0,0.25);
}

/* ── Tooltip ── */
[data-tooltip] {
  position: relative;
  cursor: pointer;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  background: #0D2137;
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ── Progress Bar ── */
.progress-bar-fill {
  background: linear-gradient(90deg, #1A5276, #E67E22);
  border-radius: 99px;
  height: 100%;
  transition: width 1.2s cubic-bezier(0.4,0,0.2,1);
}

/* ── Gradient Table Header ── */
.table-grad-header {
  background: linear-gradient(135deg, #0D2137 0%, #1A5276 100%);
  color: #fff;
}

/* ── Ripple Effect ── */
.ripple {
  position: relative;
  overflow: hidden;
}
.ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: scale(0);
  animation: rippleAnim 0.6s linear;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ── Gradient badge ── */
.badge-grad {
  background: linear-gradient(135deg, #F39C12, #E67E22);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 99px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.badge-grad-blue {
  background: linear-gradient(135deg, #1A5276, #0D9488);
  color: #fff;
}

/* ── Gradient CTA Section ── */
.cta-grad-section {
  background: linear-gradient(135deg, #0D2137 0%, #1A5276 40%, #0D9488 100%);
  position: relative;
  overflow: hidden;
}
.cta-grad-section::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -20%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230,126,34,0.18) 0%, transparent 70%);
}

/* ── Pricing Card Highlight ── */
.pricing-highlight {
  background: linear-gradient(135deg, #0D2137, #1A5276);
  border: 2px solid rgba(230,126,34,0.6);
  box-shadow: 0 12px 40px rgba(26,82,118,0.4), 0 0 0 1px rgba(230,126,34,0.2);
}

/* ── Pricing Card Popular: ensure all text is light on dark bg ── */
.pricing-card-popular * {
  --tw-text-opacity: 1;
}
.pricing-card-popular h3,
.pricing-card-popular p,
.pricing-card-popular span:not([class*="bg-"]) {
  color: rgba(255,255,255,0.95);
}
.pricing-card-popular svg {
  color: #4ade80;
}

/* ── Feature Icon Bounce ── */
.icon-bounce:hover {
  animation: iconBounce 0.5s cubic-bezier(0.36,0.07,0.19,0.97);
}
@keyframes iconBounce {
  0%, 100% { transform: scale(1); }
  30%       { transform: scale(1.25) rotate(-5deg); }
  60%       { transform: scale(0.95) rotate(3deg); }
}

/* ── Number Ticker ── */
@keyframes countUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.count-up {
  animation: countUp 0.8s ease forwards;
}

/* ── Mobile Responsive ── */
@media (max-width: 640px) {
  .interactive-card:hover {
    transform: translateY(-4px) scale(1.008);
  }
}

/* ============================================================
   Step / Pointer Animations (hutekhr.com style)
   ============================================================ */

/* ── Step circle base ── */
.timeline-step .timeline-circle,
.step-node,
.step-icon-wrap {
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.35s ease,
              background 0.35s ease;
  cursor: pointer;
  position: relative;
}

/* ── Hover: lift + glow + scale ── */
.timeline-step:hover .timeline-circle,
.timeline-step:hover .step-icon-wrap {
  transform: translateY(-6px) scale(1.15);
  box-shadow: 0 12px 28px rgba(230,126,34,0.45), 0 0 0 6px rgba(230,126,34,0.12);
  background: linear-gradient(135deg, #F39C12 0%, #D35400 100%) !important;
}

/* ── Pulse ring on hover ── */
.timeline-step .timeline-circle::before,
.step-icon-wrap::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(230,126,34,0.4);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.timeline-step:hover .timeline-circle::before,
.timeline-step:hover .step-icon-wrap::before {
  opacity: 1;
  transform: scale(1);
  animation: stepPulse 1.8s ease-in-out infinite;
}
@keyframes stepPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230,126,34,0.4); }
  50%       { box-shadow: 0 0 0 12px rgba(230,126,34,0); }
}

/* ── Step content slide up on hover ── */
.timeline-step > div:last-child,
.step-content {
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease;
}
.timeline-step:hover > div:last-child {
  transform: translateY(-4px);
}

/* ── Step number gradient text ── */
.timeline-step:hover .timeline-circle,
.step-num {
  background: linear-gradient(135deg, #F39C12, #E67E22) !important;
}

/* ── Connector line glow on hover ── */
.timeline-step:not(:last-child)::after {
  transition: background 0.4s ease;
}
.timeline-step:hover:not(:last-child)::after {
  background: linear-gradient(90deg, #E67E22, #F39C12, rgba(230,126,34,0.1)) !important;
  height: 3px !important;
}

/* ── Feature step icons (for-cas / features page) ── */
.step-icon-circle {
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.35s ease;
}
.step-icon-circle:hover,
.step-card:hover .step-icon-circle {
  transform: translateY(-6px) scale(1.12) rotate(-4deg);
  box-shadow: 0 16px 32px rgba(230,126,34,0.4);
}

/* ── Pointer dots on timeline connectors ── */
.connector-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E67E22, #1A5276);
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.35s ease;
}
.connector-dot:hover,
.timeline-step:hover .connector-dot {
  transform: scale(1.6);
  box-shadow: 0 0 0 4px rgba(230,126,34,0.25);
}

/* ── Active step highlight ── */
.timeline-step.active .timeline-circle {
  background: linear-gradient(135deg, #E67E22 0%, #F39C12 100%) !important;
  box-shadow: 0 6px 20px rgba(230,126,34,0.5), 0 0 0 4px rgba(230,126,34,0.15);
  transform: scale(1.1);
}

/* ── Step card (features page) ── */
.step-card {
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}
.step-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 48px rgba(26,82,118,0.16), 0 4px 12px rgba(230,126,34,0.12);
  border-color: rgba(230,126,34,0.4) !important;
}

/* ── Number chip ── */
.step-number-chip {
  background: linear-gradient(135deg, #1A5276, #E67E22);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
  font-size: 2rem;
  line-height: 1;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.step-card:hover .step-number-chip {
  transform: scale(1.2) rotate(-5deg);
}