/* ================================================================
   Vasify 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:  #f5f5f7;
  --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: #1a1a1a;

  --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);

  /* ── Brand aliases (used in apple.css) ── */
  --brand-primary:        var(--c-red-500);
  --brand-primary-dark:   var(--c-red-600);
  --brand-secondary:      var(--c-green-500);
  --brand-accent:         var(--c-gold-500);

  /* ── Hardcoded color aliases — replaces magic numbers in apple.css ── */
  --text-darkest:   var(--c-green-900);   /* #1a1a1a — darkest headings */
  --text-dark:      #1a1a1a;              /* near-black green — page titles */
  --text-body-dark: #2d2d2d;              /* body text on light bg */
  --text-mid:       #2d2d2d;              /* mid-tone body */

  /* ── HEADING SYSTEM — "Innovative business" pattern ── */
  /* All section headings share this exact style */
  --heading-size-hero:    clamp(3rem, 8vw, 5.5rem);    /* hero h1 */
  --heading-size-page:    clamp(2.4rem, 5vw, 3.8rem);  /* page title h1 */
  --heading-size-section: clamp(2.2rem, 4.5vw, 3.4rem);/* section headings */
  --heading-size-card:    clamp(1.1rem, 2vw, 1.25rem); /* card h3 */
  --heading-size-sub:     clamp(1rem, 1.5vw, 1.125rem);/* sub-headings h4/h5 */
  --heading-weight:       800;   /* extrabold — matches "Innovative business" */
  --heading-tracking:     -0.04em; /* tight — matches "Innovative business" */
  --heading-line-height:  1.1;   /* tight — matches "Innovative business" */
  --heading-color-light:  #1a1a1a; /* on light backgrounds */
  --heading-color-dark:   #ffffff; /* on dark backgrounds */
  --heading-accent-color: var(--c-green-500); /* span accent */

  /* Body copy system */
  --body-size-lg:   1.05rem;
  --body-size-base: 1rem;
  --body-size-sm:   0.875rem;
  --body-size-xs:   0.72rem;
  --body-weight:    400;
  --body-line-height: 1.75;
  --body-color-primary: #2d2d2d;
  --body-color-muted:   #5e5e5e;
  --body-color-faint:   #888888;

  /* Label / eyebrow system */
  --label-size:     0.72rem;
  --label-weight:   700;
  --label-tracking: 0.16em;

  /* ── Background Scale ── */
  --bg-page:    #ffffff;   /* warm off-white tinted with brand green */
  --bg-surface: #ffffff;
  --bg-muted:   #f5f5f7;
  --bg-dark:    #1a1a1a;

  /* ── Text Scale ── */
  --text-900: #1a1a1a;             /* Apple near-black headings */
  --text-700: #2d2d2d;             /* body */
  --text-500: #5e5e5e;             /* secondary */
  --text-300: #888888;             /* muted / captions */
  --text-inverse: #ffffff;

  /* ── Border ── */
  --border-subtle:  rgba(0,0,0,0.08);
  --border-default: rgba(0,0,0,0.12);
  --border-strong:  rgba(0,0,0,0.20);

  /* ── Shadow Scale (brand-tinted, not black) ── */
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.05);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.12), 0 6px 18px rgba(0,0,0,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: 'Poppins', 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: #ffffff;
  --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);
}

/* ── Font everywhere — Inter is the single typeface ── */
*, *::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;
}


/* ── Link color ── */
a {
  color: var(--color-primary) !important;
  -webkit-text-fill-color: var(--color-primary) !important;
}
a:hover {
  color: var(--color-primary-dark) !important;
  -webkit-text-fill-color: var(--color-primary-dark) !important;
}
/* Buttons always white — overrides the `a` rule above */
a.btn,
a[class*="btn-"],
a.cta-btn-primary,
a.cta-btn-secondary,
a.service-btn,
a.sov-sg-cta-btn-primary,
a.sov-sg-cta-btn-ghost,
a.sov-sg-view-all,
a.sov-sg-cta {
  -webkit-text-fill-color: currentColor !important;
}

/* ── Utility type classes ── */
.t-hero    { font-size: var(--text-hero);  font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; }
.t-h1      { font-size: var(--text-5xl);   font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; }
.t-h2      { font-size: var(--text-4xl);   font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; }
.t-
.t-h4      { font-size: var(--text-xl);    font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.t-h5      { font-size: var(--text-lg);    font-weight: 600; letter-spacing: 0;       line-height: 1.4; }
.t-body-lg { font-size: var(--text-lg);    font-weight: 400; line-height: 1.75; }
.t-body    { font-size: var(--text-base);  font-weight: 400; line-height: 1.75; }
.t-body-sm { font-size: var(--text-sm);    font-weight: 400; line-height: 1.75; }
.t-caption { font-size: var(--text-xs);    font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.t-label   { font-size: var(--text-xs);    font-weight: 700; letter-spacing: 0.2em;  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 { color: #5B8E3E !important; }

/* ================================================================
   HEADING SYSTEM — "Innovative business performance solutions" pattern
   font-weight: 800  |  letter-spacing: -0.04em  |  line-height: 1.1
   Applied to EVERY section heading on the site
================================================================ */

/* ── Base heading reset ── */
h1, h2, h3, h4, h5, h6 {
  font-family:    var(--font-sans)    !important;
  color:          #1a1a1a             !important;
  -webkit-text-fill-color: #1a1a1a   !important;
  margin-bottom: 0.5em;
}


h4 {
  font-size:      clamp(1rem, 1.5vw, 1.125rem) !important;
  font-weight:    700                           !important;
  letter-spacing: -0.02em                      !important;
  line-height:    1.3                           !important;
}
h5 {
  font-size:      1rem   !important;
  font-weight:    600    !important;
  letter-spacing: 0      !important;
  line-height:    1.4    !important;
}
h6 {
  font-size:      0.875rem !important;
  font-weight:    600      !important;
  letter-spacing: 0        !important;
  line-height:    1.4      !important;
}

/* ── Accent span inside headings — brand green ── */
h1 span.accent, h2 span, h3 span, h4 span {
  color: var(--color-primary) !important;
  -webkit-text-fill-color: var(--color-primary) !important;
}

/* ── Body text ── */
p {
  font-size:   1rem    !important;
  font-weight: 400     !important;
  line-height: 1.75    !important;
  color:       #2d2d2d !important;
  -webkit-text-fill-color: #2d2d2d !important;
}
li {
  font-size:   1rem    !important;
  font-weight: 400     !important;
  line-height: 1.75    !important;
  color:       #2d2d2d !important;
  -webkit-text-fill-color: #2d2d2d !important;
}

/* ── Section title eyebrow (small caps label above heading) ── */

/* ── About section ── */
.about .about-content h2 {
  font-size:      clamp(2.2rem, 4.5vw, 3.4rem) !important;
  font-weight:    800                           !important;
  letter-spacing: -0.04em                      !important;
  line-height:    1.1                           !important;
  color:          #1a1a1a                       !important;
  -webkit-text-fill-color: #1a1a1a             !important;
}
.about .about-content .lead {
  font-size:   1.05rem !important;
  line-height: 1.75    !important;
  color:       #5e5e5e !important;
  -webkit-text-fill-color: #5e5e5e !important;
}
.about .about-content p {
  color: #2d2d2d !important;
  -webkit-text-fill-color: #2d2d2d !important;
}

.about .about-content .feature-item p {
  font-size: 0.875rem !important;
  color:     #5e5e5e  !important;
  -webkit-text-fill-color: #5e5e5e !important;
}


/* ── Steps ── */
.step-info 
.step-info p {
  font-size: 0.875rem !important;
  color:     #5e5e5e  !important;
  -webkit-text-fill-color: #5e5e5e !important;
}
.step-number {
  font-size:      0.72rem  !important;
  font-weight:    700      !important;
  letter-spacing: 0.16em   !important;
  text-transform: uppercase !important;
  color:          var(--color-primary) !important;
  -webkit-text-fill-color: var(--color-primary) !important;
}


/* ── Contact ── */
.contact .contact-info-box 
.contact .contact-info-box p,
.contact .contact-info-box span {
  font-size: 0.875rem !important;
  color:     #5e5e5e  !important;
  -webkit-text-fill-color: #5e5e5e !important;
}
.contact .contact-form-wrapper label {
  font-size:   0.875rem !important;
  font-weight: 500      !important;
  color:       #2d2d2d  !important;
  -webkit-text-fill-color: #2d2d2d !important;
}


/* ── Service detail inner pages ── */
.service-details .service-header h1 {
  font-size:      clamp(2.2rem, 4.5vw, 3.4rem) !important;
  font-weight:    800                           !important;
  letter-spacing: -0.04em                      !important;
  line-height:    1.1                           !important;
  color:          #1a1a1a                       !important;
  -webkit-text-fill-color: #1a1a1a             !important;
}

.service-details h3, .service-details h4 {
  font-weight:    700     !important;
  letter-spacing: -0.02em !important;
  line-height:    1.3     !important;
}

.service-details .lead {
  font-size:   1.05rem !important;
  color:       #5e5e5e !important;
  -webkit-text-fill-color: #5e5e5e !important;
}


.footer p, .footer li, .footer span {
  font-size: 0.875rem                !important;
  color:     rgba(255,255,255,0.65)  !important;
  -webkit-text-fill-color: rgba(255,255,255,0.65) !important;
}
.footer a, .footer .footer-links a {
  font-size: 0.875rem                !important;
  color:     rgba(255,255,255,0.72)  !important;
  -webkit-text-fill-color: rgba(255,255,255,0.72) !important;
}
.footer a:hover, .footer .footer-links a:hover {
  color: var(--color-accent) !important;
  -webkit-text-fill-color: var(--color-accent) !important;
}
.footer .copyright p, .footer .credits, .footer .credits a {
  font-size: 0.72rem                 !important;
  color:     rgba(255,255,255,0.45)  !important;
  -webkit-text-fill-color: rgba(255,255,255,0.45) !important;
}


.navmenu a:hover, .navmenu .active, .navmenu .active:focus {
  color: var(--color-primary) !important;
  -webkit-text-fill-color: var(--color-primary) !important;
}

/* ── Breadcrumbs ── */
.breadcrumbs ol li, .breadcrumbs ol li a {
  font-size: 0.875rem                !important;
  color:     rgba(255,255,255,0.65)  !important;
  -webkit-text-fill-color: rgba(255,255,255,0.65) !important;
}
.breadcrumbs ol li.current {
  color: rgba(255,255,255,0.9) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.9) !important;
}


.hero .stats-card .stats-label p {
  font-size: 0.875rem !important;
  color:     #5e5e5e  !important;
  -webkit-text-fill-color: #5e5e5e !important;
}


/* ================================================================
   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;
}


/* Promote animated elements to own layer */
.hero-blob,
.cta-ring,
.about-dot,


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

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


/* Alternating section backgrounds */
section, .section { background-color: #ffffff !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 styles moved to apple.css */


.header .btn-getstarted,
.header .btn-getstarted:focus {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
  color:          var(--text-inverse)  !important;
  -webkit-text-fill-color: var(--text-inverse) !important;
  font-weight:    var(--weight-semibold) !important;
  font-size:      var(--text-sm)       !important;
  letter-spacing: var(--tracking-normal) !important;
  padding: 9px 22px !important;
  border-radius: 50px !important;
  box-shadow: var(--shadow-glow-green) !important;
  transition: all var(--dur-base) var(--ease-out) !important;
  
}
.header .btn-getstarted:hover {
  color:          var(--text-inverse)  !important;
  -webkit-text-fill-color: var(--text-inverse) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(91,142,62,0.38) !important;
}

  50%     { box-shadow: 0 8px 36px rgba(91,142,62,0.45); }

/* ── Hero ── */
.hero {
  background: #ffffff !important;
  position: relative;
  overflow: hidden;
}


.hero .main-heading h1 .sov-hero-title { color: #5B8E3E !important; -webkit-text-fill-color: #5B8E3E !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: 3rem !important; font-weight: 800 !important; color: #5B8E3E !important; -webkit-text-fill-color: #5B8E3E !important; }

/* ── 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;
  -webkit-text-fill-color: var(--text-inverse) !important;
  font-weight:    var(--weight-bold)   !important;
  font-size:      var(--text-sm)       !important;
  letter-spacing: var(--tracking-normal) !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;
  -webkit-text-fill-color: var(--text-inverse) !important;
}
.hero .cta-button .btn span,
.hero .cta-button .btn i {
  color: var(--text-inverse) !important;
  -webkit-text-fill-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:hover { border-color: var(--border-default) !important; transform: translateY(-8px) !important; box-shadow: var(--shadow-xl) !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: #ffffff !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-image .experience-badge { background: #5B8E3E !important; border-radius: 12px !important; }

/* ── CTA Section ── */
.call-to-action { padding: 0 !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;
  -webkit-text-fill-color: var(--text-inverse) !important;
  font-weight: var(--weight-bold); font-size: var(--text-sm);
  letter-spacing: var(--tracking-normal);
  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;
  -webkit-text-fill-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.85) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.85) !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;
  -webkit-text-fill-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;
  -webkit-text-fill-color: var(--text-inverse) !important;
  border-radius: 50px !important;
  font-weight: var(--weight-semibold) !important;
  font-size: var(--text-sm) !important;
  padding: var(--space-3) 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;
  -webkit-text-fill-color: var(--text-inverse) !important;
}
.service-btn i {
  color: var(--text-inverse) !important;
  -webkit-text-fill-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-semibold) !important;
  font-size: var(--text-sm) !important;
  letter-spacing: var(--tracking-normal) !important;
  padding: var(--space-4) var(--space-12) !important;
  color: var(--text-inverse) !important;
  -webkit-text-fill-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;
  color: var(--text-inverse) !important;
  -webkit-text-fill-color: var(--text-inverse) !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; }

.input-with-icon .form-control {
  font-size: var(--text-sm) !important; background: #f5f5f7 !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: #ffffff; 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; }


/* ── 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-item 

/* ── Testimonials ── */


.about .testimonial-section .testimonial-item { background: #ffffff !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 .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: 0 8px 32px rgba(91,142,62,0.28) !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; }


/* ================================================================
   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; }

  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; }

/* ── 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; }

/* ── 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); }

/* ── Custom cursor ── */

/* ── Progress bar ── */


/* ── 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: #1a1a1a !important; color:rgba(255,255,255,.75) !important; position:relative; overflow:hidden; }

.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::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; }
  
  h1 { font-size: clamp(2rem, 9vw, 2.8rem) !important; }
  h2 { font-size: var(--text-3xl) !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;
  }

  .contact .contact-form-wrapper { padding: var(--space-8) var(--space-5) !important; }
  .page-title { padding: 110px 0 50px !important; }


  
  
  
}

/* ── sm: 576–767px ── */
@media (min-width: 576px) and (max-width: 767px) {
  :root { --section-y: var(--space-16); }

  .call-to-action .advertise-1 { background: #1a1a1a !important; border-radius: 20px !important; padding: 60px 48px !important; overflow: hidden; position: relative; }
}

/* ── 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; }
  
}

/* ── 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 .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%; }
}