/* ================================================================
   SOV Technologies — Design System v2
   Single source of truth for all colors, typography, spacing,
   shadows, animations, and responsive layout.
   
   ARCHITECTURE:
   1. Design Tokens (CSS custom properties)
   2. Global Typography Classes
   3. Smooth Scroll + Performance
   4. Spacing / Grid System
   5. Component Styles (using tokens only)
   6. Animations (GPU-optimized)
   7. Mobile-first Responsive
   8. Reduced Motion
================================================================ */

/* ================================================================
   1. DESIGN TOKENS — Single source of truth
================================================================ */
:root {
  /* ── Brand Colors (from SVG logo) ── */
  --c-green-50:  #f0f9e8;
  --c-green-100: #d8f0c0;
  --c-green-200: #b8e090;
  --c-green-300: #8ec860;
  --c-green-400: #6aad42;
  --c-green-500: #5B8E3E;   /* PRIMARY — logo green */
  --c-green-600: #4a7432;
  --c-green-700: #3d6129;
  --c-green-800: #2e4a1f;
  --c-green-900: #1a2e14;

  --c-red-400:   #f05a4a;
  --c-red-500:   #EA4232;   /* SECONDARY — logo red */
  --c-red-600:   #c0321f;

  --c-gold-400:  #fdd04a;
  --c-gold-500:  #FDBE23;   /* ACCENT — logo gold */
  --c-gold-600:  #e0a010;

  /* ── Semantic Color Aliases ── */
  --color-primary:        var(--c-green-500);
  --color-primary-dark:   var(--c-green-700);
  --color-primary-light:  var(--c-green-50);
  --color-secondary:      var(--c-red-500);
  --color-accent:         var(--c-gold-500);

  /* ── Background Scale ── */
  --bg-page:    #f7faf4;   /* warm off-white tinted with brand green */
  --bg-surface: #ffffff;
  --bg-muted:   #eef5e8;
  --bg-dark:    var(--c-green-900);

  /* ── Text Scale ── */
  --text-900: var(--c-green-900);  /* headings */
  --text-700: #3a4e2e;             /* body */
  --text-500: #5e7250;             /* secondary */
  --text-300: #8fa882;             /* muted / captions */
  --text-inverse: #ffffff;

  /* ── Border ── */
  --border-subtle:  rgba(91,142,62,0.10);
  --border-default: rgba(91,142,62,0.20);
  --border-strong:  rgba(91,142,62,0.40);

  /* ── Shadow Scale (brand-tinted, not black) ── */
  --shadow-xs: 0 1px 3px rgba(26,46,20,0.06);
  --shadow-sm: 0 2px 8px rgba(26,46,20,0.07), 0 1px 3px rgba(26,46,20,0.04);
  --shadow-md: 0 4px 16px rgba(26,46,20,0.08), 0 2px 6px rgba(26,46,20,0.04);
  --shadow-lg: 0 8px 32px rgba(26,46,20,0.10), 0 4px 12px rgba(26,46,20,0.05);
  --shadow-xl: 0 16px 48px rgba(26,46,20,0.12), 0 6px 18px rgba(26,46,20,0.06);
  --shadow-glow-green: 0 8px 32px rgba(91,142,62,0.28);
  --shadow-glow-red:   0 8px 32px rgba(234,66,50,0.28);
  --shadow-glow-gold:  0 8px 32px rgba(253,190,35,0.28);

  /* ── Typography ── */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Type scale (fluid) */
  --text-xs:   0.72rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  clamp(2.5rem, 6vw, 4rem);
  --text-hero: clamp(3rem, 8vw, 5.5rem);

  /* Line heights */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-relaxed:1.75;
  --leading-loose:  1.9;

  /* Letter spacing */
  --tracking-tight:  -0.04em;
  --tracking-snug:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.2em;

  /* Font weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;
  --weight-black:    900;

  /* ── Spacing Scale (4px base) ── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* Section padding */
  --section-y:    var(--space-24);   /* 96px desktop */
  --section-y-sm: var(--space-16);   /* 64px tablet */
  --section-y-xs: var(--space-12);   /* 48px mobile */

  /* Card padding */
  --card-pad:    var(--space-10);    /* 40px */
  --card-pad-sm: var(--space-6);     /* 24px */
  --card-radius: 20px;
  --card-radius-sm: 12px;

  /* ── Transitions ── */
  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   400ms;
  --dur-slower: 700ms;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-index scale ── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-cursor:   9999;
}

/* ── Override main.css legacy tokens with design system ── */
:root {
  --background-color: var(--bg-page);
  --default-color:    var(--text-700);
  --heading-color:    var(--text-900);
  --accent-color:     var(--color-primary);
  --surface-color:    var(--bg-surface);
  --default-font:     var(--font-sans);
  --heading-font:     var(--font-sans);
  --nav-font:         var(--font-sans);
  --nav-hover-color:  var(--color-primary);
}

/* ================================================================
   2. GLOBAL TYPOGRAPHY CLASSES
================================================================ */

/* ── Font everywhere ── */
*, *::before, *::after { box-sizing: border-box; }
html, body,
h1,h2,h3,h4,h5,h6,
p,a,li,span,button,
input,textarea,select,label {
  font-family: var(--font-sans) !important;
}

/* ── Utility type classes ── */
.t-hero    { font-size: var(--text-hero);  font-weight: var(--weight-black);    letter-spacing: var(--tracking-tight);  line-height: var(--leading-tight); }
.t-h1      { font-size: var(--text-5xl);   font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-tight);  line-height: var(--leading-tight); }
.t-h2      { font-size: var(--text-4xl);   font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-snug);   line-height: var(--leading-snug);  }
.t-h3      { font-size: var(--text-3xl);   font-weight: var(--weight-bold);      letter-spacing: var(--tracking-snug);   line-height: var(--leading-snug);  }
.t-h4      { font-size: var(--text-2xl);   font-weight: var(--weight-bold);      letter-spacing: var(--tracking-snug);   line-height: var(--leading-snug);  }
.t-h5      { font-size: var(--text-xl);    font-weight: var(--weight-semibold);  letter-spacing: var(--tracking-normal); line-height: var(--leading-snug);  }
.t-body-lg { font-size: var(--text-lg);    font-weight: var(--weight-regular);   line-height: var(--leading-relaxed); }
.t-body    { font-size: var(--text-base);  font-weight: var(--weight-regular);   line-height: var(--leading-relaxed); }
.t-body-sm { font-size: var(--text-sm);    font-weight: var(--weight-regular);   line-height: var(--leading-relaxed); }
.t-caption { font-size: var(--text-xs);    font-weight: var(--weight-medium);    letter-spacing: var(--tracking-wider); text-transform: uppercase; }
.t-label   { font-size: var(--text-xs);    font-weight: var(--weight-bold);      letter-spacing: var(--tracking-widest); text-transform: uppercase; }
.t-mono    { font-family: var(--font-mono) !important; }

/* ── Color utilities ── */
.t-primary   { color: var(--color-primary)  !important; }
.t-secondary { color: var(--color-secondary)!important; }
.t-accent    { color: var(--color-accent)   !important; }
.t-muted     { color: var(--text-300)       !important; }
.t-inverse   { color: var(--text-inverse)   !important; }
.t-gradient  {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Apply type scale to actual HTML elements ── */
h1 { font-size: var(--text-hero)  !important; font-weight: var(--weight-black)    !important; letter-spacing: var(--tracking-tight) !important; line-height: var(--leading-tight) !important; }
h2 { font-size: var(--text-4xl)   !important; font-weight: var(--weight-extrabold)!important; letter-spacing: var(--tracking-snug)  !important; line-height: var(--leading-snug)  !important; }
h3 { font-size: var(--text-3xl)   !important; font-weight: var(--weight-bold)     !important; letter-spacing: var(--tracking-snug)  !important; line-height: var(--leading-snug)  !important; }
h4 { font-size: var(--text-2xl)   !important; font-weight: var(--weight-bold)     !important; line-height: var(--leading-snug)  !important; }
h5 { font-size: var(--text-xl)    !important; font-weight: var(--weight-semibold) !important; line-height: var(--leading-snug)  !important; }
h6 { font-size: var(--text-lg)    !important; font-weight: var(--weight-semibold) !important; }
p  { font-size: var(--text-base)  !important; line-height: var(--leading-relaxed) !important; color: var(--text-700); }

/* ── Section title pattern ── */
.section-title h2 {
  font-size:      var(--text-xs)      !important;
  font-weight:    var(--weight-bold)  !important;
  letter-spacing: var(--tracking-widest) !important;
  color:          var(--color-primary)!important;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.section-title h2::before {
  content: '';
  display: inline-block;
  width: 18px; height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  flex-shrink: 0;
}
.section-title div {
  font-size:      var(--text-4xl)        !important;
  font-weight:    var(--weight-extrabold)!important;
  letter-spacing: var(--tracking-tight)  !important;
  line-height:    var(--leading-snug)    !important;
  color:          var(--text-900)        !important;
}
.section-title .description-title {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ================================================================
   3. SMOOTH SCROLL + PERFORMANCE
================================================================ */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* GPU-accelerated page entry */
body {
  background-color: var(--bg-page) !important;
  color: var(--text-700) !important;
  opacity: 0;
  animation: sov-page-in var(--dur-slow) var(--ease-out) 0.04s forwards;
  will-change: opacity;
}
@keyframes sov-page-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* Promote animated elements to own layer */
.hero-blob,
.cta-ring,
.about-dot,
.wf-cursor,
.wf-cursor-ring,
[data-wf-reveal] {
  will-change: transform, opacity;
}

/* ================================================================
   4. SPACING / GRID SYSTEM
================================================================ */

/* Section vertical rhythm */
section, .section {
  padding-top:    var(--section-y)    !important;
  padding-bottom: var(--section-y)    !important;
}
.section-title { padding-bottom: var(--space-16) !important; }

/* Alternating section backgrounds */
.hero.section,
.steps.section,
.contact.section,
.portfolio.section { background-color: var(--bg-surface) !important; }

.about.section,
.services.section,
.faq.section,
.testimonials.section { background-color: var(--bg-page) !important; }

/* Card padding */
.service-card                { padding: var(--card-pad)    !important; }
.about .about-content .feature-item { padding: var(--space-6)  !important; }
.contact .contact-info-box   { padding: var(--space-8) var(--space-6) !important; }
.contact .contact-form-wrapper { padding: var(--space-12) !important; }
.service-details .service-tabs .tab-content .benefit-card { padding: var(--space-8) !important; }

/* ── Equal-height card grid ── */
.services .row,
.about .row,
.contact .row,
.service-details .row,
.pricing .row {
  align-items: stretch !important;
}
.services .row [class*="col-"],
.about .row .col-md-6,
.contact .row .col-lg-4,
.service-details .row [class*="col-"],
.pricing .row [class*="col-"] {
  display: flex !important;
  flex-direction: column !important;
}
.service-card,
.about .about-content .feature-item,
.contact .contact-info-box,
.service-details .service-tabs .tab-content .benefit-card,
.pricing .pricing-card,
.about .testimonial-section .testimonial-item,
.testimonials .testimonial-item {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.service-card p,
.about .about-content .feature-item p,
.service-details .service-tabs .tab-content .benefit-card p { flex: 1 !important; }

/* Swiper equal height */
.testimonial-slider .swiper-slide,
.testimonials-slider .swiper-slide {
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
}
.testimonial-slider .swiper-slide .testimonial-item,
.testimonials-slider .swiper-slide .testimonial-item { flex: 1 !important; }

/* Revert layout rows */
.footer .row [class*="col-"],
.header .row [class*="col-"],
.hero .row [class*="col-"],
.steps .row [class*="col-"],
.call-to-action .row [class*="col-"],
.faq-9 .row [class*="col-"],
.page-title .row [class*="col-"] { display: block !important; }


/* ================================================================
   5. COMPONENT STYLES — all values via tokens
================================================================ */

/* ── Header ── */
.header .header-container {
  background: rgba(247,250,244,0.92) !important;
  border: 1px solid var(--border-subtle) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--dur-slow) var(--ease-out) !important;
}
body.scrolled .header .header-container {
  background: rgba(247,250,244,0.98) !important;
  border-color: var(--border-default) !important;
  box-shadow: var(--shadow-md) !important;
}
.navmenu a, .navmenu a:focus {
  font-weight:    var(--weight-medium)  !important;
  font-size:      var(--text-sm)        !important;
  letter-spacing: var(--tracking-normal)!important;
  transition: color var(--dur-base) ease !important;
}
.header .btn-getstarted {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
  font-weight:    var(--weight-bold)   !important;
  font-size:      var(--text-xs)       !important;
  letter-spacing: var(--tracking-wide) !important;
  box-shadow: var(--shadow-glow-green) !important;
  transition: all var(--dur-base) var(--ease-out) !important;
  animation: sov-pulse-cta 3s ease-in-out infinite;
}
.header .btn-getstarted:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(91,142,62,0.38) !important;
}
@keyframes sov-pulse-cta {
  0%,100% { box-shadow: var(--shadow-glow-green); }
  50%     { box-shadow: 0 8px 36px rgba(91,142,62,0.45); }
}

/* ── Hero ── */
.hero {
  background: linear-gradient(135deg,
    var(--c-green-50) 0%,
    var(--bg-page) 35%,
    #fff8f0 65%,
    #fef3e2 100%) !important;
  animation: none !important;
  position: relative;
  overflow: hidden;
}
.hero .main-heading h1 {
  font-size:      var(--text-hero)       !important;
  font-weight:    var(--weight-black)    !important;
  letter-spacing: var(--tracking-tight)  !important;
  line-height:    var(--leading-tight)   !important;
  background: linear-gradient(135deg, var(--text-900) 0%, var(--color-primary) 55%, var(--color-primary-dark) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.hero .agency-name h5 {
  font-size:      var(--text-xs)         !important;
  font-weight:    var(--weight-bold)     !important;
  letter-spacing: var(--tracking-widest) !important;
  color:          var(--color-primary)   !important;
  text-transform: uppercase !important;
}
.hero .description p {
  font-size:   var(--text-lg)       !important;
  font-weight: var(--weight-regular)!important;
  line-height: var(--leading-relaxed)!important;
  color:       var(--text-500)      !important;
}
.hero .stats-card {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--card-radius-sm) !important;
  padding: var(--space-6) !important;
  box-shadow: var(--shadow-lg) !important;
}
.hero .stats-card .stats-number h2 {
  font-size:      var(--text-5xl)     !important;
  font-weight:    var(--weight-black) !important;
  letter-spacing: var(--tracking-tight)!important;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Hero CTA Button ── */
.hero .cta-button .btn {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
  border: none !important;
  color: var(--text-inverse) !important;
  font-weight:    var(--weight-bold)   !important;
  font-size:      var(--text-sm)       !important;
  letter-spacing: var(--tracking-wide) !important;
  padding: var(--space-4) var(--space-10) !important;
  border-radius: 50px !important;
  box-shadow: var(--shadow-glow-green) !important;
  transition: all var(--dur-slow) var(--ease-out) !important;
  position: relative; overflow: hidden;
}
.hero .cta-button .btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 44px rgba(91,142,62,0.42) !important;
  color: var(--text-inverse) !important;
}
.hero .cta-button .btn:hover i { transform: translateX(6px) !important; }

/* ── Service Cards ── */
.service-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--dur-slow) var(--ease-out) !important;
  position: relative; overflow: hidden;
  min-height: 280px !important;
}
.service-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  transform: scaleX(0);
  transition: transform var(--dur-slow) var(--ease-out);
}
.service-card:hover { border-color: var(--border-default) !important; transform: translateY(-8px) !important; box-shadow: var(--shadow-xl) !important; }
.service-card:hover::after { transform: scaleX(1); }
.service-card h3 { font-size: var(--text-xl) !important; font-weight: var(--weight-bold) !important; letter-spacing: var(--tracking-snug) !important; }
.service-card p  { font-size: var(--text-sm) !important; line-height: var(--leading-relaxed) !important; color: var(--text-300) !important; }
.service-card .service-icon {
  background: var(--c-green-50) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 14px !important;
  width: 60px !important; height: 60px !important;
  transition: all var(--dur-base) var(--ease-spring) !important;
}
.service-card .service-icon i { color: var(--color-primary) !important; font-size: 28px !important; }
.service-card:hover .service-icon { background: var(--color-primary) !important; transform: rotate(-5deg) scale(1.1); }
.service-card:hover .service-icon i { color: var(--text-inverse) !important; }

/* ── Feature Items (About) ── */
.about .about-content .feature-item {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--card-radius-sm) !important;
  box-shadow: var(--shadow-xs) !important;
  transition: all var(--dur-slow) var(--ease-out) !important;
  min-height: 160px !important;
}
.about .about-content .feature-item:hover {
  border-color: var(--border-default) !important;
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-lg) !important;
}
.about .about-content .feature-item h5 { font-weight: var(--weight-bold) !important; font-size: var(--text-base) !important; }
.about .about-image .experience-badge {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
  border-radius: var(--card-radius-sm) !important;
  box-shadow: var(--shadow-glow-green) !important;
}

/* ── CTA Section ── */
.call-to-action { padding: 0 !important; }
.call-to-action .advertise-1 {
  background: linear-gradient(135deg, var(--c-green-900) 0%, #1a3312 45%, #0f2a0a 100%) !important;
  border-radius: 28px !important;
  padding: var(--space-20) var(--space-16) !important;
  border: 1px solid var(--border-strong) !important;
  overflow: hidden; position: relative;
}
.call-to-action .advertise-1 h2 {
  font-size:      var(--text-6xl)        !important;
  font-weight:    var(--weight-black)    !important;
  letter-spacing: var(--tracking-tight)  !important;
  line-height:    var(--leading-tight)   !important;
  color: var(--text-inverse) !important;
}
.call-to-action .advertise-1 p { color: rgba(255,255,255,0.65) !important; font-size: var(--text-base) !important; line-height: var(--leading-relaxed) !important; }
.call-to-action .advertise-1 .badge {
  background: rgba(253,190,35,0.15) !important;
  color: var(--c-gold-500) !important;
  border: 1px solid rgba(253,190,35,0.3) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: var(--tracking-widest) !important;
  border-radius: 50px !important;
  padding: var(--space-1) var(--space-4) !important;
}
.call-to-action .features .feature-item {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 50px !important;
  padding: var(--space-2) var(--space-5) !important;
  color: rgba(255,255,255,0.85) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-medium) !important;
  height: auto !important; min-height: unset !important;
  transition: all var(--dur-base) ease !important;
}
.call-to-action .features .feature-item:hover { background: rgba(91,142,62,0.2) !important; border-color: var(--border-strong) !important; transform: translateY(-2px) !important; }
.call-to-action .features .feature-item i { color: var(--color-primary) !important; }

/* ── CTA Buttons ── */
.cta-btn-primary {
  display: inline-flex; align-items: center; gap: var(--space-3);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--text-inverse) !important;
  font-weight: var(--weight-bold); font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  padding: var(--space-4) var(--space-10);
  border-radius: 50px; border: none; text-decoration: none;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-glow-green);
  transition: all var(--dur-slow) var(--ease-out);
}
.cta-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(91,142,62,0.45) !important; color: var(--text-inverse) !important; }
.cta-btn-primary .btn-arrow { width:28px; height:28px; background:rgba(255,255,255,0.2); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.85rem; transition:transform var(--dur-base) ease; }
.cta-btn-primary:hover .btn-arrow { transform: translateX(4px); }

.cta-btn-secondary {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: transparent; color: rgba(255,255,255,0.8) !important;
  font-weight: var(--weight-semibold); font-size: var(--text-sm);
  padding: var(--space-4) var(--space-8);
  border-radius: 50px; border: 1.5px solid rgba(255,255,255,0.2);
  text-decoration: none;
  transition: all var(--dur-base) ease;
}
.cta-btn-secondary:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.45); color: var(--text-inverse) !important; transform: translateY(-2px); }

.service-btn {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
  color: var(--text-inverse) !important; border-radius: 50px !important;
  font-weight: var(--weight-bold) !important; padding: var(--space-4) var(--space-8) !important;
  box-shadow: var(--shadow-glow-green) !important;
  transition: all var(--dur-slow) var(--ease-out) !important;
}
.service-btn:hover { transform: translateY(-3px) !important; box-shadow: 0 12px 36px rgba(91,142,62,0.42) !important; color: var(--text-inverse) !important; }

.btn-submit {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
  border: none !important; border-radius: 50px !important;
  font-weight: var(--weight-bold) !important; font-size: var(--text-sm) !important;
  letter-spacing: var(--tracking-wide) !important;
  padding: var(--space-4) var(--space-12) !important;
  color: var(--text-inverse) !important;
  box-shadow: var(--shadow-glow-green) !important;
  transition: all var(--dur-slow) var(--ease-out) !important;
}
.btn-submit:hover { transform: translateY(-3px) !important; box-shadow: 0 16px 44px rgba(91,142,62,0.42) !important; }

/* ── Contact ── */
.contact .contact-info-box {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--card-radius-sm) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--dur-slow) var(--ease-out) !important;
  min-height: 120px !important;
}
.contact .contact-info-box:hover { border-color: var(--border-default) !important; transform: translateY(-5px) !important; box-shadow: var(--shadow-lg) !important; }
.contact .contact-form-wrapper { background: var(--bg-surface) !important; border: 1px solid var(--border-subtle) !important; border-radius: var(--card-radius) !important; box-shadow: var(--shadow-md) !important; }
.input-with-icon .form-control {
  font-size: var(--text-sm) !important; background: var(--bg-page) !important;
  border: 1.5px solid var(--border-subtle) !important; border-radius: var(--card-radius-sm) !important;
  transition: all var(--dur-base) ease !important;
}
.input-with-icon .form-control:focus { background: var(--bg-surface) !important; border-color: var(--color-primary) !important; box-shadow: 0 0 0 4px rgba(91,142,62,0.1) !important; }

/* ── FAQ ── */
.faq-item { background: var(--bg-surface); border: 1px solid var(--border-subtle) !important; border-radius: var(--card-radius-sm) !important; transition: all var(--dur-base) ease !important; }
.faq-item:hover { border-color: var(--border-default) !important; box-shadow: var(--shadow-sm) !important; }
.faq-item.faq-active { border-color: var(--border-strong) !important; box-shadow: var(--shadow-md) !important; }
.faq-item h3 { font-weight: var(--weight-semibold) !important; font-size: var(--text-base) !important; }
.faq-item .faq-content p { font-size: var(--text-sm) !important; line-height: var(--leading-relaxed) !important; color: var(--text-300) !important; }

/* ── Page Title (inner pages) ── */
.page-title {
  background: linear-gradient(135deg, var(--c-green-900) 0%, #1a3312 40%, #0f2a0a 100%) !important;
  padding: 140px 0 70px !important; position: relative; overflow: hidden;
}
.page-title h1 { font-size: var(--text-5xl) !important; font-weight: var(--weight-black) !important; letter-spacing: var(--tracking-tight) !important; color: var(--text-inverse) !important; }
.page-title p  { font-size: var(--text-base) !important; color: rgba(255,255,255,0.7) !important; }

/* ── Portfolio ── */
.portfolio-filters li { font-weight: var(--weight-semibold) !important; font-size: var(--text-xs) !important; letter-spacing: var(--tracking-wide) !important; border-radius: 50px !important; padding: var(--space-2) var(--space-6) !important; border: 1.5px solid var(--border-default) !important; transition: all var(--dur-base) var(--ease-out) !important; }
.portfolio-filters li.filter-active, .portfolio-filters li:hover { background: var(--color-primary) !important; border-color: var(--color-primary) !important; color: var(--text-inverse) !important; box-shadow: var(--shadow-glow-green) !important; }
.portfolio-entry { border-radius: var(--card-radius-sm); overflow: hidden; transition: all var(--dur-slow) var(--ease-out); }
.portfolio-entry:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl) !important; }

/* ── Steps ── */
.step-item .step-number { font-size: var(--text-xs) !important; font-weight: var(--weight-bold) !important; letter-spacing: var(--tracking-wider) !important; color: var(--color-primary) !important; }
.step-item h3 { font-weight: var(--weight-bold) !important; letter-spacing: var(--tracking-snug) !important; }

/* ── Testimonials ── */
.testimonial-item p { font-size: var(--text-base) !important; line-height: var(--leading-relaxed) !important; font-style: italic !important; }
.testimonial-item h6 { font-weight: var(--weight-bold) !important; }
.about .testimonial-section .testimonial-item { background: var(--bg-surface) !important; border: 1px solid var(--border-subtle) !important; border-radius: var(--card-radius-sm) !important; box-shadow: var(--shadow-sm) !important; }
.testimonials .swiper-slide-active .testimonial-item { border-color: var(--border-default) !important; box-shadow: var(--shadow-lg) !important; }

/* ── Inner page service details ── */
.service-details h2, .service-details h3, .service-details h4 { font-weight: var(--weight-extrabold) !important; letter-spacing: var(--tracking-snug) !important; line-height: var(--leading-snug) !important; }
.service-details p, .service-details li { font-size: var(--text-base) !important; line-height: var(--leading-relaxed) !important; color: var(--text-500) !important; }
.service-details .service-tabs .tab-content .benefit-card { background: var(--bg-surface) !important; border: 1px solid var(--border-subtle) !important; border-radius: var(--card-radius-sm) !important; box-shadow: var(--shadow-sm) !important; min-height: 200px !important; transition: all var(--dur-slow) var(--ease-out) !important; }
.service-details .service-tabs .tab-content .benefit-card:hover { border-color: var(--border-default) !important; transform: translateY(-6px) !important; box-shadow: var(--shadow-xl) !important; }
.service-details .service-sidebar .action-card { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important; border-radius: var(--card-radius) !important; box-shadow: var(--shadow-glow-green) !important; }

/* ── Scroll top ── */
.scroll-top { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important; box-shadow: var(--shadow-glow-green) !important; }
.scroll-top:hover { transform: translateY(-4px) scale(1.1) !important; box-shadow: 0 12px 32px rgba(91,142,62,0.45) !important; }

/* ── Floating CTA ── */
.floating-cta a { box-shadow: var(--shadow-md) !important; transition: all var(--dur-slow) var(--ease-spring) !important; }
.floating-cta a:hover { transform: scale(1.12) translateY(-3px) !important; box-shadow: var(--shadow-lg) !important; }
.floating-cta .whatsapp-btn { background: #25D366 !important; }
.floating-cta .phone-btn { background: var(--color-primary) !important; }


/* ================================================================
   6. ANIMATIONS — GPU-optimized, transform/opacity only
================================================================ */

/* ── Scroll reveal ── */
[data-wf-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  var(--dur-slower) var(--ease-out),
    transform var(--dur-slower) var(--ease-out);
  will-change: transform, opacity;
}
[data-wf-reveal="left"]  { transform: translateX(-28px); }
[data-wf-reveal="right"] { transform: translateX(28px);  }
[data-wf-reveal="scale"] { transform: scale(0.9);        }
[data-wf-reveal].wf-visible { opacity: 1 !important; transform: none !important; }
[data-wf-delay="1"] { transition-delay: 0.08s; }
[data-wf-delay="2"] { transition-delay: 0.16s; }
[data-wf-delay="3"] { transition-delay: 0.24s; }
[data-wf-delay="4"] { transition-delay: 0.32s; }
[data-wf-delay="5"] { transition-delay: 0.40s; }

/* ── Hero blobs (transform only — GPU) ── */
.hero-blob-wrap { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.hero-blob { position:absolute; border-radius:50%; filter:blur(72px); opacity:0.16; will-change:transform; animation: sov-blob linear infinite; }
.hero-blob-1 { width:480px; height:480px; background:radial-gradient(circle, var(--c-green-400), transparent 70%); top:-100px; left:-80px; animation-duration:20s; }
.hero-blob-2 { width:360px; height:360px; background:radial-gradient(circle, var(--c-gold-500), transparent 70%); top:30%; right:-60px; animation-duration:24s; animation-delay:-7s; }
.hero-blob-3 { width:260px; height:260px; background:radial-gradient(circle, var(--c-red-500), transparent 70%); bottom:-40px; left:42%; animation-duration:28s; animation-delay:-14s; }
@keyframes sov-blob {
  0%   { transform: translate(0,0)      scale(1);    }
  25%  { transform: translate(24px,-16px) scale(1.04); }
  50%  { transform: translate(-16px,24px) scale(0.96); }
  75%  { transform: translate(16px,16px)  scale(1.02); }
  100% { transform: translate(0,0)      scale(1);    }
}

/* ── CTA rings ── */
.cta-ring { position:absolute; border-radius:50%; border:1px solid rgba(91,142,62,0.14); pointer-events:none; will-change:transform,opacity; animation: sov-ring 4s ease-in-out infinite; }
.cta-ring-1 { width:300px; height:300px; top:-80px;  right:-80px;  animation-delay:0s; }
.cta-ring-2 { width:500px; height:500px; top:-180px; right:-180px; animation-delay:1s; }
.cta-ring-3 { width:700px; height:700px; top:-280px; right:-280px; animation-delay:2s; }
@keyframes sov-ring { 0%,100%{opacity:.35;transform:scale(1)} 50%{opacity:.7;transform:scale(1.04)} }

/* ── Section dot grid ── */
.section-dots { position:absolute; inset:0; background-image:radial-gradient(circle, rgba(91,142,62,0.1) 1px, transparent 1px); background-size:28px 28px; pointer-events:none; z-index:0; opacity:.45; }

/* ── About floating dots ── */
.about-dot { position:absolute; border-radius:50%; background:var(--color-primary); opacity:.07; pointer-events:none; will-change:transform; animation: sov-dot-float ease-in-out infinite alternate; }
@keyframes sov-dot-float { from{transform:translateY(0)} to{transform:translateY(-14px)} }

/* ── Marquee ── */
.wf-marquee-wrap { overflow:hidden; padding:18px 0; background:var(--bg-muted); border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
.wf-marquee { display:flex; gap:56px; width:max-content; animation: sov-marquee 28s linear infinite; will-change:transform; }
.wf-marquee-wrap:hover .wf-marquee { animation-play-state:paused; }
.wf-marquee span { font-weight:var(--weight-bold); font-size:var(--text-xs); letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--text-300); white-space:nowrap; display:flex; align-items:center; gap:10px; }
.wf-marquee span::before { content:''; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--color-primary); }
@keyframes sov-marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── Custom cursor ── */
.wf-cursor { position:fixed; width:10px; height:10px; background:var(--color-primary); border-radius:50%; pointer-events:none; z-index:var(--z-cursor); transform:translate(-50%,-50%); transition:width var(--dur-fast) ease, height var(--dur-fast) ease, background var(--dur-fast) ease; mix-blend-mode:multiply; will-change:left,top; }
.wf-cursor-ring { position:fixed; width:38px; height:38px; border:1.5px solid var(--color-primary); border-radius:50%; pointer-events:none; z-index:calc(var(--z-cursor) - 1); transform:translate(-50%,-50%); transition:width var(--dur-slow) var(--ease-out), height var(--dur-slow) var(--ease-out), border-color var(--dur-fast) ease; will-change:left,top; }
.wf-cursor.wf-hover { width:6px; height:6px; background:var(--color-secondary); }
.wf-cursor-ring.wf-hover { width:54px; height:54px; border-color:var(--color-secondary); }

/* ── Progress bar ── */
#wf-progress { position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg, var(--color-primary), var(--color-accent), var(--color-secondary)); z-index:var(--z-cursor); transition:width 0.1s linear; pointer-events:none; will-change:width; }

/* ── Badge pulse ── */
.wf-badge { display:inline-flex; align-items:center; gap:var(--space-2); background:linear-gradient(135deg, var(--c-green-50), #fff8e8); border:1px solid var(--border-default); border-radius:50px; padding:var(--space-1) var(--space-4); font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--color-primary); }
.wf-badge::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--color-primary); animation: sov-badge-pulse 2s ease-in-out infinite; }
@keyframes sov-badge-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(91,142,62,.4)} 50%{box-shadow:0 0 0 5px rgba(91,142,62,0)} }

/* ── Split text ── */
.wf-split-line { overflow:hidden; display:block; }
.wf-split-line span { display:block; transform:translateY(100%); transition:transform var(--dur-slower) var(--ease-out); will-change:transform; }
.wf-split-line.wf-visible span { transform:translateY(0); }

/* ── Ripple ── */
@keyframes sov-ripple { to { transform:scale(1); opacity:0; } }

/* ── Tilt card ── */
.wf-tilt { transform-style:preserve-3d; will-change:transform; }

/* ── Footer ── */
.footer { background:linear-gradient(180deg, var(--c-green-900) 0%, #0d1f0d 100%) !important; color:rgba(255,255,255,.75) !important; position:relative; overflow:hidden; }
.footer::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(91,142,62,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(91,142,62,.05) 1px, transparent 1px); background-size:48px 48px; pointer-events:none; z-index:0; }
.footer .footer-top, .footer .container, .footer .row, .footer [class*="col-"] { position:relative; z-index:1; }
.footer .footer-top { border-top:1px solid rgba(91,142,62,.2) !important; padding-top:var(--space-16) !important; }
.footer h4 { color:#fff !important; font-size:var(--text-xs) !important; font-weight:var(--weight-bold) !important; letter-spacing:var(--tracking-widest) !important; text-transform:uppercase !important; padding-bottom:var(--space-4) !important; position:relative; }
.footer h4::after { content:''; position:absolute; bottom:0; left:0; width:24px; height:2px; background:var(--color-primary); border-radius:2px; transition:width var(--dur-slow) ease; }
.footer .col-lg-2:hover h4::after, .footer .col-lg-3:hover h4::after { width:48px; }
.footer .footer-about p { color:rgba(255,255,255,.55) !important; font-size:var(--text-sm) !important; line-height:var(--leading-relaxed) !important; }
.footer .footer-contact p,
.footer .footer-contact span,
.footer .footer-contact strong { color:rgba(255,255,255,.65) !important; font-size:var(--text-sm) !important; line-height:var(--leading-relaxed) !important; }
.footer .footer-contact strong { color:rgba(255,255,255,.9) !important; font-weight:var(--weight-semibold) !important; }
.footer .footer-contact a { color:var(--color-primary) !important; }
.footer .footer-contact a:hover { color:rgba(255,255,255,.9) !important; }
.footer .footer-links ul a { color:rgba(255,255,255,.55) !important; font-size:var(--text-sm) !important; transition:all var(--dur-base) ease !important; }
.footer .footer-links ul a:hover { color:var(--color-primary) !important; padding-left:var(--space-4) !important; }
.footer .footer-links ul li { padding:var(--space-2) 0 !important; border-bottom:1px solid rgba(255,255,255,.04); }
.footer .social-links a { border-color:rgba(255,255,255,.15) !important; color:rgba(255,255,255,.5) !important; background:rgba(255,255,255,.04) !important; transition:all var(--dur-slow) var(--ease-spring) !important; }
.footer .social-links a:hover { background:var(--color-primary) !important; border-color:var(--color-primary) !important; color:#fff !important; transform:translateY(-4px) scale(1.1) !important; box-shadow:var(--shadow-glow-green) !important; }
.footer .copyright { background:rgba(0,0,0,.25) !important; border-top:1px solid rgba(91,142,62,.12) !important; position:relative; z-index:1; }
.footer .copyright p, .footer .credits { color:rgba(255,255,255,.35) !important; font-size:var(--text-xs) !important; }
.footer .footer-about .logo img { filter:brightness(0) invert(1); opacity:.9; }

/* ── Footer particles ── */
.footer-particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.footer-particles span { position:absolute; display:block; border-radius:50%; background:rgba(91,142,62,.25); animation: sov-fp linear infinite; }
@keyframes sov-fp { 0%{transform:translateY(100%) scale(0);opacity:0} 10%{opacity:.5} 90%{opacity:.2} 100%{transform:translateY(-180px) scale(1);opacity:0} }


/* ================================================================
   7. MOBILE-FIRST RESPONSIVE DESIGN
================================================================ */

/* ── xs: 0–575px (mobile default) ── */
@media (max-width: 575px) {
  :root {
    --section-y:    var(--space-12);
    --card-pad:     var(--space-6);
    --text-hero:    clamp(2.2rem, 10vw, 3rem);
  }
  section, .section { padding-top: var(--section-y) !important; padding-bottom: var(--section-y) !important; }
  .section-title { padding-bottom: var(--space-10) !important; }
  .section-title div { font-size: var(--text-3xl) !important; }
  h1 { font-size: clamp(2rem, 9vw, 2.8rem) !important; }
  h2 { font-size: var(--text-3xl) !important; }
  h3 { font-size: var(--text-2xl) !important; }

  /* Cards: auto height on mobile */
  .service-card,
  .about .about-content .feature-item,
  .contact .contact-info-box,
  .service-details .service-tabs .tab-content .benefit-card {
    height: auto !important;
    min-height: unset !important;
  }
  /* Columns: block on mobile */
  .services .row [class*="col-"],
  .about .row .col-md-6,
  .contact .row .col-lg-4,
  .service-details .row [class*="col-"],
  .pricing .row [class*="col-"] {
    display: block !important;
  }
  .call-to-action .advertise-1 { padding: var(--space-10) var(--space-6) !important; border-radius: var(--card-radius-sm) !important; }
  .contact .contact-form-wrapper { padding: var(--space-8) var(--space-5) !important; }
  .page-title { padding: 110px 0 50px !important; }
  .page-title h1 { font-size: var(--text-4xl) !important; }
  .hero .main-heading h1 { font-size: clamp(2.2rem, 10vw, 3rem) !important; }
  .wf-cursor, .wf-cursor-ring { display: none !important; }
  .hero-blob-1 { width: 280px; height: 280px; }
  .hero-blob-2 { width: 200px; height: 200px; }
  .hero-blob-3 { display: none; }
}

/* ── sm: 576–767px ── */
@media (min-width: 576px) and (max-width: 767px) {
  :root { --section-y: var(--space-16); }
  .hero .main-heading h1 { font-size: clamp(2.5rem, 8vw, 3.5rem) !important; }
  .call-to-action .advertise-1 { padding: var(--space-12) var(--space-8) !important; }
}

/* ── md: 768–991px ── */
@media (min-width: 768px) and (max-width: 991px) {
  :root { --section-y: var(--space-20); }
  .hero .main-heading h1 { font-size: clamp(3rem, 6vw, 4rem) !important; }
}

/* ── lg: 992–1199px ── */
@media (min-width: 992px) and (max-width: 1199px) {
  :root { --section-y: var(--space-24); }
}

/* ── xl: 1200px+ ── */
@media (min-width: 1200px) {
  :root { --section-y: var(--space-24); }
}

/* ── Touch: disable hover effects ── */
@media (hover: none) {
  .service-card:hover,
  .about .about-content .feature-item:hover,
  .contact .contact-info-box:hover,
  .service-details .service-tabs .tab-content .benefit-card:hover {
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
  }
  .wf-tilt { transform: none !important; }
}

/* ── Prefers reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  body { animation: none !important; opacity: 1 !important; }
  [data-wf-reveal] { opacity: 1 !important; transform: none !important; }
  .hero-blob, .cta-ring, .about-dot, .footer-particles span,
  .wf-marquee, .wf-badge::before { animation: none !important; }
  .wf-cursor, .wf-cursor-ring { display: none !important; }
}

/* ── High contrast mode ── */
@media (forced-colors: active) {
  .service-card, .feature-item, .contact-info-box { border: 2px solid ButtonText !important; }
  .cta-btn-primary, .btn-submit, .service-btn { forced-color-adjust: none; }
}


/* From enhancements.css — Floating CTA */
/* ============================================================
   FLOATING WHATSAPP / CTA BUTTON
   ============================================================ */
.floating-cta {
  position: fixed;
  bottom: 80px;
  right: 15px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.floating-cta a {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-decoration: none;
}
.floating-cta a:hover {
  transform: scale(1.15) translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}
.floating-cta .whatsapp-btn {
  background: #25D366;
}
.floating-cta .phone-btn {
  background: var(--accent-color);
}

/* Pulse ring on whatsapp */
.floating-cta .whatsapp-btn {
  position: relative;
}
.floating-cta .whatsapp-btn::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: pulseRing 2s ease-out infinite;
}
@keyframes pulseRing {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}



/* From enhancements.css — Preloader */
/* ============================================================
   PRELOADER ENHANCEMENT
   ============================================================ */
#preloader {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}
#preloader::before {
  border-width: 3px !important;
}
.preloader-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.preloader-logo img {
  height: 60px;
  animation: preloaderPulse 1.5s ease-in-out infinite;
}
.preloader-bar {
  width: 200px;
  height: 3px;
  background: color-mix(in srgb, var(--accent-color), transparent 80%);
  border-radius: 3px;
  overflow: hidden;
}
.preloader-bar::after {
  content: '';
  display: block;
  height: 100%;
  background: var(--accent-color);
  border-radius: 3px;
  animation: preloaderProgress 1.5s ease-in-out infinite;
}
@keyframes preloaderPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(0.95); }
}
@keyframes preloaderProgress {
  0%   { width: 0%; margin-left: 0; }
  50%  { width: 80%; margin-left: 0; }
  100% { width: 0%; margin-left: 100%; }
}