@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
/* Override Hostinger AOS opacity */
.hostinger-elementor-aos{opacity:1!important;transform:none!important;transition:none!important}
.hostinger-elementor-aos.aos-animate{opacity:1!important}

body,.elementor-widget-container,.elementor-element,h1,h2,h3,h4,h5,h6,p,span,a,button,input,textarea{font-family:'Inter',system-ui,-apple-system,sans-serif!important}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes cta-pulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0.4)}50%{box-shadow:0 0 0 15px rgba(16,185,129,0)}}
@keyframes gradient-shift{0%,100%{background-position:0% center}50%{background-position:100% center}}
@keyframes ping{75%,100%{opacity:0;transform:scale(2)}}
@keyframes blob-pulse{0%,100%{opacity:0.7}50%{opacity:0.5}}
@keyframes fade-in-up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes bounce-gentle{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes slide-in-left{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@keyframes slide-in-right{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
.btn-primary-cta,.btn-primary-cta .elementor-button,a.btn-primary-cta{background:linear-gradient(135deg,#10b981 0%,#059669 100%)!important;border-radius:14px!important;font-weight:600!important;font-size:14px!important;padding:14px 32px!important;position:relative!important;overflow:hidden!important;transition:all .3s ease!important;animation:cta-pulse 2s ease-in-out infinite!important;color:#fff!important;border:none!important;text-decoration:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;cursor:pointer!important;line-height:1.4!important}
.btn-primary-cta:hover,a.btn-primary-cta:hover{transform:translateY(-2px)!important;box-shadow:0 10px 30px rgba(16,185,129,0.4)!important}
.btn-primary-cta::before{content:''!important;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent)!important;width:100%!important;height:100%!important;position:absolute!important;top:0!important;left:-100%!important;transition:left .5s!important}
.btn-primary-cta:hover::before{left:100%!important}
.btn-secondary-cta,.btn-secondary-cta .elementor-button,a.btn-secondary-cta{background:#fff!important;color:#047857!important;border:2px solid #a7f3d0!important;border-radius:14px!important;font-weight:600!important;font-size:14px!important;padding:14px 24px!important;position:relative!important;overflow:hidden!important;transition:all .3s ease!important;text-decoration:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;cursor:pointer!important;line-height:1.4!important}
.btn-secondary-cta:hover,a.btn-secondary-cta:hover{border-color:#10b981!important;transform:translateY(-2px)!important;box-shadow:0 8px 25px rgba(16,185,129,0.25)!important}
.feature-card{transition:all .3s cubic-bezier(.4,0,.2,1)!important;border:1px solid #f3f4f6!important;border-radius:16px!important}
.feature-card:hover{border-color:#a7f3d0!important;box-shadow:0 20px 40px -12px rgba(0,0,0,.1)!important;transform:translateY(-4px)!important}
.pricing-card{transition:all .3s cubic-bezier(.4,0,.2,1)!important;border-radius:16px!important;border:1px solid #e5e7eb!important}
.pricing-card:hover{box-shadow:0 20px 40px -12px rgba(0,0,0,.15)!important;transform:translateY(-4px)!important}
.pricing-card-popular{position:relative!important;border:2px solid #10b981!important;box-shadow:0 20px 40px -12px rgba(16,185,129,.2)!important}
.pricing-card-popular::before{content:''!important;position:absolute!important;inset:-3px!important;background:linear-gradient(135deg,#10b981,#059669,#10b981)!important;border-radius:18px!important;z-index:-1!important;animation:gradient-shift 3s ease infinite!important;background-size:200% 200%!important}
.stat-card{background:rgba(255,255,255,.8)!important;backdrop-filter:blur(8px)!important;border-radius:14px!important;border:1px solid #d1fae5!important;transition:all .15s cubic-bezier(.4,0,.2,1)!important}
.stat-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.06)!important;transform:translateY(-2px)!important}
.testimonial-card{transition:all .3s cubic-bezier(.4,0,.2,1)!important;border:1px solid #f3f4f6!important;border-radius:16px!important}
.testimonial-card:hover{border-color:#a7f3d0!important;box-shadow:0 20px 40px -12px rgba(0,0,0,.1)!important;transform:translateY(-4px)!important}
.dashboard-mockup{animation:float 6s ease-in-out infinite!important}
.why-feature-card{background:linear-gradient(to right,#ecfdf5,transparent)!important;border:1px solid #d1fae5!important;border-radius:12px!important;transition:all .3s cubic-bezier(.4,0,.2,1)!important}
.why-feature-card:hover{box-shadow:0 10px 25px -5px rgba(0,0,0,.08)!important;transform:translateY(-2px)!important}
.stats-grid-item{background:#fff!important;border:1px solid #f3f4f6!important;border-radius:12px!important;transition:all .3s cubic-bezier(.4,0,.2,1)!important}
.stats-grid-item:hover{border-color:#a7f3d0!important;box-shadow:0 10px 25px -5px rgba(0,0,0,.08)!important}
.step-card{transition:all .3s cubic-bezier(.4,0,.2,1)!important;border:1px solid #f3f4f6!important;border-radius:16px!important}
.step-card:hover{border-color:#a7f3d0!important;box-shadow:0 20px 40px -12px rgba(0,0,0,.1)!important;transform:translateY(-4px)!important}
.impact-card{background:linear-gradient(135deg,#10b981 0%,#0d9488 100%)!important;border-radius:16px!important;transition:all .3s ease!important}
.impact-card:hover{transform:translateY(-4px)!important;box-shadow:0 20px 40px -12px rgba(16,185,129,.3)!important}
.section-badge{display:inline-block!important;padding:6px 20px!important;background:#ecfdf5!important;color:#047857!important;border-radius:50px!important;font-size:14px!important;font-weight:600!important;border:1px solid #a7f3d0!important;font-family:'Inter',sans-serif!important}
.easytrack-section{opacity:1!important}
.easytrack-section:nth-child(2){animation-delay:0s}
.easytrack-section:nth-child(3){animation-delay:.1s}
.easytrack-section:nth-child(4){animation-delay:.15s}
.easytrack-section:nth-child(5){animation-delay:.2s}
.easytrack-section:nth-child(6){animation-delay:.25s}
.easytrack-section:nth-child(7){animation-delay:.3s}
.easytrack-section:nth-child(8){animation-delay:.35s}
.easytrack-nav{transition:all .3s ease!important}
.easytrack-nav.scrolled{background:rgba(255,255,255,.95)!important;backdrop-filter:blur(12px)!important;box-shadow:0 1px 3px rgba(0,0,0,.1)!important;border-bottom:1px solid #f3f4f6!important}
html{scroll-behavior:smooth!important}
::selection{background:#10B981!important;color:#fff!important}
::-webkit-scrollbar{width:8px!important}
::-webkit-scrollbar-track{background:#f1f5f9!important}
::-webkit-scrollbar-thumb{background:#94a3b8!important;border-radius:4px!important}
::-webkit-scrollbar-thumb:hover{background:#059669!important}
.contact-form input,.contact-form textarea{background:#fff!important;border:1px solid #e5e7eb!important;border-radius:12px!important;color:#111827!important;padding:14px 18px!important;font-family:'Inter',sans-serif!important;transition:all .3s ease!important;width:100%!important;box-sizing:border-box!important}
.contact-form input:focus,.contact-form textarea:focus{border-color:#10b981!important;box-shadow:0 0 0 3px rgba(16,185,129,.2)!important;outline:none!important}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#9ca3af!important}
.easytrack-footer,.easytrack-footer .e-con-inner{background:#111827!important}
.easytrack-footer a:hover{color:#34d399!important}
.e-con.easytrack-nav{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;z-index:9999!important}
.e-con.easytrack-nav>.e-con-inner{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;max-width:1200px!important;margin:0 auto!important;padding:0 32px!important}
#hero{min-height:auto!important;padding-top:72px!important;padding-bottom:0!important;overflow:hidden!important;margin-bottom:-60px!important}\n.e-con+.e-con{margin-top:0!important}
@media(max-width:767px){.hide-on-mobile{display:none!important}}
@media(max-width:1024px){.hide-on-tablet,.hide-on-mobile{display:none!important}}
/* Hero 2-col layout fix */
#hero>.e-con-inner>.e-con{flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;gap:32px!important}
#hero>.e-con-inner>.e-con>.e-con{flex:1!important;min-width:0!important}
/* Nav fix - no text wrap */
.e-con[data-element_type=container]:first-child .elementor-button{white-space:nowrap!important;font-size:14px!important}
/* Reduce hero-features gap */
#hero{margin-bottom:-40px!important}

/* Star rating gold fill */
.elementor-star-rating i{color:#fbbf24!important}
.elementor-star-rating i:before{color:#fbbf24!important}
/* Social icons visibility */
#contact .elementor-icon{background:#f3f4f6!important;border-radius:8px!important;padding:8px!important}
/* How It Works - center CTA */
#how-it-works>.e-con-inner>.e-con:last-child{justify-content:center!important;display:flex!important}
/* Step card icons bigger */
.step-card .elementor-icon-box-icon{margin-bottom:16px!important}
/* Footer improvements */
.e-con:last-child a{transition:color .2s ease}
.e-con:last-child a:hover{color:#34d399!important}
/* Testimonial card equal height */
.testimonial-card{display:flex!important;flex-direction:column!important}
.testimonial-card .elementor-widget-text-editor{flex:1!important}
/* Contact info icon circles */
#contact .e-con .e-con .elementor-widget-html .elementor-widget-container>div{min-width:40px!important;min-height:40px!important}

/* Force 2-column layouts */
#contact>.e-con-inner>.e-con:last-child{flex-direction:row!important;flex-wrap:wrap!important;gap:32px!important}
#contact>.e-con-inner>.e-con:last-child>.e-con{flex:1!important;min-width:380px!important}
/* Impact cards side by side */
#why-choose .e-con[data-element_type=container] .e-con[data-element_type=container]{}
/* Target impact row by finding gradient containers */
.e-con>.e-con-inner>.e-con>.e-con-inner>.e-con[style*="gradient"]{}
/* Simpler: target by background */

/* Impact cards side by side */
.impact-cards-row>.e-con-inner{flex-direction:row!important;gap:32px!important;flex-wrap:wrap!important}
.impact-cards-row>.e-con-inner>.e-con{flex:1!important;min-width:280px!important}
/* Contact 2-column */
.contact-2col>.e-con-inner{flex-direction:row!important;gap:32px!important;flex-wrap:wrap!important;align-items:stretch!important}
.contact-2col>.e-con-inner>.e-con{flex:1!important;min-width:380px!important}

/* Force impact cards row - target any container in why-choose with 2 gradient child containers */
#why-choose .e-con .e-con-inner{}
/* Broader approach: any e-con within why-choose whose direct child is gradient */
#why-choose .impact-cards-row{}
#why-choose .impact-cards-row .e-con-inner{display:flex!important;flex-direction:row!important;gap:32px!important}
/* If class didnt apply, use nth-child targeting */
#why-choose>.e-con-inner>.e-con:nth-last-child(2)>.e-con-inner{flex-direction:row!important;gap:24px!important;flex-wrap:wrap!important}
#why-choose>.e-con-inner>.e-con:nth-last-child(2)>.e-con-inner>.e-con{flex:1!important;min-width:280px!important}

div.e-con.impact-cards-row>div.e-con-inner{display:flex!important;flex-direction:row!important;gap:32px!important;flex-wrap:wrap!important}
div.e-con.impact-cards-row>div.e-con-inner>div.e-con{flex:1 1 280px!important;min-width:280px!important;max-width:50%!important}

/* Impact cards - e-con-full has direct children */
div.e-con-full.impact-cards-row{display:flex!important;flex-direction:row!important;gap:32px!important;flex-wrap:wrap!important}
div.e-con-full.impact-cards-row>.e-con{flex:1 1 280px!important;min-width:280px!important}

/* New impact row */
div.e-con-full.impact-row-final{display:flex!important;flex-direction:row!important;gap:32px!important;flex-wrap:wrap!important;justify-content:center!important}
div.e-con-full.impact-row-final>.e-con{flex:1 1 300px!important;max-width:48%!important}
#business-impact{background:#f9fafb!important}

/* ===== BUSINESS IMPACT FORCE FIX ===== */
#business-impact .e-con-inner{align-items:center!important}
#business-impact .e-con .e-con{text-align:center!important}
#business-impact .e-con .e-con .e-con-inner{align-items:center!important;text-align:center!important}
#business-impact .elementor-heading-title{text-align:center!important;width:100%!important}
#business-impact .elementor-text-editor{text-align:center!important;width:100%!important}
#business-impact .elementor-widget-html{width:100%!important;text-align:center!important}
/* Impact gradient cards - force center and contain */
#business-impact .e-con[data-settings*=gradient]{overflow:hidden!important;text-align:center!important}
#business-impact .e-con[data-settings*=gradient] .e-con-inner{align-items:center!important;justify-content:center!important;text-align:center!important;overflow:hidden!important}
#business-impact .e-con[data-settings*=gradient] .elementor-widget{width:100%!important;text-align:center!important}
/* Fix the row container max-width */
.impact-row-final{max-width:896px!important;margin:0 auto!important}
div.e-con-full.impact-row-final{display:flex!important;flex-direction:row!important;gap:32px!important;flex-wrap:wrap!important;justify-content:center!important}
div.e-con-full.impact-row-final>.e-con{flex:1 1 280px!important;max-width:48%!important;overflow:hidden!important}
/* Icon SVG - no gray circle */
#business-impact .elementor-widget-html svg{opacity:0.8!important;display:block!important;margin:0 auto!important}


/* =================================================================
   MOBILE RESPONSIVE OVERHAUL  (appended 2026-06-19)
   Goal: kill horizontal overflow, stack forced row layouts,
   scale typography, trim padding. Desktop (>1024px) untouched.
   ================================================================= */

/* --- Global safety net: never allow horizontal scrolling --- */
html,body{max-width:100%!important;overflow-x:hidden!important}
img,svg,video{max-width:100%}
*{min-width:0}

/* ===================== TABLET & DOWN (<=1024px) ===================== */
@media (max-width:1024px){
  /* HERO: stack the two columns vertically */
  #hero>.e-con-inner>.e-con{flex-direction:column!important;flex-wrap:wrap!important;gap:32px!important;align-items:stretch!important}
  #hero>.e-con-inner>.e-con>.e-con{flex:1 1 100%!important;width:100%!important;min-width:0!important;max-width:600px!important;margin-left:auto!important;margin-right:auto!important}

  /* PRICING: let the 3 fixed-width cards wrap */
  .et-pricing-grid{flex-wrap:wrap!important}
  .et-pricing-card{width:100%!important;max-width:420px!important;min-height:auto!important}
  .et-card-header,.et-card-features,.et-card-price{min-height:auto!important}

  /* CONTACT: stack form + map/info, kill the forced 380px min-width */
  #contact>.e-con-inner>.e-con:last-child{flex-direction:column!important}
  #contact>.e-con-inner>.e-con:last-child>.e-con{flex:1 1 100%!important;width:100%!important;min-width:0!important}
  .contact-2col>.e-con-inner{flex-direction:column!important}
  .contact-2col>.e-con-inner>.e-con{flex:1 1 100%!important;width:100%!important;min-width:0!important}

  /* Neutralize every forced min-width that can overflow */
  .impact-cards-row>.e-con-inner>.e-con,
  .impact-row-final>.e-con,
  div.e-con-full.impact-row-final>.e-con,
  div.e-con-full.impact-cards-row>.e-con,
  #why-choose>.e-con-inner>.e-con:nth-last-child(2)>.e-con-inner>.e-con{min-width:0!important}
}

/* ===================== PHONES (<=767px) ===================== */
@media (max-width:767px){
  /* Trim oversized side padding on content containers */
  #hero>.e-con-inner,#features>.e-con-inner,#products>.e-con-inner,
  #how-it-works>.e-con-inner,#why-choose>.e-con-inner,#testimonials>.e-con-inner,
  #contact>.e-con-inner,#business-impact>.e-con-inner{padding-left:16px!important;padding-right:16px!important}

  /* HERO typography (48 -> 32, 28 -> 20) */
  .elementor-element-et_30 .elementor-heading-title{font-size:32px!important;line-height:1.18!important}
  .elementor-element-et_31 .elementor-heading-title{font-size:20px!important;line-height:1.3!important}

  /* SECTION headings (36 -> 26) */
  .elementor-element-et_57 .elementor-heading-title,
  .elementor-element-et_110 .elementor-heading-title,
  .elementor-element-et_144 .elementor-heading-title,
  .elementor-element-et_194 .elementor-heading-title,
  .elementor-element-et_238 .elementor-heading-title{font-size:26px!important;line-height:1.25!important}

  /* HERO buttons: stack full-width */
  .elementor-element-et_35{flex-direction:column!important;align-items:stretch!important;width:100%!important;gap:12px!important}
  .elementor-element-et_35 .elementor-widget{width:100%!important}
  .btn-primary-cta,.btn-secondary-cta,a.btn-primary-cta,a.btn-secondary-cta{width:100%!important}

  /* HERO stat cards: 2x2 grid */
  .elementor-element-et_39{flex-wrap:wrap!important;gap:12px!important}
  .elementor-element-et_39>.e-con{flex:1 1 calc(50% - 12px)!important;min-width:0!important}

  /* PRICING: single full-width column */
  .et-pricing-grid{gap:20px!important;flex-direction:column!important;align-items:center!important;flex-wrap:wrap!important}
  .et-pricing-card{width:100%!important;max-width:100%!important}

  /* BUSINESS IMPACT: let inline html own its padding */
  #business-impact>.e-con-inner{padding-left:0!important;padding-right:0!important}
}

/* ============ HERO MOBILE REFINEMENT (2026-06-19 v2) ============
   Center hero content consistently, fix orphaned line-breaks,
   tighten whitespace, thumb-friendly CTAs. Phones only. */
@media (max-width:767px){
  /* Consistent center alignment for the whole hero column */
  #hero .e-con-inner{text-align:center!important}
  #hero>.e-con-inner>.e-con>.e-con{align-items:center!important}
  #hero .elementor-widget-heading .elementor-heading-title,
  #hero .elementor-widget-text-editor,
  #hero .elementor-widget-text-editor .elementor-widget-container{text-align:center!important}

  /* H1: balanced lines so "&" never sits alone; large & bold per best practice */
  .elementor-element-et_30 .elementor-heading-title{font-size:30px!important;line-height:1.2!important;text-wrap:balance;max-width:340px;margin-left:auto!important;margin-right:auto!important}
  .elementor-element-et_31 .elementor-heading-title{font-size:19px!important;line-height:1.35!important;text-wrap:balance}

  /* Constrain the description width so it reads as a tidy centered block */
  #hero .elementor-widget-text-editor{max-width:360px;margin-left:auto!important;margin-right:auto!important}

  /* CTAs: centered, thumb-friendly (>=48px), near-full width but not edge-to-edge */
  .elementor-element-et_35{flex-direction:column!important;align-items:center!important;gap:12px!important;width:100%!important}
  .elementor-element-et_35 .elementor-widget{width:100%!important;display:flex!important;justify-content:center!important}
  .btn-primary-cta,.btn-secondary-cta,a.btn-primary-cta,a.btn-secondary-cta{width:100%!important;max-width:320px!important;min-height:50px!important;margin-left:auto!important;margin-right:auto!important}

  /* Tighten the dead space under the fixed nav */
  #hero{padding-top:64px!important}
  #hero>.e-con-inner{padding-top:20px!important}

  /* Stat cards stay centered 2x2 */
  .elementor-element-et_39{justify-content:center!important}
}

/* ===== HERO STAT BOXES: breathing room (desktop + mobile) 2026-06-19 =====
   Was padding:6px 8px on a 117px card -> label overflowed edges. */
.stat-card{padding:18px 12px!important;gap:8px!important;min-height:104px!important;align-items:center!important;justify-content:center!important;text-align:center!important}
.stat-card>*{width:100%!important}
.stat-card .elementor-heading-title{line-height:1.05!important;margin:0!important}
.stat-card .elementor-widget-text-editor,
.stat-card .elementor-widget-text-editor p{font-size:13px!important;line-height:1.3!important;margin:0!important;white-space:normal!important}

/* ===== FIX testimonial star rating (was empty tofu boxes) 2026-06-19 =====
   eicons glyph content rendered empty -> force universal Unicode star. */
.elementor-star-rating i:before{font-family:Arial,Helvetica,sans-serif!important;content:"\2605"!important;font-style:normal!important}
.elementor-star-rating i.elementor-star-full:before,.elementor-star-rating i:before{color:#fbbf24!important}
.elementor-star-rating i.elementor-star-empty:before{color:#d1d5db!important}
.elementor-star-rating{color:#fbbf24!important}
/* Star rating layout: neutralize Elementor fixed-width/absolute so the
   Unicode stars flow inline with even spacing (no overlap). */
.elementor-star-rating{display:inline-flex!important;align-items:center!important;gap:4px!important;unicode-bidi:normal!important}
.elementor-star-rating .elementor-star-rating__wrapper{display:inline-flex!important;gap:4px!important}
.elementor-star-rating i{position:static!important;width:1em!important;height:1em!important;line-height:1!important;margin:0!important;padding:0!important;font-size:18px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important}
.elementor-star-rating i:before{position:static!important;width:auto!important;height:auto!important;display:inline-block!important;margin:0!important}
/* Star rating FINAL: pure-CSS star via clip-path (font-independent, no tofu). */
.elementor-star-rating i:before{content:""!important;display:none!important}
.elementor-star-rating i{
  width:18px!important;height:18px!important;
  background-color:#fbbf24!important;
  -webkit-clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)!important;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)!important;
  display:inline-block!important;margin:0 3px 0 0!important;padding:0!important;
  font-size:0!important;overflow:hidden!important;
}
.elementor-star-rating i.elementor-star-empty{background-color:#d1d5db!important}
/* ===== FIX hero bottom overlap clipping the stat cards 2026-06-19 =====
   Hero had padding-bottom:0 + margin-bottom:-40px, so the Features section
   overlapped & covered the stat cards' bottom border. Give real clearance. */
#hero{padding-bottom:56px!important;margin-bottom:0!important}
.elementor-element-et_39{overflow:visible!important;margin-bottom:0!important}
.stat-card{overflow:visible!important}
/* Anchor links land below the fixed 72px nav */
#hero,#features,#products,#calculator,#how-it-works,#why-choose,#business-impact,#testimonials,#contact{scroll-margin-top:80px!important}