:root{
  --color-brand-blue:#2563eb;
  --color-brand-light:#eff6ff;
  --brand-blue-rgb:37 99 235;
  --brand-light-rgb:239 246 255;
}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Plus Jakarta Sans",Arial,sans-serif;background:#fff;color:#0f172a}
h1,h2,h3,h4,h5,h6,.font-display{font-family:"Outfit",Arial,sans-serif}

/* Compatibilidade visual do Motion sem depender de Node/CDN. */
.mc-enter{
  animation:mcEnter var(--mc-duration,.8s) var(--mc-delay,0s) cubic-bezier(.16,1,.3,1) both;
}
.mc-reveal{
  opacity:0;
  translate:0 22px;
  transition:
    opacity var(--mc-duration,.65s) var(--mc-delay,0s) cubic-bezier(.16,1,.3,1),
    translate var(--mc-duration,.65s) var(--mc-delay,0s) cubic-bezier(.16,1,.3,1),
    scale var(--mc-duration,.65s) var(--mc-delay,0s) cubic-bezier(.16,1,.3,1);
}
.mc-reveal.mc-reveal-scale{translate:0 0;scale:.82}
.mc-reveal.mc-reveal-left{translate:-24px 0}
.mc-reveal.mc-reveal-right{translate:24px 0}
.mc-reveal.mc-reveal-deep{translate:0 48px}
.mc-reveal.is-visible{opacity:1;translate:0 0;scale:1}

.mc-spin{
  animation:mcSpin var(--mc-duration,10s) linear infinite;
  transform-origin:center;
  will-change:rotate;
}
.mc-float{
  animation:mcFloat var(--mc-duration,5.5s) var(--mc-delay,0s) ease-in-out infinite;
  will-change:translate;
}
.mc-float-tilt{
  animation:mcFloatTilt var(--mc-duration,4.5s) var(--mc-delay,0s) ease-in-out infinite;
  will-change:translate,rotate;
}
.mc-pulse{
  animation:mcPulse var(--mc-duration,4.5s) var(--mc-delay,0s) ease-in-out infinite;
  will-change:scale,rotate;
}
.mc-enter.mc-float{
  animation:
    mcEnter .8s cubic-bezier(.16,1,.3,1) both,
    mcFloat var(--mc-duration,5.5s) calc(var(--mc-delay,0s) + .8s) ease-in-out infinite;
}
.mc-enter.mc-float-tilt{
  animation:
    mcEnter .8s cubic-bezier(.16,1,.3,1) both,
    mcFloatTilt var(--mc-duration,4.5s) calc(var(--mc-delay,0s) + .8s) ease-in-out infinite;
}
.mc-enter.mc-pulse{
  animation:
    mcEnter .8s cubic-bezier(.16,1,.3,1) both,
    mcPulse var(--mc-duration,4.5s) calc(var(--mc-delay,0s) + .8s) ease-in-out infinite;
}
@keyframes mcEnter{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@keyframes mcSpin{from{rotate:0deg}to{rotate:360deg}}
@keyframes mcFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes mcFloatTilt{0%,100%{translate:0 0;rotate:-6deg}50%{translate:0 -10px;rotate:0deg}}
@keyframes mcPulse{0%,100%{scale:1;rotate:-6deg}50%{scale:1.05;rotate:0deg}}

/* Tudo em um só link: restaura posições, cores, profundidade e movimento. */
.mc-allinone-section{
  background:
    radial-gradient(circle at 50% 54%,rgb(var(--brand-light-rgb)/.68),transparent 28%),
    #fff;
}
.mc-allinone-stage{isolation:isolate}
.mc-allinone-phone{
  box-shadow:0 34px 70px rgba(15,23,42,.20),0 8px 24px rgba(15,23,42,.10);
}
.mc-allinone-phone::after{
  content:"";
  position:absolute;
  left:15%;right:15%;bottom:-28px;height:38px;
  background:rgba(15,23,42,.18);
  filter:blur(20px);
  border-radius:50%;
  z-index:-1;
}
.mc-phone-logo{animation:mcLogoGlow 4s ease-in-out infinite}
.mc-phone-row{animation:mcRowGlow 5s calc(var(--mc-row-index,1)*.2s) ease-in-out infinite}
@keyframes mcLogoGlow{
  0%,100%{box-shadow:0 10px 24px rgb(var(--brand-blue-rgb)/.22)}
  50%{box-shadow:0 14px 36px rgb(var(--brand-blue-rgb)/.38)}
}
@keyframes mcRowGlow{0%,100%{translate:0 0}50%{translate:2px 0}}
.mc-allinone-app{
  filter:drop-shadow(0 10px 14px rgba(15,23,42,.08));
}
.mc-allinone-app.is-visible{
  animation:mcAppFloat 5.2s calc(.7s + var(--mc-app-index,0)*.23s) ease-in-out infinite;
}
@keyframes mcAppFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
.mc-allinone-app-icon{
  transition:scale .25s ease,box-shadow .25s ease;
  box-shadow:0 12px 24px rgba(15,23,42,.15);
}
.mc-allinone-app-label{
  transition:translate .25s ease,box-shadow .25s ease;
  box-shadow:0 8px 22px rgba(15,23,42,.07);
}
.mc-allinone-app:hover .mc-allinone-app-icon{scale:1.08;box-shadow:0 16px 32px rgba(15,23,42,.22)}
.mc-allinone-app:hover .mc-allinone-app-label{translate:4px 0;box-shadow:0 12px 28px rgba(15,23,42,.11)}
.mc-allinone-rings{opacity:.95}
.mc-ring{animation:mcRingBreath 6s ease-in-out infinite}
.mc-ring-2{animation-delay:.65s}
.mc-ring-3{animation-delay:1.3s}
@keyframes mcRingBreath{0%,100%{scale:1;opacity:.55}50%{scale:1.025;opacity:1}}

/* Segmentos: cores dinâmicas do painel e entrada fiel ao Studio. */
.mc-demos-section{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,#fff 65%,#fbfdff 100%);
}
.mc-demos-section::before{
  content:"";
  position:absolute;
  width:460px;height:220px;
  left:50%;top:54%;translate:-50% -50%;
  background:radial-gradient(circle,rgb(var(--brand-light-rgb)/.9),transparent 68%);
  filter:blur(30px);
  pointer-events:none;
}
.mc-demo-list{position:relative;z-index:1}
.mc-demo-chip{
  color:inherit;
  text-decoration:none;
  box-shadow:0 7px 18px rgba(15,23,42,.035);
  transition:translate .3s cubic-bezier(.16,1,.3,1),scale .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,filter .3s ease;
}
.mc-demo-chip:hover{
  translate:0 -5px;
  scale:1.025;
  box-shadow:0 14px 30px rgba(15,23,42,.10);
  filter:saturate(1.08);
}
.mc-demo-icon{transition:rotate .3s ease,scale .3s ease}
.mc-demo-chip:hover .mc-demo-icon{rotate:-7deg;scale:1.12}
.mc-demo-label{color:#0f172a}

/* Benefícios: mantém o raio em órbita contínua e o fundo girando devagar. */
#beneficios .mc-spin{transform-origin:center}

@media (max-width:1023px){
  .mc-allinone-stage{height:auto!important;min-height:570px}
  .mc-allinone-phone{scale:.88}
  .mc-allinone-rings{scale:.84}
}
@media (max-width:767px){
  .mc-allinone-section{padding-top:6rem!important;padding-bottom:6rem!important}
  .mc-allinone-stage{min-height:530px}
  .mc-allinone-phone{scale:.78}
  .mc-demo-chip{padding:.8rem 1rem!important;border-radius:1rem!important}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mc-enter,.mc-float,.mc-float-tilt,.mc-pulse,.mc-spin,.mc-allinone-app,.mc-phone-logo,.mc-phone-row,.mc-ring{animation:none!important}
  .mc-reveal{opacity:1;translate:0 0;scale:1;transition:none}
}