/* ==========================================================================
   AGENTE MÉTODO X — bundle (Framer-aligned)
   Imports tokens + base. Section styles abaixo. Font: DM Sans Light + bold.
   ========================================================================== */

@import url('tokens.css');
@import url('base.css');

/* Helpers */
.amx-only-desktop { display: none; }
@media (min-width: 768px) { .amx-only-desktop { display: inline; } }

em { font-style: normal; color: var(--brand-default); font-weight: 700; }
strong { font-weight: 700; color: var(--text-primary); }

body { font-family: var(--font-body); font-weight: 300; }

/* ===========================================================
   EYEBROW PILL — gradient + Stocco logo amarelo dentro
   =========================================================== */
.mx-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  text-transform: none;
  white-space: nowrap;
}
.mx-pill::before {
  content: '';
  display: inline-block;
  width: 22px; height: 22px;
  background: var(--brand-default) url('../assets/images/metodox-x-logo.png') center/14px no-repeat;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* Variantes (form yellow section vs dark sections) */
/* ===========================================================
   00 — HEADER + DRAWER
   =========================================================== */
.amx-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  padding-block: var(--space-3);
  background: rgba(5, 5, 5, 0.72);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: background var(--duration-default), border-color var(--duration-default), padding var(--duration-default);
}
.amx-header.is-scrolled {
  background: rgba(5,5,5,0.92);
  border-bottom-color: var(--border-subtle);
  padding-block: var(--space-2);
}
.amx-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.amx-header__brand { display: inline-flex; align-items: center; gap: var(--space-3); }
.amx-header__brand img { height: 26px; width: auto; }
.amx-header__brand-tag { display: none; }
.amx-header__nav {
  display: none;
  align-items: center;
  gap: var(--space-6);
}
@media (min-width: 960px) {
  .amx-header__nav { display: flex; }
  .amx-header__cta { display: inline-flex; }
  .amx-header__burger { display: none; }
}
.amx-header__nav a {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  color: var(--text-secondary);
  transition: color var(--duration-default);
}
.amx-header__nav a:hover { color: var(--brand-default); }
.amx-header__cta { display: none; }
.amx-header__burger {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: rgba(255,255,255,0.03);
  margin-left: auto;
}
.amx-header__burger span { display: block; width: 20px; height: 2px; background: var(--text-primary); border-radius: 1px; transition: transform var(--duration-default); }

/* Drawer */
.amx-drawer {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg-primary);
  transform: translateY(-100%); pointer-events: none;
  transition: transform 0.45s var(--ease-out-expo);
  display: flex;
}
.amx-drawer.is-open { transform: translateY(0); pointer-events: auto; }
.amx-drawer__inner { margin: auto; width: min(100%, 480px); padding: var(--space-12) var(--space-6); display: flex; flex-direction: column; gap: var(--space-8); height: 100%; justify-content: center; }
.amx-drawer__close { position: absolute; top: var(--space-5); right: var(--space-5); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.05); border: 1px solid var(--border-default); color: var(--text-primary); display: inline-flex; align-items: center; justify-content: center; }
.amx-drawer__close svg { width: 18px; height: 18px; }
.amx-drawer__nav { display: flex; flex-direction: column; gap: var(--space-5); }
.amx-drawer__nav a { font-family: var(--font-display); font-weight: 300; font-size: 28px; letter-spacing: -0.02em; color: var(--text-primary); }
.amx-drawer__nav a:hover { color: var(--brand-default); }
.amx-drawer__cta { align-self: flex-start; }
.amx-drawer__social { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
.amx-drawer__social a { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
body.amx-drawer-open { overflow: hidden; }

/* ===========================================================
   01 — HERO (phone GIF principal + 2 ghosts atrás)
   =========================================================== */
.amx-hero {
  position: relative;
  padding-top: 140px;
  padding-bottom: clamp(60px, 8vw, 100px);
  overflow: hidden;
  background: var(--bg-primary);
  isolation: isolate;
}
.amx-hero__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.amx-hero__x {
  position: absolute;
  width: 600px;
  height: auto;
  filter: blur(48px) saturate(1.1);
  opacity: 0.35;
  mix-blend-mode: screen;
}
@media (max-width: 720px) {
  .amx-hero__x--a, .amx-hero__x--c { display: none; }
}

.amx-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 880px) {
  .amx-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-10); }
}
.amx-hero__copy { display: flex; flex-direction: column; gap: var(--space-5); }
.amx-hero__pill { align-self: flex-start; }
.amx-hero__headline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(34px, 4.4vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  text-wrap: balance;
}
.amx-hero__body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 540px;
}
.amx-hero__ctas { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-3); }
@keyframes amx-pulse {
  0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0.7); }
  50% { opacity: 0.6; box-shadow: 0 0 0 8px rgba(34,197,94,0); }
}

/* Phone GIF stack — main + 2 ghosts atras */
.amx-hero__visual {
  position: relative;
  max-width: 420px;
  margin-inline: auto;
  z-index: 2;
  aspect-ratio: 624 / 1110;
}
.amx-hero__visual::before,
.amx-hero__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/images/hero-phone.gif') center/contain no-repeat;
  filter: blur(14px) saturate(0.9);
  opacity: 0.45;
  z-index: -1;
  transform: scale(0.92) translateX(-8%);
  pointer-events: none;
}
.amx-hero__visual::after {
  transform: scale(0.88) translateX(8%);
  opacity: 0.28;
  filter: blur(20px) saturate(0.8);
}
.amx-hero__visual img {
  width: 100%; height: 100%;
  display: block;
  object-fit: contain;
  position: relative;
  z-index: 1;
  border-radius: 36px;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.5));
}
@media (max-width: 720px) {
  .amx-hero__visual { max-width: 320px; }
  .amx-hero__visual::before, .amx-hero__visual::after { display: none; }
}

/* ===========================================================
   02 — MARQUEE (sutil — texto cinza rolando, fade nas pontas)
   =========================================================== */
.amx-marquee {
  position: relative;
  padding-block: 28px;
  overflow: hidden;
  background: var(--bg-primary);
  border-block: 1px solid var(--border-subtle);
}
.amx-marquee::before,
.amx-marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 200px;
  z-index: 2;
  pointer-events: none;
}
.amx-marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-primary), transparent); }
.amx-marquee::after  { right: 0; background: linear-gradient(-90deg, var(--bg-primary), transparent); }
.amx-marquee__track {
  display: flex;
  width: max-content;
  animation: amx-marquee 36s linear infinite;
}
.amx-marquee:hover .amx-marquee__track { animation-play-state: paused; }
.amx-marquee__list {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding-inline: var(--space-5);
}
.amx-marquee__pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.04em;
  color: var(--color-neutral-300);
  text-transform: uppercase;
  white-space: nowrap;
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  transition: color var(--duration-default) var(--ease-out-quart);
}
/* "Active" item: contrast white */
.amx-marquee__list li:nth-child(3) .amx-marquee__pill { color: var(--text-primary); }
.amx-marquee__sep {
  color: var(--color-neutral-500);
  font-size: 14px;
  opacity: 0.6;
}
@keyframes amx-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ===========================================================
   03 — PROBLEM
   =========================================================== */
.amx-problem { background: var(--bg-primary); padding-block: clamp(60px, 9vw, 110px); }
.amx-problem__head {
  text-align: center;
  margin-inline: auto;
  max-width: 920px;
  margin-bottom: clamp(40px, 5vw, 64px);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
}
.amx-problem__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  text-wrap: balance;
}
.amx-problem__card {
  background: radial-gradient(ellipse 50% 70% at 50% 0%, #101010, #000);
  border: 1px solid rgba(77,77,77,0.2);
  border-radius: 28px;
  padding: clamp(28px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  position: relative;
  overflow: hidden;
  align-items: center;
  transition: border-color var(--duration-default), transform var(--duration-default);
}
.amx-problem__card:hover {
  border-color: rgba(255, 231, 0, 0.3);
  transform: translateY(-3px);
}
.amx-problem__card-content { position: relative; z-index: 1; }
@media (min-width: 900px) {
  .amx-problem__card { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
.amx-problem__chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--brand-default);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
  text-transform: uppercase;
}
.amx-problem__card-title {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(28px, 4vw, 50px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-5);
  color: var(--text-primary);
}
.amx-problem__card-title em { color: var(--brand-default); font-weight: 700; }
.amx-problem__card-intro {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.amx-problem__list {
  position: relative;
  z-index: 1;
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.amx-problem__list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--space-3);
  align-items: start;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.amx-problem__bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-default);
  font-weight: 700;
  font-size: 16px;
}
.amx-problem__bullet::before { content: '→'; }
.amx-problem__bullet svg { display: none; }
.amx-problem__list li strong { font-weight: 700; color: var(--text-primary); }

.amx-problem__mockup {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  z-index: 1;
  transition: transform var(--duration-medium) var(--ease-out-quart);
}
.amx-problem__card:hover .amx-problem__mockup { transform: scale(1.02); }
.amx-problem__mockup > img { width: 100%; height: auto; display: block; }

/* ===========================================================
   04 — PARA QUEM É
   =========================================================== */
.amx-paraquem {
  background: var(--bg-primary);
  padding-block: clamp(50px, 7vw, 90px);
  position: relative;
}
.amx-paraquem__head {
  text-align: center;
  margin-inline: auto;
  max-width: 820px;
  margin-bottom: clamp(32px, 4vw, 48px);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
}
.amx-paraquem__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}
.amx-paraquem__sub { color: var(--text-muted); font-size: 17px; }
.amx-paraquem__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 760px) { .amx-paraquem__grid { grid-template-columns: repeat(3, 1fr); } }
.amx-paraquem__card {
  background: linear-gradient(180deg, rgba(16,16,16,0.9), rgba(8,8,8,0.9));
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
  transition: border-color var(--duration-default) var(--ease-out-quart),
              transform var(--duration-default) var(--ease-out-quart),
              box-shadow var(--duration-default) var(--ease-out-quart);
}
.amx-paraquem__card::before {
  content: '';
  position: absolute; inset: -1px;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,231,0,0.12), transparent);
  opacity: 0;
  transition: opacity var(--duration-default);
  pointer-events: none;
}
.amx-paraquem__card:hover { border-color: rgba(255,231,0,0.4); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.4); }
.amx-paraquem__card:hover::before { opacity: 1; }
.amx-paraquem__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--brand-default);
  font-weight: 500;
}
.amx-paraquem__icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,231,0,0.08);
  border-radius: 10px;
  color: var(--brand-default);
  margin-bottom: var(--space-2);
}
.amx-paraquem__icon svg { width: 20px; height: 20px; }
.amx-paraquem__card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.amx-paraquem__card-body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}
.amx-paraquem__card-body strong { color: var(--text-primary); font-weight: 700; }

/* ===========================================================
   05 — WORKFLOW (CARROSSEL INFINITO horizontal)
   =========================================================== */
.amx-workflow {
  background: var(--bg-primary);
  position: relative;
  overflow: hidden;
  padding-block: clamp(60px, 9vw, 110px);
}
.amx-workflow::after {
  content: '';
  position: absolute;
  right: -200px; bottom: -100px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(255,231,0,0.14), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.amx-workflow__head {
  text-align: center;
  margin-inline: auto;
  max-width: 820px;
  margin-bottom: clamp(40px, 5vw, 64px);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  position: relative; z-index: 1;
}
.amx-workflow__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  text-wrap: balance;
}
.amx-workflow__title em { color: var(--brand-default); font-weight: 700; }
.amx-workflow__sub { color: var(--text-muted); font-size: 17px; max-width: 640px; }
.amx-workflow__cta { margin-top: var(--space-5); order: 99; }

/* Track infinito */
.amx-workflow__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: var(--space-7);
  mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}
.amx-workflow__track {
  display: flex;
  width: max-content;
  gap: 24px;
  animation: amx-marquee 50s linear infinite;
}
.amx-workflow:hover .amx-workflow__track { animation-play-state: paused; }
.amx-workflow__card {
  flex: 0 0 320px;
  background: linear-gradient(180deg, rgba(16,16,16,0.9), rgba(8,8,8,0.9));
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 240px;
  transition: border-color var(--duration-default), transform var(--duration-default);
}
.amx-workflow__card:hover { border-color: rgba(255,231,0,0.4); transform: translateY(-4px); }
.amx-workflow__card-head {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.amx-workflow__num { display: none; }
.amx-workflow__icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,231,0,0.1);
  border-radius: 10px;
  color: var(--brand-default);
}
.amx-workflow__icon svg { width: 18px; height: 18px; }
.amx-workflow__card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.amx-workflow__card-body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}
.amx-workflow__card-body strong { color: var(--text-primary); font-weight: 700; }

/* ===========================================================
   06 — PILLARS (3 cards lado a lado)
   =========================================================== */
.amx-pillars { background: var(--bg-primary); padding-block: clamp(60px, 9vw, 110px); }
.amx-pillars__head {
  text-align: center;
  margin-inline: auto;
  max-width: 820px;
  margin-bottom: clamp(40px, 5vw, 64px);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
}
.amx-pillars__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}
.amx-pillars__title em { color: var(--brand-default); font-weight: 700; }
.amx-pillars__sub { color: var(--text-muted); font-size: 17px; }
.amx-pillars__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 880px) { .amx-pillars__grid { grid-template-columns: repeat(3, 1fr); } }
.amx-pillars__card {
  background: linear-gradient(180deg, rgba(16,16,16,0.9), rgba(8,8,8,0.9));
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: var(--space-7);
  display: flex; flex-direction: column;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
  min-height: 280px;
  transition: border-color var(--duration-default), transform var(--duration-default);
}
.amx-pillars__card:hover { border-color: rgba(255,231,0,0.4); transform: translateY(-4px); }
.amx-pillars__card:hover .amx-pillars__card-glow { opacity: 1; }
.amx-pillars__num { font-family: var(--font-mono); font-size: 11px; color: var(--brand-default); letter-spacing: 0.08em; }
.amx-pillars__icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,231,0,0.1);
  border-radius: 10px;
  color: var(--brand-default);
}
.amx-pillars__icon svg { width: 20px; height: 20px; }
.amx-pillars__card-body strong { color: var(--text-primary); font-weight: 700; }

/* ===========================================================
   07 — URGENCY / "Não perca tempo!"
   =========================================================== */
.amx-urgency {
  position: relative;
  padding-block: clamp(60px, 9vw, 110px);
  background: var(--bg-primary);
  overflow: hidden;
}

.amx-urgency__inner {
  position: relative; z-index: 1;
  background: radial-gradient(ellipse 70% 100% at 30% 50%, #101010, #000);
  border: 1px solid rgba(77,77,77,0.2);
  border-radius: 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
  padding: clamp(32px, 4vw, 56px);
  overflow: hidden;
}
@media (min-width: 880px) { .amx-urgency__inner { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
.amx-urgency__copy { display: flex; flex-direction: column; gap: var(--space-4); }
.amx-urgency__pill { align-self: flex-start; }
.amx-urgency__title {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}
.amx-urgency__title em { color: var(--brand-default); font-weight: 700; }
.amx-urgency__body { color: var(--text-muted); font-size: 16px; line-height: 1.55; }
.amx-urgency__highlight {
  display: inline-flex;
  align-items: center; gap: 8px;
  padding: 9px 14px;
  background: linear-gradient(90deg, rgba(31,31,31,0.4), rgba(12,12,12,0.4));
  border: 1px solid rgba(255,251,194,0.4);
  border-radius: var(--radius-full);
  font-size: 14px;
  color: var(--brand-default);
}
.amx-urgency__visual {
  position: relative;
  max-width: 540px;
  margin-inline: auto;
  z-index: 1;
}
.amx-urgency__visual img { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.5)); }

/* ===========================================================
   08 — FORM (BG amarelo)
   =========================================================== */
/* ===========================================================
   09 — FAQ
   =========================================================== */
/* ===========================================================
   10 — SOCIAL
   =========================================================== */
@media (min-width: 760px) { .amx-social__grid { grid-template-columns: repeat(3, 1fr); } }

/* ===========================================================
   11 — FOOTER (3 cols compacto)
   =========================================================== */
@media (min-width: 760px) {
}

/* ===========================================================
   OVERRIDES DE FIDELIDADE FRAMER
   Ajustes baseados no Framer ao vivo em 1440px e 390px.
   =========================================================== */
.amx-header {
  border-bottom-color: rgba(255,255,255,0.08);
}
.amx-header .mx-container {
  max-width: 720px;
}
.amx-header__inner {
  min-height: 50px;
}
.amx-header__brand img {
  height: 25px;
  width: 108px;
  object-fit: contain;
}
.amx-header__nav a {
  padding: 8px 12px;
  border-radius: var(--radius-full);
}
.amx-header__nav a:first-child {
  background: var(--brand-default);
  color: var(--brand-fg);
  font-weight: 700;
}
.amx-header__cta.mx-btn {
  height: 44px;
  min-width: 160px;
  border-color: rgba(255,231,0,0.35);
  color: var(--text-primary);
  background: transparent;
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
}
@media (min-width: 960px) {
  .amx-header__burger {
    display: none !important;
  }
  .amx-header__cta {
    display: inline-flex !important;
  }
}

.amx-hero {
  min-height: min(760px, 100svh);
  padding-top: 108px;
  padding-bottom: 0;
}
.amx-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,5,5,0) 0%, rgba(5,5,5,0) 72%, #050505 100%),
    radial-gradient(circle at 50% 30%, rgba(255,231,0,0.18), transparent 32%),
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: auto, auto, 120px 120px, 120px 120px;
  opacity: 0.68;
  z-index: 0;
}
.amx-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.amx-hero__copy {
  order: 2;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 1220px;
  margin-top: -38px;
  gap: 18px;
}
.amx-hero__pill {
  align-self: center;
  transform: scale(0.76);
  transform-origin: center;
}
.amx-hero__headline {
  max-width: 1180px;
  font-size: clamp(26px, 2.75vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-align: center;
}
.amx-hero__headline em {
  color: var(--brand-default);
}
.amx-hero__body {
  max-width: 1120px;
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.45;
  text-align: center;
}
.amx-hero__ctas {
  justify-content: center;
  margin-top: 4px;
}
.amx-hero__visual {
  order: 1;
  width: min(258px, 68vw);
  max-width: none;
  aspect-ratio: 258 / 462;
  margin-inline: auto;
}
.amx-hero__visual img {
  border: 1px solid rgba(255,231,0,0.43);
  border-radius: 24px;
  filter: drop-shadow(0 24px 58px rgba(0,0,0,0.68));
}
.amx-hero__visual::before,
.amx-hero__visual::after {
  display: block;
  width: 72%;
  opacity: 0.34;
  filter: blur(4px) brightness(0.76);
  transform: translateX(-96%) rotate(-4deg) scale(0.72);
}
.amx-hero__visual::after {
  transform: translateX(96%) rotate(4deg) scale(0.72);
  opacity: 0.26;
}
.amx-marquee {
  padding-block: 22px;
}

@media (max-width: 959px) {
  .amx-header .mx-container {
    max-width: none;
  }
}
@media (max-width: 720px) {
  .amx-header {
    position: absolute;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
    padding-top: 12px;
  }
  .amx-header__brand img {
    height: 33px;
  }
  .amx-hero {
    min-height: 1230px;
    padding-top: 112px;
  }
  .amx-hero::before {
    background:
      linear-gradient(180deg, rgba(5,5,5,0) 0%, rgba(5,5,5,0) 84%, #050505 100%),
      radial-gradient(circle at 50% 45%, rgba(255,231,0,0.16), transparent 42%);
  }
  .amx-hero__visual {
    width: min(240px, 62vw);
  }
  .amx-hero__visual::before,
  .amx-hero__visual::after {
    display: block;
    width: 92%;
    opacity: 0.42;
    transform: translateX(-62%) rotate(-4deg) scale(0.9);
  }
  .amx-hero__visual::after {
    transform: translateX(62%) rotate(4deg) scale(0.9);
    opacity: 0.34;
  }
  .amx-hero__copy {
    margin-top: 220px;
    padding-inline: 0;
    gap: 18px;
  }
  .amx-hero__pill {
    transform: scale(0.78);
  }
  .amx-hero__headline {
    font-size: clamp(28px, 8vw, 32px);
    line-height: 1.11;
    max-width: 350px;
  }
  .amx-hero__body {
    max-width: 350px;
    font-size: 16px;
    line-height: 1.42;
  }
  .amx-hero__ctas {
    margin-top: 8px;
  }
  .amx-hero__cta {
    width: min(278px, 88vw);
    height: 50px;
    padding-inline: 18px;
    font-size: 13px;
  }
  .amx-marquee {
    margin-top: 0;
  }
}

/* ===========================================================
   HERO DESKTOP - reconstruido a partir das layers do Figma:
   CONTENT HERO + Conteudos celulares + Quadriculado/Luz.
   =========================================================== */
@media (min-width: 721px) {
  .amx-header {
    padding-block: 8px;
  }
  .amx-header .mx-container {
    max-width: none;
  }
  .amx-header__inner {
    justify-content: center;
    gap: 18px;
    min-height: 46px;
  }
  .amx-header__brand img {
    width: 94px;
    height: auto;
  }
  .amx-header__nav {
    gap: 6px;
  }
  .amx-header__nav a {
    white-space: nowrap;
    font-size: 12px;
    padding: 7px 10px;
  }
  .amx-header__cta.mx-btn {
    min-width: 130px;
    height: 34px;
    font-size: 12px;
    padding-inline: 18px;
  }
  .amx-hero {
    min-height: 565px;
    padding-top: 92px;
    padding-bottom: 0;
  }
  .amx-hero [data-mx-appear] {
    opacity: 1;
    transform: none;
  }
  .amx-hero::before {
    background:
      linear-gradient(180deg, rgba(5,5,5,0) 0%, rgba(5,5,5,0) 64%, #050505 100%),
      linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: auto, 118px 118px, 118px 118px;
    opacity: 0.72;
  }
  .amx-hero__inner {
    display: grid;
    grid-template-columns: minmax(360px, 0.84fr) minmax(420px, 1fr);
    align-items: start;
    gap: clamp(44px, 7vw, 96px);
    max-width: 1160px;
  }
  .amx-hero__copy {
    order: 1;
    align-items: flex-start;
    text-align: left;
    max-width: 520px;
    margin-top: 52px;
    gap: 22px;
  }
  .amx-hero__pill {
    align-self: flex-start;
    transform: none;
  }
  .amx-hero__pill::before {
    display: none;
  }
.amx-pill-logo img {
  display: none;
}
.amx-hero__headline {
    max-width: 520px;
    font-size: clamp(35px, 3.15vw, 43px);
    line-height: 1.02;
    letter-spacing: -0.045em;
    text-align: left;
    text-wrap: balance;
  }
  .amx-hero__body {
    max-width: 455px;
    font-size: 16px;
    line-height: 1.42;
    text-align: left;
    color: rgba(255,255,255,0.68);
  }
  .amx-hero__ctas {
    justify-content: flex-start;
    margin-top: 0;
  }
  .amx-hero__cta {
    height: 39px;
    padding-inline: 27px 20px;
    font-size: 9.5px;
    letter-spacing: 0;
    box-shadow: none;
  }
.amx-hero__visual {
    order: 2;
    justify-self: center;
    width: clamp(220px, 20vw, 258px);
    max-width: none;
    margin-top: 0;
    aspect-ratio: 258 / 462;
    isolation: isolate;
  }
  .amx-hero__visual::before,
  .amx-hero__visual::after {
    display: block;
    inset: auto;
    top: 10%;
    left: -62%;
    width: 74%;
    height: 82%;
    opacity: 0.64;
    filter: blur(5px) brightness(0.7) saturate(0.95);
    border-radius: 24px;
    z-index: 0;
    transform: rotate(-4deg);
  }
  .amx-hero__visual::after {
    left: auto;
    right: -62%;
    opacity: 0.54;
    transform: rotate(4deg);
  }
  .amx-hero__visual img {
    border-radius: 24px;
    border: 1px solid rgba(255,231,0,0.43);
    filter: drop-shadow(0 18px 42px rgba(0,0,0,0.65));
    z-index: 2;
  }
  .amx-hero__x {
    filter: blur(12px) saturate(1.18);
    mix-blend-mode: plus-lighter;
  }
.amx-marquee {
    margin-top: -76px;
    padding-block: 24px;
    border-block-color: rgba(255,255,255,0.04);
    background: linear-gradient(180deg, rgba(5,5,5,0), rgba(5,5,5,0.94));
  }
}

@media (min-width: 721px) and (max-width: 1024px) {
  .amx-header .mx-container {
    max-width: none;
  }
  .amx-header__nav {
    display: flex;
    gap: 8px;
  }
  .amx-header__cta {
    display: inline-flex !important;
  }
  .amx-header__burger {
    display: none !important;
  }
  .amx-hero__inner {
    max-width: 760px;
    grid-template-columns: 350px 220px;
    gap: 80px;
  }
  .amx-hero__copy {
    max-width: 350px;
    margin-top: 28px;
    padding-left: 18px;
    gap: 18px;
  }
  .amx-hero__headline {
    max-width: 350px;
    font-size: 25.5px;
    line-height: 1.09;
    letter-spacing: -0.04em;
  }
  .amx-hero__body {
    max-width: 338px;
    font-size: 11.5px;
    line-height: 1.42;
  }
  .amx-hero__cta {
    height: 30px;
    width: 125px;
    padding-inline: 10px;
    gap: 6px;
    font-size: 7.5px;
  }
  .amx-hero__pill {
    transform: scale(0.72);
    transform-origin: left center;
  }
  .amx-hero__visual {
    width: 190px;
    margin-top: 0;
  }
}

/* ===========================================================
   REVISAO VISUAL - Hero/Figma assets + interacoes finais
   =========================================================== */
:root {
  --amx-yellow: #ffe700;
  --amx-bg: #050505;
  --amx-card: rgba(16, 16, 16, 0.76);
  --amx-card-strong: rgba(18, 18, 18, 0.92);
  --amx-line: rgba(255, 255, 255, 0.09);
}

body {
  background: var(--amx-bg);
}

.mx-container {
  width: min(100% - 40px, 1180px);
}

.mx-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  width: fit-content;
  padding: 5px 13px 5px 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 999px !important;
  background: rgba(24, 24, 24, 0.78) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35), 0 0 24px rgba(255, 231, 0, 0.08);
  color: rgba(255, 255, 255, 0.88) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
}

.mx-pill::before {
  content: "Stocco";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 67px;
  height: 25px;
  flex: 0 0 67px;
  border-radius: 999px;
  background: var(--amx-yellow);
  color: #050505;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -0.08em;
}

.mx-btn {
  transform: translateZ(0);
  transition: transform 260ms var(--ease-out-quart), box-shadow 260ms var(--ease-out-quart), background 260ms var(--ease-out-quart), border-color 260ms var(--ease-out-quart);
}

.mx-btn:hover {
  transform: translateY(-2px);
}

.mx-btn--primary:hover {
  background: #fff269 !important;
  box-shadow: 0 16px 42px rgba(255, 231, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.15) inset !important;
}

.mx-btn:hover .mx-btn-arrow,
.amx-urgency__highlight:hover svg {
  transform: translateX(5px);
}

.mx-btn-arrow,
.amx-urgency__highlight svg {
  transition: transform 260ms var(--ease-out-quart);
}

[data-mx-appear] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 700ms var(--ease-out-expo), transform 700ms var(--ease-out-expo);
}

[data-mx-appear="scale"] {
  transform: scale(0.95);
}

[data-mx-appear].is-visible,
.is-visible {
  opacity: 1;
  transform: none;
}

.amx-header {
  position: fixed !important;
  top: 18px !important;
  left: 0;
  right: 0;
  z-index: 80;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.amx-header__inner {
  width: fit-content;
  min-height: 58px !important;
  margin-inline: auto;
  padding: 0 17px !important;
  gap: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  background: rgba(9, 9, 9, 0.72);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(16px);
}

.amx-header__brand-tag {
  display: none !important;
}

.amx-header__brand img {
  width: 106px !important;
  height: auto !important;
}

.amx-header__nav {
  display: flex !important;
  gap: 4px !important;
}

.amx-header__nav a {
  min-height: 34px;
  padding: 0 15px !important;
  border-radius: 999px;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.76) !important;
}

.amx-header__nav a:first-child {
  background: var(--amx-yellow);
  color: #050505 !important;
  font-weight: 800;
}

.amx-header__cta {
  min-width: 136px !important;
  height: 38px !important;
  border-color: rgba(255, 231, 0, 0.8) !important;
}

.amx-hero {
  position: relative !important;
  display: flex;
  align-items: flex-start;
  min-height: 650px !important;
  padding: 116px 0 44px !important;
  overflow: hidden !important;
  background: #050505 !important;
  isolation: isolate;
}

.amx-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.08), rgba(5, 5, 5, 0) 50%, #050505 100%),
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: auto, 118px 118px, 118px 118px;
  opacity: 0.62;
}

.amx-hero__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.amx-hero__grid {
  position: absolute;
  inset: -80px 0 0;
  width: 100%;
  height: calc(100% + 80px);
  object-fit: cover;
  opacity: 0.22;
  mix-blend-mode: screen;
}

.amx-hero__light {
  position: absolute;
  width: 56vw;
  min-width: 560px;
  max-width: 980px;
  opacity: 0.54;
  filter: blur(20px) saturate(1.15);
  mix-blend-mode: screen;
}

.amx-hero__light--main {
  right: -11vw;
  top: 74px;
}

.amx-hero__light--soft {
  left: -25vw;
  bottom: -220px;
  opacity: 0.14;
  transform: rotate(180deg);
}

.amx-hero__x--main {
  position: absolute !important;
  top: 102px !important;
  right: clamp(22px, 8vw, 190px) !important;
  display: block !important;
  width: clamp(420px, 42vw, 700px) !important;
  opacity: 0.58 !important;
  filter: blur(12px) saturate(1.15) !important;
  transform: rotate(-3deg) !important;
  mix-blend-mode: plus-lighter !important;
}

.amx-hero__inner {
  position: relative;
  z-index: 2;
  display: grid !important;
  grid-template-columns: minmax(410px, 510px) minmax(320px, 1fr) !important;
  align-items: start !important;
  gap: clamp(46px, 8vw, 118px) !important;
  max-width: 1180px !important;
}

.amx-hero__copy {
  position: relative;
  z-index: 6;
  order: 1;
  align-items: flex-start !important;
  text-align: left !important;
  max-width: 520px !important;
  margin-top: 64px !important;
  gap: 22px !important;
  padding-left: 0 !important;
}

.amx-hero__pill::before {
  content: "Stocco";
}

.amx-hero__headline {
  max-width: 535px !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(43px, 4vw, 58px) !important;
  line-height: 0.99 !important;
  letter-spacing: -0.055em !important;
  text-align: left !important;
}

.amx-hero__headline em {
  color: var(--amx-yellow);
  font-style: normal;
  font-weight: 800;
}

.amx-hero__body {
  max-width: 500px !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.68) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  text-align: left !important;
}

.amx-hero__ctas {
  margin-top: 4px !important;
  justify-content: flex-start !important;
}

.amx-hero__cta {
  height: 42px !important;
  min-width: 170px !important;
  padding: 0 20px 0 25px !important;
  font-size: 10px !important;
}

.amx-hero__visual {
  position: relative !important;
  order: 2;
  justify-self: center !important;
  width: clamp(218px, 19vw, 282px) !important;
  max-width: none !important;
  aspect-ratio: 258 / 462;
  margin-top: 0 !important;
  isolation: isolate;
}

.amx-hero [data-mx-appear] {
  opacity: 1 !important;
  transform: none !important;
}

.amx-hero__visual::before,
.amx-hero__visual::after {
  content: none !important;
  display: none !important;
}

.amx-hero__phone {
  position: absolute;
  display: block;
  width: 100%;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 25px;
}

.amx-hero__phone--main {
  inset: 0;
  z-index: 5;
  border: 1px solid rgba(255, 231, 0, 0.55);
  opacity: 1 !important;
  transform: none !important;
  filter: drop-shadow(0 22px 54px rgba(0, 0, 0, 0.76)) !important;
}

.amx-hero__phone--ghost {
  z-index: 1;
  top: 10%;
  opacity: 0.5;
  filter: blur(6px) brightness(0.56) saturate(0.9);
  transform-origin: center;
}

.amx-hero__phone--left {
  left: -70%;
  transform: translateY(4%) rotate(-4deg) scale(0.86) !important;
}

.amx-hero__phone--right {
  right: -70%;
  transform: translateY(4%) rotate(4deg) scale(0.86) !important;
}

.amx-marquee {
  position: relative !important;
  z-index: 4 !important;
  margin-top: 0 !important;
  padding: 17px 0 28px !important;
  border: 0 !important;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.22), #050505 78%) !important;
  overflow: hidden;
}

.amx-marquee__pill {
  color: rgba(255, 255, 255, 0.42) !important;
  font-family: var(--font-body) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

.amx-marquee__sep {
  color: rgba(255, 231, 0, 0.18) !important;
}

.amx-paraquem {
  position: relative;
  padding-top: clamp(76px, 8vw, 110px) !important;
  padding-bottom: clamp(78px, 9vw, 130px) !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 231, 0, 0.12), transparent 32%),
    radial-gradient(circle at 12% 72%, rgba(255, 231, 0, 0.08), transparent 28%),
    #050505 !important;
}

.amx-paraquem::before,
.amx-pillars::before,
.amx-urgency::before,
.mx-cta-faq-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("../assets/images/hero-bg/quadriculado.png");
  background-size: cover;
  background-position: center;
  opacity: 0.14;
  mix-blend-mode: screen;
}

.amx-paraquem__head,
.amx-workflow__head,
.amx-pillars__head {
  position: relative;
  z-index: 2;
  text-align: center;
}

.amx-paraquem__title,
.amx-pillars__title,
.mx-faq__title {
  letter-spacing: -0.055em !important;
}

.amx-paraquem__grid {
  position: relative;
  z-index: 2;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  margin-top: 54px !important;
}

.amx-paraquem__card,
.amx-workflow__card,
.amx-pillars__face {
  border: 1px solid var(--amx-line) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
    var(--amx-card) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 22px 65px rgba(0, 0, 0, 0.24);
}

.amx-paraquem__card {
  min-height: 210px !important;
  padding: 34px 30px !important;
  border-radius: 17px !important;
  transition: transform 320ms var(--ease-out-quart), border-color 320ms var(--ease-out-quart), box-shadow 320ms var(--ease-out-quart);
}

.amx-paraquem__card:hover {
  transform: translateY(-9px);
  border-color: rgba(255, 231, 0, 0.28) !important;
  box-shadow: 0 24px 70px rgba(255, 231, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.amx-paraquem__icon,
.amx-workflow__icon,
.amx-pillars__icon {
  background: rgba(255, 231, 0, 0.12) !important;
  color: var(--amx-yellow) !important;
  border-radius: 10px !important;
}

.amx-workflow {
  position: relative;
  overflow: hidden;
  padding-top: clamp(90px, 10vw, 150px) !important;
  padding-bottom: clamp(80px, 9vw, 125px) !important;
  background: #050505 !important;
}

.amx-workflow::after {
  content: "";
  position: absolute;
  right: -18vw;
  top: 47%;
  width: 52vw;
  height: 52vw;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 231, 0, 0.18), transparent 62%);
  filter: blur(8px);
}

.amx-workflow__title {
  max-width: 840px !important;
  margin: 24px auto 0 !important;
  font-size: clamp(42px, 5vw, 72px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.055em !important;
  text-align: center !important;
}

.amx-workflow__title em {
  display: block;
  color: var(--amx-yellow);
  font-style: normal;
  font-weight: 800;
}

.amx-workflow__viewport {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 58px;
  padding: 34px 0 42px;
  overflow-x: auto;
  overflow-y: visible;
  cursor: grab;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.amx-workflow__viewport::-webkit-scrollbar {
  display: none;
}

.amx-workflow__viewport.is-dragging {
  cursor: grabbing;
}

.amx-workflow__track {
  display: flex !important;
  width: max-content;
  gap: 24px !important;
  padding-inline: max(24px, calc((100vw - 1180px) / 2));
  animation: amxWorkflowLoop 38s linear infinite;
}

.amx-workflow__viewport:hover .amx-workflow__track,
.amx-workflow__viewport.is-dragging .amx-workflow__track {
  animation-play-state: paused;
}

.amx-workflow__card {
  width: clamp(270px, 22vw, 342px) !important;
  min-height: 285px !important;
  padding: 34px 28px !important;
  flex: 0 0 auto;
  border-radius: 17px !important;
  transition: transform 300ms var(--ease-out-quart), border-color 300ms var(--ease-out-quart), background 300ms var(--ease-out-quart);
}

.amx-workflow__card:hover {
  transform: translateY(-12px);
  border-color: rgba(255, 231, 0, 0.3) !important;
  background: linear-gradient(180deg, rgba(255, 231, 0, 0.07), rgba(255, 255, 255, 0.018)), var(--amx-card-strong) !important;
}

.amx-workflow__card h3 {
  margin: 24px 0 14px;
  color: #fff;
  font-size: 21px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.amx-workflow__card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 16px;
  line-height: 1.52;
}

.amx-workflow__action {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  text-align: center;
}

.amx-drag-hint {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--amx-yellow);
}

.amx-drag-hint__arrow {
  width: 34px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  position: relative;
  animation: amxHintPulse 1.45s ease-in-out infinite;
}

.amx-drag-hint__arrow::before,
.amx-drag-hint__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
}

.amx-drag-hint__arrow--left::before,
.amx-drag-hint__arrow--left::after {
  left: 0;
  transform-origin: left center;
}

.amx-drag-hint__arrow--left::before {
  transform: translateY(-50%) rotate(38deg);
}

.amx-drag-hint__arrow--left::after {
  transform: translateY(-50%) rotate(-38deg);
}

.amx-drag-hint__arrow--right::before,
.amx-drag-hint__arrow--right::after {
  right: 0;
  transform-origin: right center;
}

.amx-drag-hint__arrow--right::before {
  transform: translateY(-50%) rotate(38deg);
}

.amx-drag-hint__arrow--right::after {
  transform: translateY(-50%) rotate(-38deg);
}

.amx-drag-hint__dot {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: var(--amx-yellow);
  box-shadow: 0 0 20px rgba(255, 231, 0, 0.65);
}

.amx-drag-hint__text {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 13px;
}

.amx-pillars,
.amx-urgency {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 79% 45%, rgba(255, 231, 0, 0.15), transparent 32%),
    #050505 !important;
}

.amx-pillars {
  padding-bottom: clamp(62px, 7vw, 95px) !important;
}

.amx-pillars__hover-hint {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 32px 0 28px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

.amx-mouse-icon {
  width: 24px;
  height: 34px;
  border: 2px solid var(--amx-yellow);
  border-radius: 14px;
  position: relative;
  box-shadow: 0 0 20px rgba(255, 231, 0, 0.25);
}

.amx-mouse-icon::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 7px;
  border-radius: 999px;
  background: var(--amx-yellow);
  transform: translateX(-50%);
  animation: amxMouseWheel 1.4s ease-in-out infinite;
}

.amx-pillars__grid {
  position: relative;
  z-index: 2;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  perspective: 1200px;
}

.amx-pillars__card {
  min-height: 306px !important;
  border: 0 !important;
  background: transparent !important;
  perspective: 1200px;
}

.amx-pillars__card-inner {
  position: relative;
  width: 100%;
  min-height: 306px;
  transform-style: preserve-3d;
  transition: transform 720ms cubic-bezier(0.2, 0.75, 0.15, 1);
}

.amx-pillars__card:hover .amx-pillars__card-inner {
  transform: rotateY(180deg) translateY(-4px);
}

.amx-pillars__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 30px !important;
  border-radius: 18px !important;
  backface-visibility: hidden;
  overflow: hidden;
}

.amx-pillars__front {
  justify-content: space-between;
}

.amx-pillars__front h3 {
  margin: auto 0 0;
  max-width: 88%;
  color: #fff;
  font-size: 26px;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.amx-pillars__back {
  justify-content: center;
  transform: rotateY(180deg);
  border-color: rgba(255, 231, 0, 0.24) !important;
}

.amx-pillars__back p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 18px;
  line-height: 1.55;
}

.amx-pillars__num {
  color: var(--amx-yellow) !important;
  font-family: var(--font-mono);
}

.amx-pillars__icon {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 43px;
  height: 43px;
}

.amx-urgency {
  padding: clamp(40px, 6vw, 76px) 0 clamp(86px, 9vw, 128px) !important;
}

.amx-urgency__inner {
  position: relative;
  z-index: 2;
  display: grid !important;
  grid-template-columns: minmax(360px, 0.9fr) minmax(360px, 1fr) !important;
  align-items: center;
  gap: clamp(26px, 5vw, 74px);
  min-height: 430px !important;
  padding: clamp(48px, 5.8vw, 78px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background: radial-gradient(circle at 78% 48%, rgba(255, 231, 0, 0.14), transparent 42%), rgba(8, 8, 8, 0.74);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.amx-urgency__copy {
  max-width: 540px;
}

.amx-urgency__title {
  margin: 24px 0 24px !important;
  font-size: clamp(38px, 4.6vw, 64px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.055em !important;
}

.amx-urgency__title em {
  color: var(--amx-yellow);
  font-style: normal;
}

.amx-urgency__highlight {
  display: inline-flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(100%, 500px);
  min-height: 44px;
  margin-top: 18px;
  padding: 0 16px;
  border: 1px solid rgba(255, 231, 0, 0.36);
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.5);
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  text-decoration: none;
  transition: border-color 260ms var(--ease-out-quart), background 260ms var(--ease-out-quart);
}

.amx-urgency__highlight:hover {
  border-color: rgba(255, 231, 0, 0.75);
  background: rgba(255, 231, 0, 0.06);
}

.amx-urgency__highlight strong {
  color: #fff;
}

.amx-urgency__visual img {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  filter: drop-shadow(0 24px 60px rgba(255, 231, 0, 0.14));
}

.mx-cta-faq-wrap {
  position: relative;
  overflow: hidden;
  padding: clamp(86px, 10vw, 150px) 0 clamp(54px, 7vw, 94px);
  background: #050505;
}

.mx-cta-faq-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.mx-cta-faq-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.12;
  mix-blend-mode: screen;
}

.mx-cta-faq-bg span {
  position: absolute;
  right: -18vw;
  top: 8%;
  width: 48vw;
  height: 48vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 231, 0, 0.2), transparent 64%);
  filter: blur(10px);
}

.mx-cta,
.mx-faq,
.mx-footer {
  position: relative;
  z-index: 2;
}

.mx-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 34px;
  padding: clamp(34px, 5vw, 58px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  background: radial-gradient(circle at 78% 48%, rgba(255, 231, 0, 0.12), transparent 42%), rgba(11, 11, 11, 0.82);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.28);
}

.mx-cta__title,
.mx-faq__title {
  margin: 22px 0 14px;
  color: #fff;
  font-size: clamp(38px, 5vw, 66px);
  line-height: 1.02;
}

.mx-cta__title em,
.mx-faq__title em {
  color: var(--amx-yellow);
  font-style: normal;
}

.mx-cta__body,
.mx-faq__head p {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 17px;
  line-height: 1.55;
}

.mx-cta__button {
  white-space: nowrap;
}

.mx-faq {
  margin-top: clamp(66px, 8vw, 108px);
}

.mx-faq__head {
  text-align: center;
}

.mx-faq__list {
  display: grid;
  gap: 12px;
  width: min(100%, 900px);
  margin: 44px auto 0;
}

.mx-faq-item {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  background: rgba(13, 13, 13, 0.78);
  overflow: hidden;
  transition: border-color 260ms var(--ease-out-quart), background 260ms var(--ease-out-quart);
}

.mx-faq-item.is-open,
.mx-faq-item:hover {
  border-color: rgba(255, 231, 0, 0.28);
  background: rgba(18, 18, 18, 0.92);
}

.mx-faq-item__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 24px 26px;
  border: 0;
  background: transparent;
  color: #fff;
  font: 800 19px/1.2 var(--font-body);
  text-align: left;
  cursor: pointer;
}

.mx-faq-item__summary svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--amx-yellow);
  transition: transform 260ms var(--ease-out-quart);
}

.mx-faq-item.is-open .mx-faq-item__summary svg {
  transform: rotate(45deg);
}

.mx-faq-item__content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms var(--ease-out-quart);
}

.mx-faq-item.is-open .mx-faq-item__content {
  grid-template-rows: 1fr;
}

.mx-faq-item__content p {
  min-height: 0;
  margin: 0;
  padding: 0 26px 24px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 16px;
  line-height: 1.6;
  overflow: hidden;
}

.mx-footer {
  padding: 56px 0 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #050505;
}

.mx-footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 44px;
  align-items: start;
}

.mx-footer__brand img {
  width: 86px;
  height: auto;
  object-fit: contain;
}

.mx-footer__brand p {
  max-width: 330px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  line-height: 1.55;
}

.mx-footer__nav,
.mx-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mx-footer a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 200ms var(--ease-out-quart);
}

.mx-footer a:hover {
  color: var(--amx-yellow);
}

.mx-footer__bar {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.42);
  font-size: 13px;
}

@keyframes amxWorkflowLoop {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 12px)); }
}

@keyframes amxHintPulse {
  0%, 100% { opacity: 0.38; transform: scaleX(0.78); }
  50% { opacity: 1; transform: scaleX(1); }
}

@keyframes amxMouseWheel {
  0%, 100% { opacity: 1; transform: translate(-50%, 0); }
  50% { opacity: 0.45; transform: translate(-50%, 9px); }
}

@media (max-width: 1024px) {
  .amx-header__inner {
    width: calc(100% - 32px);
    justify-content: space-between;
  }

  .amx-header__nav,
  .amx-header__cta {
    display: none !important;
  }

  .amx-header__burger {
    display: inline-flex !important;
  }

  .amx-hero {
    min-height: 610px !important;
    padding-top: 104px !important;
  }

  .amx-hero__inner {
    grid-template-columns: minmax(320px, 430px) minmax(220px, 280px) !important;
    gap: clamp(30px, 7vw, 70px) !important;
    width: min(100% - 44px, 820px);
  }

  .amx-hero__copy {
    margin-top: 34px !important;
  }

  .amx-hero__headline {
    font-size: clamp(34px, 4.9vw, 44px) !important;
  }

  .amx-hero__body {
    font-size: 14px !important;
  }

  .amx-hero__visual {
    width: clamp(188px, 23vw, 225px) !important;
  }

  .amx-hero__x--main {
    right: -4vw !important;
    width: 520px !important;
  }

  .amx-paraquem__grid,
  .amx-pillars__grid,
  .amx-urgency__inner,
  .mx-footer__inner {
    grid-template-columns: 1fr !important;
  }

  .amx-paraquem__card,
  .amx-pillars__card {
    min-height: 245px !important;
  }

  .amx-pillars__card-inner {
    min-height: 245px;
  }

  .amx-urgency__inner {
    padding: 38px !important;
  }

  .amx-urgency__visual {
    order: -1;
  }

  .mx-cta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .mx-container {
    width: min(100% - 28px, 1180px);
  }

  .mx-pill {
    min-height: 32px;
    font-size: 12px !important;
  }

  .mx-pill::before {
    width: 58px;
    height: 22px;
    flex-basis: 58px;
    font-size: 10px;
  }

  .amx-header {
    top: 12px !important;
  }

  .amx-header__inner {
    min-height: 52px !important;
  }

  .amx-hero {
    min-height: auto !important;
    padding: 96px 0 28px !important;
  }

  .amx-hero__inner {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 32px !important;
  }

  .amx-hero__copy {
    margin-top: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .amx-hero__headline {
    max-width: 100% !important;
    font-size: clamp(31px, 9.2vw, 35px) !important;
    line-height: 1.04 !important;
    overflow-wrap: break-word;
  }

  .amx-hero__body {
    font-size: 15px !important;
  }

  .amx-hero__visual {
    align-self: center;
    width: min(58vw, 230px) !important;
    margin-top: 8px !important;
  }

  .amx-hero__phone--ghost {
    opacity: 0.34;
  }

  .amx-hero__x--main {
    top: 285px !important;
    right: -155px !important;
    width: 540px !important;
    opacity: 0.4 !important;
  }

  .amx-workflow__title,
  .amx-urgency__title,
  .mx-cta__title,
  .mx-faq__title {
    font-size: clamp(36px, 11vw, 48px) !important;
  }

  .amx-workflow__viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }

  .amx-workflow__track {
    padding-inline: 20px;
  }

  .amx-workflow__card {
    width: min(78vw, 310px) !important;
  }

  .amx-pillars__front h3 {
    font-size: 23px;
  }

  .amx-urgency__inner,
  .mx-cta {
    border-radius: 18px;
    padding: 28px !important;
  }

  .amx-urgency__highlight {
    align-items: flex-start;
    border-radius: 18px;
    padding-block: 13px;
  }

  .mx-footer__bar {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .amx-workflow__track,
  .amx-drag-hint__arrow,
  .amx-mouse-icon::before {
    animation: none !important;
  }
}

/* ===========================================================
   FINAL DESIGN PASS - Figma DS + responsive refinements
   =========================================================== */
:root {
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;
  --brand-default: #ffe700;
  --brand-hover: #fff166;
  --brand-active: #e6d000;
  --brand-fg: #050505;
  --bg-primary: #050505;
  --text-primary: #ffffff;
  --text-muted: #b8b8b8;
}

html {
  scroll-padding-top: 110px;
}

body,
button,
input,
textarea,
select {
  font-family: var(--font-body);
}

h1,
h2,
h3,
.text-display-md,
.text-display-sm,
.text-heading-xl,
.text-heading-lg,
.mx-section__title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
}

.mx-text-accent {
  color: var(--brand-default);
}

.amx-header::before,
.amx-header::after,
.amx-header__inner::before,
.amx-header__inner::after {
  content: none !important;
  display: none !important;
  backdrop-filter: none !important;
}

.amx-header {
  top: 18px !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

.amx-header__inner {
  position: relative;
  width: fit-content !important;
  min-height: 58px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  background: rgba(8, 8, 8, 0.76) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  backdrop-filter: blur(18px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.1) !important;
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.36) !important;
}

.amx-header__nav {
  position: relative;
  isolation: isolate;
  display: flex !important;
  align-items: center;
  gap: 4px !important;
  min-height: 38px;
}

.amx-header__nav-indicator {
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 66px;
  border-radius: 999px;
  background: var(--brand-default);
  z-index: -1;
  transition: transform 360ms var(--ease-out-expo), width 360ms var(--ease-out-expo);
}

.amx-header__nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 15px !important;
  border-radius: 999px;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font: 600 13px/1 var(--font-body) !important;
  transition: color 240ms var(--ease-out-quart);
}

.amx-header__nav a.is-active,
.amx-header__nav a:first-child.is-active {
  color: #050505 !important;
  font-weight: 800 !important;
}

.amx-header__nav a:first-child:not(.is-active) {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

.amx-header__cta {
  border-color: rgba(255, 231, 0, 0.72) !important;
  background: rgba(0, 0, 0, 0.18) !important;
  color: #fff !important;
}

.mx-pill,
.mx-pill.mx-pill--solid {
  min-height: clamp(52px, 4vw, 70px) !important;
  gap: clamp(18px, 2.2vw, 28px) !important;
  padding: 8px clamp(26px, 3vw, 42px) 8px 10px !important;
  border-radius: 999px !important;
  background: rgba(18, 18, 18, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 22px 48px rgba(0, 0, 0, 0.34) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-family: var(--font-body) !important;
  font-size: clamp(19px, 1.55vw, 31px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.04em !important;
  text-transform: none !important;
}

.mx-pill::before,
.mx-pill.mx-pill--solid::before {
  content: "" !important;
  width: clamp(128px, 11vw, 180px) !important;
  height: clamp(40px, 3.2vw, 58px) !important;
  flex: 0 0 clamp(128px, 11vw, 180px) !important;
  border-radius: 999px !important;
  background-color: var(--brand-default) !important;
  background-image: url("../assets/images/metodox-logo-pill.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 76% auto !important;
  box-shadow: 0 0 24px rgba(255, 231, 0, 0.22), inset 0 -10px 22px rgba(255, 255, 255, 0.26) !important;
}

.amx-hero__pill,
.amx-form__pill,
.amx-urgency__pill,
.amx-paraquem__head .mx-pill,
.amx-workflow__head .mx-pill,
.amx-pillars__head .mx-pill,
.mx-cta__container .mx-pill {
  transform: scale(0.58) !important;
  transform-origin: left center !important;
  margin-left: -75px;
  margin-bottom: -12px;
}

.amx-paraquem__head .mx-pill,
.amx-workflow__head .mx-pill,
.amx-pillars__head .mx-pill,
.mx-cta__container .mx-pill {
  transform-origin: center !important;
  margin-left: 0;
}

.mx-btn--primary,
.amx-workflow__cta,
.amx-hero__cta {
  height: 54px !important;
  min-width: 250px !important;
  padding: 0 28px !important;
  border-radius: 999px !important;
  background: var(--brand-default) !important;
  color: #050505 !important;
  font: 800 16px/1 var(--font-body) !important;
  text-transform: uppercase;
  letter-spacing: -0.01em !important;
  box-shadow: none !important;
}

.mx-btn--primary .mx-btn-arrow {
  width: 22px;
  height: 22px;
  transform: rotate(-45deg);
  transform-origin: center;
  transition: transform 280ms var(--ease-out-quart);
}

.mx-btn--primary:hover {
  background: var(--brand-active) !important;
  transform: translateY(-2px) !important;
}

.mx-btn--primary:hover .mx-btn-arrow {
  transform: rotate(90deg) translateX(1px) !important;
}

.amx-hero {
  min-height: clamp(650px, 45vw, 810px) !important;
  padding-top: clamp(116px, 8vw, 148px) !important;
  box-shadow: inset 0 -100px 80px #050505 !important;
}

.amx-hero__x--main {
  z-index: 1 !important;
  top: clamp(88px, 8vw, 128px) !important;
  right: clamp(20px, 10vw, 260px) !important;
  width: clamp(620px, 49vw, 980px) !important;
  opacity: 0.36 !important;
  filter: blur(9px) saturate(1.25) !important;
  mix-blend-mode: screen !important;
}

.amx-hero__visual {
  z-index: 3 !important;
  width: clamp(230px, 18vw, 300px) !important;
}

.amx-hero__phone--ghost {
  opacity: 0.42 !important;
  filter: blur(7px) brightness(0.58) saturate(0.95) !important;
}

.amx-hero__headline {
  max-width: 610px !important;
  font-size: clamp(48px, 4.25vw, 68px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.055em !important;
}

.amx-hero__body {
  max-width: 540px !important;
  font-size: clamp(15px, 1.1vw, 18px) !important;
  line-height: 1.55 !important;
}

.amx-paraquem,
.amx-workflow,
.amx-pillars,
.amx-urgency,
.mx-cta-faq-wrap {
  box-shadow: inset 0 110px 78px #050505, inset 0 -110px 78px #050505 !important;
}

.amx-paraquem::before,
.amx-pillars::before,
.amx-urgency::before,
.mx-cta-faq-wrap::before {
  opacity: 0.2 !important;
  background-image: url("../assets/images/hero-bg/quadriculado.png") !important;
}

.amx-paraquem {
  background:
    radial-gradient(circle at 86% 49%, rgba(255, 231, 0, 0.12), transparent 15%),
    radial-gradient(circle at 12% 72%, rgba(255, 231, 0, 0.08), transparent 18%),
    #050505 !important;
}

.amx-paraquem__title,
.amx-pillars__title,
.amx-workflow__title,
.mx-section__title,
.mx-cta__headline {
  font-size: clamp(44px, 4.5vw, 68px) !important;
  line-height: 1.04 !important;
  max-width: 980px;
  margin-inline: auto;
}

.amx-paraquem__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}

.amx-paraquem__card {
  display: flex !important;
  flex-direction: column;
  justify-content: center !important;
  align-items: center;
  text-align: center;
  min-height: 235px !important;
  background: rgba(12, 12, 12, 0.56) !important;
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
}

.amx-paraquem__card-title {
  max-width: 340px;
  font-size: clamp(20px, 1.45vw, 26px) !important;
  line-height: 1.15 !important;
}

.amx-paraquem__card-body {
  max-width: 335px;
  font-size: clamp(14px, 1vw, 16px) !important;
  line-height: 1.5 !important;
}

.amx-workflow::after {
  right: -10vw !important;
  top: 20% !important;
}

.amx-workflow__viewport {
  width: min(1120px, calc(100vw - 220px)) !important;
  margin-inline: auto !important;
  overflow: hidden !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%) !important;
}

.amx-workflow__viewport:hover .amx-workflow__track {
  animation-play-state: running !important;
}

.amx-workflow__viewport.is-card-hovered .amx-workflow__track,
.amx-workflow__viewport.is-dragging .amx-workflow__track {
  animation-play-state: paused !important;
}

.amx-workflow__track {
  padding-inline: 0 !important;
  gap: 26px !important;
}

.amx-workflow__card {
  width: clamp(310px, 22vw, 360px) !important;
  min-height: 288px !important;
}

.amx-pillars,
.amx-urgency {
  background:
    radial-gradient(circle at 93% 56%, rgba(255, 231, 0, 0.15), transparent 17%),
    #050505 !important;
}

.amx-pillars {
  overflow: hidden !important;
}

.amx-pillars .mx-container {
  overflow: visible;
}

.amx-pillars__grid {
  padding: 22px 0 24px !important;
  overflow: visible !important;
}

.amx-pillars__card,
.amx-pillars__card-inner {
  min-height: 322px !important;
}

.amx-pillars__card:hover .amx-pillars__card-inner {
  transform: rotateY(180deg) translateY(-2px) !important;
}

.amx-pillars__hover-hint {
  margin: 6px 0 0 !important;
}

.amx-urgency {
  overflow: hidden !important;
}

.amx-urgency::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 10%, rgba(255, 231, 0, 0.08) 32%, rgba(255, 231, 0, 0.22) 45%, rgba(255, 231, 0, 0.06) 58%, transparent 78%);
  background-size: 220% 100%;
  animation: amxMetalSweep 8s ease-in-out infinite;
  opacity: 0.9;
}

.amx-urgency__inner {
  position: relative;
  z-index: 2;
  grid-template-columns: minmax(380px, 0.86fr) minmax(430px, 1fr) !important;
  background:
    radial-gradient(circle at 77% 48%, rgba(255, 231, 0, 0.17), transparent 42%),
    rgba(5, 5, 5, 0.72) !important;
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
}

.amx-urgency__copy[data-mx-appear].is-visible .amx-urgency__title {
  animation: amxTypeIn 900ms steps(18, end) both;
  overflow: hidden;
}

.amx-urgency__visual img {
  max-width: 650px !important;
  transform: scale(1.08);
  transition: transform 450ms var(--ease-out-quart), filter 450ms var(--ease-out-quart);
}

.amx-urgency__visual:hover img {
  transform: scale(1.12) translateY(-5px);
  filter: drop-shadow(0 32px 90px rgba(255, 231, 0, 0.24));
}

.amx-urgency__highlight {
  min-height: 50px !important;
  font-size: 15px !important;
}

.amx-urgency__highlight svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 auto;
}

.amx-urgency__highlight:hover {
  transform: translateY(-2px);
}

.mx-cta-faq-wrap {
  background-color: #050505 !important;
  isolation: isolate;
}

.mx-cta-faq-wrap::before {
  background-image: url("../assets/images/textures/vetores.png") !important;
  background-position: center center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  opacity: 0.7 !important;
  mix-blend-mode: lighten !important;
}

.mx-cta {
  background: transparent !important;
  padding-block: clamp(80px, 10vw, 160px) !important;
}

.mx-cta__stage {
  max-width: 1132px !important;
  margin-inline: auto !important;
  width: calc(100% - 32px) !important;
  padding: clamp(40px, 5vw, 64px) !important;
  border-radius: 35px !important;
  background: rgba(8, 8, 8, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(24px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
  text-align: center;
}

.mx-cta__container {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  gap: 24px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.mx-cta__headline {
  color: var(--color-brand-50, #fffef0) !important;
  font-size: clamp(32px, 4.5vw, 53px) !important;
  line-height: 1.18 !important;
}

.mx-cta__sub {
  max-width: 738px !important;
  color: #f6f8fc !important;
  font-size: clamp(16px, 1.6vw, 25px) !important;
  line-height: 1.4 !important;
}

.mx-cta__btn {
  display: inline-flex !important;
  align-items: center;
  gap: 24px;
  padding: 12px 32px 12px 14px;
  border-radius: 104px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.87);
  font: 500 clamp(16px, 1.6vw, 22px)/1 var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 250ms var(--ease-out-quart), box-shadow 250ms var(--ease-out-quart), background-color 250ms var(--ease-out-quart);
}

.mx-cta__btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 56px;
  border-radius: 999px;
  background: linear-gradient(157.85deg, #fff 9.7%, var(--brand-default) 92.88%);
  color: var(--brand-fg);
  box-shadow: inset 0 0 32px var(--color-brand-400, #ffeb38);
  flex-shrink: 0;
}

.mx-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 96px rgba(255, 231, 0, 0.35);
  background: rgba(0, 0, 0, 0.4);
}

.mx-faq {
  padding-block: clamp(80px, 10vw, 128px) !important;
  background: transparent !important;
}

.mx-faq .mx-section__head {
  margin-bottom: clamp(40px, 5vw, 64px) !important;
}

.mx-faq__list {
  max-width: 1280px !important;
  display: flex !important;
  flex-direction: column;
  gap: 16px !important;
  margin-inline: auto !important;
}

.mx-faq-item {
  background: rgba(8, 8, 8, 0.45) !important;
  border: 1px solid #1f1f1f !important;
  border-radius: 16px !important;
  overflow: hidden;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.mx-faq-item[data-state="open"] {
  border-color: var(--brand-default) !important;
  box-shadow: 0 0 24px rgba(255, 231, 0, 0.15) !important;
}

.mx-faq-item__summary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 32px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.mx-faq-item__q {
  font: 400 clamp(16px, 1.5vw, 20px)/1.4 var(--font-body) !important;
  color: #e5e5e5;
}

.mx-faq-item__q strong {
  color: #fff;
  font-weight: 700;
}

.mx-faq-item__icon {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 10px;
  background: var(--brand-default);
  color: var(--brand-fg);
  box-shadow: 0 0 24px rgba(255, 231, 0, 0.15);
  transition: transform 250ms var(--ease-out-quart);
}

.mx-faq-item__icon::before,
.mx-faq-item__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.mx-faq-item__icon::before {
  width: 18px;
  height: 2.5px;
}

.mx-faq-item__icon::after {
  width: 2.5px;
  height: 18px;
  transition: transform 250ms var(--ease-out-quart);
}

.mx-faq-item[data-state="open"] .mx-faq-item__icon {
  transform: rotate(180deg);
}

.mx-faq-item[data-state="open"] .mx-faq-item__icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.mx-faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 450ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mx-faq-item[data-state="open"] .mx-faq-item__answer {
  grid-template-rows: 1fr;
}

.mx-faq-item__answer-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 32px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 350ms ease, transform 350ms ease, padding-bottom 350ms ease;
}

.mx-faq-item[data-state="open"] .mx-faq-item__answer-inner {
  opacity: 1;
  transform: translateY(0);
  padding-bottom: 28px;
}

.mx-faq-item__answer-inner::before {
  content: "";
  display: block;
  border-top: 1.5px dashed rgba(255, 231, 0, 0.45);
  margin-bottom: 24px;
}

.mx-faq-item__answer-inner p {
  max-width: 80ch;
  margin: 0;
  color: #e5e5e5;
  font: 400 clamp(15px, 1.4vw, 18px)/1.6 var(--font-body);
}

.mx-footer {
  padding-block: clamp(64px, 8vw, 96px) !important;
  background: var(--bg-primary) !important;
  border-top: 1px solid #161616 !important;
}

.mx-footer__inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(24px, 6vw, 80px) !important;
  align-items: start !important;
  justify-items: start !important;
  text-align: left !important;
}

.mx-footer__left,
.mx-footer__right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mx-footer__left {
  gap: 32px;
}

.mx-footer__right {
  gap: 18px;
}

.mx-footer__logo {
  width: 180px !important;
  height: auto !important;
}

.mx-footer__social-icons,
.mx-footer__handles {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mx-footer__social-icons {
  display: flex;
  gap: 10px;
}

.mx-footer__social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--brand-default);
  color: var(--brand-fg);
}

.mx-footer a {
  text-decoration: none;
}

@keyframes amxMetalSweep {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes amxTypeIn {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@media (max-width: 1180px) {
  .amx-hero__headline {
    font-size: clamp(38px, 5vw, 52px) !important;
    max-width: 520px !important;
  }

  .amx-hero__body {
    max-width: 460px !important;
    font-size: 15px !important;
  }

  .amx-paraquem__title,
  .amx-pillars__title,
  .amx-workflow__title,
  .mx-section__title {
    font-size: clamp(40px, 5vw, 56px) !important;
  }
}

@media (max-width: 1024px) {
  .amx-header__inner {
    width: calc(100% - 32px) !important;
  }

  .amx-header__nav,
  .amx-header__cta {
    display: none !important;
  }

  .amx-paraquem__grid,
  .amx-pillars__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .amx-paraquem__card {
    padding: 24px 18px !important;
  }

  .amx-paraquem__card-title {
    font-size: 18px !important;
  }

  .amx-paraquem__card-body {
    font-size: 13px !important;
  }

  .amx-workflow__viewport {
    width: min(760px, calc(100vw - 72px)) !important;
  }

  .amx-urgency__inner {
    grid-template-columns: 1fr !important;
  }

  .amx-urgency__visual {
    order: 0 !important;
  }

  .amx-urgency__visual img {
    max-width: 580px !important;
    transform: scale(1.03);
  }
}

@media (max-width: 767px) {
  html {
    scroll-padding-top: 86px;
  }

  .amx-header {
    top: 12px !important;
  }

  .amx-header__inner {
    min-height: 52px !important;
  }

  .mx-pill,
  .mx-pill.mx-pill--solid {
    transform: none !important;
    min-height: 42px !important;
    gap: 14px !important;
    padding: 6px 18px 6px 7px !important;
    font-size: 14px !important;
    letter-spacing: -0.02em !important;
  }

  .mx-pill::before,
  .mx-pill.mx-pill--solid::before {
    width: 94px !important;
    height: 30px !important;
    flex-basis: 94px !important;
  }

  .amx-hero__pill,
  .amx-form__pill,
  .amx-urgency__pill,
  .amx-paraquem__head .mx-pill,
  .amx-workflow__head .mx-pill,
  .amx-pillars__head .mx-pill,
  .mx-cta__container .mx-pill {
    margin-left: 0 !important;
    margin-bottom: 0 !important;
  }

  .amx-hero {
    padding-top: 98px !important;
  }

  .amx-hero__headline {
    max-width: 350px !important;
    font-size: clamp(34px, 9.3vw, 38px) !important;
    line-height: 1.04 !important;
  }

  .amx-hero__body {
    max-width: 340px !important;
    font-size: 15px !important;
  }

  .mx-btn--primary,
  .amx-workflow__cta,
  .amx-hero__cta {
    width: min(100%, 280px) !important;
    min-width: 0 !important;
    height: 44px !important;
    font-size: 11px !important;
  }

  .amx-paraquem,
  .amx-workflow,
  .amx-pillars,
  .amx-urgency,
  .mx-cta-faq-wrap {
    box-shadow: inset 0 70px 56px #050505, inset 0 -70px 56px #050505 !important;
  }

  .amx-paraquem__title,
  .amx-pillars__title,
  .amx-workflow__title,
  .mx-section__title,
  .mx-cta__headline {
    font-size: clamp(34px, 10vw, 42px) !important;
    line-height: 1.08 !important;
  }

  .amx-paraquem__grid,
  .amx-pillars__grid {
    grid-template-columns: 1fr !important;
  }

  .amx-workflow__viewport {
    width: min(330px, calc(100vw - 40px)) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%) !important;
    mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%) !important;
  }

  .amx-workflow__card {
    width: min(292px, 78vw) !important;
  }

  .amx-pillars__front h3 {
    font-size: 22px !important;
  }

  .amx-pillars__card,
  .amx-pillars__card-inner {
    min-height: 255px !important;
  }

  .amx-urgency__inner {
    padding: 28px !important;
  }

  .amx-urgency__title {
    font-size: clamp(32px, 9.5vw, 40px) !important;
  }

  .amx-urgency__visual img {
    max-width: 360px !important;
    transform: scale(1.04);
  }

  .mx-cta__stage {
    border-radius: 24px !important;
  }

  .mx-cta__btn {
    gap: 14px !important;
    padding: 8px 20px 8px 8px !important;
    font-size: 13px !important;
  }

  .mx-cta__btn-icon {
    width: 52px !important;
    height: 40px !important;
  }

  .mx-faq-item__summary {
    padding: 16px !important;
    gap: 14px !important;
  }

  .mx-faq-item__icon {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
  }

  .mx-footer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 24px !important;
  }

  .mx-footer__logo {
    width: 130px !important;
  }

  .mx-footer__heading,
  .mx-footer__phone,
  .mx-footer__handles a {
    font-size: 14px !important;
  }

  .mx-footer__contact-heading {
    font-size: 18px !important;
  }

  .mx-footer__credit,
  .mx-footer__copy {
    font-size: 12px !important;
  }
}

/* Hero balance after DS typography swap */
.amx-hero__copy {
  text-align: left !important;
  align-items: flex-start !important;
  width: min(100%, 760px) !important;
  max-width: 760px !important;
}

.amx-hero__headline {
  max-width: 760px !important;
  font-size: clamp(42px, 2.72vw, 52px) !important;
  line-height: 1.04 !important;
  text-align: left !important;
}

.amx-hero__body {
  max-width: 560px !important;
}

.amx-hero__pill {
  transform: scale(0.5) !important;
}

.amx-hero__visual {
  width: clamp(250px, 17vw, 315px) !important;
  margin-top: 12px !important;
}

.amx-hero__phone--main {
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  opacity: 1 !important;
  filter: brightness(1.08) contrast(1.08) drop-shadow(0 24px 62px rgba(0, 0, 0, 0.78)) !important;
}

.amx-hero__phone--left {
  left: -78% !important;
  z-index: 3 !important;
}

.amx-hero__phone--right {
  right: -78% !important;
  z-index: 2 !important;
}

.amx-hero__x--main {
  z-index: 1 !important;
}

@media (max-width: 1180px) {
  .amx-hero__copy {
    max-width: 560px !important;
  }

  .amx-hero__headline {
    font-size: clamp(36px, 4.15vw, 46px) !important;
    max-width: 560px !important;
  }
}

@media (max-width: 767px) {
  .amx-hero__copy {
    width: 100% !important;
    max-width: 100% !important;
  }

  .amx-hero__headline {
    max-width: 360px !important;
    font-size: clamp(31px, 8.4vw, 35px) !important;
    overflow-wrap: normal !important;
  }

  .amx-hero__pill {
    transform: none !important;
  }
}

/* Final proportion fixes after visual QA */
@media (min-width: 1181px) {
  .amx-hero__inner {
    grid-template-columns: minmax(620px, 760px) minmax(320px, 460px) !important;
    gap: clamp(56px, 5.8vw, 118px) !important;
    justify-content: center !important;
  }
}

.amx-workflow:hover .amx-workflow__track {
  animation-play-state: running !important;
}

.amx-workflow__viewport {
  width: min(980px, calc(100vw - 360px)) !important;
  padding-block: 26px !important;
  margin-block: -26px 0 !important;
  overflow: hidden !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 76%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 76%, transparent 100%) !important;
}

.amx-workflow__card {
  width: clamp(318px, 20vw, 348px) !important;
}

.amx-pillars__grid {
  padding-block: 42px 30px !important;
}

.amx-pillars__card {
  overflow: visible !important;
  perspective: 1100px !important;
}

.amx-pillars__card:hover {
  transform: none !important;
}

.amx-pillars__card-inner {
  will-change: transform;
}

.amx-urgency__highlight .mx-btn-arrow,
.amx-urgency__highlight svg {
  width: 16px !important;
  height: 16px !important;
}

@media (max-width: 1024px) {
  .amx-workflow__viewport {
    width: min(720px, calc(100vw - 96px)) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%) !important;
    mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%) !important;
  }
}

@media (max-width: 767px) {
  .amx-workflow__viewport {
    width: min(330px, calc(100vw - 40px)) !important;
    padding-block: 18px !important;
    margin-block: -18px 0 !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%) !important;
    mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%) !important;
  }

  .amx-hero__body {
    width: 100% !important;
    max-width: 340px !important;
  }
}

/* User correction pass - hero, pills, CTA and footer proportions */
.amx-header__inner {
  min-height: 66px !important;
  padding: 0 20px !important;
}

.amx-header__brand img {
  width: 132px !important;
  height: auto !important;
}

.amx-header__nav {
  min-height: 44px !important;
  gap: 6px !important;
}

.amx-header__nav-indicator {
  top: 3px !important;
  bottom: 3px !important;
}

.amx-header__nav a {
  min-height: 38px !important;
  padding-inline: 17px !important;
  font-size: 14px !important;
}

.amx-header__cta {
  min-height: 44px !important;
  padding-inline: 28px !important;
  font-size: 13px !important;
}

.mx-pill,
.mx-pill.mx-pill--solid {
  min-height: 44px !important;
  gap: 14px !important;
  padding: 6px 22px 6px 7px !important;
  font-size: clamp(15px, 1.1vw, 18px) !important;
  letter-spacing: -0.02em !important;
}

.mx-pill::before,
.mx-pill.mx-pill--solid::before {
  width: clamp(104px, 7.6vw, 128px) !important;
  height: clamp(31px, 2.5vw, 38px) !important;
  flex-basis: clamp(104px, 7.6vw, 128px) !important;
  background-size: 74% auto !important;
}

.amx-hero__pill {
  transform: none !important;
  min-height: 58px !important;
  padding: 8px 30px 8px 10px !important;
  gap: 22px !important;
  font-size: clamp(21px, 1.55vw, 28px) !important;
  margin-left: 0 !important;
  margin-bottom: -2px !important;
}

.amx-hero__pill::before {
  width: clamp(148px, 10.2vw, 170px) !important;
  height: clamp(44px, 3.1vw, 50px) !important;
  flex-basis: clamp(148px, 10.2vw, 170px) !important;
  background-size: 75% auto !important;
}

.amx-paraquem__head .mx-pill,
.amx-workflow__head .mx-pill,
.amx-pillars__head .mx-pill,
.mx-cta__container .mx-pill {
  transform: none !important;
  min-height: 42px !important;
  padding: 6px 19px 6px 7px !important;
  gap: 12px !important;
  font-size: clamp(14px, 1vw, 17px) !important;
}

.amx-paraquem__head .mx-pill::before,
.amx-workflow__head .mx-pill::before,
.amx-pillars__head .mx-pill::before,
.mx-cta__container .mx-pill::before {
  width: clamp(92px, 6.8vw, 116px) !important;
  height: 30px !important;
  flex-basis: clamp(92px, 6.8vw, 116px) !important;
}

.mx-btn--primary,
.amx-workflow__cta,
.amx-hero__cta {
  background: linear-gradient(157.85deg, #fff166 9.7%, #ffe700 92.88%) !important;
  box-shadow: inset 0 -10px 24px rgba(230, 208, 0, 0.42), 0 0 0 rgba(255, 231, 0, 0) !important;
}

.mx-btn--primary:hover,
.amx-workflow__cta:hover,
.amx-hero__cta:hover {
  background: linear-gradient(157.85deg, #fff58a 0%, #ffe700 58%, #e6d000 100%) !important;
  box-shadow: inset 0 -10px 24px rgba(230, 208, 0, 0.52), 0 18px 54px rgba(255, 231, 0, 0.34) !important;
}

.amx-hero {
  min-height: clamp(690px, 47vw, 880px) !important;
}

.amx-hero__headline {
  font-size: clamp(48px, 3vw, 62px) !important;
  line-height: 0.99 !important;
  max-width: 720px !important;
}

.amx-hero__body {
  font-size: clamp(16px, 1vw, 18px) !important;
  max-width: 590px !important;
}

.amx-hero__visual {
  position: relative !important;
  width: clamp(285px, 18.5vw, 350px) !important;
  aspect-ratio: 258 / 462 !important;
  overflow: visible !important;
}

.amx-hero__phone {
  position: absolute !important;
  display: block !important;
  top: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
}

.amx-hero__phone--main {
  inset: 0 auto auto 0 !important;
  transform: none !important;
}

.amx-hero__phone--ghost {
  top: 8% !important;
  opacity: 0.45 !important;
}

.amx-hero__phone--left {
  left: -82% !important;
  right: auto !important;
  transform: translateY(2%) rotate(-4deg) scale(0.86) !important;
}

.amx-hero__phone--right {
  left: auto !important;
  right: -82% !important;
  transform: translateY(2%) rotate(4deg) scale(0.86) !important;
}

.amx-hero__x--main {
  top: clamp(86px, 8vw, 128px) !important;
  right: clamp(-40px, 5vw, 140px) !important;
  width: clamp(860px, 58vw, 1180px) !important;
  opacity: 0.42 !important;
  filter: blur(10px) saturate(1.28) !important;
}

@media (min-width: 1181px) {
  .amx-hero__inner {
    grid-template-columns: minmax(600px, 720px) minmax(340px, 500px) !important;
    gap: clamp(70px, 6.8vw, 138px) !important;
  }
}

.amx-urgency {
  background:
    radial-gradient(circle at 18% 35%, rgba(255, 241, 102, 0.2), transparent 24%),
    radial-gradient(circle at 88% 54%, rgba(255, 231, 0, 0.17), transparent 25%),
    #050505 !important;
}

.amx-urgency::after {
  background:
    linear-gradient(115deg, transparent 8%, rgba(255, 241, 102, 0.1) 25%, rgba(255, 241, 102, 0.34) 43%, rgba(255, 231, 0, 0.18) 58%, transparent 78%) !important;
}

.amx-urgency .mx-container {
  max-width: 1260px !important;
}

.amx-urgency__inner {
  min-height: 560px !important;
  padding: clamp(54px, 5vw, 76px) !important;
  grid-template-columns: minmax(420px, 0.9fr) minmax(520px, 1.1fr) !important;
  gap: clamp(36px, 5vw, 80px) !important;
  background:
    radial-gradient(circle at 76% 48%, rgba(255, 241, 102, 0.16), transparent 42%),
    rgba(5, 5, 5, 0.76) !important;
}

.amx-urgency__title {
  font-size: clamp(50px, 4.5vw, 72px) !important;
  line-height: 0.98 !important;
  max-width: 560px !important;
}

.amx-urgency__body {
  max-width: 510px !important;
}

.amx-urgency__highlight {
  width: min(100%, 520px) !important;
  min-height: 52px !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 0 20px !important;
  border-color: rgba(255, 241, 102, 0.6) !important;
  color: #fff166 !important;
}

.amx-urgency__highlight span {
  min-width: 0;
  line-height: 1.22 !important;
}

.amx-urgency__highlight svg {
  transform: rotate(-45deg) !important;
  transition: transform 280ms var(--ease-out-quart) !important;
}

.amx-urgency__highlight:hover svg {
  transform: rotate(90deg) translateX(1px) !important;
}

.amx-urgency__visual {
  max-width: 700px !important;
}

.amx-urgency__visual img {
  max-width: 720px !important;
}

.mx-cta__stage {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: center !important;
  gap: 34px !important;
  padding: clamp(34px, 5vw, 58px) !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: radial-gradient(circle at 78% 48%, rgba(255, 231, 0, 0.12), transparent 42%), rgba(11, 11, 11, 0.82) !important;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.28) !important;
}

.mx-cta__btn {
  min-height: 62px !important;
  padding: 0 34px !important;
  gap: 14px !important;
  border: 0 !important;
  background: linear-gradient(157.85deg, #fff166 9.7%, #ffe700 92.88%) !important;
  color: #050505 !important;
  font: 800 clamp(14px, 1vw, 17px)/1 var(--font-body) !important;
  letter-spacing: -0.01em !important;
  box-shadow: inset 0 -10px 24px rgba(230, 208, 0, 0.42) !important;
}

.mx-cta__btn-icon {
  order: 2 !important;
  width: 22px !important;
  height: 22px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: currentColor !important;
  transform: rotate(-45deg) !important;
  transition: transform 280ms var(--ease-out-quart) !important;
}

.mx-cta__btn-icon svg {
  width: 100% !important;
  height: 100% !important;
}

.mx-cta__btn-label {
  white-space: nowrap !important;
}

.mx-cta__btn:hover {
  background: linear-gradient(157.85deg, #fff58a 0%, #ffe700 58%, #e6d000 100%) !important;
  box-shadow: inset 0 -10px 24px rgba(230, 208, 0, 0.52), 0 18px 54px rgba(255, 231, 0, 0.3) !important;
}

.mx-cta__btn:hover .mx-cta__btn-icon {
  transform: rotate(90deg) translateX(1px) !important;
}

.mx-footer__logo {
  width: 118px !important;
}

.mx-footer__social-icons {
  gap: 8px !important;
}

.mx-footer__social-icons a {
  width: 34px !important;
  height: 34px !important;
  border-radius: 7px !important;
}

.mx-footer__social-icons svg {
  width: 20px !important;
  height: 20px !important;
}

.mx-footer__heading,
.mx-footer__phone,
.mx-footer__handles a,
.mx-footer__credit,
.mx-footer__copy,
.mx-footer__cta-btn {
  font-size: 14px !important;
}

@media (max-width: 1024px) {
  .amx-header__inner {
    min-height: 58px !important;
  }

  .amx-header__brand img {
    width: 122px !important;
  }

  .amx-urgency__inner {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
}

@media (max-width: 767px) {
  .amx-hero__copy {
    width: calc(100vw - 88px) !important;
    max-width: calc(100vw - 88px) !important;
  }

  .amx-hero__pill,
  .mx-pill,
  .mx-pill.mx-pill--solid {
    min-height: 40px !important;
    padding: 5px 14px 5px 6px !important;
    gap: 10px !important;
    font-size: 13px !important;
  }

  .amx-hero__pill::before,
  .mx-pill::before,
  .mx-pill.mx-pill--solid::before {
    width: 88px !important;
    height: 28px !important;
    flex-basis: 88px !important;
  }

  .amx-hero__headline {
    max-width: 100% !important;
    font-size: clamp(32px, 8.7vw, 37px) !important;
    line-height: 1.02 !important;
  }

  .amx-hero__body {
    max-width: min(100%, 310px) !important;
    font-size: 14px !important;
  }

  .amx-hero__visual {
    width: min(62vw, 245px) !important;
  }

  .amx-hero__x--main {
    top: 245px !important;
    right: -190px !important;
    width: 620px !important;
  }

  .amx-urgency__title {
    font-size: clamp(34px, 10vw, 42px) !important;
  }

  .amx-urgency__highlight {
    min-height: 48px !important;
    font-size: 12px !important;
  }

  .mx-cta__btn {
    width: min(100%, 330px) !important;
    min-height: 54px !important;
    padding: 0 22px !important;
    font-size: 12px !important;
  }

  .mx-cta__btn-label {
    white-space: normal !important;
  }

  .mx-footer__logo {
    width: 96px !important;
  }

  .mx-footer__social-icons a {
    width: 30px !important;
    height: 30px !important;
  }

  .mx-footer__social-icons svg {
    width: 18px !important;
    height: 18px !important;
  }
}

/* ============================================================================
   FIX-PASS - corrige 7 issues identificadas pelo usuario
   ============================================================================ */

/* ---------- FIX 1 - Pills: logo completo (sem corte) + hover 1.01 / +5% brilho */
.mx-pill::before,
.mx-pill.mx-pill--solid::before {
  background-image: url("../assets/images/metodox-logo-pill.svg") !important;
  background-size: contain !important;            /* preserva aspect, nunca corta */
  background-position: center !important;
  background-repeat: no-repeat !important;
  padding: 4px 8px !important;                    /* respiro pro logo dentro do amarelo */
  box-sizing: border-box !important;
}

/* Pill base: largura segue aspect ratio real do logo (~4.3:1) */
.mx-pill,
.mx-pill.mx-pill--solid {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 42px !important;
  gap: 12px !important;
  padding: 5px 18px 5px 5px !important;
  font-size: clamp(14px, 1.05vw, 17px) !important;
  border-radius: 999px !important;
  cursor: default;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.35s ease,
    box-shadow 0.35s ease !important;
}
.mx-pill::before,
.mx-pill.mx-pill--solid::before {
  width: 130px !important;                        /* aspect 4.3:1 */
  height: 30px !important;
  flex: 0 0 130px !important;
  border-radius: 999px !important;
}

/* Hover suave: scale 1% + brilho 5% */
.mx-pill:hover,
.mx-pill.mx-pill--solid:hover {
  transform: scale(1.01) !important;
  filter: brightness(1.05) !important;
}

/* Hero pill maior mantendo aspect */
.amx-hero__pill {
  min-height: 52px !important;
  padding: 6px 22px 6px 6px !important;
  gap: 14px !important;
  font-size: clamp(16px, 1.25vw, 20px) !important;
  margin-left: 0 !important;
  margin-bottom: 0 !important;
  transform: none !important;
}
.amx-hero__pill::before {
  width: 168px !important;                        /* aspect 4.3:1 */
  height: 39px !important;
  flex: 0 0 168px !important;
}

/* ---------- FIX 2 - Hero X atras dos phones, maior + translucido ------------ */
.amx-hero__x,
.amx-hero__x--main {
  position: absolute !important;
  width: clamp(420px, 80vw, 1100px) !important;
  height: auto !important;
  top: 50% !important;
  right: 50% !important;
  transform: translate(35%, -45%) !important;
  opacity: 0.45 !important;
  filter: blur(8px) saturate(1.1) !important;
  mix-blend-mode: screen !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.amx-hero__phone,
.amx-hero__phone--main,
.amx-hero__phone--ghost {
  position: relative;
  z-index: 2 !important;
}
.amx-hero__visual { z-index: 1 !important; }

/* ---------- FIX 3 - Tipografia mais proxima do Framer ---------------------- */
.amx-hero__headline,
.amx-problem__title,
.amx-paraquem__title,
.amx-workflow__title,
.amx-pillars__title,
.amx-urgency__title,
.mx-section__title {
  text-wrap: balance;
  hyphens: none;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.amx-hero__body,
.amx-problem__sub,
.amx-paraquem__sub,
.amx-workflow__sub,
.amx-pillars__sub,
.amx-urgency__body {
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-size: clamp(15px, 1.1vw, 17px) !important;
  line-height: 1.55 !important;
  max-width: 60ch;
  text-wrap: pretty;
}

/* ---------- FIX 4 - Hero mobile layout (text + button + phone centered) ----- */
@media (max-width: 720px) {
  .amx-hero {
    padding-top: 110px !important;
    padding-bottom: 40px !important;
  }
  .amx-hero__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 32px !important;
  }
  .amx-hero__copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
  }
  .amx-hero__pill { align-self: center !important; }
  .amx-hero__headline {
    font-size: clamp(26px, 7.5vw, 32px) !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }
  .amx-hero__body {
    font-size: 14px !important;
    text-align: center !important;
    max-width: 92% !important;
  }
  .amx-hero__ctas {
    justify-content: center !important;
    width: 100%;
  }
  .amx-hero__visual {
    position: relative !important;
    width: min(78%, 320px) !important;
    height: auto !important;
    margin: 0 auto !important;
    aspect-ratio: 9/19 !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }
  .amx-hero__phone,
  .amx-hero__phone--main,
  .amx-hero__phone--ghost {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
  .amx-hero__phone--ghost { display: none !important; }
  .amx-hero__x,
  .amx-hero__x--main {
    width: 110% !important;
    transform: translate(-50%, -50%) !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    opacity: 0.35 !important;
    filter: blur(12px) !important;
  }
  .amx-hero__decor { overflow: hidden !important; }
}

/* ---------- FIX 5 - Animacoes suaves: entrance + hover --------------------- */
[data-mx-appear] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-mx-appear="scale"] { transform: scale(0.95); }
[data-mx-appear="fade"] { transform: none; }
[data-mx-appear="left"] { transform: translateX(-28px); }
[data-mx-appear="right"] { transform: translateX(28px); }
[data-mx-appear].is-visible {
  opacity: 1 !important;
  transform: none !important;
}

.amx-paraquem__card,
.amx-workflow__card,
.amx-pillars__card,
.mx-faq-item,
.amx-problem__card {
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.mx-btn,
.mx-btn--primary,
.mx-btn--ghost,
.amx-hero__cta,
.amx-workflow__cta,
.mx-cta__btn {
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease,
    background 0.3s ease !important;
}
.mx-btn:hover,
.mx-btn--primary:hover,
.amx-hero__cta:hover,
.mx-cta__btn:hover {
  transform: translateY(-2px) !important;
}

.amx-problem__mockup,
.amx-urgency__visual {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.amx-problem__card:hover .amx-problem__mockup { transform: scale(1.025) !important; }

/* ---------- FIX 6 - Workflow mask nao cortar cards no mobile --------------- */
@media (max-width: 720px) {
  .amx-workflow__viewport {
    mask-image: none !important;
    -webkit-mask-image: none !important;
    padding-inline: 0 !important;
  }
  .amx-workflow__track { gap: 14px !important; }
  .amx-workflow__card {
    flex: 0 0 78vw !important;
    max-width: 320px !important;
    min-height: auto !important;
    padding: 20px !important;
  }
}

@media (min-width: 721px) and (max-width: 1023px) {
  .amx-workflow__viewport {
    mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%) !important;
  }
}

/* ---------- FIX 7 - Mobile buttons/texts proporcionais --------------------- */
@media (max-width: 720px) {
  .mx-btn,
  .mx-btn--primary,
  .mx-btn--ghost,
  .amx-hero__cta,
  .amx-workflow__cta,
  .mx-cta__btn {
    min-height: 48px !important;
    padding: 12px 22px !important;
    font-size: 14px !important;
    letter-spacing: -0.01em !important;
  }
  .amx-problem__title,
  .amx-paraquem__title,
  .amx-workflow__title,
  .amx-pillars__title,
  .amx-urgency__title,
  .mx-cta__headline {
    font-size: clamp(26px, 7vw, 34px) !important;
    line-height: 1.15 !important;
  }
  .amx-paraquem__card h3,
  .amx-workflow__card h3,
  .amx-pillars__card h3,
  .mx-faq-item__q {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }
  .amx-paraquem__card-body,
  .amx-workflow__card p,
  .amx-pillars__card p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .mx-pill {
    font-size: 13px !important;
    min-height: 38px !important;
  }
  .mx-pill::before {
    width: 112px !important;   /* aspect 4.3:1 com h=26 */
    height: 26px !important;
    flex-basis: 112px !important;
  }
  .amx-hero__pill { font-size: 15px !important; min-height: 44px !important; }
  .amx-hero__pill::before {
    width: 138px !important;   /* aspect 4.3:1 com h=32 */
    height: 32px !important;
    flex-basis: 138px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-mx-appear] { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* ============================================================================
   FIX-PASS-2: pills FINAIS compactas (override absoluto)
   Especificidade max: html body .pill ganha de tudo
   ============================================================================ */
html body .mx-pill,
html body .mx-pill.mx-pill--solid {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 4px 16px 4px 4px !important;
  font-size: 13px !important;
  letter-spacing: -0.01em !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  background: rgba(18,18,18,0.82) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 20px rgba(0,0,0,0.3) !important;
  color: rgba(255,255,255,0.92) !important;
  text-transform: none !important;
  cursor: default !important;
  transition: transform .35s cubic-bezier(.22,1,.36,1), filter .35s ease !important;
}

html body .mx-pill::before,
html body .mx-pill.mx-pill--solid::before {
  content: "" !important;
  display: block !important;
  width: 120px !important;
  height: 28px !important;
  flex: 0 0 120px !important;
  border-radius: 999px !important;
  background-color: var(--brand-default) !important;
  background-image: url("../assets/images/metodox-logo-pill.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 78% auto !important;
  box-shadow: inset 0 -4px 10px rgba(255,255,255,0.18), 0 0 16px rgba(255,231,0,0.18) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hero pill um pouquinho maior */
html body .amx-hero__pill {
  height: 42px !important;
  min-height: 42px !important;
  padding: 4px 20px 4px 4px !important;
  gap: 12px !important;
  font-size: 15px !important;
  margin: 0 !important;
  transform: none !important;
}
html body .amx-hero__pill::before {
  width: 144px !important;
  height: 34px !important;
  flex: 0 0 144px !important;
}

/* Hover: cresce 1% + brilho +5% (suave) */
html body .mx-pill:hover,
html body .mx-pill.mx-pill--solid:hover {
  transform: scale(1.01) !important;
  filter: brightness(1.05) !important;
}

/* Mobile compact */
@media (max-width: 720px) {
  html body .mx-pill,
  html body .mx-pill.mx-pill--solid {
    height: 32px !important;
    min-height: 32px !important;
    padding: 3px 13px 3px 3px !important;
    gap: 8px !important;
    font-size: 12px !important;
  }
  html body .mx-pill::before,
  html body .mx-pill.mx-pill--solid::before {
    width: 100px !important;
    height: 24px !important;
    flex: 0 0 100px !important;
  }
  html body .amx-hero__pill {
    height: 38px !important;
    min-height: 38px !important;
    padding: 4px 16px 4px 4px !important;
    font-size: 14px !important;
    gap: 10px !important;
  }
  html body .amx-hero__pill::before {
    width: 118px !important;
    height: 28px !important;
    flex: 0 0 118px !important;
  }
}


/* ============================================================================
   FIX-PASS-3 - corrige 3 issues:
   1) Pill: padding visivel ao redor do logo (nao tocar bordas, nao esticar)
   2) Hero X: centralizado atras dos phones, gigante, transparencia alta
   3) Mobile hero: mockup+X primeiro, texto sobre gradient lens fade-to-dark
   ============================================================================ */

/* ---------- FIX 1: pill com respiro real ao redor do logo --------------- */
html body .mx-pill::before,
html body .mx-pill.mx-pill--solid::before {
  background-image: url("../assets/images/metodox-logo-pill.svg") !important;
  background-size: 70% auto !important;   /* logo a 70% = margem real */
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: var(--brand-default) !important;
  width: 134px !important;                  /* mais largo q logo aspect */
  height: 34px !important;                  /* mais alto q logo aspect */
  flex: 0 0 134px !important;
  border-radius: 999px !important;
  padding: 0 !important;
  box-shadow: inset 0 -3px 8px rgba(255,255,255,0.18), 0 0 14px rgba(255,231,0,0.16) !important;
}

html body .mx-pill,
html body .mx-pill.mx-pill--solid {
  min-height: 44px !important;
  height: 44px !important;
  padding: 5px 18px 5px 5px !important;
  gap: 12px !important;
}

html body .amx-hero__pill {
  height: 50px !important;
  min-height: 50px !important;
  padding: 5px 22px 5px 5px !important;
}
html body .amx-hero__pill::before {
  width: 164px !important;
  height: 40px !important;
  flex: 0 0 164px !important;
  background-size: 70% auto !important;
}

/* mobile */
@media (max-width: 720px) {
  html body .mx-pill,
  html body .mx-pill.mx-pill--solid {
    height: 38px !important;
    min-height: 38px !important;
    padding: 4px 14px 4px 4px !important;
  }
  html body .mx-pill::before {
    width: 110px !important;
    height: 30px !important;
    flex: 0 0 110px !important;
    background-size: 70% auto !important;
  }
  html body .amx-hero__pill {
    height: 44px !important;
    min-height: 44px !important;
  }
  html body .amx-hero__pill::before {
    width: 130px !important;
    height: 34px !important;
    flex: 0 0 130px !important;
  }
}

/* ---------- FIX 2: Hero X gigante centralizado atras dos phones --------- */
html body .amx-hero__x,
html body .amx-hero__x--main {
  position: absolute !important;
  top: 50% !important;
  left: auto !important;
  right: -10% !important;
  bottom: auto !important;
  width: clamp(700px, 90vw, 1400px) !important;
  height: auto !important;
  max-width: none !important;
  transform: translateY(-50%) rotate(-2deg) !important;
  opacity: 0.32 !important;                        /* mais transparente */
  filter: blur(14px) saturate(1.1) brightness(1.05) !important;
  mix-blend-mode: screen !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Garante que phones ficam acima do X */
html body .amx-hero__visual,
html body .amx-hero__phone,
html body .amx-hero__phone--main,
html body .amx-hero__phone--ghost {
  position: relative;
  z-index: 3 !important;
}
html body .amx-hero__copy { position: relative; z-index: 4 !important; }
html body .amx-hero__decor { z-index: 0 !important; overflow: visible !important; }
html body .amx-hero { overflow: hidden !important; }

/* ---------- FIX 3: Mobile hero - mockup+X PRIMEIRO, texto sobre lens ---- */
@media (max-width: 720px) {
  html body .amx-hero {
    padding-top: 90px !important;
    padding-bottom: 48px !important;
  }
  html body .amx-hero__inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    align-items: stretch !important;
    text-align: center !important;
    position: relative !important;
  }
  html body .amx-hero__visual {
    order: 1 !important;
    position: relative !important;
    width: 92% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
    aspect-ratio: 9/19 !important;
    z-index: 3 !important;
  }
  html body .amx-hero__copy {
    order: 2 !important;
    position: relative !important;
    margin-top: -120px !important;             /* sobrepoe ao bottom do mockup */
    padding-top: 100px !important;              /* respiro pro gradient */
    z-index: 5 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }
  /* Gradient lens (fade-to-dark) por cima do bottom do mockup */
  html body .amx-hero__copy::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 130% !important;
    height: 200px !important;
    background:
      radial-gradient(ellipse at top, transparent 0%, rgba(5,5,5,0.85) 55%, var(--bg-primary) 90%) !important;
    pointer-events: none !important;
    z-index: -1 !important;
  }
  /* X mobile: centro do mockup, contido */
  html body .amx-hero__x,
  html body .amx-hero__x--main {
    width: 130% !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    opacity: 0.4 !important;
    filter: blur(18px) !important;
  }
  /* Phone ghosts escondidos no mobile pra layout limpo */
  html body .amx-hero__phone--ghost { display: none !important; }
}


/* ============================================================================
   FIX-PASS-4 - alinhamentos finais
   1) Hero pill = mesmo tamanho das outras pills (consistencia)
   2) Hero X AINDA maior, mais opaco, atras de ghosts+main
   3) Phone ghosts VISIVEIS no mobile (escala menor + blur)
   4) Problem headline em 2 linhas (mobile)
   5) Workflow headline compacto (mobile)
   6) Workflow cards FULL-WIDTH no mobile (edge-to-edge)
   7) Less space head-to-cards em todas as secoes (mobile)
   ============================================================================ */

/* ---------- 1) Hero pill = mesma escala das outras pills --------------- */
html body .amx-hero__pill {
  height: 44px !important;
  min-height: 44px !important;
  padding: 5px 18px 5px 5px !important;
  gap: 12px !important;
  font-size: 14px !important;
}
html body .amx-hero__pill::before {
  width: 134px !important;
  height: 34px !important;
  flex: 0 0 134px !important;
  background-size: 70% auto !important;
}

/* ---------- 2) Hero X ainda maior e mais opaco ------------------------- */
html body .amx-hero__x,
html body .amx-hero__x--main {
  width: clamp(1000px, 110vw, 1800px) !important;
  right: -25% !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(-3deg) !important;
  opacity: 0.38 !important;
  filter: blur(20px) saturate(1.15) brightness(1.1) !important;
  z-index: 0 !important;
}

/* ---------- 3) Phone ghosts visiveis no mobile ------------------------- */
@media (max-width: 720px) {
  html body .amx-hero__phone--ghost {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
  html body .amx-hero__phone--left {
    transform: translateX(-22%) scale(0.86) !important;
    opacity: 0.35 !important;
    filter: blur(10px) saturate(0.9) !important;
    z-index: 2 !important;
  }
  html body .amx-hero__phone--right {
    transform: translateX(22%) scale(0.86) !important;
    opacity: 0.35 !important;
    filter: blur(10px) saturate(0.9) !important;
    z-index: 2 !important;
  }
  html body .amx-hero__phone--main { z-index: 4 !important; }

  /* X mobile: gigantesco e bem opaco atras de tudo */
  html body .amx-hero__x,
  html body .amx-hero__x--main {
    width: 220% !important;
    height: auto !important;
    top: 45% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) rotate(-2deg) !important;
    opacity: 0.4 !important;
    filter: blur(24px) saturate(1.1) !important;
  }
  /* Container do visual mobile: precisa ser maior pros 3 phones caberem */
  html body .amx-hero__visual {
    width: 92% !important;
    max-width: 380px !important;
  }
}

/* ---------- 4) Problem headline: 2 linhas (mobile) --------------------- */
@media (max-width: 720px) {
  html body .amx-problem__title {
    font-size: 22px !important;
    line-height: 1.2 !important;
    max-width: 96% !important;
    margin-inline: auto !important;
    text-wrap: balance !important;
  }
  /* Forca quebras corretas: 1 quebra entre WhatsApp e Todo */
  html body .amx-problem__title br { display: inline !important; }
}

/* ---------- 5) Workflow headline: compacto (mobile) -------------------- */
@media (max-width: 720px) {
  html body .amx-workflow__title {
    font-size: 24px !important;
    line-height: 1.18 !important;
    max-width: 94% !important;
    margin-inline: auto !important;
    text-wrap: balance !important;
  }
}

/* ---------- 6) Workflow cards FULL-WIDTH no mobile --------------------- */
@media (max-width: 720px) {
  html body .amx-workflow {
    padding-inline: 0 !important;
  }
  html body .amx-workflow__head {
    padding-inline: 16px !important;
  }
  html body .amx-workflow__viewport {
    padding-inline: 0 !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  html body .amx-workflow__track {
    gap: 12px !important;
    padding-inline: 16px !important;
    padding-right: 32px !important;  /* respiro pro ultimo card snap */
  }
  html body .amx-workflow__card {
    flex: 0 0 calc(100vw - 48px) !important;
    width: calc(100vw - 48px) !important;
    max-width: none !important;
    min-height: 200px !important;
    padding: 24px !important;
  }
  /* Tamanho do texto dentro dos cards mobile (full-width = mais espaco) */
  html body .amx-workflow__card h3 {
    font-size: 18px !important;
  }
  html body .amx-workflow__card p {
    font-size: 15px !important;
  }
}

/* ---------- 7) Less space head-to-content (mobile) --------------------- */
@media (max-width: 720px) {
  html body .amx-problem__head,
  html body .amx-paraquem__head,
  html body .amx-workflow__head,
  html body .amx-pillars__head {
    margin-bottom: 24px !important;
    gap: 12px !important;
  }
  /* Subs/sub-titles um pouco menor pra dar tighter feel */
  html body .amx-problem__sub,
  html body .amx-paraquem__sub,
  html body .amx-workflow__sub,
  html body .amx-pillars__sub {
    font-size: 14px !important;
    max-width: 92% !important;
  }
  /* Section paddings menores */
  html body .amx-problem,
  html body .amx-paraquem,
  html body .amx-workflow,
  html body .amx-pillars {
    padding-block: 48px !important;
  }
}


/* ============================================================================
   FIX-PASS-5 - hero mobile: mockup menor + gradient lens forte
   Antes: phone 92% (358px wide / 756px tall) dominava viewport.
   Agora: phone ~68% max 280px + mask-image suave + lente gradient pronunciada
          fazendo a transicao fade-to-dark visivel entre phone e texto.
   ============================================================================ */

@media (max-width: 720px) {
  /* Container do hero: stack vertical, sem padding lateral apertado */
  html body .amx-hero {
    padding-top: 84px !important;
    padding-bottom: 40px !important;
  }

  /* Visual menor + mask-image fade-out no bottom 25% */
  html body .amx-hero__visual {
    width: 68% !important;
    max-width: 280px !important;
    aspect-ratio: 9 / 19 !important;
    margin: 0 auto !important;
    order: 1 !important;
    position: relative !important;
    z-index: 3 !important;
    /* Fade suave do phone no bottom pra encontrar o gradient lens */
    mask-image: linear-gradient(to bottom, black 78%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to bottom, black 78%, transparent 100%) !important;
  }

  /* Copy: overlap leve do phone, padding generoso pro texto comecar abaixo */
  html body .amx-hero__copy {
    order: 2 !important;
    position: relative !important;
    margin-top: -70px !important;
    padding-top: 60px !important;
    padding-inline: 16px !important;
    z-index: 5 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 14px !important;
  }

  /* Gradient lens forte e clara: liga o phone ao texto */
  html body .amx-hero__copy::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 140% !important;
    height: 140px !important;
    background:
      linear-gradient(180deg,
        transparent 0%,
        rgba(5, 5, 5, 0.55) 35%,
        rgba(5, 5, 5, 0.88) 65%,
        var(--bg-primary) 100%
      ) !important;
    pointer-events: none !important;
    z-index: -1 !important;
  }

  /* Headline + body alinhados centrais, espacamento confortavel */
  html body .amx-hero__headline {
    font-size: 26px !important;
    line-height: 1.18 !important;
    text-align: center !important;
    max-width: 96% !important;
  }
  html body .amx-hero__body {
    font-size: 14px !important;
    line-height: 1.55 !important;
    max-width: 90% !important;
    text-align: center !important;
  }
  html body .amx-hero__ctas {
    margin-top: 8px !important;
    justify-content: center !important;
  }

  /* Phone main + ghosts dentro do container menor */
  html body .amx-hero__phone--main {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    z-index: 4 !important;
  }
  html body .amx-hero__phone--ghost {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  html body .amx-hero__phone--left {
    transform: translateX(-18%) scale(0.78) !important;
    opacity: 0.3 !important;
    filter: blur(8px) saturate(0.85) !important;
    z-index: 2 !important;
  }
  html body .amx-hero__phone--right {
    transform: translateX(18%) scale(0.78) !important;
    opacity: 0.3 !important;
    filter: blur(8px) saturate(0.85) !important;
    z-index: 2 !important;
  }

  /* X mobile: atras de tudo, ainda gigante */
  html body .amx-hero__x,
  html body .amx-hero__x--main {
    width: 220% !important;
    height: auto !important;
    top: 40% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) rotate(-2deg) !important;
    opacity: 0.32 !important;
    filter: blur(26px) saturate(1.1) !important;
    z-index: 0 !important;
  }

  /* Garante overflow escondido fora do hero pro X gigante nao vazar */
  html body .amx-hero { overflow: hidden !important; }
}


/* ============================================================================
   FIX-PASS-6 - corrige 4 issues:
   1) Hero mobile: stroke amarelo em volta do mockup (X sangrando pelo mask)
   2) Hero mobile: ghosts mais visiveis
   3) Hero mobile: headline menor (cabe em menos linhas)
   4) Workflow mobile: drag bidirecional (anim CSS off, overflow-x auto, snap)
   ============================================================================ */

/* ---------- 1+2+3: HERO MOBILE refinements --------------------------- */
@media (max-width: 720px) {
  /* Remove drop-shadow do phone (causava halo + interferindo com mask) */
  html body .amx-hero__visual img,
  html body .amx-hero__phone--main {
    filter: none !important;
    border-radius: 0 !important;
  }
  html body .amx-hero__phone--main {
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.45)) !important;
  }

  /* X mobile: empurra para BAIXO para nao sangrar pelo mask do phone */
  html body .amx-hero__x,
  html body .amx-hero__x--main {
    top: 60% !important;                 /* era 40% — desloca pra baixo */
    opacity: 0.22 !important;            /* reduz blend-mode bleed */
    width: 200% !important;
    filter: blur(30px) saturate(1.1) !important;
    mix-blend-mode: normal !important;   /* tira blend que criava halo */
  }

  /* Ghosts mais visiveis - opacity maior, blur menor */
  html body .amx-hero__phone--left {
    transform: translateX(-26%) scale(0.82) translateY(8%) !important;
    opacity: 0.55 !important;            /* era 0.30 */
    filter: blur(6px) saturate(0.9) !important;
    z-index: 2 !important;
  }
  html body .amx-hero__phone--right {
    transform: translateX(26%) scale(0.82) translateY(8%) !important;
    opacity: 0.55 !important;
    filter: blur(6px) saturate(0.9) !important;
    z-index: 2 !important;
  }

  /* Headline menor pra caber em 2-3 linhas */
  html body .amx-hero__headline {
    font-size: 22px !important;          /* era 26 */
    line-height: 1.22 !important;
    letter-spacing: -0.015em !important;
    max-width: 100% !important;
    padding-inline: 8px !important;
  }
  html body .amx-hero__body {
    font-size: 13px !important;
    max-width: 92% !important;
    line-height: 1.5 !important;
  }
}

/* ---------- 4: WORKFLOW mobile - scroll horizontal bidirecional ------ */
@media (max-width: 720px) {
  /* Desliga animacao CSS no mobile */
  html body .amx-workflow__track {
    animation: none !important;
    transform: none !important;
    width: max-content !important;
  }
  /* Viewport: scroll nativo com snap, scrollbar escondida */
  html body .amx-workflow__viewport {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: 16px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  html body .amx-workflow__viewport::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  html body .amx-workflow__card {
    scroll-snap-align: center !important;
    flex: 0 0 calc(100vw - 48px) !important;
    width: calc(100vw - 48px) !important;
    min-height: 200px !important;
    padding: 22px !important;
  }
  /* Esconde duplicatas (necessarias so pra loop infinito CSS desktop) */
  html body .amx-workflow__track > article[aria-hidden="true"] {
    display: none !important;
  }
}


/* ============================================================================
   FIX-PASS-7 - corrige stroke quadrada do hero + scroll workflow mobile
   1) Hero mobile: restaurar border-radius 36px no phone (FIX-PASS-6 zerou)
   2) Drop-shadow mais sutil pra nao parecer stroke
   3) Workflow mobile: touch-action: pan-x + reset width gambs anteriores
   ============================================================================ */

/* ---------- 1+2: HERO mobile phone com bordas redondas + shadow sutil ---- */
@media (max-width: 720px) {
  html body .amx-hero__visual img,
  html body .amx-hero__phone--main,
  html body .amx-hero__phone--ghost {
    border-radius: 36px !important;       /* restaura corners arredondados */
  }
  html body .amx-hero__phone--main {
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.4)) !important;  /* shadow sutil */
  }
  /* Garante que mask nao corta canto direito/esquerdo do phone */
  html body .amx-hero__visual {
    mask-image: linear-gradient(to bottom, black 82%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to bottom, black 82%, transparent 100%) !important;
  }
}

/* ---------- 3: WORKFLOW mobile - scroll touch nativo limpo ------------- */
@media (max-width: 720px) {
  html body .amx-workflow__viewport {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    touch-action: pan-x !important;             /* CHAVE: permite touch horizontal */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    cursor: default !important;                  /* sem grab cursor */
  }
  html body .amx-workflow__viewport::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  html body .amx-workflow__track {
    animation: none !important;
    transform: none !important;
    display: flex !important;
    width: max-content !important;
    padding-inline: 20px !important;
    padding-block: 0 !important;
    gap: 14px !important;
  }

  html body .amx-workflow__card {
    flex: 0 0 calc(100vw - 64px) !important;     /* mais respiro lateral */
    width: calc(100vw - 64px) !important;
    max-width: 380px !important;
    min-height: auto !important;
    padding: 22px !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
  }
  /* Esconde duplicatas no mobile (eram so pra anim infinita desktop) */
  html body .amx-workflow__track > article[aria-hidden="true"] {
    display: none !important;
  }
}


/* ============================================================================
   FIX-PASS-8 - workflow JS auto-scroll + hero ghosts/gradient cleanup
   1) WORKFLOW: remove CSS anim (JS controla via rAF). viewport overflow-x:auto
      desktop+mobile. Cards mobile = 100vw edge-to-edge. Mascaras desktop edges.
   2) HERO: remove gradient lens harsh edge. Phone bottom mask faz a transicao
      sozinho. Ghosts opacity 0.7 + blur 4px.
   ============================================================================ */

/* ---------- WORKFLOW universal: scroll horizontal via JS auto+drag ------ */
html body .amx-workflow {
  overflow: hidden !important;
  position: relative !important;
}
html body .amx-workflow__viewport {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  cursor: grab !important;
  scroll-behavior: auto !important;  /* sem smooth pra loop instant nao "swooshar" */
}
html body .amx-workflow__viewport.is-dragging { cursor: grabbing !important; }
html body .amx-workflow__viewport::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
/* Mascaras gradientes nas pontas (desktop+tablet pra suavizar) */
html body .amx-workflow__viewport {
  mask-image: linear-gradient(to right,
    transparent 0%,
    black 4%,
    black 96%,
    transparent 100%) !important;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    black 4%,
    black 96%,
    transparent 100%) !important;
}

/* Track: SEM animation CSS, JS controla */
html body .amx-workflow__track {
  animation: none !important;
  transform: none !important;
  display: flex !important;
  width: max-content !important;
  gap: 24px !important;
  padding-inline: 24px !important;
}

/* Cards desktop visiveis no formato normal */
html body .amx-workflow__card {
  flex: 0 0 320px !important;
  scroll-snap-align: none !important;
}

/* ---------- WORKFLOW MOBILE: edge-to-edge, sem mascaras, cards 100vw ---- */
@media (max-width: 720px) {
  html body .amx-workflow {
    padding-inline: 0 !important;
  }
  html body .amx-workflow__head {
    padding-inline: 20px !important;
  }
  html body .amx-workflow__viewport {
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  html body .amx-workflow__track {
    gap: 0 !important;
    padding-inline: 0 !important;
  }
  html body .amx-workflow__card {
    flex: 0 0 100vw !important;
    width: 100vw !important;
    max-width: none !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 28px 22px !important;
    min-height: auto !important;
  }
  /* Duplicatas TAMBEM visiveis (necessario pro loop infinito JS) */
  html body .amx-workflow__track > article[aria-hidden="true"] {
    display: flex !important;
  }
}

/* ---------- HERO mobile: ghosts visiveis, sem borda gradient ----------- */
@media (max-width: 720px) {
  /* Tira o gradient lens overlay (era ele que criava a borda dura no texto) */
  html body .amx-hero__copy::before {
    display: none !important;
  }

  /* Copy nao sobrepoe o phone (sem negative margin) - phone tem mask suave */
  html body .amx-hero__copy {
    margin-top: 0 !important;
    padding-top: 16px !important;
  }

  /* Phone mask: fade mais agressivo no bottom pra transicao suave c/ bg */
  html body .amx-hero__visual {
    mask-image: linear-gradient(to bottom,
      black 0%,
      black 70%,
      transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to bottom,
      black 0%,
      black 70%,
      transparent 100%) !important;
  }

  /* Ghosts visiveis */
  html body .amx-hero__phone--left {
    transform: translateX(-32%) scale(0.84) translateY(6%) !important;
    opacity: 0.7 !important;
    filter: blur(4px) saturate(0.92) !important;
    z-index: 2 !important;
  }
  html body .amx-hero__phone--right {
    transform: translateX(32%) scale(0.84) translateY(6%) !important;
    opacity: 0.7 !important;
    filter: blur(4px) saturate(0.92) !important;
    z-index: 2 !important;
  }
  html body .amx-hero__phone--main { z-index: 4 !important; }

  /* Gap natural entre phone e copy */
  html body .amx-hero__inner {
    gap: 20px !important;
  }
}

/* ---------- HERO desktop: ghosts mais visiveis tambem --------------- */
@media (min-width: 721px) {
  html body .amx-hero__phone--left,
  html body .amx-hero__phone--right {
    opacity: 0.55 !important;
    filter: blur(10px) saturate(0.9) !important;
  }
}


/* ============================================================================
   FIX-PASS-9 - bugs CONFIRMADOS via screenshot real do preview
   1) Problem headline desktop: 3 linhas -> 2
   2) Workflow headline desktop: 4 linhas -> 2 (font menor)
   3) Hero ghosts mobile: invisiveis -> visiveis (opacity .85, blur menor, offset maior)
   4) Pillars mobile: flip cards mostram so titulo (sem hover) -> revelar body
   5) Hero headline mobile: 5 linhas -> 3
   ============================================================================ */

/* ---------- 1) Problem headline: max-width maior pra caber 2 linhas ------ */
@media (min-width: 721px) {
  html body .amx-problem__title {
    font-size: clamp(28px, 3.6vw, 42px) !important;
    line-height: 1.12 !important;
    max-width: 920px !important;
    margin-inline: auto !important;
  }
}

/* ---------- 2) Workflow headline: font menor + max-width maior -> 2 linhas ---- */
@media (min-width: 721px) {
  html body .amx-workflow__title {
    font-size: clamp(28px, 3.4vw, 40px) !important;
    line-height: 1.15 !important;
    max-width: 760px !important;
    margin-inline: auto !important;
  }
}

/* ---------- 3) Hero ghosts mobile: visiveis com phone shape claro ------- */
@media (max-width: 720px) {
  html body .amx-hero__phone--left {
    transform: translateX(-38%) scale(0.86) translateY(4%) !important;
    opacity: 0.85 !important;
    filter: blur(3px) saturate(0.95) !important;
    z-index: 2 !important;
    border-radius: 36px !important;
  }
  html body .amx-hero__phone--right {
    transform: translateX(38%) scale(0.86) translateY(4%) !important;
    opacity: 0.85 !important;
    filter: blur(3px) saturate(0.95) !important;
    z-index: 2 !important;
    border-radius: 36px !important;
  }
  /* Container hero__visual NAO deve cortar ghosts */
  html body .amx-hero__visual { overflow: visible !important; }
}

/* ---------- 4) Pillars MOBILE: nao usa flip, mostra body diretamente ---- */
@media (max-width: 720px) {
  html body .amx-pillars__card-inner {
    transform: none !important;
    transform-style: flat !important;
    transition: none !important;
  }
  html body .amx-pillars__face {
    position: relative !important;
    backface-visibility: visible !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    inset: auto !important;
  }
  html body .amx-pillars__front {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding-bottom: 14px !important;
  }
  html body .amx-pillars__back {
    display: block !important;
    padding-top: 0 !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    padding-top: 16px !important;
    margin-top: 4px !important;
  }
  html body .amx-pillars__back p {
    color: var(--text-muted) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 300 !important;
  }
  html body .amx-pillars__back p strong {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
  }
  html body .amx-pillars__card {
    min-height: auto !important;
    padding: 24px !important;
  }
  /* Hint de hover nao faz sentido mobile */
  html body .amx-pillars__hover-hint { display: none !important; }
}

/* ---------- 5) Hero headline mobile: 3 linhas max ---------------------- */
@media (max-width: 720px) {
  html body .amx-hero__headline {
    font-size: 20px !important;
    line-height: 1.22 !important;
    letter-spacing: -0.015em !important;
    max-width: 100% !important;
    padding-inline: 8px !important;
  }
  html body .amx-hero__body {
    font-size: 13px !important;
    line-height: 1.5 !important;
    max-width: 92% !important;
  }
}


/* ============================================================================
   FIX-PASS-10 - especificidade do ghost filter + headline mobile 3 linhas
   Computed style mostrou: .amx-hero__phone--left filter=none (FIX-PASS-6 0,0,1,3
   ganhou). Hero headline mobile 5 linhas (deveria ser 3).
   ============================================================================ */

/* ---------- 1) Ghost filter com specificity 0,0,2,3 (subir img.class) --- */
@media (max-width: 720px) {
  html body .amx-hero__visual img.amx-hero__phone--left,
  html body .amx-hero__visual img.amx-hero__phone--right {
    filter: blur(3px) saturate(0.95) !important;
    border-radius: 36px !important;
    opacity: 0.85 !important;
  }
  html body .amx-hero__visual img.amx-hero__phone--left {
    transform: translateX(-38%) scale(0.86) translateY(4%) !important;
  }
  html body .amx-hero__visual img.amx-hero__phone--right {
    transform: translateX(38%) scale(0.86) translateY(4%) !important;
  }
}

/* ---------- 2) Headline mobile: 18px / 1.18 / 95% width = 3 linhas ----- */
@media (max-width: 720px) {
  html body .amx-hero__headline {
    font-size: 18px !important;
    line-height: 1.22 !important;
    letter-spacing: -0.01em !important;
    max-width: 95% !important;
    padding-inline: 0 !important;
    margin-inline: auto !important;
  }
}


/* ============================================================================
   FIX-PASS-11 - workflow mobile slide-advance: cards 100vw com scroll-snap-stop
   strict (cada card snapa, JS faz scrollTo de card pra card a cada 4s)
   ============================================================================ */
@media (max-width: 720px) {
  html body .amx-workflow__viewport {
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;     /* anima auto-advance suave */
  }
  html body .amx-workflow__card {
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }
  html body .amx-workflow__track {
    gap: 0 !important;
    padding-inline: 0 !important;
  }
}


/* ============================================================================
   FIX-PASS-12 - scroll-snap proximity (nao mandatory) pra nao hijack scrollTo JS
   ============================================================================ */
@media (max-width: 720px) {
  html body .amx-workflow__viewport {
    scroll-snap-type: x proximity !important;  /* era mandatory - hijackava scrollTo */
    scroll-behavior: auto !important;          /* JS controla anim via rAF custom */
  }
  html body .amx-workflow__card {
    scroll-snap-align: center !important;
    scroll-snap-stop: normal !important;
  }
}


/* ============================================================================
   FIX-PASS-13 - mobile workflow: snap OFF (estava resetando scroll JS pra snap point)
   ============================================================================ */
@media (max-width: 720px) {
  html body .amx-workflow__viewport {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
  }
  html body .amx-workflow__card {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }
}


/* ============================================================================
   FIX-PASS-14 - workflow mobile: scroll continuo, cards menores,
   sem padding, sem mascara - cards somem nas bordas da pagina
   ============================================================================ */
@media (max-width: 720px) {
  html body .amx-workflow {
    padding-inline: 0 !important;
  }
  html body .amx-workflow__head {
    padding-inline: 20px !important;
  }
  html body .amx-workflow__viewport {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    padding-inline: 0 !important;
  }
  html body .amx-workflow__viewport::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  html body .amx-workflow__track {
    animation: none !important;
    transform: none !important;
    display: flex !important;
    width: max-content !important;
    gap: 14px !important;
    padding-inline: 14px !important;
  }
  html body .amx-workflow__card {
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 280px !important;
    min-height: 220px !important;
    padding: 22px !important;
    border-radius: 18px !important;
    border: 1px solid var(--border-subtle) !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }
  /* Duplicatas visiveis pro loop infinito JS */
  html body .amx-workflow__track > article[aria-hidden="true"] {
    display: flex !important;
  }
}


/* ============================================================================
   FIX-PASS-15 - mobile: mask gradient nas bordas + padding interno suficiente
   pros cards somirem suavemente quando saem da viewport (em vez de cortar abrupt)
   ============================================================================ */
@media (max-width: 720px) {
  html body .amx-workflow__viewport {
    mask-image: linear-gradient(to right,
      transparent 0%,
      black 6%,
      black 94%,
      transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right,
      transparent 0%,
      black 6%,
      black 94%,
      transparent 100%) !important;
  }
  /* Padding maior pros cards primeiro/ultimo aparecerem alem da mask fade */
  html body .amx-workflow__track {
    padding-inline: 24px !important;
    gap: 16px !important;
  }
}


/* ============================================================================
   FIX-PASS-16 - hero mobile: stroke vertical + gap excessivo
   Causa raiz: mask-image deixava 30% do bottom transparente, X amarelo
   sangrava pelo gap criando halo. Reduzir mask e X opacity.
   ============================================================================ */
@media (max-width: 720px) {
  /* Mask quase imperceptivel - so 4% de fade no bottom pra suavizar borda */
  html body .amx-hero__visual {
    mask-image: linear-gradient(to bottom,
      black 0%, black 96%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to bottom,
      black 0%, black 96%, transparent 100%) !important;
    margin-bottom: 0 !important;
  }
  /* X com opacidade BEM menor mobile - evita halo */
  html body .amx-hero__x,
  html body .amx-hero__x--main {
    opacity: 0.18 !important;
    filter: blur(32px) saturate(1) !important;
  }
  /* Gap menor entre mockup e copy */
  html body .amx-hero__inner {
    gap: 8px !important;
  }
  html body .amx-hero__copy {
    margin-top: 0 !important;
    padding-top: 0 !important;
    gap: 12px !important;
  }
  /* Drop-shadow mais sutil pra nao parecer halo */
  html body .amx-hero__phone--main {
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35)) !important;
  }
}


/* ============================================================================
   FIX-PASS-17 - hero mobile: container aspect ratio MATCH ao GIF (624/1110)
   Antes: container 9/19 (0.47) + gif 624/1110 (0.56) -> letterbox 45px top/bot
   Agora: container 624/1110 -> gif preenche perfeitamente, sem espaco vazio
   Tambem garante phones todos com position absolute inset 0 height 100%
   ============================================================================ */
@media (max-width: 720px) {
  html body .amx-hero__visual {
    aspect-ratio: 624 / 1110 !important;   /* match gif natural ratio */
    width: 68% !important;
    max-width: 280px !important;
    overflow: visible !important;
  }
  /* Phones todos absolute fill - definitivo */
  html body .amx-hero__visual img.amx-hero__phone--main {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    z-index: 4 !important;
  }
  html body .amx-hero__visual img.amx-hero__phone--left,
  html body .amx-hero__visual img.amx-hero__phone--right {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    z-index: 2 !important;
    opacity: 0.65 !important;
    filter: blur(4px) saturate(0.92) !important;
    border-radius: 36px !important;
  }
  html body .amx-hero__visual img.amx-hero__phone--left {
    transform: translateX(-30%) scale(0.84) !important;
  }
  html body .amx-hero__visual img.amx-hero__phone--right {
    transform: translateX(30%) scale(0.84) !important;
  }
}


/* ============================================================================
   FIX-PASS-18 - Tempo section: BG amarelo animado + dark card centralizado
   - Section bg: gradiente conic + radial Brand-300 -> Brand-500 com anim suave
   - Card escuro flutua no centro (manten copy + laptop)
   - Funciona em desktop e mobile
   ============================================================================ */

html body .amx-urgency {
  position: relative !important;
  background:
    radial-gradient(ellipse 70% 60% at 20% 30%, var(--color-brand-300) 0%, transparent 55%),
    radial-gradient(ellipse 75% 65% at 80% 70%, var(--color-brand-500) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 50%, var(--color-brand-400) 0%, transparent 70%),
    linear-gradient(135deg, var(--color-brand-400) 0%, var(--color-brand-500) 100%) !important;
  background-size: 220% 220%, 200% 200%, 180% 180%, 100% 100% !important;
  animation: amxUrgencyFlow 14s ease-in-out infinite !important;
  overflow: hidden !important;
  padding-block: clamp(80px, 10vw, 140px) !important;
}

/* Bg vetorial overlay (mantem o glow original mas sutil) */
html body .amx-urgency__bg {
  display: none !important;
}

/* INNER agora vira CARD escuro centralizado sobre o BG amarelo */
html body .amx-urgency__inner {
  position: relative !important;
  z-index: 1 !important;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, #131313 0%, #050505 80%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 32px !important;
  padding: clamp(40px, 5vw, 72px) !important;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
  max-width: 1180px !important;
  margin-inline: auto !important;
  overflow: hidden !important;
}

/* Anim de fluxo de cores - shifts background-position dos radial gradients */
@keyframes amxUrgencyFlow {
  0%, 100% {
    background-position: 0% 50%, 100% 50%, 50% 50%, 0% 0%;
  }
  25% {
    background-position: 30% 30%, 70% 70%, 60% 40%, 25% 25%;
  }
  50% {
    background-position: 100% 50%, 0% 50%, 50% 50%, 50% 50%;
  }
  75% {
    background-position: 70% 70%, 30% 30%, 40% 60%, 75% 75%;
  }
}

/* Mobile: card menos padding, mesma anim */
@media (max-width: 720px) {
  html body .amx-urgency {
    padding-block: 56px !important;
    padding-inline: 16px !important;
  }
  html body .amx-urgency__inner {
    padding: 32px 22px !important;
    border-radius: 24px !important;
  }
}

/* Respeitar reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html body .amx-urgency {
    animation: none !important;
  }
}


/* ============================================================================
   FIX-PASS-19 - Tempo section: auditoria + reconstrucao limpa
   1) BG amarelo SOLIDO (sem fades transparent que criavam mascaras pretas)
   2) Card 1.2fr / 1fr (texto + laptop com proporcao correta)
   3) Headline font menor (cabe 3 linhas)
   4) Animacao linear gradient + radials que SOMAM cor (nunca transparent)
   ============================================================================ */

html body .amx-urgency {
  position: relative !important;
  /* Gradient neon amarelo (definido pelo user) - 5 tons vibrantes */
  background-color: #ffeb2f !important;
  background-image: linear-gradient(115deg,
      #efff50 8%,
      rgb(255, 238, 75) 25%,
      rgb(255, 237, 67) 43%,
      rgb(255, 240, 89) 58%,
      #ffeb2f 78%) !important;
  background-size: 300% 300% !important;
  background-repeat: no-repeat !important;
  /* bg-position SEM !important - keyframes animam */
  animation: amxUrgencyFlow 14s ease-in-out infinite !important;
  overflow: hidden !important;
  padding-block: clamp(80px, 10vw, 140px) !important;
}

/* Highlights sobrepostos - estilo do user (sem blend, cores cheias) +
   bg-size grande pra animacao bg-position ter onde se mover */
html body .amx-urgency::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 30%, #ffee00, #ffee4b 100%),
    radial-gradient(ellipse 80% 60% at 80% 70%, #fff066, #ffea25 100%) !important;
  background-size: 250% 250%, 270% 270% !important;  /* anim precisa de espaco */
  background-repeat: no-repeat, no-repeat !important;
  opacity: 1 !important;                              /* user queria 1.55 (invalido -> 1) */
  animation: amxUrgencyHighlights 18s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Anim do linear gradient base - cores fluindo continuamente */
@keyframes amxUrgencyFlow {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

/* Anim dos highlights radiais - movimento independente */
@keyframes amxUrgencyHighlights {
  0%, 100% { background-position: 0% 0%, 100% 100%, 50% 50%; }
  33%      { background-position: 80% 20%, 20% 80%, 30% 70%; }
  66%      { background-position: 40% 80%, 60% 20%, 70% 30%; }
}

/* Card escuro centralizado - grid 1.2fr/1fr pra texto ter mais espaco */
html body .amx-urgency__inner {
  position: relative !important;
  z-index: 1 !important;
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%, #131313, #050505 80%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 28px !important;
  padding: clamp(36px, 4vw, 64px) clamp(32px, 4vw, 60px) !important;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  max-width: 1120px !important;
  margin-inline: auto !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 32px !important;
  align-items: center !important;
}

@media (min-width: 880px) {
  html body .amx-urgency__inner {
    grid-template-columns: 1.15fr 1fr !important;
    gap: 48px !important;
  }
}

/* Headline ajustada - cabe em 3 linhas naturalmente */
html body .amx-urgency__title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 3.2vw, 40px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.025em !important;
  color: var(--text-primary) !important;
  text-wrap: balance !important;
}

html body .amx-urgency__title em {
  color: var(--brand-default) !important;
  font-weight: 700 !important;
  font-style: normal !important;
}

html body .amx-urgency__copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;     /* tudo alinhado a esquerda na coluna */
  gap: 16px !important;
}

/* Pill: nao usar flex-start auto, fica colado na coluna esquerda */
html body .amx-urgency__pill {
  margin: 0 !important;
  align-self: flex-start !important;
  /* Tamanho maior pra destacar na section amarela */
  height: 50px !important;
  min-height: 50px !important;
  padding: 6px 24px 6px 6px !important;
  gap: 14px !important;
  font-size: 16px !important;
}
html body .amx-urgency__pill::before {
  width: 168px !important;
  height: 40px !important;
  flex: 0 0 168px !important;
}
/* Mobile da pill urgency */
@media (max-width: 720px) {
  html body .amx-urgency__pill {
    height: 42px !important;
    min-height: 42px !important;
    padding: 5px 18px 5px 5px !important;
    font-size: 14px !important;
    gap: 12px !important;
  }
  html body .amx-urgency__pill::before {
    width: 140px !important;
    height: 33px !important;
    flex: 0 0 140px !important;
  }
}

html body .amx-urgency__body {
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--text-muted) !important;
}

html body .amx-urgency__visual {
  position: relative !important;
  max-width: 500px !important;
  margin-inline: auto !important;
}

/* Mobile: stack vertical, padding reduzido, link bem alinhado */
@media (max-width: 720px) {
  html body .amx-urgency {
    padding-block: 48px !important;
    padding-inline: 14px !important;
  }
  html body .amx-urgency__inner {
    padding: 26px 22px !important;
    border-radius: 22px !important;
    gap: 20px !important;
  }
  /* Gaps internos do copy: tighter no mobile */
  html body .amx-urgency__copy {
    gap: 12px !important;
  }
  html body .amx-urgency__title {
    font-size: 22px !important;
    line-height: 1.18 !important;
  }
  html body .amx-urgency__body {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  /* LINK "Voce ja viu..." - svg centralizado vertical c/ texto multi-linha */
  html body .amx-urgency__highlight {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }
  html body .amx-urgency__highlight > span {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  html body .amx-urgency__highlight > svg {
    flex: 0 0 auto !important;
    align-self: center !important;
    width: 16px !important;
    height: 16px !important;
  }
  /* Laptop mockup mais contido no mobile pra nao vazar do card */
  html body .amx-urgency__visual {
    max-width: 320px !important;
  }
}

/* Scroll-appear suave - longer cubic ease */
html body .amx-urgency [data-mx-appear],
html body .amx-urgency.amx-urgency [data-mx-appear="up"] {
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Reduced motion: desliga tudo */
@media (prefers-reduced-motion: reduce) {
  html body .amx-urgency,
  html body .amx-urgency::before {
    animation: none !important;
  }
}


/* ============================================================================
   FIX-PASS-23 - AUDITORIA FINAL: hero linhas+lente, paraquem font, SEO base
   ============================================================================ */

/* ---------- HERO: H1 menor (3 linhas), lente gradient escura atras text ---- */
@media (min-width: 721px) {
  html body .amx-hero__headline {
    font-size: clamp(32px, 3.4vw, 42px) !important;   /* era ate 80px */
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
    max-width: 720px !important;                       /* mais largo = menos linhas */
    text-wrap: balance !important;
  }
  html body .amx-hero__body {
    max-width: 560px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  /* Lente gradient escura atras do text column - melhora contraste sobre X amarelo */
  html body .amx-hero__copy {
    position: relative !important;
    z-index: 5 !important;
    isolation: isolate !important;
  }
  html body .amx-hero__copy::after {
    content: '' !important;
    position: absolute !important;
    inset: -40px -60px -40px -60px !important;
    background: radial-gradient(ellipse 70% 80% at 40% 50%,
      rgba(5,5,5,0.85) 0%,
      rgba(5,5,5,0.6) 50%,
      transparent 90%) !important;
    z-index: -1 !important;
    pointer-events: none !important;
    border-radius: 60px !important;
    filter: blur(30px) !important;
  }
}

/* ---------- PARA QUEM E: H2 proporcional (era 68px gigante) -------------- */
html body .amx-paraquem__title {
  font-size: clamp(32px, 3.6vw, 44px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
}

/* ---------- Heading hierarchy: garantir consistencia ---------------------- */
html body h2,
html body .amx-section__title {
  font-family: var(--font-display) !important;
}


/* ============================================================================
   FIX-PASS-24 - PADRONIZACAO DE TIPOGRAFIA
   Todos titulos H2 das secoes no mesmo padrao: clamp(28,3.4vw,42px) lh 1.1
   Subs em 17px. FAQ Q em 17px. Card titles 19-22px.
   ============================================================================ */

/* H2 padrao universal pra TODAS secoes */
html body .amx-pillars__title,
html body .amx-paraquem__title,
html body .amx-workflow__title,
html body .amx-problem__title,
html body .amx-urgency__title,
html body .mx-cta__headline,
html body .mx-faq .mx-section__title,
html body .mx-section__title {
  font-size: clamp(28px, 3.4vw, 42px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
  font-weight: 700 !important;
}

/* Subs/intro paragraphs padrao */
html body .amx-pillars__sub,
html body .amx-paraquem__sub,
html body .amx-workflow__sub,
html body .amx-problem__sub,
html body .amx-urgency__body,
html body .mx-cta__sub {
  font-size: 17px !important;
  line-height: 1.55 !important;
  font-weight: 300 !important;
}

/* Card titles H3 padrao */
html body .amx-pillars__card-title,
html body .amx-paraquem__card-title,
html body .amx-workflow__card-title,
html body .amx-pillars__face h3,
html body .amx-workflow__card h3,
html body .amx-pillars__front h3,
html body .amx-pillars__back h3 {
  font-size: 19px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* Card bodies */
html body .amx-pillars__card-body,
html body .amx-paraquem__card-body,
html body .amx-workflow__card-body,
html body .amx-pillars__back p,
html body .amx-workflow__card p,
html body .amx-paraquem__card p {
  font-size: 14px !important;
  line-height: 1.55 !important;
  font-weight: 300 !important;
}

/* FAQ question - padrao */
html body .mx-faq-item__q,
html body .mx-faq-item__summary {
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}
html body .mx-faq-item__answer p,
html body .mx-faq-item__content p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  font-weight: 300 !important;
}

/* MOBILE: reduzir proporcional */
@media (max-width: 720px) {
  html body .amx-pillars__title,
  html body .amx-paraquem__title,
  html body .amx-workflow__title,
  html body .amx-problem__title,
  html body .amx-urgency__title,
  html body .mx-cta__headline,
  html body .mx-faq .mx-section__title {
    font-size: 26px !important;
    line-height: 1.15 !important;
  }
  html body .amx-pillars__sub,
  html body .amx-paraquem__sub,
  html body .amx-workflow__sub,
  html body .amx-problem__sub,
  html body .amx-urgency__body,
  html body .mx-cta__sub {
    font-size: 14px !important;
  }
  html body .amx-pillars__card-title,
  html body .amx-paraquem__card-title,
  html body .amx-workflow__card-title,
  html body .amx-workflow__card h3,
  html body .amx-pillars__face h3 {
    font-size: 17px !important;
  }
  html body .mx-faq-item__q {
    font-size: 15px !important;
  }
}


/* ============================================================================
   FIX-PASS-25 - SPACING TIGHTER: proporcional aos titulos 42px
   Padding-block secoes reduzido. Head margin-bottom reduzido.
   ============================================================================ */

/* Section paddings tighter - proporcional ao H2 42px */
html body .amx-problem,
html body .amx-paraquem,
html body .amx-workflow,
html body .amx-pillars,
html body .mx-cta,
html body .mx-faq {
  padding-block: clamp(48px, 6vw, 84px) !important;
}

/* Urgency tem padding maior porque tem BG amarelo - mas tambem reduz */
html body .amx-urgency {
  padding-block: clamp(56px, 7vw, 100px) !important;
}

/* Head margin-bottom (gap entre H2 e content do card) */
html body .amx-problem__head,
html body .amx-paraquem__head,
html body .amx-workflow__head,
html body .amx-pillars__head,
html body .mx-cta__container,
html body .mx-faq .mx-section__head {
  margin-bottom: clamp(28px, 3vw, 44px) !important;
  gap: clamp(10px, 1.2vw, 14px) !important;
}

/* Gaps internos dos heads (entre pill, titulo, sub) tighter */
html body .amx-problem__head .mx-pill,
html body .amx-paraquem__head .mx-pill,
html body .amx-workflow__head .mx-pill,
html body .amx-pillars__head .mx-pill,
html body .mx-cta__container .mx-pill,
html body .mx-faq .mx-pill {
  margin-bottom: 4px !important;
}

/* Card grid gaps (Pillars/Para quem) */
html body .amx-pillars__grid,
html body .amx-paraquem__grid {
  gap: clamp(14px, 1.5vw, 20px) !important;
}

/* Mobile: spacing ainda mais tight */
@media (max-width: 720px) {
  html body .amx-problem,
  html body .amx-paraquem,
  html body .amx-workflow,
  html body .amx-pillars,
  html body .mx-cta,
  html body .mx-faq {
    padding-block: 40px !important;
  }
  html body .amx-urgency {
    padding-block: 48px !important;
  }
  html body .amx-problem__head,
  html body .amx-paraquem__head,
  html body .amx-workflow__head,
  html body .amx-pillars__head,
  html body .mx-cta__container,
  html body .mx-faq .mx-section__head {
    margin-bottom: 24px !important;
    gap: 10px !important;
  }
  html body .amx-pillars__grid,
  html body .amx-paraquem__grid {
    gap: 14px !important;
  }
}


/* ============================================================================
   FIX-PASS-26 - workflow glow nao cortar nas bordas
   Reposiciona pro CENTRO vertical (nao bottom) + tamanho menor + blur maior
   Mantem contido dentro da secao sem extrapolar nas bordas
   ============================================================================ */

html body .amx-workflow {
  position: relative !important;
  overflow: hidden !important;  /* containerize o glow */
}

html body .amx-workflow::after {
  content: '' !important;
  position: absolute !important;
  /* Centralizado vertical, levemente a direita - longe das bordas top/bottom */
  top: 30% !important;
  bottom: auto !important;
  right: -8% !important;
  left: auto !important;
  width: clamp(280px, 28vw, 420px) !important;
  height: clamp(280px, 28vw, 420px) !important;
  background: radial-gradient(circle,
    rgba(255, 231, 0, 0.18) 0%,
    rgba(255, 231, 0, 0.08) 35%,
    transparent 65%) !important;
  filter: blur(60px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transform: translateY(-50%) !important;
}

/* Tablet: glow um pouco menor + recuado */
@media (min-width: 721px) and (max-width: 1023px) {
  html body .amx-workflow::after {
    width: 280px !important;
    height: 280px !important;
    right: -10% !important;
    filter: blur(50px) !important;
  }
}

/* Mobile: glow bem pequeno + centralizado, sem cortar */
@media (max-width: 720px) {
  html body .amx-workflow::after {
    width: 220px !important;
    height: 220px !important;
    top: 40% !important;
    right: -15% !important;
    filter: blur(45px) !important;
    opacity: 0.7 !important;
  }
}

/* ============================================================
 * FIX FINAL (deploy): backgrounds compatíveis com Elementor
 *
 * Estratégia:
 *   - paraquem + pillars: ::before com quadriculado em opacity baixa
 *     (igual ao local), garantindo z-index/position pra renderizar
 *     dentro do widget HTML do Elementor.
 *   - urgency: NÃO TOCAR — já tem BG amarelo sólido animado.
 *   - CTA + FAQ wrap: vetores.png direto no container (não via ::before)
 *     porque o wrapper pode ser perdido pelo Elementor.
 * ============================================================ */

/* Garante position:relative no parent + overflow:hidden pra conter o ::before */
html body section.amx-paraquem,
html body section.amx-pillars {
  position: relative !important;
  overflow: hidden !important;
  background-color: #050505 !important;
}

/* Restaura o ::before com quadriculado (escala natural cover) */
html body section.amx-paraquem::before,
html body section.amx-pillars::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background-image: url("../assets/images/hero-bg/quadriculado.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 0.22 !important;  /* era 0.14 — aumentei pra ficar visível no contexto Elementor */
  mix-blend-mode: screen !important;
  z-index: 0 !important;
}

/* Glows amarelos no Para quem é (2) e Pillars (1) - via ::after pra
   não conflitar com ::before do quadriculado */
html body section.amx-paraquem::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background-image:
    radial-gradient(circle at 86% 49%, rgba(255, 231, 0, 0.12), transparent 15%),
    radial-gradient(circle at 12% 72%, rgba(255, 231, 0, 0.08), transparent 18%) !important;
  z-index: 0 !important;
}

/* Conteúdo da section sobe acima dos pseudos */
html body section.amx-paraquem > *,
html body section.amx-pillars > * {
  position: relative !important;
  z-index: 1 !important;
}

/* CTA + FAQ wrap: vetores.png direto no container (fallback robusto) */
html body .mx-cta-faq-wrap {
  background-color: #050505 !important;
  background-image: url("../assets/images/textures/vetores.png") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-blend-mode: lighten !important;
  position: relative !important;
  isolation: isolate;
}

html body .mx-cta-faq-wrap::before {
  display: none !important;
}

/* FALLBACK: se o Elementor estripou o <div class="mx-cta-faq-wrap">
   e colocou .mx-cta e .mx-faq como widgets separados, aplica o BG
   diretamente neles. Cobre os 2 cenários sem duplicar visualmente. */
html body section.mx-cta,
html body section.mx-faq {
  background-color: #050505 !important;
  background-image: url("../assets/images/textures/vetores.png") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-blend-mode: lighten !important;
}

/* Se mx-cta-faq-wrap existir E contém as duas sections, neutraliza
   o BG das sections internas pra evitar dupla camada visual */
html body .mx-cta-faq-wrap section.mx-cta,
html body .mx-cta-faq-wrap section.mx-faq {
  background-image: none !important;
  background-color: transparent !important;
}