/* ==========================================================
   MCAAS — MARKETING & CREATIVE AS A SERVICE
========================================================== */

.mcaas-page {

  --m-bg: #05090d;
  --m-bg2: #07121e;
  --m-bg3: #0d1928;

  --m-border:
    rgba(128,170,207,.13);

  --m-blue: #65c8fa;
  --m-violet: #8c89ff;
  --m-teal: #5dd9c8;

  --m-white: #f3f6f9;
  --m-text: #99aaba;
  --m-muted: #718698;

  overflow: hidden;

  background:
    var(--m-bg);

}



/* ==========================================================
   COMMON
========================================================== */

.mcaas-section {

  position: relative;

  padding:
    100px 0;

  overflow: hidden;

}


.mcaas-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  color:
    var(--m-blue);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1.5px;

}


.mcaas-eyebrow > span {

  width: 20px;

  height: 1px;

  background:
    var(--m-blue);

}


.mcaas-glow {

  position: absolute;

  width: 650px;

  height: 650px;

  border-radius: 50%;

  filter:
    blur(140px);

  pointer-events: none;

}


.mcaas-glow-a {

  left: -420px;

  bottom: -320px;

  background:
    rgba(25,116,183,.22);

}


.mcaas-glow-b {

  right: -430px;

  top: -250px;

  background:
    rgba(98,75,206,.15);

}


.mcaas-glow-c {

  right: -430px;

  top: -40px;

  background:
    rgba(87,72,195,.10);

}


.mcaas-glow-d {

  left: -420px;

  top: -100px;

  background:
    rgba(25,114,174,.12);

}



/* ==========================================================
   HERO
========================================================== */

.mcaas-hero {

  position: relative;

  min-height: 780px;

  padding:
    155px 0 90px;

  display: flex;

  align-items: center;

  overflow: hidden;

  background:

    radial-gradient(
      circle at 7% 18%,
      rgba(31,108,168,.20),
      transparent 34%
    ),

    radial-gradient(
      circle at 90% 12%,
      rgba(94,77,197,.15),
      transparent 33%
    ),

    linear-gradient(
      135deg,
      #071421,
      #030608 53%,
      #091421
    );

}


.mcaas-hero-grid {

  position: absolute;

  inset: 0;

  opacity: .04;

  background-image:

    linear-gradient(
      rgba(101,200,250,.12) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(101,200,250,.12) 1px,
      transparent 1px
    );

  background-size:
    72px 72px;

}


.mcaas-hero-layout {

  position: relative;

  z-index: 3;

  display: grid;

  grid-template-columns:
    .91fr 1.09fr;

  gap: 68px;

  align-items: center;

}


.mcaas-hero-copy h1 {

  max-width: 770px;

  margin:
    20px 0 0;

  color:
    var(--m-white);

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    clamp(
      50px,
      5vw,
      72px
    );

  line-height: 1;

  letter-spacing:
    -4.2px;

}


.mcaas-hero-copy h1 span {

  display: block;

  margin-top: 5px;

  color: transparent;

  background:

    linear-gradient(
      90deg,
      var(--m-blue),
      #73b9ff 48%,
      var(--m-violet)
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

}


.mcaas-hero-lead {

  max-width: 660px;

  margin:
    22px 0 0;

  color:
    #a4b5c3;

  font-size: 15px;

  line-height: 1.78;

}


.mcaas-hero-proof {

  margin-top: 24px;

  display: flex;

  flex-wrap: wrap;

  gap:
    11px 20px;

}


.mcaas-hero-proof span {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  color:
    #8da1b2;

  font-size: 10px;

}


.mcaas-hero-proof svg {

  width: 14px;

  color:
    var(--m-teal);

}


.mcaas-actions {

  margin-top: 29px;

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

}


.mcaas-primary,
.mcaas-secondary {

  min-height: 51px;

  padding:
    0 20px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  border-radius: 10px;

  text-decoration: none;

  font-size: 12px;

  font-weight: 700;

  transition:
    transform .25s ease,
    border-color .25s ease;

}


.mcaas-primary {

  color:
    #06131e;

  background:

    linear-gradient(
      135deg,
      #afe5ff,
      #65c8fa
    );

}


.mcaas-secondary {

  color:
    #e0e9ef;

  border:
    1px solid
    var(--m-border);

  background:
    rgba(255,255,255,.015);

}


.mcaas-primary:hover,
.mcaas-secondary:hover {

  transform:
    translateY(-3px);

}


.mcaas-primary svg,
.mcaas-secondary svg {

  width: 14px;

}



/* ==========================================================
   HERO DASHBOARD
========================================================== */

.mcaas-hero-dashboard {

  position: relative;

}


.mcaas-dashboard-card {

  position: relative;

  padding: 27px;

  overflow: hidden;

  border-radius: 22px;

  border:
    1px solid
    rgba(101,200,250,.17);

  background:

    radial-gradient(
      circle at 83% 5%,
      rgba(87,75,192,.12),
      transparent 31%
    ),

    linear-gradient(
      145deg,
      #14243b,
      #09131f
    );

  box-shadow:
    0 45px 105px
    rgba(0,0,0,.4);

  transform-style:
    preserve-3d;

  transition:
    transform .18s ease;

}


.mcaas-dashboard-card::before {

  content: "";

  position: absolute;

  top: 0;

  left: 13%;

  width: 44%;

  height: 1px;

  background:

    linear-gradient(
      90deg,
      transparent,
      var(--m-blue),
      var(--m-violet),
      transparent
    );

}


.mcaas-dashboard-head {

  padding-bottom: 18px;

  display: flex;

  justify-content: space-between;

  border-bottom:
    1px solid
    var(--m-border);

}


.mcaas-dashboard-head small {

  color:
    var(--m-blue);

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 1.4px;

}


.mcaas-dashboard-head h3 {

  margin:
    6px 0 0;

  color:
    #edf3f7;

  font-size: 22px;

}


.mcaas-live {

  display: flex;

  align-items: center;

  gap: 6px;

  color:
    var(--m-teal);

  font-size: 8px;

}


.mcaas-live i {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background:
    var(--m-teal);

  animation:
    mcaasPulse 1.8s infinite;

}


@keyframes mcaasPulse {

  70% {

    box-shadow:
      0 0 0 10px
      rgba(93,217,200,0);

  }

}


/* METRICS */

.mcaas-dashboard-metrics {

  margin-top: 16px;

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 8px;

}


.mcaas-dashboard-metrics article {

  padding: 14px;

  border-radius: 10px;

  border:
    1px solid
    rgba(128,170,207,.08);

  background:
    rgba(255,255,255,.014);

}


.mcaas-dashboard-metrics small {

  color:
    #627a8f;

  font-size: 6px;

  letter-spacing: .8px;

}


.mcaas-dashboard-metrics strong {

  display: block;

  margin-top: 7px;

  color:
    #e8eff4;

  font-size: 14px;

}


.mcaas-dashboard-metrics span {

  display: block;

  margin-top: 4px;

  color:
    #668095;

  font-size: 7px;

}



/* FLOW */

.mcaas-growth-flow {

  position: relative;

  min-height: 190px;

  margin-top: 18px;

  display: grid;

  grid-template-columns:
    repeat(6,1fr);

  gap: 8px;

  align-items: center;

}


.mcaas-flow-line {

  position: absolute;

  left: 7%;

  right: 7%;

  top: 76px;

  height: 1px;

  background:

    linear-gradient(
      90deg,
      rgba(101,200,250,.15),
      rgba(140,137,255,.26),
      rgba(93,217,200,.15)
    );

}


.mcaas-growth-flow > div:not(.mcaas-flow-line) {

  position: relative;

  z-index: 2;

  text-align: center;

}


.mcaas-growth-flow
> div:not(.mcaas-flow-line)
> span {

  width: 49px;

  height: 49px;

  margin: auto;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color:
    var(--m-blue);

  border:
    1px solid
    rgba(101,200,250,.14);

  background:
    #0d1e30;

}


.mcaas-growth-flow
> div.active
> span {

  color:
    var(--m-teal);

  border-color:
    rgba(93,217,200,.28);

  background:
    rgba(93,217,200,.06);

}


.mcaas-growth-flow svg {

  width: 17px;

}


.mcaas-growth-flow small {

  display: block;

  margin-top: 10px;

  color:
    #6e8497;

  font-size: 6px;

  font-weight: 700;

  letter-spacing: .7px;

}


/* ACTIVITY */

.mcaas-dashboard-activity {

  display: grid;

  gap: 7px;

}


.mcaas-dashboard-activity > div {

  min-height: 61px;

  padding:
    10px 12px;

  display: grid;

  grid-template-columns:
    37px 1fr 18px;

  gap: 10px;

  align-items: center;

  border-radius: 10px;

  border:
    1px solid
    rgba(128,170,207,.07);

  background:
    rgba(255,255,255,.012);

}


.mcaas-dashboard-activity
> div
> span {

  width: 37px;

  height: 37px;

  display: grid;

  place-items: center;

  border-radius: 9px;

  color:
    var(--m-blue);

  background:
    rgba(101,200,250,.045);

}


.mcaas-dashboard-activity
> div
> span svg {

  width: 16px;

}


.mcaas-dashboard-activity strong {

  color:
    #ccd7df;

  font-size: 9px;

}


.mcaas-dashboard-activity small {

  display: block;

  margin-top: 3px;

  color:
    #62798e;

  font-size: 7px;

}


.mcaas-dashboard-activity
> div
> svg {

  width: 13px;

  color:
    var(--m-teal);

}


.mcaas-dashboard-bottom {

  margin-top: 16px;

  padding-top: 15px;

  display: flex;

  flex-wrap: wrap;

  gap: 16px;

  border-top:
    1px solid
    var(--m-border);

}


.mcaas-dashboard-bottom span {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  color:
    #6f8497;

  font-size: 7px;

}


.mcaas-dashboard-bottom svg {

  width: 11px;

  color:
    var(--m-teal);

}



/* FLOAT */

.mcaas-floating-chip {

  position: absolute;

  z-index: 8;

  padding:
    8px 12px;

  display: flex;

  align-items: center;

  gap: 7px;

  border-radius: 100px;

  color:
    #8edaff;

  border:
    1px solid
    rgba(101,200,250,.16);

  background:
    rgba(5,12,20,.95);

  font-size: 8px;

  animation:
    mcaasFloat 4s ease-in-out infinite;

}


.mcaas-floating-chip svg {

  width: 13px;

}


.mcaas-floating-chip.chip-one {

  left: -24px;

  bottom: 86px;

}


.mcaas-floating-chip.chip-two {

  right: -18px;

  top: 95px;

  animation-delay: 1s;

}


@keyframes mcaasFloat {

  50% {

    transform:
      translateY(-7px);

  }

}



/* ==========================================================
   STRIP
========================================================== */

.mcaas-strip {

  border-top:
    1px solid
    rgba(128,170,207,.07);

  border-bottom:
    1px solid
    rgba(128,170,207,.07);

  background:

    linear-gradient(
      90deg,
      #05090d,
      #0b1827,
      #05090d
    );

}


.mcaas-strip-grid {

  display: grid;

  grid-template-columns:
    repeat(4,1fr);

}


.mcaas-strip-grid article {

  min-height: 110px;

  padding:
    22px 24px;

  display: grid;

  grid-template-columns:
    38px 1fr;

  gap: 13px;

  align-items: center;

  border-right:
    1px solid
    rgba(128,170,207,.08);

}


.mcaas-strip-grid article:last-child {

  border-right: 0;

}


.mcaas-strip-grid svg {

  width: 36px;

  height: 36px;

  padding: 9px;

  border-radius: 9px;

  color:
    var(--m-blue);

  border:
    1px solid
    rgba(101,200,250,.13);

}


.mcaas-strip-grid strong {

  display: block;

  color:
    #e8eff4;

  font-size: 12px;

}


.mcaas-strip-grid span {

  display: block;

  margin-top: 4px;

  color:
    #71879a;

  font-size: 8px;

}



/* ==========================================================
   SECTION HEADINGS
========================================================== */

.mcaas-heading-grid {

  display: grid;

  grid-template-columns:
    1.05fr .95fr;

  gap: 70px;

  align-items: end;

  margin-bottom: 47px;

}


.mcaas-heading-grid h2,
.mcaas-center-heading h2,
.mcaas-ai-copy h2,
.mcaas-revenue-copy h2,
.mcaas-faq-intro h2 {

  margin:
    14px 0 0;

  color:
    var(--m-white);

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    clamp(
      37px,
      4vw,
      54px
    );

  line-height: 1.05;

  letter-spacing:
    -2.4px;

}


.mcaas-heading-grid h2 span,
.mcaas-center-heading h2 span,
.mcaas-ai-copy h2 span,
.mcaas-revenue-copy h2 span,
.mcaas-faq-intro h2 span {

  display: block;

  color: transparent;

  background:

    linear-gradient(
      90deg,
      var(--m-blue),
      var(--m-violet)
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

}


.mcaas-heading-grid > p {

  max-width: 570px;

  margin: 0;

  color:
    var(--m-text);

  font-size: 14px;

  line-height: 1.78;

}


.mcaas-center-heading {

  max-width: 850px;

  margin:
    0 auto 47px;

  text-align: center;

}


.mcaas-center-heading
.mcaas-eyebrow {

  justify-content: center;

}


.mcaas-center-heading > p {

  max-width: 690px;

  margin:
    17px auto 0;

  color:
    var(--m-text);

  font-size: 13px;

  line-height: 1.76;

}



/* ==========================================================
   GAP
========================================================== */

.mcaas-gap {

  background:
    linear-gradient(
      180deg,
      #07121e,
      #05090d
    );

}


.mcaas-gap-grid {

  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  overflow: hidden;

  border-radius: 18px;

  border:
    1px solid
    var(--m-border);

}


.mcaas-gap-grid article {

  min-height: 270px;

  padding: 25px;

  border-right:
    1px solid
    var(--m-border);

  background:

    linear-gradient(
      145deg,
      #101c2c,
      #080f16
    );

}


.mcaas-gap-grid
article:last-child {

  border-right: 0;

}


.mcaas-gap-grid
article > span {

  float: right;

  color:
    #50687a;

  font-size: 8px;

}


.mcaas-gap-grid
article > svg {

  width: 44px;

  height: 44px;

  padding: 11px;

  border-radius: 10px;

  color:
    var(--m-blue);

  border:
    1px solid
    rgba(101,200,250,.13);

}


.mcaas-gap-grid h3 {

  margin:
    52px 0 0;

  color:
    #e8eef3;

  font-size: 17px;

  line-height: 1.35;

}


.mcaas-gap-grid p {

  margin:
    9px 0 0;

  color:
    #7d91a3;

  font-size: 10px;

  line-height: 1.65;

}



/* ==========================================================
   ENGINE
========================================================== */

.mcaas-engine {

  background:
    #05090d;

}


.mcaas-engine-shell {

  position: relative;

  z-index: 2;

  padding: 25px;

  border-radius: 18px;

  border:
    1px solid
    var(--m-border);

  background:

    linear-gradient(
      145deg,
      #111f31,
      #07101a
    );

}


.mcaas-engine-flow {

  display: grid;

  grid-template-columns:
    1fr auto
    1fr auto
    1fr auto
    1fr auto
    1fr auto
    1fr;

  gap: 10px;

  align-items: center;

}


.mcaas-engine-flow article {

  min-height: 195px;

  padding: 19px;

  border-radius: 13px;

  border:
    1px solid
    rgba(128,170,207,.09);

  background:
    rgba(255,255,255,.012);

}


.mcaas-engine-flow
article.active {

  border-color:
    rgba(93,217,200,.24);

  background:
    rgba(93,217,200,.035);

}


.mcaas-engine-flow
article > span {

  color:
    #50687a;

  font-size: 7px;

}


.mcaas-engine-flow
article > svg {

  display: block;

  width: 38px;

  height: 38px;

  padding: 9px;

  margin-top: 23px;

  border-radius: 9px;

  color:
    var(--m-blue);

  border:
    1px solid
    rgba(101,200,250,.13);

}


.mcaas-engine-flow
article.active
> svg {

  color:
    var(--m-teal);

}


.mcaas-engine-flow strong {

  display: block;

  margin-top: 22px;

  color:
    #e6edf2;

  font-size: 12px;

}


.mcaas-engine-flow p {

  margin:
    6px 0 0;

  color:
    #71879a;

  font-size: 8px;

  line-height: 1.55;

}


.mcaas-arrow {

  width: 13px;

  color:
    #46677e;

}



/* ==========================================================
   MARKETING SERVICES
========================================================== */

.mcaas-services {

  background:

    linear-gradient(
      180deg,
      #07121e,
      #05090d
    );

}


.mcaas-service-columns {

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 14px;

}


.mcaas-service-block {

  min-height: 400px;

  padding: 28px;

  border-radius: 17px;

  border:
    1px solid
    var(--m-border);

  background:

    linear-gradient(
      145deg,
      #111e2e,
      #080f16
    );

  transition:
    transform .3s ease,
    border-color .3s ease;

}


.mcaas-service-block:hover {

  transform:
    translateY(-6px);

  border-color:
    rgba(101,200,250,.24);

}


.mcaas-service-head {

  display: flex;

  gap: 13px;

  align-items: center;

  padding-bottom: 22px;

  border-bottom:
    1px solid
    var(--m-border);

}


.mcaas-service-head > span {

  width: 45px;

  height: 45px;

  display: grid;

  place-items: center;

  border-radius: 10px;

  color:
    var(--m-blue);

  background:
    rgba(101,200,250,.045);

}


.mcaas-service-head svg {

  width: 19px;

}


.mcaas-service-head small {

  color:
    #5d7588;

  font-size: 7px;

}


.mcaas-service-head h3 {

  margin-top: 4px;

  color:
    #e8eff4;

  font-size: 17px;

}


.mcaas-service-block ul {

  margin:
    22px 0 0;

  padding: 0;

  list-style: none;

}


.mcaas-service-block li {

  position: relative;

  padding:
    12px 0 12px 25px;

  color:
    #8498a9;

  border-bottom:
    1px solid
    rgba(128,170,207,.06);

  font-size: 11px;

}


.mcaas-service-block
li::before {

  content: "✓";

  position: absolute;

  left: 0;

  color:
    var(--m-teal);

}



/* ==========================================================
   CREATIVE
========================================================== */

.mcaas-creative {

  background:
    #05090d;

}


.mcaas-creative-grid {

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 14px;

}


.mcaas-creative-card {

  min-height: 390px;

  padding: 28px;

  border-radius: 17px;

  border:
    1px solid
    var(--m-border);

  background:

    linear-gradient(
      145deg,
      #101c2b,
      #080f16
    );

}


.mcaas-creative-card.featured {

  border-color:
    rgba(140,137,255,.24);

  background:

    radial-gradient(
      circle at 80% 0%,
      rgba(140,137,255,.08),
      transparent 38%
    ),

    linear-gradient(
      145deg,
      #131e32,
      #090f18
    );

}


.mcaas-creative-icon {

  width: 47px;

  height: 47px;

  display: grid;

  place-items: center;

  border-radius: 11px;

  color:
    var(--m-blue);

  border:
    1px solid
    rgba(101,200,250,.13);

}


.mcaas-creative-icon svg {

  width: 20px;

}


.mcaas-creative-card > small {

  display: block;

  margin-top: 28px;

  color:
    var(--m-blue);

  font-size: 7px;

  font-weight: 700;

  letter-spacing: 1px;

}


.mcaas-creative-card h3 {

  margin:
    8px 0 0;

  color:
    #edf3f7;

  font-size: 18px;

  line-height: 1.4;

}


.mcaas-creative-card > div:last-child {

  margin-top: 28px;

  display: flex;

  flex-wrap: wrap;

  gap: 7px;

}


.mcaas-creative-card
> div:last-child
span {

  padding:
    7px 10px;

  border-radius: 100px;

  color:
    #788fa2;

  border:
    1px solid
    rgba(128,170,207,.09);

  font-size: 8px;

}



/* ==========================================================
   AI
========================================================== */

.mcaas-ai {

  background:

    linear-gradient(
      180deg,
      #07121e,
      #05090d
    );

}


.mcaas-ai-shell {

  position: relative;

  z-index: 2;

  min-height: 520px;

  padding: 46px;

  display: grid;

  grid-template-columns:
    .9fr 1.1fr;

  gap: 65px;

  align-items: center;

  border-radius: 21px;

  border:
    1px solid
    rgba(101,200,250,.15);

  background:

    linear-gradient(
      145deg,
      #14243b,
      #09131f
    );

}


.mcaas-ai-copy p {

  margin:
    17px 0 0;

  color:
    var(--m-text);

  font-size: 14px;

  line-height: 1.76;

}


.mcaas-ai-list {

  margin-top: 26px;

  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 8px;

}


.mcaas-ai-list span {

  min-height: 44px;

  padding:
    0 11px;

  display: flex;

  align-items: center;

  gap: 8px;

  border-radius: 9px;

  color:
    #8399aa;

  border:
    1px solid
    rgba(128,170,207,.08);

  background:
    rgba(255,255,255,.012);

  font-size: 9px;

}


.mcaas-ai-list svg {

  width: 14px;

  color:
    var(--m-teal);

}


.mcaas-ai-visual {

  position: relative;

  min-height: 400px;

  display: grid;

  place-items: center;

}


.mcaas-ai-orbit {

  position: absolute;

  left: 50%;

  top: 50%;

  transform:
    translate(-50%,-50%);

  border-radius: 50%;

  border:
    1px solid
    rgba(101,200,250,.12);

}


.mcaas-ai-orbit.orbit-1 {

  width: 230px;

  height: 230px;

}


.mcaas-ai-orbit.orbit-2 {

  width: 340px;

  height: 340px;

}


.mcaas-ai-core {

  position: relative;

  z-index: 4;

  width: 130px;

  height: 130px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  color:
    var(--m-blue);

  border:
    1px solid
    rgba(101,200,250,.24);

  background:

    linear-gradient(
      145deg,
      #103b63,
      #081b2f
    );

}


.mcaas-ai-core svg {

  width: 32px;

}


.mcaas-ai-core small {

  margin-top: 7px;

  color:
    #6d9aba;

  font-size: 7px;

}


.mcaas-ai-core strong {

  margin-top: 3px;

  color:
    #edf4f8;

  font-size: 11px;

}


.mcaas-ai-node {

  position: absolute;

  z-index: 5;

  padding:
    7px 10px;

  border-radius: 100px;

  color:
    #84a2b6;

  border:
    1px solid
    rgba(101,200,250,.12);

  background:
    #091725;

  font-size: 7px;

}


.mcaas-ai-node.node-one {

  top: 10%;

  left: 42%;

}


.mcaas-ai-node.node-two {

  top: 34%;

  right: 4%;

}


.mcaas-ai-node.node-three {

  right: 8%;

  bottom: 16%;

}


.mcaas-ai-node.node-four {

  left: 9%;

  bottom: 16%;

}


.mcaas-ai-node.node-five {

  left: 3%;

  top: 34%;

}



/* ==========================================================
   COMPARISON
========================================================== */

.mcaas-compare {

  background:
    #05090d;

}


.mcaas-compare-shell {

  display: grid;

  grid-template-columns:
    1fr 60px 1fr;

  gap: 15px;

  align-items: center;

}


.mcaas-compare-side {

  min-height: 465px;

  padding: 31px;

  border-radius: 18px;

  border:
    1px solid
    var(--m-border);

  background:

    linear-gradient(
      145deg,
      #101c2b,
      #080f16
    );

}


.mcaas-compare-side
> small {

  color:
    #637c8f;

  font-size: 7px;

  font-weight: 700;

  letter-spacing: 1px;

}


.mcaas-compare-side h3 {

  max-width: 420px;

  margin:
    12px 0 0;

  color:
    #e8eff4;

  font-size: 22px;

  line-height: 1.35;

}


.mcaas-role-stack {

  margin-top: 30px;

  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 8px;

}


.mcaas-role-stack span {

  min-height: 52px;

  padding:
    0 12px;

  display: flex;

  align-items: center;

  border-radius: 8px;

  color:
    #8497a8;

  border:
    1px solid
    rgba(128,170,207,.08);

  background:
    rgba(255,255,255,.012);

  font-size: 9px;

}


.mcaas-model-note {

  margin-top: 23px;

  padding: 15px;

  display: flex;

  gap: 10px;

  align-items: center;

  border-radius: 10px;

  background:
    rgba(255,255,255,.012);

}


.mcaas-model-note svg {

  width: 18px;

  color:
    #758da0;

}


.mcaas-model-note p {

  margin: 0;

  color:
    #73889a;

  font-size: 9px;

}


.mcaas-vs {

  width: 50px;

  height: 50px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color:
    var(--m-blue);

  border:
    1px solid
    rgba(101,200,250,.18);

  background:
    #0b1927;

  font-size: 9px;

  font-weight: 700;

}


.mcaas-compare-side.mcaas-model {

  border-color:
    rgba(101,200,250,.23);

  background:

    radial-gradient(
      circle at 85% 0%,
      rgba(90,78,198,.08),
      transparent 35%
    ),

    linear-gradient(
      145deg,
      #132136,
      #08101a
    );

}


.mcaas-model-core {

  margin-top: 30px;

  padding: 19px;

  display: flex;

  gap: 13px;

  align-items: center;

  border-radius: 12px;

  border:
    1px solid
    rgba(101,200,250,.13);

  background:
    rgba(101,200,250,.03);

}


.mcaas-model-core > span {

  width: 47px;

  height: 47px;

  display: grid;

  place-items: center;

  border-radius: 10px;

  color:
    var(--m-blue);

  background:
    rgba(101,200,250,.05);

}


.mcaas-model-core svg {

  width: 20px;

}


.mcaas-model-core small {

  display: block;

  color:
    var(--m-blue);

  font-size: 6px;

}


.mcaas-model-core strong {

  display: block;

  margin-top: 5px;

  color:
    #e6edf2;

  font-size: 12px;

}


.mcaas-model ul {

  margin:
    24px 0 0;

  padding: 0;

  list-style: none;

}


.mcaas-model li {

  position: relative;

  padding:
    10px 0 10px 24px;

  color:
    #8499aa;

  border-bottom:
    1px solid
    rgba(128,170,207,.06);

  font-size: 10px;

}


.mcaas-model
li::before {

  content: "✓";

  position: absolute;

  left: 0;

  color:
    var(--m-teal);

}



/* ==========================================================
   PROCESS
========================================================== */

.mcaas-process {

  background:

    linear-gradient(
      180deg,
      #07121e,
      #05090d
    );

}


.mcaas-process-grid {

  display: grid;

  grid-template-columns:
    repeat(6,1fr);

  gap: 10px;

}


.mcaas-process-grid article {

  min-height: 230px;

  padding: 21px;

  border-radius: 14px;

  border:
    1px solid
    var(--m-border);

  background:

    linear-gradient(
      145deg,
      #101c2c,
      #080f16
    );

}


.mcaas-process-grid
article > span {

  color:
    #52697b;

  font-size: 7px;

}


.mcaas-process-grid
article > svg {

  display: block;

  width: 41px;

  height: 41px;

  padding: 10px;

  margin-top: 25px;

  border-radius: 10px;

  color:
    var(--m-blue);

  border:
    1px solid
    rgba(101,200,250,.13);

}


.mcaas-process-grid h3 {

  margin:
    28px 0 0;

  color:
    #e5edf2;

  font-size: 14px;

}


.mcaas-process-grid p {

  margin:
    7px 0 0;

  color:
    #74899b;

  font-size: 8px;

  line-height: 1.6;

}



/* ==========================================================
   BENEFITS
========================================================== */

.mcaas-benefits {

  background:
    #05090d;

}


.mcaas-benefit-grid {

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 13px;

}


.mcaas-benefit-grid article {

  min-height: 220px;

  padding: 25px;

  border-radius: 15px;

  border:
    1px solid
    var(--m-border);

  background:

    linear-gradient(
      145deg,
      #101c2c,
      #080f16
    );

}


.mcaas-benefit-grid
article > svg {

  width: 42px;

  height: 42px;

  padding: 10px;

  border-radius: 10px;

  color:
    var(--m-blue);

  border:
    1px solid
    rgba(101,200,250,.13);

}


.mcaas-benefit-grid h3 {

  margin:
    34px 0 0;

  color:
    #e6edf2;

  font-size: 16px;

}


.mcaas-benefit-grid p {

  margin:
    8px 0 0;

  color:
    #7b90a1;

  font-size: 10px;

  line-height: 1.65;

}



/* ==========================================================
   REVENUE MODEL
========================================================== */

.mcaas-revenue-model {

  background:

    linear-gradient(
      180deg,
      #07121e,
      #05090d
    );

}


.mcaas-revenue-shell {

  padding: 43px;

  display: grid;

  grid-template-columns:
    .75fr 1.25fr;

  gap: 55px;

  align-items: center;

  border-radius: 21px;

  border:
    1px solid
    rgba(101,200,250,.14);

  background:

    linear-gradient(
      145deg,
      #132238,
      #08111b
    );

}


.mcaas-revenue-copy p {

  margin:
    17px 0 0;

  color:
    var(--m-text);

  font-size: 13px;

  line-height: 1.75;

}


.mcaas-revenue-flow {

  display: grid;

  grid-template-columns:
    1fr auto
    1fr auto
    1fr auto
    1fr;

  gap: 7px;

  align-items: center;

}


.mcaas-revenue-flow article {

  min-height: 145px;

  padding: 15px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  border-radius: 12px;

  border:
    1px solid
    var(--m-border);

  background:
    rgba(255,255,255,.012);

}


.mcaas-revenue-flow
article.featured {

  border-color:
    rgba(140,137,255,.24);

  background:
    rgba(140,137,255,.035);

}


.mcaas-revenue-flow
article.result {

  border-color:
    rgba(93,217,200,.24);

  background:
    rgba(93,217,200,.035);

}


.mcaas-revenue-flow
article > span {

  color:
    #668095;

  font-size: 6px;

  letter-spacing: .7px;

}


.mcaas-revenue-flow
article > svg {

  width: 25px;

  margin-top: 14px;

  color:
    var(--m-blue);

}


.mcaas-revenue-flow
article.result
> svg {

  color:
    var(--m-teal);

}


.mcaas-revenue-flow strong {

  margin-top: 11px;

  color:
    #dbe5ec;

  font-size: 9px;

  line-height: 1.4;

}


.mcaas-flow-plus {

  color:
    #577087;

  font-size: 15px;

}


.mcaas-revenue-arrow {

  width: 15px;

  color:
    #4b6f87;

}



/* ==========================================================
   FAQ
========================================================== */

.mcaas-faq {

  background:
    #05090d;

}


.mcaas-faq-layout {

  display: grid;

  grid-template-columns:
    .72fr 1.28fr;

  gap: 70px;

}


.mcaas-faq-intro > p {

  margin:
    17px 0 0;

  color:
    var(--m-text);

  font-size: 13px;

  line-height: 1.75;

}


.mcaas-faq-list {

  display: grid;

  gap: 9px;

}


.mcaas-faq-item {

  overflow: hidden;

  border-radius: 13px;

  border:
    1px solid
    var(--m-border);

  background:
    #0d1928;

}


.mcaas-faq-item button {

  width: 100%;

  min-height: 72px;

  padding:
    0 22px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border: 0;

  color:
    #d5dfe7;

  background:
    transparent;

  font: inherit;

  font-size: 13px;

  font-weight: 600;

  text-align: left;

  cursor: pointer;

}


.mcaas-faq-item
button svg {

  width: 17px;

  color:
    #70879a;

  transition:
    transform .25s ease;

}


.mcaas-faq-item.active
button svg {

  transform:
    rotate(45deg);

}


.mcaas-faq-answer {

  max-height: 0;

  overflow: hidden;

  transition:
    max-height .35s ease;

}


.mcaas-faq-answer p {

  margin: 0;

  padding:
    0 22px 22px;

  color:
    #8094a6;

  font-size: 10px;

  line-height: 1.75;

}



/* ==========================================================
   FINAL CTA
========================================================== */

.mcaas-final {

  padding:
    90px 0;

  background:
    #05090d;

}


.mcaas-final-shell {

  min-height: 410px;

  padding: 50px;

  display: grid;

  grid-template-columns:
    1fr .8fr;

  gap: 40px;

  align-items: center;

  overflow: hidden;

  border-radius: 23px;

  background:

    radial-gradient(
      circle at 82% 40%,
      rgba(91,82,210,.22),
      transparent 30%
    ),

    linear-gradient(
      135deg,
      #bee6ff,
      #94d2fa 50%,
      #a3a8ff
    );

}


.mcaas-final-shell
> div:first-child
> small {

  color:
    #27557d;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 1.2px;

}


.mcaas-final-shell h2 {

  margin:
    13px 0 0;

  color:
    #06182b;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    clamp(
      38px,
      4vw,
      54px
    );

  line-height: 1.04;

  letter-spacing:
    -2.4px;

}


.mcaas-final-shell h2 span {

  display: block;

  color:
    #245d91;

}


.mcaas-final-shell p {

  max-width: 570px;

  margin:
    17px 0 0;

  color:
    #315f83;

  font-size: 12px;

  line-height: 1.75;

}


.mcaas-final-btn {

  min-height: 49px;

  margin-top: 26px;

  padding:
    0 19px;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  border-radius: 9px;

  color:
    #eff8fc;

  background:
    #07192d;

  text-decoration: none;

  font-size: 10px;

  font-weight: 700;

}


.mcaas-final-btn svg {

  width: 13px;

}


.mcaas-final-visual {

  position: relative;

  min-height: 300px;

  display: grid;

  place-items: center;

}


.mcaas-final-ring {

  position: absolute;

  left: 50%;

  top: 50%;

  transform:
    translate(-50%,-50%);

  border-radius: 50%;

  border:
    1px solid
    rgba(20,62,99,.15);

}


.mcaas-final-ring.ring-one {

  width: 190px;

  height: 190px;

}


.mcaas-final-ring.ring-two {

  width: 280px;

  height: 280px;

}


.mcaas-final-core {

  position: relative;

  z-index: 3;

  width: 120px;

  height: 120px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  color:
    #dff4ff;

  background:
    #0b2745;

}


.mcaas-final-core svg {

  width: 28px;

}


.mcaas-final-core strong {

  margin-top: 8px;

  font-size: 11px;

}


.mcaas-final-core small {

  margin-top: 3px;

  color:
    #8cb7d3;

  font-size: 6px;

}


.mcaas-final-node {

  position: absolute;

  z-index: 4;

  padding:
    7px 10px;

  border-radius: 100px;

  color:
    #17486f;

  border:
    1px solid
    rgba(20,62,99,.13);

  background:
    rgba(244,250,255,.72);

  font-size: 7px;

}


.mcaas-final-node.node-1 {

  left: 9%;

  top: 28%;

}


.mcaas-final-node.node-2 {

  right: 9%;

  top: 28%;

}


.mcaas-final-node.node-3 {

  left: 13%;

  bottom: 20%;

}


.mcaas-final-node.node-4 {

  right: 14%;

  bottom: 20%;

}



/* ==========================================================
   REVEAL
========================================================== */

[data-mcaas-reveal] {

  opacity: 0;

  transform:
    translateY(24px);

  transition:

    opacity .7s ease,
    transform .7s ease;

}


[data-mcaas-reveal="left"] {

  transform:
    translateX(-28px);

}


[data-mcaas-reveal="right"] {

  transform:
    translateX(28px);

}


[data-mcaas-reveal].mcaas-visible {

  opacity: 1;

  transform:
    translate(0,0);

}



/* ==========================================================
   TABLET
========================================================== */

@media(max-width:1100px) {

  .mcaas-hero-layout,
  .mcaas-heading-grid,
  .mcaas-ai-shell,
  .mcaas-revenue-shell,
  .mcaas-faq-layout {

    grid-template-columns:
      1fr;

  }


  .mcaas-gap-grid {

    grid-template-columns:
      repeat(2,1fr);

  }


  .mcaas-gap-grid article {

    border-bottom:
      1px solid
      var(--m-border);

  }


  .mcaas-engine-flow {

    grid-template-columns:
      repeat(3,1fr);

  }


  .mcaas-arrow {

    display: none;

  }


  .mcaas-process-grid {

    grid-template-columns:
      repeat(3,1fr);

  }


  .mcaas-benefit-grid {

    grid-template-columns:
      repeat(2,1fr);

  }


  .mcaas-revenue-flow {

    grid-template-columns:
      repeat(4,1fr);

  }


  .mcaas-flow-plus,
  .mcaas-revenue-arrow {

    display: none;

  }


  .mcaas-final-shell {

    grid-template-columns:
      1fr;

  }

}



/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:768px) {

  .mcaas-section {

    padding:
      72px 0;

  }


  .mcaas-hero {

    min-height: auto;

    padding:
      125px 0 72px;

  }


  .mcaas-hero-layout {

    gap: 42px;

  }


  .mcaas-hero-copy h1 {

    font-size:
      clamp(
        41px,
        11vw,
        55px
      );

    letter-spacing:
      -3px;

  }


  .mcaas-actions {

    display: grid;

    grid-template-columns:
      1fr;

  }


  .mcaas-primary,
  .mcaas-secondary {

    width: 100%;

  }


  .mcaas-dashboard-card {

    padding: 18px;

  }


  .mcaas-dashboard-metrics {

    grid-template-columns:
      1fr;

  }


  .mcaas-growth-flow {

    grid-template-columns:
      repeat(3,1fr);

    row-gap: 24px;

  }


  .mcaas-flow-line {

    display: none;

  }


  .mcaas-floating-chip {

    display: none;

  }


  .mcaas-strip-grid {

    grid-template-columns:
      repeat(2,1fr);

  }


  .mcaas-gap-grid,
  .mcaas-service-columns,
  .mcaas-creative-grid,
  .mcaas-benefit-grid {

    grid-template-columns:
      1fr;

  }


  .mcaas-gap-grid article {

    border-right: 0;

  }


  .mcaas-engine-flow,
  .mcaas-process-grid {

    grid-template-columns:
      1fr;

  }


  .mcaas-ai-shell {

    padding:
      26px 20px;

  }


  .mcaas-ai-list {

    grid-template-columns:
      1fr;

  }


  .mcaas-compare-shell {

    grid-template-columns:
      1fr;

  }


  .mcaas-vs {

    margin: auto;

  }


  .mcaas-revenue-flow {

    grid-template-columns:
      1fr;

  }


  .mcaas-final-shell {

    padding:
      35px 22px;

  }

}



/* ==========================================================
   SMALL MOBILE
========================================================== */

@media(max-width:480px) {

  .mcaas-strip-grid {

    grid-template-columns:
      1fr;

  }


  .mcaas-strip-grid article {

    border-right: 0;

    border-bottom:
      1px solid
      rgba(128,170,207,.08);

  }


  .mcaas-growth-flow {

    grid-template-columns:
      repeat(2,1fr);

  }


  .mcaas-role-stack {

    grid-template-columns:
      1fr;

  }


  .mcaas-ai-visual {

    min-height: 330px;

    transform:
      scale(.9);

  }


  .mcaas-final-visual {

    min-height:
      275px;

  }

}