/* ---------------------------------------------------
   GLOBAL BASE STYLING
   --------------------------------------------------- */

:root {
  --primary: #FF5733;
  --accent: #C6FF00;
  --navy: #0A1930;
  --navy2: #071A33;
  --navy3: #122544;
  --light: #F7F7F7;
  --dark: #1A1A1A;

  --radius-soft: 12px;
  --radius-medium: 18px;
  --radius-large: 28px;

  --shadow-card: 0 8px 20px rgba(0, 0, 0, 0.08);
  --shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.14);

  --space-section: 6rem;
  --space-sectionLg: 8rem;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Inter, sans-serif;
  color: #1a1a1a;
}

/* Link transitions */
a {
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* ---------------------------------------------------
   UNIVERSAL TRANSITION BASE
   --------------------------------------------------- */

* {
  transition: all 0.25s ease;
}

/* ---------------------------------------------------
   FADE-IN ON SCROLL (SECTION ANIMATION)
   --------------------------------------------------- */

.fade-in-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

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

/* ---------------------------------------------------
   HERO FADE-IN ON PAGE LOAD
   --------------------------------------------------- */

.hero-fade {
  opacity: 0;
  animation: heroIn 1.2s ease forwards;
}

/* ---------------------------------------------------
   THEME COLOR UTILITIES (fallback + consistency)
   --------------------------------------------------- */
.bg-primary {
  background-color: var(--primary) !important;
}

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

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

.bg-accent {
  background-color: var(--accent) !important;
}

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

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

.bg-navy {
  background-color: var(--navy) !important;
}

.bg-navy2 {
  background-color: var(--navy2) !important;
}

.bg-navy3 {
  background-color: var(--navy3) !important;
}

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

.bg-light {
  background-color: var(--light) !important;
}

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

.bg-dark {
  background-color: var(--dark) !important;
}

/* ---------------------------------------------------
   RADIUS UTILITIES (fallback + consistency)
   --------------------------------------------------- */
.rounded-soft {
  border-radius: var(--radius-soft) !important;
}

.rounded-medium {
  border-radius: var(--radius-medium) !important;
}

.rounded-large {
  border-radius: var(--radius-large) !important;
}

/* ---------------------------------------------------
   FONT UTILITIES (fallback)
   --------------------------------------------------- */
.font-body {
  font-family: Inter, sans-serif !important;
}

.font-heading {
  font-family: Inter, sans-serif !important;
}

@keyframes heroIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------
   BUTTON HOVER (GLOBAL)
   --------------------------------------------------- */

.btn-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-hover:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
}

/* ---------------------------------------------------
   CTA PULSE (ATTENTION DRAWER)
   --------------------------------------------------- */

.cta-pulse {
  animation: pulse 2s ease-in-out infinite;
  animation-delay: 1.5s;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.15);
  }

  50% {
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.15);
  }
}

/* ---------------------------------------------------
   CARD HOVER (SERVICE CARDS, PRICING CARDS)
   --------------------------------------------------- */

.card-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card-hover:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
}

/* ---------------------------------------------------
   GLOW HIGHLIGHT (BESTSELLER PRICING BOX)
   --------------------------------------------------- */

.glow-highlight {
  animation: glow 3s ease-in-out infinite;
}

@keyframes glow {
  0% {
    box-shadow: 0 0 0 rgba(255, 87, 51, 0.3);
  }

  50% {
    box-shadow: 0 0 18px rgba(255, 87, 51, 0.5);
  }

  100% {
    box-shadow: 0 0 0 rgba(255, 87, 51, 0.3);
  }
}

/* ---------------------------------------------------
   SLIDE-IN LEFT / RIGHT (TESTIMONIALS, SECTIONS)
   --------------------------------------------------- */

.slide-in-left {
  opacity: 0;
  transform: translateX(-40px);
  animation: slideLeft 0.8s ease forwards;
}

@keyframes slideLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-right {
  opacity: 0;
  transform: translateX(40px);
  animation: slideRight 0.8s ease forwards;
}

@keyframes slideRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ---------------------------------------------------
   STAGGERED LIST FADE (BULLETS, BENEFITS, STEPS)
   --------------------------------------------------- */

.fade-stagger>* {
  opacity: 0;
  transform: translateY(20px);
  animation: staggerFade 0.6s ease forwards;
}

.fade-stagger>*:nth-child(1) {
  animation-delay: .1s;
}

.fade-stagger>*:nth-child(2) {
  animation-delay: .2s;
}

.fade-stagger>*:nth-child(3) {
  animation-delay: .3s;
}

.fade-stagger>*:nth-child(4) {
  animation-delay: .4s;
}

.fade-stagger>*:nth-child(5) {
  animation-delay: .5s;
}

.fade-stagger>*:nth-child(6) {
  animation-delay: .6s;
}

@keyframes staggerFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------
   BOUNCE-IN (BONUSES, VALUE STACKS)
   --------------------------------------------------- */

.bounce-in {
  opacity: 0;
  animation: bounceIn 0.8s cubic-bezier(.36, .07, .19, .97) forwards;
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(.9);
  }

  60% {
    opacity: 1;
    transform: scale(1.03);
  }

  100% {
    transform: scale(1);
  }
}

/* ---------------------------------------------------
   COUNTDOWN FLICKER (URGENCY TEXT)
   --------------------------------------------------- */

.countdown-flicker {
  animation: flicker 1.2s infinite;
}

@keyframes flicker {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .5;
  }
}

/* ---------------------------------------------------
   FLOATING BADGE (BESTSELLER LABEL)
   --------------------------------------------------- */

.float-badge {
  animation: floaty 3s ease-in-out infinite;
}

@keyframes floaty {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

/* ---------------------------------------------------
   IMAGE FADE-IN (GLOBAL)
   --------------------------------------------------- */

.img-fade {
  opacity: 0;
  animation: imgFadeIn 1s ease forwards;
}

@keyframes imgFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.98);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------------------------------------------------
   NEW: SCROLL REVEAL (fade-up)
   --------------------------------------------------- */

.fade-up {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity .8s ease, transform .8s ease;
}

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

/* ---------------------------------------------------
   NEW: SPLIT-REVEAL (image zoom-out)
   --------------------------------------------------- */

.split-reveal img {
  opacity: 0;
  transform: scale(1.14);
  transition: all 1s ease-out;
}

.split-reveal.visible img {
  opacity: 1;
  transform: scale(1);
}

/* ---------------------------------------------------
   NEW: HEARTBEAT CTA (Final CTA)
   --------------------------------------------------- */

.heartbeat {
  animation: heartbeat 1.6s infinite;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }

  20% {
    transform: scale(1.12);
  }

  40% {
    transform: scale(1);
  }

  60% {
    transform: scale(1.06);
  }

  80% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

/* ---------------------------------------------------
   NEW: COUNTDOWN GLOW (text urgency)
   --------------------------------------------------- */

.glow {
  animation: glowPulse 2s ease-in-out infinite alternate;
}

@keyframes glowPulse {
  0% {
    text-shadow: 0 0 10px rgba(255, 87, 51, 0.8);
  }

  100% {
    text-shadow: 0 0 22px rgba(255, 87, 51, 1);
  }
}

/* ---------------------------------------------------
   NEW: SCROLL PROGRESS BAR (UX premium feel)
   --------------------------------------------------- */
#progress-bar {
  height: 4px;
  background: var(--primary, #FF5733);
  width: 0%;
  transition: width .2s ease-out;
}

/* Smooth page fade */
.page-fade {
  opacity: 0;
  animation: pageFade 0.5s ease forwards;
}

@keyframes pageFade {
  to {
    opacity: 1;
  }
}

/* Utility shadows */
.shadow-soft {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.shadow-strong {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}

/* Soft hover scale */
.hover-grow {
  transition: transform 0.25s ease;
}

.hover-grow:hover {
  transform: scale(1.03);
}