@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* @import url('http://example.com/example_style.css'); */



  


/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/* ============================================================
   Synergy Technical — shared token layer  (DARK ONLY)
   Pulse · Electric Violet

   Loaded site-wide via _base.html (require_css ../child.css),
   so every Synergy module can read these --st-* tokens.

   Values are hardcoded to the Pulse / Electric-Violet palette
   so it renders correctly the moment you publish. The one line
   marked ▸ ACCENT can be pointed at your global theme "Accent"
   color if you'd rather manage the blue from the theme editor
   (see note at the bottom of this file).
   ============================================================ */

:root {
  /* --- surfaces --- */
  --st-page:        #070b14;
  --st-page-2:      #05080f;
  --st-page-3:      #0b121f;
  --st-band:        #03050b;
  --st-footer:      #05080f;

  --st-card:        linear-gradient(180deg,#0e1626,#0b1120);
  --st-card-brd:    rgba(255,255,255,.08);
  --st-soft:        rgba(255,255,255,.05);
  --st-soft-brd:    rgba(255,255,255,.10);

  /* --- text --- */
  --st-fg:          #eef5fc;
  --st-body:        #c3cfe0;
  --st-muted:       #9fb2c6;
  --st-faint:       #8fa2b5;

  --st-nav-bg:      rgba(7,11,20,.72);
  --st-nav-brd:     rgba(255,255,255,.07);
  --st-hairline:    rgba(255,255,255,.09);

  /* --- primary blue (driven by global theme editor → Accent) --- */
  --st-accent:      #00aeef;
  --st-accent-2:    #38e6ff;                              /* cyan highlight (design-specific) */
  --st-accent-text: #00aeef;
  --st-on-accent:   #04202e;

  /* --- electric-violet secondary --- */
  --st-violet:      #8b6cff;
  --st-violet-fg:   #b7a6ff;
  --st-violet-bg:   rgba(139,108,255,.12);
  --st-violet-brd:  rgba(139,108,255,.32);

  --st-ghost-fg:    #cfe0f0;
  --st-ghost-brd:   rgba(255,255,255,.18);

  --st-disp-grad:   linear-gradient(100deg,var(--st-accent),var(--st-accent-2),var(--st-accent));
  --st-stat-grad:   linear-gradient(120deg,var(--st-accent),var(--st-accent-2));
  --st-cta-band:    radial-gradient(620px 420px at 12% 130%,rgba(139,108,255,.40),transparent 60%),
                    radial-gradient(700px 460px at 88% -20%,rgba(56,230,255,.22),transparent 60%),
                    linear-gradient(120deg,#00457c,#005e9c 55%,#0072b3);

  --st-glow-a:      rgba(0,170,239,.20);
  --st-glow-b:      rgba(139,108,255,.20);
  --st-orb:         rgba(139,108,255,.26);
}

/* ---------- Shared keyframes (used by Synergy modules) ---------- */
@keyframes st-pulseGlow{0%{opacity:.5;transform:scale(1)}100%{opacity:.95;transform:scale(1.16)}}
@keyframes st-floatY{0%{transform:translateY(0)}100%{transform:translateY(-40px)}}
@keyframes st-ringSpin{to{transform:rotate(360deg)}}
@keyframes st-gradShift{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes st-rise{from{transform:translateY(20px)}to{transform:none}}
@keyframes st-dashFlow{to{stroke-dashoffset:-520}}

@media (prefers-reduced-motion: reduce){
  [class^="st-"], [class*=" st-"]{ animation: none !important; }
}

/* ============================================================
   ▸ Blue is now wired to your global theme editor.
   Edit it under Settings → Theme → Colors → Accent, and it
   flows into every Synergy module. The |default('#00aaef')
   only applies if that setting is somehow empty.
   Dark surfaces + the electric-violet secondary stay as tuned
   constants (Act3 has no theme field for them).
   ============================================================ */

/* ============================================================
   Neutralize Act3's default link color (red) inside Synergy
   modules. Loads after the parent, so these win. Buttons and
   text links keep their intended colors on hover/focus.
   ============================================================ */
[class^="st-"] a, [class*=" st-"] a,
[class^="st-"] a:hover, [class^="st-"] a:focus,
[class*=" st-"] a:hover, [class*=" st-"] a:focus { text-decoration: none !important; }

/* filled buttons keep their text color on hover/focus */
.st-btn--primary:hover, .st-btn--primary:focus,
.st-weblib__btn:hover, .st-weblib__btn:focus { color:#04202e !important; }
.st-btn--violet:hover, .st-btn--violet:focus { color:#0a0612 !important; }
.st-cta__btn--primary:hover, .st-cta__btn--primary:focus { color:#0066b3 !important; }
.st-cta__btn--ghost:hover, .st-cta__btn--ghost:focus { color:#fff !important; }

/* ============================================================
   LIGHT MODE  —  "mostly light with dark accent sections"
   Modules stay dark by default (their own scoped values). When
   the html element has data-st-theme="light", these higher-
   specificity overrides flip the flippable sections. The marquee and
   CTA are intentionally left dark as accents, and the code
   console inside "how it works" stays dark (hardcoded colors).
   ============================================================ */
[data-st-theme="light"] .st-hero,
[data-st-theme="light"] .st-verts,
[data-st-theme="light"] .st-partners,
[data-st-theme="light"] .st-how,
[data-st-theme="light"] .st-results,
[data-st-theme="light"] .st-about,
[data-st-theme="light"] .st-weblib,
[data-st-theme="light"] .st-blog,
[data-st-theme="light"] .st-events{
  --st-fg:#0d2436 !important; --st-body:#3a4a58 !important; --st-muted:#566a7d !important; --st-faint:#55677a !important;
  --st-card:#ffffff !important; --st-card-brd:rgba(12,74,135,.10) !important;
  --st-soft:#ffffff !important; --st-soft-brd:rgba(12,74,135,.14) !important;
  --st-tint:#0079b8 !important; --st-accent-text:#0079b8 !important; --st-accent-2:#0079b8 !important;
  --st-violet-fg:#5a34d6 !important; --st-violet-bg:rgba(124,92,255,.10) !important; --st-violet-brd:rgba(124,92,255,.28) !important;
  --st-bar:rgba(12,74,135,.14) !important;
  --st-glow-a:rgba(0,170,239,.10) !important; --st-glow-b:rgba(124,92,255,.10) !important; --st-orb:rgba(124,92,255,.12) !important;
}
/* alternating light backgrounds so sections still read as bands */
[data-st-theme="light"] .st-hero{ --st-page:#eef3fa !important; }
[data-st-theme="light"] .st-verts{ --st-page:#ffffff !important; }
[data-st-theme="light"] .st-partners{ --st-page:#f4f8fd !important; }
[data-st-theme="light"] .st-how{ --st-page:#eef3fa !important; }
[data-st-theme="light"] .st-results{ --st-page:#ffffff !important; }
[data-st-theme="light"] .st-about{ --st-page:#f4f8fd !important; }
[data-st-theme="light"] .st-weblib{ --st-page:#ffffff !important; }
[data-st-theme="light"] .st-blog{ --st-page:#f4f8fd !important; }
[data-st-theme="light"] .st-events{ --st-page:#ffffff !important; }

/* full light mode: flip the marquee + CTA accents too */
[data-st-theme="light"] .st-marq{
  --st-band:#eef3fa !important; --st-body:#566a7d !important; --st-accent-2:#0079b8 !important;
  border-top:1px solid rgba(0,170,239,.20); border-bottom:1px solid rgba(0,170,239,.20);
  box-shadow:inset 0 0 50px rgba(0,170,239,.05);
}
[data-st-theme="light"] .st-cta{
  background:
    radial-gradient(620px 420px at 12% 130%,rgba(124,92,255,.14),transparent 60%),
    radial-gradient(700px 460px at 88% -20%,rgba(0,170,239,.12),transparent 60%),
    #eef3fa;
}
[data-st-theme="light"] .st-cta__orb{ background:radial-gradient(circle,rgba(0,170,239,.14),transparent 62%); }
[data-st-theme="light"] .st-cta__title{ color:#0d2436; }
[data-st-theme="light"] .st-cta__sub{ color:#3a4a58; }
[data-st-theme="light"] .st-cta__btn--primary{ color:#fff; background:#00aaef; box-shadow:0 14px 40px rgba(0,170,239,.28); }
[data-st-theme="light"] .st-cta__btn--ghost{ color:#0d2436; border-color:rgba(12,74,135,.30); }
[data-st-theme="light"] .st-cta__btn--ghost:hover, [data-st-theme="light"] .st-cta__btn--ghost:focus{ color:#0d2436 !important; background:rgba(12,74,135,.06); }
[data-st-theme="light"] .st-cta__fine{ color:#566a7d; }
/* section top hairlines: soften for light */
[data-st-theme="light"] .st-verts__line,
[data-st-theme="light"] .st-partners__line,
[data-st-theme="light"] .st-how__line,
[data-st-theme="light"] .st-results__line,
[data-st-theme="light"] .st-about__line,
[data-st-theme="light"] .st-weblib__line,
[data-st-theme="light"] .st-blog__line,
[data-st-theme="light"] .st-events__line{ background:linear-gradient(90deg,transparent,rgba(0,170,239,.35),transparent); }
/* partner logo chips already white — give them a hairline on light so they don't float */
[data-st-theme="light"] .st-partners__logo{ border:1px solid rgba(12,74,135,.10); }

/* ---- Webinar landing page: light mode ---- */
[data-st-theme="light"] .st-lp{
  --fg:#0d2436; --body:#3a4a58; --muted:#566a7d; --faint:#55677a;
  --violet-fg:#5a34d6; background:#eef3fa;
}
[data-st-theme="light"] .st-lp__featured{ background-color:#dbe6f3; }
[data-st-theme="light"] .st-lp__featured-scrim{ background:linear-gradient(180deg,rgba(238,243,250,.15),rgba(238,243,250,.85)); }
[data-st-theme="light"] .st-lp__hero{ background:radial-gradient(1000px 560px at 82% 4%,rgba(0,170,239,.12),transparent 60%),radial-gradient(720px 480px at 4% 100%,rgba(124,92,255,.12),transparent 60%),#eef3fa; }
[data-st-theme="light"] .st-lp__badge{ color:#5a34d6; background:rgba(124,92,255,.10); border-color:rgba(124,92,255,.28); }
[data-st-theme="light"] .st-lp__chip{ background:#fff; border-color:rgba(12,74,135,.12); }
[data-st-theme="light"] .st-lp__form{ background:#fff !important; border-color:rgba(12,74,135,.10) !important; box-shadow:0 30px 80px rgba(12,74,135,.14) !important; }
[data-st-theme="light"] .st-lp__form-embed .hs-form-field > label,
[data-st-theme="light"] .st-lp__form-embed .hs-form-field > label span{ color:#3a4a58 !important; }
[data-st-theme="light"] .st-lp__speakers{ background:radial-gradient(900px 480px at 15% -5%,rgba(124,92,255,.08),transparent 60%),#f4f8fd; border-top:1px solid rgba(12,74,135,.10); }
[data-st-theme="light"] .st-lp__speaker{ background:#fff; border-color:rgba(12,74,135,.10); }

/* ---------- Theme toggle button (injected by child.js) ---------- */
.st-theme-toggle{
  position:fixed; z-index:9999; right:20px; bottom:20px;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px; cursor:pointer;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  background:#0a1424; color:#eef5fc; border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 30px rgba(0,0,0,.35); transition:transform .2s ease, background .3s ease, color .3s ease;
}
.st-theme-toggle:hover{ transform:translateY(-2px); }
.st-theme-toggle__dot{ width:9px; height:9px; border-radius:50%; background:#38e6ff; box-shadow:0 0 8px #38e6ff; }
[data-st-theme="light"] .st-theme-toggle{ background:#ffffff; color:#0d2436; border-color:rgba(12,74,135,.16); box-shadow:0 10px 30px rgba(12,74,135,.16); }
[data-st-theme="light"] .st-theme-toggle__dot{ background:#00aaef; box-shadow:0 0 8px #00aaef; }
@media (prefers-reduced-motion: reduce){ .st-theme-toggle{ transition:none; } }

/* text links keep on-brand color on hover/focus (cyan) */
.st-blog__viewall:hover, .st-blog__viewall:focus,
.st-events__viewall:hover, .st-events__viewall:focus,
.st-weblib__viewall:hover, .st-weblib__viewall:focus { color:#38e6ff !important; }

/* blog card wrapper: never let the parent tint its inner text red */
.st-blog__card:hover, .st-blog__card:focus { color:inherit !important; }
/*Navigation Menu style */
.mega-feature {
    background: var(--st-card);
    border: 1px solid rgba(0, 170, 239, .25);
    border-radius: 20px;
    box-shadow: 0 0 60px rgba(0, 170, 239, .12);
    padding: 44px 40px;
    position: relative;
}
}
.mf-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 14px;
}
.mf-stat {
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 14px;
    background: linear-gradient(90deg, #38b6ff, #7b6cf6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}