/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
/* =====================================================================
   SMART APP BS — DESIGN SYSTEM  (paste BELOW the theme header comment
   in hello-theme-child/style.css — do not delete that header)
   ---------------------------------------------------------------------
   HOW TO USE IN ELEMENTOR  (Advanced tab → CSS Classes)
   Spacing    : sa-section (every section)  sa-section-head (title block)
                sa-grid (row/grid of cards)
   Containers : sa-hero  sa-section-alt  sa-card  sa-card-feature
                sa-why-item  sa-connector  sa-licensing  sa-cta
                sa-header  sa-topbar  sa-footer  sa-partners  sa-reveal
   Widgets    : Heading  → sa-eyebrow   (small label above headings)
                Heading  → sa-lead      (larger muted intro text; Text Editor too)
                Button   → sa-btn-primary | sa-btn-ghost | sa-btn-light | sa-btn-outline-light
                Icon List→ sa-checks    (round tick bullets)
                Nav Menu → sa-nav
                Form     → sa-form
                Nested Tabs → sa-product-tabs
                Icon Box → sa-partner     Icon List → sa-industry-list | sa-contact-list
                Heading  → sa-stat (big numbers)   Footer bottom row container → sa-footer-bottom
   Inline     : <span class="sa-grad">text</span>  gradient text in a heading
                <span class="sa-badge">New</span>        small pill badge
   Rule of thumb: always pick colours from GLOBAL COLOURS in Elementor,
   never type a hex — that is what makes dark mode work everywhere.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. TOKENS (light)
   --------------------------------------------------------------------- */
:root {
  --sa-brand: #0078d4;
  --sa-brand-strong: #0f5684;
  --sa-brand-soft: #eef9ff;
  --sa-accent: #00b7c3;
  --sa-ink: #0b1b2b;
  --sa-text: #2f3d4c;
  --sa-muted: #5e6b78;
  --sa-bg: #ffffff;
  --sa-bg-alt: #f5f8fb;
  --sa-surface: #ffffff;
  --sa-border: #e3e9ef;
  --sa-on-brand: #ffffff;
  --sa-shadow: 0 1px 2px rgba(11,27,43,.04), 0 8px 24px rgba(11,27,43,.06);
  --sa-shadow-lg: 0 24px 60px rgba(15,86,132,.18);

  --sa-font-head: "Plus Jakarta Sans", system-ui, sans-serif;
  --sa-font-body: "Inter", system-ui, sans-serif;

  --sa-radius: 16px;
  --sa-radius-sm: 10px;
  /* Spacing — ~20% tighter than the original design.
     Change these to adjust white space across the whole site. */
  --sa-section: clamp(52px, 7vw, 88px);          /* top/bottom of each section (was 64–112px) */
  --sa-hero-top: clamp(44px, 6.5vw, 84px);       /* was 56–104px */
  --sa-hero-bottom: clamp(52px, 6.5vw, 76px);    /* was 64–96px */
  --sa-head-gap: 36px;                           /* title block → content (was 48px) */
  --sa-card-pad: 24px;                           /* inside cards (was 28px) */
  --sa-tile-pad: 20px;                           /* why-us / connector tiles (was 22–24px) */
  --sa-band-pad: clamp(28px, 5vw, 56px);         /* CTA band (was 32–72px) */
  --sa-panel-pad: clamp(22px, 3.5vw, 40px);      /* licensing band, tab panels (was 24–56px) */
  --sa-gap: 16px;                                /* between cards in a grid (was 20px) */
  color-scheme: light;
}

/* ---------------------------------------------------------------------
   2. TOKENS (dark) — OS preference, unless user picked light
   --------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sa-brand: #3aa0ff; --sa-brand-strong: #8cc8ff; --sa-brand-soft: #0f2538; --sa-accent: #2fd4de;
    --sa-ink: #f1f6fb; --sa-text: #c8d3de; --sa-muted: #93a1b0;
    --sa-bg: #0a1420; --sa-bg-alt: #0e1a28; --sa-surface: #122233; --sa-border: #1f3246;
    --sa-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
    --sa-shadow-lg: 0 24px 60px rgba(0,0,0,.45);
    color-scheme: dark;
  }
}
/* Dark — user clicked the toggle */
:root[data-theme="dark"] {
  --sa-brand: #3aa0ff; --sa-brand-strong: #8cc8ff; --sa-brand-soft: #0f2538; --sa-accent: #2fd4de;
  --sa-ink: #f1f6fb; --sa-text: #c8d3de; --sa-muted: #93a1b0;
  --sa-bg: #0a1420; --sa-bg-alt: #0e1a28; --sa-surface: #122233; --sa-border: #1f3246;
  --sa-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  --sa-shadow-lg: 0 24px 60px rgba(0,0,0,.45);
  color-scheme: dark;
}

/* ---------------------------------------------------------------------
   3. ELEMENTOR GLOBAL COLOURS → follow the tokens
   Elementor prints its globals on body.elementor-kit-XX. Pointing them at
   our tokens means anything set to a Global Colour switches in dark mode.

   System colours (fixed names):  primary, secondary, text, accent.
   Custom colours get random IDs — replace each REPLACE_xxx below with the
   real ID (see setup notes: View Page Source → search "--e-global-color-").
   --------------------------------------------------------------------- */
body[class*="elementor-kit-"] {
  --e-global-color-primary:   var(--sa-brand);
  --e-global-color-secondary: var(--sa-brand-strong);
  --e-global-color-text:      var(--sa-text);
  --e-global-color-accent:    var(--sa-accent);
  --e-global-color-REPLACE_ink:        var(--sa-ink);
  --e-global-color-REPLACE_muted:      var(--sa-muted);
  --e-global-color-REPLACE_bg:         var(--sa-bg);
  --e-global-color-REPLACE_bg_alt:     var(--sa-bg-alt);
  --e-global-color-REPLACE_surface:    var(--sa-surface);
  --e-global-color-REPLACE_border:     var(--sa-border);
  --e-global-color-REPLACE_brand_soft: var(--sa-brand-soft);
}
/* body[class*=…] is more specific than Elementor's ".elementor-kit-XX",
   so these win. The tokens above are now the single source of truth —
   keep the same hex values in Elementor Site Settings so the editor's
   colour picker shows the right swatches. */


/* ---------------------------------------------------------------------
   4. BASE
   --------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body { background: var(--sa-bg); color: var(--sa-text); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 3px solid var(--sa-brand); outline-offset: 3px; border-radius: 6px; }
::selection { background: color-mix(in srgb, var(--sa-brand) 25%, transparent); }

.sa-section-alt { background-color: var(--sa-bg-alt); }

/* SPACING CLASSES — leave Padding/Gap EMPTY on these containers in Elementor
   so the tokens apply. (Anything you do set in the editor still wins.) */
body .e-con.sa-section { padding-top: var(--sa-section); padding-bottom: var(--sa-section); }
body .e-con.sa-hero    { padding-top: var(--sa-hero-top); padding-bottom: var(--sa-hero-bottom); }
body .e-con.sa-section-head { margin-bottom: var(--sa-head-gap); max-width: 720px; }
body .e-con.sa-grid    { --gap: var(--sa-gap); --row-gap: var(--sa-gap); --column-gap: var(--sa-gap); gap: var(--sa-gap); }
body .e-con.sa-cta     { padding: var(--sa-band-pad); }
body .e-con.sa-licensing { padding: var(--sa-panel-pad); }
.sa-product-tabs .e-n-tabs-content > .e-con { padding: var(--sa-panel-pad); }
.sa-muted, .sa-muted p { color: var(--sa-muted); }
.sa-lead, .sa-lead p, .sa-lead .elementor-heading-title {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--sa-muted); line-height: 1.65;
}

/* Eyebrow — Heading widget, small label above a section title */
.sa-eyebrow .elementor-heading-title, span.sa-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 .78rem/1 var(--sa-font-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--sa-brand);
}
.sa-eyebrow .elementor-heading-title::before, span.sa-eyebrow::before {
  content: ""; width: 18px; height: 2px; background: currentColor; border-radius: 2px;
}
.sa-eyebrow.sa-center .elementor-heading-title::before { display: none; }

/* Gradient text — <span class="sa-grad">digitally</span> inside a heading */
.sa-grad {
  background: linear-gradient(100deg, var(--sa-brand) 10%, var(--sa-accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Badge */
.sa-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600;
  color: var(--sa-brand); background: var(--sa-brand-soft); padding: 5px 10px; border-radius: 999px;
}


/* ---------------------------------------------------------------------
   5. BUTTONS — add class to the Button widget
   --------------------------------------------------------------------- */
[class*="sa-btn-"] .elementor-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: 999px; border: 1.5px solid transparent;
  font: 600 .95rem/1 var(--sa-font-body);
  transition: transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}
[class*="sa-btn-"] .elementor-button-icon svg { transition: transform .2s; }
[class*="sa-btn-"] .elementor-button:hover .elementor-button-icon svg { transform: translateX(3px); }

.sa-btn-primary .elementor-button {
  background: var(--sa-brand); color: var(--sa-on-brand);
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--sa-brand) 60%, transparent);
}
.sa-btn-primary .elementor-button:hover {
  background: var(--sa-brand); color: var(--sa-on-brand); transform: translateY(-2px);
  box-shadow: 0 14px 28px -8px color-mix(in srgb, var(--sa-brand) 70%, transparent);
}
.sa-btn-ghost .elementor-button { background: var(--sa-surface); color: var(--sa-ink); border-color: var(--sa-border); }
.sa-btn-ghost .elementor-button:hover { background: var(--sa-surface); color: var(--sa-brand); border-color: var(--sa-brand); }
.sa-btn-light .elementor-button { background: #fff; color: #0f5684; }
.sa-btn-light .elementor-button:hover { background: #fff; color: #0f5684; transform: translateY(-2px); }
.sa-btn-outline-light .elementor-button { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.sa-btn-outline-light .elementor-button:hover { background: rgba(255,255,255,.1); color: #fff; }


/* ---------------------------------------------------------------------
   6. HEADER (Theme Builder) — leave the header container's background
   EMPTY in Elementor; set Motion Effects → Sticky: Top, Effects Offset 8
   --------------------------------------------------------------------- */
.sa-topbar { background: var(--sa-brand-strong); color: #dbeeff; font-size: .82rem; }
:root[data-theme="dark"] .sa-topbar { background: #071019; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sa-topbar { background: #071019; } }
.sa-topbar a { color: inherit; }
.sa-topbar a:hover { color: #fff; }

.sa-header {
  background: color-mix(in srgb, var(--sa-bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
/* Elementor adds this class once you scroll past the Effects Offset */
.sa-header.elementor-sticky--effects {
  border-bottom-color: var(--sa-border); box-shadow: 0 6px 20px -12px rgba(11,27,43,.18);
}

/* Nav Menu widget */
.sa-nav .elementor-nav-menu--main .elementor-item {
  color: var(--sa-text); font-weight: 500; font-size: .94rem;
  padding: 10px 14px; border-radius: 999px; transition: background .2s, color .2s;
}
.sa-nav .elementor-nav-menu--main .elementor-item:hover,
.sa-nav .elementor-nav-menu--main .elementor-item.elementor-item-active {
  background: var(--sa-brand-soft); color: var(--sa-brand);
}
.sa-nav .elementor-nav-menu--dropdown { background: var(--sa-bg); border: 1px solid var(--sa-border); border-radius: 12px; box-shadow: var(--sa-shadow-lg); }
.sa-nav .elementor-nav-menu--dropdown a { color: var(--sa-text); }
.sa-nav .elementor-nav-menu--dropdown a:hover { background: var(--sa-brand-soft); color: var(--sa-brand); }

/* Round icon button + dark-mode toggle (HTML widget, see theme-toggle.html) */
.sa-icon-btn {
  width: 42px; height: 42px; display: grid; place-items: center; padding: 0;
  border-radius: 50%; border: 1px solid var(--sa-border); background: var(--sa-surface);
  color: var(--sa-ink); cursor: pointer;
}
.sa-icon-btn:hover, .sa-icon-btn:focus { border-color: var(--sa-brand); color: var(--sa-brand); background: var(--sa-surface); }
.sa-icon-btn svg { width: 18px; height: 18px; }
.sa-theme-toggle .sa-moon { display: none; }
:root[data-theme="dark"] .sa-theme-toggle .sa-sun { display: none; }
:root[data-theme="dark"] .sa-theme-toggle .sa-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .sa-theme-toggle .sa-sun { display: none; }
  :root:not([data-theme]) .sa-theme-toggle .sa-moon { display: block; }
}


/* ---------------------------------------------------------------------
   7. HERO — class on the hero container (soft glow background)
   --------------------------------------------------------------------- */
.sa-hero { position: relative; overflow: hidden; }
.sa-hero::before, .sa-hero::after { content: ""; position: absolute; pointer-events: none; z-index: 0; }
.sa-hero::before {
  inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sa-brand) 22%, transparent), transparent 70%);
}
.sa-hero::after {
  inset: auto auto -30% -15%; width: 50vw; height: 50vw; max-width: 640px; max-height: 640px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sa-accent) 16%, transparent), transparent 70%);
}
.sa-hero > .e-con-inner, .sa-hero > .elementor-element { position: relative; z-index: 1; }

/* Pill above the H1 (HTML or Text Editor: <span class="sa-pill"><b>New</b> text</span>) */
.sa-pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px;
  border-radius: 999px; background: var(--sa-surface); border: 1px solid var(--sa-border);
  font-size: .85rem; color: var(--sa-text); box-shadow: var(--sa-shadow);
}
.sa-pill b { white-space: nowrap; background: var(--sa-brand); color: #fff; font-weight: 600; font-size: .72rem; padding: 4px 10px; border-radius: 999px; letter-spacing: .04em; }

/* Hero product collage (HTML widget, see hero-visual.html) */
.sa-hero-visual { position: relative; min-height: 440px; }
.sa-mock { position: absolute; background: var(--sa-surface); border: 1px solid var(--sa-border); border-radius: var(--sa-radius); box-shadow: var(--sa-shadow-lg); }
.sa-mock--main { inset: 20px 40px 40px 0; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.sa-mock__bar { display: flex; gap: 6px; }
.sa-mock__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--sa-border); }
.sa-mock__title strong { font: 700 .95rem var(--sa-font-head); color: var(--sa-ink); }
.sa-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sa-kpi { background: var(--sa-bg-alt); border-radius: var(--sa-radius-sm); padding: 12px; }
.sa-kpi small { display: block; color: var(--sa-muted); font-size: .7rem; }
.sa-kpi b { font: 800 1.15rem var(--sa-font-head); color: var(--sa-ink); }
.sa-chart { flex: 1; display: flex; align-items: flex-end; gap: 8px; padding: 12px; background: var(--sa-bg-alt); border-radius: var(--sa-radius-sm); min-height: 140px; }
.sa-chart i { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--sa-brand), color-mix(in srgb, var(--sa-brand) 40%, transparent)); transform-origin: bottom; animation: sa-grow 1.2s cubic-bezier(.2,.8,.2,1) both; }
.sa-chart i:nth-child(even) { background: linear-gradient(180deg, var(--sa-accent), color-mix(in srgb, var(--sa-accent) 35%, transparent)); }
.sa-mock--float { padding: 14px 16px; display: flex; align-items: center; gap: 12px; font-size: .82rem; animation: sa-float 6s ease-in-out infinite; }
.sa-mock--float b { display: block; color: var(--sa-ink); font-family: var(--sa-font-head); font-size: .9rem; }
.sa-mock--float span { color: var(--sa-muted); }
.sa-mock--pay { right: 0; top: 0; }
.sa-mock--sync { right: 8px; bottom: 0; animation-delay: -3s; }
.sa-mock__ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: none; }
.sa-mock__ico svg { width: 20px; height: 20px; }
@keyframes sa-grow { from { transform: scaleY(0); } }
@keyframes sa-float { 50% { transform: translateY(-10px); } }


/* ---------------------------------------------------------------------
   8. CARDS — class on a container
   --------------------------------------------------------------------- */
.sa-card, .sa-why-item, .sa-connector {
  background: var(--sa-surface); border: 1px solid var(--sa-border); border-radius: var(--sa-radius);
}
.sa-card { padding: var(--sa-card-pad); transition: transform .25s, box-shadow .25s, border-color .25s; }
.sa-card:hover {
  transform: translateY(-4px); box-shadow: var(--sa-shadow-lg);
  border-color: color-mix(in srgb, var(--sa-brand) 35%, var(--sa-border));
}
.sa-card p, .sa-why-item p { color: var(--sa-muted); }

/* Icon box inside a card: Icon widget with class sa-card-icon */
.sa-card-icon .elementor-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--sa-brand-soft); color: var(--sa-brand); font-size: 26px;
}
.sa-card-icon .elementor-icon svg { width: 26px; height: 26px; fill: currentColor; }

/* Featured blue card */
.sa-card-feature { background: linear-gradient(150deg, #0f5684, #0078d4); color: #dcefff; border: 0; }
:root[data-theme="dark"] .sa-card-feature { background: linear-gradient(150deg, #0c3a5c, #0b5fa8); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sa-card-feature { background: linear-gradient(150deg, #0c3a5c, #0b5fa8); } }
.sa-card-feature .elementor-heading-title { color: #fff; }
.sa-card-feature p, .sa-card-feature .elementor-widget-text-editor { color: #cfe6fb; }
.sa-card-feature .sa-card-icon .elementor-icon { background: rgba(255,255,255,.14); color: #fff; }
.sa-card-feature a { color: #fff; }

/* Small "why us" tiles */
.sa-why-item { padding: var(--sa-tile-pad); }

/* Connector tiles */
.sa-connector { padding: var(--sa-tile-pad); transition: all .25s; }
.sa-connector:hover { border-color: var(--sa-brand); transform: translateY(-3px); box-shadow: var(--sa-shadow); }

/* Tag pills — Text Editor / HTML: <ul class="sa-tags"><li><a href="…">Sales</a></li></ul> */
.sa-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sa-tags a, .sa-tags li > span {
  display: inline-block; font-size: .8rem; font-weight: 500; padding: 6px 12px; border-radius: 999px;
  background: var(--sa-bg-alt); color: var(--sa-text); border: 1px solid var(--sa-border); transition: all .2s;
}
.sa-tags a:hover { border-color: var(--sa-brand); color: var(--sa-brand); background: var(--sa-brand-soft); }
.sa-card-feature .sa-tags a { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.2); }
.sa-card-feature .sa-tags a:hover { background: rgba(255,255,255,.2); }

/* Tick list — Icon List widget with class sa-checks (icon: none) */
.sa-checks .elementor-icon-list-item { position: relative; padding-left: 30px; }
.sa-checks .elementor-icon-list-icon { display: none; }
.sa-checks .elementor-icon-list-item::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--sa-brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230078d4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}
.sa-checks .elementor-icon-list-text { color: var(--sa-text); }

/* Licensing band */
.sa-licensing {
  background: var(--sa-surface); border: 1px solid var(--sa-border);
  border-radius: calc(var(--sa-radius) + 8px); box-shadow: var(--sa-shadow);
}

/* Partner / accreditation strip */
.sa-partners { background: var(--sa-surface); border-block: 1px solid var(--sa-border); }


/* ---------------------------------------------------------------------
   9. PRODUCT TABS — Nested Tabs widget with class sa-product-tabs
   (set Direction: Start/left in the widget for the vertical layout)
   --------------------------------------------------------------------- */
.sa-product-tabs .e-n-tab-title {
  border-radius: 12px; border: 1px solid transparent; background: transparent;
  color: var(--sa-text); font: 600 .95rem var(--sa-font-body); transition: all .2s;
}
.sa-product-tabs .e-n-tab-title:hover { background: var(--sa-surface); }
.sa-product-tabs .e-n-tab-title[aria-selected="true"] {
  background: var(--sa-surface); border-color: var(--sa-border); box-shadow: var(--sa-shadow); color: var(--sa-ink);
}
.sa-product-tabs .e-n-tabs-content > .e-con {
  background: var(--sa-surface); border: 1px solid var(--sa-border);
  border-radius: calc(var(--sa-radius) + 4px); box-shadow: var(--sa-shadow);
}
.sa-product-tabs .e-n-tabs-content > .e-con.e-active { animation: sa-fade-up .45s ease both; }
@keyframes sa-fade-up { from { opacity: 0; transform: translateY(12px); } }


/* ---------------------------------------------------------------------
   10. CTA / CONTACT band — class sa-cta on the container
   --------------------------------------------------------------------- */
.sa-cta {
  position: relative; overflow: hidden; border-radius: calc(var(--sa-radius) + 12px);
  background: linear-gradient(135deg, #0f5684 0%, #0078d4 55%, #00a2c7 100%); color: #dcefff;
}
.sa-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 85% 10%, rgba(255,255,255,.18), transparent 40%),
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0/32px 32px;
}
.sa-cta > * { position: relative; }
.sa-cta .elementor-heading-title { color: #fff; }
.sa-cta .sa-eyebrow .elementor-heading-title { color: #a9dcff; }
.sa-cta a { color: #fff; }

/* Elementor Pro Form widget — class sa-form */
.sa-form {
  background: var(--sa-surface); border-radius: var(--sa-radius);
  padding: clamp(20px, 2.6vw, 28px); box-shadow: 0 30px 60px -20px rgba(0,0,0,.35);
}
.sa-form .elementor-field-label { font-size: .8rem; font-weight: 600; color: var(--sa-ink); }
.sa-form .elementor-field-group .elementor-field {
  font-size: .95rem; color: var(--sa-ink); background: var(--sa-bg-alt);
  border: 1px solid var(--sa-border); border-radius: 10px; padding: 12px 14px;
  transition: border-color .2s, box-shadow .2s;
}
.sa-form .elementor-field-group .elementor-field:focus {
  outline: none; border-color: var(--sa-brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sa-brand) 18%, transparent);
}
.sa-form .elementor-field-type-submit .elementor-button {
  width: 100%; border-radius: 999px; padding: 14px 24px; font-weight: 600;
  background: var(--sa-brand); color: var(--sa-on-brand);
}


/* ---------------------------------------------------------------------
   11. FOOTER (Theme Builder) — class sa-footer on the outer container
   --------------------------------------------------------------------- */
.sa-footer { background: #071422; color: #9fb2c4; font-size: .92rem; }
.sa-footer .elementor-heading-title { color: #fff; }
.sa-footer a, .sa-footer .elementor-icon-list-text { color: #9fb2c4; }
.sa-footer a:hover, .sa-footer a:hover .elementor-icon-list-text { color: #fff; }
.sa-footer .elementor-social-icon { background: transparent; border: 1px solid #1d3348; border-radius: 50%; }
.sa-footer .elementor-social-icon:hover { border-color: #3aa0ff; }


.sa-footer-bottom { border-top: 1px solid #16293b; color: #6f879c; font-size: .82rem; }
.sa-footer-bottom a { color: #6f879c; }
.sa-footer .sa-brand-tagline, .sa-footer .sa-brand-tagline .elementor-heading-title { color: #7d93a8; }


/* ---------------------------------------------------------------------
   11b. SMALL PIECES — top-bar badge, connector logos, partner items,
   industry lists, stats, contact list
   --------------------------------------------------------------------- */
/* Top bar "online" dot: <span class="sa-topbar-badge">Sydney · Melbourne</span> */
.sa-topbar-badge { display: inline-flex; align-items: center; gap: 6px; }
.sa-topbar-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3ee08f; }

/* Connector logo circles (HTML): <div class="sa-pair"><span class="sa-c-stripe">S</span><span class="sa-c-bc">BC</span></div> */
.sa-pair { display: flex; align-items: center; }
.sa-pair span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 800 .72rem var(--sa-font-head); color: #fff; border: 2px solid var(--sa-surface); }
.sa-pair span + span { margin-left: -8px; }
.sa-c-stripe { background: #635bff; }
.sa-c-xero   { background: #13b5ea; }
.sa-c-bc     { background: #00857b; }
.sa-c-d365   { background: #0078d4; }
.sa-c-pp     { background: #742774; }

/* Partner strip item — Icon Box widget with class sa-partner */
.sa-partner .elementor-icon { color: var(--sa-brand); }
.sa-partner .elementor-icon-box-title { color: var(--sa-ink); font-weight: 600; font-size: .9rem; }
.sa-partner .elementor-icon-box-description { color: var(--sa-muted); font-size: .76rem; }

/* Industry column — Icon List widget with class sa-industry-list (links) */
.sa-industry-list .elementor-icon-list-item > a {
  display: flex; justify-content: space-between; padding: 8px 10px; margin: 0 -10px; border-radius: 8px; transition: all .2s;
}
.sa-industry-list .elementor-icon-list-text { color: var(--sa-text); font-size: .93rem; }
.sa-industry-list .elementor-icon-list-item > a::after { content: "→"; opacity: 0; transform: translateX(-6px); transition: all .2s; color: var(--sa-brand); }
.sa-industry-list .elementor-icon-list-item > a:hover { background: var(--sa-brand-soft); }
.sa-industry-list .elementor-icon-list-item > a:hover .elementor-icon-list-text { color: var(--sa-brand); }
.sa-industry-list .elementor-icon-list-item > a:hover::after { opacity: 1; transform: none; }

/* Stats — Heading widget (number) with class sa-stat, Text below with class sa-muted */
.sa-stat .elementor-heading-title { font: 800 clamp(1.6rem, 3vw, 2.2rem)/1.1 var(--sa-font-head); color: var(--sa-ink); letter-spacing: -.02em; }

/* Contact details in the CTA — Icon List widget with class sa-contact-list */
.sa-contact-list .elementor-icon-list-icon i, .sa-contact-list .elementor-icon-list-icon svg { color: #a9dcff; fill: #a9dcff; }
.sa-contact-list .elementor-icon-list-text { color: #fff; }


/* ---------------------------------------------------------------------
   12. REVEAL ON SCROLL — class sa-reveal on a container
   Don't use on the hero (it would delay your LCP).
   Only hides when JS is running, and never inside the Elementor editor.
   --------------------------------------------------------------------- */
html.sa-js body:not(.elementor-editor-active) .sa-reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
html.sa-js body:not(.elementor-editor-active) .sa-reveal.sa-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html.sa-js body .sa-reveal { opacity: 1; transform: none; }
}


/* ---------------------------------------------------------------------
   13. RESPONSIVE (matches Elementor default breakpoints 1024 / 767)
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .sa-hero-visual { min-height: 400px; max-width: 560px; }
}
@media (max-width: 767px) {
  .sa-hero-visual { min-height: 360px; }
  .sa-mock--main { inset: 30px 0 50px 0; }
  .sa-mock--pay { right: -6px; top: 0; }
  .sa-mock--sync { right: auto; left: 12px; bottom: 0; }
  .sa-kpi b { font-size: 1rem; }
  .sa-topbar-hide-sm { display: none !important; }
}