/*
 * v1.29.12 — FirstM neutral surface pass
 * Large custom canvases use a clean near-white neutral instead of warm beige/cream.
 * Accent chips, buttons, cards and brand orange are intentionally left untouched.
 */
:root{
  --firstm-neutral-canvas:#f8f8f8;
  --firstm-neutral-canvas-soft:#fafafa;
  --firstm-neutral-paper:#ffffff;
  --firstm-neutral-line:#eeeeee;
}

/* Homepage additions */
.firstm-home-services{
  background:linear-gradient(135deg,#fff 0%,var(--firstm-neutral-canvas) 58%,#fff 100%)!important;
}

/* About page — remove the warm/cream cast from full-width canvases only. */
.firstm-about-page .fmap-timeline-section,
.firstm-about-page .fmap-team-section,
.firstm-about-page .fmap-team-bg-brand-grid,
.firstm-about-page .fmap-team-bg-soft-glow{
  background:linear-gradient(180deg,var(--firstm-neutral-canvas-soft) 0%,#fff 52%,var(--firstm-neutral-canvas) 100%)!important;
}
.firstm-about-page .fmap-team-bg-split,
.firstm-about-page[dir="rtl"] .fmap-team-bg-split{
  background:linear-gradient(180deg,#fff 0 58%,var(--firstm-neutral-canvas) 58% 100%)!important;
}

/* Blog / editorial hero — white with a barely visible charcoal tint. */
.firstm-blog-slider-shell{
  background:linear-gradient(118deg,var(--firstm-neutral-canvas) 0%,#fff 46%,#f7f7f7 100%)!important;
}

/* Support/contact hero canvases. */
.fms-contact-hero,
.fmc-hero,
.fmt6-hero,
.fmt7-hero{
  background:linear-gradient(120deg,#fff 0%,#fff 55%,var(--firstm-neutral-canvas) 100%)!important;
}
.fmc-final-section{
  background:linear-gradient(145deg,#fff,var(--firstm-neutral-canvas-soft))!important;
}

/* Website design page */
.firstm-web-page{
  --fmw-surface:var(--firstm-neutral-canvas)!important;
}
.firstm-web-page .fmw-services-premium,
.firstm-web-page .fmw-web-solutions-v3,
.firstm-web-page .fmw-web-solutions-v4{
  background:var(--firstm-neutral-canvas)!important;
}
.firstm-web-page .fmw-web-solutions-v3:before{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,248,248,.78) 44%,rgba(247,247,247,.98))!important;
}
.firstm-web-page .fmw-process,
.firstm-web-page .fmw-process-v2{
  background:linear-gradient(180deg,#fff 0%,var(--firstm-neutral-canvas) 100%)!important;
}
.firstm-web-page .fmw-comparison{
  --fmw-compare-bg-a:#f8f8f8!important;
  --fmw-compare-bg-b:#f5f5f5!important;
  background:linear-gradient(135deg,#fafafa 0%,#f7f7f7 52%,#f5f5f5 100%)!important;
}
.firstm-web-page .fmw-comparison:before{
  background:none!important;
}
.firstm-web-page .fmw-tech{
  --fmw-tech-bg-primary:#f7f7f7!important;
  --fmw-tech-bg-secondary:#fafafa!important;
  background:linear-gradient(180deg,#fafafa 0%,#f7f7f7 52%,#fafafa 100%)!important;
}
.firstm-web-page #web-faq.fmw-faq{
  --faq-bg:#f8f8f8!important;
  --faq-surface:#fff!important;
  --faq-surface-open:#fff!important;
  background:var(--firstm-neutral-canvas)!important;
}

/* Mobile-app page — neutralize the warm beige canvases, keep cards and orange accents. */
.firstm-mobile-page{
  --fmm-surface:var(--firstm-neutral-canvas)!important;
}
.firstm-mobile-page .fmm-ecosystem-v2{
  background:var(--firstm-neutral-canvas)!important;
}
.firstm-mobile-page .fmm-eco-bg i:nth-child(1){
  background:radial-gradient(circle,rgba(215,215,215,.72) 0,rgba(225,225,225,.30) 42%,rgba(225,225,225,0) 74%)!important;
}
.firstm-mobile-page .fmm-eco-bg i:nth-child(2){
  background:radial-gradient(circle,rgba(228,228,228,.72) 0,rgba(225,225,225,.28) 40%,rgba(225,225,225,0) 74%)!important;
}
.firstm-mobile-page .fmm-industries{
  --fmm-industries-brand:#D05423;
  background:#D05423!important;
}
.firstm-mobile-page .fmm-process-columns{
  background:var(--firstm-neutral-canvas)!important;
}
.firstm-mobile-page .fmm-mobile-articles{
  background:var(--firstm-neutral-canvas)!important;
}
/* FAQ stays pure white by design; it was explicitly requested that way. */

/* Hosting page — same neutral near-white family across added light sections. */
.firstm-hosting{
  --fmh-bg:#fff!important;
}
.firstm-hosting .fmh-pricing,
.firstm-hosting .fmh-compare-section,
.firstm-hosting .fmh-articles,
.firstm-hosting .fmh-faq{
  --fmh-section-bg:var(--firstm-neutral-canvas)!important;
  background:var(--firstm-neutral-canvas)!important;
}
.firstm-hosting .fmh-compare-section::before{
  background-image:linear-gradient(rgba(45,45,45,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(45,45,45,.02) 1px,transparent 1px)!important;
}

/* Keep the neutral treatment restrained on phones as well. */
@media(max-width:760px){
  .firstm-web-page .fmw-web-solutions-v4,
  .firstm-web-page .fmw-comparison,
  .firstm-web-page .fmw-tech,
  .firstm-web-page #web-faq.fmw-faq,
  .firstm-mobile-page .fmm-ecosystem-v2,
  .firstm-mobile-page .fmm-industries,
  .firstm-mobile-page .fmm-process-columns,
  .firstm-mobile-page .fmm-mobile-articles,
  .firstm-hosting .fmh-pricing,
  .firstm-hosting .fmh-compare-section,
  .firstm-hosting .fmh-articles,
  .firstm-hosting .fmh-faq{
    background-color:var(--firstm-neutral-canvas)!important;
  }
}


/*
 * v1.29.13 — No-cyan surface rule
 * Any FirstM background that previously leaned cyan / sky-blue / pale blue
 * has been neutralized to the requested #b9b9b9cc family. Brand orange and
 * non-background foreground colors are intentionally unchanged.
 */
:root{--firstm-no-cyan-surface:#b9b9b9cc;}

/* v1.29.14 — Mobile articles: true WhiteSmoke canvas */
.firstm-mobile-page .fmm-mobile-articles{
  background:#f5f5f5!important;
  background-color:#f5f5f5!important;
}
@media(max-width:760px){
  .firstm-mobile-page .fmm-mobile-articles{
    background:#f5f5f5!important;
    background-color:#f5f5f5!important;
  }
}

/* v1.29.15 — Comparison section: near-white warm beige + lightweight animated polygon mesh.
   One compositor-only moving layer, no blur/backdrop-filter, to preserve smooth scrolling. */
.firstm-web-page .fmw-comparison{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  --fmw-compare-bg-a:#fbfaf7!important;
  --fmw-compare-bg-b:#f6f1e8!important;
  background:
    linear-gradient(180deg,#fdfcf9 0%,#faf7f1 46%,#f7f2ea 100%)!important;
}
.firstm-web-page .fmw-comparison:before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 16% 18%,rgba(182,164,139,.055),transparent 30%),
    radial-gradient(circle at 84% 76%,rgba(76,72,67,.032),transparent 30%)!important;
}
.firstm-web-page .fmw-comparison:after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:-10% -6%!important;
  z-index:0!important;
  pointer-events:none!important;
  opacity:.58!important;
  background-image:
    linear-gradient(30deg,rgba(118,108,95,.055) 1px,transparent 1px),
    linear-gradient(150deg,rgba(118,108,95,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(170,151,124,.038) 1px,transparent 1px)!important;
  background-size:96px 166px,96px 166px,96px 166px!important;
  background-position:0 0,0 0,48px 83px!important;
  transform:translate3d(-1.2%,0,0)!important;
  will-change:transform!important;
  animation:firstmComparePolygonDrift 20s ease-in-out infinite alternate!important;
}
.firstm-web-page .fmw-comparison>.fmw-shell{
  position:relative!important;
  z-index:2!important;
}
/* Retire the older square-grid layer so the new faceted mesh is the only background texture. */
.firstm-web-page .fmw-comparison .fmw-compare-pattern{
  display:none!important;
}
@keyframes firstmComparePolygonDrift{
  0%{transform:translate3d(-1.2%,0,0) scale(1.01)}
  50%{transform:translate3d(.6%,-.45%,0) scale(1.015)}
  100%{transform:translate3d(1.5%,.35%,0) scale(1.01)}
}
@media(max-width:760px){
  .firstm-web-page .fmw-comparison{
    background:linear-gradient(180deg,#fdfcf9 0%,#faf7f2 52%,#f7f3ec 100%)!important;
  }
  .firstm-web-page .fmw-comparison:after{
    inset:-6% -14%!important;
    opacity:.42!important;
    background-size:78px 135px,78px 135px,78px 135px!important;
    background-position:0 0,0 0,39px 67px!important;
    animation-duration:26s!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .firstm-web-page .fmw-comparison:after{
    animation:none!important;
    transform:none!important;
    will-change:auto!important;
  }
}


/* v1.29.27 — intentional exception: Mobile Articles is an editorial dark section. */
.firstm-mobile-page .fmm-mobile-articles{background:#090909!important;background-color:#090909!important;}
@media(max-width:760px){.firstm-mobile-page .fmm-mobile-articles{background:#090909!important;background-color:#090909!important;}}

/* v1.29.32 — Hosting data-center is intentionally dark and image-led. */
.firstm-hosting .fmh-network{
  --fmh-section-bg:var(--fmh-network-bg,#050505)!important;
  background:var(--fmh-network-bg,#050505)!important;
  background-color:var(--fmh-network-bg,#050505)!important;
}
@media(max-width:760px){
  .firstm-hosting .fmh-network{background:var(--fmh-network-bg,#050505)!important;background-color:var(--fmh-network-bg,#050505)!important;}
}