.elementor-kit-100{--e-global-color-primary:#0476D0;--e-global-color-secondary:#13233B;--e-global-color-text:#13233B;--e-global-color-accent:#69E4FF;--e-global-typography-primary-font-family:"Syne";--e-global-typography-primary-font-weight:500;--e-global-typography-secondary-font-family:"Syne";--e-global-typography-secondary-font-weight:500;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:600;color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-kit-100 button:hover,.elementor-kit-100 button:focus,.elementor-kit-100 input[type="button"]:hover,.elementor-kit-100 input[type="button"]:focus,.elementor-kit-100 input[type="submit"]:hover,.elementor-kit-100 input[type="submit"]:focus,.elementor-kit-100 .elementor-button:hover,.elementor-kit-100 .elementor-button:focus{background-color:var( --e-global-color-primary );color:var( --e-global-color-accent );border-style:solid;border-width:1px 1px 1px 1px;border-color:#73C2FB;border-radius:14px 14px 14px 14px;}.elementor-kit-100 e-page-transition{background-color:#FFBC7D;}.elementor-kit-100 p{margin-block-end:1em;}.elementor-kit-100 a{color:var( --e-global-color-accent );}.elementor-kit-100 a:hover{color:var( --e-global-color-accent );}.elementor-kit-100 h1{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-100 h2{color:var( --e-global-color-primary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-kit-100 h3{color:var( --e-global-color-primary );}.elementor-kit-100 h4{color:var( --e-global-color-primary );}.elementor-kit-100 h5{color:var( --e-global-color-primary );}.elementor-kit-100 h6{color:var( --e-global-color-primary );}.elementor-kit-100 button,.elementor-kit-100 input[type="button"],.elementor-kit-100 input[type="submit"],.elementor-kit-100 .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );color:var( --e-global-color-accent );box-shadow:0px 18px 46px 0px rgba(3.999999999999986, 117.99999999999994, 208, 0.24);border-style:solid;border-width:1px 1px 1px 1px;border-color:#69E4FF3D;border-radius:9px 9px 9px 9px;padding:14px 20px 14px 20px;}.elementor-kit-100 label{color:var( --e-global-color-primary );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-kit-100 input:not([type="button"]):not([type="submit"]),.elementor-kit-100 textarea,.elementor-kit-100 .elementor-field-textual{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-primary );accent-color:var( --e-global-color-primary );background-color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#D5DCE3;border-radius:9px 9px 9px 9px;transition:180ms;padding:14px 16px 14px 16px;}.elementor-kit-100 input:focus:not([type="button"]):not([type="submit"]),.elementor-kit-100 textarea:focus,.elementor-kit-100 .elementor-field-textual:focus{color:var( --e-global-color-text );accent-color:var( --e-global-color-primary );background-color:#FFFFFF;box-shadow:0px 0px 0px 3px rgba(105, 227.9999999999999, 255, 0.18);border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-primary );border-radius:14px 14px 14px 14px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =========================================================
   SiteHeros Launch-Safe Global CSS v1
   Elementor One / Atomic v4
   Purpose: clean global foundation only.
   Do not place header, footer, legal, pricing, or page-section
   specific code here.
   ========================================================= */


/* =========================================================
   01 — SiteHeros CSS Tokens
   Mirrors Elementor v4 variables and adds CSS-only tokens.
   ========================================================= */

:root {
  /* Core dark system */
  --sh-ink: #040814;
  --sh-navy: #071426;
  --sh-navy-soft: #13233B;

  /* Brand blues */
  --sh-blue: #0476D0;
  --sh-blue-hover: #73C2FB;
  --sh-sky: #57A0D3;
  --sh-cyan: #69E4FF;

  /* Light system */
  --sh-ice: #F0FFFF;
  --sh-cloud: #EEF4F4;
  --sh-white: #FFFFFF;

  /* Text */
  --sh-text-dark: #13233B;
  --sh-text-muted: #496178;
  --sh-text-soft: #7890A6;

  /* Borders */
  --sh-border: rgba(19, 35, 59, 0.12);
  --sh-border-light: rgba(255, 255, 255, 0.14);
  --sh-border-blue: rgba(105, 228, 255, 0.24);

  /* Fonts */
  --sh-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sh-font-display: "Syne", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sh-font-accent: "Cormorant", Georgia, serif;

  /* Fluid typography */
  --sh-text-hero: clamp(3rem, 6.3vw, 6.8rem);
  --sh-text-page-title: clamp(2.8rem, 5.6vw, 6rem);
  --sh-text-section-title: clamp(2.2rem, 4.4vw, 4.8rem);
  --sh-text-medium-title: clamp(1.8rem, 3.2vw, 3.6rem);
  --sh-text-card-title: clamp(1.25rem, 1.5vw, 1.7rem);
  --sh-text-body-large: clamp(1.04rem, 1.16vw, 1.28rem);
  --sh-text-body: clamp(0.98rem, 1.02vw, 1.08rem);
  --sh-text-small: clamp(0.82rem, 0.86vw, 0.94rem);
  --sh-text-eyebrow: clamp(0.72rem, 0.76vw, 0.84rem);

  /* Fluid spacing */
  --sh-side: clamp(20px, 5vw, 80px);
  --sh-side-wide: clamp(24px, 5vw, 96px);
  --sh-section: clamp(72px, 9vw, 140px);
  --sh-section-compact: clamp(48px, 6vw, 92px);
  --sh-section-large: clamp(96px, 12vw, 180px);
  --sh-card-pad: clamp(20px, 2.4vw, 34px);
  --sh-card-pad-sm: clamp(16px, 1.8vw, 24px);
  --sh-gap-grid: clamp(16px, 2vw, 30px);
  --sh-gap-layout: clamp(30px, 5vw, 72px);

  /* Widths */
  --sh-wrap: 1280px;
  --sh-wrap-wide: 1440px;
  --sh-wrap-dashboard: 1560px;
  --sh-text-measure: 860px;
  --sh-text-measure-narrow: 680px;

  /* Radius */
  --sh-radius-sm: 10px;
  --sh-radius-md: 14px;
  --sh-radius-lg: 24px;
  --sh-radius-xl: 34px;
  --sh-radius-pill: 999px;

  /* Shadows */
  --sh-shadow-light: 0 24px 64px rgba(19, 35, 59, 0.08);
  --sh-shadow-soft: 0 18px 48px rgba(19, 35, 59, 0.06);
  --sh-shadow-dark: 0 30px 90px rgba(0, 0, 0, 0.28);
  --sh-shadow-blue: 0 18px 46px rgba(4, 118, 208, 0.34);
}


/* =========================================================
   02 — Safe Base Reset
   No header offsets. No page-specific layout takeover.
   ========================================================= */

html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: clip;
}

body {
  max-width: 100%;
  overflow-x: clip;
  margin: 0;
  background: var(--sh-cloud);
  color: var(--sh-text-dark);
  font-family: var(--sh-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

::selection {
  background: rgba(105, 228, 255, 0.24);
  color: var(--sh-text-dark);
}


/* =========================================================
   03 — Elementor / Atomic Safety
   Prevents imported or generated layouts from causing overflow.
   ========================================================= */

.elementor,
.elementor-section,
.elementor-container,
.elementor-widget-wrap,
.elementor-widget-container {
  max-width: 100%;
}

.elementor img,
.elementor svg,
.elementor video {
  max-width: 100%;
}


/* =========================================================
   04 — Width Helpers
   Optional classes. Use manually when needed.
   ========================================================= */

.shl-wrap {
  width: min(100% - var(--sh-side), var(--sh-wrap));
  margin-inline: auto;
}

.shl-wrap-wide {
  width: min(100% - var(--sh-side-wide), var(--sh-wrap-wide));
  margin-inline: auto;
}

.shl-wrap-dashboard {
  width: min(100% - var(--sh-side-wide), var(--sh-wrap-dashboard));
  margin-inline: auto;
}

.shl-text-measure {
  max-width: var(--sh-text-measure);
}

.shl-text-measure-narrow {
  max-width: var(--sh-text-measure-narrow);
}

.shl-full-bleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}


/* =========================================================
   05 — Section Helpers
   Optional classes for clean page rhythm.
   ========================================================= */

.shl-section {
  padding-block: var(--sh-section);
  padding-inline: var(--sh-side);
}

.shl-section-compact {
  padding-block: var(--sh-section-compact);
  padding-inline: var(--sh-side);
}

.shl-section-large {
  padding-block: var(--sh-section-large);
  padding-inline: var(--sh-side);
}

.shl-page-shell {
  width: 100%;
  min-height: 100vh;
  background: var(--sh-cloud);
  color: var(--sh-text-dark);
}


/* =========================================================
   06 — Typography Helpers
   Optional classes. Primary styling should still use Elementor
   variables/classes where possible.
   ========================================================= */

.shl-font-body {
  font-family: var(--sh-font-body);
}

.shl-font-display {
  font-family: var(--sh-font-display);
}

.shl-font-accent {
  font-family: var(--sh-font-accent);
  font-style: italic;
}

.shl-text-balance {
  text-wrap: balance;
}

.shl-text-pretty {
  text-wrap: pretty;
}

.shl-title-accent {
  color: transparent;
  background: linear-gradient(
    90deg,
    var(--sh-cyan) 0%,
    var(--sh-blue) 48%,
    var(--sh-sky) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
}

.shl-title-accent-light {
  color: transparent;
  background: linear-gradient(
    90deg,
    var(--sh-white) 0%,
    var(--sh-cyan) 48%,
    #B8ECFF 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
}


/* =========================================================
   07 — Background Helpers
   Optional reusable premium backgrounds.
   ========================================================= */

.shl-bg-cloud {
  background: var(--sh-cloud);
}

.shl-bg-ice {
  background: var(--sh-ice);
}

.shl-bg-dark-premium {
  background:
    radial-gradient(circle at 16% 4%, rgba(105, 228, 255, 0.16), transparent 30%),
    radial-gradient(circle at 86% 8%, rgba(4, 118, 208, 0.22), transparent 30%),
    linear-gradient(135deg, #040814 0%, #071426 52%, #0B2748 100%);
  color: var(--sh-white);
}

.shl-bg-light-premium {
  background:
    radial-gradient(circle at 18% 0%, rgba(105, 228, 255, 0.10), transparent 32%),
    linear-gradient(180deg, #EEF4F4 0%, #F0FFFF 46%, #FFFFFF 100%);
}


/* =========================================================
   08 — Card Helpers
   Optional reusable cards.
   ========================================================= */

.shl-card-light {
  background: var(--sh-white);
  border: 1px solid var(--sh-border);
  border-radius: clamp(22px, 2.2vw, 30px);
  box-shadow: var(--sh-shadow-light);
}

.shl-card-soft {
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--sh-border);
  border-radius: clamp(20px, 2vw, 28px);
  box-shadow: var(--sh-shadow-soft);
}

.shl-card-dark {
  background:
    radial-gradient(circle at 18% 0%, rgba(105, 228, 255, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  border: 1px solid var(--sh-border-light);
  border-radius: clamp(24px, 2.4vw, 34px);
  box-shadow:
    var(--sh-shadow-dark),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}


/* =========================================================
   09 — Anchor Offset Helpers
   Optional. Add class manually to target sections.
   ========================================================= */

.shl-anchor-offset {
  scroll-margin-top: 150px;
}

.shl-anchor-offset-sm {
  scroll-margin-top: 90px;
}

@media (max-width: 1024px) {
  .shl-anchor-offset {
    scroll-margin-top: 140px;
  }
}

@media (max-width: 767px) {
  .shl-anchor-offset {
    scroll-margin-top: 120px;
  }
}


/* =========================================================
   10 — Accessibility / Reduced Motion
   Keeps motion respectful without breaking layout.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Syne';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://siteheros.com/wp-content/uploads/2026/05/Syne-Regular-1.woff2') format('woff2');
}
@font-face {
	font-family: 'Syne';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://siteheros.com/wp-content/uploads/2026/05/Syne-Medium.woff2') format('woff2');
}
@font-face {
	font-family: 'Syne';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://siteheros.com/wp-content/uploads/2026/05/Syne-SemiBold.woff2') format('woff2');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://siteheros.com/wp-content/uploads/2026/05/Inter18pt-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://siteheros.com/wp-content/uploads/2026/05/Inter18pt-Medium.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://siteheros.com/wp-content/uploads/2026/05/Inter18pt-SemiBold.woff2') format('woff2');
}
/* End Custom Fonts CSS */