/* Maestrus landing — neo (from design/Maestrus.dc.html). Brand: #ff8a3d on #0a0908. */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#0a0908;font-family:'Space Grotesk',sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:#ff8a3d;color:#0a0908}
a{color:#ff8a3d}
a:hover{color:#ffb07a}
@keyframes mxpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
@keyframes mxshimmer{0%{transform:translateX(-120%)}100%{transform:translateX(220%)}}
@keyframes mxglow{0%,100%{opacity:.55}50%{opacity:.9}}
@keyframes mxflow{to{stroke-dashoffset:-280}}
@keyframes mxhi{0%,20%{opacity:0;transform:scale(.7)}30%,80%{opacity:1;transform:scale(1)}92%,100%{opacity:0}}
@keyframes mxring{0%{transform:translate(-50%,-50%) scale(.5);opacity:.7}100%{transform:translate(-50%,-50%) scale(2.6);opacity:0}}
@keyframes mxfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes mxorb{0%,100%{box-shadow:0 0 34px 6px rgba(255,138,61,.5),inset 0 0 18px rgba(255,214,170,.55);transform:scale(1)}50%{box-shadow:0 0 62px 16px rgba(255,138,61,.85),inset 0 0 26px rgba(255,214,170,.8);transform:scale(1.07)}}
@keyframes mxsway{0%,100%{transform:rotateX(12deg) rotateY(-7deg)}50%{transform:rotateX(12deg) rotateY(7deg)}}
@keyframes mxwave{0%,100%{height:7px}50%{height:23px}}
@keyframes mxdown{0%{top:-4px;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:calc(100% + 4px);opacity:0}}
@keyframes mxrise{0%,100%{transform:translateY(0);box-shadow:0 10px 26px -14px rgba(0,0,0,.8)}50%{transform:translateY(-4px);box-shadow:0 18px 34px -14px rgba(255,138,61,.3)}}
.mxlink:hover{color:#F2ECE0 !important}
.mxprimary:hover{transform:translateY(-2px);box-shadow:0 14px 40px -8px rgba(255,138,61,.65) !important}
.mxghost:hover{border-color:rgba(242,236,224,.4) !important;color:#F2ECE0 !important}
.mxcard:hover{border-color:rgba(255,138,61,.45) !important;transform:translateY(-4px)}
.mxtile:hover{border-color:rgba(255,138,61,.45) !important;transform:translateY(-3px);color:#ffa057 !important}
.mxprimary,.mxghost,.mxcard,.mxlink,.mxtile{transition:all .25s cubic-bezier(.2,.7,.3,1)}
.mxham{display:none}
.mxvert{display:none}

/* ── Language switcher (server-side ?lang=) ─────────────────────────────── */
.mxLangBtn{font-family:'Space Grotesk';font-size:12px;font-weight:700;padding:5px 9px;border-radius:999px;transition:all .2s;background:transparent;color:#9b948a;text-decoration:none;display:inline-block;line-height:1.2}
.mxLangBtn:hover{color:#F2ECE0}
.mxLangBtn.on{background:#ff8a3d;color:#0a0908}
.mxLangBtn.on:hover{color:#0a0908}

/* ── Rotating headline / hero badge (JS toggles .on) ────────────────────── */
.mxrot{grid-area:1/1;opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1);pointer-events:none}
.mxrot.on{opacity:1;transform:translateY(0);pointer-events:auto}
.mxrot-p{grid-area:1/1;justify-self:center;display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1);pointer-events:none}
.mxrot-p.on{opacity:1;transform:translateY(0);pointer-events:auto}
@media (prefers-reduced-motion:reduce){
  .mxrot,.mxrot-p{transition:none}
  .mx3d,[style*="mxsway"]{animation:none !important}
}

/* ── FAQ accordion (JS toggles .open) ───────────────────────────────────── */
.mxfaq{border:1px solid rgba(242,236,224,.09);border-radius:14px;background:#0c0b09;overflow:hidden}
.mxfaq>button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;background:transparent;border:none;cursor:pointer;text-align:left;color:#F2ECE0;font-family:'Space Grotesk';font-size:16px;font-weight:600}
.mxfaq .mxfi{flex:none;font-size:22px;font-weight:400;line-height:1;color:#6f6a62;transform:rotate(0deg);transition:all .25s cubic-bezier(.2,.7,.3,1)}
.mxfaq .mxfa{max-height:0;opacity:0;overflow:hidden;transition:all .35s cubic-bezier(.2,.7,.3,1)}
.mxfaq.open .mxfi{color:#ff8a3d;transform:rotate(45deg)}
.mxfaq.open .mxfa{max-height:340px;opacity:1}

/* ── Engine toggle (JS toggles .on) ─────────────────────────────────────── */
.mxEngBtn{border:none;cursor:pointer;font-family:'Space Grotesk';font-size:14px;font-weight:700;padding:9px 18px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;transition:all .2s;background:transparent;color:#9b948a}
.mxEngBtn.on{background:#ff8a3d;color:#0a0908}
.mxeng-panel{display:none}
.mxeng-panel.on{display:block}

/* ── Wordmark (icon + text, no wordmark asset available) ────────────────── */
.mxbrand{display:inline-flex;align-items:center;gap:4px;text-decoration:none;color:#F2ECE0;transition:opacity .2s ease}
.mxbrand:hover{opacity:.92}
.mxbrand-ico{display:inline-block;flex:none;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;filter:drop-shadow(0 0 12px rgba(255,138,61,.4))}
.mxbrand:hover .mxbrand-ico{filter:drop-shadow(0 0 16px rgba(255,138,61,.65))}
.mxbrand .mxwm{font-family:'Syne',sans-serif;font-weight:700;color:#F2ECE0;letter-spacing:-.04em;line-height:1}

/* ── Responsive (from design) ───────────────────────────────────────────── */
@media(max-width:900px){
  .mx2col{grid-template-columns:1fr !important;gap:30px !important}
  .mx2col>*{order:0 !important}
  .mxfoot{grid-template-columns:1fr 1fr !important;gap:28px 24px !important}
  .mxnavlinks{display:none !important}
  .mxham{display:flex !important}
  .mxnav-hide{display:none !important}
  .mx3d{display:none !important}
  .mxvert{display:flex !important}
  .mxcmpwrap{overflow-x:auto !important;overflow-y:hidden !important;-webkit-overflow-scrolling:touch}
  .mxcmp{min-width:700px !important}
  .mxcapgrid{grid-template-columns:repeat(3,1fr) !important}
  .mxpowers4{grid-template-columns:repeat(2,1fr) !important}
  .mxmcp8{grid-template-columns:repeat(4,1fr) !important}
}
@media(min-width:901px){ .mxmobmenu{display:none !important} }
@media(max-width:560px){
  .mxfoot{grid-template-columns:1fr 1fr !important}
  .mxcapgrid{grid-template-columns:repeat(2,1fr) !important}
  .mxmcp8{grid-template-columns:repeat(3,1fr) !important}
}
.mxmobmenu{display:none;flex-direction:column;gap:2px;padding:8px 28px 22px;border-top:1px solid rgba(242,236,224,.07);background:rgba(10,9,8,.97);backdrop-filter:blur(14px)}
.mxmobmenu.open{display:flex}

/* ── Grid neon animado de fundo ──────────────────────────────────────────────
   Três camadas: grade-base estática sutil + duas camadas NEON laranja idênticas
   à grade, reveladas por máscaras radiais que DERIVAM lentamente pela tela —
   o brilho percorre as linhas do quadriculado, suave e contínuo. */
.mxgrid{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.mxgrid-base,.mxgrid-neon{position:absolute;inset:-58px;background-size:58px 58px;background-image:linear-gradient(rgba(242,236,224,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(242,236,224,.035) 1px,transparent 1px)}
.mxgrid-base{mask-image:radial-gradient(ellipse 120% 90% at 50% 0%,#000 35%,transparent 90%);-webkit-mask-image:radial-gradient(ellipse 120% 90% at 50% 0%,#000 35%,transparent 90%)}
.mxgrid-neon{
  background-image:linear-gradient(rgba(255,138,61,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(255,138,61,.22) 1px,transparent 1px);
  filter:drop-shadow(0 0 6px rgba(255,138,61,.55));
  -webkit-mask-image:radial-gradient(circle 420px at var(--mx,20%) var(--my,30%),#000 0%,rgba(0,0,0,.35) 45%,transparent 72%);
  mask-image:radial-gradient(circle 420px at var(--mx,20%) var(--my,30%),#000 0%,rgba(0,0,0,.35) 45%,transparent 72%);
  animation:mxgriddrift 26s ease-in-out infinite;
}
.mxgrid-neon2{
  background-image:linear-gradient(rgba(255,138,61,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,138,61,.13) 1px,transparent 1px);
  -webkit-mask-image:radial-gradient(circle 560px at var(--mx,80%) var(--my,75%),#000 0%,rgba(0,0,0,.3) 50%,transparent 75%);
  mask-image:radial-gradient(circle 560px at var(--mx,80%) var(--my,75%),#000 0%,rgba(0,0,0,.3) 50%,transparent 75%);
  animation:mxgriddrift2 34s ease-in-out infinite;
}
@keyframes mxgriddrift{
  0%   {--mx:15%;--my:22%;opacity:.9}
  25%  {--mx:70%;--my:18%;opacity:.65}
  50%  {--mx:82%;--my:60%;opacity:.9}
  75%  {--mx:35%;--my:78%;opacity:.6}
  100% {--mx:15%;--my:22%;opacity:.9}
}
@keyframes mxgriddrift2{
  0%   {--mx:85%;--my:70%;opacity:.6}
  33%  {--mx:25%;--my:55%;opacity:.85}
  66%  {--mx:55%;--my:15%;opacity:.55}
  100% {--mx:85%;--my:70%;opacity:.6}
}
/* CSS vars não animam nativamente em keyframes sem @property — registra: */
@property --mx { syntax:'<percentage>'; inherits:false; initial-value:20%; }
@property --my { syntax:'<percentage>'; inherits:false; initial-value:30%; }
@media (prefers-reduced-motion: reduce){
  .mxgrid-neon,.mxgrid-neon2{animation:none;opacity:.35}
}

/* ===== Palco 3D do hero (partials/hero-stage.php) =====
   Quadro fixo de 1080x880 escalado por --mxst-scale (definido no IIFE de
   index.php). aspect-ratio reserva a altura já no primeiro layout, então o
   scale não causa salto de layout. */
.mxstage{position:relative;width:100%;max-width:1080px;margin:0 auto;overflow:hidden;aspect-ratio:1080/880}
.mxstage__inner{position:relative;width:1080px;height:880px;transform-origin:top left;transform:scale(var(--mxst-scale,1));
  /* o hero é centralizado; o palco reproduz o design, que é alinhado à esquerda */
  text-align:left}
.mxst-mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.mxst-ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mxst-dot{width:5px;height:5px;border-radius:50%;background:#FF6B2C;box-shadow:0 0 8px rgba(255,107,44,.8)}
.mxst-wave{width:3px;border-radius:2px;background:rgba(255,255,255,.45);animation:mxst-wave 1.4s ease-in-out infinite}
.mxst-bar{flex:1;border-radius:2px;background:linear-gradient(180deg,#FF8A3D,rgba(255,91,20,.25))}
@keyframes mxst-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes mxst-orb{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes mxst-halo{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:.65;transform:scale(1.2)}}
@keyframes mxst-spin{to{transform:rotate(360deg)}}
@keyframes mxst-row{0%{opacity:0;transform:translateY(10px)}14%{opacity:1;transform:translateY(0)}72%{opacity:1}100%{opacity:.22;transform:translateY(0)}}
@keyframes mxst-beam{0%{opacity:0;transform:scaleX(.15)}35%{opacity:.9}100%{opacity:0;transform:scaleX(1)}}
@keyframes mxst-wave{0%,100%{height:22%}50%{height:100%}}
/* Fora da viewport as ~25 animações infinitas do palco não têm o que informar. */
.mxstage--idle .mxstage__inner *{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .mxstage__inner *{animation:none !important}
}

/* ===== Marca alternante (Claude ⇄ Codex) nos títulos ===== */
.mxBrandSwap{color:#ffa057;white-space:nowrap}
.mxBrandSwap::after{content:'';display:inline-block;width:3px;height:.85em;margin-left:2px;vertical-align:-.08em;background:#ff8a3d;animation:mxcaret 1s steps(1) infinite}
@keyframes mxcaret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.mxBrandSwap::after{display:none}}

/* ===== Logomarcas + faixa de plataformas ===== */
.mxbi{width:.82em;height:.82em;flex:none}
.mxBrandWrap{display:inline-flex;align-items:center;gap:.26em;white-space:nowrap;color:#ffa057}
.mxBrandWrap .mxbi{display:none}
.mxBrandWrap.on-c .mxbi-c{display:inline-block}
.mxBrandWrap.on-x .mxbi-x{display:inline-block}
.mxEngBtn .mxbi{width:15px;height:15px;margin-right:2px}
.mxeng-panel .mxbi{width:24px;height:24px;display:inline-block}
.mxPlats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin:22px auto 0;font-size:13.5px;font-weight:600;color:#8f887e}
.mxPlats span{display:inline-flex;align-items:center;gap:7px}
.mxPlats svg{width:16px;height:16px;color:#ffa057}