/* ======================================================
   ONLY ABOVE THE FOLD CSS (Performance Critical)
   Used for: body, hero section
====================================================== */
body {
  margin: 0;
  font-family: sans-serif;
}

.hero {
  min-height: 100vh;
  display: flex;
}

/* ======================================================
   MARQUEE ANIMATION
   Used for: marquee-track, animate-marquee
   NOTE: This animation is reused later (kept)
====================================================== */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  animation: marquee 30s linear infinite;
  will-change: transform;
}

/* ======================================================
   REVIEW SLIDER RESPONSIVE WIDTH
   Used for: testimonials / reviews
   NOTE: Appears again later (kept)
====================================================== */
.review-slide,
.review-card {
  min-width: 100%;
}

@media (min-width: 768px) {
  .review-slide,
  .review-card {
    min-width: 50%;
  }
}

@media (min-width: 1024px) {
  .review-slide,
  .review-card {
    min-width: 33.333%;
  }
}

/* ======================================================
   FLOATING ICON ANIMATION (Shared)
   Used for: floating-icon, popup-icon
   NOTE: float keyframes reused later (kept)
====================================================== */
@keyframes float {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0.6; }
  50%  { transform: translateY(-18px) rotate(10deg); opacity: 1; }
  100% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
}

.floating-icon,
.popup-icon {
  position: absolute;
  font-size: 2rem;
  animation: float 6s ease-in-out infinite;
  opacity: 0.6;
  will-change: transform, opacity;
}

.popup-icon {
  font-size: 1.8rem;
}

/* Animation delays */
.floating-icon:nth-child(2),
.popup-icon:nth-child(2) { animation-delay: 1s; }

.floating-icon:nth-child(3),
.popup-icon:nth-child(3) { animation-delay: 2s; }

.floating-icon:nth-child(4),
.popup-icon:nth-child(4) { animation-delay: 3s; }

.floating-icon:nth-child(5) { animation-delay: 4s; }

/* ======================================================
   FADE & FLOAT EFFECTS
   Used for: animated sections, hero text
   NOTE: fadeInUp & float reused later (kept)
====================================================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fadeInUp {
  animation: fadeInUp 1s ease-out both;
  will-change: transform, opacity;
}

.delay-200 {
  animation-delay: 0.2s;
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.animate-float {
  animation: floatSlow 6s ease-in-out infinite;
  will-change: transform;
}

/* ======================================================
   POPUP SCALE ANIMATION
   Used for: modal, popup cards
====================================================== */
@keyframes popup {
  0%   { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.animate-popup {
  animation: popup 0.6s ease-out;
  will-change: transform, opacity;
}

/* ======================================================
   FLOATING FORM INPUTS
   Used for: contact forms, lead forms
====================================================== */
.floating-group {
  position: relative;
}

.floating-input {
  width: 100%;
  padding: 16px 14px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  outline: none;
  background: transparent;
}

.floating-label {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  padding: 0 6px;
  color: #6b7280;
  font-size: 14px;
  pointer-events: none;
  transition: 0.2s ease;
}

.floating-input:focus + .floating-label,
.floating-input:not(:placeholder-shown) + .floating-label {
  top: -6px;
  font-size: 12px;
  color: #2563eb;
}

/* ======================================================
   PROBLEM / INFO SECTION STYLES
   Used for: problem-section, info-boxes
====================================================== */
.problem-section {
  padding: 80px 20px;
  background: #ffffff;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-header {
  max-width: 700px;
  margin-bottom: 60px;
}

.section-header h2 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 16px;
}

.section-header p {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.info-box {
  text-align: center;
  padding: 30px 20px;
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.info-box img {
  max-width: 100px;
  margin-bottom: 20px;
}

.info-box h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}

.info-box p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* ======================================================
   BACKGROUND FLOATING ICONS (Decorative)
   Used for: hero background effects
====================================================== */
@keyframes floatY {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

@keyframes fadePulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.5; }
}

.floating-icon {
  animation: floatY 6s ease-in-out infinite,
             fadePulse 4s ease-in-out infinite;
}

/* ======================================================
   LOCATION LINKS
   Used for: footer location / city links
====================================================== */
.loc-link {
  font-size: 0.875rem;
  color: #374151;
  transition: color 0.2s ease;
}

.loc-link:hover {
  color: #2563eb;
}

/* ======================================================
   ACCESSIBILITY & PERFORMANCE SAFETY
====================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ======================================================
   FINAL OVERRIDE LAYER (CRITICAL)
   Purpose: Resolve duplicates WITHOUT removing anything
====================================================== */

/* Marquee consistency */
.animate-marquee,
.marquee-track {
  animation: marquee 30s linear infinite;
  will-change: transform;
}

/* Floating icon consistency */
.floating-icon,
.popup-icon {
  animation: float 6s ease-in-out infinite;
  will-change: transform, opacity;
}

/* Fade animation consistency */
.animate-fadeInUp,
.animate-fade-in-up {
  animation: fadeInUp 0.9s ease-out both;
}

/* Review slider consistency */
.review-slide,
.review-card {
  min-width: 100%;
}

@media (min-width: 768px) {
  .review-slide,
  .review-card {
    min-width: 50%;
  }
}

@media (min-width: 1024px) {
  .review-slide,
  .review-card {
    min-width: 33.333%;
  }
}