:root {
  --wm-blue: #1268ff;
  --wm-blue-2: #00a3ff;
  --wm-deep: #071b48;
  --wm-text: #122042;
  --wm-muted: #5f6f93;
  --wm-bg: #f4f8ff;
  --wm-line: #dfe9ff;
}

body {
  color: var(--wm-text);
  background:
    radial-gradient(circle at 18% 4%, rgba(80, 158, 255, .18), transparent 34%),
    linear-gradient(180deg, #f3f8ff 0, #fff 42%, #f7faff 100%);
}

.site-header {
  height: 78px;
  color: var(--wm-text);
  background: rgba(255, 255, 255, .78);
  border-bottom: 1px solid rgba(209, 224, 255, .82);
  box-shadow: 0 10px 34px rgba(24, 77, 160, .06);
}

.site-header.scrolled {
  height: 68px;
  color: var(--wm-text);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 14px 40px rgba(24, 77, 160, .10);
}

.brand-mark {
  background: linear-gradient(135deg, #0f7cff, #37c7ff);
  box-shadow: 0 8px 22px rgba(18, 104, 255, .24);
}

.brand-name > span,
.nav a:hover,
.header-cta span {
  color: var(--wm-blue);
}

.nav a {
  opacity: .86;
}

.header-cta {
  border: 1px solid rgba(18, 104, 255, .22);
  color: var(--wm-blue);
  background: linear-gradient(180deg, #fff, #edf5ff);
  box-shadow: 0 10px 26px rgba(18, 104, 255, .10);
}

.hero {
  min-height: 850px;
  color: var(--wm-text);
  padding-top: 150px;
  background:
    radial-gradient(circle at 79% 29%, rgba(60, 157, 255, .24), transparent 31%),
    radial-gradient(circle at 15% 21%, rgba(91, 178, 255, .19), transparent 34%),
    linear-gradient(180deg, #eaf4ff 0, #f8fbff 60%, #fff 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(18, 104, 255, .07) 1px, transparent 1px),
    linear-gradient(rgba(18, 104, 255, .07) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .72), transparent 78%);
}

.hero-grid,
.glow,
.hero-light-trail {
  opacity: .38;
}

.hero-copy {
  width: min(650px, 51vw);
}

.eyebrow {
  color: var(--wm-blue);
  font-weight: 900;
}

.eyebrow i {
  background: var(--wm-blue);
}

.hero h1 {
  color: var(--wm-deep);
  font-family: var(--sans);
  font-size: clamp(54px, 5.6vw, 86px);
  line-height: 1.07;
  letter-spacing: -.07em;
}

.hero h1 span,
.section-head h2 span,
.method h2 span,
.contact h2 span {
  background: linear-gradient(90deg, #0874ff, #20baf7);
  -webkit-background-clip: text;
  color: transparent;
}

.hero-copy > p {
  color: #536486;
  font-size: 18px;
  font-weight: 500;
}

.button-primary {
  color: #fff;
  background: linear-gradient(100deg, #116aff, #168cff 68%, #20c5f7);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: 0 18px 38px rgba(18, 104, 255, .28);
}

.button-ghost {
  color: var(--wm-blue);
  border: 1px solid rgba(18, 104, 255, .22);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 12px 30px rgba(31, 91, 170, .08);
}

.hero-trust,
.hero-trust span {
  color: #697896;
}

.hero-trust b {
  color: var(--wm-deep);
}

.hero-console {
  top: 132px;
  right: clamp(-38px, 3vw, 55px);
  width: min(650px, 48vw);
  color: var(--wm-text);
  border: 1px solid rgba(18, 104, 255, .18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(245, 250, 255, .9)),
    radial-gradient(circle at 72% 15%, rgba(24, 140, 255, .18), transparent 35%);
  box-shadow: 0 34px 90px rgba(39, 94, 167, .18), inset 0 1px rgba(255, 255, 255, .95);
}

.console-head {
  color: #6c7b99;
  border-bottom-color: rgba(18, 104, 255, .12);
}

.console-head i {
  background: #b6c8e8;
}

.console-head > em {
  color: #0bbd8b;
  background: #e9fff8;
}

.metric-card,
.pipeline {
  border-color: rgba(18, 104, 255, .14);
  background: rgba(255, 255, 255, .86);
  box-shadow: inset 0 1px rgba(255, 255, 255, .8);
}

.metric-card > span,
.mini-grid small,
.pipeline-row small,
.pipeline-title {
  color: #6a7898;
}

.main-metric strong {
  color: var(--wm-deep);
}

.main-metric strong small {
  color: var(--wm-blue);
}

.pipeline-row {
  border-top-color: rgba(18, 104, 255, .10);
}

.pipeline-row b {
  color: var(--wm-text);
}

.hero-stats {
  left: clamp(24px, 6vw, 105px);
  right: clamp(24px, 6vw, 105px);
  bottom: 36px;
  overflow: hidden;
  border: 1px solid rgba(18, 104, 255, .12);
  border-radius: 24px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 20px 55px rgba(31, 91, 170, .10);
  backdrop-filter: blur(16px);
}

.hero-stats div {
  border-right-color: rgba(18, 104, 255, .10);
}

.hero-stats strong {
  color: var(--wm-blue);
}

.hero-stats span {
  color: #62708e;
}

.section {
  padding-top: 112px;
  padding-bottom: 112px;
}

.section-head h2,
.method h2,
.contact h2 {
  color: var(--wm-deep);
  font-family: var(--sans);
  letter-spacing: -.06em;
}

.section-head > p,
.problem-grid p,
.product-grid p,
.steps p,
.method-title > p {
  color: var(--wm-muted);
}

.system,
.method {
  background: #fff;
}

.problem-grid article,
.product-grid article,
.steps article,
.deliverable-grid article {
  border: 1px solid var(--wm-line);
  background: linear-gradient(180deg, #fff, #f8fbff);
  box-shadow: 0 18px 48px rgba(32, 95, 178, .08);
}

.problem-grid article:hover,
.product-grid article:hover {
  border-color: rgba(18, 104, 255, .25);
  box-shadow: 0 28px 60px rgba(30, 104, 218, .14);
}

.icon {
  background: #eef6ff;
  color: var(--wm-blue);
}

.engine {
  color: var(--wm-text);
  background:
    radial-gradient(circle at 50% 5%, rgba(34, 150, 255, .13), transparent 33%),
    linear-gradient(180deg, #f5f9ff, #eef5ff);
}

.engine-bg {
  background:
    linear-gradient(90deg, rgba(18, 104, 255, .055) 1px, transparent 1px),
    linear-gradient(rgba(18, 104, 255, .055) 1px, transparent 1px);
  background-size: 64px 64px;
}

.section-head.light > p {
  color: var(--wm-muted);
}

.engine-flow > b {
  color: #78a6ef;
}

.engine-flow article {
  border: 1px solid rgba(18, 104, 255, .14);
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(246, 251, 255, .88));
  box-shadow: 0 18px 45px rgba(24, 91, 174, .10);
}

.engine-flow article::after {
  background: radial-gradient(circle, rgba(18, 104, 255, .16), transparent 66%);
}

.engine-flow i {
  background: linear-gradient(135deg, #0d72ff, #1dc1f6);
}

.engine-flow h3 {
  color: var(--wm-deep);
}

.engine-flow span,
.engine-flow p {
  color: #657594;
}

.products {
  background: linear-gradient(180deg, #fff, #f4f8ff);
}

.product-feature {
  color: var(--wm-text);
  background:
    radial-gradient(circle at 78% 24%, rgba(34, 161, 255, .18), transparent 36%),
    linear-gradient(120deg, #eef7ff, #fff 42%, #eaf5ff);
  border: 1px solid rgba(18, 104, 255, .14);
  box-shadow: 0 26px 70px rgba(34, 92, 174, .12);
}

.feature-copy h3,
.suite-overview-head h3 {
  color: var(--wm-deep);
}

.feature-copy p {
  color: var(--wm-muted);
}

.tag,
.feature-copy > a {
  color: var(--wm-blue);
}

.tag,
.feature-copy li {
  border-color: rgba(18, 104, 255, .15);
  background: #eef6ff;
}

.feature-copy li {
  color: #436080;
}

.feature-product-shot,
.suite-overview,
.suite-overview-image {
  background: rgba(255, 255, 255, .75);
  border-color: rgba(18, 104, 255, .12);
  box-shadow: 0 20px 55px rgba(31, 91, 170, .10);
}

.button-dark {
  color: #fff;
  background: linear-gradient(100deg, #116aff, #168cff 68%, #20c5f7);
  box-shadow: 0 16px 36px rgba(18, 104, 255, .22);
}

.deliverables {
  background: linear-gradient(180deg, #f5f9ff, #fff);
}

.contact {
  color: var(--wm-text);
  background:
    radial-gradient(circle at 16% 16%, rgba(31, 140, 255, .16), transparent 32%),
    linear-gradient(135deg, #eef6ff, #fff 55%, #eaf5ff);
}

.contact-copy p {
  color: var(--wm-muted);
}

.contact-form {
  border: 1px solid rgba(18, 104, 255, .15);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 24px 70px rgba(31, 91, 170, .12);
}

.contact-qr-card h3 {
  color: var(--wm-deep);
}

.contact-qr-card > p {
  color: var(--wm-muted);
}

.qr-label {
  color: var(--wm-blue);
  border-color: rgba(18, 104, 255, .18);
  background: #eef6ff;
}

.qr-action {
  background: linear-gradient(100deg, #116aff, #168cff 68%, #20c5f7);
  box-shadow: 0 16px 34px rgba(18, 104, 255, .22);
}

footer {
  background: #071b48;
}

.float-bubble {
  background: linear-gradient(90deg, #1268ff, #00a3ff);
}

@media (max-width: 1000px) {
  .hero-copy {
    width: 100%;
  }

  .hero-console {
    width: 100%;
    right: auto;
  }
}

@media (max-width: 720px) {
  .site-header {
    color: var(--wm-text);
    background: rgba(255, 255, 255, .94);
  }

  .menu-button span {
    background: var(--wm-text);
  }

  .nav {
    background: rgba(255, 255, 255, .96);
    border-color: var(--wm-line);
  }

  .hero {
    padding-top: 112px;
  }

  .hero h1 {
    font-size: 45px;
  }

  .hero-stats {
    bottom: 24px;
  }
}

/* Light redesign for the growth-loop cards */
.engine {
  isolation: isolate;
  min-height: auto;
  color: var(--wm-text) !important;
  background:
    radial-gradient(circle at 20% 12%, rgba(37, 139, 255, .15), transparent 30%),
    radial-gradient(circle at 80% 75%, rgba(45, 196, 255, .13), transparent 30%),
    linear-gradient(180deg, #f6faff 0, #eef6ff 100%) !important;
}

.engine-bg,
.engine-bg::after {
  background:
    linear-gradient(90deg, rgba(18, 104, 255, .065) 1px, transparent 1px),
    linear-gradient(rgba(18, 104, 255, .065) 1px, transparent 1px) !important;
  background-size: 88px 88px !important;
  opacity: 1;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .72), rgba(0, 0, 0, .42), transparent 92%) !important;
}

.engine-orbit {
  display: none !important;
}

.engine .kicker {
  color: var(--wm-blue) !important;
}

.engine .kicker::before,
.engine .kicker::after {
  display: none !important;
}

.engine .section-head h2 {
  color: var(--wm-deep) !important;
  line-height: 1.16 !important;
}

.engine .section-head h2 span {
  background: linear-gradient(90deg, #0874ff, #20baf7) !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
}

.engine .section-head > p {
  color: #5f6f93 !important;
  font-weight: 500 !important;
}

.engine .section-head > p::before {
  display: none !important;
}

.engine-flow {
  align-items: stretch !important;
}

.engine-flow > b {
  align-self: center;
  height: 44px !important;
  color: transparent !important;
  text-shadow: none !important;
}

.engine-flow > b::before {
  background: linear-gradient(90deg, #b8d8ff, #25b8ff) !important;
  box-shadow: none !important;
}

.engine-flow > b::after {
  border-color: #25b8ff !important;
  filter: none !important;
}

.engine-flow article,
.engine-flow article:nth-of-type(2),
.engine-flow article:nth-of-type(3),
.engine-flow article:nth-of-type(4) {
  height: 350px !important;
  min-height: 350px !important;
  padding: 32px !important;
  border: 1px solid rgba(18, 104, 255, .14) !important;
  border-radius: 24px !important;
  color: var(--wm-text) !important;
  background:
    radial-gradient(circle at 0 0, rgba(42, 157, 255, .13), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(246, 251, 255, .92)) !important;
  box-shadow:
    0 24px 56px rgba(32, 95, 178, .10),
    inset 0 1px rgba(255, 255, 255, .9) !important;
  overflow: hidden;
}

.engine-flow article:first-of-type {
  background:
    radial-gradient(circle at 0 0, rgba(42, 157, 255, .16), transparent 38%),
    linear-gradient(180deg, #fff, #f7fbff) !important;
}

.engine-flow article::before {
  height: 4px !important;
  background: linear-gradient(90deg, #18a0ff, #33d4ff, transparent) !important;
  box-shadow: none !important;
}

.engine-flow article::after {
  width: 180px !important;
  height: 180px !important;
  right: -64px !important;
  bottom: -70px !important;
  opacity: .18 !important;
  background: radial-gradient(circle, rgba(18, 104, 255, .36), transparent 68%) !important;
}

.engine-flow i,
.engine-flow article:nth-of-type(3) i,
.engine-flow article:nth-of-type(4) i {
  width: 64px !important;
  height: 64px !important;
  border: 1px solid rgba(18, 104, 255, .18) !important;
  border-radius: 16px !important;
  color: #07306f !important;
  background: linear-gradient(135deg, #36c3ff, #1684ff) !important;
  box-shadow: 0 14px 28px rgba(18, 104, 255, .18) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
}

.engine-flow span,
.engine-flow article:nth-of-type(4) span {
  margin-top: 32px !important;
  color: #58719a !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .22em !important;
}

.engine-flow h3 {
  margin: 12px 0 18px !important;
  color: #071b48 !important;
  font-size: clamp(27px, 2vw, 34px) !important;
  font-weight: 900 !important;
  letter-spacing: -.05em !important;
}

.engine-flow p {
  margin: 0 !important;
  color: #536486 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.9 !important;
}

.engine-icon {
  right: 18px !important;
  bottom: 16px !important;
  width: 86px !important;
  height: 86px !important;
  stroke: #1684ff !important;
  opacity: .35 !important;
  filter: none !important;
}