#fw-section-links-list-377a42e3-f6b0-405e-91a4-80eaaa78eb44 {
--color-primary: #ccff00;
--color-primary-rgb: 204, 255, 0;
--color-background: #200441;
--color-background-rgb: 32, 4, 65;
--color-on-primary: #200441;
--color-on-primary-rgb: 32, 4, 65;
--color-on-background: #f9f8ff;
--color-on-background-rgb: 249, 248, 255;
--color-product-image-background: #f9f8ff;
--color-background-brightness: 19;
background-color: var(--color-background);
color: var(--color-on-background);

}


#fw-section-custom-html-38a2cc33-a275-4d85-b676-dbaf4637db34 {

.contact-section {
  width: 100%;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  padding: 3rem 1rem;
}

.contact-intro > * + * {
  margin-top: 1rem;
}

.contact-title {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  
}

.contact-description {
  color: rgb(255, 255, 255); /* commas for legacy parsers */
}

.form-group-container {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-label {
  margin-bottom: 0.5rem;
}

.form-input,
.form-textarea {
  padding: 0.5rem;
  border: 1px solid #e5e7eb;
  display: flex;
  height: 2.5rem;
  width: 100%;
  border-radius: 0.375rem;
  font-size: 1.0 rem;
  line-height: 1.25rem;
}

.form-textarea {
  min-height: 120px;
  height: auto;
}

/* Placeholder (broadest compatibility) */
.form-input::-webkit-input-placeholder,
.form-textarea::-webkit-input-placeholder { color: #6b7280; }
.form-input::-moz-placeholder,
.form-textarea::-moz-placeholder { color: #6b7280; }
.form-input:-ms-input-placeholder,
.form-textarea:-ms-input-placeholder { color: #6b7280; }
.form-input::placeholder,
.form-textarea::placeholder { color: #6b7280; }

/* Use :focus for compatibility (some builders flag :focus-visible) */
.form-input:focus,
.form-textarea:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}


/* add more breathing room between fields and captcha */
.h-captcha {
  margin-top: 1rem;
  margin-bottom: 1.2rem;
}

.form-submit {
  width: 100%;
  margin-top: 1.2rem;
  background-color: #ccff00;
  color: #000;
  padding: 13px 5px;
  border-radius: 0.375rem;
  border: 0;
  cursor: pointer;
}

/* If you used a “hidden” honeypot checkbox, make sure it’s truly hidden */
.hidden { display: none !important; }

}


#fw-section-hero-video-0 {
--color-primary: #632CFF;
--color-primary-rgb: 99, 44, 255;
--color-background: #200441;
--color-background-rgb: 32, 4, 65;
--color-on-primary: #F9F8FF;
--color-on-primary-rgb: 249, 248, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 19;
background-color: var(--color-background);
color: var(--color-on-background);
@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");

:where(.hero, .fw-hero, .section-hero, .image-banner)
  :is(h1, h2, .heading, .title) {
  font-family: "Anton", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  font-size: clamp(56px, 11vw, 160px) !important;
  line-height: 0.88 !important;
  letter-spacing: -0.03em !important;
  color: #CEFF00 !important;
  text-align: center !important;
  white-space: normal !important;     /* allow wrapping */
}

/* Optional: force a break before a specific word if needed */
:where(.hero, .fw-hero, .section-hero, .image-banner)
  :is(h1, h2, .heading, .title) br { display: inline; }

/* Description line under CONTENT AGENCY */
.hero__text {
  margin-top: 40px !important;            /* tighten gap under heading */
  max-width: 780px !important;           /* keeps it a tidy line length */
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;

  font-family: "Poppins", Arial, sans-serif !important;
  font-weight: 200 !important;
  font-size: 24px !important;            /* adjust to taste */
  line-height: 1.15 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;             /* force white */
}

/* Make STRATEGY + DESIGN bolder */
.hero__text strong {
  font-weight: 100 !important;           /* semi-bold */
  color: #ffffff !important;
}

/* Reduce the space below the big heading */
.hero__content h1,
.hero__content .heading,
.hero__content .title {
  margin-bottom: 0.15em !important;
}













/* ========= Upbeat Media — Hero Enhancements (non-destructive) ========= */

/* Brand tokens */
:root{
  --um-neon:#CEFF00;
  --um-ink:#0b0c10;
}

/* 1) Give the hero container a contrast overlay so text stays readable on video */
:where(.hero, .fw-hero, .section-hero, .image-banner){
  position: relative;
  isolation: isolate;
}

/* Subtle vignette + purple haze across the video */
:where(.hero, .fw-hero, .section-hero, .image-banner)::after{
  content:"";
  position:absolute; inset:0;
  z-index:0;               /* sits behind your text, above the video */
  pointer-events:none;
  background:
    radial-gradient(110% 70% at 50% 0%,
      rgba(20,10,35,.55) 0%,
      rgba(20,10,35,.30) 40%,
      rgba(20,10,35,.15) 64%,
      rgba(20,10,35,.10) 100%),
    linear-gradient(180deg, rgba(20,10,35,.45), rgba(20,10,35,.15) 38%, rgba(20,10,35,.55));
  mix-blend-mode: multiply; /* keeps the video visible but tames high contrast */
}

/* 2) Neon glow on the main heading (keeps your font, size, tracking as-is) */
:where(.hero, .fw-hero, .section-hero, .image-banner)
  :is(h1, h2, .heading, .title){
  position: relative;
  z-index: 1;  /* ensure above overlay */
  color: var(--um-neon) !important;
  text-shadow:
    0 0 6px rgba(206,255,0,.65),
    0 0 22px rgba(206,255,0,.35),
    0 6px 18px rgba(0,0,0,.35);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Optional: subtle "neon sign" pulse (comment out if you don't want motion) */
@keyframes umNeonPulse {
  0%, 100% { text-shadow:
    0 0 6px rgba(206,255,0,.65),
    0 0 22px rgba(206,255,0,.35),
    0 6px 18px rgba(0,0,0,.35); }
  50% { text-shadow:
    0 0 8px rgba(206,255,0,.80),
    0 0 28px rgba(206,255,0,.55),
    0 10px 22px rgba(0,0,0,.45); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: no-preference){
  :where(.hero, .fw-hero, .section-hero, .image-banner)
    :is(h1, h2, .heading, .title){
    animation: umNeonPulse 3.2s ease-in-out infinite;
  }
}

/* 3) Subhead readability + real bold “STRATEGY + DESIGN” */
.hero__text{
  position: relative;
  z-index: 1;
  color:#fff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.4);
}

/* Your current CSS sets strong to 100 (lighter). Make it truly bold. */
.hero__text strong{
  font-weight: 700 !important;  /* bold */
  color:#fff !important;
}

/* 4) Tighten vertical rhythm on small screens so lines don’t crowd */
@media (max-width: 520px){
  :where(.hero, .fw-hero, .section-hero, .image-banner)
    :is(h1, h2, .heading, .title){
    font-size: clamp(40px, 14vw, 96px) !important;
    line-height: .92 !important;
    letter-spacing: -0.02em !important;
  }
  .hero__text{
    font-size: 18px !important;
    line-height: 1.2 !important;
    max-width: 90vw !important;
  }
}

/* 5) Optional edge vignette (fades the banner edges so center text pops) */
@media (min-width: 840px){
  :where(.hero, .fw-hero, .section-hero, .image-banner)::before{
    content:"";
    position:absolute; inset:0;
    z-index:0;
    pointer-events:none;
    background:
      radial-gradient(120% 100% at 50% 50%,
        transparent 55%,
        rgba(0,0,0,.06) 72%,
        rgba(0,0,0,.14) 88%,
        rgba(0,0,0,.18) 100%);
  }
}

/* 6) If the video gets *too* bright, bump overlay strength slightly (one-line tweak) */
/* .image-banner::after{ background: linear-gradient(180deg, rgba(20,10,35,.58), rgba(20,10,35,.18) 38%, rgba(20,10,35,.62)); } */








/* === Glassy, sharp headline letters === */
:where(.hero, .fw-hero, .section-hero, .image-banner)
  :is(h1, h2, .heading, .title){
  /* Solid bright white core */
  background: linear-gradient(
    160deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.9) 40%,
    rgba(255,255,255,0.75) 70%,
    rgba(255,255,255,0.6) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Thin, crisp outline */
  -webkit-text-stroke: 0.6px rgba(0,0,0,0.35);

  /* Minimal glow for dimension (not blur) */
  text-shadow:
    0 0 6px rgba(255,255,255,0.5),
    0 4px 12px rgba(0,0,0,0.4);

  /* Extra sharpness */
  filter: contrast(200%) brightness(105%);
}

/* Stronger stroke on mobile for readability */
@media (max-width: 560px){
  :where(.hero, .fw-hero, .section-hero, .image-banner)
    :is(h1, h2, .heading, .title){
    -webkit-text-stroke: 0.8px rgba(0,0,0,0.45);
  }
}

:where(.hero, .fw-hero, .section-hero, .image-banner)
  :is(h1, h2, .heading, .title)::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.5) 0%,
    transparent 40%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events:none;
}









}
#fw-section-custom-html-1a29d282-cb29-4208-a7d3-46ed7f494c70 {
--color-primary: #632CFF;
--color-primary-rgb: 99, 44, 255;
--color-background: #f7f7fb;
--color-background-rgb: 247, 247, 251;
--color-on-primary: #F9F8FF;
--color-on-primary-rgb: 249, 248, 255;
--color-on-background: #F9F8FF;
--color-on-background-rgb: 249, 248, 255;
--color-product-image-background: #F9F8FF;
--color-background-brightness: 247;
background-color: var(--color-background);
color: var(--color-on-background);
/* ===============================
   Our Services - Full Updated CSS
   =============================== */

/* Section layout */
.fwsvc-section {
  padding: 72px 0;
  width: 100%;
  background: linear-gradient(180deg, #f7f7fb 0%, #fbfbff 100%);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
}

.fwsvc-section .fwsvc-heading {
  font-size: clamp(22px, 3.2vw, 36px);
  letter-spacing: .02em;
  margin: 0 0 14px;
  color: #13141a;
  padding: 0 40px;
  text-align: left;
}

.fwsvc-section .fwsvc-sub {
  color: #4b4f5c;
  margin: 0 0 32px;
  padding: 0 40px;
  text-align: left;
  white-space: nowrap;
}
@media (max-width:1024px) {
  .fwsvc-section .fwsvc-sub { white-space: normal; }
}

/* Grid layout */
.fwsvc-section .fwsvc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding: 0 40px;
}

/* ===== Force 3-up layout and responsive ===== */
@media (min-width: 901px) {
  #services .fwsvc-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  #services .fwsvc-card {
    width: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 24px 20px !important;
  }
  #services .fwsvc-card h3,
  #services .fwsvc-card p,
  #services .fwsvc-btn,
  #services .fwsvc-icon {
    max-width: 100% !important;
    white-space: normal !important;
  }
}
@media (max-width: 900px) and (min-width: 641px) {
  #services .fwsvc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}
@media (max-width: 640px) {
  #services .fwsvc-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
#services .fwsvc-card,
#services .fwsvc-grid > * {
  max-width: none !important;
  flex: 1 1 auto !important;
}

/* Card base */
.fwsvc-section .fwsvc-card {
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(17,16,32,.08);
  padding: 24px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex;
  flex-direction: column;
  text-align: left;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(12,10,34,.08);
}
.fwsvc-section .fwsvc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(12,10,34,.14);
  border-color: rgba(17,16,32,.18);
}

/* Accent stripe */
.fwsvc-section .fwsvc-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 4px;
  background: linear-gradient(90deg, #ceff00, #e6ff66);
  transition: width .3s ease;
}
.fwsvc-section .fwsvc-card:hover::before {
  width: 100%;
}

/* Typography inside cards */
.fwsvc-section .fwsvc-card h3 {
  margin: 6px 0 10px;
  font-size: 20px;
  font-weight: 700;
  color: #13141a;
}
.fwsvc-section .fwsvc-card p {
  margin: 0 0 16px;
  color: #1b1f2a;
  line-height: 1.5;
  font-size: 15px;
}

/* Icons */
.fwsvc-section .fwsvc-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  background: #f9f9fc;
  border: 1px solid rgba(17,16,32,.10);
  color: #111;
}
.fwsvc-section .fwsvc-icon svg {
  width: 26px;
  height: 26px;
  stroke: #111;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.fwsvc-section .fwsvc-card:nth-child(1) .fwsvc-icon { background: #F2FFF0; }
.fwsvc-section .fwsvc-card:nth-child(2) .fwsvc-icon { background: #F7F3FF; }
.fwsvc-section .fwsvc-card:nth-child(3) .fwsvc-icon { background: #FFF7F2; }
.fwsvc-section .fwsvc-card:nth-child(4) .fwsvc-icon { background: #F2F8FF; }

/* Learn more link with arrow */
.fwsvc-section .fwsvc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  text-decoration: none;
  color: #121214;
  transition: color .2s ease;
}
.fwsvc-section .fwsvc-btn::after {
  content: "→";
  font-size: 14px;
  color: #9acd32;
  transition: transform .2s ease;
}
.fwsvc-section .fwsvc-btn:hover::after {
  transform: translateX(3px);
}
.fwsvc-section .fwsvc-btn:hover {
  color: #9acd32;
}

/* Section spacing adjustments */
#services.fwsvc-section {
  padding-top: 20px !important;
  padding-bottom: 88px !important;
}
#services .fwsvc-heading { margin-top: 0 !important; }
#services .fwsvc-sub { margin-top: 6px !important; }






.fwsvc-section .fwsvc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 700;
  color: #444;
  text-decoration: none;
  transition: color .2s ease;
}
.fwsvc-section .fwsvc-btn::after {
  content: "→";
  font-size: 14px;
  transition: transform .2s ease, color .2s ease;
}
.fwsvc-section .fwsvc-btn:hover {
  color: #9acd32; /* accent */
}
.fwsvc-section .fwsvc-btn:hover::after {
  transform: translateX(3px);
  color: #9acd32;
}

}
#fw-section-image-with-text-087f83ad-a5b8-4615-81de-43f34ee32187 {
--color-primary: #632CFF;
--color-primary-rgb: 99, 44, 255;
--color-background: #200441;
--color-background-rgb: 32, 4, 65;
--color-on-primary: #F9F8FF;
--color-on-primary-rgb: 249, 248, 255;
--color-on-background: #f9f8ff;
--color-on-background-rgb: 249, 248, 255;
--color-product-image-background: #f9f8ff;
--color-background-brightness: 19;
background-color: var(--color-background);
color: var(--color-on-background);
/* ============================
   Image (left of the paragraph)
   ============================ */

/* Desktop default */
.image-with-text__image {
  width: 60% !important;
  max-width: 380px !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

/* Tablet */
@media (max-width: 1024px) {
  .image-with-text__image {
    width: 55% !important;
    max-width: 300px !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .image-with-text__image {
    width: 50% !important;
    max-width: 240px !important;
    margin-bottom: 20px; /* breathing room under image */
  }
}

/* ============================
   Text column (right side)
   ============================ */

.image-with-text__content {
  text-align: left !important;
  max-width: 640px;           /* keeps line length readable */
  margin: 0 auto;             /* centers within its column grid */
}

.image-with-text__content h2 {
  font-size: 2.5rem;          /* ~40px on default 16px root */
  line-height: 1.2;
  margin-bottom: 20px !important;
  color: #ffffff;
}

.image-with-text__content p {
  margin-bottom: 18px !important;
  line-height: 1.7;           /* open, easy to read on dark bg */
  color: #e6e6e6;             /* slightly softer than pure white */
  white-space: pre-line;      /* respects editor returns */
}

/* Optional CTA container beneath the paragraph(s) */
.image-with-text__cta-container { margin-top: 24px; }

/* =========================================================
   ABOUT HEADING: different shades/weights per phrase
   ---------------------------------------------------------
   1) Works WITHOUT editing HTML (gradient split technique)
   ========================================================= */

/* Scope this to your About section container if it has an id (recommended) */
/* Replace #about with the wrapper of that dark section if needed */
#about .image-with-text__content h2 {
  /* Base text is drawn using background-clip so we can tint halves */
  background: linear-gradient(
    to right,
    #ffffff 0%,  /* Strategy first. */
    #ffffff 70%,
    #C6FF00 70%, /* Creative always. */
    #C6FF00 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  /* Make the first half feel a touch heavier overall */
  font-weight: 800;
}

/* If you want the second half to feel a touch lighter,
   reduce overall weight and add a subtle text-shadow
   only on the lime half using a second overlay: */
#about .image-with-text__content h2::after {
  content: attr(data-title);  /* optional if you set data-title on the h2; safe to omit */
  /* When no data-title attribute is present, ::after renders nothing. That’s okay. */
}

/* =========================================================
   2) NICER approach IF you can wrap the two phrases in spans
      (prefer this when possible)
      -----------------------------------------------
      Markup:
      <h2>
        <span class="strategy">Strategy first.</span>
        <span class="creative">Creative always.</span>
      </h2>
   ========================================================= */

#about .image-with-text__content h2 .strategy {
  color: #ffffff;
  font-weight: 800;           /* slightly heavier */
}

#about .image-with-text__content h2 .creative {
  color: #C6FF00;             /* lime accent */
  font-weight: 700;           /* a touch lighter */
}

/* Optional: small tracking tweak so the lime word breathes a bit */
#about .image-with-text__content h2 .creative { letter-spacing: .3px; }

/* ============================
   End of consolidated update
   ============================ */



.image-with-text__content h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff; /* default white */
  position: relative;
  display: inline-block;
}

.image-with-text__content h2::after {
  content: "always."; /* manually insert the last word */
  color: #C6FF00;     /* lime green */
  font-weight: 800;   /* heavier weight */
  margin-left: 8px;   /* spacing before word */
}




}
#fw-section-custom-html-293e0b03-d622-4148-86cb-7b95b72afeaa {
--color-primary: #632CFF;
--color-primary-rgb: 99, 44, 255;
--color-background: #f7f7fb;
--color-background-rgb: 247, 247, 251;
--color-on-primary: #F9F8FF;
--color-on-primary-rgb: 249, 248, 255;
--color-on-background: #F9F8FF;
--color-on-background-rgb: 249, 248, 255;
--color-product-image-background: #F9F8FF;
--color-background-brightness: 247;
background-color: var(--color-background);
color: var(--color-on-background);
/* ===== Our Services · final layout & alignment ===== */

/* Keep subtitle on one line on desktop; wrap on mobile */
#services .fwsvc-sub{
  white-space: nowrap;
}
@media (max-width:768px){
  #services .fwsvc-sub{ white-space: normal; }
}

/* Section background (unchanged) */
#services.fwsvc-section{
  background: linear-gradient(180deg,#f7f7fb 0%,#fbfbff 100%);
  padding-top: 18px !important;
  padding-bottom: 64px;
}

/* Put Services back on the site grid with gutters */
#services .fwsvc-container,
#services .fwsvc-wrap,
#services .fwsvc-inner{
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Left-align heading + sub; keep readable measure */
#services .fwsvc-heading,
#services .fwsvc-sub,
#services h2{
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#services .fwsvc-sub{ max-width: 900px; }

/* Grid/items start from the left inside the same container */
#services .fwsvc-grid{
  justify-content: flex-start !important;   /* if flex */
  justify-items: start !important;          /* if grid */
  gap: 26px;
  align-items: stretch;
}

/* Card layout & hover (kept, condensed) */
#services .fwsvc-card{
  position: relative;
  display: flex; flex-direction: column;
  justify-content: space-between;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease;
}
#services .fwsvc-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 42px rgba(12,10,34,.18);
}
#services .fwsvc-card p{ margin-bottom: 16px; }
#services .fwsvc-btn{ margin-top: auto; align-self: flex-start; }
#services .fwsvc-btn:hover{ background:#c7f72a; transform: translateY(-2px); }

/* Optional: tiny spacing polish under heading */
#services .fwsvc-heading{ margin-bottom: 8px; }




/* --- Services heading/sub alignment with gutters --- */
#services .fwsvc-heading,
#services .fwsvc-sub {
  text-align: left !important;
  margin-left: 24px !important;   /* add gutter space */
  margin-right: auto !important;
  max-width: 900px;               /* keep sub readable */
}

/* Ensure the cards/grid align with the same gutter */
#services .fwsvc-grid {
  padding-left: 24px !important;
  padding-right: 24px !important;
  justify-content: flex-start !important;
}

}
#fw-section-rich-text-a1453113-b584-4a23-9cf3-a9a963f2e4f8 {
--color-primary: #632CFF;
--color-primary-rgb: 99, 44, 255;
--color-background: #0f0c1f;
--color-background-rgb: 15, 12, 31;
--color-on-primary: #F9F8FF;
--color-on-primary-rgb: 249, 248, 255;
--color-on-background: #f9f8ff;
--color-on-background-rgb: 249, 248, 255;
--color-product-image-background: #f9f8ff;
--color-background-brightness: 15;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-image-with-text-53640475-34b2-428b-bf6c-aad285bd92f5 {
--color-primary: #200441;
--color-primary-rgb: 32, 4, 65;
--color-background: #f7f7fb;
--color-background-rgb: 247, 247, 251;
--color-on-primary: #F9F8FF;
--color-on-primary-rgb: 249, 248, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #000000;
--color-background-brightness: 247;
background-color: var(--color-background);
color: var(--color-on-background);
/* ============================
   Featured Section Background
   ============================ */

section.image-with-text {
  position: relative;
  background: linear-gradient(135deg, #f7f7fb 0%, #f4efff 50%, #faf8ff 100%);
  overflow: hidden;
}

/* Grid background overlay */
section.image-with-text::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('grid bg.svg') repeat;
  background-size: 150px 150px;
  opacity: 0.08; /* subtle */
  animation: gridMove 18s linear infinite;
  z-index: 0;
  pointer-events: none; /* don’t block clicks */
}

/* Accent glow circle (lime) */
section.image-with-text::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  top: -60px;
  right: -60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198,255,0,0.6) 0%, transparent 70%);
  animation: floaty 6s ease-in-out infinite alternate;
  z-index: 0;
  pointer-events: none;
}

/* Content sits above background */
section.image-with-text .image-with-text__content {
  position: relative;
  z-index: 2;
}

/* Keyframes */
@keyframes gridMove {
  from { background-position: 0 0; }
  to { background-position: 300px 300px; }
}

@keyframes floaty {
  from { transform: translateY(0); }
  to { transform: translateY(-20px); }
}

}
#fw-section-custom-html-b6434515-ad58-4667-8f27-87474c01dcb0 {
--color-primary: #632CFF;
--color-primary-rgb: 99, 44, 255;
--color-background: #f9f8ff;
--color-background-rgb: 249, 248, 255;
--color-on-primary: #F9F8FF;
--color-on-primary-rgb: 249, 248, 255;
--color-on-background: #0f0f0f;
--color-on-background-rgb: 15, 15, 15;
--color-product-image-background: #0f0f0f;
--color-background-brightness: 249;
background-color: var(--color-background);
color: var(--color-on-background);
/* ---------- Make CTA match "Our Services" styling ---------- */

/* 1) Section background + spacing (same vibe as Services) */
.fwcta-section{
  background: linear-gradient(180deg, #f7f7fb 0%, #fbfbff 100%) !important;
  color: #0f1222;
  padding: 72px 0;                /* Services uses ~72px vertical rhythm */
  position: relative;
}

/* 2) Container width & side padding (match Services container) */
.fwcta-wrap{
  width: 100%;
  max-width: none;                /* remove narrow cap */
  margin: 0 auto;
  padding: 0 40px;                /* same side padding as Services */
  text-align: center;
}

/* 3) Type scale to mirror Services heading/sub */
.fwcta-eyebrow{
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: 8px;
}

.fwcta-title{
  margin: 0 0 12px;
  font-size: clamp(22px, 3.2vw, 36px);   /* same heading size */
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .02em;
  color: #13141a;
}

.fwcta-sub{
  margin: 0 auto 26px;
  max-width: 900px;                       /* wider text like Services */
  color: #4b4f5c;                         /* Services sub color */
  font-size: 16px;
  line-height: 1.6;
}

/* 4) Single primary button styled like the neon CTAs in Services */
.fwcta-actions{ display: flex; justify-content: center; }
.fwcta-btn.fwcta-btn--primary{
  display: inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  background: #d7ff3b;                    /* neon lime */
  color: #121214;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(208,255,59,.30);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.fwcta-btn.fwcta-btn--primary:hover{
  background: #c7f72a;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(208,255,59,.42);
}

/* 5) Trust row lighter, spaced like Services captions */
.fwcta-trust{
  margin-top: 18px;
  font-size: 13px;
  color: #6a6f7a;
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}


/* Make CTA headline larger & match Services heading */
.fwcta-section h2,
.fwcta-title {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
  font-weight: 900;
  font-size: 50px;       /* Bigger than Services cards */
  line-height: 1.2;      /* Tighter spacing for punch */
  color: #0f0f0f;
  margin-bottom: 20px;
}

/* Match CTA subhead styling to Services tagline */
.fwcta-sub {
  font-size: 20px;            /* same as Services tagline */
  line-height: 1.5;
  color: #6a6f73;             /* match Services tagline color */
  max-width: 900px;
  margin: 0 auto 24px;
  font-weight: 400;           /* keep it light, like Services tagline */
}






/* Style the trust row under CTA */
.fwcta-trust {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;       /* wraps neatly on mobile */
  gap: 32px;             /* spacing between items */
  font-size: 15px;
  font-weight: 500;
  color: #4a4a4a;        /* subtle dark gray */
  text-align: center;
}

/* Neon green checkmarks to match CTA */
.fwcta-trust span::before {
  content: "✔";
  color: #c7f72a;          /* neon green */
  font-weight: 700;
  margin-right: 6px;
}

}
#fw-section-hero-792e2b14-9e8e-428e-80f3-478eb5911eba {
--color-primary: #d7ff3b;
--color-primary-rgb: 215, 255, 59;
--color-background: #200441;
--color-background-rgb: 32, 4, 65;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-on-background: #0f0c1f;
--color-on-background-rgb: 15, 12, 31;
--color-product-image-background: #0f0c1f;
--color-background-brightness: 19;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-footer {
--color-primary: #632CFF;
--color-primary-rgb: 99, 44, 255;
--color-background: #0f0c1f;
--color-background-rgb: 15, 12, 31;
--color-on-primary: #F9F8FF;
--color-on-primary-rgb: 249, 248, 255;
--color-on-background: #f9f8ff;
--color-on-background-rgb: 249, 248, 255;
--color-product-image-background: #f9f8ff;
--color-background-brightness: 15;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-header {
--color-primary: #632CFF;
--color-primary-rgb: 99, 44, 255;
--color-background: #05040F;
--color-background-rgb: 5, 4, 15;
--color-on-primary: #F9F8FF;
--color-on-primary-rgb: 249, 248, 255;
--color-on-background: #F9F8FF;
--color-on-background-rgb: 249, 248, 255;
--color-product-image-background: #F9F8FF;
--color-background-brightness: 6;
background-color: var(--color-background);
color: var(--color-on-background);

}